feat: experimental table web components

components/table/css/_mixin.scss

@@ -46,6 +46,10 @@
   vertical-align: baseline;
 }
 
+/* stylelint-disable-next-line block-no-empty */
+@mixin utrecht-table__footer {
+}
+
 @mixin utrecht-table__header-cell {
   color: var(--utrecht-table-header-cell-color);
   font-size: var(--utrecht-table-header-cell-font-size);
@@ -86,6 +90,10 @@
   font-variant-numeric: lining-nums tabular-nums;
 }
 
+/* stylelint-disable-next-line block-no-empty */
+@mixin utrecht-table__row {
+}
+
 @mixin utrecht-table__row--alternate-odd {
   background-color: var(--utrecht-table-row-alternate-odd-background-color);
   color: var(--utrecht-table-row-alternate-odd-color);

components/table/web-component/stories/01-default.stories.mdx

@@ -0,0 +1,31 @@
+<!-- @license CC0-1.0 -->
+
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { TableExample } from "../template";
+
+<Meta
+  id="web-component-table"
+  title="Web Component/Table"
+  argTypes={{}}
+  parameters={{
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Table
+
+This Table web component is experimental, please share your experiences with our team.
+
+The web component version of the Table component has not yet been tested for accessibility with various assistive tools. Using the CSS component of Table is recommended for now.
+
+Accessibility has been tested in the following manner:
+
+- Accessibility panel in Chrome Developer tools shows the same role structure as the native HTML table equivalent.
+
+For accessibility of `<table-header-cell>` you MUST set the `scope="col"` or `scope="row"` attribute.
+
+<Canvas>
+  <Story name="Default">{TableExample.bind({})}</Story>
+</Canvas>

components/table/web-component/table-body.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__body;
+
+  display: table-row-group;
+}

components/table/web-component/table-body.stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-body',
+  styleUrl: 'table-body.scss',
+  shadow: true,
+})
+export class TableBody {
+  render() {
+    return (
+      <Host role="rowgroup">
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/table-caption.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__caption;
+
+  display: table-caption;
+}

components/table/web-component/table-caption.stencil.tsx

@@ -0,0 +1,13 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-caption',
+  styleUrl: 'table-caption.scss',
+  shadow: true,
+})
+export class TableCaption {
+  render() {
+    // TODO: Associate with parent <utrecht-table> aria-labelledby attribute
+    return <slot></slot>;
+  }
+}

components/table/web-component/table-cell.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__cell;
+
+  display: table-cell;
+}

components/table/web-component/table-cell.stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-cell',
+  styleUrl: 'table-cell.scss',
+  shadow: true,
+})
+export class TableCell {
+  render() {
+    return (
+      <Host role="cell">
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/table-footer.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__footer;
+
+  display: table-footer-group;
+}

components/table/web-component/table-footer.stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-footer',
+  styleUrl: 'table-footer.scss',
+  shadow: true,
+})
+export class TableFooter {
+  render() {
+    return (
+      <Host role="rowgroup">
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/table-header-cell.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__header-cell;
+
+  display: table-cell;
+}

components/table/web-component/table-header-cell.stencil.tsx

@@ -0,0 +1,17 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-header-cell',
+  styleUrl: 'table-header-cell.scss',
+  shadow: true,
+})
+export class TableHeaderCell {
+  @Prop() scope: 'col' | 'row';
+  render() {
+    return (
+      <Host role={this.scope === 'col' ? 'columnheader' : this.scope === 'row' ? 'rowheader' : 'cell'}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/table-header.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__header;
+
+  display: table-header-group;
+}

components/table/web-component/table-header.stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-header',
+  styleUrl: 'table-header.scss',
+  shadow: true,
+})
+export class TableHeader {
+  render() {
+    return (
+      <Host role="rowgroup">
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/table-row.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table__row;
+
+  display: table-row;
+}

components/table/web-component/table-row.stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table-row',
+  styleUrl: 'table-row.scss',
+  shadow: true,
+})
+export class TableRow {
+  render() {
+    return (
+      <Host role="row">
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/table.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../css/mixin";
+
+:host {
+  @include utrecht-table;
+
+  display: table;
+}

components/table/web-component/table.stencil.tsx

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-table',
+  styleUrl: 'table.scss',
+  shadow: true,
+})
+export class Table {
+  render() {
+    return (
+      <Host role="table">
+        <slot></slot>
+      </Host>
+    );
+  }
+}

components/table/web-component/template.js

@@ -0,0 +1,23 @@
+export const TableExample = () => `
+<utrecht-table aria-labelledby="53818ecc-f9a6-4a9d-9e63-12a5ebb89e31">
+  <utrecht-table-caption id="53818ecc-f9a6-4a9d-9e63-12a5ebb89e31">Table</utrecht-table-caption>
+  <utrecht-table-header>
+    <utrecht-table-row>
+      <utrecht-table-header-cell scope="col">Column header cell 1</utrecht-table-header-cell>
+      <utrecht-table-header-cell scope="col">Column header cell 2</utrecht-table-header-cell>
+    </utrecht-table-row>
+  </utrecht-table-header>
+  <utrecht-table-footer>
+    <utrecht-table-row>
+      <utrecht-table-cell>Footer cell 1</utrecht-table-cell>
+      <utrecht-table-cell>Footer cell 2</utrecht-table-cell>
+    </utrecht-table-row>
+  </utrecht-table-footer>
+  <utrecht-table-body>
+    <utrecht-table-row>
+      <utrecht-table-header-cell scope="row">Row header cell</utrecht-table-header-cell>
+      <utrecht-table-cell>Cell</utrecht-table-cell>
+    </utrecht-table-row>
+  </utrecht-table-body>
+</utrecht-table>
+`;

packages/web-component-library-angular/src/index.module.ts

@@ -63,6 +63,14 @@ import {
   UtrechtParagraph,
   UtrechtSeparator,
   UtrechtSidenav,
+  UtrechtTable,
+  UtrechtTableBody,
+  UtrechtTableCaption,
+  UtrechtTableCell,
+  UtrechtTableFooter,
+  UtrechtTableHeader,
+  UtrechtTableHeaderCell,
+  UtrechtTableRow,
   UtrechtTextbox,
 } from './directives/proxies';
 import { SelectValueAccessor } from './directives/select-value-accessor';
@@ -132,6 +140,14 @@ const components = [
   UtrechtParagraph,
   UtrechtSeparator,
   UtrechtSidenav,
+  UtrechtTable,
+  UtrechtTableBody,
+  UtrechtTableCaption,
+  UtrechtTableCell,
+  UtrechtTableFooter,
+  UtrechtTableHeader,
+  UtrechtTableHeaderCell,
+  UtrechtTableRow,
   UtrechtTextbox,
 ];