chore: lift components folder

src/DataTable/DataTable.Story.svelte

@@ -0,0 +1,151 @@
+<script>
+  export let story = undefined;
+
+  import DataTable from "./DataTable.svelte";
+  import Table from "./Table.svelte";
+  import TableBody from "./TableBody.svelte";
+  import TableCell from "./TableCell.svelte";
+  import TableContainer from "./TableContainer.svelte";
+  import TableHead from "./TableHead.svelte";
+  import TableHeader from "./TableHeader.svelte";
+  import TableRow from "./TableRow.svelte";
+
+  const rows = [
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+      attached_groups: "Kevins VM Groups",
+      status: "Disabled"
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+      attached_groups: "Maureens VM Groups",
+      status: "Starting"
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+      attached_groups: "Andrews VM Groups",
+      status: "Active"
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+      attached_groups: "Marcs VM Groups",
+      status: "Disabled"
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+      attached_groups: "Mels VM Groups",
+      status: "Starting"
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+      attached_groups: "Ronjas VM Groups",
+      status: "Active"
+    }
+  ];
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+    { key: "attached_groups", value: "Attached Groups" },
+    { key: "status", value: "Status" }
+  ];
+  $: sortable = true;
+</script>
+
+{#if story === 'composed'}
+  <DataTable {...$$props} {rows} {headers} let:props>
+    <TableContainer
+      title="DataTable"
+      description="With default options"
+      {...props.getTableContainerProps()}>
+      <Table {...props.getTableProps()}>
+        <TableHead>
+          <TableRow>
+            {#each props.headers as header, i (header.key)}
+              <TableHeader {...props.getHeaderProps({ header })}>
+                {header.header}
+              </TableHeader>
+            {/each}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {#each props.rows as row, i}
+            <TableRow {...props.getRowProps({ row })}>
+              {#each row.cells as cell, j}
+                <TableCell>{cell.value}</TableCell>
+              {/each}
+            </TableRow>
+          {/each}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </DataTable>
+{:else if story === 'sortable'}
+  <DataTable
+    bind:sortable
+    title={$$props.title}
+    description={$$props.description}
+    zebra={$$props.zebra}
+    size={$$props.size}
+    stickyHeader={$$props.stickyHeader}
+    on:click={({ detail }) => {
+      console.log('on:click', detail);
+    }}
+    on:click:header={({ detail }) => {
+      console.log('on:click:header', detail);
+    }}
+    on:click:row={({ detail }) => {
+      console.log('on:click:row', detail);
+    }}
+    on:click:cell={({ detail }) => {
+      console.log('on:click:cell', detail);
+    }}
+    {rows}
+    {headers} />
+{:else}
+  <DataTable
+    title={$$props.title}
+    description={$$props.description}
+    zebra={$$props.zebra}
+    size={$$props.size}
+    stickyHeader={$$props.stickyHeader}
+    on:click={({ detail }) => {
+      console.log('on:click', detail);
+    }}
+    on:click:header={({ detail }) => {
+      console.log('on:click:header', detail);
+    }}
+    on:click:row={({ detail }) => {
+      console.log('on:click:row', detail);
+    }}
+    on:click:cell={({ detail }) => {
+      console.log('on:click:cell', detail);
+    }}
+    {rows}
+    {headers} />
+{/if}

src/DataTable/DataTable.stories.js

@@ -0,0 +1,35 @@
+import { withKnobs, boolean, select, text } from "@storybook/addon-knobs";
+import Component from "./DataTable.Story.svelte";
+
+export default { title: "DataTable", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    title: text("Optional DataTable title (title)", ""),
+    description: text("Optional DataTable description (description)", ""),
+    zebra: boolean("Zebra row styles (zebra)", false),
+    size: select(
+      "Row height (size)",
+      { compact: "compact", short: "short", tall: "tall", none: null },
+      null
+    ),
+    stickyHeader: boolean("Sticky header (experimental)", false),
+  },
+});
+
+export const Sortable = () => ({
+  Component,
+  props: {
+    story: "sortable",
+    title: text("Optional DataTable title (title)", ""),
+    description: text("Optional DataTable description (description)", ""),
+    zebra: boolean("Zebra row styles (zebra)", false),
+    size: select(
+      "Row height (size)",
+      { compact: "compact", short: "short", tall: "tall", none: null },
+      null
+    ),
+    stickyHeader: boolean("Sticky header (experimental)", false),
+  },
+});

src/DataTable/DataTable.svelte

@@ -0,0 +1,123 @@
+<script>
+  export let size = undefined; // "compact" | "short" | "tall"
+  export let title = "";
+  export let description = "";
+  export let zebra = false;
+  export let sortable = false;
+  export let stickyHeader = false;
+  export let rows = [];
+  export let headers = [];
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+  import Table from "./Table.svelte";
+  import TableBody from "./TableBody.svelte";
+  import TableCell from "./TableCell.svelte";
+  import TableContainer from "./TableContainer.svelte";
+  import TableHead from "./TableHead.svelte";
+  import TableHeader from "./TableHeader.svelte";
+  import TableRow from "./TableRow.svelte";
+
+  const sortDirectionMap = {
+    none: "ascending",
+    ascending: "descending",
+    descending: "none"
+  };
+  const dispatch = createEventDispatcher();
+  const tableSortable = writable(sortable);
+  const sortHeader = writable({ id: null, key: null, sortDirection: "none" });
+  const headerItems = writable([]);
+  const thKeys = derived(headerItems, () =>
+    headers
+      .map(({ key }, i) => ({ key, id: $headerItems[i] }))
+      .reduce((a, c) => ({ ...a, [c.key]: c.id }), {})
+  );
+
+  setContext("DataTable", {
+    sortHeader,
+    tableSortable,
+    add: id => {
+      headerItems.update(_ => [..._, id]);
+    }
+  });
+
+  $: tableSortable.set(sortable);
+  $: headerKeys = headers.map(({ key }) => key);
+  $: rows = rows.map(row => ({
+    ...row,
+    cells: headerKeys.map(key => ({ key, value: row[key] }))
+  }));
+  $: sortedRows = rows;
+  $: ascending = $sortHeader.sortDirection === "ascending";
+  $: sortKey = $sortHeader.key;
+  $: sorting = sortable && sortKey != null;
+  $: if (sorting) {
+    if ($sortHeader.sortDirection === "none") {
+      sortedRows = rows;
+    } else {
+      sortedRows = [...rows].sort((a, b) => {
+        const itemA = ascending ? a[sortKey] : b[sortKey];
+        const itemB = ascending ? b[sortKey] : a[sortKey];
+
+        if (typeof itemA === "number" && typeof itemB === "number") {
+          return itemA - itemB;
+        }
+
+        return itemA
+          .toString()
+          .localeCompare(itemB.toString(), "en", { numeric: true });
+      });
+    }
+  }
+  $: props = {
+    headers,
+    rows
+  };
+</script>
+
+<slot {props}>
+  <TableContainer {title} {description} {...$$restProps}>
+    <Table {zebra} {size} {stickyHeader} {sortable}>
+      <TableHead>
+        <TableRow>
+          {#each headers as header, i (header.key)}
+            <TableHeader
+              on:click={() => {
+                dispatch('click', { header });
+                let active = header.key === $sortHeader.key;
+                let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
+                let sortDirection = sortDirectionMap[currentSortDirection];
+                dispatch('click:header', { header, sortDirection });
+                sortHeader.set({
+                  id: sortDirection === 'none' ? null : $thKeys[header.key],
+                  key: header.key,
+                  sortDirection
+                });
+              }}>
+              {header.value}
+            </TableHeader>
+          {/each}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each sorting ? sortedRows : rows as row, i (row.id)}
+          <TableRow
+            on:click={() => {
+              dispatch('click', { row });
+              dispatch('click:row', row);
+            }}>
+            {#each row.cells as cell, j (cell.key)}
+              <TableCell
+                on:click={() => {
+                  dispatch('click', { row, cell });
+                  dispatch('click:cell', cell);
+                }}>
+                {cell.value}
+              </TableCell>
+            {/each}
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </TableContainer>
+</slot>

src/DataTable/Table.svelte

@@ -0,0 +1,39 @@
+<script>
+  export let size = undefined; // "compact" | "short" | "tall"
+  export let zebra = false;
+  export let useStaticWidth = false;
+  export let shouldShowBorder = false;
+  export let sortable = false;
+  export let stickyHeader = false;
+</script>
+
+{#if stickyHeader}
+  <section class:bx--data-table_inner-container={true} {...$$restProps}>
+    <table
+      class:bx--data-table={true}
+      class:bx--data-table--compact={size === 'compact'}
+      class:bx--data-table--short={size === 'short'}
+      class:bx--data-table--tall={size === 'tall'}
+      class:bx--data-table--sort={sortable}
+      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--no-border={!shouldShowBorder}
+      class:bx--data-table--sticky-header={stickyHeader}>
+      <slot />
+    </table>
+  </section>
+{:else}
+  <table
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === 'compact'}
+    class:bx--data-table--short={size === 'short'}
+    class:bx--data-table--tall={size === 'tall'}
+    class:bx--data-table--sort={sortable}
+    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--no-border={!shouldShowBorder}
+    class:bx--data-table--sticky-header={stickyHeader}
+    {...$$restProps}>
+    <slot />
+  </table>
+{/if}

src/DataTable/TableBody.svelte

@@ -0,0 +1,3 @@
+<tbody aria-live="polite" {...$$restProps}>
+  <slot />
+</tbody>

src/DataTable/TableCell.svelte

@@ -0,0 +1,3 @@
+<td {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+  <slot />
+</td>

src/DataTable/TableContainer.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let stickyHeader = false;
+  export let title = "";
+  export let description = "";
+</script>
+
+<div
+  class:bx--data-table-container={true}
+  class:bx--data-table--max-width={stickyHeader}
+  {...$$restProps}>
+  {#if title}
+    <div class:bx--data-table-header={true}>
+      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <p class:bx--data-table-header__description={true}>{description}</p>
+    </div>
+  {/if}
+  <slot />
+</div>

src/DataTable/TableHead.svelte

@@ -0,0 +1,3 @@
+<thead {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
+  <slot />
+</thead>

src/DataTable/TableHeader.svelte

@@ -0,0 +1,53 @@
+<script>
+  export let scope = "col";
+  export let translateWithId = () => "";
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import { getContext } from "svelte";
+  import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20";
+  import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20";
+
+  const { sortHeader, tableSortable, add } = getContext("DataTable");
+
+  add(id);
+
+  $: active = $sortHeader.id === id;
+  // TODO: translate with id
+  $: ariaLabel = translateWithId();
+</script>
+
+{#if $tableSortable}
+  <th
+    aria-sort={active ? $sortHeader.sortDirection : 'none'}
+    {scope}
+    {...$$restProps}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <button
+      class:bx--table-sort={true}
+      class:bx--table-sort--active={active}
+      class:bx--table-sort--ascending={active && $sortHeader.sortDirection === 'descending'}
+      on:click>
+      <span class:bx--table-header-label={true}>
+        <slot />
+      </span>
+      <ArrowUp20 aria-label={ariaLabel} class="bx--table-sort__icon" />
+      <ArrowsVertical20
+        aria-label={ariaLabel}
+        class="bx--table-sort__icon-unsorted" />
+    </button>
+  </th>
+{:else}
+  <th
+    {scope}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <span class:bx--table-header-label={true}>
+      <slot />
+    </span>
+  </th>
+{/if}

src/DataTable/TableRow.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let isSelected = false;
+
+  // TODO: include ariaLabel, onExpand, isExpanded, isSelected
+</script>
+
+<tr
+  class:bx--data-table--selected={isSelected}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</tr>

src/DataTable/index.js

@@ -0,0 +1,8 @@
+export { default as DataTable } from "./DataTable.svelte";
+export { default as Table } from "./Table.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableCell } from "./TableCell.svelte";
+export { default as TableContainer } from "./TableContainer.svelte";
+export { default as TableHead } from "./TableHead.svelte";
+export { default as TableHeader } from "./TableHeader.svelte";
+export { default as TableRow } from "./TableRow.svelte";