@nationalarchives/frontend 0.1.3-prerelease

package/nationalarchives/components/footer/macro-options.json

@@ -0,0 +1,80 @@
+[
+  {
+    "name": "navigation",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "",
+        "params": [
+          {
+            "name": "text",
+            "type": "string",
+            "required": true,
+            "description": ""
+          },
+          {
+            "name": "href",
+            "type": "string",
+            "required": true,
+            "description": ""
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "required": false,
+            "description": ""
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "social",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the footer."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the footer."
+  }
+]

package/nationalarchives/components/footer/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaFooter(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/footer/template.njk

@@ -0,0 +1,46 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<footer class="tna-footer {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {%- if params.navigation -%}
+    <div class="tna-container tna-footer__navigation">
+    {%- for group in params.navigation -%}
+        <div class="tna-column tna-column--flex-1 tna-footer__navigation-group">
+            <h4 class="tna-footer__navigation-group-title">{{ group.title }}</h4>
+            <ul class="tna-footer__navigation-group-items">
+            {%- for item in group.items -%}
+                <li class="tna-footer__navigation-group-item">
+                    <a href="{{ item.href }}" class="tna-footer__navigation-group-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+                </li>
+            {%- endfor -%}
+            </ul>
+        </div>
+    {%- endfor -%}
+    </div>
+    {%- endif -%}
+    {%- if params.social -%}
+    <div class="tna-container tna-footer__social">
+    {%- for item in params.social -%}
+        <div class="tna-column tna-column--flex-1 tna-footer__social-item">
+            <a href="{{ item.href }}" class="tna-footer__social-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+        </div>
+    {%- endfor -%}
+    </div>
+    {%- endif -%}
+    <div class="tna-container">
+        <div class="tna-column">
+            <svg aria-hidden="true" focusable="false" class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+        </svg>
+        </div>
+        <div class="tna-column tna-column--flex-1">
+            <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
+        </div>
+        <div class="tna-column">
+            <a href="#" class="tna-footer__govuk-link">
+                <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" focusable="false" height="30" viewBox="0 0 132 97" width="36" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+                </svg>
+                GOV.UK
+            </a>
+        </div>
+    </div>
+</footer>

package/nationalarchives/components/grid/_grid.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

package/nationalarchives/components/grid/_index.scss

@@ -0,0 +1,84 @@
+@use "sass:math";
+
+@import "../../variables/all";
+@import "../../utilities/grid";
+
+@include nationalarchives-exports("nationalarchives/utilities/grid") {
+  .tna-container {
+    max-width: $largest-container-width;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: math.div($gutter-width, 2);
+    padding-left: math.div($gutter-width, 2);
+
+    box-sizing: border-box;
+
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: stretch;
+    align-items: stretch;
+
+    &.tna-container--max {
+      max-width: none;
+    }
+
+    &.tna-container--no-padding {
+      max-width: $largest-container-width - ($gutter-width * 2);
+      padding-right: 0;
+      padding-left: 0;
+
+      .tna-column {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+  }
+
+  .tna-column {
+    padding-right: math.div($gutter-width, 2);
+    padding-left: math.div($gutter-width, 2);
+
+    box-sizing: border-box;
+
+    &.tna-column--full {
+      width: 100%;
+    }
+
+    // &.column--no-padding {
+    //   padding-right: 0;
+    //   padding-left: 0;
+    // }
+  }
+
+  @for $i from 1 through 3 {
+    .tna-column--flex-#{$i} {
+      flex: $i 0;
+    }
+  }
+
+  //   @for $i from 1 through 3 {
+  //     .column--order-#{$i} {
+  //       order: $i;
+  //     }
+  //   }
+
+  @include columns-generator($column-count);
+
+  @media #{$media-medium} {
+    @include grid-medium;
+  }
+
+  @media #{$media-mobile} {
+    @include grid-mobile;
+  }
+
+  @media #{$media-small} {
+    @include grid-small;
+  }
+
+  @media #{$media-tiny} {
+    @include grid-tiny;
+  }
+}

package/nationalarchives/components/grid/fixtures.json

