@ons/design-system 62.0.1 → 62.1.0

package/components/summary/example-summary-household.njk

@@ -0,0 +1,77 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+{{ onsSummary({
+    "classes": "ons-u-mb-l",
+    "summaries": [
+        {
+            "groups": [
+                {
+                    "rows": [
+                        {
+                            "rowTitle": "Joe Bloggs (You)",
+                            "rowItems": [
+                                {
+                                    "iconType": "person",
+                                    "actions": [
+                                        {
+                                            "text": "Change",
+                                            "ariaLabel": "Change details for Joe Bloggs",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Barry Scott",
+                            "rowItems": [
+                                {
+                                    "iconType": "person",
+                                    "actions": [
+                                        {
+                                            "text": "Change",
+                                            "ariaLabel": "Change details for Barry Scott",
+                                            "url": "#0"
+                                        },
+                                        {
+                                            "text": "Remove",
+                                            "ariaLabel": "Remove Barry Scott",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Wilhelmina Susannah Clementine-Smith",
+                            "rowItems": [
+                                {
+                                    "iconType": "person",
+                                    "actions": [
+                                        {
+                                            "text": "Change",
+                                            "ariaLabel": "Change details for Susan Gill",
+                                            "url": "#0"
+                                        },
+                                        {
+                                            "text": "Remove",
+                                            "ariaLabel": "Remove Susan Gill",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ],
+                    "summaryLink": {
+                        "text": "Add someone to this household",
+                        "url": "#0",
+                        "attributes": {
+                            "data-qa": "add-item-link"
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+}) }}

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

@@ -0,0 +1,170 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+{{ onsSummary({
+    "hub": true,
+    "summaries": [
+            {
+                "groups": [
+                    {
+                    "rows": [
+                        {
+                            "rowTitle": "People who live here",
+                            "rowItems": [
+                                {
+                                    "iconType": "check",
+                                    "valueList": [
+                                        {
+                                            "text": "Completed"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "View answers",
+                                            "ariaLabel": "View answers for People who live here",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Accommodation",
+                            "rowItems": [
+                                {
+                                    "iconType": "check",
+                                    "valueList": [
+                                        {
+                                            "text": "Completed"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "View answers",
+                                            "ariaLabel": "View answers for Accommodation",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Mary Smith (You)",
+                            "rowItems": [
+                                {
+                                    "iconType": "check",
+                                    "valueList": [
+                                        {
+                                            "text": "Completed"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "View answers",
+                                            "ariaLabel": "View answers for Mary Smith",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "John Smith",
+                            "rowItems": [
+                                {
+                                    "valueList": [
+                                        {
+                                            "text": "Partially completed"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "Continue with section",
+                                            "ariaLabel": "Continue with John Smith's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Billy Smith",
+                            "rowItems": [
+                                {
+                                    "valueList": [
+                                        {
+                                            "text": "Not started"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "Start section",
+                                            "ariaLabel": "Start Billy Smith's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Sally Smith",
+                            "rowItems": [
+                                {
+                                    "valueList": [
+                                        {
+                                            "text": "Not started"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "Start section",
+                                            "ariaLabel": "Start Sally Smith's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
+                            "rowItems": [
+                                {
+                                    "valueList": [
+                                        {
+                                            "text": "Not started"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "Start section",
+                                            "ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "rowTitle": "Vera Jones (Visitor)",
+                            "rowItems": [
+                                {
+                                    "valueList": [
+                                        {
+                                            "text": "Not started"
+                                        }
+                                    ],
+                                    "actions": [
+                                        {
+                                            "text": "Start section",
+                                            "ariaLabel": "Start Vera Jones's section",
+                                            "url": "#0"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}) }}

package/components/summary/example-summary-multiple.njk

@@ -0,0 +1,81 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+{{
+    onsSummary({
+        "summaries": [
+            {
+                "summaryTitle": "Summary - Section Title",
+                "groups": [
+                    {
+                        "rows": [
+                            {
+                                "rowTitle": "What are your monthly household expenses?",
+                                "rowItems": [
+                                    {
+                                        "rowTitle": "Food",
+                                        "valueList": [
+                                            {
+                                                "text": "£50.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Utilities",
+                                        "valueList": [
+                                            {
+                                                "text": "£65.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Transport",
+                                        "valueList": [
+                                            {
+                                                "text": "£70.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Other",
+                                        "valueList": [
+                                            {
+                                                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/summary/example-summary-no-action.njk

@@ -0,0 +1,40 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+{{
+    onsSummary({
+        "summaries": [
+            {
+                "groups": [
+                    {
+                        "groupTitle": "Turnover",
+                        "rows": [
+                            {
+                                "rowTitle": "What are the dates of the sales period you are reporting for?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "01 January 2015 to 02 February 2017"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Total turnover",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£234,000.00"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/summary/example-summary.njk

@@ -0,0 +1,107 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+{{
+    onsSummary({
+        "summaries": [
+            {
+                "groups": [
+                    {
+                        "placeholderText": 'test',
+                        "id": "turnover",
+                        "groupTitle": "Turnover",
+                        "rows": [
+                            {
+                                "id": "sales-dates-row",
+                                "rowTitle": "What are the dates of the sales period you are reporting for?",
+                                "rowItems": [
+                                    {
+                                        "id": "sales-dates",
+                                        "valueList": [
+                                            {
+                                                "text": "1 January 2015 to 2 February 2017"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?",
+                                "id": "sales-value-row",
+                                "rowItems": [
+                                    {
+                                        "id": "sales-value",
+                                        "valueList": [
+                                            {
+                                                "text": "£180,440"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": "sales-reasons-row",
+                                "rowTitle": "Please indicate the reasons for any changes in the total turnover",
+                                "rowItems": [
+                                    {
+                                        "id": "sales-reasons",
+                                        "valueList": [
+                                            {
+                                                "text": "Change in level of business activity"
+                                            },
+                                            {
+                                                "text": "Special/calendar events",
+                                                "other": "Some other value"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "id": "sales-detail-row",
+                                "rowTitle": "Please describe the changes in total turnover in more detail",
+                                "rowItems": [
+                                    {
+                                        "id": "sales-detail",
+                                        "valueList": [
+                                            {
+                                                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/_macro.njk

@@ -21,7 +21,7 @@
                                 {{
                                     onsIcon({
                                         "iconType": "sort-sprite",
-                                        "id": th.value,
+                                        "id": th.value | replace(' ', '-'),
                                         "classes": 'ons-u-d-no'
                                     })
                                 }}

package/components/table/_table.scss

@@ -157,7 +157,7 @@
     [aria-sort='descending'].ons-table__header {
       .ons-svg-icon {
         .ons-topTriangle {
-          fill: var(--ons-color-grey-35);
+          fill: var(--ons-color-grey-15);
         }
         .ons-bottomTriangle {
           fill: var(--ons-color-text);
@@ -166,7 +166,7 @@
       .ons-table__sort-button:focus {
         .ons-svg-icon {
           .ons-topTriangle {
-            fill: #b69502;
+            fill: #e3ba02;
           }
         }
       }
@@ -178,13 +178,13 @@
           fill: var(--ons-color-text);
         }
         .ons-bottomTriangle {
-          fill: var(--ons-color-grey-35);
+          fill: var(--ons-color-grey-15);
         }
       }
       .ons-table__sort-button:focus {
         .ons-svg-icon {
           .ons-bottomTriangle {
-            fill: #b69502;
+            fill: #e3ba02;
           }
         }
       }
@@ -196,26 +196,26 @@
         border: 0;
         box-shadow: none;
         color: var(--ons-color-text-link);
+        cursor: pointer;
         display: inline-block;
         font-family: $font-sans;
         font-weight: $font-weight-bold;
         line-height: 1rem;
         padding: 0 0 0.2rem;
-        text-decoration: underline;
-        text-underline-position: under;
         white-space: nowrap;
 
-        &:hover {
+        &:hover:not(:focus) {
           color: var(--ons-color-text-link-hover);
-          cursor: pointer;
           text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+          text-underline-position: under;
         }
 
         .ons-svg-icon {
           fill: var(--ons-color-grey-75);
-          height: 0.8rem;
+          height: 16px;
+          margin-left: 0.2rem;
           padding-bottom: 0.1rem;
-          width: 0.8rem;
+          width: 16px;
         }
 
         &:focus {

package/components/table/example-table-basic.njk

@@ -0,0 +1,47 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "A basic table with a caption",
+        "id": "basic-table",
+        "ths": [
+            {
+                "value": "Column A"
+            },
+            {
+                "value": "Column B"
+            },
+            {
+                "value": "Column C"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Cell A1",
+                        "name": "cell-name"
+                    },
+                    {
+                        "value": "Cell B1"
+                    },
+                    {
+                        "value": "Cell C1"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Cell A2"
+                    },
+                    {
+                        "value": "Cell B2"
+                    },
+                    {
+                        "value": "Cell C2"
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-compact.njk

@@ -0,0 +1,73 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "variants": ['compact', 'row-hover'],
+        "caption": "A compacted table with a large number of columns",
+        "ths": [
+            {
+                "value": "Column A"
+            },
+            {
+                "value": "Column B"
+            },
+            {
+                "value": "Column C"
+            },
+            {
+                "value": "Column D"
+            },
+            {
+                "value": "Column E"
+            },
+            {
+                "value": "Column F"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Cell A1"
+                    },
+                    {
+                        "value": "Cell B1"
+                    },
+                    {
+                        "value": "Cell C1"
+                    },
+                    {
+                        "value": "Cell D1"
+                    },
+                    {
+                        "value": "Cell E1"
+                    },
+                    {
+                        "value": "Cell F1"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                    "value": "Cell A2"
+                    },
+                    {
+                    "value": "Cell B2"
+                    },
+                    {
+                    "value": "Cell C2"
+                    },
+                    {
+                    "value": "Cell D2"
+                    },
+                    {
+                        "value": "Cell E1"
+                    },
+                    {
+                        "value": "Cell F1"
+                    }
+                ]
+            }
+        ]
+    })
+}}