Add table pattern

src/pattern-library/components/patterns/TablePatterns.js

@@ -0,0 +1,125 @@
+import Library from '../Library';
+
+// "Fixture" for example table contents
+function ExampleTBody() {
+  return (
+    <tbody>
+      <tr>
+        <td>Alphanumeric Balloons</td>
+        <td>Champagne Delusions</td>
+      </tr>
+      <tr>
+        <td>Elephantine Fry-ups</td>
+        <td>Gargantuan Hiccups</td>
+      </tr>
+      <tr className="is-selected">
+        <td>Illicit Jugglers</td>
+        <td>Katydid Lozenges Meringue</td>
+      </tr>
+      <tr>
+        <td>Alphanumeric Balloons</td>
+        <td>Champagne Delusions</td>
+      </tr>
+      <tr>
+        <td>Elephantine Fry-ups</td>
+        <td>Gargantuan Hiccups</td>
+      </tr>
+      <tr>
+        <td>Illicit Jugglers</td>
+        <td>Katydid Lozenges Moebius</td>
+      </tr>
+      <tr>
+        <td>Elephantine Fry-ups</td>
+        <td>Gargantuan Hiccups</td>
+      </tr>
+      <tr>
+        <td>Illicit Jugglers</td>
+        <td>Katydid Lozenges Meringue</td>
+      </tr>
+      <tr>
+        <td>Alphanumeric Balloons</td>
+        <td>Champagne Delusions</td>
+      </tr>
+    </tbody>
+  );
+}
+
+export default function TablePatterns() {
+  return (
+    <Library.Page title="Tables">
+      <p>
+        These <code>table</code> patterns support a basic table layout that
+        adapts to available space. They are intended for simpler tabular
+        display: maximum 2 or possibly 3 columns. Remember that{' '}
+        <code>table</code> content needs to be usable in tight and narrow
+        spaces.
+      </p>
+      <Library.Pattern title="Table">
+        <Library.Example title="Basic table" variant="wide">
+          <p>
+            By default, a <code>table</code> will fill available horizontal
+            space, and will use whatever height is needed to render its rows.{' '}
+            <code>tr.is-selected</code> styles a row as selected.
+          </p>
+
+          <Library.Demo withSource>
+            <table className="hyp-table">
+              <thead>
+                <tr>
+                  <th scope="col">Column A</th>
+                  <th scope="col">Column B</th>
+                </tr>
+              </thead>
+              <ExampleTBody />
+            </table>
+          </Library.Demo>
+        </Library.Example>
+
+        <Library.Example title="Adjusting column widths">
+          <p>
+            Table column widths may be adjusted by styling <code>thead th</code>{' '}
+            elements. In this example, the column widths are set to 30% and 70%.
+          </p>
+          <Library.Demo withSource>
+            <table className="hyp-table">
+              <thead>
+                <tr>
+                  <th scope="col" style="width:30%">
+                    Column A
+                  </th>
+                  <th scope="col" style="width:70%">
+                    Column B
+                  </th>
+                </tr>
+              </thead>
+              <ExampleTBody />
+            </table>
+          </Library.Demo>
+        </Library.Example>
+
+        <Library.Example title="Constraining with a scrollbox">
+          <p>
+            In this example, the <code>table</code> is constrained within a{' '}
+            <code>scrollbox</code> with a <code>max-height</code>.
+          </p>
+          <Library.Demo withSource>
+            <div
+              style="max-height:250px"
+              className="hyp-scrollbox--with-header"
+            >
+              <table className="hyp-table">
+                <thead>
+                  <tr>
+                    <th scope="col">Column A</th>
+                    <th scope="col">Column B</th>
+                  </tr>
+                </thead>
+                <ExampleTBody />
+              </table>
+            </div>
+          </Library.Demo>
+        </Library.Example>
+      </Library.Pattern>
+    </Library.Page>
+  );
+}

src/pattern-library/routes.js

@@ -7,6 +7,7 @@ import FormPatterns from './components/patterns/FormPatterns';
 import ContainerPatterns from './components/patterns/ContainerPatterns';
 import PanelPatterns from './components/patterns/PanelPatterns';
 import SpinnerPatterns from './components/patterns/SpinnerPatterns';
+import TablePatterns from './components/patterns/TablePatterns';
 import ThumbnailPatterns from './components/patterns/ThumbnailPatterns';
 
 import ButtonComponents from './components/patterns/ButtonComponents';
@@ -73,6 +74,12 @@ const routes = [
     component: SpinnerPatterns,
     group: 'patterns',
   },
+  {
+    route: '/patterns-tables',
+    title: 'Tables',
+    component: TablePatterns,
+    group: 'patterns',
+  },
   {
     route: '/patterns-thumbnails',
     title: 'Thumbnails',

styles/mixins/patterns/_tables.scss

@@ -0,0 +1,75 @@
+@use '../../variables' as var;
+
+@use '../atoms';
+@use '../focus';
+@use '../layout';
+
+$-color-background--light: var.$color-white;
+$-color-background--dark: var.$color-grey-7;
+$-color-header-background: var.$color-grey-1;
+$-min-row-height: var.$touch-target-size;
+
+@mixin table {
+  @include focus.outline-on-keyboard-focus;
+
+  // Keep separate borders (this is browser default) to allow control over
+  // the borders of the sticky-positioned top header row: this is needed to
+  // prevent gaps at the top of the <thead> row that scrolling content could peek
+  // through, and to assert control over the sticky-<th> borders as positioning
+  // changes.
+  border-collapse: separate;
+  border-spacing: 0;
+  // Allow th styles to define overall column widths for table
+  table-layout: fixed;
+  width: 100%;
+  color: var.$color-text;
+
+  th,
+  td {
+    @include layout.padding;
+  }
+
+  td {
+    @include atoms.border(top);
+  }
+
+  thead {
+    // Prevent extra vertical height with <th> elements
+    // FIXME: Review after typography patterns introduced
+    line-height: 1;
+
+    th {
+      @include atoms.border(bottom);
+      height: $-min-row-height;
+      position: sticky;
+      top: 0;
+
+      // Ensure the header is displayed above content in the table when it is
+      // scrolled, including any content which establishes a new stacking context.
+      z-index: 1;
+
+      background-color: $-color-header-background;
+      text-align: left;
+    }
+  }
+
+  tbody {
+    // Make table content look interact-able
+    cursor: pointer;
+
+    // No border on top of first row's <td> elements, to eliminate a
+    // double border with the <th>s
+    & tr:first-child td {
+      border-top: none;
+    }
+
+    & tr {
+      height: $-min-row-height;
+
+      &.is-selected {
+        background-color: $-color-background--dark;
+        color: var.$color-white;
+      }
+    }
+  }
+}

styles/patterns/_tables.scss

@@ -0,0 +1,5 @@
+@use '../mixins/patterns/tables';
+
+.hyp-table {
+  @include tables.table;
+}

styles/patterns/index.scss

@@ -2,4 +2,5 @@
 @use 'forms';
 @use 'panels';
 @use 'spinners';
+@use 'tables';
 @use 'thumbnails';

styles/variables/_colors.scss

@@ -25,6 +25,7 @@ $black: black;
 // Typography: TODO refactor when adding typography patterns
 $text: $grey-9;
 $text--light: $grey-6;
+$text--inverted: $grey-1;
 // This does not provide enough contrast on white to meet WCAG AA standards,
 // and should only be used for disabled interfaces.
 $text--disabled: $grey-4;