@ons/design-system 50.0.1 → 53.0.0

package/components/fieldset/_macro.njk

@@ -4,7 +4,7 @@
     {% set fieldset -%}
         {% if params.dontWrap is defined and params.dontWrap -%}
             <div class="ons-input-items">
-                {{- caller() -}}
+                {{- caller() if caller -}}
             </div>
         {%- elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) -%}
             <fieldset
@@ -18,7 +18,7 @@
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        {{- params.legend | safe -}}
+                        <span class="ons-fieldset__legend-title">{{- params.legend | safe -}}</span>
                     {%- endif -%}
                     {%- if params.description is defined and params.description -%}
                         <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
@@ -26,7 +26,7 @@
                         </div>
                     {%- endif -%}
                 </legend>
-                {{- caller() -}}
+                {{- caller() if caller -}}
             </fieldset>
         {%- endif %}
     {%- endset %}

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/_footer.scss

@@ -19,6 +19,10 @@
     background-color: $color-banner-bg-dark;
   }
 
+  &__license {
+    @extend .ons-u-fs-s;
+  }
+
   &__ogl-img {
     margin: 0 0.5rem 0.2rem 0;
     max-width: 100%;
@@ -37,10 +41,6 @@
     .ons-list__link {
       margin-right: 0;
     }
-
-    .ons-poweredbylogo {
-      min-height: 1.5rem;
-    }
   }
 
   &--rows {
@@ -48,4 +48,19 @@
       margin-bottom: 0.5rem !important;
     }
   }
+
+  &__poweredby,
+  &__crest,
+  &__partnership {
+    font-size: 0;
+  }
+
+  &__partnership {
+    &-prefix {
+      @extend .ons-u-fs-s;
+
+      margin-bottom: 0.2rem;
+      margin-top: -0.3rem;
+    }
+  }
 }

package/components/footer/_macro.njk

@@ -9,49 +9,38 @@
         {% 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 %}
+    {% set onsLogo %}
+        {% if params.lang == 'cy' %}
+            {{
+                onsIcon({
+                    "iconType": 'ons-logo-cy',
+                    "altText": 'Swyddfa Ystadegau Gwladol',
+                    "altTextId": 'ons-logo-cy-footer-alt'
+                })
+            }}
         {% else %}
-            {% set poweredByAlt = 'Office for National Statistics' %}
+            {{
+                onsIcon({
+                    "iconType": 'ons-logo-en',
+                    "altText": 'Office for National Statistics',
+                    "altTextId": 'ons-logo-en-footer-alt'
+                })
+            }}
         {% endif %}
-    {% endif %}
+    {% endset %}
 
     {% 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,
+                    "altTextId": 'poweredby-alt'
                 })
             }}
         {% else %}
-            {% if params.lang == 'cy' %}
-                {{
-                    onsIcon({
-                        "iconType": 'ons-logo-cy',
-                        "altText": poweredByAlt | default('Swyddfa Ystadegau Gwladol')
-                    })
-                }}
-            {% else %}
-                {{
-                    onsIcon({
-                        "iconType": 'ons-logo-en',
-                        "altText": poweredByAlt | default('Office for National Statistics')
-                    })
-                }}
-            {% endif %}
+            {{ onsLogo | safe }}
         {% endif %}
-   
-    {% endset %}
-
-    {% set crestLogo %}
-        {{
-            onsIcon({
-                "iconType": 'crest'
-            })
-        }}
     {% endset %}
 
     <footer class="ons-footer">
@@ -97,45 +86,15 @@
         <div class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}" data-analytics="footer" {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>
             <div class="ons-container{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid">
-                    {% if params.poweredBy is defined and params.poweredBy and params.OGLLink is defined and params.OGLLink %}
-                        <div class="ons-grid__col ons-u-mb-m">
-                            {{ poweredByLogo | safe }}
-                        </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 %}
 
                     {% if params.cols is defined and params.cols %}
                         {% for col in params.cols %}
