refactor(structured-list): make StructuredListWrapper default component

README.md

@@ -96,7 +96,6 @@ Currently, the following components are supported:
   - StructuredListCell
   - StructuredListRow
   - StructuredListInput
-  - StructuredListWrapper
 - Tabs
   - Tab
   - TabContent

src/components/StructuredList/StructuredList.Story.svelte

@@ -9,8 +9,10 @@
   import StructuredListHead from './StructuredListHead.svelte';
   import StructuredListInput from './StructuredListInput.svelte';
   import StructuredListRow from './StructuredListRow.svelte';
-  import StructuredListWrapper from './StructuredListWrapper.svelte';
   import StructuredListSkeleton from './StructuredList.Skeleton.svelte';
+  import StructuredList from './StructuredList.svelte';
+
+  let selected = 'row-1-value';
 </script>
 
 <Layout>
@@ -18,10 +20,9 @@
     {#if story === 'skeleton'}
       <div style="width: 800px">
         <StructuredListSkeleton />
-        <StructuredListSkeleton border />
       </div>
     {:else if story === 'selection'}
-      <StructuredListWrapper selection border defaultSelected="row-1-value">
+      <StructuredList selection border bind:selected>
         <StructuredListHead>
           <StructuredListRow head>
             <StructuredListCell head>ColumnA</StructuredListCell>
@@ -54,9 +55,9 @@
             </StructuredListRow>
           {/each}
         </StructuredListBody>
-      </StructuredListWrapper>
+      </StructuredList>
     {:else}
-      <StructuredListWrapper>
+      <StructuredList>
         <StructuredListHead>
           <StructuredListRow head>
             <StructuredListCell head>ColumnA</StructuredListCell>
@@ -84,7 +85,7 @@
             </StructuredListCell>
           </StructuredListRow>
         </StructuredListBody>
-      </StructuredListWrapper>
+      </StructuredList>
     {/if}
   </div>
 </Layout>

src/components/StructuredList/StructuredList.svelte

@@ -1,7 +1,7 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let defaultSelected = undefined;
+  export let selected = undefined;
   export let border = false;
   export let selection = false;
   export let style = undefined;
@@ -12,18 +12,18 @@
 
   const dispatch = createEventDispatcher();
 
-  let selected = writable(defaultSelected);
+  let selectedValue = writable(selected);
 
   setContext('StructuredListWrapper', {
-    selected,
+    selectedValue,
     update: value => {
-      selected.set(value);
+      selectedValue.set(value);
     }
   });
 
+  $: selected = $selectedValue;
   $: {
-    defaultSelected = $selected;
+    dispatch('change', $selectedValue);
-    dispatch('change', $selected);
   }
 </script>
 
@@ -32,8 +32,8 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
   aria-label={$$props['aria-label'] || 'Structured list section'}
+  class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
   {style}>
   <slot />
 </section>

src/components/StructuredList/StructuredListInput.svelte

@@ -1,23 +1,23 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let id = Math.random();
-  export let value = 'value';
-  export let title = 'title';
-  export let name = '';
   export let checked = false;
+  export let id = Math.random();
+  export let name = '';
   export let style = undefined;
+  export let title = 'title';
+  export let value = 'value';
 
   import { getContext } from 'svelte';
   import { cx } from '../../lib';
 
-  const { selected, update } = getContext('StructuredListWrapper');
+  const { selectedValue, update } = getContext('StructuredListWrapper');
 
   if (checked) {
     update(value);
   }
 
-  $: checked = $selected === value;
+  $: checked = $selectedValue === value;
 </script>
 
 <input
@@ -27,9 +27,9 @@
   on:change={() => {
     update(value);
   }}
-  {value}
+  {checked}
-  {name}
-  {title}
-  {style}
   {id}
-  {checked} />
+  {name}
+  {style}
+  {title}
+  {value} />

src/components/StructuredList/StructuredListRow.svelte

@@ -3,8 +3,8 @@
   export { className as class };
   export let head = false;
   export let label = false;
-  export let tabindex = '0';
   export let style = undefined;
+  export let tabindex = '0';
 
   import { cx } from '../../lib';
 </script>

src/components/StructuredList/index.js

@@ -1,7 +1,10 @@
+import StructuredList from './StructuredList.svelte';
+
+export default StructuredList;
+
 export { default as StructuredListSkeleton } from './StructuredList.Skeleton.svelte';
 export { default as StructuredListBody } from './StructuredListBody.svelte';
 export { default as StructuredListHead } from './StructuredListHead.svelte';
 export { default as StructuredListCell } from './StructuredListCell.svelte';
 export { default as StructuredListRow } from './StructuredListRow.svelte';
 export { default as StructuredListInput } from './StructuredListInput.svelte';
-export { default as StructuredListWrapper } from './StructuredListWrapper.svelte';

src/index.js

@@ -57,14 +57,13 @@ import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './component
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
 import Slider, { SliderSkeleton } from './components/Slider';
-import {
+import StructuredList, {
   StructuredListSkeleton,
   StructuredListBody,
   StructuredListHead,
   StructuredListCell,
   StructuredListRow,
-  StructuredListInput,
+  StructuredListInput
-  StructuredListWrapper
 } from './components/StructuredList';
 import Tabs, { Tab, TabContent, TabsSkeleton } from './components/Tabs';
 import Tag, { TagSkeleton } from './components/Tag';
@@ -159,13 +158,13 @@ export {
   Switch,
   Slider,
   SliderSkeleton,
+  StructuredList,
   StructuredListSkeleton,
   StructuredListBody,
   StructuredListHead,
   StructuredListCell,
   StructuredListRow,
   StructuredListInput,
-  StructuredListWrapper,
   Tabs,
   Tab,
   TabContent,