@ons/design-system 72.10.8 → 72.10.9

package/components/hero/_hero.scss

@@ -88,7 +88,8 @@
         @extend .ons-u-mb-no;
     }
 
-    &--dark & {
+    &--dark &,
+    &--navy-blue & {
         &__details {
             color: var(--ons-color-text-inverse);
 
@@ -97,10 +98,16 @@
             }
 
             a:hover {
-                color: var(--ons-color-text-inverse-link-hover);
-                text-decoration-thickness: 2px;
+                text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 2px;
+            }
+
+            a:focus {
+                color: var(--ons-color-text);
             }
 
+            a:focus:hover {
+                text-decoration: none;
+            }
             .ons-details__heading {
                 color: inherit;
             }
@@ -129,7 +136,7 @@
                 height: 59px;
                 position: absolute;
                 right: 289px;
-                top: -11px;
+                top: 58px;
                 width: 59px;
             }
         }
@@ -141,7 +148,7 @@
                 position: absolute;
                 height: 30px;
                 right: 193px;
-                top: 11px;
+                top: 65px;
                 width: 30px;
             }
         }
@@ -150,7 +157,7 @@
             @include mq(l) {
                 height: 60px;
                 right: 112px;
-                top: 25px;
+                top: 75px;
                 width: 60px;
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
@@ -165,7 +172,7 @@
                 height: 60px;
                 position: absolute;
                 right: 208px;
-                top: 80px;
+                top: 130px;
                 width: 60px;
             }
 
@@ -191,7 +198,7 @@
                 height: 14px;
                 position: absolute;
                 right: 222px;
-                top: 187px;
+                top: 237px;
                 width: 14px;
             }
 
@@ -217,7 +224,7 @@
                 height: 15px;
                 position: absolute;
                 right: 135px;
-                top: 188px;
+                top: 238px;
                 width: 15px;
             }
         }
@@ -342,18 +349,6 @@
         }
 
         &__circle-1 {
-            @include mq(l) {
-                background-color: var(--ons-color-soft-blue-grey);
-                border-radius: 50%;
-                height: 440px;
-                position: absolute;
-                right: 59px;
-                top: -339px;
-                width: 440px;
-            }
-        }
-
-        &__circle-2 {
             background-color: var(--ons-color-light-orange);
             border-radius: 50%;
             bottom: 4%;
@@ -379,7 +374,7 @@
             }
         }
 
