@ons/design-system 62.0.2 → 62.1.0

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/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"
+                    }
+                ]
+            }
+        ]
+    })
+}}

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

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

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

@@ -0,0 +1,81 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "A basic table with numeric values",
+        "ths": [
+            {
+                "value": "Country"
+            },
+            {
+                "value": "Population mid-2020",
+                "numeric": true
+            },
+            {
+                "value": "% change 2019 to 2020",
+                "numeric": true
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "England"
+                    },
+                    {
+                        "value": "67,081,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.43",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Northern Ireland"
+                    },
+                    {
+                        "value": "1,896,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.10",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Scotland"
+                    },
+                    {
+                        "value": "5,466,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.05",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Wales"
+                    },
+                    {
+                        "value": "3,170,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.53",
+                        "numeric": true
+                    }
+                ]
+            }
+        ]
+    })
+}}