Merge branch 'main' into fix/2100/components-name-not-matching-macros…

…-name
ONSdigital · Jun 16, 2023 · 5258e0e · 5258e0e
2 parents d8bc604 + 6f7001a
commit 5258e0e
Show file tree

Hide file tree

Showing 38 changed files with 177 additions and 149 deletions.
diff --git a/...st__components_image_example-image-for-regular-screens_0_document_0_desktop.png b/...st__components_image_example-image-for-regular-screens_0_document_0_desktop.png
diff --git a/...est__components_image_example-image-for-regular-screens_0_document_1_tablet.png b/...est__components_image_example-image-for-regular-screens_0_document_1_tablet.png
diff --git a/...est__components_image_example-image-for-regular-screens_0_document_2_mobile.png b/...est__components_image_example-image-for-regular-screens_0_document_2_mobile.png
diff --git a/...est__components_image_example-image-for-retina-screens_0_document_0_desktop.png b/...est__components_image_example-image-for-retina-screens_0_document_0_desktop.png
diff --git a/...test__components_image_example-image-for-retina-screens_0_document_1_tablet.png b/...test__components_image_example-image-for-retina-screens_0_document_1_tablet.png
diff --git a/...test__components_image_example-image-for-retina-screens_0_document_2_mobile.png b/...test__components_image_example-image-for-retina-screens_0_document_2_mobile.png
diff --git a/...t__components_image_example-images-for-regular-screens_0_document_0_desktop.png b/...t__components_image_example-images-for-regular-screens_0_document_0_desktop.png
diff --git a/...st__components_image_example-images-for-regular-screens_0_document_1_tablet.png b/...st__components_image_example-images-for-regular-screens_0_document_1_tablet.png
diff --git a/...st__components_image_example-images-for-regular-screens_0_document_2_mobile.png b/...st__components_image_example-images-for-regular-screens_0_document_2_mobile.png
diff --git a/...st__components_image_example-images-for-retina-screens_0_document_0_desktop.png b/...st__components_image_example-images-for-retina-screens_0_document_0_desktop.png
diff --git a/...est__components_image_example-images-for-retina-screens_0_document_1_tablet.png b/...est__components_image_example-images-for-retina-screens_0_document_1_tablet.png
diff --git a/...est__components_image_example-images-for-retina-screens_0_document_2_mobile.png b/...est__components_image_example-images-for-retina-screens_0_document_2_mobile.png
diff --git a/config/components.json b/config/components.json
@@ -12,7 +12,7 @@
   "icon": {
     "macroName": "onsIcon"
   },
-  "images": {
+  "image": {
     "macroName": "onsImage"
   },
   "list": {

diff --git a/src/components/images/_images.scss → src/components/image/_image.scss b/src/components/images/_images.scss → src/components/image/_image.scss
diff --git a/src/components/images/_macro-options.md → src/components/image/_macro-options.md b/src/components/images/_macro-options.md → src/components/image/_macro-options.md
diff --git a/src/components/images/_macro.njk → src/components/image/_macro.njk b/src/components/images/_macro.njk → src/components/image/_macro.njk
diff --git a/src/components/images/_macro.spec.js → src/components/image/_macro.spec.js b/src/components/images/_macro.spec.js → src/components/image/_macro.spec.js
@@ -16,16 +16,16 @@ const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
   },
 };
 
