@ons/design-system 70.0.7 → 70.0.9

package/components/card/_card.scss

@@ -1,32 +1,32 @@
 .ons-card {
-  margin: 0 0 2rem;
-  width: 100%;
+    margin: 0 0 2rem;
+    width: 100%;
 
-  &__link {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    width: fit-content;
+    &__link {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+        width: fit-content;
 
-    & > .ons-card__title {
-      margin-bottom: 0;
+        > .ons-card__title {
+            margin-bottom: 0;
+        }
     }
-  }
 
-  &__link:hover {
-    text-decoration-thickness: 3px;
-  }
+    &__link:hover {
+        text-decoration-thickness: 3px;
+    }
 
-  &__title {
-    // This is to allow the focus state for multi lined title links to render the focus style correctly.
-    // This should be corrected when the typography scale is improved.
-    line-height: 1.65 !important;
-  }
+    &__title {
+        // This is to allow the focus state for multi lined title links to render the focus style correctly.
+        // This should be corrected when the typography scale is improved.
+        line-height: 1.65 !important;
+    }
 
-  @include mq(m) {
-    margin: 0;
-    .ons-grid__col & {
-      padding-right: 1rem;
+    @include mq(m) {
+        margin: 0;
+        .ons-grid__col & {
+            padding-right: 1rem;
+        }
     }
-  }
 }

package/components/card/_macro.njk

@@ -1,24 +1,42 @@
 {%- macro onsCard(params) -%}
-
-    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set headingLevel = params.headingLevel | default(2) | string %}
+    {% set openingHeadingTag = "<h" + headingLevel %}
+    {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+    {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL) + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %}
 
     <div class="ons-card">
         <a href="{{ params.url }}" class="ons-card__link">
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
-                    <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+                    <img
+                        class="ons-card__image ons-u-mb-s"
+                        height="200"
+                        width="303"
+                        {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}
+                        src="{{ params.image.smallSrc }}"
+                        alt="{{ params.image.alt }}"
+                        loading="lazy"
+                    />
                 {% elif params.image == true or params.image.placeholderURL %}
-                    <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+                    <img
+                        class="ons-card__image ons-u-mb-s "
+                        height="100"
+                        width="303"
+                        srcset="{{ placeholderSrcset }}"
+                        src="{{- params.image.placeholderURL if params.image.placeholderURL -}}/img/small/placeholder-card.png"
+                        alt=""
+                        loading="lazy"
+                    />
                 {% endif %}
             {%- endif -%}
-            <h{{ headingLevel }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-                {{ params.title }}
-            </h{{ headingLevel }}>
+            {{ openingHeadingTag | safe }}
+            class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}"> {{ params.title }}
+            {{ closingHeadingTag | safe }}
         </a>
 
         <p id="{{ params.textId }}">{{ params.text }}</p>
 
-        {% if params.itemsList -%}
+        {%- if params.itemsList -%}
             {% from "components/list/_macro.njk" import onsList %}
             {{
                 onsList({
@@ -27,7 +45,5 @@
                 })
             }}
         {% endif %}
-
     </div>
-
 {%- endmacro -%}

package/components/card/_macro.spec.js

@@ -6,232 +6,232 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CARD_WITHOUT_IMAGE = {
-  title: 'Example card title',
-  text: 'Example card text.',
-  textId: 'example-text-id',
+    title: 'Example card title',
+    text: 'Example card text.',
+    textId: 'example-text-id',
 };
 
 const EXAMPLE_CARD_WITH_IMAGE = {
-  title: 'Example card title',
-  text: 'Example card text.',
-  textId: 'example-text-id',
-  image: {
-    smallSrc: 'example-small.png',
-    largeSrc: 'example-large.png',
-    alt: 'Example alt text',
-  },
+    title: 'Example card title',
+    text: 'Example card text.',
+    textId: 'example-text-id',
+    image: {
+        smallSrc: 'example-small.png',
+        largeSrc: 'example-large.png',
+        alt: 'Example alt text',
+    },
 };
 
 const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE = {
-  title: 'Example card title',
-  text: 'Example card text.',
-  textId: 'example-text-id',
-  image: true,
+    title: 'Example card title',
+    text: 'Example card text.',
+    textId: 'example-text-id',
+    image: true,
 };
 
 const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH = {
-  title: 'Example card title',
-  text: 'Example card text.',
-  textId: 'example-text-id',
-  image: {
-    placeholderURL: '/placeholder-image-url',
-  },
+    title: 'Example card title',
+    text: 'Example card text.',
+    textId: 'example-text-id',
+    image: {
+        placeholderURL: '/placeholder-image-url',
+    },
 };
 
 describe('macro: card', () => {
-  describe('mode: without image', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
-
-    it('has the provided `title` text', () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
-
-      expect($('.ons-card__title').text().trim()).toBe('Example card title');
-    });
-
-    it.each([
-      [1, 'h1'],
-      [4, 'h4'],
-    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITHOUT_IMAGE,
-          headingLevel,
-        }),
-      );
-
-      expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
-    });
-
-    it('has the provided `text` accessible via the `textId` identifier', () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
-
-      expect($('#example-text-id').text().trim()).toBe('Example card text.');
-    });
-
-    it('renders the provided `itemsList` using the `list` component', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
-
-      faker.renderComponent('card', {
-        ...EXAMPLE_CARD_WITHOUT_IMAGE,
-        itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
-      });
-
-      expect(listsSpy.occurrences[0]).toEqual({
-        variants: 'dashed',
-        itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
-      });
+    describe('mode: without image', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('has the provided `title` text', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+
+            expect($('.ons-card__title').text().trim()).toBe('Example card title');
+        });
+
+        it.each([
+            [1, 'h1'],
+            [4, 'h4'],
+        ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITHOUT_IMAGE,
+                    headingLevel,
+                }),
+            );
+
+            expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
+        });
+
+        it('has the provided `text` accessible via the `textId` identifier', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+
+            expect($('#example-text-id').text().trim()).toBe('Example card text.');
+        });
+
+        it('renders the provided `itemsList` using the `list` component', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
+
+            faker.renderComponent('card', {
+                ...EXAMPLE_CARD_WITHOUT_IMAGE,
+                itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+            });
+
+            expect(listsSpy.occurrences[0]).toEqual({
+                variants: 'dashed',
+                itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+            });
+        });
+
+        it('outputs a hyperlink with the provided `url`', () => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITHOUT_IMAGE,
+                    url: 'https://example.com',
+                }),
+            );
+
+            expect($('.ons-card__link').attr('href')).toBe('https://example.com');
+        });
     });
 
