@ons/design-system 70.0.4 → 70.0.6

package/README.md

@@ -144,15 +144,17 @@ Generate a build into `./build`.
 yarn build
 ```
 
-## Recommended Visual Studio Code plugins for this project
+## Recommended Visual Studio Code Extensions for this project
 
+- [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)
 - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 - [Nunjucks](https://marketplace.visualstudio.com/items?itemName=ronnidc.nunjucks)
 - [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Sass](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)
+- [remark](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-remark)
+- [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
+- [Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)
 - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
-- [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
 
 ## Recommended Visual Studio Code settings for this project
 

package/components/autosuggest/_macro.njk

@@ -62,8 +62,6 @@
             "accessiblePlaceholder": params.input.accessiblePlaceholder,
             "name": params.input.name,
             "autosuggestResults": autosuggestResults,
-            "min": params.input.min,
-            "max": params.input.max,
             "minLength": params.input.minLength,
             "maxLength": params.input.maxLength,
             "prefix": params.input.prefix,

package/components/autosuggest/_macro.spec.js

@@ -157,9 +157,7 @@ describe('macro: autosuggest', () => {
           },
           mutuallyExclusive: null,
           accessiblePlaceholder: true,
-          name: 'country-of-birth-test',
-          min: 1,
-          max: 10,
+          name: 'test-params',
           minLength: 1,
           maxLength: 10,
           prefix: {
@@ -210,10 +208,8 @@ describe('macro: autosuggest', () => {
       expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.');
       expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null);
       expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true);
-      expect(inputSpy.occurrences[0]).toHaveProperty('name', 'country-of-birth-test');
+      expect(inputSpy.occurrences[0]).toHaveProperty('name', 'test-params');
       expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string');
-      expect(inputSpy.occurrences[0]).toHaveProperty('min', 1);
-      expect(inputSpy.occurrences[0]).toHaveProperty('max', 10);
       expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1);
       expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10);
       expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds');

package/components/date-input/_macro.njk

@@ -25,8 +25,6 @@
                 "name": params.day.name,
                 "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
                 "width": "2",
-                "min": 1,
-                "max": 31,
                 "maxLength": 2,
                 "attributes": params.day.attributes,
                 "label": {
@@ -46,8 +44,6 @@
                 "name": params.month.name,
                 "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
                 "width": "2",
-                "min": 1,
-                "max": 12,
                 "maxLength": 2,
                 "attributes": params.month.attributes,
                 "label": {
@@ -67,8 +63,6 @@
                 "name": params.year.name,
                 "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
                 "width": "4",
-                "min": 1000,
-                "max": 3000,
                 "maxLength": 4,
                 "attributes": params.year.attributes,
                 "label": {

package/components/date-input/_macro.spec.js

@@ -173,8 +173,6 @@ describe('macro: date input', () => {
         type: 'number',
         name: 'day',
         width: '2',
-        min: 1,
-        max: 31,
         maxLength: 2,
         classes: '',
         error: '',
@@ -201,8 +199,6 @@ describe('macro: date input', () => {
         type: 'number',
         name: 'month',
         width: '2',
-        min: 1,
-        max: 12,
         maxLength: 2,
         classes: '',
         error: '',
@@ -229,8 +225,6 @@ describe('macro: date input', () => {
         type: 'number',
         name: 'year',
         width: '4',
-        min: 1000,
-        max: 3000,
         maxLength: 4,
         classes: '',
         error: '',
@@ -349,8 +343,6 @@ describe('macro: date input', () => {
         type: 'number',
         name: 'year',
         width: '4',
-        min: 1000,
-        max: 3000,
         maxLength: 4,
         classes: '',
         label: {

package/components/document-list/_macro.njk

@@ -32,10 +32,11 @@
                                 <a href="{{ document.url }}">{{ document.title }}
                                 {%- if document.metadata and document.metadata.file %}
                                 <span class="ons-u-vh">
-                                    {% set fileMetadataItems = [] %}
-                                    {% if document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType + ' document download'), fileMetadataItems) %}{% endif %}
-                                    {% if document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
-                                    {% if document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
+                                    {% set fileMetadataItems = [
+                                        document.metadata.file.fileType + ' document download' if document.metadata.file.fileType,
+                                        document.metadata.file.fileSize if document.metadata.file.fileSize,
+                                        document.metadata.file.filePages if document.metadata.file.filePages ]
+                                    %}
 
                                     , {{ fileMetadataItems | join(', ') }}
 
@@ -76,12 +77,11 @@
                                     {%- if document.metadata.file and document.metadata.file.fileType %}
 
                                         <li class="ons-document-list__item-attribute" aria-hidden="true">
-                                            {% set fileMetadataItems = [] %}
-
-                                            {% if document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType), fileMetadataItems) %}{% endif %}
-                                            {% if document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
-                                            {% if document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
-
+                                            {% set fileMetadataItems = [
+                                                document.metadata.file.fileType if document.metadata.file.fileType,
+                                                document.metadata.file.fileSize if document.metadata.file.fileSize,
+                                                document.metadata.file.filePages if document.metadata.file.filePages ]
+                                             %}
                                             {{ fileMetadataItems | join(', ') }}
                                         </li>
 

package/components/footer/_footer.scss

@@ -3,7 +3,7 @@
     color: var(--ons-color-text-banner-link);
     text-decoration: underline;
 
-    &:hover {
+    &:hover:not(:focus) {
       color: var(--ons-color-text-banner-link-hover);
       text-decoration: underline solid var(--ons-color-text-banner-link-hover) 2px;
     }

package/components/input/example-input-number.njk

@@ -1,13 +1,11 @@
 {% from "components/input/_macro.njk" import onsInput %}
+
 {{
     onsInput({
         "id": "number-example-input",
         "type": "number",
         "width": "2",
         "autocomplete": "off",
-        "attributes": {
-            "min": 0
-        },
         "label": {
             "text": "Number of bedrooms"
         }

package/components/input/example-input-numeric-values.njk

@@ -5,9 +5,6 @@
         "type": "number",
         "width": "2",
         "autocomplete": "off",
-        "attributes": {
-            "min": 0
-        },
         "label": {
             "text": "Number of bedrooms"
         }

package/components/mutually-exclusive/example-mutually-exclusive-number.njk

@@ -11,9 +11,6 @@
             "dontWrap": true,
             "type": "number",
             "width": "4",
-            "attributes": {
-                "min": 0
-            },
             "label": {
                 "text": "Gross annual income"
             },

package/components/mutually-exclusive/mutually-exclusive.duration.spec.js

@@ -13,10 +13,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
       text: 'Years',
       id: 'address-duration-years-suffix',
     },
-    attributes: {
-      min: 0,
-      max: 100,
-    },
   },
   field2: {
     id: 'address-duration-months',
@@ -25,10 +21,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
       text: 'Months',
       id: 'address-duration-months-suffix',
     },
-    attributes: {
-      min: 0,
-      max: 11,
-    },
   },
   mutuallyExclusive: {
     or: 'Or',
@@ -59,10 +51,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS = {
       text: 'Years',
       id: 'address-duration-years-suffix',
     },
-    attributes: {
-      min: 0,
-      max: 100,
-    },
   },
   mutuallyExclusive: {
     or: 'Or',

package/components/mutually-exclusive/mutually-exclusive.number.spec.js

@@ -7,9 +7,6 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
   type: 'number',
   legend: 'What is your annual income before tax in 2018/19?',
   width: '5',
-  attributes: {
-    min: 0,
-  },
   label: {
     text: 'Gross annual income',
   },

package/components/share-page/_macro.njk

@@ -6,7 +6,6 @@
         <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
     {% endif %}
 
-    {% set list = [] %}
     {% if params.facebook and params.facebook == true %}
         {% set facebook =
             {
@@ -17,8 +16,6 @@
                 "target": '_blank'
             }
          %}
-
-        {% set list = (list.push(facebook), list) %}
     {% endif %}
     {% if params.twitter and params.twitter == true %}
         {% set twitter =
@@ -30,17 +27,13 @@
                 "target": '_blank'
             }
          %}
-
-        {% set list = (list.push(twitter), list) %}
-
     {% endif %}
-
     {{
         onsList({
             "variants": 'inline',
             "iconPosition": 'before',
             "iconSize": params.iconSize | default("xxl"),
-            "itemsList": list
+            "itemsList": [facebook, twitter]
         })
     }}
 {% endmacro %}

package/components/summary/_macro.njk

@@ -12,7 +12,7 @@
     {% if params.classes %}
          {% set className = className + " " + params.classes %}
     {% endif %}
-    
+
     <div class="{{ className }}">
         {% for summary in params.summaries %}
             {% if summary.summaryTitle %}
@@ -51,6 +51,9 @@
                                                                 "iconType": rowItem.iconType
                                                             })
                                                         -}}
+                                                        {% if rowItem.iconVisuallyHiddenText %}
+                                                            <span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span>
+                                                        {% endif %}
                                                     </span>
                                                 {% endif %}
 

package/components/summary/_macro.spec.js

@@ -22,6 +22,7 @@ const EXAMPLE_SUMMARY_ROWS = {
             b: 'bbb',
           },
           iconType: 'check',
+          iconVisuallyHiddenText: 'Section completed',
           id: 'item-id-1',
           valueList: [
             {
@@ -432,6 +433,12 @@ describe('macro: summary', () => {
         expect($('.ons-summary__item-title-icon').hasClass('ons-summary__item-title-icon--check')).toBe(true);
       });
 
+      it('has the visually hidden text <span> text when `iconType` is `check`', () => {
+        const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
+
+        expect($('.ons-summary__item-title-icon').text().trim()).toBe('Section completed');
+      });
+
       it('has the correct item text class when `iconType` is provided', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 

package/components/summary/example-summary-hub-minimal.njk

@@ -0,0 +1,75 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+{{ onsSummary({
+    "variant": "hub",
+    "summaries": [
+            {
+                "groups": [
+                    {
+                    "rows": [
+                        {
+                            "rowTitle": "People who live here",
+                            "rowItems": [
+                                {
+                                    "iconType": "check",
+                                    "iconVisuallyHiddenText": "Section complete",
+                                    "actions": [
+                                        {
+                                            "text": "View answers",
+                                            "visuallyHiddenText": "View answers for People who live here",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Mary Smith (You)",
+                            "rowItems": [
+                                {
+                                    "iconType": "check",
+                                    "iconVisuallyHiddenText": "Section complete",
+                                    "actions": [
+                                        {
+                                            "text": "View answers",
+                                            "visuallyHiddenText": "View answers for Mary Smith",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "John Smith",
+                            "rowItems": [
+                                {
+                                    "actions": [
+                                        {
+                                            "text": "Continue with section",
+                                            "visuallyHiddenText": "Continue with John Smith's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Billy Smith",
+                            "rowItems": [
+                                {
+                                    "actions": [
+                                        {
+                                            "text": "Start section",
+                                            "visuallyHiddenText": "Start Billy Smith's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}) }}