diff --git a/src/components/Breadcrumb/Breadcrumb.test.js b/src/components/Breadcrumb/Breadcrumb.test.js index 6f8c68b2..292cc147 100644 --- a/src/components/Breadcrumb/Breadcrumb.test.js +++ b/src/components/Breadcrumb/Breadcrumb.test.js @@ -1,4 +1,4 @@ -import { fireEvent, render } from '@testing-library/svelte'; +import { render } from '@testing-library/svelte'; import Component from './Breadcrumb.Story.svelte'; describe('Breadcrumb', () => { diff --git a/src/components/Button/Button.Story.svelte b/src/components/Button/Button.Story.svelte index c08c2dd1..41383af8 100644 --- a/src/components/Button/Button.Story.svelte +++ b/src/components/Button/Button.Story.svelte @@ -11,7 +11,6 @@ kind, disabled, size, - renderIcon, iconDescription, small, tooltipPosition, diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js index 411777c8..11274f5b 100644 --- a/src/components/Button/Button.stories.js +++ b/src/components/Button/Button.stories.js @@ -3,8 +3,6 @@ import Component from './Button.Story.svelte'; export default { title: 'Button', decorators: [withKnobs] }; -// TODO: add selectable renderIcon for Default, Icon-only stories - const kinds = { 'Primary button (primary)': 'primary', 'Secondary button (secondary)': 'secondary', diff --git a/src/components/ComposedModal/ComposedModal.svelte b/src/components/ComposedModal/ComposedModal.svelte index 3a4cb7a0..2a9b6543 100644 --- a/src/components/ComposedModal/ComposedModal.svelte +++ b/src/components/ComposedModal/ComposedModal.svelte @@ -9,7 +9,6 @@ export let style = undefined; import { createEventDispatcher, tick, setContext, onMount, afterUpdate } from 'svelte'; - import { writable } from 'svelte/store'; import { cx } from '../../lib'; const dispatch = createEventDispatcher(); diff --git a/src/components/ContentSwitcher/ContentSwitcher.Story.svelte b/src/components/ContentSwitcher/ContentSwitcher.Story.svelte index b8ff1961..39037db7 100644 --- a/src/components/ContentSwitcher/ContentSwitcher.Story.svelte +++ b/src/components/ContentSwitcher/ContentSwitcher.Story.svelte @@ -4,17 +4,26 @@ import Layout from '../../internal/ui/Layout.svelte'; import ContentSwitcher from './ContentSwitcher.svelte'; import Switch from './Switch.svelte'; + + let selectedIndex = 0; {#if story === 'selected'} - + { + console.log('on:change', detail); + }}> {:else} - + { + console.log('on:change', detail); + }}> diff --git a/src/components/ContentSwitcher/ContentSwitcher.svelte b/src/components/ContentSwitcher/ContentSwitcher.svelte index 14dbe16f..38f3561f 100644 --- a/src/components/ContentSwitcher/ContentSwitcher.svelte +++ b/src/components/ContentSwitcher/ContentSwitcher.svelte @@ -39,12 +39,9 @@ }); $: if (switches[currentIndex]) { + dispatch('change', currentIndex); selectedIndex = currentIndex; currentId.set(switches[currentIndex].id); - switches = switches.map((_, i) => ({ ..._, selected: i === currentIndex })); - - const { id, ...rest } = switches[currentIndex]; - dispatch('change', { ...rest, index: currentIndex }); } diff --git a/src/components/DatePicker/DatePicker.svelte b/src/components/DatePicker/DatePicker.svelte index f30a92bc..f07183aa 100644 --- a/src/components/DatePicker/DatePicker.svelte +++ b/src/components/DatePicker/DatePicker.svelte @@ -22,7 +22,6 @@ let inputs = writable([]); let inputIds = derived(inputs, _ => _.map(({ id }) => id)); - let inputsById = derived(inputs, _ => _.reduce((a, c) => ({ ...a, [c.id]: c }), {})); let labelTextEmpty = derived(inputs, _ => _.filter(({ labelText }) => !!labelText).length === 0); let inputValue = writable(value); let mode = writable(datePickerType); @@ -48,7 +47,7 @@ inputRefTo = ref; } }, - updateValue: ({ id, type, value }) => { + updateValue: ({ type, value }) => { if ((!calendar && type === 'input') || type === 'change') { inputValue.set(value); } diff --git a/src/components/DatePicker/DatePickerInput.svelte b/src/components/DatePicker/DatePickerInput.svelte index 18a0515c..55a2529f 100644 --- a/src/components/DatePicker/DatePickerInput.svelte +++ b/src/components/DatePicker/DatePickerInput.svelte @@ -30,7 +30,6 @@ } = getContext('DatePicker'); let inputRef = undefined; - let iconRef = undefined; add({ id, labelText }); @@ -56,10 +55,10 @@ class={cx('--date-picker__input')} on:input on:input={({ target }) => { - updateValue({ id, type: 'input', value: target.value }); + updateValue({ type: 'input', value: target.value }); }} on:change={({ target }) => { - updateValue({ id, type: 'change', value: target.value }); + updateValue({ type: 'change', value: target.value }); }} on:keydown on:keydown={({ key }) => { diff --git a/src/components/DatePicker/flatpickr.js b/src/components/DatePicker/flatpickr.js index 702ccbfb..a29c220b 100644 --- a/src/components/DatePicker/flatpickr.js +++ b/src/components/DatePicker/flatpickr.js @@ -65,10 +65,10 @@ function createCalendar({ options, base, input, dispatch }) { onClose: () => { dispatch('close'); }, - onMonthChange: ({}, {}, instance) => { + onMonthChange: (s, d, instance) => { updateMonthNode(instance); }, - onOpen: ({}, {}, instance) => { + onOpen: (s, d, instance) => { dispatch('open'); updateClasses(instance); updateMonthNode(instance); diff --git a/src/components/FileUploader/FileUploader.svelte b/src/components/FileUploader/FileUploader.svelte index 61ae76d9..3f6c14e9 100644 --- a/src/components/FileUploader/FileUploader.svelte +++ b/src/components/FileUploader/FileUploader.svelte @@ -64,7 +64,7 @@ } }} on:click - on:click={evt => { + on:click={() => { files = files.filter((_, index) => index !== i); }} {iconDescription} diff --git a/src/components/FileUploader/FileUploaderDropContainer.svelte b/src/components/FileUploader/FileUploaderDropContainer.svelte index 24e40c9e..ac56deaf 100644 --- a/src/components/FileUploader/FileUploaderDropContainer.svelte +++ b/src/components/FileUploader/FileUploaderDropContainer.svelte @@ -13,8 +13,6 @@ export let style = undefined; import { createEventDispatcher } from 'svelte'; - import SkeletonText from '../SkeletonText'; - import { ButtonSkeleton } from '../Button'; import { cx } from '../../lib'; const dispatch = createEventDispatcher(); diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte index a4bc337b..dce0d29c 100644 --- a/src/components/Modal/Modal.svelte +++ b/src/components/Modal/Modal.svelte @@ -6,6 +6,7 @@ export let id = Math.random(); export let modalHeading = undefined; export let modalLabel = undefined; + export let modalAriaLabel = undefined; export let open = false; export let iconDescription = 'Close the modal'; export let primaryButtonDisabled = false; @@ -19,7 +20,6 @@ export let style = undefined; import { createEventDispatcher, afterUpdate, onDestroy } from 'svelte'; - import { writable } from 'svelte/store'; import Close20 from 'carbon-icons-svelte/lib/Close20'; import { cx } from '../../lib'; import Button from '../Button'; diff --git a/src/components/OverflowMenu/OverflowMenu.svelte b/src/components/OverflowMenu/OverflowMenu.svelte index dc7550c7..8c147fdc 100644 --- a/src/components/OverflowMenu/OverflowMenu.svelte +++ b/src/components/OverflowMenu/OverflowMenu.svelte @@ -14,7 +14,7 @@ export let style = undefined; import { createEventDispatcher, setContext, afterUpdate } from 'svelte'; - import { writable, derived } from 'svelte/store'; + import { writable } from 'svelte/store'; import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16'; import { cx } from '../../lib'; import { formatStyle } from './formatStyle'; diff --git a/src/components/ProgressIndicator/ProgressIndicator.stories.js b/src/components/ProgressIndicator/ProgressIndicator.stories.js index a5b73749..b9a4712f 100644 --- a/src/components/ProgressIndicator/ProgressIndicator.stories.js +++ b/src/components/ProgressIndicator/ProgressIndicator.stories.js @@ -1,4 +1,4 @@ -import { withKnobs, boolean, text, number } from '@storybook/addon-knobs'; +import { withKnobs, boolean, number } from '@storybook/addon-knobs'; import Component from './ProgressIndicator.Story.svelte'; export default { title: 'ProgressIndicator', decorators: [withKnobs] }; diff --git a/src/components/ProgressIndicator/ProgressStep.svelte b/src/components/ProgressIndicator/ProgressStep.svelte index 0179b548..ad00822d 100644 --- a/src/components/ProgressIndicator/ProgressStep.svelte +++ b/src/components/ProgressIndicator/ProgressStep.svelte @@ -10,12 +10,11 @@ export let disabled = false; export let style = undefined; - import { createEventDispatcher, getContext } from 'svelte'; + import { getContext } from 'svelte'; import Warning16 from 'carbon-icons-svelte/lib/Warning16'; import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16'; import { cx } from '../../lib'; - const dispatch = createEventDispatcher(); const id = Math.random(); const { stepsById, add, change } = getContext('ProgressIndicator'); diff --git a/src/components/RadioButton/RadioButton.Story.svelte b/src/components/RadioButton/RadioButton.Story.svelte index 6ffc2e4e..0747f322 100644 --- a/src/components/RadioButton/RadioButton.Story.svelte +++ b/src/components/RadioButton/RadioButton.Story.svelte @@ -2,7 +2,6 @@ export let story = undefined; import Layout from '../../internal/ui/Layout.svelte'; - import ListItem from '../ListItem'; import RadioButton from './RadioButton.svelte'; import RadioButtonSkeleton from './RadioButton.Skeleton.svelte'; diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js index aa9ce3fd..92bb4b3b 100644 --- a/src/components/Select/Select.stories.js +++ b/src/components/Select/Select.stories.js @@ -3,11 +3,6 @@ import Component from './Select.Story.svelte'; export default { title: 'Select', decorators: [withKnobs] }; -const labelPositions = { - 'Left (left)': 'left', - 'Right (right)': 'right' -}; - export const Default = () => ({ Component, props: { @@ -32,5 +27,8 @@ export const Default = () => ({ export const Skeleton = () => ({ Component, - props: { story: 'skeleton', hideLabel: boolean('No label (hideLabel in )', false) + } }); diff --git a/src/components/Slider/Slider.svelte b/src/components/Slider/Slider.svelte index 1c4f2fd5..d2d601ac 100644 --- a/src/components/Slider/Slider.svelte +++ b/src/components/Slider/Slider.svelte @@ -9,9 +9,8 @@ export let minLabel = ''; export let maxLabel = ''; export let labelText = ''; - export let formatLabel = (value, label) => { - return typeof label === 'function' ? label(value) : `${value}${label}`; - }; + export let formatLabel = (value, label) => + typeof label === 'function' ? label(value) : `${value}${label}`; export let step = 1; export let stepMultiplier = 4; export let disabled = false; @@ -22,7 +21,7 @@ export let light = false; export let style = undefined; - import { createEventDispatcher, afterUpdate, tick } from 'svelte'; + import { createEventDispatcher, afterUpdate } from 'svelte'; import { cx } from '../../lib'; const dispatch = createEventDispatcher(); diff --git a/src/components/StructuredList/StructuredList.stories.js b/src/components/StructuredList/StructuredList.stories.js index c8604080..aaa0cb79 100644 --- a/src/components/StructuredList/StructuredList.stories.js +++ b/src/components/StructuredList/StructuredList.stories.js @@ -1,4 +1,4 @@ -import { withKnobs, select, boolean, text } from '@storybook/addon-knobs'; +import { withKnobs } from '@storybook/addon-knobs'; import Component from './StructuredList.Story.svelte'; export default { title: 'StructuredList', decorators: [withKnobs] }; diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte index 8689fe37..f8a936da 100644 --- a/src/components/Tile/ExpandableTile.svelte +++ b/src/components/Tile/ExpandableTile.svelte @@ -13,7 +13,7 @@ import { onMount, afterUpdate } from 'svelte'; import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16'; - import { cx, css } from '../../lib'; + import { cx } from '../../lib'; let tile = undefined; let tileContent = undefined; diff --git a/src/components/Tile/Tile.stories.js b/src/components/Tile/Tile.stories.js index 4a1d95f3..bf443706 100644 --- a/src/components/Tile/Tile.stories.js +++ b/src/components/Tile/Tile.stories.js @@ -1,13 +1,11 @@ -import { withKnobs, select, number, boolean, text } from '@storybook/addon-knobs'; +import { withKnobs, number, boolean, text } from '@storybook/addon-knobs'; import Component from './Tile.Story.svelte'; export default { title: 'Tile', decorators: [withKnobs] }; export const Default = () => ({ Component, - props: { - light: boolean('Light variant (light)', false) - } + props: { light: boolean('Light variant (light)', false) } }); export const Clickable = () => ({ @@ -28,13 +26,6 @@ export const MultiSelect = () => ({ } }); -const radioValues = { - None: '', - standard: 'standard', - 'default-selected': 'default-selected', - selected: 'selected' -}; - export const Selectable = () => ({ Component, props: { diff --git a/src/components/TimePicker/TimePicker.svelte b/src/components/TimePicker/TimePicker.svelte index 4cc36608..156af8d6 100644 --- a/src/components/TimePicker/TimePicker.svelte +++ b/src/components/TimePicker/TimePicker.svelte @@ -15,10 +15,7 @@ export let light = false; export let style = undefined; - import { createEventDispatcher } from 'svelte'; import { cx } from '../../lib'; - - const dispatch = createEventDispatcher();
diff --git a/src/lib/css.js b/src/lib/css.js index 98097249..ad10614c 100644 --- a/src/lib/css.js +++ b/src/lib/css.js @@ -1,6 +1,6 @@ function css(array) { return array - .map((item, i) => { + .map(item => { if (!item) return false; return Array.isArray(item)