@ons/design-system 72.10.9 → 72.11.0

package/scss/main.scss

@@ -5,6 +5,7 @@
 @import 'objects/index';
 @import '../components/access-code/access-code';
 @import '../components/address-output/address-output';
+@import '../components/announcement-banner/announcement-banner';
 @import '../components/autosuggest/autosuggest';
 @import '../components/back-to-top/back-to-top';
 @import '../components/breadcrumbs/breadcrumbs';

package/scss/vars/_colors.scss

@@ -33,6 +33,9 @@
     --ons-color-sun-yellow: #fbc900;
     --ons-color-neon-yellow: #f0f762;
     --ons-color-light-orange: #e8bb9b;
+    --ons-color-gov-teal: #00847d;
+    --ons-color-gov-red: #b10e1e;
+    --ons-color-gov-black: #0b0c0c;
 
     // Core colour adjustments - tints
     --ons-color-ocean-blue-tint: #e9eff4;

package/scss/vars/_forms.scss

@@ -46,3 +46,14 @@ $nbsp-width: 0.288rem;
         #{$padding-width + $chars-width + $num-chars-width + $chars-space-width + $spaces-width} + #{($input-border-width * 2) + 2px}
     );
 }
+
+$iframe-ratios: '16-9', '4-3', '21-9', '1-1', '3-2', '9-16';
+
+@mixin iframe-aspect-ratio($class-name, $ratios: $iframe-ratios) {
+    @each $ratio in $ratios {
+        .#{str-replace($class-name, '{x}', $ratio)} {
+            aspect-ratio: #{str-replace($ratio, '-', '/')};
+            width: 100%;
+        }
+    }
+}

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

@@ -1,158 +0,0 @@
-{% from "components/table/_macro.njk" import onsTable %}
-{{
-    onsTable({
-        "variants": 'scrollable',
-        "caption": "Scrollable table",
-        "ariaLabel": "There are 7 columns in this table. Some of the table may be off screen. Scroll or drag horizontally to bring into view.",
-        "ths": [
-            {
-                "value": "ID"
-            },
-            {
-                "value": "Title"
-            },
-            {
-                "value": "Abbreviation"
-            },
-            {
-                "value": "Legal basis"
-            },
-            {
-                "value": "Frequency"
-            },
-            {
-                "value": "Date"
-            },
-            {
-                "value": "Status"
-            }
-        ],
-        "trs": [
-            {
-                "tds": [
-                    {
-                        "value": "023"
-                    },
-                    {
-                        "value": "Monthly Business Survey - Retail Sales Index"
-                    },
-                    {
-                        "value": "RSI"
-                    },
-                    {
-                        "value": "Statistics of Trade Act 1947"
-                    },
-                    {
-                        "value": "Monthly"
-                    },
-                    {
-                        "value": "20 Jan 2018"
-                    },
-                    {
-                        "value": "<span class='ons-status ons-status--success'>Ready</span>"
-                    }
-                ]
-            },
-            {
-                "tds": [
-                    {
-                        "value": "112"
-                    },
-                    {
-                        "value": "Annual Inward Foreign Direct Investment Survey"
-                    },
-                    {
-                        "value": "AIFDI"
-                    },
-                    {
-                        "value": "Statistics of Trade Act 1947"
-                    },
-                    {
-                        "value": "Annually"
-                    },
-                    {
-                        "value": "26 Feb 2018"
-                    },
-                    {
-                        "value": "<span class='ons-status ons-status--dead'>Not ready</span>"
-                    }
-                ]
-            },
-            {
-                "tds": [
-                    {
-                        "value": "332"
-                    },
-                    {
-                        "value": "Business Register and Employment Survey"
-                    },
-                    {
-                        "value": "BRES"
-                    },
-                    {
-                        "value": "Statistics of Trade Act 1947"
-                    },
-                    {
-                        "value": "Annually"
-                    },
-                    {
-                        "value": "23 Jan 2013"
-                    },
-                    {
-                        "value": "<span class='ons-status ons-status--info'>In progress</span>"
-                    }
-                ]
-            },
-            {
-                "tds": [
-                    {
-                        "value": "654"
-                    },
-                    {
-                        "value": "Quartely Survey of Building Materials Sand and Gravel"
-                    },
-                    {
-                        "value": "QBMS"
-                    },
-                    {
-                        "value": "Statistics of Trade Act 1947 - BEIS"
-                    },
-                    {
-                        "value": "Quartely"
-                    },
-                    {
-                        "value": "24 Jan 2015"
-                    },
-                    {
-                        "value": "<span class='ons-status ons-status--error'>Issue</span>"
-                    }
-                ]
-            },
-            {
-                "tds": [
-                    {
-                        "value": "765"
-                    },
-                    {
-                        "value": "Monthly Survey of Building Materials Concrete Building Blocks"
-                    },
-                    {
-                        "value": "MSBB"
-                    },
-                    {
-                        "value": "Voluntary"
-                    },
-                    {
-                        "value": "Monthly"
-                    },
-                    {
-                        "value": "25 Jan 2014"
-                    },
-                    {
-                        "value": "<span class='ons-status ons-status--success'>Ready</span>"
-                    }
-                ]
-            }
-        ]
-    })
-}}