-describe('macro: images', () => {
+describe('macro: image', () => {
   it('outputs a `figure` element', () => {
-    const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+    const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
     expect($('.ons-figure')[0].tagName).toBe('figure');
   });
 
   it('outputs a `figurecaption` element when `caption` is provided', () => {
     const $ = cheerio.load(
-      renderComponent('images', {
+      renderComponent('image', {
         ...EXAMPLE_IMAGE_URL_MINIMAL,
         caption: 'Example image caption',
       }),
@@ -36,7 +36,7 @@ describe('macro: images', () => {
 
   it('outputs a `figurecaption` element with provided `caption` text', () => {
     const $ = cheerio.load(
-      renderComponent('images', {
+      renderComponent('image', {
         ...EXAMPLE_IMAGE_URL_MINIMAL,
         caption: 'Example image caption',
       }),
@@ -51,27 +51,27 @@ describe('macro: images', () => {
 
   describe('mode: url', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       expect($('.ons-figure__image')[0].tagName).toBe('img');
     });
 
     it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_URL_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
       expect($('.ons-figure__image').attr('src')).toBe('example.png');
     });
 
     it('outputs an `img` element with the expected alt text', () => {
       const $ = cheerio.load(
-        renderComponent('images', {
+        renderComponent('image', {
           ...EXAMPLE_IMAGE_URL_MINIMAL,
           alt: 'Example alt text',
         }),
@@ -83,33 +83,33 @@ describe('macro: images', () => {
 
   describe('mode: image', () => {
     it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       const results = await axe($.html());
       expect(results).toHaveNoViolations();
     });
 
     it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image')[0].tagName).toBe('img');
     });
 
     it('outputs an `img` element with the expected `srcset`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
     });
 
     it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('images', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
       expect($('.ons-figure__image').attr('src')).toBe('example-small.png');
     });
 
     it('outputs an `img` element with the expected alt text', () => {
       const $ = cheerio.load(
-        renderComponent('images', {
+        renderComponent('image', {
           ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
           alt: 'Example alt text',
         }),

diff --git a/...es/example-images-for-regular-screens.njk → ...age/example-image-for-regular-screens.njk b/...es/example-images-for-regular-screens.njk → ...age/example-image-for-regular-screens.njk
@@ -1,4 +1,4 @@
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {{
     onsImage({
         "url": '/img/small/woman-in-purple-dress-shirt.jpg',

diff --git a/...ges/example-images-for-retina-screens.njk → ...mage/example-image-for-retina-screens.njk b/...ges/example-images-for-retina-screens.njk → ...mage/example-image-for-retina-screens.njk
@@ -1,4 +1,4 @@
-{% from "components/images/_macro.njk" import onsImage %}
+{% from "components/image/_macro.njk" import onsImage %}
 {{
     onsImage({
         "image": {

diff --git a/src/components/message/_macro-options.md b/src/components/message/_macro-options.md
@@ -2,7 +2,6 @@
 | -------------- | ------ | -------- | ---------------------------------------------------------------------- |
 | type           | string | true     | Set to “sent” or “received” to style message type                      |
 | id             | string | false    | The HTML `id` of the message header metadata element                   |
-| name           | string | false    | The HTML `name` attribute for the message header metadata element      |
 | fromLabel      | string | true     | Label for the “From” prefix in the message header metadata element     |
 | fromValue      | string | true     | Value of the “From” sender name in the message header metadata element |
 | fromId         | string | false    | The HTML `id` of the `fromValue` element                               |
@@ -15,4 +14,3 @@
 | unreadLink     | string | false    | The URL for the “Mark unread” link element’s `href` attribute          |
 | unreadLinkId   | string | false    | The HTML `id` of the “Mark unread” link element                        |
 | messageID      | string | false    | The HTML `id` of the message body                                      |
-| messageName    | string | false    | The HTML `name` attribute of the message body                          |
diff --git a/src/components/message/_macro.njk b/src/components/message/_macro.njk
@@ -1,7 +1,7 @@
 {%- macro onsMessage(params) -%}
   <div class="ons-message ons-message--{{ params.type }}">
     <div class="ons-message__head">
-      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %} {% if params.name %} name="{{ params.name }}"{% endif %}>
+      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %}>
         <div class="ons-message__sender">
           <dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
           <dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
@@ -15,7 +15,7 @@
           <a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
       {% endif %}
     </div>
-    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %} {% if params.messageName %} name="{{ params.messageName }}"{% endif %}>
+    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
       {{ caller() }}
     </div>
   </div>

diff --git a/src/components/message/_macro.spec.js b/src/components/message/_macro.spec.js
@@ -18,7 +18,6 @@ const EXAMPLE_MESSAGE = {
   unreadLink: 'https://example.com/message/1',
   unreadLinkText: 'Unread message',
   id: 'message1',
-  name: 'example-message-1',
   fromId: 'from1',
   sentId: 'sent1',
   unreadLinkId: 'unreadLink1',

diff --git a/src/components/pagination/_macro-options.md b/src/components/pagination/_macro-options.md
@@ -5,10 +5,10 @@
 | next               | string        | true     | Text label for the “Next” link                                     |
 | classes            | string        | false    | Classes to add to the pagination HTML `nav` element                |
 | hideRangeIndicator | boolean       | false    | Set to “true” to hide the range indicator on viewports &geq; 740px |
+| currentPageNumber  | integer       | true     | Sets the current page number                                       |
 
 ## Page
 
-| Name    | Type    | Required | Description                                             |
-| ------- | ------- | -------- | ------------------------------------------------------- |
-| url     | string  | true     | The URL for the HTML `href` attribute for the page link |
-| current | boolean | false    | Set to “true” for the current loaded page link          |
+| Name | Type   | Required | Description                                             |
+| ---- | ------ | -------- | ------------------------------------------------------- |
+| url  | string | true     | The URL for the HTML `href` attribute for the page link |
diff --git a/src/components/pagination/_macro.njk b/src/components/pagination/_macro.njk
@@ -1,72 +1,68 @@
 {% macro onsPagination(params) %}
-  {% set currentPageIndex = "" %}
-  {% for page in params.pages %}
-      {% if page.current %}
-          {% set currentPageIndex = loop.index %}
-      {% endif %}
-  {% endfor %}
+    {% set currentPageIndex = params.currentPageNumber|int %}
+    {% set totalPages = params.pages | length|int %}
+    {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
+    {% set lastPage = params.pages | last %}
+    {% set firstPage = params.pages | first %}
+    {% set prevPageIndex = currentPageIndex - 1 %}
+    {% set nextPageIndex = currentPageIndex + 1 %}
 
-  {% set totalPages = params.pages | length %}
-  {% set position = "Page " + currentPageIndex + " of " + totalPages %}
-  {% set lastPage = params.pages | last %}
-  {% set firstPage = params.pages | first %}
-
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
-      <div class="ons-pagination__position">{{ position }}</div>
-      <ul class="ons-pagination__items">
-          {% if currentPageIndex != 1 %}
-              {% set prevPageIndex = currentPageIndex - 2 %}
-              <li class="ons-pagination__item ons-pagination__item--previous">
-                  <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
-              </li>
-          {% endif %}
-          {% if currentPageIndex > 2 %}
-            <li class="ons-pagination__item{% if firstPage.current == true %} ons-pagination__item--current{% endif %}">
-                <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
-            </li>
-          {% endif %}
-          {% if currentPageIndex > 4 %}
-              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
-          {% endif %}
-          {% for page in params.pages %}
-              {% set showPage = false %}
-              {# Show the current, next and previous page
-              Show page 2 if the current page index is within the first 4 pages
-              Show the penultimate page if the current page index is within the last 4 pages  #}
-              {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
-                {% set showPage = true %}                    
-              {% endif %}
-              {% if showPage == true %}
-                  <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
-                      <a href="{{ page.url }}" class="ons-pagination__link"
-                          {%- if page.current -%}
-                              aria-current="true" aria-label="Current page ({{ position }})"
-                          {%- else -%}
-                              aria-label="Go to page {{ loop.index }}"
-                          {%- endif -%}
-                          {%- if loop.index == currentPageIndex - 1 -%}
-                              rel="prev"
-                          {%- endif -%}
-                          {%- if loop.index == currentPageIndex + 1 -%}
-                              rel="next"
-                          {%- endif -%}
-                      >{{ loop.index }}</a>
-                  </li>
-              {% endif %}
-          {% endfor %}
-          {% if currentPageIndex < totalPages - 3 %}
-              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
-          {% endif %}
-          {% if currentPageIndex < totalPages - 1 %}
-            <li class="ons-pagination__item{% if lastPage.current == true %} ons-pagination__item--current{% endif %}">
-                <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
-            </li>
-          {% endif %}
-          {% if totalPages > 1 and totalPages != currentPageIndex %}
-              <li class="ons-pagination__item ons-pagination__item--next">
-                  <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
-              </li>
-          {% endif %}
-      </ul>
-  </nav>
+    <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
+        <div class="ons-pagination__position">{{ position }}</div>
+        <ul class="ons-pagination__items">
+            {% if currentPageIndex != 1 %}
+                {% set prevPageIndex = currentPageIndex - 2 %}
+                <li class="ons-pagination__item ons-pagination__item--previous">
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
+                </li>
+            {% endif %}
+            {% if currentPageIndex > 2 %}
+                <li class="ons-pagination__item{% if (currentPageIndex == 1) %} ons-pagination__item--current{% endif %}">
+                    <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
+                </li>
+            {% endif %}
+            {% if currentPageIndex > 4 %}
+                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
+            {% endif %}
+            {% for page in params.pages %}
+                {% set showPage = false %}
+                {# Show the current, next and previous page
+                Show page 2 if the current page index is within the first 4 pages
+                Show the penultimate page if the current page index is within the last 4 pages  #}
+                {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
+                    {% set showPage = true %}
+                {% endif %}
+                {% if showPage == true %}
+                    <li class="ons-pagination__item{% if loop.index == currentPageIndex %} ons-pagination__item--current{% endif %}">
+                        <a href="{{ page.url }}" class="ons-pagination__link"
+                            {%- if loop.index == currentPageIndex -%}
+                                aria-current="true" aria-label="Current page ({{ position }})"
+                            {%- else -%}
+                                aria-label="Go to page {{ loop.index }}"
+                            {%- endif -%}
+                            {%- if loop.index == currentPageIndex - 1 -%}
+                                rel="prev"
+                            {%- endif -%}
+                            {%- if loop.index == currentPageIndex + 1 -%}
+                                rel="next"
+                            {%- endif -%}
+                        >{{ loop.index }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            {% if currentPageIndex < totalPages - 3 %}
+                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
+            {% endif %}
+            {% if currentPageIndex < totalPages - 1 %}
+                <li class="ons-pagination__item{% if currentPageIndex == totalPages %} ons-pagination__item--current{% endif %}">
+                    <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
+                </li>
+            {% endif %}
+            {% if totalPages > 1 and totalPages != currentPageIndex %}
+                <li class="ons-pagination__item ons-pagination__item--next">
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
 {% endmacro %}