chore(lint): apply recommended lint rules

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', () => {

src/components/Button/Button.Story.svelte

@@ -11,7 +11,6 @@
     kind,
     disabled,
     size,
-    renderIcon,
     iconDescription,
     small,
     tooltipPosition,

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',

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();

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;
 </script>
 
 <Layout>
   {#if story === 'selected'}
-    <ContentSwitcher>
+    <ContentSwitcher
+      on:change={({ detail }) => {
+        console.log('on:change', detail);
+      }}>
       <Switch {...$$props} text="First section" />
       <Switch {...$$props} text="Second section" selected />
       <Switch {...$$props} text="Third section" />
     </ContentSwitcher>
   {:else}
-    <ContentSwitcher>
+    <ContentSwitcher
+      bind:selectedIndex
+      on:change={({ detail }) => {
+        console.log('on:change', detail);
+      }}>
       <Switch {...$$props} text="First section" />
       <Switch {...$$props} text="Second section" />
       <Switch {...$$props} text="Third section" />

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 });
   }
 </script>
 

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);
       }

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 }) => {

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);

src/components/FileUploader/FileUploader.svelte

@@ -64,7 +64,7 @@
               }
             }}
             on:click
-            on:click={evt => {
+            on:click={() => {
               files = files.filter((_, index) => index !== i);
             }}
             {iconDescription}

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();

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';

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';

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] };

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');
 

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';
 </script>

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 <Select>)', false) }
+  props: {
+    story: 'skeleton',
+    hideLabel: boolean('No label (hideLabel in <Select>)', false)
+  }
 });

src/components/Slider/Slider.svelte

@@ -9,9 +9,8 @@
   export let minLabel = '';
   export let maxLabel = '';
   export let labelText = '';
-  export let formatLabel = (value, label) => {
+  export let formatLabel = (value, label) =>
-    return typeof label === 'function' ? label(value) : `${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();

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] };

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;

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: {
+  props: { light: boolean('Light variant (light)', false) }
-    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: {

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();
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>

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)