@ons/design-system 59.0.0 → 60.0.0

package/components/hero/_macro.njk

@@ -1,106 +1,49 @@
 {% macro onsHero(params) %}
 
-{% from "components/icons/_macro.njk" import onsIcon %}
+    {# Set number of columns used for hero content after medium breakpoint #}
+    {% set detailsColumns = params.detailsColumns | default ('8') %}
 
-{# style adjustments if dark or light skin #}
-{% if params.variants and 'dark' in params.variants %}
-    {% set skinName = "dark" %}
-{% else %}
-    {% set skinName = "light" %}
-{% endif %}
+    <section class="ons-hero ons-grid--gutterless{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-hero--{{ variant }}{% endfor %}{% else %} ons-hero--{{ params.variants }}{% endif %}{% endif %}">
 
-{# If hero contains a collapsible, style it differently #}
-{% if params.collapsible %}
-    {% set containerClasses = " ons-hero__container--has-collapsible" %}
-{% endif %}
+        <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
 
-{# Set number of columns used for hero content after medium breakpoint #}
-{% set detailsColumns = params.detailsColumns | default ('8') %}
+            <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
+                <header>
+                    {% if params.title %}
+                        <h1 class="ons-hero__title ons-u-fs-xxxl">{{ params.title }}</h1>
+                    {% endif %}
+                    {% if params.subtitle %}
+                        <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
+                    {% endif %}
+                </header>
 
-<section class="ons-hero ons-grid--gutterless{% if 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 ons-col-10@s@m">
-
-            <header>
-                {% if params.preTitleImage %}
-                    {% set preTitleImageWithModifier = params.preTitleImage.name ~ "--" ~ skinName ~ ".svg" %}
-                    <img class="ons-hero__pre-title" src="{{ params.placeholderURL }}/img/{{ preTitleImageWithModifier }}" alt="{{ params.preTitleImage.alt }}">
+                {% if params.text %}
+                    <p class="ons-hero__text">{{ params.text | safe }}</p>
                 {% endif %}
-                {% if params.title %}
-                    <h1 class="ons-hero__title ons-u-fs-xxxl">{{ params.title }}</h1>
-                {% endif %}
-                {% if params.subtitle %}
-                    <h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
-                {% endif %}
-            </header>
 
-            {% if params.text %}
-                <p class="ons-hero__text">{{ params.text | safe }}</p>
-            {% endif %}
-
-            {% if params.button %}
-                {% from "components/button/_macro.njk" import onsButton %}
-                {% set btnClasses = params.button.classes if params.button.classes else '' %}
-                {% if skinName == 'dark' %}
-                    {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
+                {% if params.button %}
+                    {% from "components/button/_macro.njk" import onsButton %}
+                    {% set btnClasses = params.button.classes if params.button.classes else '' %}
+                    {% if params.variants and 'dark' in params.variants %}
+                        {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
+                    {% endif %}
+                    {{
+                        onsButton({
+                            "classes": btnClasses,
+                            "type": 'button',
+                            "text": params.button.text,
+                            "url": params.button.url
+                        })
+                    }}
                 {% endif %}
-                {{
-                    onsButton({
-                        "classes": btnClasses,
-                        "type": 'button',
-                        "text": params.button.text,
-                        "url": params.button.url
-                    })
-                }}
-            {% endif %}
-
-            {% if params.collapsible %}
-                {% from "components/collapsible/_macro.njk" import onsCollapsible %}
-                {{
-                    onsCollapsible({
-                        "classes": 'ons-u-mb-s ' + params.collapsible.classes,
-                        "id": params.collapsible.id,
-                        "title": params.collapsible.title,
-                        "titleTag": params.collapsible.titleTag,
-                        "content": params.collapsible.content,
-                        "button": {
-                            "close": params.collapsible.closeButtonText | default('Hide this'),
-                            "contextSuffix": params.collapsible.closeButtonContextSuffix | default('content')
-                        }
-                    })
-                }}
-            {% endif %}
-
-            {% if params.suffixText %}
-                <p class="ons-hero__suffixText ons-u-fs-s ons-u-mt-m ons-u-mb-no">{{ params.suffixText | safe }}</p>
-            {% endif %}
-
-        </div>
-        {% if params.variants and 'census' in params.variants %}
-
-            {% if params.image %}
-            <div class="ons-hero__circle-image">
-                <img height="558" width="558" {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" {% endif %}src="{{ params.image.smallSrc }}" alt="">
             </div>
-            {% endif %}
 
-            {{
-                onsIcon({
-                    "iconType": 'circle-lined'
-                })
-            }}
-
-            <div class="ons-hero__circle-gradient"></div>
-
-            {% if (params.variants and 'census' in params.variants) and ('dark' not in params.variants) %}
-                <div class="ons-hero__circle"></div>
+            {% if caller %}
+                <div class="ons-hero__additional">
+                    {{- caller() -}}
+                </div>
             {% endif %}
+        </div>
 
-        {% endif %}
-
-    </div>
-
-</section>
+    </section>
 {% endmacro %}

package/components/hero/_macro.spec.js

@@ -5,223 +5,87 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_HERO_MINIMAL = {
+const EXAMPLE_HERO = {
   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',
-    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);
-    });
-  });
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-  describe('mode: with census variant and image', () => {
-    it('has expected `srcset` attribute', () => {
-      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE));
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
 
-      const srcset = $('.ons-hero__circle-image img').attr('srcset');
-      expect(srcset).toBe('example-small.png 1x, example-large.png 2x');
-    });
+  it('has provided variant style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('hero', {
+        variants: ['variant-a', 'variant-b'],
+      }),
+    );
 
-    it('has expected `src` attribute', () => {
-      const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE));
+    expect($('.ons-hero--variant-a').length).toBe(1);
+    expect($('.ons-hero--variant-b').length).toBe(1);
+  });
 
