@ons/design-system 50.0.1 → 51.0.0

package/components/fieldset/_macro.spec.js

@@ -0,0 +1,173 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_FIELDSET_BASIC = {
+  id: 'example-fieldset',
+  legend: 'Fieldset legend',
+  description: 'A fieldset description',
+};
+
+describe('macro: fieldset', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    expect($('.ons-fieldset').attr('id')).toBe('example-fieldset');
+  });
+
+  it('has the `legend` text', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const title = $('.ons-fieldset__legend-title').text();
+    expect(title).toBe('Fieldset legend');
+  });
+
+  it('has the `description` text', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const title = $('.ons-fieldset__description')
+      .html()
+      .trim();
+    expect(title).toBe('A fieldset description');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('fieldset', {
+        ...EXAMPLE_FIELDSET_BASIC,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-fieldset').hasClass('extra-class')).toBe(true);
+    expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has additionally provided `legendClasses`', () => {
+    const $ = cheerio.load(
+      renderComponent('fieldset', {
+        ...EXAMPLE_FIELDSET_BASIC,
+        legendClasses: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true);
+    expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('fieldset', {
+        ...EXAMPLE_FIELDSET_BASIC,
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-fieldset').attr('a')).toBe('123');
+    expect($('.ons-fieldset').attr('b')).toBe('456');
+  });
+
+  it('has the correct element with `dontWrap`', () => {
+    const $ = cheerio.load(
+      renderComponent('fieldset', {
+        ...EXAMPLE_FIELDSET_BASIC,
+        dontWrap: true,
+      }),
+    );
+
+    expect($('.ons-input-items').length).toBe(1);
+    expect($('.ons-fieldset').length).toBe(0);
+  });
+
+  it('calls with content', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC, 'Example content...'));
+
+    const content = $('.ons-fieldset')
+      .html()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
+  });
+
+  it('calls the error component when `error` is provided', () => {
+    const faker = templateFaker();
+    const errorSpy = faker.spy('error');
+
+    faker.renderComponent('fieldset', {
+      ...EXAMPLE_FIELDSET_BASIC,
+      error: { text: 'There is an error' },
+    });
+
+    expect(errorSpy.occurrences[0]).toEqual({
+      text: 'There is an error',
+    });
+  });
+
+  describe('with `legendIsQuestionTitle`', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the correct class', () => {
+      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
+      expect($('.ons-fieldset__legend').hasClass('ons-u-mb-no')).toBe(true);
+    });
+
+    it('renders the legend in a H1', () => {
+      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
+      const titleTag = $('.ons-fieldset__legend-title')[0].tagName;
+
+      expect(titleTag).toBe('h1');
+    });
+
+    it('has additionally provided `legendTitleClasses`', () => {
+      const $ = cheerio.load(
+        renderComponent('fieldset', {
+          ...EXAMPLE_FIELDSET_BASIC,
+          legendTitleClasses: 'extra-class another-extra-class',
+          legendIsQuestionTitle: true,
+        }),
+      );
+
+      expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true);
+      expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the `legend` text', () => {
+      const $ = cheerio.load(
+        renderComponent('fieldset', {
+          ...EXAMPLE_FIELDSET_BASIC,
+          legendTitleClasses: 'extra-class another-extra-class',
+          legendIsQuestionTitle: true,
+        }),
+      );
+
+      const title = $('.ons-fieldset__legend-title')
+        .html()
+        .trim();
+      expect(title).toBe('Fieldset legend');
+    });
+
+    it('has the correct `description` classes', () => {
+      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
+
+      expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true);
+      expect($('.ons-fieldset__description').hasClass('ons-u-mb-m')).toBe(true);
+    });
+  });
+});

package/components/footer/_macro.njk

@@ -9,21 +9,13 @@
         {% set lang = 'en' %}
     {% endif %}
 
