chore(components): add untracked files

src/components/DataTable/DataTable.Story.svelte

@@ -0,0 +1,152 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  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';
+
+  let 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'
+    }
+  ];
+  let 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' }
+  ];
+  let sortable = true;
+</script>
+
+<Layout>
+  {#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}
+</Layout>

src/components/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/components/DataTable/DataTable.svelte

@@ -0,0 +1,118 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let title = '';
+  export let description = '';
+  export let zebra = false;
+  export let rows = [];
+  export let headers = [];
+  export let stickyHeader = false;
+  export let size = undefined;
+  export let sortable = false;
+  export let style = undefined;
+
+  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 dispatch = createEventDispatcher();
+  const sortDirectionMap = { none: 'ascending', ascending: 'descending', descending: 'none' };
+
+  let tableSortable = writable(sortable);
+  let sortHeader = writable({ id: null, key: null, sortDirection: 'none' });
+  let headerItems = writable([]);
+  let 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 class={className} {title} {description} {style}>
+    <Table {zebra} {size} {stickyHeader} {sortable}>
+      <TableHead>
+        <TableRow>
+          {#each headers as header, i (header.key)}
+            <TableHeader
+              on:click={() => {
+                dispatch('click', { header });
+                dispatch('click:header', header);
+                let active = header.key === $sortHeader.key;
+                let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
+                let sortDirection = sortDirectionMap[currentSortDirection];
+                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/components/DataTable/Table.svelte

@@ -0,0 +1,28 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let zebra = false;
+  export let size = undefined;
+  export let useStaticWidth = false;
+  export let shouldShowBorder = false;
+  export let sortable = false;
+  export let stickyHeader = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+{#if stickyHeader}
+  <section class={cx('--data-table_inner-container', className)} {style}>
+    <table
+      class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header')}>
+      <slot />
+    </table>
+  </section>
+{:else}
+  <table
+    class={cx('--data-table', size === 'compact' && '--data-table--compact', size === 'short' && '--data-table--short', size === 'tall' && '--data-table--tall', sortable && '--data-table--sort', zebra && '--data-table--zebra', useStaticWidth && '--data-table--static', !shouldShowBorder && '--data-table--no-border', stickyHeader && '--data-table--sticky-header', className)}
+    {style}>
+    <slot />
+  </table>
+{/if}

src/components/DataTable/TableBody.svelte

@@ -0,0 +1,9 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+</script>
+
+<tbody aria-live={$$props['aria-live'] || 'polite'} class={className} {style}>
+  <slot />
+</tbody>

src/components/DataTable/TableCell.svelte

@@ -0,0 +1,9 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+</script>
+
+<td on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+  <slot />
+</td>

src/components/DataTable/TableContainer.svelte

@@ -0,0 +1,22 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let stickyHeader = false;
+  export let title = '';
+  export let description = '';
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div
+  class={cx('--data-table-container', stickyHeader && '--data-table--max-width', className)}
+  {style}>
+  {#if title}
+    <div class={cx('--data-table-header')}>
+      <h4 class={cx('--data-table-header__title')}>{title}</h4>
+      <p class={cx('--data-table-header__description')}>{description}</p>
+    </div>
+  {/if}
+  <slot />
+</div>

src/components/DataTable/TableHead.svelte

@@ -0,0 +1,9 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+</script>
+
+<thead on:click on:mouseover on:mouseenter on:mouseleave class={className} {style}>
+  <slot />
+</thead>

src/components/DataTable/TableHeader.svelte

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

src/components/DataTable/index.js

@@ -0,0 +1,3 @@
+import DataTable from './DataTable.svelte';
+
+export default DataTable;