+                            <!-- Full footer columns -->
                             <div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-m@xxs@m' if loop.index > 1 }}">
                                 {% if col.title %}
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">{{ col.title }}</h2>
@@ -149,17 +108,9 @@
                                 }}
                             </div>
                         {% endfor %}
-                    {% endif %}
-
-                    {% if params.cols is defined and params.cols and params.rows is defined and params.rows %}
-                        <div class="ons-grid__col ons-u-mb-m">
-                            <hr class="ons-footer__hr">
-                        </div>
-                    {% endif %}
-
-                    {% if params.rows is defined and params.rows %}
+                    {% elif params.rows is defined and params.rows %}
                         {% for row in params.rows %}
-                            <!-- Rows -->
+                            <!-- Transactional footer row -->
                             <div class="ons-grid__col">
                                 {{
                                     onsList({
@@ -169,101 +120,119 @@
                                     })
                                 }}
                             </div>
-                            {% if loop.length > 1 %}
-                                {% if not loop.last %}
-                                    <div class="ons-grid__col ons-u-mb-m">
-                                        <hr class="ons-footer__hr">
-                                    </div>
-                                {% endif %}
-                            {% endif %}
                         {% endfor %}
                     {% endif %}
 
-                    {% if params.OGLLink is defined and params.OGLLink %}
-                        <!-- OGL -->
-                        <div class="ons-grid__col ons-u-mb-m">
-                            <hr class="ons-footer__hr">
-                        </div>
-
-                        <div class="ons-grid__col">
-                            <div class="ons-footer__license">
-                                {{
-                                    onsIcon({
-                                        "iconType": 'ogl'
-                                    })
-                                }}
-                                {% if params.OGLLink.HTML is defined and params.OGLLink.HTML %}
-                                    {{ params.OGLLink.HTML | safe }}
-                                {% else %}
-                                    {% from "components/external-link/_macro.njk" import onsExternalLink %}
-                                    {{ params.OGLLink.pre }} {{
-                                        onsExternalLink({
-                                            "url": params.OGLLink.url,
-                                            "linkText": params.OGLLink.link
-                                        })
-                                    }}{{ params.OGLLink.post }}
-                                {% endif %}
-                            </div>
-                        </div>
-                    {% endif %}
-
-                    {% if params.legal is defined and params.legal or params.rows is defined and params.rows and params.OGLLink is not defined or params.OGLLink is not defined and params.legal is not defined and (params.rows is defined and params.rows or params.cols is defined and params.cols) %}
+                    {% if (params.cols is defined and params.cols) or (params.rows is defined and params.rows) %}
                         <div class="ons-grid__col ons-u-mb-m">
                             <hr class="ons-footer__hr">
                         </div>
                     {% endif %}
 
-                    {% if params.OGLLink is not defined and params.legal is not defined %}
-                        <div class="ons-grid__col">
-                            {{ poweredByLogo | safe }}
-                        </div>
-                    {% endif %}
                 </div>
 
-                {% if params.legal is defined and params.legal or params.rows is defined and params.rows and params.OGLLink is not defined or params.cols is defined and params.cols and params.OGLLink is not defined %}
                     <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
-                        {% if params.legal is defined and params.legal %}
-                            <!-- Legal -->
-                            {% for legal in params.legal %}
-                                <div class="ons-grid__col">
+                        <div class="ons-grid__col">
+                            {% if params.legal is defined and params.legal %}
+                                <!-- Legal -->
+                                {% for legal in params.legal %}
                                     {{
                                         onsList({
-                                            "classes": 'ons-u-mb-m ons-footer--rows',
+                                            "classes": 'ons-u-mb-s ons-footer--rows',
                                             "variants": ['bare', 'inline'],
                                             "itemsList": legal.itemsList
                                         })
                                     }}