@@ -0,0 +1,273 @@
+{
+  "component": "grid",
+  "fixtures": [
+    {
+      "name": "container only",
+      "options": {},
+      "html": "<div class=\"tna-container \"></div>",
+      "hidden": false
+    },
+    {
+      "name": "container max width",
+      "options": {
+        "maxWidth": true,
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "container no padding",
+      "options": {
+        "noPadding": true,
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "container element",
+      "options": {
+        "htmlElement": "article",
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full"
+          }
+        ]
+      },
+      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\">\n        <p>Full width</p>\n    </div></article>",
+      "hidden": false
+    },
+    {
+      "name": "container classes",
+      "options": {
+        "classes": "container__test-class",
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "container attributes",
+      "options": {
+        "attributes": {
+          "data-testattribute": "foobar"
+        },
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "different columns",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full"
+          },
+          {
+            "html": "<p>Half</p>",
+            "width": "1-2"
+          },
+          {
+            "html": "<p>Half</p>",
+            "width": "1-2"
+          },
+          {
+            "html": "<p>Third</p>",
+            "width": "1-3"
+          },
+          {
+            "html": "<p>Third</p>",
+            "width": "1-3"
+          },
+          {
+            "html": "<p>Third</p>",
+            "width": "1-3"
+          },
+          {
+            "html": "<p>Two thirds</p>",
+            "width": "2-3"
+          },
+          {
+            "html": "<p>Third</p>",
+            "width": "1-3"
+          },
+          {
+            "html": "<p>Third</p>",
+            "width": "1-3"
+          },
+          {
+            "html": "<p>Two thirds</p>",
+            "width": "2-3"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Half</p>",
+            "width": "1-2"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Half</p>",
+            "width": "1-2"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Quarter</p>",
+            "width": "1-4"
+          },
+          {
+            "html": "<p>Half</p>",
+            "width": "1-2"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full\">\n        <p>Full width</p>\n    </div><div class=\"tna-column tna-column--width-1-2\">\n        <p>Half</p>\n    </div><div class=\"tna-column tna-column--width-1-2\">\n        <p>Half</p>\n    </div><div class=\"tna-column tna-column--width-1-3\">\n        <p>Third</p>\n    </div><div class=\"tna-column tna-column--width-1-3\">\n        <p>Third</p>\n    </div><div class=\"tna-column tna-column--width-1-3\">\n        <p>Third</p>\n    </div><div class=\"tna-column tna-column--width-2-3\">\n        <p>Two thirds</p>\n    </div><div class=\"tna-column tna-column--width-1-3\">\n        <p>Third</p>\n    </div><div class=\"tna-column tna-column--width-1-3\">\n        <p>Third</p>\n    </div><div class=\"tna-column tna-column--width-2-3\">\n        <p>Two thirds</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-2\">\n        <p>Half</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-2\">\n        <p>Half</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-4\">\n        <p>Quarter</p>\n    </div><div class=\"tna-column tna-column--width-1-2\">\n        <p>Half</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "column widths",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "full",
+            "widthMedium": "full",
+            "widthSmall": "full",
+            "widthTiny": "full"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full tna-column--full-medium tna-column--full-small tna-column--full-tiny\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "responsive column widths",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "width": "1-5",
+            "widthMedium": "1-4",
+            "widthSmall": "1-3",
+            "widthTiny": "1-2"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--width-1-5 tna-column--width-1-4-medium tna-column--width-1-3-small tna-column--width-1-2-tiny\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "flexible column widths",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "flex": "4",
+            "flexMedium": "3",
+            "flexSmall": "2",
+            "flexTiny": "1"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--flex-4 tna-column--flex-3-medium tna-column--flex-2-small tna-column--flex-1-tiny\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "column element",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "element": "section"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "column classes",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "classes": "column--test-class"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    },
+    {
+      "name": "column attributes",
+      "options": {
+        "columns": [
+          {
+            "html": "<p>Full width</p>",
+            "attributes": {
+              "data-testattribute": "foobar"
+            }
+          }
+        ]
+      },
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\">\n        <p>Full width</p>\n    </div></div>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/grid/grid.stories.js

@@ -0,0 +1,192 @@
+import Header from "./template.njk";
+import "../../all.scss";
+import "./_grid.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  columns: { control: "object" },
+  maxWidth: { control: "boolean" },
+  noPadding: { control: "boolean" },
+  htmlElement: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "text" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType
+  )?.description;
+});
+
+export default {
+  title: "Utilities/Grid",
+  argTypes,
+};
+
+const Template = ({
+  columns,
+  maxWidth,
+  noPadding,
+  htmlElement,
+  classes,
+  attributes,
+}) => {
+  return Header({
+    params: {
+      columns,
+      maxWidth,
+      noPadding,
+      htmlElement,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  classes: "tna-container--demo",
+  columns: [
+    {
+      html: "<p>Full width</p>",
+      width: "full",
+    },
+    {
+      html: "<p>Half</p>",
+      width: "1-2",
+    },
+    {
+      html: "<p>Half</p>",
+      width: "1-2",
+    },
+    {
+      html: "<p>Third</p>",
+      width: "1-3",
+    },
+    {
+      html: "<p>Third</p>",
+      width: "1-3",
+    },
+    {
+      html: "<p>Third</p>",
+      width: "1-3",
+    },
+    {
+      html: "<p>Two thirds</p>",
+      width: "2-3",
+    },
+    {
+      html: "<p>Third</p>",
+      width: "1-3",
+    },
+    {
+      html: "<p>Third</p>",
+      width: "1-3",
+    },
+    {
+      html: "<p>Two thirds</p>",
+      width: "2-3",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Half</p>",
+      width: "1-2",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Half</p>",
+      width: "1-2",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Quarter</p>",
+      width: "1-4",
+    },
+    {
+      html: "<p>Half</p>",
+      width: "1-2",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+    {
+      html: "<p>Half</p>",
+      width: "1-2",
+    },
+    {
+      html: "<p>Third</p>",
+      width: "1-3",
+    },
+    {
+      html: "<p>Sixth</p>",
+      width: "1-6",
+    },
+  ],
+};
+
+export const Responsive = Template.bind({});
+const responsiveColumn = {
+  html: "<p>Responsive</p>",
+  width: "1-4",
+  widthMedium: "1-3",
+  widthSmall: "1-2",
+  widthTiny: "full",
+};
+Responsive.args = {
+  classes: "tna-container--demo",
+  columns: Array(12).fill({ ...responsiveColumn }),
+};