test: add TS types

tests/DataTable.test.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import {
+    DataTable,
+    DataTableSkeleton,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
+    Button,
+    Link,
+  } from "../types";
+  import Launch16 from "carbon-icons-svelte/lib/Launch16";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+  const rows = [
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+    },
+  ];
+
+  function sort(a: any, b: any) {
+    if (new Date(a) > new Date(b)) return 1;
+    return 0;
+  }
+</script>
+
+<DataTable headers="{headers}" rows="{rows}" />
+
+<DataTable headers="{headers}" rows="{rows}">
+  <span slot="cell-header" let:header>
+    {#if header.key === 'port'}
+      {header.value}
+      (network)
+    {:else}{header.value}{/if}
+  </span>
+  <span slot="cell" let:cell>
+    {#if cell.key === 'rule' && cell.value === 'Round robin'}
+      <Link
+        inline
+        href="https://en.wikipedia.org/wiki/Round-robin_DNS"
+        target="_blank"
+      >
+        {cell.value}
+        <Launch16 />
+      </Link>
+    {:else}{cell.value}{/if}
+  </span>
+</DataTable>
+
+<DataTable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{headers}"
+  rows="{rows}"
+/>
+
+<DataTable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{headers}"
+  rows="{rows}"
+>
+  <Toolbar>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
+<DataTable
+  size="short"
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{headers}"
+  rows="{rows}"
+>
+  <Toolbar size="sm">
+    <ToolbarContent>
+      <ToolbarSearch />
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
+<DataTable zebra headers="{headers}" rows="{rows}" />
+
+<DataTable size="tall" headers="{headers}" rows="{rows}" />
+
+<DataTable size="short" headers="{headers}" rows="{rows}" />
+
+<DataTable size="compact" headers="{headers}" rows="{rows}" />
+
+<DataTable sortable headers="{headers}" rows="{rows}" />
+
+<DataTable
+  sortable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' }, { key: 'expireDate', value: 'Expire date', display: (date) => new Date(date).toLocaleString(), sort }]}"
+  rows="{[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, cost: 100, expireDate: '2020-10-21' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, cost: 200, expireDate: '2020-09-10' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, cost: 150, expireDate: '2020-11-24' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, cost: 250, expireDate: '2020-12-01' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, cost: 550, expireDate: '2021-03-21' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, cost: 400, expireDate: '2020-11-14' }]}"
+/>
+
+<DataTable expandable headers="{headers}" rows="{rows}">
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+<DataTable batchExpansion headers="{headers}" rows="{rows}">
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+<DataTableSkeleton />
+
+<DataTableSkeleton
+  headers="{['Name', 'Protocol', 'Port', 'Rule']}"
+  rows="{10}"
+/>
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />