diff --git a/src/components/accordion/_macro.spec.js b/src/components/accordion/_macro.spec.js
index 024722b6ea..432d9a9b2d 100644
--- a/src/components/accordion/_macro.spec.js
+++ b/src/components/accordion/_macro.spec.js
@@ -4,64 +4,82 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
- id: 'accordion-identifier',
- itemsList: [
- {
- title: 'Title for item 1',
- content: 'Content for item 1',
- },
- {
- title: 'Title for item 2',
- content: 'Content for item 2',
- },
- ],
-};
-
-const EXAMPLE_ACCORDION = {
- ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
- allButton: {
- open: 'Open label',
- close: 'Close label',
- },
-};
-
-describe('macro: accordion', () => {
- it('passes jest-axe checks', async () => {
- const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
-
- const results = await axe($.html());
- expect(results).toHaveNoViolations();
+import { EXAMPLE_ACCORDION } from './_test_examples';
+
+describe('FOR: Macro: Accordion', () => {
+ describe('GIVEN: Params: required', () => {
+ describe('WHEN: all required params are provided', () => {
+ const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+ test('THEN: jest-axe checks pass', async () => {
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
+ });
});
-
- it('has the provided `id` attribute', () => {
- const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
- expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+ describe('GIVEN: Params: required and allButton', () => {
+ describe('WHEN: required and allButton params are provided', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ ...EXAMPLE_ACCORDION,
+ allButton: {
+ open: 'Open label',
+ close: 'Close label',
+ },
+ }),
+ );
+ test('THEN: jest-axe checks pass', async () => {
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
+ });
});
-
- it('has additionally provided style classes', () => {
- const $ = cheerio.load(
- renderComponent('accordion', {
- ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
- classes: 'extra-class another-extra-class',
- }),
- );
-
- expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
- expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+ describe('GIVEN: Params: id', () => {
+ describe('WHEN: id is provided', () => {
+ const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+ test('THEN: renders with provided id', () => {
+ expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
+ });
+ });
});
-
- describe('item', () => {
- it('has provided title text', () => {
- const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
- const titleText = $('.ons-details__title').first().text().trim();
- expect(titleText).toBe('Title for item 1');
+ describe('GIVEN: Params: classes', () => {
+ describe('WHEN: additional style classes are provided', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ ...EXAMPLE_ACCORDION,
+ classes: 'extra-class another-extra-class',
+ }),
+ );
+ test('THEN: renders with provided classes', () => {
+ expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+ expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
+ });
});
-
- it('has title with provided tag override', () => {
+ });
+ describe('GIVEN: Params: itemsList: AccordionItem', () => {
+ describe('WHEN: title is provided', () => {
+ const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+ test('THEN: renders title with provided text', () => {
+ const titleText = $('.ons-details__title').first().text().trim();
+ expect(titleText).toBe('Title for item 1');
+ });
+ });
+ describe('WHEN: titleTag is not provided', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ itemsList: [
+ {
+ title: 'Title for item 1',
+ content: 'Content for item 1',
+ },
+ ],
+ }),
+ );
+ test('THEN: item title renders with default heading tag', () => {
+ const titleTag = $('.ons-details__title')[0].tagName;
+ expect(titleTag).toBe('h2');
+ });
+ });
+ describe('WHEN: titleTag is provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
@@ -73,19 +91,19 @@ describe('macro: accordion', () => {
],
}),
);
-
- const titleTag = $('.ons-details__title')[0].tagName;
- expect(titleTag).toBe('h5');
+ test('THEN: item title renders with provided heading tag', () => {
+ const titleTag = $('.ons-details__title')[0].tagName;
+ expect(titleTag).toBe('h5');
+ });
});
-
- it('has provided content text', () => {
- const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
- const titleText = $('.ons-details__content').first().text().trim();
- expect(titleText).toBe('Content for item 1');
+ describe('WHEN: content is provided', () => {
+ const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
+ test('THEN: item content renders with provided text', () => {
+ const titleText = $('.ons-details__content').first().text().trim();
+ expect(titleText).toBe('Content for item 1');
+ });
});
-
- it('has additionally provided `attributes`', () => {
+ describe('WHEN: attributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
@@ -99,12 +117,12 @@ describe('macro: accordion', () => {
],
}),
);
-
- expect($('.ons-details').attr('a')).toBe('123');
- expect($('.ons-details').attr('b')).toBe('456');
+ test('THEN: item renders with provided HTML attributes', () => {
+ expect($('.ons-details').attr('a')).toBe('123');
+ expect($('.ons-details').attr('b')).toBe('456');
+ });
});
-
- it('has additionally provided `headingAttributes`', () => {
+ describe('WHEN: headingAttributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
@@ -118,12 +136,12 @@ describe('macro: accordion', () => {
],
}),
);
-
- expect($('.ons-details__heading').attr('a')).toBe('123');
- expect($('.ons-details__heading').attr('b')).toBe('456');
+ test('THEN: item header renders with provided HTML attributes', () => {
+ expect($('.ons-details__heading').attr('a')).toBe('123');
+ expect($('.ons-details__heading').attr('b')).toBe('456');
+ });
});
-
- it('has additionally provided `contentAttributes`', () => {
+ describe('WHEN: contentAttributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
itemsList: [
@@ -138,31 +156,37 @@ describe('macro: accordion', () => {
],
}),
);
-
- expect($('.ons-details__content').attr('a')).toBe('123');
- expect($('.ons-details__content').attr('b')).toBe('456');
+ test('THEN: item content renders with provided HTML attributes', () => {
+ expect($('.ons-details__content').attr('a')).toBe('123');
+ expect($('.ons-details__content').attr('b')).toBe('456');
+ });
});
});
-
- describe('toggle all button', () => {
- it('outputs a button with the expected class', () => {
+ describe('GIVEN: Params: allButton: AccordionButton', () => {
+ describe('WHEN: required open/close params are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
- ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+ ...EXAMPLE_ACCORDION,
allButton: {
open: 'Open label',
close: 'Close label',
},
}),
);
-
- expect($('button.ons-accordion__toggle-all').length).toBe(1);
+ test('THEN: renders button with expected class', () => {
+ expect($('button.ons-accordion__toggle-all').length).toBe(1);
+ });
+ test('THEN: renders button with provided open text', () => {
+ expect($('.ons-accordion__toggle-all-inner').text()).toBe('Open label');
+ });
+ test('THEN: renders button with provided close text', () => {
+ expect($('button.ons-accordion__toggle-all').attr('data-close-all')).toBe('Close label');
+ });
});
-
- it('has additionally provided `attributes`', () => {
+ describe('WHEN: attributes are provided', () => {
const $ = cheerio.load(
renderComponent('accordion', {
- ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+ ...EXAMPLE_ACCORDION,
allButton: {
open: 'Open label',
close: 'Close label',
@@ -173,9 +197,56 @@ describe('macro: accordion', () => {
},
}),
);
-
- expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
- expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+ test('THEN: renders button with additional attributes provided', () => {
+ expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+ expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+ });
+ });
+ });
+ describe('GIVEN: Params: saveState', () => {
+ describe('WHEN: saveState param is not provided', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ ...EXAMPLE_ACCORDION,
+ }),
+ );
+ test('THEN: renders without saveState attribute', () => {
+ expect($('.ons-details--accordion').attr('saveState')).toBe(undefined);
+ });
+ });
+ describe('WHEN: saveState param is set to true', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ ...EXAMPLE_ACCORDION,
+ saveState: true,
+ }),
+ );
+ test('THEN: renders with saveState attribute', () => {
+ expect($('.ons-details--accordion').attr('saveState'));
+ });
+ });
+ });
+ describe('GIVEN: Params: open', () => {
+ describe('WHEN: open param is not provided', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ ...EXAMPLE_ACCORDION,
+ }),
+ );
+ test('THEN: renders with accordion items closed on page load', () => {
+ expect($('.ons-details--accordion').attr('open')).toBe(undefined);
+ });
+ });
+ describe('WHEN: open param is set to true', () => {
+ const $ = cheerio.load(
+ renderComponent('accordion', {
+ ...EXAMPLE_ACCORDION,
+ open: true,
+ }),
+ );
+ test('THEN: renders with accordion items open on page load', () => {
+ expect($('.ons-details--accordion').attr('open'));
+ });
});
});
});
diff --git a/src/components/accordion/_test_examples.js b/src/components/accordion/_test_examples.js
new file mode 100644
index 0000000000..6482a1e431
--- /dev/null
+++ b/src/components/accordion/_test_examples.js
@@ -0,0 +1,13 @@
+export const EXAMPLE_ACCORDION = {
+ id: 'accordion-identifier',
+ itemsList: [
+ {
+ title: 'Title for item 1',
+ content: 'Content for item 1',
+ },
+ {
+ title: 'Title for item 2',
+ content: 'Content for item 2',
+ },
+ ],
+};
diff --git a/src/components/breadcrumbs/_macro.spec.js b/src/components/breadcrumbs/_macro.spec.js
index 9e4f49246b..4b7d72a0dc 100644
--- a/src/components/breadcrumbs/_macro.spec.js
+++ b/src/components/breadcrumbs/_macro.spec.js
@@ -5,125 +5,131 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { mapAll } from '../../tests/helpers/cheerio';
import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_BREADCRUMBS_MINIMAL = {
- itemsList: [
- {
- url: 'https://example.com/',
- text: 'Home',
- },
- {
- url: 'https://example.com/guide/',
- text: 'Guide',
- },
- ],
-};
-
-const EXAMPLE_BREADCRUMBS = {
- classes: 'extra-class another-extra-class',
- ariaLabel: 'Breadcrumbs label',
- id: 'example-breadcrumbs',
- itemsList: [
- {
- itemClasses: 'item-extra-class item-another-extra-class',
- linkClasses: 'link-extra-class link-another-extra-class',
- url: 'https://example.com/',
- text: 'Home',
- attributes: {
- 'data-a': '123',
- 'data-b': '456',
- },
- id: 'first-breadcrumb',
- },
- {
- url: 'https://example.com/guide/',
- text: 'Guide',
- id: 'second-breadcrumb',
- attributes: {
- 'data-a': '789',
- 'data-b': 'ABC',
- },
- },
- ],
-};
-
-describe('macro: breadcrumbs', () => {
- it('passes jest-axe checks', async () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- const results = await axe($.html());
- expect(results).toHaveNoViolations();
- });
-
- it('has additionally provided style classes', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
- expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
- });
-
- it('has a default `aria-label` of "Breadcrumbs"', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
-
- expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
- });
-
- it('has the provided `ariaLabel` for `aria-label`', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
- });
-
- it('has the provided `id`', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+import { EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS, EXAMPLE_BREADCRUMBS_ALL_PARAMS } from './_test_examples';
+
+describe('FOR: Macro: Breadcrumbs', () => {
+ describe('GIVEN: Params: required', () => {
+ describe('WHEN: required params are provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+ test('THEN: jest-axe tests pass', async () => {
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
+ faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS);
+ test('THEN: renders chevron icon next to item', () => {
+ const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+ expect(iconTypes).toEqual(['chevron']);
+ });
+ });
});
-
- it('has additionally provided style classes on `item` element', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
- expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+ describe('GIVEN: Params: all', () => {
+ describe('WHEN: all Params are provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: jest-axe tests pass', async () => {
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
+ faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS);
+ test('THEN: renders chevron icon next to each item', () => {
+ const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+ expect(iconTypes).toEqual(['chevron', 'chevron']);
+ });
+ });
});
-
- it('has additionally provided style classes on `link` element', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
- expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
+ describe('GIVEN: Params: classes', () => {
+ describe('WHEN: additional classes are provided', () => {
+ const $ = cheerio.load(
+ renderComponent('breadcrumbs', {
+ ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+ classes: 'extra-class another-extra-class',
+ }),
+ );
+ test('THEN: renders with correct additional classes', () => {
+ expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+ expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
+ });
+ });
});
-
- it('has provided `url` on `link` elements', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
- expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+ describe('GIVEN: Params: ariaLabel', () => {
+ describe('WHEN: ariaLabel is not provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+ test('THEN: renders with default aria-label of "Breadcrumbs"', () => {
+ expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
+ });
+ });
+ describe('WHEN: ariaLabel is provided', () => {
+ const $ = cheerio.load(
+ renderComponent('breadcrumbs', {
+ ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+ ariaLabel: 'Breadcrumbs label',
+ }),
+ );
+ test('THEN: renders with provided aria-label', () => {
+ expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
+ });
+ });
});
-
- it('has provided `text` on `link` elements', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
- expect(labels).toEqual(['Home', 'Guide']);
- });
-
- it('has provided `attributes` on `link` elements', () => {
- const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
- const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
- expect(testValuesA).toEqual(['123', '789']);
- const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
- expect(testValuesB).toEqual(['456', 'ABC']);
+ describe('GIVEN: Params: id', () => {
+ describe('WHEN: id is provided', () => {
+ const $ = cheerio.load(
+ renderComponent('breadcrumbs', {
+ ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+ id: 'example-breadcrumbs',
+ }),
+ );
+ test('THEN: renders with provided id', () => {
+ expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+ });
+ });
});
-
- it('has a "chevron" icon for each breadcrumb item', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
-
- const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
- expect(iconTypes).toEqual(['chevron', 'chevron']);
+ describe('GIVEN: Params: itemsList (multiple)', () => {
+ describe('WHEN: itemClasses param is provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: renders item with provided style classes', () => {
+ expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+ expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+ });
+ });
+ describe('WHEN: linkClasses param is provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: renders link with provided style classes', () => {
+ expect($('.ons-breadcrumbs__link').hasClass('link-extra-class')).toBe(true);
+ expect($('.ons-breadcrumbs__link').hasClass('link-another-extra-class')).toBe(true);
+ });
+ });
+ describe('WHEN: id param is provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: renders items with provided id', () => {
+ const ids = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('id'));
+ expect(ids).toEqual(['first-breadcrumb', 'second-breadcrumb']);
+ });
+ });
+ describe('WHEN: url param is provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: renders items with provided url link', () => {
+ const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
+ expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+ });
+ });
+ describe('WHEN: text param is provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: renders item links with provided text', () => {
+ const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
+ expect(labels).toEqual(['Home', 'Guide']);
+ });
+ });
+ describe('WHEN: attributes param is provided', () => {
+ const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+ test('THEN: renders items with provided attributes', () => {
+ const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
+ expect(testValuesA).toEqual(['123', '789']);
+ const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
+ expect(testValuesB).toEqual(['456', 'ABC']);
+ });
+ });
});
});
diff --git a/src/components/breadcrumbs/_test_examples.js b/src/components/breadcrumbs/_test_examples.js
new file mode 100644
index 0000000000..8f51c55784
--- /dev/null
+++ b/src/components/breadcrumbs/_test_examples.js
@@ -0,0 +1,36 @@
+export const EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS = {
+ itemsList: [
+ {
+ url: 'https://example.com/',
+ text: 'Home',
+ },
+ ],
+};
+
+export const EXAMPLE_BREADCRUMBS_ALL_PARAMS = {
+ classes: 'extra-class another-extra-class',
+ ariaLabel: 'Breadcrumbs label',
+ id: 'example-breadcrumbs',
+ itemsList: [
+ {
+ itemClasses: 'item-extra-class item-another-extra-class',
+ linkClasses: 'link-extra-class link-another-extra-class',
+ url: 'https://example.com/',
+ text: 'Home',
+ attributes: {
+ 'data-a': '123',
+ 'data-b': '456',
+ },
+ id: 'first-breadcrumb',
+ },
+ {
+ url: 'https://example.com/guide/',
+ text: 'Guide',
+ id: 'second-breadcrumb',
+ attributes: {
+ 'data-a': '789',
+ 'data-b': 'ABC',
+ },
+ },
+ ],
+};
diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index ba06e0abfc..0b48a1f0ae 100644
--- a/src/components/button/_macro.njk
+++ b/src/components/button/_macro.njk
@@ -72,7 +72,7 @@
{% else %}
type="{{ buttonType }}"
{% endif %}
- class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
+ class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
{% if params.id %}id="{{ params.id }}"{% endif %}
{% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
{% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
diff --git a/src/components/text-indent/example-text-indent.njk b/src/components/text-indent/example-text-indent.njk
index 23ce6cfa46..fff746b2b7 100644
--- a/src/components/text-indent/example-text-indent.njk
+++ b/src/components/text-indent/example-text-indent.njk
@@ -1,6 +1,6 @@
{% from "components/text-indent/_macro.njk" import onsTextIndent %}
{{-
onsTextIndent({
- text: 'Telephone: 0800 141 2021
Monday to Friday, 8 am to 7pm
Saturday, 8am to 4pm
'
+ "text": 'Telephone: 0800 141 2021
Monday to Friday, 8 am to 7pm
Saturday, 8am to 4pm
'
})
-}}