-      const src = $('.ons-hero__circle-image img').attr('src');
-      expect(src).toBe('example-small.png');
-    });
+  it('has expected `title`', () => {
+    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    it('has a "circle-lined" icon', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+    const title = $('.ons-hero__title')
+      .html()
+      .trim();
+    expect(title).toBe('Hero title');
+  });
 
-      faker.renderComponent('hero', EXAMPLE_HERO_CENSUS_VARIANT_WITH_IMAGE);
+  it('has expected `subtitle`', () => {
+    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-      expect(iconsSpy.occurrences[0].iconType).toBe('circle-lined');
-    });
+    const title = $('.ons-hero__subtitle')
+      .html()
+      .trim();
+    expect(title).toBe('Hero subtitle');
   });
 
-  describe('mode: with button', () => {
-    it('outputs the expected button', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+  it('has expected `text`', () => {
+    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-      faker.renderComponent('hero', EXAMPLE_HERO_WITH_BUTTON);
-
-      expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
-      expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
-    });
+    const title = $('.ons-hero__text')
+      .html()
+      .trim();
+    expect(title).toBe('Hero text');
+  });
 
-    it('outputs the correct button class with `dark` theme', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+  it('outputs the expected button', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
 
-      faker.renderComponent('hero', { ...EXAMPLE_HERO_WITH_BUTTON, variants: 'dark' });
+    faker.renderComponent('hero', EXAMPLE_HERO);
 
-      expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
-    });
+    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');
-    });
-  });
+  it('outputs the correct button class with `dark` variant', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
 
-  describe('mode: with collapsible', () => {
-    it('outputs the expected collapsible', () => {
-      const faker = templateFaker();
-      const collapsibleSpy = faker.spy('collapsible');
+    faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
+
+    expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+  });
 
-      faker.renderComponent('hero', EXAMPLE_HERO_WITH_COLLAPSIBLE);
+  it('calls with content', () => {
+    const $ = cheerio.load(renderComponent('hero', { EXAMPLE_HERO }, 'Example content...'));
 
-      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');
-    });
+    const content = $('.ons-hero__additional')
+      .text()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 });