-    it('outputs a hyperlink with the provided `url`', () => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITHOUT_IMAGE,
-          url: 'https://example.com',
-        }),
-      );
+    describe('mode: with image', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      expect($('.ons-card__link').attr('href')).toBe('https://example.com');
-    });
-  });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-  describe('mode: with image', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+        it('has the provided `title` text', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            expect($('.ons-card__title').text().trim()).toBe('Example card title');
+        });
 
-    it('has the provided `title` text', () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+        it.each([
+            [1, 'h1'],
+            [4, 'h4'],
+        ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITH_IMAGE,
+                    headingLevel,
+                }),
+            );
 
-      expect($('.ons-card__title').text().trim()).toBe('Example card title');
-    });
+            expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
+        });
 
-    it.each([
-      [1, 'h1'],
-      [4, 'h4'],
-    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITH_IMAGE,
-          headingLevel,
-        }),
-      );
-
-      expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
-    });
+        it('has the provided `text`', () => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITH_IMAGE,
+                }),
+            );
 
-    it('has the provided `text`', () => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITH_IMAGE,
-        }),
-      );
+            expect($('#example-text-id').text().trim()).toBe('Example card text.');
+        });
 
-      expect($('#example-text-id').text().trim()).toBe('Example card text.');
-    });
+        it('outputs a hyperlink with the provided `url`', () => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITH_IMAGE,
+                    url: 'https://example.com',
+                }),
+            );
 
-    it('outputs a hyperlink with the provided `url`', () => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITH_IMAGE,
-          url: 'https://example.com',
-        }),
-      );
+            expect($('.ons-card__link').attr('href')).toBe('https://example.com');
+        });
 
