From 6950f097af4a2ca086afce09a2bb1162399a8cb9 Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 25 Nov 2024 12:53:16 +0100 Subject: [PATCH 01/10] wt icons --- .../twig/components/icon/README.md | 1 + .../icon/__snapshots__/icon.test.js.snap | 1294 +---------------- .../twig/components/icon/icon.html.twig | 69 +- .../twig/components/icon/icon.test.js | 92 +- .../ec/.storybook/preview-head.html | 5 + .../eu/.storybook/preview-head.html | 5 + 6 files changed, 165 insertions(+), 1301 deletions(-) diff --git a/src/implementations/twig/components/icon/README.md b/src/implementations/twig/components/icon/README.md index 0e009b33e22..7cc78151b59 100644 --- a/src/implementations/twig/components/icon/README.md +++ b/src/implementations/twig/components/icon/README.md @@ -16,6 +16,7 @@ npm install --save @ecl/twig-component-icon - "color" (string) (default: '') Color of icon. Available colors are 'default', 'inverted', 'primary' - "title": '' (string) (default: '') Additional title for the icon; shortcut for extra accessibility title - **"as_image"**: (boolean) (default: false) Whether the icon is used as an image +- **"wt_markup"** (boolean) (default: false): should the icon use the Webtools markup? - **"extra_accessibility"** (optional) (object) Extra tags for accessibility when used as an image - description: '' (desc tag) - description_id: '' (desc tag id) diff --git a/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap b/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap index da536b869e2..3b4bfb7ea20 100644 --- a/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap +++ b/src/implementations/twig/components/icon/__snapshots__/icon.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Icon All icons - icon arrow-left renders correctly 1`] = ` +exports[`Icon ECL markup - icon arrow-left renders correctly 1`] = ` {% endapply %} diff --git a/src/implementations/twig/components/icon/icon.test.js b/src/implementations/twig/components/icon/icon.test.js index b667b5a5aa2..352c35425be 100644 --- a/src/implementations/twig/components/icon/icon.test.js +++ b/src/implementations/twig/components/icon/icon.test.js @@ -8,39 +8,85 @@ import { axe, toHaveNoViolations } from 'jest-axe'; import iconsAll from '@ecl/resources-icons/dist/lists/all.json'; import dataAll from '@ecl/specs-component-icon/demo/data'; +const dataIcon = merge(dataAll, { + icon: { + name: iconsAll[0], + }, +}); +const dataIconWt = { ...dataIcon, wt_markup: true }; + expect.extend(toHaveNoViolations); describe('Icon', () => { const template = '@ecl/icon/icon.html.twig'; const render = (params) => renderTwigFileAsNode(template, params); - describe('All icons', () => { - iconsAll.forEach((icon) => { - test(`- icon ${icon} renders correctly`, () => { - expect.assertions(1); + describe('ECL markup', () => { + test(`- icon ${dataIcon.icon.name} renders correctly`, () => { + expect.assertions(1); + + return expect(render(dataIcon)).resolves.toMatchSnapshot(); + }); + + test('- renders correctly with accessibility content', () => { + expect.assertions(1); + + const optionsWithAccessibility = merge(dataIcon, { + as_image: true, + extra_accessibility: { + title: 'Title', + title_id: 'example-title', + description: 'Description', + description_id: 'example-desc', + }, + }); + + return expect( + render(optionsWithAccessibility), + ).resolves.toMatchSnapshot(); + }); + + test('- renders correctly with extra class names', () => { + expect.assertions(1); - const options = merge(dataAll, { - icon: { - name: icon, - }, - }); + const optionsWithExtraClasses = merge(dataIcon, { + extra_classes: 'custom-class custom-class--test', + }); - return expect(render(options)).resolves.toMatchSnapshot(); + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('- renders correctly with extra attributes', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(dataIcon, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + + test(`- passes the accessibility tests`, async () => { + expect( + await axe(await renderTwigFileAsHtml(template, dataIcon)), + ).toHaveNoViolations(); }); }); - describe('Generic tests - Any icon', () => { - const options = merge(dataAll, { - icon: { - name: iconsAll[0], - }, + describe('WT markup', () => { + test(`- icon ${dataIconWt.icon.name} renders correctly`, () => { + expect.assertions(1); + + return expect(render(dataIconWt)).resolves.toMatchSnapshot(); }); - test('renders correctly with accessibility content', () => { + test('- renders correctly with accessibility content', () => { expect.assertions(1); - const optionsWithAccessibility = merge(options, { + const optionsWithAccessibility = merge(dataIconWt, { as_image: true, extra_accessibility: { title: 'Title', @@ -55,20 +101,20 @@ describe('Icon', () => { ).resolves.toMatchSnapshot(); }); - test('renders correctly with extra class names', () => { + test('- renders correctly with extra class names', () => { expect.assertions(1); - const optionsWithExtraClasses = merge(options, { + const optionsWithExtraClasses = merge(dataIconWt, { extra_classes: 'custom-class custom-class--test', }); return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); }); - test('renders correctly with extra attributes', () => { + test('- renders correctly with extra attributes', () => { expect.assertions(1); - const optionsWithExtraClasses = merge(options, { + const optionsWithExtraClasses = merge(dataIconWt, { extra_attributes: [ { name: 'data-test', value: 'data-test-value' }, { name: 'data-test-1', value: 'data-test-value-1' }, @@ -78,9 +124,9 @@ describe('Icon', () => { return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); }); - test(`passes the accessibility tests`, async () => { + test(`- passes the accessibility tests`, async () => { expect( - await axe(await renderTwigFileAsHtml(template, options)), + await axe(await renderTwigFileAsHtml(template, dataIconWt)), ).toHaveNoViolations(); }); }); diff --git a/src/playground/ec/.storybook/preview-head.html b/src/playground/ec/.storybook/preview-head.html index e5f2113c032..03b9447ebfe 100644 --- a/src/playground/ec/.storybook/preview-head.html +++ b/src/playground/ec/.storybook/preview-head.html @@ -13,6 +13,11 @@ src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.2/pikaday.js" crossorigin="anonymous" > + + - + - +