From 8ca10cf4fbb6f5ea43d3498589fa343a3d8678e1 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 5 Nov 2019 14:54:32 +0100 Subject: [PATCH] feat(breadcrumb-harmonised): Add component - TWIG-95 (#202) --- .../.npmignore | 4 + .../README.md | 59 ++ .../breadcrumb-harmonised.test.js.snap | 575 ++++++++++++++++++ .../breadcrumb-harmonised.html.twig | 125 ++++ .../breadcrumb-harmonised.story.js | 39 ++ .../breadcrumb-harmonised.test.js | 87 +++ .../demo/data.js | 15 + .../package.json | 34 ++ src/ec/packages/ec-components/package.json | 1 + yarn.lock | 14 + 10 files changed, 953 insertions(+) create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/.npmignore create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/README.md create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/__snapshots__/breadcrumb-harmonised.test.js.snap create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.html.twig create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.story.js create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.test.js create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/demo/data.js create mode 100644 src/ec/packages/ec-component-breadcrumb-harmonised/package.json diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/.npmignore b/src/ec/packages/ec-component-breadcrumb-harmonised/.npmignore new file mode 100644 index 000000000..6a93e7ba1 --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/.npmignore @@ -0,0 +1,4 @@ +__snapshots__ +*.story.js +*.test.js +**/*.md diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/README.md b/src/ec/packages/ec-component-breadcrumb-harmonised/README.md new file mode 100644 index 000000000..e8c71c84b --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/README.md @@ -0,0 +1,59 @@ +# ECL Twig - EC Breadcrumb Harmonised component + +npm package: `@ecl-twig/ec-component-breadcrumb-harmonised` + +```shell +npm install --save @ecl-twig/ec-component-breadcrumb-harmonised +``` + +## Breadcrumb Harmonised + +### Parameters + +- "links" (array) (default: []): format: + - "label" (string) (default: '') Label of link + - "path" (string) (default: '') Url of link +- "navigation_text" (string) (default: ''): Text of navigation in breadcrumb +- "ellipsis_label" (string) (default: ''): Label of the ellipsis, e.g. "Click to expand" +- "icon_file_path" (string) (default: ''): URL to icons file +- "extra_classes" (string) (default: '') +- "extra_attributes" (array) (default: []): format: + - "name" (string) (default: '') + - "value" (string) (default: '') + +### Example : + + +```twig +{% include '@ecl-twig/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.html.twig' with { + links: [ + { + label: 'Link 1', + path: '/example' + }, + { + label: 'Link 2', + path: '/example' + }, + { + label: 'Link 3', + path: '/example' + }, + { + label: 'Link 4', + path: '/example' + }, + { + label: 'Link 5', + path: '/example' + }, + { + label: 'Link 6', + path: '/example' + }, + ], + icon_file_path: '/path-to-the-icons-file', + navigation_text: 'You are here:', + ellipsis_label: 'Click to expand' +} %} +``` diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/__snapshots__/breadcrumb-harmonised.test.js.snap b/src/ec/packages/ec-component-breadcrumb-harmonised/__snapshots__/breadcrumb-harmonised.test.js.snap new file mode 100644 index 000000000..67a5c15b1 --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/__snapshots__/breadcrumb-harmonised.test.js.snap @@ -0,0 +1,575 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EC - Breadcrumb Core Long renders correctly 1`] = ` + +`; + +exports[`EC - Breadcrumb Core Long renders correctly with extra attributes 1`] = ` + +`; + +exports[`EC - Breadcrumb Core Long renders correctly with extra class names 1`] = ` + +`; + +exports[`EC - Breadcrumb Core Simple renders correctly 1`] = ` + +`; + +exports[`EC - Breadcrumb Core Simple renders correctly with extra attributes 1`] = ` + +`; + +exports[`EC - Breadcrumb Core Simple renders correctly with extra class names 1`] = ` + +`; diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.html.twig b/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.html.twig new file mode 100644 index 000000000..9c885b5ae --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.html.twig @@ -0,0 +1,125 @@ +{% spaceless %} + +{# + Parameters: + - "links" (array) (default: []): format: [ + { + "label" (string) (default: '') Label of link + "path" (string) (default: '') Url of link + }, + ... + ], + - "navigation_text" (string) (default: ''): Text of navigation in breadcrumb + - "ellipsis_label" (string) (default: ''): Label of the ellipsis, e.g. "Click to expand" + - "icon_file_path" (string) (default: ''): URL to icons file + - "extra_classes" (string) (default: '') + - "extra_attributes" (array) (default: []): format: [ + { + "name" (string) (default: ''), + "value" (optional) (string) + ... + ] +#} + +{# Internal properties #} + +{% set _breadcrumb_size = links|length %} +{% set _navigation_text = navigation_text|default('') %} +{% set _ellipsis_label = ellipsis_label|default('') %} +{% set _ellipsis_text = ellipsis_text|default('…') %} +{% set _extra_attributes = '' %} +{% set _breadcrumb_segment_class = 'ecl-breadcrumb-harmonised__segment' %} +{% set _min_items_left = min_items_left|default(1) %} +{% set _min_items_right = min_items_right|default(2) %} +{% set _nav_attributes = [ + { name: 'aria-label', value: _navigation_text }, + { name: 'data-ecl-breadcrumb-harmonised', value: 'true' }] +%} +{% set _breadcrumb_icon = { + icon: { + type: 'ui', + name: 'corner-arrow', + size: '2xs', + transform: 'rotate-90', + path: icon_file_path|default(''), + }, + extra_classes: 'ecl-breadcrumb-harmonised__icon', + extra_attributes: [{ name: 'role', value: 'presentation' }] +} %} + +{% set _css_class = 'ecl-breadcrumb-harmonised' %} + +{# Internal logic - Process properties #} + +{% if _breadcrumb_size > (_min_items_left + _min_items_right) %} + {% set _nav_attributes = _nav_attributes|merge([{ name: 'data-ecl-auto-init', value: 'BreadcrumbHarmonised' }]) %} +{% endif %} + +{% if extra_classes is defined and extra_classes is not empty %} + {% set _css_class = _css_class ~ ' ' ~ extra_classes %} +{% endif %} + +{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} + {% set extra_attributes = extra_attributes|merge(_nav_attributes) %} +{% else %} + {% set extra_attributes = _nav_attributes %} +{% endif %} + +{% for attr in extra_attributes %} + {% if attr.value is defined %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value|e('html_attr') ~ '"' %} + {% else %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name %} + {% endif %} +{% endfor %} + +{# Print the result #} + + + +{% endspaceless %} diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.story.js b/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.story.js new file mode 100644 index 000000000..527e03db0 --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.story.js @@ -0,0 +1,39 @@ +import { storiesOf } from '@storybook/html'; +import { withNotes } from '@ecl-twig/storybook-addon-notes'; +import withCode from '@ecl-twig/storybook-addon-code'; + +import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; +import { dataSimple, dataLong } from './demo/data'; + +import breadcrumbDocs from './README.md'; +import breadcrumb from './breadcrumb-harmonised.html.twig'; + +storiesOf('Components/Navigation/Breadcrumbs/Breadcrumb Harmonised', module) + .addDecorator(withNotes) + .addDecorator(withCode) + .add( + 'simple', + () => + breadcrumb({ + links: dataSimple.links, + icon_file_path: defaultSprite, + navigation_text: dataSimple.label, + ellipsis_label: 'Click to expand', + }), + { + notes: { markdown: breadcrumbDocs }, + } + ) + .add( + 'long', + () => + breadcrumb({ + links: dataLong.links, + icon_file_path: defaultSprite, + navigation_text: dataLong.label, + ellipsis_label: 'Click to expand', + }), + { + notes: { markdown: breadcrumbDocs }, + } + ); diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.test.js b/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.test.js new file mode 100644 index 000000000..4823ce446 --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.test.js @@ -0,0 +1,87 @@ +import { merge, renderTwigFileAsNode } from '@ecl-twig/test-utils'; + +import { dataSimple, dataLong } from './demo/data'; + +describe('EC - Breadcrumb Core', () => { + const template = + '@ecl-twig/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.html.twig'; + const render = params => renderTwigFileAsNode(template, params); + const defaultIconPath = 'static/icons.svg'; + + describe('Simple', () => { + const data = { + links: dataSimple.links, + icon_file_path: defaultIconPath, + navigation_text: dataSimple.label, + ellipsis_label: 'Click to expand', + }; + + test(`renders correctly`, () => { + expect.assertions(1); + return expect(render(data)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(data, { + extra_classes: 'custom-class custom-class--test', + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra attributes', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(data, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + }); + + describe('Long', () => { + const data = { + extra_attributes: [ + { name: 'data-ecl-auto-init', value: 'BreadcrumbCore' }, + ], + links: dataLong.links, + icon_file_path: defaultIconPath, + navigation_text: dataLong.label, + ellipsis_label: 'Click to expand', + }; + + test(`renders correctly`, () => { + expect.assertions(1); + return expect(render(data)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(data, { + extra_classes: 'custom-class custom-class--test', + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra attributes', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(data, { + extra_attributes: [ + { name: 'data-test', value: 'data-test-value' }, + { name: 'data-test-1', value: 'data-test-value-1' }, + ], + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + }); +}); diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/demo/data.js b/src/ec/packages/ec-component-breadcrumb-harmonised/demo/data.js new file mode 100644 index 000000000..77b2d3a7b --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/demo/data.js @@ -0,0 +1,15 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import specDataSimple from '@ecl/ec-specs-breadcrumb-harmonised/demo/data-simple'; +import specDataLong from '@ecl/ec-specs-breadcrumb-harmonised/demo/data'; +import { formatLinkAlt } from '@ecl-twig/data-utils'; + +const adapter = initialData => { + // Copy reference specification demo data. + const adaptedData = JSON.parse(JSON.stringify(initialData)); + adaptedData.links = adaptedData.items.map(formatLinkAlt); + delete adaptedData.items; + return adaptedData; +}; + +export const dataSimple = adapter(specDataSimple); +export const dataLong = adapter(specDataLong); diff --git a/src/ec/packages/ec-component-breadcrumb-harmonised/package.json b/src/ec/packages/ec-component-breadcrumb-harmonised/package.json new file mode 100644 index 000000000..45019d389 --- /dev/null +++ b/src/ec/packages/ec-component-breadcrumb-harmonised/package.json @@ -0,0 +1,34 @@ +{ + "name": "@ecl-twig/ec-component-breadcrumb-harmonised", + "author": "European Commission", + "license": "EUPL-1.1", + "version": "2.13.0", + "description": "ECL Twig - EC Breadcrumb", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@ecl-twig/ec-component-button": "2.11.2", + "@ecl-twig/ec-component-icon": "2.11.2", + "@ecl-twig/ec-component-link": "2.11.2" + }, + "devDependencies": { + "@ecl/ec-component-breadcrumb-harmonised": "2.13.0", + "@ecl/ec-resources-icons": "2.13.0", + "@ecl/ec-specs-breadcrumb-harmonised": "2.13.0" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/ecl-twig.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/ecl-twig/issues" + }, + "homepage": "https://github.com/ec-europa/ecl-twig", + "keywords": [ + "ecl", + "europa-component-library", + "design-system", + "twig" + ] +} diff --git a/src/ec/packages/ec-components/package.json b/src/ec/packages/ec-components/package.json index 3931e162f..6314c03cd 100644 --- a/src/ec/packages/ec-components/package.json +++ b/src/ec/packages/ec-components/package.json @@ -12,6 +12,7 @@ "@ecl-twig/ec-component-accordion2": "2.11.2", "@ecl-twig/ec-component-blockquote": "2.11.2", "@ecl-twig/ec-component-breadcrumb": "2.11.2", + "@ecl-twig/ec-component-breadcrumb-harmonised": "2.13.0", "@ecl-twig/ec-component-breadcrumb-standardised": "2.13.0", "@ecl-twig/ec-component-button": "2.11.2", "@ecl-twig/ec-component-card": "2.11.2", diff --git a/yarn.lock b/yarn.lock index 566faaaba..132fc281d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -768,6 +768,15 @@ "@ecl/ec-base" "^2.11.0" "@ecl/ec-component-button" "^2.11.0" +"@ecl/ec-component-breadcrumb-harmonised@2.13.0": + version "2.13.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-component-breadcrumb-harmonised/-/ec-component-breadcrumb-harmonised-2.13.0.tgz#b503c98a5ccf8c02069d5be26296d24b60810478" + integrity sha512-xA7o/ZQRFtkxHveG4pF/xB2SsdPb2FmylxI2jTAcrr3amxNzxch8E16KxqwkvhuTsLpXXT6oJ1nzemBbyBmKZQ== + dependencies: + "@ecl/ec-base" "^2.13.0" + "@ecl/ec-component-icon" "^2.13.0" + "@ecl/ec-component-link" "^2.13.0" + "@ecl/ec-component-breadcrumb-standardised@2.13.0": version "2.13.0" resolved "https://registry.yarnpkg.com/@ecl/ec-component-breadcrumb-standardised/-/ec-component-breadcrumb-standardised-2.13.0.tgz#5fcf2f9a520662e8fd843c41c35fc7c4f0ea1c3d" @@ -1293,6 +1302,11 @@ resolved "https://registry.yarnpkg.com/@ecl/ec-specs-blockquote/-/ec-specs-blockquote-2.11.0.tgz#420a1d316c401a4a55f687f6a81d98bf1581368f" integrity sha512-ZeObp26psFLHQgXlIXHR1+QFBoRXRxkoS5D+I2YMUu/CSVNWus1C2qU6AuZhDIiH9NL16bETSE0Ioe0y4db2Sg== +"@ecl/ec-specs-breadcrumb-harmonised@2.13.0": + version "2.13.0" + resolved "https://registry.yarnpkg.com/@ecl/ec-specs-breadcrumb-harmonised/-/ec-specs-breadcrumb-harmonised-2.13.0.tgz#fdf351e55224a3cf25dfa39246b7871df7175735" + integrity sha512-dNA5AHD2FzyZWuD/usGvfn9J8k9ngWIpbCYFkWzzYKmhdc+dL6J0JorWDxnN99szCUTmCEsKLhW3a1+j5kTV5Q== + "@ecl/ec-specs-breadcrumb-standardised@2.13.0": version "2.13.0" resolved "https://registry.yarnpkg.com/@ecl/ec-specs-breadcrumb-standardised/-/ec-specs-breadcrumb-standardised-2.13.0.tgz#7084f8d0a5f05c4e0aed54424c4db9a4d8070c6f"