From b34bb7da3512b0189610594eb264998053058a36 Mon Sep 17 00:00:00 2001 From: Matt Date: Fri, 8 Feb 2019 11:50:19 +0100 Subject: [PATCH 1/6] Initial commit for EC Tag --- src/ec/packages/ec-component-tag/.npmignore | 1 + src/ec/packages/ec-component-tag/README.md | 1 + .../__snapshots__/tag.test.js.snap | 28 ++++++++ src/ec/packages/ec-component-tag/docs/tag.md | 36 ++++++++++ src/ec/packages/ec-component-tag/package.json | 24 +++++++ .../packages/ec-component-tag/tag.html.twig | 65 +++++++++++++++++++ src/ec/packages/ec-component-tag/tag.story.js | 54 +++++++++++++++ src/ec/packages/ec-component-tag/tag.test.js | 59 +++++++++++++++++ 8 files changed, 268 insertions(+) create mode 100644 src/ec/packages/ec-component-tag/.npmignore create mode 100644 src/ec/packages/ec-component-tag/README.md create mode 100644 src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap create mode 100644 src/ec/packages/ec-component-tag/docs/tag.md create mode 100644 src/ec/packages/ec-component-tag/package.json create mode 100644 src/ec/packages/ec-component-tag/tag.html.twig create mode 100644 src/ec/packages/ec-component-tag/tag.story.js create mode 100644 src/ec/packages/ec-component-tag/tag.test.js diff --git a/src/ec/packages/ec-component-tag/.npmignore b/src/ec/packages/ec-component-tag/.npmignore new file mode 100644 index 000000000..496a263d7 --- /dev/null +++ b/src/ec/packages/ec-component-tag/.npmignore @@ -0,0 +1 @@ +*.story.js diff --git a/src/ec/packages/ec-component-tag/README.md b/src/ec/packages/ec-component-tag/README.md new file mode 100644 index 000000000..a69db8b31 --- /dev/null +++ b/src/ec/packages/ec-component-tag/README.md @@ -0,0 +1 @@ +# ECL Twig - EC Tag component \ No newline at end of file diff --git a/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap b/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap new file mode 100644 index 000000000..8a8639ba8 --- /dev/null +++ b/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EC - Tag Button - button tag renders correctly 1`] = ` +" +" +`; + +exports[`EC - Tag Link - link tag renders correctly 1`] = ` +" Link tag +" +`; + +exports[`EC - Tag Removable - removable tag renders correctly 1`] = ` +" +" +`; diff --git a/src/ec/packages/ec-component-tag/docs/tag.md b/src/ec/packages/ec-component-tag/docs/tag.md new file mode 100644 index 000000000..b063e883b --- /dev/null +++ b/src/ec/packages/ec-component-tag/docs/tag.md @@ -0,0 +1,36 @@ +# ECL Twig - EC Tag component + +npm package: `@ecl-twig/ec-component-tag` + +```shell +npm install --save @ecl-twig/ec-component-tag +``` + +## Tag + +### Parameters + +- "tag" (associative array) (default: 'predefined structure below') + - "path" (string) (default: '') - path/url for tag (if needed - only for type 'link') + - "type" (string) (default: '') - type of tag (can be 'link', 'button', 'removable') + - "label" (string) (default: '') - tag label +- "default_icon_path" (string) (default: '') - path for the icon image (need to render Icon component if tag is removable) +- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon +- "extra_attributes" (optional) (array) (default: []) Extra attributes for icon + - "name" (string) Attribute name, eg. 'data-test' + - "value" (string) Attribute value, eg: 'data-test-1' + +### Example: + +```twig +{% include 'path/to/tag.html.twig' with { + tag: { + type: 'removable', + path: '/example', + label: 'Tag 1' + }, + default_icon_path: '/static/media/icons.cbfd6efe.svg', + extra_classes: 'my-extra-class-1 my-extra-class-2', + extra_attributes: [{ name: 'data-test', value: 'data-test-value' },{ name: 'data-test-1', value: 'data-test-value-1' }] +} %} +``` diff --git a/src/ec/packages/ec-component-tag/package.json b/src/ec/packages/ec-component-tag/package.json new file mode 100644 index 000000000..98c1e5086 --- /dev/null +++ b/src/ec/packages/ec-component-tag/package.json @@ -0,0 +1,24 @@ +{ + "name": "@ecl-twig/ec-component-tag", + "author": "European Commission", + "license": "EUPL-1.1", + "version": "0.0.1-alpha", + "description": "ECL Twig - EC Tag", + "publishConfig": { + "access": "public" + }, + "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" + ] +} \ No newline at end of file diff --git a/src/ec/packages/ec-component-tag/tag.html.twig b/src/ec/packages/ec-component-tag/tag.html.twig new file mode 100644 index 000000000..d808b50eb --- /dev/null +++ b/src/ec/packages/ec-component-tag/tag.html.twig @@ -0,0 +1,65 @@ +{# + Parameters: + - "tag" (associative array) (default: predefined structure): format: + { + type: 'link' (can be 'link', 'button', 'removable'), + path: '' (tag url if needed), + label: '' (tag text as string) + } + - "default_icon_path" (string) Default path for icon tag (need to render Icon component) + - "extra_classes" (string) (default: '') + - "extra_attributes" (array) (default: []): format: [ + { + "name" (string) (default: ''), + "value" (string) (default: '') + }, + ... + ] +#} + +{# Internal properties #} +{% set _tag={ + type: 'link', + path: '', + label: '' +} %} + +{% if tag is defined %} + {% set _tag=_tag|merge(tag) %} +{% endif %} + +{% set _css_class = 'ecl-tag' %} +{% set _extra_attributes = '' %} + +{# Add extra class for removable tag #} +{% if _tag.type == 'removable' %} + {% set _css_class=_css_class~' ecl-tag--removable' %} +{% endif %} + +{# Internal logic - Process properties #} +{% 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 %} + {% for attr in extra_attributes %} + {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %} + {% endfor %} +{% endif %} + +{# Print the result #} +{% if _tag.type!='link' %} + +{% else %} + + {{ _tag.label }} + +{% endif %} diff --git a/src/ec/packages/ec-component-tag/tag.story.js b/src/ec/packages/ec-component-tag/tag.story.js new file mode 100644 index 000000000..31e6c4aef --- /dev/null +++ b/src/ec/packages/ec-component-tag/tag.story.js @@ -0,0 +1,54 @@ +import { storiesOf } from '@storybook/html'; +import { withKnobs, text } from '@storybook/addon-knobs'; +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 tagDocs from './docs/tag.md'; + +import tag from './tag.html.twig'; + +storiesOf('Components/Tag', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator(withCode) + .add( + 'as a link', + () => + tag({ + tag: { + label: text('Label', 'Link tag'), + path: text('Url', '/example'), + }, + }), + { + notes: { markdown: tagDocs }, + } + ) + .add( + 'as a button', + () => + tag({ + tag: { + label: text('Label', 'Button tag'), + type: 'button', + }, + }), + { + notes: { markdown: tagDocs }, + } + ) + .add( + 'removable', + () => + tag({ + tag: { + label: text('Label', 'Removable tag'), + type: 'removable', + }, + default_icon_path: defaultSprite, + }), + { + notes: { markdown: tagDocs }, + } + ); diff --git a/src/ec/packages/ec-component-tag/tag.test.js b/src/ec/packages/ec-component-tag/tag.test.js new file mode 100644 index 000000000..3e0ab8a36 --- /dev/null +++ b/src/ec/packages/ec-component-tag/tag.test.js @@ -0,0 +1,59 @@ +import path from 'path'; +import { renderTwigFile } from '@ecl-twig/test-utils'; + +describe('EC - Tag', () => { + const template = path.resolve(__dirname, './tag.html.twig'); + const defaultIconPath = 'static/icons.svg'; + const defaultDataStructure = { + tag: { + path: '', + type: '', + label: '', + }, + default_icon_path: defaultIconPath, + }; + + describe('Link', () => { + test(`- link tag renders correctly`, done => { + expect.assertions(1); + + defaultDataStructure.tag.type = 'link'; + defaultDataStructure.tag.label = 'Link tag'; + defaultDataStructure.tag.path = '/example-path'; + + renderTwigFile(template, defaultDataStructure, (err, html) => { + expect(html).toMatchSnapshot(); + done(); + }); + }); + }); + + describe('Button', () => { + test(`- button tag renders correctly`, done => { + expect.assertions(1); + + defaultDataStructure.tag.type = 'button'; + defaultDataStructure.tag.label = 'Button tag'; + + renderTwigFile(template, defaultDataStructure, (err, html) => { + expect(html).toMatchSnapshot(); + done(); + }); + }); + }); + + describe('Removable', () => { + test(`- removable tag renders correctly`, done => { + expect.assertions(1); + + defaultDataStructure.tag.type = 'removable'; + defaultDataStructure.tag.label = 'Removable tag'; + defaultDataStructure.default_icon_path = defaultIconPath; + + renderTwigFile(template, defaultDataStructure, (err, html) => { + expect(html).toMatchSnapshot(); + done(); + }); + }); + }); +}); From 5b0e42acaffbc9d48081fe3da63abd280f85616a Mon Sep 17 00:00:00 2001 From: Matt Date: Fri, 8 Feb 2019 15:07:17 +0100 Subject: [PATCH 2/6] Fix some bugs --- src/ec/packages/ec-component-tag/docs/tag.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ec/packages/ec-component-tag/docs/tag.md b/src/ec/packages/ec-component-tag/docs/tag.md index b063e883b..eb53e8613 100644 --- a/src/ec/packages/ec-component-tag/docs/tag.md +++ b/src/ec/packages/ec-component-tag/docs/tag.md @@ -14,7 +14,7 @@ npm install --save @ecl-twig/ec-component-tag - "path" (string) (default: '') - path/url for tag (if needed - only for type 'link') - "type" (string) (default: '') - type of tag (can be 'link', 'button', 'removable') - "label" (string) (default: '') - tag label -- "default_icon_path" (string) (default: '') - path for the icon image (need to render Icon component if tag is removable) +- "default_icon_path" (string ) (default: '') - path for the icon image (need to render Icon component if tag is removable) - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon - "extra_attributes" (optional) (array) (default: []) Extra attributes for icon - "name" (string) Attribute name, eg. 'data-test' From 33ee44325e0bf9dab2938663e1af20584d05543e Mon Sep 17 00:00:00 2001 From: Matt Date: Mon, 11 Feb 2019 10:48:37 +0100 Subject: [PATCH 3/6] Update package.json --- src/ec/packages/ec-component-tag/package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ec/packages/ec-component-tag/package.json b/src/ec/packages/ec-component-tag/package.json index 98c1e5086..d1705a13a 100644 --- a/src/ec/packages/ec-component-tag/package.json +++ b/src/ec/packages/ec-component-tag/package.json @@ -7,6 +7,9 @@ "publishConfig": { "access": "public" }, + "devDependencies": { + "@ecl/ec-resources-icons": "^2.0.0" + }, "repository": { "type": "git", "url": "git+https://github.com/ec-europa/ecl-twig.git" @@ -21,4 +24,4 @@ "design-system", "twig" ] -} \ No newline at end of file +} From 4d26b794e028d132937a55c579edb89893c0e5cd Mon Sep 17 00:00:00 2001 From: Matt Date: Mon, 11 Feb 2019 11:22:32 +0100 Subject: [PATCH 4/6] Update test snapshot --- src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap b/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap index 8a8639ba8..87a9e454f 100644 --- a/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap +++ b/src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap @@ -13,7 +13,6 @@ exports[`EC - Tag Link - link tag renders correctly 1`] = ` exports[`EC - Tag Removable - removable tag renders correctly 1`] = ` "