-    {% if params.poweredBy is defined and params.poweredBy %}
-        {% if params.poweredBy.alt is defined and params.poweredBy.alt %}
-            {% set poweredByAlt = params.poweredBy.alt %}
-        {% else %}
-            {% set poweredByAlt = 'Office for National Statistics' %}
-        {% endif %}
-    {% endif %}
-
     {% set poweredByLogo %}
    
         {% if params.poweredBy is defined and params.poweredBy and params.poweredBy.logo is defined and params.poweredBy.logo %}
             {{
                 onsIcon({
                     "iconType": params.poweredBy.logo,
-                    "altText": poweredByAlt
+                    "altText": params.poweredBy.alt | default("Office for National Statistics")
                 })
             }}
         {% else %}
@@ -31,14 +23,14 @@
                 {{
                     onsIcon({
                         "iconType": 'ons-logo-cy',
-                        "altText": poweredByAlt | default('Swyddfa Ystadegau Gwladol')
+                        "altText": params.poweredBy.alt | default('Swyddfa Ystadegau Gwladol')
                     })
                 }}
             {% else %}
                 {{
                     onsIcon({
                         "iconType": 'ons-logo-en',
-                        "altText": poweredByAlt | default('Office for National Statistics')
+                        "altText": params.poweredBy.alt | default('Office for National Statistics')
                     })
                 }}
             {% endif %}
@@ -46,14 +38,6 @@
    
     {% endset %}
 
-    {% set crestLogo %}
-        {{
-            onsIcon({
-                "iconType": 'crest'
-            })
-        }}
-    {% endset %}
-
     <footer class="ons-footer">
 
         {% if params.footerWarning is defined and params.footerWarning %}
@@ -103,34 +87,9 @@
                         </div>
                     {% endif %}
 
-                    {% if params.language is defined and params.language %}
-                        {% set currentLanguage = params.language.languages | selectattr("current") | first %}
-                        {% set languageNumber = params.language.languages | length %}
-                        <div class="ons-grid__col {% if languageNumber and languageNumber != 2 %} ons-u-d-no@m{% elif languageNumber %} ons-u-d-no{% endif %}">
-                            {% set languageItems = params.language.languages | rejectattr("current") | list %}
-                            {% if currentLanguage.allLanguages is defined and currentLanguage.allLanguages and params.language.allLanguagesUrl is defined and params.language.allLanguagesUrl %}
-                                {% set languageItems = (languageItems.push({
-                                    "url": params.language.allLanguagesUrl,
-                                    "text": currentLanguage.allLanguages,
-                                    "lang": currentLanguage.ISOCode
-                                }), languageItems) %}
-                            {% endif %}
-                            {{
-                                onsList({
-                                    "classes": 'ons-u-mb-no',
-                                    "variants": ['bare', 'inline@m'],
-                                    "itemsList": languageItems
-                                })
-                            }}
-                        </div>
-                        <div class="ons-grid__col {% if languageNumber and languageNumber != 2 %} ons-u-d-no@m{% elif languageNumber %} ons-u-d-no{% endif %} ons-u-mb-m">
-                            <hr class="ons-footer__hr">
-                        </div>
-                    {% endif %}
-
                     {% if params.newTabWarning is defined and params.newTabWarning %}
                         <div class="ons-grid__col">
-                            <p class="ons-u-fs-s ons-u-mb-m">{{ params.newTabWarning | safe }}</p>
+                            <p class="ons-u-fs-s ons-u-mb-m ons-footer__new-tab-warning">{{ params.newTabWarning | safe }}</p>
                         </div>
                     {% endif %}
 
@@ -242,8 +201,12 @@
 
                         {% if params.crest is defined and params.crest %}
                             <!-- Crest -->
-                            <div class="ons-grid__col">
-                                {{ crestLogo | safe }}
+                            <div class="ons-grid__col ons-footer__crest">
+                                {{
+                                    onsIcon({
+                                        "iconType": 'crest'
+                                    })
+                                }}
                             </div>
                         {% elif params.legal is defined and params.legal %}
                             <!-- Powered by -->
@@ -259,7 +222,7 @@
                     <!-- Copyright -->
                     <div class="ons-grid"> 
                         <div class="ons-grid__col ons-u-mt-s">
-                            <p class="ons-u-fs-s ons-u-mb-no">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
+                            <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
                         </div>
                     </div>
                 {% endif %}