-      expect($('.ons-card__link').attr('href')).toBe('https://example.com');
-    });
+        describe('with a custom image', () => {
+            it('outputs an `img` element', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-    describe('with a custom image', () => {
-      it('outputs an `img` element', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+                expect($('.ons-card__image')[0].tagName).toBe('img');
+            });
 
-        expect($('.ons-card__image')[0].tagName).toBe('img');
-      });
+            it('outputs an `img` element with the expected `srcset`', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      it('outputs an `img` element with the expected `srcset`', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+                expect($('.ons-card__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+            });
 
-        expect($('.ons-card__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('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      it('outputs an `img` element with the expected `src`', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+                expect($('.ons-card__image').attr('src')).toBe('example-small.png');
+            });
 
-        expect($('.ons-card__image').attr('src')).toBe('example-small.png');
-      });
+            it('outputs an `img` element with the expected alt text', () => {
+                const $ = cheerio.load(
+                    renderComponent('card', {
+                        ...EXAMPLE_CARD_WITH_IMAGE,
+                        alt: 'Example alt text',
+                    }),
+                );
 
-      it('outputs an `img` element with the expected alt text', () => {
-        const $ = cheerio.load(
-          renderComponent('card', {
-            ...EXAMPLE_CARD_WITH_IMAGE,
-            alt: 'Example alt text',
-          }),
-        );
+                expect($('.ons-card__image').attr('alt')).toBe('Example alt text');
+            });
+        });
 
-        expect($('.ons-card__image').attr('alt')).toBe('Example alt text');
-      });
-    });
+        describe('with a default placeholder image', () => {
+            it('outputs an `img` element', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
 
-    describe('with a default placeholder image', () => {
-      it('outputs an `img` element', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+                expect($('.ons-card__image')[0].tagName).toBe('img');
+            });
 
-        expect($('.ons-card__image')[0].tagName).toBe('img');
-      });
+            it('outputs an `img` element with the expected `srcset`', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
 
-      it('outputs an `img` element with the expected `srcset`', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+                expect($('.ons-card__image').attr('srcset')).toBe('/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x');
+            });
 
-        expect($('.ons-card__image').attr('srcset')).toBe('/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x');
-      });
+            it('outputs an `img` element with the expected `src`', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
 
-      it('outputs an `img` element with the expected `src`', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+                expect($('.ons-card__image').attr('src')).toBe('/img/small/placeholder-card.png');
+            });
 
-        expect($('.ons-card__image').attr('src')).toBe('/img/small/placeholder-card.png');
-      });
+            it('outputs an `img` element with the expected empty alt text', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
 
-      it('outputs an `img` element with the expected empty alt text', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
-
-        expect($('.ons-card__image').attr('alt')).toBe('');
-      });
-    });
+                expect($('.ons-card__image').attr('alt')).toBe('');
+            });
+        });
 
-    describe('with a default placeholder image with `placeholderURL`', () => {
-      it('outputs an `img` element', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+        describe('with a default placeholder image with `placeholderURL`', () => {
+            it('outputs an `img` element', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
 
-        expect($('.ons-card__image')[0].tagName).toBe('img');
-      });
+                expect($('.ons-card__image')[0].tagName).toBe('img');
+            });
 
-      it('outputs an `img` element with the expected `srcset`', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+            it('outputs an `img` element with the expected `srcset`', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
 
-        expect($('.ons-card__image').attr('srcset')).toBe(
-          '/placeholder-image-url/img/small/placeholder-card.png 1x, /placeholder-image-url/img/large/placeholder-card.png 2x',
-        );
-      });
+                expect($('.ons-card__image').attr('srcset')).toBe(
+                    '/placeholder-image-url/img/small/placeholder-card.png 1x, /placeholder-image-url/img/large/placeholder-card.png 2x',
+                );
+            });
 
-      it('outputs an `img` element with the expected `src`', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+            it('outputs an `img` element with the expected `src`', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
 
-        expect($('.ons-card__image').attr('src')).toBe('/placeholder-image-url/img/small/placeholder-card.png');
-      });
+                expect($('.ons-card__image').attr('src')).toBe('/placeholder-image-url/img/small/placeholder-card.png');
+            });
 
-      it('outputs an `img` element with the expected empty alt text', () => {
-        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+            it('outputs an `img` element with the expected empty alt text', () => {
+                const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
 
-        expect($('.ons-card__image').attr('alt')).toBe('');
-      });
+                expect($('.ons-card__image').attr('alt')).toBe('');
+            });
+        });
     });
-  });
 });

package/components/card/example-card-set-with-images.njk

@@ -1,41 +1,43 @@
 {% from "components/card/_macro.njk" import onsCard %}
 <div class="ons-container">
-
-    <div class="ons-grid ons-grid--column@xxs@s">
-
+    <div class="ons-grid">
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-image-1',
-                "textId": 'text1',
-                "title": 'About the census',
-                "url": '#0',
-                "text": 'The census is a survey that gives us information about all the households in England and Wales.',
-                "image": true
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-image-1',
+                    "textId": 'text1',
+                    "title": 'About the census',
+                    "url": '#0',
+                    "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                    "image": true
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-image-2',
-                "textId": 'text2',
-                "title": 'Working on the census',
-                "url": '#0',
-                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
-                "image": true
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-image-2',
+                    "textId": 'text2',
+                    "title": 'Working on the census',
+                    "url": '#0',
+                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                    "image": true
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-image-3',
-                "textId": 'text3',
-                "title": 'Your data and security',
-                "url": '#0',
-                "text": 'How we keep your data safe and what happens to your personal information.',
-                "image": true
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-image-3',
+                    "textId": 'text3',
+                    "title": 'Your data and security',
+                    "url": '#0',
+                    "text": 'How we keep your data safe and what happens to your personal information.',
+                    "image": true
+                })
+            }}
         </div>
-
     </div>
-    
 </div>