-        &__circle-3 {
+        &__circle-2 {
             background-color: var(--ons-color-ocean-blue);
             border-radius: 50%;
             bottom: 7%;

package/components/hero/_macro.njk

@@ -16,7 +16,7 @@
             </div>
         {% elif params.variants == 'pale-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">
-                {% for i in range(1, 4) %}
+                {% for i in range(1, 3) %}
                     <div class="ons-hero__circle-{{ i }}"></div>
                 {% endfor %}
             </div>

package/components/hero/_macro.spec.js

@@ -109,7 +109,7 @@ describe('macro: hero', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'grey', officialStatisticsBadge: true }));
 
         expect($('.ons-hero__badge').length).toBe(1);
-        expect($('.ons-hero__badge svg title').text().trim()).toBe('Official Statistics Badge');
+        expect($('.ons-hero__badge svg title').text().trim()).toBe('Official Statistics Badge - Accredited');
     });
 
     it('outputs the statistics badge as a link when officialStatisticsBadgeUrl is provided', () => {

package/components/hero/example-hero-dark-with-external-breadcrumbs.njk

@@ -0,0 +1,194 @@
+---
+title: 'Example: Table of contents on full page'
+layout: ~
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "variants": 'basic',
+            "menuLinks": {
+                "id": "menu-links",
+                "keyLinks": [
+                    {
+                        'heading': 'Taking part in a survey?',
+                        'description': 'It’s never been more important.'
+                    },
+                    {
+                        'heading': 'Release calendar',
+                        'description': 'View our latest and upcoming releases.'
+                    },
+                    {
+                        'heading': 'Explore local statistics',
+                        'url': '#0',
+                        'description': 'Explore statistics across the UK.'
+                    }
+                ],
+                "columns": [
+                    {
+                        "groups": [
+                            {
+                                "heading": "People, population and community",
+                                "groupItems": [
+                                    {
+                                        "text": "Armed forces community"
+                                    },
+                                    {
+                                        "text": "Births, deaths and marriages"
+                                    },
+                                    {
+                                        "text": "Crime and justice"
+                                    },
+                                    {
+                                        "text": "Cultural identity"
+                                    },
+                                    {
+                                        "text": "Education and childcare"
+                                    },
+                                    {
+                                        "text": "Elections"
+                                    },
+                                    {
+                                        "text": "Health and social care"
+                                    },
+                                    {
+                                        "text": "Household characteristics"
+                                    },
+                                    {
+                                        "text": "Housing"
+                                    },
+                                    {
+                                        "text": "Leisure and tourism"
+                                    },
+                                    {
+                                        "text": "Personal and household finances"
+                                    },
+                                    {
+                                        "text": "Population and migration"
+                                    },
+                                    {
+                                        "text": "Well-being"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Business, industry and trade",
+                                "groupItems": [
+                                    {
+                                        "text": "Business"
+                                    },
+                                    {
+                                        "text": "Changes to business"
+                                    },
+                                    {
+                                        "text": "Construction industry"
+                                    },
+                                    {
+                                        "text": "International trade"
+                                    },
+                                    {
+                                        "text": "IT and internet industry"
+                                    },
+                                    {
+                                        "text": "Manufacturing and production industry"
+                                    },
+                                    {
+                                        "text": "Retail industry",
+                                        "url": "#0"
+                                    },
+                                    {
+                                        "text": "Tourism industry"
+                                    }
+                                ]
+                            },
+                            {
+                                "heading": "Employment and labour market",
+                                "url": "#0",
+                                "groupItems":
+                                [
+                                    {
+                                        "text": "People in work"
+                                    },
+                                    {
+                                        "text": "People not in work"
+                                    }
+                                ]
+
+                            }
+                        ]
+                    },
+                    {
+                        "groups": [
+                            {
+                                "heading": "Economy",
+                                "groupItems": [
+                                    {
+                                        "text": "Economic output and productivity"
+                                    },
+                                    {
+                                        "text": "Government, public sector and taxes"
+                                    },
+                                    {
+                                        "text": "Gross Value Added (GVA)"
+                                    },
+                                    {
+                                        "text": "Investments, pensions and trusts"
+                                    },
+                                    {
+                                        "text": "Regional accounts"
+                                    },
+                                    {
+                                        "text": "Environmental accounts"
+                                    },
+                                    {
+                                        "text": "Gross Domestic Product (GDP)"
+                                    },
+                                    {
+                                        "text": "Inflation and price indices"
+                                    },
+                                    {
+                                        "text": "National accounts"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+%}
+{% block pageContent %}
+    {{
+        onsBreadcrumbs({
+            "ariaLabel": 'Breadcrumbs',
+            "variant": "dark",
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        })
+    }}
+    <main id="main-content">
+        {{
+            onsHero({
+                "title": 'Design and build digital services for the ONS',
+                "text": 'Everything you need to make accessible, consistent digital products',
+                "button": {
+                    "url": '#0',
+                    "text": 'Get started'
+                },
+                "variants": 'dark'
+            })
+        }}
+    </main>
+{% endblock %}

package/components/hero/example-hero-default-with-external-breadcrumbs.njk

@@ -0,0 +1,201 @@
+---
+title: 'Example: Table of contents on full page'
+layout: ~
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "variants": 'basic',
+            "menuLinks": {
+            "id": "menu-links",
+            "keyLinks": [
+                {
+                    'heading': 'Taking part in a survey?',
+                    'description': 'It’s never been more important.'
+                },
+                {
+                    'heading': 'Release calendar',
+                    'description': 'View our latest and upcoming releases.'
+                },
+                {
+                    'heading': 'Explore local statistics',
+                    'url': '#0',
+                    'description': 'Explore statistics across the UK.'
+                }
+            ],
+            "columns": [
+                {
+                    "groups": [
+                        {
+                            "heading": "People, population and community",
+                            "groupItems": [
+                                {
+                                    "text": "Armed forces community"
+                                },
+                                {
+                                    "text": "Births, deaths and marriages"
+                                },
+                                {
+                                    "text": "Crime and justice"
+                                },
+                                {
+                                    "text": "Cultural identity"
+                                },
+                                {
+                                    "text": "Education and childcare"
+                                },
+                                {
+                                    "text": "Elections"
+                                },
+                                {
+                                    "text": "Health and social care"
+                                },
+                                {
+                                    "text": "Household characteristics"
+                                },
+                                {
+                                    "text": "Housing"
+                                },
+                                {
+                                    "text": "Leisure and tourism"
+                                },
+                                {
+                                    "text": "Personal and household finances"
+                                },
+                                {
+                                    "text": "Population and migration"
+                                },
+                                {
+                                    "text": "Well-being"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Business, industry and trade",
+                            "groupItems": [
+                                {
+                                    "text": "Business"
+                                },
+                                {
+                                    "text": "Changes to business"
+                                },
+                                {
+                                    "text": "Construction industry"
+                                },
+                                {
+                                    "text": "International trade"
+                                },
+                                {
+                                    "text": "IT and internet industry"
+                                },
+                                {
+                                    "text": "Manufacturing and production industry"
+                                },
+                                {
+                                    "text": "Retail industry",
+                                    "url": "#0"
+                                },
+                                {
+                                    "text": "Tourism industry"
+                                }
+                            ]
+                        },
+                        {
+                            "heading": "Employment and labour market",
+                            "url": "#0",
+                            "groupItems":
+                            [
+                                {
+                                    "text": "People in work"
+                                },
+                                {
+                                    "text": "People not in work"
+                                }
+                            ]
+
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Economy",
+                            "groupItems": [
+                                {
+                                    "text": "Economic output and productivity"
+                                },
+                                {
+                                    "text": "Government, public sector and taxes"
+                                },
+                                {
+                                    "text": "Gross Value Added (GVA)"
+                                },
+                                {
+                                    "text": "Investments, pensions and trusts"
+                                },
+                                {
+                                    "text": "Regional accounts"
+                                },
+                                {
+                                    "text": "Environmental accounts"
+                                },
+                                {
+                                    "text": "Gross Domestic Product (GDP)"
+                                },
+                                {
+                                    "text": "Inflation and price indices"
+                                },
+                                {
+                                    "text": "National accounts"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+        }
+    }
+%}
+{% block pageContent %}
+    {{
+        onsBreadcrumbs({
+            "ariaLabel": 'Breadcrumbs',
+            "variant": "pale-blue",
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                },
+                {
+                    "url": '/',
+                    "text": 'Business, industry and trade'
+                },
+                {
+                    "url": '/',
+                    "text": 'Retail industry'
+                }
+            ]
+        })
+    }}
+    <main id="main-content">
+        {{
+            onsHero({
+                "title": 'Design and build digital services for the ONS',
+                "text": 'Everything you need to make accessible, consistent digital products',
+                "button": {
+                    "url": '#0',
+                    "text": 'Get started'
+                }
+            })
+        }}
+    </main>
+{% endblock %}