@ons/design-system 62.0.1 → 62.1.0

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk

@@ -0,0 +1,86 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+    {{
+        onsCheckboxes({
+            "legend": "Content type",
+            "checkboxesLabel": "Show only:",
+            "borderless": true,
+            "name": "dietary",
+            "checkboxes": [
+                {
+                    "id": "data",
+                    "label": {
+                        "text": "Data (309)"
+                    },
+                    "value": "data",
+                    "other": {
+                        "otherType": "checkboxes",
+                        "selectAllChildren": true,
+                        "legend": "Data type",
+                        "legendClasses": "ons-u-vh",
+                        "name": "name",
+                        "checkboxes": [
+                            {
+                                "id": "datasets",
+                                "label": {
+                                    "text": "Datasets (100)"
+                                },
+                                "value": "datasets"
+                            },
+                            {
+                                "id": "timeseries",
+                                "label": {
+                                    "text": "Timeseries (20)"
+                                },
+                                "value": "timeseries"
+                            },
+                            {
+                                "id": "requested",
+                                "label": {
+                                    "text": "User requested data (17)"
+                                },
+                                "value": "requested"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "id": "publications",
+                    "label": {
+                        "text": "Publications (137)"
+                    },
+                    "value": "publications",
+                    "other": {
+                        "otherType": "checkboxes",
+                        "selectAllChildren": true,
+                        "legend": "Publication type",
+                        "legendClasses": "ons-u-vh",
+                        "name": "name",
+                        "checkboxes": [
+                            {
+                                "id": "press-release",
+                                "label": {
+                                    "text": "Press release (100)"
+                                },
+                                "value": "pressrelease"
+                            },
+                            {
+                                "id": "bulletin",
+                                "label": {
+                                    "text": "Bulletin (20)"
+                                },
+                                "value": "bulletin"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "id": "areas",
+                    "label": {
+                        "text": "Areas (0)"
+                    },
+                    "value": "areas"
+                }       
+            ]
+        })
+    }}

package/components/checkboxes/example-checkboxes-with-revealed-radios.njk

@@ -0,0 +1,69 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{
+    onsCheckboxes({
+        "checkboxesLabel": "Select all that apply",
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "checkboxes": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "other": {
+                    "otherType": "radios",
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Choose preferred time of day",
+                    "radios": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Any time of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/checkboxes/example-checkboxes-with-revealed-select.njk

@@ -0,0 +1,71 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "How would you like us to contact you?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "name": "contact",
+            "checkboxes": [
+                {
+                    "id": "post",
+                    "label": {
+                        "text": "By post"
+                    },
+                    "value": "post"
+                },
+                {
+                    "id": "email",
+                    "label": {
+                        "text": "By email"
+                    },
+                    "value": "email"
+                },
+                {
+                    "id": "phone",
+                    "label": {
+                        "text": "By phone"
+                    },
+                    "value": "phone",
+                    "other": {
+                        "otherType": "select",
+                        "id": "phone-time",
+                        "name": "phone-time",
+                        "label": {
+                            "text": "Choose preferred time of day"
+                        },
+                        "options": [
+                            {
+                                "value": "",
+                                "text": "Select an option",
+                                "disabled": true,
+                                "selected": true
+                            },
+                            {
+                                "value": "anytime",
+                                "text": "Anytime of day"
+                            },
+                            {
+                                "value": "morning",
+                                "text": "Morning"
+                            },
+                            {
+                                "value": "afternoon",
+                                "text": "Afternoon"
+                            },
+                            {
+                                "value": "evening",
+                                "text": "Evening"
+                            }
+                        ]
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-revealed-text-input.njk

@@ -0,0 +1,59 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "Do you have any dietary requirements?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter dietary requirements"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-select-all-button.njk

@@ -0,0 +1,51 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "What devices do you own?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "name": "devices",
+            "autoSelect": {
+                "selectAllText": "Select all",
+                "unselectAllText": "Unselect all",
+                "context": "following checkboxes"
+            },
+            "checkboxes": [
+                {
+                    "id": "mobile-phone",
+                    "label": {
+                        "text": "Mobile phone"
+                    },
+                    "value": "mobile-phone"
+                },
+                {
+                    "id": "tablet",
+                    "label": {
+                        "text": "Tablet"
+                    },
+                    "value": "tablet"
+                },
+                {
+                    "id": "laptop",
+                    "label": {
+                        "text": "Laptop"
+                    },
+                    "value": "laptop"
+                },
+                {
+                    "id": "desktop",
+                    "label": {
+                        "text": "Desktop computer"
+                    },
+                    "value": "desktop"
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-visible-text-input.njk

@@ -0,0 +1,61 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "Do you have any dietary requirements?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "name": "dietary",
+            "checkboxes": [
+                {
+                    "id": "gluten-free",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "other": {
+                        "open": true,
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter dietary requirements"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-without-border.njk

@@ -0,0 +1,33 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{
+    onsCheckboxes({
+        "checkboxesLabel": "All types",
+        "legend": "Select type",
+        "name": "types",
+        "borderless": true,
+        "checkboxes": [
+            {
+                "id": "booklet",
+                "label": {
+                    "text": "Booklet"
+                },
+                "value": "booklet"
+            },
+            {
+                "id": "logo",
+                "label": {
+                    "text": "Logo"
+                },
+                "value": "logo"
+            },
+            {
+                "id": "poster",
+                "label": {
+                    "text": "Poster"
+                },
+                "value": "poster"
+            }
+        ]
+    })
+}}

package/components/checkboxes/example-checkboxes.njk

@@ -0,0 +1,46 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "What devices do you own?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "name": "devices",
+            "checkboxes": [
+                {
+                    "id": "mobile-phone",
+                    "label": {
+                        "text": "Mobile phone"
+                    },
+                    "value": "mobile-phone"
+                },
+                {
+                    "id": "tablet",
+                    "label": {
+                        "text": "Tablet"
+                    },
+                    "value": "tablet"
+                },
+                {
+                    "id": "laptop",
+                    "label": {
+                        "text": "Laptop"
+                    },
+                    "value": "laptop"
+                },
+                {
+                    "id": "desktop",
+                    "label": {
+                        "text": "Desktop computer"
+                    },
+                    "value": "desktop"
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/content-pagination/example-content-pagination.njk

@@ -0,0 +1,20 @@
+{% from "components/content-pagination/_macro.njk" import onsContentPagination %}
+
+{{-
+  onsContentPagination({
+    "contentPaginationItems": [
+      {
+        "rel": 'prev',
+        "text": 'Previous',
+        "url": '#0',
+        "label": 'Overview'
+      },
+      {
+        "rel": 'next',
+        "text": 'Next',
+        "url": '#0',
+        "label": 'Who should take part and why'
+      }
+    ]
+  })
+}}

package/components/cookies-banner/_macro.njk

@@ -4,7 +4,7 @@
         {% set serviceName = 'ons.gov.uk' %}
         {% set statementTitle = 'Cwcis ar' %}
         {% set settingsLinkText = 'Gweld cwcis' %}
-        {% set settingsLinkURL = '/cwics' %}
+        {% set settingsLinkURL = params.settingsLinkTextURL | default('/cwics') %}
         {% set statementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod <a href="' + settingsLinkURL + '">cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
         {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
         {% set rejectButtonText = 'Gwrthod cwcis ychwanegol' %}
@@ -18,7 +18,7 @@
         {% set serviceName = 'ons.gov.uk' %}
         {% set statementTitle = 'Cookies on' %}
         {% set settingsLinkText = 'View cookies' %}
-        {% set settingsLinkURL = '/cookies' %}
+        {% set settingsLinkURL = params.settingsLinkTextURL | default('/cookies') %}
         {% set statementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="' + settingsLinkURL + '">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
         {% set acceptButtonText = 'Accept additional cookies' %}
         {% set rejectButtonText = 'Reject additional cookies' %}
@@ -30,7 +30,7 @@
     {% endif %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
-        <div class="ons-container ons-cookies-banner__primary">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary">
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
                     <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}</h2>
@@ -68,7 +68,7 @@
                 </div>
             </div>
         </div>
-        <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no">
             <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
               <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
                 <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>

package/components/cookies-banner/_macro.spec.js

@@ -10,7 +10,7 @@ const EXAMPLE_COOKIES_BANNER_PARAMS = {
   serviceName: 'ons.gov.uk override',
   statementTitle: 'Cookies on override',
   settingsLinkText: 'Cookie settings override',
-  settingsLinkURL: '/cookiesoverride',
+  settingsLinkTextURL: '/cookiesoverride',
   statementText: 'Statement override',
   acceptButtonText: 'Accept additional cookies override',
   rejectButtonText: 'Reject additional cookies override',
@@ -184,6 +184,26 @@ describe('macro: cookies-banner', () => {
         const linkText = $('.ons-cookies-banner__link').attr('href');
         expect(linkText).toBe('/cookies');
       });
+
+      it('has `container--wide` class when `wide` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            wide: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--wide')).toBe(true);
+      });
+
+      it('has `container--full-width` class when `fullWidth` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            fullWidth: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--full-width')).toBe(true);
+      });
     });
 
     describe('confirmation banner', () => {
@@ -213,6 +233,26 @@ describe('macro: cookies-banner', () => {
 
         expect(buttonSpy.occurrences[2].buttonContext).toBe('this message');
       });
+
+      it('has `container--wide` class when `wide` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            wide: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--wide')).toBe(true);
+      });
+
+      it('has `container--full-width` class when `fullWidth` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            fullWidth: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--full-width')).toBe(true);
+      });
     });
   });
 

package/components/cookies-banner/example-cookies-banner-cymraeg.njk

@@ -0,0 +1,9 @@
+---
+"fullWidth": true
+---
+{% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
+{{
+    onsCookiesBanner({
+        'lang': 'cy'
+    })
+}}

package/components/cookies-banner/example-cookies-banner.njk

@@ -0,0 +1,7 @@
+---
+"fullWidth": true
+---
+{% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
+{{
+    onsCookiesBanner()
+}}