feat: table component

nl-design-system · Jul 7, 2021 · 7659912 · 7659912
1 parent 49e0671
commit 7659912
Show file tree

Hide file tree

Showing 9 changed files with 315 additions and 0 deletions.
diff --git a/components/table/README.md b/components/table/README.md
@@ -0,0 +1 @@
+# Table
diff --git a/components/table/bem.css b/components/table/bem.css
@@ -0,0 +1,81 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+.utrecht-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.utrecht-table--distanced {
+  margin-block-end: var(--utrecht-table-margin-block-end);
+  margin-block-start: var(--utrecht-table-margin-block-start);
+}
+
+.utrecht-table__caption {
+  font-weight: var(--utrecht-table-caption-font-weight);
+  font-family: var(--utrecht-table-caption-font-family);
+  font-size: var(--utrecht-table-caption-font-size);
+  color: var(--utrecht-table-caption-color);
+  line-height: var(--utrecht-table-caption-line-height);
+  margin-block-end: var(--utrecht-table-caption-margin-block-end);
+  text-align: var(--utrecht-table-caption-text-align, center);
+}
+
+.utrecht-table__header {
+  font-weight: var(--utrecht-table-header-font-weight);
+  color: var(--utrecht-table-header-color);
+  text-transform: var(--utrecht-table-header-text-transform);
+  vertical-align: bottom;
+}
+
+.utrecht-table__cell--last-header-row {
+  border-block-end-style: solid;
+  border-block-end-color: var(--utrecht-table-header-border-block-end-color);
+  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
+}
+
+.utrecht-table__body {
+  vertical-align: baseline;
+}
+
+.utrecht-table__heading {
+  font-weight: var(--utrecht-table-heading-font-weight);
+  color: var(--utrecht-table-heading-color);
+  text-transform: var(--utrecht-table-heading-text-transform);
+}
+
+.utrecht-table__cell {
+  line-height: var(--utrecht-table-cell-line-height, inherit);
+  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
+  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
+  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
+  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
+  text-align: start;
+}
+
+.utrecht-table__cell--first {
+  padding-inline-start: var(
+    --utrecht-table-row-padding-inline-start,
+    var(--utrecht-table-cell-padding-inline-start, 0)
+  );
+}
+
+.utrecht-table__cell--last {
+  padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
+}
+
+.utrecht-table__cell--numeric {
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  text-align: right;
+}
+
+.utrecht-table__row--alternate-odd {
+  background-color: var(--utrecht-table-row-alternate-odd-background-color);
+  color: var(--utrecht-table-row-alternate-odd-color);
+}
+
+.utrecht-table__row--alternate-even {
+  background-color: var(--utrecht-table-row-alternate-even-background-color);
+  color: var(--utrecht-table-row-alternate-even-color);
+}
diff --git a/components/table/block.style-dictionary.json b/components/table/block.style-dictionary.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "table": {
+      "margin-block-end": {},
+      "margin-block-start": {}
+    }
+  }
+}
diff --git a/components/table/element-modifier.style-dictionary.json b/components/table/element-modifier.style-dictionary.json
@@ -0,0 +1,16 @@
+{
+  "utrecht": {
+    "table": {
+      "row": {
+        "alternate-odd": {
+          "background-color": {},
+          "color": {}
+        },
+        "alternate-even": {
+          "background-color": {},
+          "color": {}
+        }
+      }
+    }
+  }
+}
diff --git a/components/table/element.style-dictionary.json b/components/table/element.style-dictionary.json
@@ -0,0 +1,38 @@
+{
+  "utrecht": {
+    "table": {
+      "caption": {
+        "font-weight": {},
+        "font-family": {},
+        "font-size": {},
+        "color": {},
+        "line-height": {},
+        "text-align": {},
+        "margin-block-end": {}
+      },
+      "header": {
+        "font-weight": {},
+        "color": {},
+        "text-transform": {},
+        "border-block-end-color": {},
+        "border-block-end-width": {}
+      },
+      "heading": {
+        "font-weight": {},
+        "color": {},
+        "text-transform": {}
+      },
+      "cell": {
+        "line-height": {},
+        "padding-block-end": {},
+        "padding-block-start": {},
+        "padding-inline-end": {},
+        "padding-inline-start": {}
+      },
+      "row": {
+        "padding-inline-end": {},
+        "padding-inline-start": {}
+      }
+    }
+  }
+}
diff --git a/components/table/html.scss b/components/table/html.scss
@@ -0,0 +1,61 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "./bem";
+
+.utrecht-html table {
+  @extend .utrecht-table;
+  @extend .utrecht-table--distanced;
+}
+
+.utrecht-html caption {
+  @extend .utrecht-table__caption;
+}
+
+.utrecht-html thead {
+  @extend .utrecht-table__header;
+}
+
+.utrecht-html tbody {
+  @extend .utrecht-table__body;
+}
+
+.utrecht-html th {
+  @extend .utrecht-table__heading;
+}
+
+.utrecht-html th,
+.utrecht-html td {
+  @extend .utrecht-table__cell;
+}
+
+.utrecht-html td:first-child,
+.utrecht-html th:first-child {
+  @extend .utrecht-table__cell--first;
+}
+
+.utrecht-html td:last-child,
+.utrecht-html th:last-child {
+  @extend .utrecht-table__cell--last;
+}
+
+.utrecht-html thead tr:last-child th {
+  @extend .utrecht-table__cell--last-header-row;
+}
+
+.utrecht-html th.numeric,
+.utrecht-html td.numeric {
+  @extend .utrecht-table__cell--numeric;
+}
+
+.utrecht-html table.alternate-row-color {
+  tr:nth-child(odd) {
+    @extend .utrecht-table__row--alternate-odd;
+  }
+
+  tr:nth-child(even) {
+    @extend .utrecht-table__row--alternate-even;
+  }
+}
diff --git a/components/table/html.stories.mdx b/components/table/html.stories.mdx
@@ -0,0 +1,63 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+<!-- Import component and component styles -->
+
+import "./html.scss";
+
+<!-- Import Docs -->
+
+import README from "./README.md";
+
+<!--
+Source of table:
+https://www.utrecht.nl/wonen-en-leven/parkeren/ervaart-u-parkeeroverlast/spinozaplantsoen-invoeren-betaald-parkeren/
+-->
+
+export const ExampleTable = () =>
+  `<div class="utrecht-html">
+<table lang="nl" summary="Overzicht van de stemmen voor en tegen het betaald parkeren.">
+  <caption>Uitslag internetpeiling 8 juni tot en met 28 juni</caption>
+  <thead>
+    <tr>
+      <th scope="col">Gebied</th>
+      <th scope="col" class="numeric">Voor</th>
+      <th scope="col" class="numeric">Tegen</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Spinozaplantsoen</td>
+      <td class="numeric">53</td>
+      <td class="numeric">113</td>
+    </tr>
+  </tbody>
+</table>
+  </div>`;
+
+<Meta
+  title="Semantic HTML/Table"
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => ExampleTable(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    notes: {
+      UX: README,
+    },
+  }}
+/>
+
+# Table
+
+<Canvas>
+  <Story name="Table">{ExampleTable.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Table" />
diff --git a/proprietary/design-tokens/src/component/utrecht/table/block.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/table/block.style-dictionary.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "table": {
+      "margin-block-end": {},
+      "margin-block-start": {}
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/table/element.style-dictionary.json b/proprietary/design-tokens/src/component/utrecht/table/element.style-dictionary.json
@@ -0,0 +1,39 @@
+{
+  "utrecht": {
+    "table": {
+      "caption": {
+        "font-size": { "value": "1.125em" },
+        "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight.value}" },
+        "font-family": {},
+        "color": {},
+        "line-height": {},
+        "text-align": { "value": "start" },
+        "margin-block-end": { "value": "1em" }
+      },
+      "header": {
+        "font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight.value}" },
+        "color": {},
+        "text-transform": {},
+        "border-block-end-color": { "value": "{utrecht.color.red.40.value}" },
+        "border-block-end-width": { "value": "2px" }
+      },
+      "heading": {
+        "font-weight": {},
+        "color": {},
+        "text-transform": {}
+      },
+      "cell": {
+        "line-height": {},
+        "padding-block-end": { "value": "0.5em" },
+        "padding-block-start": { "value": "0.5em" },
+        "padding-inline-end": { "value": "0" },
+        "padding-inline-start": { "value": "0.4em" }
+      },
+      "row": {
+        "padding-inline-end": {},
+        "padding-inline-start": {},
+        "border-block-end-color": { "value": "{utrecht.color.grey.80.value}" }
+      }
+    }
+  }
+}