feat(components): add StructuredList

Closes #27

src/components/StructuredList/StructuredList.Skeleton.svelte

@@ -0,0 +1,42 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let border = false;
+  export let rowCount = 5;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx(
+    '--skeleton',
+    '--structured-list',
+    border && '--structured-list--border',
+    className
+  );
+  const rows = Array.from({ length: rowCount - 1 }, (_, i) => i);
+</script>
+
+<section on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  <div class={cx('--structured-list-thead')}>
+    <div class={cx('--structured-list-row', '--structured-list-row--header-row')}>
+      <div class={cx('--structured-list-th')}>
+        <span />
+      </div>
+      <div class={cx('--structured-list-th')}>
+        <span />
+      </div>
+      <div class={cx('--structured-list-th')}>
+        <span />
+      </div>
+    </div>
+  </div>
+  <div class={cx('--structured-list-tbody')}>
+    {#each rows as row, i (row)}
+      <div class={cx('--structured-list-row')}>
+        <div class={cx('--structured-list-td')} />
+        <div class={cx('--structured-list-td')} />
+        <div class={cx('--structured-list-td')} />
+      </div>
+    {/each}
+  </div>
+</section>

src/components/StructuredList/StructuredList.Story.svelte

@@ -0,0 +1,90 @@
+<script>
+  export let story = undefined;
+
+  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
+  import Layout from '../../internal/ui/Layout.svelte';
+  import { cx } from '../../lib';
+  import StructuredListBody from './StructuredListBody.svelte';
+  import StructuredListCell from './StructuredListCell.svelte';
+  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';
+</script>
+
+<Layout>
+  <div>
+    {#if story === 'skeleton'}
+      <div style="width: 800px">
+        <StructuredListSkeleton />
+        <StructuredListSkeleton border />
+      </div>
+    {:else if story === 'selection'}
+      <StructuredListWrapper selection border defaultSelected="row-1-value">
+        <StructuredListHead>
+          <StructuredListRow head>
+            <StructuredListCell head>ColumnA</StructuredListCell>
+            <StructuredListCell head>ColumnB</StructuredListCell>
+            <StructuredListCell head>ColumnC</StructuredListCell>
+            <StructuredListCell head>{''}</StructuredListCell>
+          </StructuredListRow>
+        </StructuredListHead>
+        <StructuredListBody>
+          {#each [0, 1, 2, 3] as item, i (item)}
+            <StructuredListRow label for={`row-${i}`}>
+              <StructuredListCell>Row {i}</StructuredListCell>
+              <StructuredListCell>Row {i}</StructuredListCell>
+              <StructuredListCell>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id
+                tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla
+                ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+              </StructuredListCell>
+              <StructuredListInput
+                id={`row-${i}`}
+                value={`row-${i}-value`}
+                title={`row-${i}-title`}
+                name={`row-${i}-name`} />
+              <StructuredListCell>
+                <CheckmarkFilled16
+                  class={cx('--structured-list-svg')}
+                  aria-label="select an option"
+                  title="select an option" />
+              </StructuredListCell>
+            </StructuredListRow>
+          {/each}
+        </StructuredListBody>
+      </StructuredListWrapper>
+    {:else}
+      <StructuredListWrapper>
+        <StructuredListHead>
+          <StructuredListRow head>
+            <StructuredListCell head>ColumnA</StructuredListCell>
+            <StructuredListCell head>ColumnB</StructuredListCell>
+            <StructuredListCell head>ColumnC</StructuredListCell>
+          </StructuredListRow>
+        </StructuredListHead>
+        <StructuredListBody>
+          <StructuredListRow>
+            <StructuredListCell noWrap>Row 1</StructuredListCell>
+            <StructuredListCell>Row 1</StructuredListCell>
+            <StructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id
+              tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut
+              cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+            </StructuredListCell>
+          </StructuredListRow>
+          <StructuredListRow>
+            <StructuredListCell noWrap>Row 2</StructuredListCell>
+            <StructuredListCell>Row 2</StructuredListCell>
+            <StructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id
+              tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut
+              cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+            </StructuredListCell>
+          </StructuredListRow>
+        </StructuredListBody>
+      </StructuredListWrapper>
+    {/if}
+  </div>
+</Layout>

src/components/StructuredList/StructuredList.stories.js

@@ -0,0 +1,10 @@
+import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
+import Component from './StructuredList.Story.svelte';
+
+export default { title: 'StructuredList', decorators: [withKnobs] };
+
+export const Default = () => ({ Component });
+
+export const Selection = () => ({ Component, props: { story: 'selection' } });
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/StructuredList/StructuredListBody.svelte

@@ -0,0 +1,13 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--structured-list-tbody', className);
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  <slot />
+</div>

src/components/StructuredList/StructuredListCell.svelte

@@ -0,0 +1,20 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let head = false;
+  export let noWrap = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx(
+    head && '--structured-list-th',
+    !head && '--structured-list-td',
+    noWrap && '--structured-list-content--nowrap',
+    className
+  );
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  <slot />
+</div>

src/components/StructuredList/StructuredListHead.svelte

@@ -0,0 +1,13 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--structured-list-thead', className);
+</script>
+
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  <slot />
+</div>

src/components/StructuredList/StructuredListInput.svelte

@@ -0,0 +1,37 @@
+<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 style = undefined;
+
+  import { getContext } from 'svelte';
+  import { cx } from '../../lib';
+
+  const _class = cx('--structured-list-input', className);
+
+  const { selected, update } = getContext('StructuredListWrapper');
+
+  if (checked) {
+    update(value);
+  }
+
+  $: checked = $selected === value;
+</script>
+
+<input
+  type="radio"
+  tabindex="-1"
+  class={_class}
+  on:change={() => {
+    update(value);
+  }}
+  {value}
+  {name}
+  {title}
+  {style}
+  {id}
+  {checked} />

src/components/StructuredList/StructuredListRow.svelte

@@ -0,0 +1,36 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let head = false;
+  export let label = false;
+  export let tabindex = '0';
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx(
+    '--structured-list-row',
+    head && '--structured-list-row--header-row',
+    className
+  );
+</script>
+
+{#if label}
+  <label
+    role="presentation"
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+    class={_class}
+    for={$$props.for}
+    {tabindex}
+    {style}>
+    <slot />
+  </label>
+{:else}
+  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+    <slot />
+  </div>
+{/if}

src/components/StructuredList/StructuredListWrapper.svelte

@@ -0,0 +1,45 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let defaultSelected = undefined;
+  export let border = false;
+  export let selection = false;
+  export let style = undefined;
+
+  import { createEventDispatcher, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const _class = cx(
+    '--structured-list',
+    border && '--structured-list--border',
+    selection && '--structured-list--selection',
+    className
+  );
+
+  let selected = writable(defaultSelected);
+
+  setContext('StructuredListWrapper', {
+    selected,
+    update: value => {
+      selected.set(value);
+    }
+  });
+
+  $: {
+    defaultSelected = $selected;
+    dispatch('change', $selected);
+  }
+</script>
+
+<section
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={_class}
+  aria-label={$$props['aria-label'] || 'Structured list section'}
+  {style}>
+  <slot />
+</section>

src/components/StructuredList/index.js

@@ -0,0 +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

@@ -30,6 +30,15 @@ import Search, { SearchSkeleton } from './components/Search';
 import Select, { SelectSkeleton, SelectItem, SelectItemGroup } from './components/Select';
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
+import StructuredList, {
+  StructuredListSkeleton,
+  StructuredListBody,
+  StructuredListHead,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListInput,
+  StructuredListWrapper
+} from './components/StructuredList';
 import Tag, { TagSkeleton } from './components/Tag';
 import TextArea, { TextAreaSkeleton } from './components/TextArea';
 import TextInput, { TextInputSkeleton, PasswordInput } from './components/TextInput';
@@ -93,6 +102,14 @@ export {
   SkeletonPlaceholder,
   SkeletonText,
   Switch,
+  StructuredList,
+  StructuredListSkeleton,
+  StructuredListBody,
+  StructuredListHead,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListInput,
+  StructuredListWrapper,
   Tag,
   TagSkeleton,
   TextArea,