@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/components/grid/fixtures.json

@@ -18,7 +18,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -32,7 +32,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -46,7 +46,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></article>",
+      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></article>",
       "hidden": false
     },
     {
@@ -60,7 +60,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -76,7 +76,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -177,7 +177,7 @@
           }
         ]
       },
-      "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>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div></div>",
       "hidden": false
     },
     {
@@ -193,7 +193,7 @@
           }
         ]
       },
-      "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>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full tna-column--full-medium tna-column--full-small tna-column--full-tiny\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -209,7 +209,7 @@
           }
         ]
       },
-      "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>",
+      "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\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -225,7 +225,7 @@
           }
         ]
       },
-      "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>",
+      "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\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -238,7 +238,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column \">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -251,7 +251,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -266,7 +266,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\"><p>Full width</p></div></div>",
       "hidden": false
     }
   ]

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

@@ -1,5 +1,4 @@
 import Header from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -47,7 +46,7 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  classes: "tna-container--demo",
+  classes: "tna-grid--demo",
   columns: [
     {
       html: "<p>Full width</p>",
@@ -189,6 +188,60 @@ const responsiveColumn = {
   widthTiny: "full",
 };
 Responsive.args = {
-  classes: "tna-container--demo",
+  classes: "tna-grid--demo tna-grid--demo-tall",
   columns: Array(12).fill({ ...responsiveColumn }),
 };
+
+export const Flex = Template.bind({});
+Flex.args = {
+  classes: "tna-grid--demo",
+  columns: [
+    {
+      html: "<h1>A</h1>",
+      width: "1-4",
+    },
+    {
+      html: "<h1>B</h1>",
+      flex: 1,
+    },
+  ],
+};
+
+export const Order = Template.bind({});
+Order.args = {
+  classes: "tna-grid--demo tna-grid--demo-tall",
+  columns: [
+    {
+      html: "<h1>A</h1>",
+      width: "1-4",
+      order: 1,
+      orderMedium: 2,
+      orderSmall: 3,
+      orderTiny: 4,
+    },
+    {
+      html: "<h1>B</h1>",
+      width: "1-4",
+      order: 2,
+      orderMedium: 1,
+      orderSmall: 4,
+      orderTiny: 3,
+    },
+    {
+      html: "<h1>C</h1>",
+      width: "1-4",
+      order: 3,
+      orderMedium: 4,
+      orderSmall: 1,
+      orderTiny: 2,
+    },
+    {
+      html: "<h1>D</h1>",
+      width: "1-4",
+      order: 4,
+      orderMedium: 3,
+      orderSmall: 2,
+      orderTiny: 1,
+    },
+  ],
+};

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

@@ -59,6 +59,36 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "order",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "orderMedium",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "orderSmall",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "orderTiny",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "noPadding",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "classes",
         "type": "string",

package/nationalarchives/components/grid/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaGrid(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/grid/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/grid/template.njk

@@ -13,6 +13,7 @@
 {%- for item in params.columns -%}
   {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}
   {%- set columnClasses = [item.classes] if item.classes else [] -%}
+  
   {%- if item.width -%}
     {%- set columnClasses = columnClasses.concat('tna-column--full') if item.width == 'full' else ( columnClasses.concat('tna-column--width-' + item.width) ) -%}
   {%- endif -%}
@@ -25,6 +26,7 @@
   {%- if item.widthTiny -%}
     {%- set columnClasses = columnClasses.concat('tna-column--full-tiny') if item.widthTiny == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthTiny + '-tiny') ) -%}
   {%- endif -%}
+
   {%- if item.flex -%}
     {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flex) -%}
   {%- endif -%}
@@ -37,8 +39,22 @@
   {%- if item.flexTiny -%}
     {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexTiny + '-tiny') -%}
   {%- endif -%}
+
+  {%- if item.order -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.order) -%}
+  {%- endif -%}
+  {%- if item.orderMedium -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.orderMedium + '-medium') -%}
+  {%- endif -%}
+  {%- if item.orderSmall -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.orderSmall + '-small') -%}
+  {%- endif -%}
+  {%- if item.orderTiny -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.orderTiny + '-tiny') -%}
+  {%- endif -%}
+
   {%- if item.noPadding -%}
-    {%- set columnClasses = columnClasses.concat('tna-column--noPadding') -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--no-padding') -%}
   {%- endif -%}
   <{{ columnHtmlElement }} class="tna-column {{ columnClasses | join(' ') }}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {{ item.html | safe }}