@ons/design-system 52.0.0 → 53.0.2

package/components/related-content/_macro.spec.js

@@ -6,9 +6,9 @@ import axe from '../../tests/helpers/axe';
 import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_RELATED_CONTENT_BODY = {
+const EXAMPLE_RELATED_CONTENT_GENERAL = {
   title: 'Related information',
-  body: 'Example body text...',
+  id: 'related-general-content',
 };
 
 const EXAMPLE_RELATED_CONTENT_LINKS = {
@@ -38,7 +38,7 @@ const EXAMPLE_RELATED_CONTENT_LINKS = {
 
 describe('macro: related-content', () => {
   describe.each([
-    ['content', EXAMPLE_RELATED_CONTENT_BODY],
+    ['general content', EXAMPLE_RELATED_CONTENT_GENERAL],
     ['list of links', EXAMPLE_RELATED_CONTENT_LINKS],
   ])('mode: %s', (_, params) => {
     it('passes jest-axe checks', async () => {
@@ -78,37 +78,28 @@ describe('macro: related-content', () => {
     });
   });
 
-  describe('mode: content', () => {
-    it('has provided body text', () => {
-      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_BODY));
+  describe('mode: general content', () => {
+    it('calls with content', () => {
+      const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
 
-      expect(
-        $('.ons-related-content__body .ons-related-content__body')
-          .text()
-          .trim(),
-      ).toBe('Example body text...');
-    });
-
-    it('has inner content when the macro is called', () => {
-      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_BODY, ['<strong>Content</strong>']));
-
-      expect($('.ons-related-content__body .ons-related-content__body').html()).toContain('<strong>Content</strong>');
+      const content = $('.ons-related-content__body')
+        .text()
+        .trim();
+      expect(content).toEqual(expect.stringContaining('Example content...'));
     });
   });
 
   describe('mode: list of links', () => {
-    it('has a title heading for each section of links', () => {
-      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
-
-      const values = mapAll($('.ons-related-content__title'), node => node.text().trim());
-      expect(values).toEqual(['Related articles', 'Related links']);
-    });
+    it('renders the expected output using the related-content/section macro', () => {
+      const faker = templateFaker();
+      const sectionSpy = faker.spy('related-content/section');
 
-    it('has the `id` attribute for each section heading', () => {
-      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
+      faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
 
-      const values = mapAll($('.ons-related-content__title'), node => node.attr('id'));
-      expect(values).toEqual(['related-articles', 'related-links']);
+      expect(sectionSpy.occurrences[0]).toHaveProperty('title', 'Related articles');
+      expect(sectionSpy.occurrences[0]).toHaveProperty('id', 'related-articles');
+      expect(sectionSpy.occurrences[1]).toHaveProperty('title', 'Related links');
+      expect(sectionSpy.occurrences[1]).toHaveProperty('id', 'related-links');
     });
 
     it('has the `aria-labelledby` attribute for each section of links', () => {

package/components/related-content/_section-macro.njk

@@ -0,0 +1,10 @@
+{% macro onsRelatedContentSection(params) %}
+  <div class="ons-related-content__section">
+    {% if params.title %}
+      <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" {% if params.id %}id="{{ params.id }}"{% endif %}>{{ params.title }}</h2>
+    {% endif %}
+    <div class="ons-related-content__content">
+      {{ caller() if caller }}
+    </div>
+  </div>
+{% endmacro %}

package/components/related-content/_section-macro.spec.js

@@ -0,0 +1,43 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATED_SECTION_CONTENT = {
+  title: 'Related information',
+  id: 'related-general-content',
+};
+
+describe('macro: related-content/section', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `title` text', () => {
+    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+    expect(
+      $('.ons-related-content__title')
+        .text()
+        .trim(),
+    ).toEqual('Related information');
+  });
+
+  it('has the `id` attribute for the title', () => {
+    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+    expect($('#related-general-content').length).toBe(1);
+  });
+
+  it('has the provided content', () => {
+    const $ = cheerio.load(renderComponent('related-content/section', { EXAMPLE_RELATED_SECTION_CONTENT }, 'Example content...'));
+
+    const content = $('.ons-related-content__content')
+      .text()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
+  });
+});

package/components/share-page/_macro.njk

@@ -1,8 +1,10 @@
 {% macro onsSharePage(params) %}
     {% from "components/lists/_macro.njk" import onsList %}
 
-    {% set titleTag = params.titleTag | default("h2") %}
-    <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
+    {% if params.title %}
+        {% set titleTag = params.titleTag | default("h2") %}
+        <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
+    {% endif %}
 
     {% set list = [] %}
     {% if params.facebook is defined and params.facebook and params.facebook == true %}