@ons/design-system 59.0.0 → 60.0.0

package/components/access-code/uac.scss

@@ -1,7 +1,7 @@
 .ons-uac {
   &__input {
     font-family: $font-mono !important;
-    font-weight: 700;
+    font-weight: $font-weight-bold;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     width: 15.1em;

package/components/autosuggest/_autosuggest.scss

@@ -105,7 +105,7 @@
     }
 
     .ons-panel__body {
-      font-weight: bold;
+      font-weight: $font-weight-bold;
       padding: 0.8rem 0.8rem 0.8rem 2rem;
     }
   }

package/components/button/_button.scss

@@ -139,7 +139,7 @@ $button-shadow-size: 3px;
     &__inner {
       background: var(--ons-color-button-secondary);
       color: var(--ons-color-text);
-      font-weight: normal;
+      font-weight: $font-weight-regular;
 
       .ons-svg-icon {
         fill: var(--ons-color-text);
@@ -187,7 +187,7 @@ $button-shadow-size: 3px;
       border-radius: 0;
       box-shadow: none;
       color: var(--ons-color-text-link);
-      font-weight: normal;
+      font-weight: $font-weight-regular;
       padding: 0;
       .ons-svg-icon {
         fill: var(--ons-color-text-link);
@@ -445,7 +445,7 @@ $button-shadow-size: 3px;
       color: var(--ons-color-branded-text);
       display: block;
       font-size: 1rem;
-      font-weight: normal;
+      font-weight: $font-weight-regular;
       padding: 0.6rem 1rem;
       text-align: left;
 

package/components/download-resources/_download-resources.scss

@@ -33,7 +33,7 @@
     margin-top: 0.5rem;
 
     .ons-label {
-      font-weight: normal;
+      font-weight: $font-weight-regular;
       margin-bottom: 0;
       margin-right: 0.5rem;
     }

package/components/fieldset/_fieldset.scss

@@ -24,13 +24,13 @@
   }
 
   &__description--title {
-    font-weight: normal;
+    font-weight: $font-weight-regular;
   }
 
   > * .ons-fieldset {
     .ons-fieldset {
       &__legend {
-        font-weight: normal;
+        font-weight: $font-weight-regular;
       }
     }
   }

package/components/footer/_footer.scss

@@ -49,19 +49,4 @@
       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

@@ -29,18 +29,6 @@
         {% endif %}
     {% endset %}
 
-    {% set poweredByLogo %}
-        {% if params.poweredBy and params.poweredBy.logo %}
-            {{
-                onsIcon({
-                    "iconType": params.poweredBy.logo,
-                    "altText": params.poweredBy.alt,
-                    "altTextId": 'poweredby-alt'
-                })
-            }}
-        {% endif %}
-    {% endset %}
-
     <footer class="ons-footer">
 
         {% if params.footerWarning %}
@@ -122,116 +110,87 @@
                             <hr class="ons-footer__hr">
                         </div>
                     {% endif %}
-
                 </div>
 
-                    <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
-                        <div class="ons-grid__col">
-                            {% if params.legal %}
-                                <!-- Legal -->
-                                {% for legal in params.legal %}
-                                    {{
-                                        onsList({
-                                            "classes": 'ons-u-mb-s ons-footer--rows',
-                                            "variants": ['bare', 'inline'],
-                                            "itemsList": legal.itemsList
-                                        })
-                                    }}
-                                {% endfor %}
-                            {% endif %}
+                <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
+                    <div class="ons-grid__col">
+                        {% if params.legal %}
+                            <!-- Legal -->
+                            {% for legal in params.legal %}
+                                {{
+                                    onsList({
+                                        "classes": 'ons-u-mb-s ons-footer--rows',
+                                        "variants": ['bare', 'inline'],
+                                        "itemsList": legal.itemsList
+                                    })
+                                }}
+                            {% endfor %}
+                        {% endif %}
 
-                            {% if params.OGLLink %}
-                                <!-- OGL -->
-                                <div class="ons-footer__license ons-u-mb-m">
-                                    {{
-                                        onsIcon({
-                                            "iconType": 'ogl'
+                        {% if params.OGLLink %}
+                            <!-- OGL -->
+                            <div class="ons-footer__license ons-u-mb-m">
+                                {{
+                                    onsIcon({
+                                        "iconType": 'ogl'
+                                    })
+                                }}
+                                {% if params.OGLLink.HTML %}
+                                    {{ params.OGLLink.HTML | safe }}
+                                {% elif params.OGLLink %}
+                                    {% 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')
                                         })
-                                    }}
-                                    {% if params.OGLLink.HTML %}
-                                        {{ params.OGLLink.HTML | safe }}
-                                    {% elif params.OGLLink %}
-                                        {% 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') }} {{
+                                        }}{{ 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('Drwydded Llywodraeth Leol v3.0')
+                                                "linkText": params.OGLLink.link | default('Open Government Licence 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 %}
+                                        }}{{ params.OGLLink.post | default(', except where otherwise stated') }}
                                     {% endif %}
-                                </div>
-                            {% endif %}
-
-                            {% if params.poweredBy %}
-                                {% if not params.poweredBy.partnership %}
-                                    <div class="ons-footer__poweredby ons-u-mb-m">
-                                        {{ poweredByLogo | safe }}
-                                    </div>
                                 {% endif %}
-                            {% else %}
-                                <div class="ons-footer__poweredby ons-u-mb-m">
-                                    {{ onsLogo | safe }}
-                                </div>
-                            {% endif %}
-                        </div>
-
-                        {% if params.crest %}
-                            <!-- Crest -->
-                            <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
-                                {{
-                                    onsIcon({
-                                        "iconType": 'crest'
-                                    })
-                                }}
                             </div>
                         {% endif %}
                     </div>
-
-                {% if (params.poweredBy) 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 ons-grid--flex ons-grid--vertical-bottom ons-grid--between ons-footer__poweredby">                                
+                    {% if params.poweredBy %}
+                        {{ params.poweredBy | safe }}
+                    {% else %}
+                        <div class="ons-grid__col ons-u-mb-m">
+                            {{ onsLogo | 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 %}
+                    {% endif %}
+                </div>
+                        
+                {% if params.crest %}
+                    <!-- Crest -->
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">                                
+                        <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
+                            {{
+                                onsIcon({
+                                    "iconType": 'crest'
+                                })
+                            }}
                         </div>
                     </div>
+
                 {% endif %}
 
                 {% if params.copyrightDeclaration %}
-                <!-- 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>
+                    <!-- Copyright -->
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">                                
+                        <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>
-                </div>
                 {% endif %}
             </div>
         </div>

package/components/footer/_macro.spec.js

@@ -6,17 +6,6 @@ import axe from '../../tests/helpers/axe';
 import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_POWERED_BY_PARAM = {
-  logo: 'person',
-  alt: 'Person alt text',
-};
-
-const EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM = {
-  logo: 'person',
-  alt: 'Person alt text',
-  partnership: 'Prefix text string',
-};
-
 const EXAMPLE_OGL_LINK_PARAM = {
   pre: 'All content is available under the',
   link: 'Open Government Licence v3.0',
@@ -365,162 +354,102 @@ describe('macro: footer', () => {
     });
   });
 
-  describe('powered by logo', () => {
-    describe.each([
-      [
-        'the `lang` parameter is not provided',
-        {},
-        {
-          iconType: 'ons-logo-en',
-          altText: 'Office for National Statistics',
-        },
-      ],
-      [
-        'the `lang` parameter is "en"',
-        { lang: 'en' },
-        {
-          iconType: 'ons-logo-en',
-          altText: 'Office for National Statistics',
-        },
-      ],
-      [
-        'the `lang` parameter is "cy"',
-        { lang: 'cy' },
-        {
-          iconType: 'ons-logo-cy',
-          altText: 'Swyddfa Ystadegau Gwladol',
-        },
-      ],
-    ])('where %s', (_, langParams, defaultIcon) => {
+  describe('poweredBy logo', () => {
+    describe('default poweredBy logo', () => {
       describe.each([
         [
-          'the `poweredBy` and `OGLLink` parameters are provided',
+          'the `lang` parameter is not provided',
+          {},
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
-            OGLLink: EXAMPLE_OGL_LINK_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
+            iconType: 'ons-logo-en',
+            altText: 'Office for National Statistics',
           },
         ],
         [
-          'the `poweredBy.partnership` and `OGLLink` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-            OGLLink: EXAMPLE_OGL_LINK_PARAM,
-          },
+          'the `lang` parameter is "en"',
+          { lang: 'en' },
           {
-            iconType: 'person',
-            altText: 'Person alt text',
+            iconType: 'ons-logo-en',
+            altText: 'Office for National Statistics',
           },
         ],
+      ])('where %s', (_, langParams, defaultIcon) => {
+        const params = {
+          ...langParams,
+        };
+        it('renders the expected icon', () => {
+          const faker = templateFaker();
+          const iconsSpy = faker.spy('icons');
+
+          faker.renderComponent('footer', params);
+
+          expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining(defaultIcon));
+        });
+      });
+    });
+    describe('provided poweredBy logo', () => {
+      describe.each([
         [
-          'the `poweredBy` parameter is not provided but the `legal` parameter is provided',
+          'the `lang` parameter is "cy"',
+          { lang: 'cy' },
           {
-            legal: EXAMPLE_LEGAL_PARAM,
+            iconType: 'ons-logo-cy',
+            altText: 'Swyddfa Ystadegau Gwladol',
           },
-          defaultIcon,
         ],
+      ])('where %s', (_, langParams, defaultIcon) => {
+        const params = {
+          ...langParams,
+        };
+        it('renders the expected icon', () => {
+          const faker = templateFaker();
+          const iconsSpy = faker.spy('icons');
+
+          faker.renderComponent('footer', params);
+
+          expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining(defaultIcon));
+        });
+      });
+    });
+    describe('provided poweredBy logo', () => {
+      describe.each([
         [
-          'the `poweredBy` parameter is not provided but the `legal` and `OGLLink` parameters are provided',
+          'the `poweredBy` and `OGLLink` parameters are provided',
           {
-            legal: EXAMPLE_LEGAL_PARAM,
+            poweredBy: '<img src="logo.svg" alt="logo">',
             OGLLink: EXAMPLE_OGL_LINK_PARAM,
           },
-          defaultIcon,
         ],
         [
           'the `poweredBy` and `legal` parameters are provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
+            poweredBy: '<img src="logo.svg" alt="logo">',
             legal: EXAMPLE_LEGAL_PARAM,
           },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-        [
-          'the `poweredBy.partnership` and `legal` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-            legal: EXAMPLE_LEGAL_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
         ],
         [
           'the `poweredBy` and `crest` parameters are provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
+            poweredBy: '<img src="logo.svg" alt="logo">',
             crest: true,
           },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-        [
-          'the `poweredBy.partnership` and `crest` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-            crest: true,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
         ],
         [
           'the `poweredBy`, `legal` and `crest` parameters are provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
-            legal: EXAMPLE_LEGAL_PARAM,
-            crest: true,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-        [
-          'the `poweredBy.partnership`, `legal` and `crest` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
+            poweredBy: '<img src="logo.svg" alt="logo">',
             legal: EXAMPLE_LEGAL_PARAM,
             crest: true,
           },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
         ],
         [
           'the `poweredBy` parameter is provided but the `legal` and `crest` parameters are not provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
+            poweredBy: '<img src="logo.svg" alt="logo">',
           },
         ],
-        [
-          'the `poweredBy.partnership` parameter is provided but the `legal` and `crest` parameters are not provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-      ])('where %s', (_, poweredByParams, expectedIcon) => {
+      ])('where %s', (_, poweredByParams) => {
         const params = {
-          ...langParams,
           ...poweredByParams,
         };
 
@@ -531,13 +460,10 @@ describe('macro: footer', () => {
           expect(results).toHaveNoViolations();
         });
 
-        it('renders the expected icon', () => {
-          const faker = templateFaker();
-          const iconsSpy = faker.spy('icons');
-
-          faker.renderComponent('footer', params);
+        it('renders the expected logo', () => {
+          const $ = cheerio.load(renderComponent('footer', params));
 
-          expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining(expectedIcon));
+          expect($('.ons-footer__poweredby img').attr('src')).toBe('logo.svg');
         });
       });
     });
@@ -631,60 +557,4 @@ describe('macro: footer', () => {
       expect($('.ons-footer__crest').length).toBe(1);
     });
   });
-
-  describe('partnership', () => {
-    const params = {
-      poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-    };
-
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
-
-    it('renders ONS icon when `partnership` parameter is provided', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('footer', params);
-
-      expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining({ iconType: 'ons-logo-en' }));
-    });
-
-    it('renders "poweredBy" icon when `partnership` parameter is provided', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('footer', params);
-
-      expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining({ iconType: 'person' }));
-    });
-
-    it('renders "poweredBy" element when `partnership` parameter is provided', () => {
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      expect($('.ons-footer__poweredby').length).toBe(1);
-    });
-
-    it('renders "partnership" and "prefix" elements when `partnership` parameter is provided', () => {
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      expect($('.ons-footer__partnership').length).toBe(1);
-      expect($('.ons-footer__partnership-prefix').length).toBe(1);
-    });
-
-    it('does not render "partnership" element when `partnership` parameter is not provided', () => {
-      const params = {
-        poweredBy: {
-          logo: 'person',
-          alt: 'Person alt text',
-        },
-      };
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      expect($('.ons-footer__partnership').length).toBe(0);
-    });
-  });
 });