@ons/design-system 50.0.1 → 53.0.0

package/components/hero/_hero.scss

@@ -1,100 +1,49 @@
 // Default
 .ons-hero {
   background-color: $color-banner-bg;
-  padding: 2rem 0;
-
-  &__content {
-    height: 100%;
-  }
-}
-
-.ons-hero__pre-title {
-  margin-bottom: 0.5rem;
-
-  @include mq(xxs, m) {
-    max-width: 145px;
-  }
-}
-
-.ons-hero__title {
-  font-size: 2.3rem;
-  line-height: 1.2;
-}
-
-// Census theme
-.ons-hero--census {
-  background-image: linear-gradient(46deg, $color-branded-tertiary 0%, $color-branded 100%);
   display: flex;
-  margin-bottom: 2px;
-  margin-top: 2px;
   overflow: hidden;
   padding: 0;
   position: relative;
-  .ons-hero__container {
-    align-items: flex-end;
+
+  &__container {
+    align-items: center;
     display: flex;
-    min-height: 400px;
+    min-height: 300px;
     position: relative;
-  }
-  .ons-hero__circle-image,
-  .ons-hero__circle-gradient,
-  .ons-hero__circle-lined,
-  .ons-hero__circle {
-    position: absolute;
-  }
-  .ons-hero__circle-image {
-    background-color: $color-white;
-    border-radius: 50%;
-    height: 300px;
-    right: -4px;
-    top: -98px;
-    width: 300px;
-    z-index: 2;
 
-    img {
-      border-radius: 50%;
-      display: block;
-      height: 100%;
+    &--has-collapsible {
+      align-items: flex-start; // Prevents undesired shift if not enough content
     }
   }
-  .ons-hero__circle-gradient {
-    background-image: linear-gradient(-45deg, $color-branded 0%, $color-branded 20%, $color-branded-tertiary 60%, #005489 90%);
-    border-radius: 50%;
-    display: block;
-    height: 182px;
-    right: -91px; // Half width of circle
-    top: 0.7rem;
-    width: 182px;
-    z-index: 3;
+
+  &__content {
+    height: 100%;
   }
-  .ons-hero__circle {
-    background-color: $color-white;
-    border-radius: 50%;
-    display: block;
-    height: 990px;
-    left: 50%;
-    margin-left: -495px; // Half of circle
-    top: 27px;
-    width: 990px;
-    z-index: 1;
+
+  &__pre-title {
+    margin-bottom: 0.5rem;
+
+    @include mq(xxs, m) {
+      max-width: 145px;
+    }
   }
-  .ons-hero__circle-lined {
-    fill: $color-white;
-    height: 133px;
-    opacity: 0.4;
-    right: -24px;
-    top: 114px;
-    width: 133px;
-    z-index: 4;
+
+  &__title {
+    font-size: 2.3rem;
+    line-height: 1.2;
   }
-  .ons-hero__details {
-    padding-bottom: 1rem;
-    padding-top: 218px;
+
+  &__details {
+    padding-bottom: 3rem;
+    padding-top: 2rem;
     position: relative;
     z-index: 5;
+  }
 
-    &--ondark {
-      color: $color-text-inverse;
+  &--dark & {
+    &__details {
+      color: $color-text-inverse !important;
 
       a {
         color: inherit;
@@ -105,72 +54,10 @@
         color: $color-text-inverse-link-hover;
         text-decoration-thickness: 2px;
       }
-    }
-  }
-
-  @include mq(m) {
-    .ons-hero__title {
-      font-size: 3rem;
-    }
-    .ons-hero__details {
-      padding-top: 2rem;
-    }
-    .ons-hero__circle-image {
-      height: 382px;
-      right: -8px;
-      top: -117px;
-      width: 382px;
-    }
-    .ons-hero__circle-gradient {
-      height: 234px;
-      right: -117px; // Half width of circle
-      top: 1rem;
-      width: 234px;
-    }
-    .ons-hero__circle {
-      left: -331px;
-      margin: auto; // Reset
-      top: -288px;
-    }
-    .ons-hero__circle-lined {
-      height: 171px;
-      right: -24px;
-      top: 148px;
-      width: 171px;
-    }
-    .ons-hero__container {
-      align-items: center;
 
-      &--has-collapsible {
-        align-items: flex-start; // Prevents undesired shift if not enough content
+      .ons-collapsible__heading {
+        color: inherit;
       }
     }
   }
-
-  @include mq(l) {
-    .ons-hero__details {
-      padding-right: 2.5rem;
-    }
-    .ons-hero__circle-image {
-      height: 558px;
-      margin: auto;
-      right: 0;
-      top: -176px;
-      width: 558px;
-    }
-    .ons-hero__circle-gradient {
-      height: 342px;
-      right: -171px; // Half width of circle
-      width: 342px;
-    }
-    .ons-hero__circle {
-      top: -369px;
-    }
-    .ons-hero__circle-lined {
-      height: 243px;
-      right: 0;
-      top: 292px; // Reset
-      width: 243px;
-    }
-  }
 }

package/components/hero/_macro.njk

@@ -3,7 +3,7 @@
 {% from "components/icons/_macro.njk" import onsIcon %}
 
 {# style adjustments if dark or light skin #}
-{% if params.censusThemeDark is defined and params.censusThemeDark %}
+{% if params.variants is defined and 'dark' in params.variants %}
     {% set skinName = "dark" %}
 {% else %}
     {% set skinName = "light" %}
@@ -14,36 +14,25 @@
     {% set containerClasses = " ons-hero__container--has-collapsible" %}
 {% endif %}
 
-{# if hero is census-specific or using wide container, change column usage #}
-{% if params.censusTheme is defined and params.censusTheme or params.wide is defined and params.wide %}
-    {% set detailsColumns = "6" %}
-{% else %}
-    {% set detailsColumns = "8" %}
-{% endif %}
-
-{# if hero style is a dark theme, change theme #}
-{% if params.censusThemeDark is defined and params.censusThemeDark %}
-    {% set detailsClasses = " ons-hero__details--ondark" %}
-{% endif %}
+{# Set number of columns used for hero content after medium breakpoint #}
+{% set detailsColumns = params.detailsColumns | default ('8') %}
 
-<section class="ons-hero ons-grid--gutterless{% if params.censusTheme is defined and params.censusTheme %} ons-hero--census{% endif %}">
+<section class="ons-hero ons-grid--gutterless{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-hero--{{ variant }}{% endfor %}{% else %} ons-hero--{{ params.variants }}{% endif %}{% endif %}">
 
     <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}{{ containerClasses }}">
 
-        <div class="ons-hero__details{{ detailsClasses }} ons-grid__col ons-col-{{ detailsColumns }}@m">
+        <div class="ons-hero__details{{ detailsClasses }} ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
 
             <header>
                 {% if params.preTitleImage is defined and params.preTitleImage %}
                     {% set preTitleImageWithModifier = params.preTitleImage.name|replace(r/(\.[^\.]+)$/, "--" + skinName + "$1") %}
                     <img class="ons-hero__pre-title" src="{{ params.placeholderURL }}/img/{{ preTitleImageWithModifier }}" alt="{{ params.preTitleImage.alt }}">
                 {% endif %}
-                {% if params.censusTheme is defined and params.censusTheme %}
-                    <h1 class="ons-u-fs-xxxl">{{ params.title }}</h1>
-                {% else %}
-                    <h1 class="ons-hero__title">{{ params.title }}</h1>
+                {% if params.title is defined and params.title %}
+                    <h1 class="ons-hero__title ons-u-fs-xxxl">{{ params.title }}</h1>
                 {% endif %}
                 {% if params.subtitle is defined and params.subtitle %}
-                    <h2 class="ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                    <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
                 {% endif %}
             </header>
 
@@ -55,7 +44,7 @@
                 {% from "components/button/_macro.njk" import onsButton %}
                 {{
                     onsButton({
-                        "classes": params.button.classes,
+                        "classes": params.button.classes if params.button.classes is defined and params.button.classes else '',
                         "type": 'button',
                         "text": params.button.text,
                         "url": params.button.url
@@ -85,11 +74,11 @@
             {% endif %}
 
         </div>
-        {% if params.censusTheme is defined and params.censusTheme %}
+        {% if params.variants is defined and 'census' in params.variants %}
 
             {% if params.image is defined and params.image %}
             <div class="ons-hero__circle-image">
-                <img height="558" width="558" srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="">
+                <img height="558" width="558" {% if params.image.largeSrc is defined and params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" {% endif %}src="{{ params.image.smallSrc }}" alt="">
             </div>
             {% endif %}
 
@@ -101,7 +90,7 @@
 
             <div class="ons-hero__circle-gradient"></div>
 
-            {% if params.censusThemeDark is not defined or params.censusThemeDark == false %}
+            {% if (params.variants is defined and 'census' in params.variants) and ('dark' not in params.variants) %}
                 <div class="ons-hero__circle"></div>
             {% endif %}
 

package/components/hero/_macro.spec.js

@@ -0,0 +1,218 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_HERO_MINIMAL = {
+  title: 'Hero title',
+  subtitle: 'Hero subtitle',
+  text: 'Hero text',
+  suffixText: 'Hero suffix text',
+};
+
+const EXAMPLE_HERO_CENSUS_VARIANT = {
+  variants: 'census',
+  ...EXAMPLE_HERO_MINIMAL,
+};
+
+const EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE = {
+  ...EXAMPLE_HERO_CENSUS_VARIANT,
+  image: {
+    smallSrc: 'example-small.png',
+    largeSrc: 'example-large.png',
+  },
+};
+
+const EXAMPLE_HERO_WITH_BUTTON = {
+  ...EXAMPLE_HERO_MINIMAL,
+  button: {
+    url: '#0',
+    text: 'Get started',
+  },
+};
+
+const EXAMPLE_HERO_WITH_PRETITLE_IMAGE = {
+  ...EXAMPLE_HERO_MINIMAL,
+  preTitleImage: {
+    name: 'example.svg',
+    alt: 'svg alt text',
+  },
+};
+
+const EXAMPLE_HERO_WITH_COLLAPSIBLE = {
+  ...EXAMPLE_HERO_MINIMAL,
+  collapsible: {
+    classes: 'ons-u-mt-s',
+    id: 'collapsible',
+    title: 'Collapsible title',
+    titleTag: 'h2',
+    content: 'Collapsible content',
+    closeButtonText: 'Hide this',
+    closeButtonContextSuffix: 'content',
+  },
+};
+
+describe('macro: hero', () => {
+  describe.each([
+    ['with text', EXAMPLE_HERO_MINIMAL],
+    ['with census variant', EXAMPLE_HERO_CENSUS_VARIANT],
+    ['with census variants and image', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE],
+    ['with button', EXAMPLE_HERO_WITH_BUTTON],
+    ['with pre-title image', EXAMPLE_HERO_WITH_PRETITLE_IMAGE],
+    ['with collapsible', EXAMPLE_HERO_WITH_COLLAPSIBLE],
+  ])('mode: %s', (_, params) => {
+    it('passes jest-axe checks with', async () => {
+      const $ = cheerio.load(renderComponent('hero', params));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has provided variant style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('hero', {
+          variants: ['variant-a', 'variant-b'],
+        }),
+      );
+
+      expect($('.ons-hero--variant-a').length).toBe(1);
+      expect($('.ons-hero--variant-b').length).toBe(1);
+    });
+
+    it('has expected `title`', () => {
+      const $ = cheerio.load(renderComponent('hero', params));
+
+      const title = $('.ons-hero__title')
+        .html()
+        .trim();
+      expect(title).toBe('Hero title');
+    });
+
+    it('has expected `subtitle`', () => {
+      const $ = cheerio.load(renderComponent('hero', params));
+
+      const title = $('.ons-hero__subtitle')
+        .html()
+        .trim();
+      expect(title).toBe('Hero subtitle');
+    });
+
+    it('has expected `text`', () => {
+      const $ = cheerio.load(renderComponent('hero', params));
+
+      const title = $('.ons-hero__text')
+        .html()
+        .trim();
+      expect(title).toBe('Hero text');
+    });
+
+    it('has expected `suffixText`', () => {
+      const $ = cheerio.load(renderComponent('hero', params));
+
+      const title = $('.ons-hero__suffixText')
+        .html()
+        .trim();
+      expect(title).toBe('Hero suffix text');
+    });
+
+    it('has expected class if `wide`', () => {
+      const $ = cheerio.load(renderComponent('hero', { wide: true, ...params }));
+      expect($('.ons-hero__container').hasClass('ons-container--wide')).toBe(true);
+    });
+  });
+
+  describe('mode: with census variant and image', () => {
+    it('has expected `srcset` attribute', () => {
+      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE));
+
+      const srcset = $('.ons-hero__circle-image img').attr('srcset');
+      expect(srcset).toBe('example-small.png 1x, example-large.png 2x');
+    });
+
+    it('has expected `src` attribute', () => {
+      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE));
+
+      const src = $('.ons-hero__circle-image img').attr('src');
+      expect(src).toBe('example-small.png');
+    });
+
+    it('has a "circle-lined" icon', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE);
+
+      expect(iconsSpy.occurrences[0].iconType).toBe('circle-lined');
+    });
+  });
+
+  describe('mode: with button', () => {
+    it('outputs the expected button', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('hero', EXAMPLE_HERO_WITH_BUTTON);
+
+      expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
+      expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
+    });
+  });
+
+  describe('mode: with pre-title image', () => {
+    it('has expected `src` attribute', () => {
+      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_WITH_PRETITLE_IMAGE));
+
+      const src = $('.ons-hero__pre-title').attr('src');
+      expect(src).toBe('/img/example--light.svg');
+    });
+
+    it('has expected `src` attribute with dark variant', () => {
+      const $ = cheerio.load(
+        renderComponent('hero', {
+          variants: 'dark',
+          ...EXAMPLE_HERO_WITH_PRETITLE_IMAGE,
+        }),
+      );
+
+      const src = $('.ons-hero__pre-title').attr('src');
+      expect(src).toBe('/img/example--dark.svg');
+    });
+
+    it('has expected `alt` attribute', () => {
+      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_WITH_PRETITLE_IMAGE));
+
+      const alt = $('.ons-hero__pre-title').attr('alt');
+      expect(alt).toBe('svg alt text');
+    });
+
+    it('has provided `placeholderURL`', () => {
+      const $ = cheerio.load(
+        renderComponent('hero', {
+          placeholderURL: '/some-path',
+          ...EXAMPLE_HERO_WITH_PRETITLE_IMAGE,
+        }),
+      );
+
+      const src = $('.ons-hero__pre-title').attr('src');
+      expect(src).toBe('/some-path/img/example--light.svg');
+    });
+  });
+
+  describe('mode: with collapsible', () => {
+    it('outputs the expected collapsible', () => {
+      const faker = templateFaker();
+      const collapsibleSpy = faker.spy('collapsible');
+
+      faker.renderComponent('hero', EXAMPLE_HERO_WITH_COLLAPSIBLE);
+
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-s ons-u-mt-s');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('id', 'collapsible');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('title', 'Collapsible title');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('titleTag', 'h2');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('button.close', 'Hide this');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('button.contextSuffix', 'content');
+    });
+  });
+});