Use button macro inside other components

nationalarchives · Oct 10, 2023 · 929b400 · 929b400
1 parent 167c616
commit 929b400
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 20 deletions.
diff --git a/src/nationalarchives/components/button/button.stories.js b/src/nationalarchives/components/button/button.stories.js
@@ -11,6 +11,7 @@ const argTypes = {
   small: { control: "boolean" },
   plain: { control: "boolean" },
   iconOnly: { control: "boolean" },
+  iconOnlyOnMobile: { control: "boolean" },
   buttonElement: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -37,6 +38,7 @@ const Template = ({
   small,
   plain,
   iconOnly,
+  iconOnlyOnMobile,
   buttonElement,
   classes,
   attributes,
@@ -52,6 +54,7 @@ const Template = ({
       small,
       plain,
       iconOnly,
+      iconOnlyOnMobile,
       buttonElement,
       classes,
       attributes,

diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json
@@ -47,6 +47,18 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "iconOnly",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "iconOnlyOnMobile",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "buttonElement",
     "type": "boolean",

diff --git a/src/nationalarchives/components/button/template.njk b/src/nationalarchives/components/button/template.njk
@@ -11,11 +11,14 @@
 {%- if params.iconOnly -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--icon-only') -%}
 {%- endif -%}
+{%- if params.iconOnlyOnMobile -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--icon-only-mobile') -%}
+{%- endif -%}
 <{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if not params.buttonElement %} role="button"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.brandIcon %}
-  <i class="fa-brands fa-{{ params.brandIcon }}"></i>
+  <i class="fa-brands fa-{{ params.brandIcon }}" aria-hidden="true"></i>
   {%- elseif params.icon %}
-  <i class="fa-solid fa-{{ params.icon }}"></i>
+  <i class="fa-solid fa-{{ params.icon }}" aria-hidden="true"></i>
   {%- endif %}
   {{ params.text }}
 </{{ 'button' if params.buttonElement else 'a' }}>
diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk
@@ -1,3 +1,5 @@
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <footer class="tna-footer {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
@@ -79,10 +81,12 @@
         <p>
           Subscribe for regular news, updates and priority booking for events.
         </p>
-        <a href="#" class="tna-button tna-button--accent" role="button">
-          <i class="fa-solid fa-envelope"></i>
-          Subscribe
-        </a>
+        {{ tnaButton({
+          text: "Subscribe",
+          href: "#",
+          accent: true,
+          icon: "envelope"
+        }) }}
       </div>
     </div>
     {%- endif -%}

diff --git a/src/nationalarchives/components/pagination/template.njk b/src/nationalarchives/components/pagination/template.njk
@@ -1,11 +1,18 @@
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <nav class="tna-pagination {{ containerClasses | join(' ') }}" role="navigation" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Results' }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if params.previous -%}
   <div class="tna-pagination__prev">
-    <a class="tna-button tna-button--icon-only-mobile" href="{{ params.previous.href }}" role="button" rel="prev">
-      <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
-      {{ params.previous.text if params.previous.text else 'Previous' }}
-    </a>
+    {{ tnaButton({
+      text: params.previous.text if params.previous.text else "Previous",
+      href: "#",
+      icon: "arrow-left",
+      iconOnlyOnMobile: true,
+      attributes: {
+        rel: "prev"
+      }
+    }) }}
   </div>
   {% endif -%}
   <ul class="tna-pagination__list">
@@ -14,19 +21,30 @@
       <li class="tna-pagination__item tna-pagination__item--ellipses">&ctdot;</li>
       {% else -%}
       <li class="tna-pagination__item{{ ' tna-pagination__item--current' if item.current }}">
-        <a class="tna-button{{ ' tna-button--accent' if item.current }} tna-pagination__link" role="button" href="{{ item.href }}" aria-label="{{ item.label }}">
-          {{ item.number }}
-        </a>
+        {{ tnaButton({
+          text: item.number,
+          href: item.href,
+          accent: item.current,
+          classes: "tna-pagination__link",
+          attributes: {
+            "aria-label": item.label
+          }
+        }) }}
       </li>
       {% endif -%}
     {% endfor -%}
   </ul>
   {% if params.next -%}
   <div class="tna-pagination__next">
-    <a class="tna-button tna-button--icon-only-mobile" href="{{ params.next.href }}" role="button" rel="prev">
-      {{ params.next.text if params.next.text else 'Next' }}
-      <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
-    </a>
+    {{ tnaButton({
+      text: params.next.text if params.next.text else "Next",
+      href: "#",
+      icon: "arrow-right",
+      iconOnlyOnMobile: true,
+      attributes: {
+        rel: "next"
+      }
+    }) }}
   </div>
   {% endif -%}
 </nav>
diff --git a/tasks/test-fixtures.js b/tasks/test-fixtures.js
@@ -28,9 +28,15 @@ const failedComponents = components.filter((component) => {
   );
   const failedFixtures = componentFixtures.fixtures.filter((fixture) => {
     const result = nunjucks
-      .renderString(componentNunjucks, {
-        params: fixture.options,
-      })
+      .renderString(
+        componentNunjucks.replace(
+          '{% from "nationalarchives/components/',
+          '{% from "src/nationalarchives/components/',
+        ),
+        {
+          params: fixture.options,
+        },
+      )
       .trim()
       .replace(/>\n\s*/g, ">")
       .replace(/\n\s*</g, "<");