Merge pull request #2663 from ONSdigital/fix/2100/components-name-not…

…-matching-macros-name Fix/2100/components name not matching macros name
ONSdigital · Jun 19, 2023 · 7433d3c · 7433d3c
2 parents 6f7001a + 5258e0e
commit 7433d3c
Show file tree

Hide file tree

Showing 71 changed files with 2,558 additions and 2,611 deletions.
diff --git a/config/components.json b/config/components.json
@@ -9,13 +9,13 @@
     "templateName": "components/checkboxes/_checkbox-macro.njk",
     "macroName": "onsCheckbox"
   },
-  "icons": {
+  "icon": {
     "macroName": "onsIcon"
   },
   "image": {
     "macroName": "onsImage"
   },
-  "lists": {
+  "list": {
     "macroName": "onsList"
   },
   "related-content/section": {

diff --git a/src/components/access-code/example-access-code-error.njk b/src/components/access-code/example-access-code-error.njk
@@ -20,7 +20,7 @@ layout: ~
         })
     %}
 
-        {% from "components/lists/_macro.njk" import onsList %}
+        {% from "components/list/_macro.njk" import onsList %}
         {{
             onsList({
                 "element": "ol",

diff --git a/src/components/breadcrumbs/_macro.njk b/src/components/breadcrumbs/_macro.njk
@@ -1,4 +1,4 @@
-{% from "components/icons/_macro.njk" import onsIcon %}
+{% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsBreadcrumbs(params) %}
     <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>

diff --git a/src/components/breadcrumbs/_macro.spec.js b/src/components/breadcrumbs/_macro.spec.js
@@ -119,7 +119,7 @@ describe('macro: breadcrumbs', () => {
 
   it('has a "chevron" icon for each breadcrumb item', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
 

diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
@@ -1,4 +1,4 @@
-{% from "components/icons/_macro.njk" import onsIcon %}
+{% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsButton(params) %}
 

diff --git a/src/components/button/_macro.spec.js b/src/components/button/_macro.spec.js
@@ -60,7 +60,7 @@ describe('macro: button', () => {
 
   it('has `download` icon when `variants` contains "download"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
@@ -84,7 +84,7 @@ describe('macro: button', () => {
 
   it('has `print` icon when `variants` contains "print"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
@@ -108,7 +108,7 @@ describe('macro: button', () => {
 
   it('has `loader` icon when `variants` contains "loader"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       variants: 'loader',
@@ -119,7 +119,7 @@ describe('macro: button', () => {
 
   it('has `chevron` icon when `variants` contains "mobile"', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('button', {
       variants: 'mobile',
@@ -346,7 +346,7 @@ describe('macro: button', () => {
 
     it('has `arrow-next` icon by default', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('button', {
         url: 'http://example.com',
@@ -369,7 +369,7 @@ describe('macro: button', () => {
 
     it('has `external-link` icon when `newWindow` is `true`', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('button', {
         url: 'http://example.com',

diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk
@@ -1,6 +1,6 @@
 {%- macro onsCard(params) -%}
 
-  {% from "components/lists/_macro.njk" import onsList %}
+  {% from "components/list/_macro.njk" import onsList %}
 
   {% set titleSize = params.titleSize | default('2') %}
 

diff --git a/src/components/card/_macro.spec.js b/src/components/card/_macro.spec.js
@@ -87,7 +87,7 @@ describe('macro: card', () => {
 
     it('renders the provided `itemsList` using the `list` component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('card', {
         ...EXAMPLE_CARD_WITHOUT_IMAGE,

diff --git a/src/components/collapsible/_macro.spec.js b/src/components/collapsible/_macro.spec.js
@@ -134,7 +134,7 @@ describe('macro: collapsible', () => {
 
   it('has `chevron` icon', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
     faker.renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC);
 
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');

diff --git a/src/components/content-pagination/_macro.njk b/src/components/content-pagination/_macro.njk
@@ -6,15 +6,15 @@
           <a href="{{ contentPaginationItem.url }}" class="ons-content-pagination__link" rel="{{ contentPaginationItem.rel }}">
             <span class="ons-content-pagination__link-title">
                 {% if contentPaginationItem.rel == 'prev' %}
-                  {% from "components/icons/_macro.njk" import onsIcon %}
+                  {% from "components/icon/_macro.njk" import onsIcon %}
                   {{
                       onsIcon({
                           "iconType": 'arrow-previous',
                           "iconSize": 'm'
                       })
                   }}
                 {% else %}
-                  {% from "components/icons/_macro.njk" import onsIcon %}
+                  {% from "components/icon/_macro.njk" import onsIcon %}
                   {{
                       onsIcon({
                           "iconType": 'arrow-next',

diff --git a/src/components/content-pagination/_macro.spec.js b/src/components/content-pagination/_macro.spec.js
@@ -81,7 +81,7 @@ describe('macro: content-pagination', () => {
 
   it('renders the `arrow-previous` icon for the previous link entry', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_PREV_ONLY);
 
@@ -91,7 +91,7 @@ describe('macro: content-pagination', () => {
 
   it('renders the `arrow-next` icon for the next link entry', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY);
 

diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk
@@ -14,7 +14,7 @@
                 {% set titleTag = params.titleTag | default("h2") %}
                 <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
                 <span class="ons-details__icon">
-                    {% from "components/icons/_macro.njk" import onsIcon %}
+                    {% from "components/icon/_macro.njk" import onsIcon %}
                     {{
                         onsIcon({
                             "iconType": "chevron"

diff --git a/src/components/details/_macro.spec.js b/src/components/details/_macro.spec.js
@@ -134,7 +134,7 @@ describe('macro: details', () => {
 
   it('has `chevron` icon', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
     faker.renderComponent('details', EXAMPLE_DETAILS_BASIC);
 
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');

diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk
@@ -1,7 +1,7 @@
 {% macro onsFooter(params) %}
 
-    {% from "components/lists/_macro.njk" import onsList %}
-    {% from "components/icons/_macro.njk" import onsIcon %}
+    {% from "components/list/_macro.njk" import onsList %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
 
     {% if params.lang %}
         {% set lang = params.lang %}

diff --git a/src/components/footer/_macro.spec.js b/src/components/footer/_macro.spec.js
@@ -137,7 +137,7 @@ describe('macro: footer', () => {
 
     it('renders OGL icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('footer', params);
 
@@ -284,7 +284,7 @@ describe('macro: footer', () => {
 
     it('renders expected lists using list component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('footer', params);
 
@@ -312,7 +312,7 @@ describe('macro: footer', () => {
 
     it('renders expected lists using list component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('footer', params);
 
@@ -340,7 +340,7 @@ describe('macro: footer', () => {
 
     it('renders expected lists using list component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('footer', params);
 
@@ -379,7 +379,7 @@ describe('macro: footer', () => {
         };
         it('renders the expected icon', () => {
           const faker = templateFaker();
-          const iconsSpy = faker.spy('icons');
+          const iconsSpy = faker.spy('icon');
 
           faker.renderComponent('footer', params);
 
@@ -403,7 +403,7 @@ describe('macro: footer', () => {
         };
         it('renders the expected icon', () => {
           const faker = templateFaker();
-          const iconsSpy = faker.spy('icons');
+          const iconsSpy = faker.spy('icon');
 
           faker.renderComponent('footer', params);
 
@@ -544,7 +544,7 @@ describe('macro: footer', () => {
 
     it('renders crest icon when `crest` parameter is provided', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('footer', params);
 

diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
@@ -1,6 +1,6 @@
 {% macro onsHeader(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
-    {% from "components/icons/_macro.njk" import onsIcon %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
     {% from "components/navigation/_macro.njk" import onsNavigation %}
     {% from "components/browser-banner/_macro.njk" import onsBrowserBanner %}
 

diff --git a/src/components/header/_macro.spec.js b/src/components/header/_macro.spec.js
@@ -214,7 +214,7 @@ describe('macro: header', () => {
 
     it('has the default masthead logo icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -223,7 +223,7 @@ describe('macro: header', () => {
 
     it('has the default masthead mobile logo icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -232,7 +232,7 @@ describe('macro: header', () => {
 
     it('has the default masthead logo icon alt text', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -241,7 +241,7 @@ describe('macro: header', () => {
 
     it('has the default masthead mobile logo icon alt text', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
@@ -549,7 +549,7 @@ describe('macro: header', () => {
 
     it('has the correct list item icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('header', {
         ...EXAMPLE_HEADER_BASIC,

diff --git a/src/components/icons/_icons.scss → src/components/icon/_icon.scss b/src/components/icons/_icons.scss → src/components/icon/_icon.scss
diff --git a/src/components/icons/_macro.njk → src/components/icon/_macro.njk b/src/components/icons/_macro.njk → src/components/icon/_macro.njk
diff --git a/src/components/icons/_macro.spec.js → src/components/icon/_macro.spec.js b/src/components/icons/_macro.spec.js → src/components/icon/_macro.spec.js
@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-describe('macro: icons', () => {
+describe('macro: icon', () => {
   describe.each([
     'arrow-forward',
     'arrow-next',
@@ -35,21 +35,21 @@ describe('macro: icons', () => {
     'circle-lined',
   ])('icon type: %s', iconType => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('icons', { iconType }));
+      const $ = cheerio.load(renderComponent('icon', { iconType }));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('has an svg element', () => {
-      const $ = cheerio.load(renderComponent('icons', { iconType }));
+      const $ = cheerio.load(renderComponent('icon', { iconType }));
 
       expect($('svg').length).toBe(1);
     });
 
     it('has additionally provided style classes', () => {
       const $ = cheerio.load(
-        renderComponent('icons', {
+        renderComponent('icon', {
           iconType,
           classes: 'extra-class another-extra-class',
         }),
@@ -80,7 +80,7 @@ describe('macro: icons', () => {
   ])('icon type: %s', iconType => {
     it('has style variation class for provided icon size', () => {
       const $ = cheerio.load(
-        renderComponent('icons', {
+        renderComponent('icon', {
           iconType,
           iconSize: 'xxl',
         }),
@@ -99,7 +99,7 @@ describe('macro: icons', () => {
     ['ogl', 'Open Government License logo'],
   ])('icon type: %s', (iconType, expectedAltText) => {
     it(`has default alt text '${expectedAltText}'`, () => {
-      const $ = cheerio.load(renderComponent('icons', { iconType }));
+      const $ = cheerio.load(renderComponent('icon', { iconType }));
 
       expect(
         $('title')
@@ -110,7 +110,7 @@ describe('macro: icons', () => {
 
     it('has provided alt text', () => {
       const $ = cheerio.load(
-        renderComponent('icons', {
+        renderComponent('icon', {
           iconType,
           altText: 'Example alt text',
         }),

diff --git a/src/components/lists/_list.scss → src/components/list/_list.scss b/src/components/lists/_list.scss → src/components/list/_list.scss
diff --git a/src/components/lists/_macro-options.md → src/components/list/_macro-options.md b/src/components/lists/_macro-options.md → src/components/list/_macro-options.md
diff --git a/src/components/lists/_macro.njk → src/components/list/_macro.njk b/src/components/lists/_macro.njk → src/components/list/_macro.njk
@@ -40,7 +40,7 @@
                             {%- if item.prefix -%}
                                 {{- item.prefix -}}.
                             {% elif params.iconPosition == 'before' %}
-                                {% from "components/icons/_macro.njk" import onsIcon %}
+                                {% from "components/icon/_macro.njk" import onsIcon %}
                                 {{
                                     onsIcon({
                                         "iconType": itemIconType,
@@ -75,7 +75,7 @@
                         {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
                             {{- loop.index -}}
                         {% elif params.iconPosition == 'after' %}
-                            {% from "components/icons/_macro.njk" import onsIcon %}
+                            {% from "components/icon/_macro.njk" import onsIcon %}
                             {{
                                 onsIcon({
                                     "iconType": itemIconType,