@ons/design-system 51.0.0 → 53.0.1

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,69 +54,10 @@
         color: $color-text-inverse-link-hover;
         text-decoration-thickness: 2px;
       }
-    }
-  }
-
-  @include mq(m) {
-    .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,33 +14,22 @@
     {% 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 %}
+{# Set number of columns used for hero content after medium breakpoint #}
+{% set detailsColumns = params.detailsColumns | default ('8') %}
 
-{# if hero style is a dark theme, change theme #}
-{% if params.censusThemeDark is defined and params.censusThemeDark %}
-    {% set detailsClasses = " ons-hero__details--ondark" %}
-{% endif %}
-
-<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 %}
+                {% if params.title is defined and params.title %}
                     <h1 class="ons-hero__title ons-u-fs-xxxl">{{ params.title }}</h1>
-                {% else %}
-                    <h1 class="ons-hero__title">{{ params.title }}</h1>
                 {% endif %}
                 {% if params.subtitle is defined and params.subtitle %}
                     <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
@@ -53,9 +42,13 @@
 
             {% if params.button is defined and params.button %}
                 {% from "components/button/_macro.njk" import onsButton %}
+                {% set btnClasses = params.button.classes if params.button.classes is defined and params.button.classes else '' %}
+                {% if skinName == 'dark' %}
+                    {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
+                {% endif %}
                 {{
                     onsButton({
-                        "classes": params.button.classes if params.button.classes is defined and params.button.classes else '',
+                        "classes": btnClasses,
                         "type": 'button',
                         "text": params.button.text,
                         "url": params.button.url
@@ -85,7 +78,7 @@
             {% 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">
@@ -101,7 +94,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

@@ -12,13 +12,13 @@ const EXAMPLE_HERO_MINIMAL = {
   suffixText: 'Hero suffix text',
 };
 
-const EXAMPLE_HERO_CENSUS_THEME = {
-  censusTheme: true,
+const EXAMPLE_HERO_CENSUS_VARIANT = {
+  variants: 'census',
   ...EXAMPLE_HERO_MINIMAL,
 };
 
-const EXAMPLE_HERO_CENSUS_THEME_WITH_IMAGE = {
-  ...EXAMPLE_HERO_CENSUS_THEME,
+const EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE = {
+  ...EXAMPLE_HERO_CENSUS_VARIANT,
   image: {
     smallSrc: 'example-small.png',
     largeSrc: 'example-large.png',
@@ -57,8 +57,8 @@ const EXAMPLE_HERO_WITH_COLLAPSIBLE = {
 describe('macro: hero', () => {
   describe.each([
     ['with text', EXAMPLE_HERO_MINIMAL],
-    ['with census theme', EXAMPLE_HERO_CENSUS_THEME],
-    ['with census theme and image', EXAMPLE_HERO_CENSUS_THEME_WITH_IMAGE],
+    ['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],
@@ -70,6 +70,17 @@ describe('macro: hero', () => {
       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));
 
@@ -112,33 +123,16 @@ describe('macro: hero', () => {
     });
   });
 
-  describe('mode: with census theme', () => {
-    it('has the correct theme class', () => {
-      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_THEME));
-      expect($('.ons-hero').hasClass('ons-hero--census')).toBe(true);
-    });
-
-    it('has the correct grid column class', () => {
-      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_THEME));
-      expect($('.ons-hero__details').hasClass('ons-col-6@m')).toBe(true);
-    });
-
-    it('has the correct title sizing class', () => {
-      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_THEME));
-      expect($('.ons-hero__title').hasClass('ons-u-fs-xxxl')).toBe(true);
-    });
-  });
-
-  describe('mode: with census theme and image', () => {
+  describe('mode: with census variant and image', () => {
     it('has expected `srcset` attribute', () => {
-      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_THEME_WITH_IMAGE));
+      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_THEME_WITH_IMAGE));
+      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');
@@ -148,7 +142,7 @@ describe('macro: hero', () => {
       const faker = templateFaker();
       const iconsSpy = faker.spy('icons');
 
-      faker.renderComponent('hero', EXAMPLE_HERO_CENSUS_THEME_WITH_IMAGE);
+      faker.renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE);
 
       expect(iconsSpy.occurrences[0].iconType).toBe('circle-lined');
     });
@@ -164,6 +158,15 @@ describe('macro: hero', () => {
       expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
       expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
     });
+
+    it('outputs the correct button class with `dark` theme', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('hero', { ...EXAMPLE_HERO_WITH_BUTTON, variants: 'dark' });
+
+      expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+    });
   });
 
   describe('mode: with pre-title image', () => {
@@ -174,10 +177,10 @@ describe('macro: hero', () => {
       expect(src).toBe('/img/example--light.svg');
     });
 
-    it('has expected `src` attribute with `censusThemeDark`', () => {
+    it('has expected `src` attribute with dark variant', () => {
       const $ = cheerio.load(
         renderComponent('hero', {
-          censusThemeDark: true,
+          variants: 'dark',
           ...EXAMPLE_HERO_WITH_PRETITLE_IMAGE,
         }),
       );