-                                    {% if params.crest is defined and params.crest %}
-                                        <div class="ons-poweredbylogo ons-u-mb-m">{{ poweredByLogo | safe }}</div>
+                                {% endfor %}
+                            {% endif %}
+
+                            {% if params.OGLLink == true or params.OGLLink is defined %}
+                                <!-- OGL -->
+                                <div class="ons-footer__license ons-u-mb-m">
+                                    {{
+                                        onsIcon({
+                                            "iconType": 'ogl'
+                                        })
+                                    }}
+                                    {% if params.OGLLink.HTML is defined and params.OGLLink.HTML %}
+                                        {{ params.OGLLink.HTML | safe }}
+                                    {% elif params.OGLLink == true or params.OGLLink is defined %}
+                                        {% from "components/external-link/_macro.njk" import onsExternalLink %}
+                                        {% if params.lang == 'cy' %}
+                                            {{ params.OGLLink.pre | default('Mae’r holl gynnwys ar gael o dan y') }} {{
+                                            onsExternalLink({
+                                                "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                "linkText": params.OGLLink.link | default('Drwydded Llywodraeth Leol v3.0')
+                                            })
+                                            }}{{ params.OGLLink.post | default(', oni bai y nodir fel arall') }}
+                                        {% else %}
+                                            {{ params.OGLLink.pre | default('All content is available under the') }} {{
+                                                onsExternalLink({
+                                                    "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                    "linkText": params.OGLLink.link | default('Open Government Licence v3.0')
+                                                })
+                                            }}{{ params.OGLLink.post | default(', except where otherwise stated') }}
+                                        {% endif %}
                                     {% endif %}
                                 </div>
-                            {% endfor %}
-                        {% endif %}
+                            {% endif %}
+
+                            {% if not params.poweredBy.partnership %}
+                                <div class="ons-footer__poweredby ons-u-mb-m">
+                                    {{ poweredByLogo | safe }}
+                                </div>
+                            {% endif %}
+                        </div>
 
                         {% if params.crest is defined and params.crest %}
                             <!-- Crest -->
-                            <div class="ons-grid__col">
-                                {{ crestLogo | safe }}
-                            </div>
-                        {% elif params.legal is defined and params.legal %}
-                            <!-- Powered by -->
-                            <div class="ons-grid__col">
-                                <div class="ons-poweredbylogo">{{ poweredByLogo | safe }}</div>
+                            <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
+                                {{
+                                    onsIcon({
+                                        "iconType": 'crest'
+                                    })
+                                }}
                             </div>
                         {% endif %}
+                    </div>
 
+                {% if (params.poweredBy is defined and params.poweredBy) and (params.poweredBy.partnership is defined and params.poweredBy.partnership) %}
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between ons-u-mt-l">
+                        <div class="ons-grid__col ons-footer__poweredby ons-u-mb-m">
+                            {{ poweredByLogo | safe }}
+                        </div>
+
+                        <div class="ons-grid__col ons-footer__partnership ons-u-mb-m">
+                            <div class="ons-footer__partnership-prefix">{{ params.poweredBy.partnership }}</div>
+                            {% if params.lang == 'cy' %}
+                                {{
+                                    onsIcon({
+                                        "iconType": 'ons-logo-cy',
+                                        "altText": 'Swyddfa Ystadegau Gwladol',
+                                        "altTextId": 'ons-logo-cy-footer-alt'
+                                    })
+                                }}
+                            {% else %}
+                                {{
+                                    onsIcon({
+                                        "iconType": 'ons-logo-en',
+                                        "altText": 'Office for National Statistics',
+                                        "altTextId": 'ons-logo-en-footer-alt'
+                                    })
+                                }}
+                            {% endif %}
+                        </div>
                     </div>
                 {% endif %}
 
                 {% if params.copyrightDeclaration is defined and params.copyrightDeclaration %}
-                    <!-- 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>
-                        </div>
+                <!-- Copyright -->
+                <div class="ons-grid">
+                    <div class="ons-grid__col">
+                        <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 %}
-
             </div>
         </div>
     </footer>