@ons/design-system 74.0.0-next.4 → 74.0.0-next.5

package/components/hero/_macro.njk

@@ -21,7 +21,9 @@
                 {% endfor %}
             </div>
         {% endif %}
-        <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
+        <div
+            class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}{{ ' ons-container--full-width' if params.fullWidth }}"
+        >
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
                 <div class="ons-hero__content">
                     <div class="ons-hero__title-container">
@@ -44,7 +46,6 @@
                         {% elif params.richText %}
                             <div class="ons-hero__richtext">{{ params.richText | safe }}</div>
                         {% endif %}
-
                     </div>
 
                     {% if params.variants == "grey" and params.officialStatisticsBadge == true %}

package/components/hero/_macro.spec.js

@@ -34,6 +34,42 @@ describe('macro: hero', () => {
         expect($('.ons-hero--variant-b').length).toBe(1);
     });
 
+    it('has the `ons-container--wide` class on the container when `wide` is true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, wide: true }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('does not have the `ons-container--wide` class on the container when `wide` is false', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, wide: false }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(false);
+    });
+
+    it('does not have the `ons-container--wide` class on the container when `wide` is not set', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+
+        expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(false);
+    });
+
+    it('has the `ons-container--full-width` class on the container when `fullWidth` is true', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, fullWidth: true }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--full-width')).toBe(true);
+    });
+
+    it('does not have the `ons-container--full-width` class on the container when `fullWidth` is false', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, fullWidth: false }));
+
+        expect($('.ons-hero__container').hasClass('ons-container--full-width')).toBe(false);
+    });
+
+    it('does not have the `ons-container--full-width` class on the container when `fullWidth` is not set', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+
+        expect($('.ons-hero__container').hasClass('ons-container--full-width')).toBe(false);
+    });
+
     it('has expected `title`', () => {
         const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 

package/components/hero/example-hero-dark-wide.njk

@@ -0,0 +1,17 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    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',
+        "wide": true
+    })
+}}

package/components/hero/example-hero-default-full-width.njk

@@ -0,0 +1,16 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    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'
+        },
+        "fullWidth": true
+    })
+}}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "74.0.0-next.4",
+    "version": "74.0.0-next.5",
     "main": "index.js",
     "license": "MIT",
     "author": {