chore: lift components folder

src/StructuredList/StructuredList.Skeleton.svelte

@@ -0,0 +1,39 @@
+<script>
+  export let border = false;
+  export let rows = 5;
+</script>
+
+<section
+  class:bx--skeleton={true}
+  class:bx--structured-list={true}
+  class:bx--structured-list--border={border}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <div class:bx--structured-list-thead={true}>
+    <div
+      class:bx--structured-list-row={true}
+      class:bx--structured-list-row--header-row={true}>
+      <div class:bx--structured-list-th={true}>
+        <span />
+      </div>
+      <div class:bx--structured-list-th={true}>
+        <span />
+      </div>
+      <div class:bx--structured-list-th={true}>
+        <span />
+      </div>
+    </div>
+  </div>
+  <div class:bx--structured-list-tbody={true}>
+    {#each Array.from({ length: rows }, (_, i) => i) as row, i (row)}
+      <div class:bx--structured-list-row={true}>
+        <div class:bx--structured-list-td={true} />
+        <div class:bx--structured-list-td={true} />
+        <div class:bx--structured-list-td={true} />
+      </div>
+    {/each}
+  </div>
+</section>

src/StructuredList/StructuredList.Story.svelte

@@ -0,0 +1,91 @@
+<script>
+  export let story = undefined;
+
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+
+  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 StructuredListSkeleton from "./StructuredList.Skeleton.svelte";
+  import StructuredList from "./StructuredList.svelte";
+
+  $: selected = "row-1-value";
+</script>
+
+<div>
+  {#if story === 'skeleton'}
+    <div style="width: 800px">
+      <StructuredListSkeleton />
+    </div>
+  {:else if story === 'selection'}
+    <StructuredList selection border bind:selected>
+      <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="bx--structured-list-svg"
+                aria-label="select an option"
+                title="select an option" />
+            </StructuredListCell>
+          </StructuredListRow>
+        {/each}
+      </StructuredListBody>
+    </StructuredList>
+  {:else}
+    <StructuredList>
+      <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>
+    </StructuredList>
+  {/if}
+</div>

src/StructuredList/StructuredList.stories.js

@@ -0,0 +1,10 @@
+import { withKnobs } 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/StructuredList/StructuredList.svelte

@@ -0,0 +1,34 @@
+<script>
+  export let selected = undefined;
+  export let border = false;
+  export let selection = false;
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const selectedValue = writable(selected);
+
+  setContext("StructuredListWrapper", {
+    selectedValue,
+    update: value => {
+      selectedValue.set(value);
+    }
+  });
+
+  $: selected = $selectedValue;
+  $: dispatch("change", $selectedValue);
+</script>
+
+<section
+  aria-label="Structured list section"
+  class:bx--structured-list={true}
+  class:bx--structured-list--border={border}
+  class:bx--structured-list--selection={selection}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</section>

src/StructuredList/StructuredListBody.svelte

@@ -0,0 +1,9 @@
+<div
+  class:bx--structured-list-tbody={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</div>

src/StructuredList/StructuredListCell.svelte

@@ -0,0 +1,16 @@
+<script>
+  export let head = false;
+  export let noWrap = false;
+</script>
+
+<div
+  class:bx--structured-list-th={head}
+  class:bx--structured-list-td={!head}
+  class:bx--structured-list-content--nowrap={noWrap}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</div>

src/StructuredList/StructuredListHead.svelte

@@ -0,0 +1,9 @@
+<div
+  class:bx--structured-list-thead={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</div>

src/StructuredList/StructuredListInput.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let checked = false;
+  export let title = "title";
+  export let value = "value";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = "";
+  export let ref = null;
+
+  import { getContext } from "svelte";
+
+  const { selectedValue, update } = getContext("StructuredListWrapper");
+
+  if (checked) {
+    update(value);
+  }
+
+  $: checked = $selectedValue === value;
+</script>
+
+<input
+  bind:this={ref}
+  type="radio"
+  tabindex="-1"
+  {checked}
+  {id}
+  {name}
+  {title}
+  {value}
+  class:bx--structured-list-input={true}
+  {...$$restProps}
+  on:change={() => {
+    update(value);
+  }} />

src/StructuredList/StructuredListRow.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let head = false;
+  export let label = false;
+  export let tabindex = "0";
+</script>
+
+{#if label}
+  <label
+    role="presentation"
+    {tabindex}
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown>
+    <slot />
+  </label>
+{:else}
+  <div
+    class:bx--structured-list-row={true}
+    class:bx--structured-list-row--header-row={head}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </div>
+{/if}

src/StructuredList/index.js

@@ -0,0 +1,7 @@
+export { default as StructuredList } from "./StructuredList.svelte";
+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";