feat: EC component Tag

src/ec/packages/ec-component-tag/.npmignore

@@ -0,0 +1 @@
+*.story.js

src/ec/packages/ec-component-tag/README.md

@@ -0,0 +1 @@
+# ECL Twig - EC Tag component

src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EC - Tag Button - button tag renders correctly 1`] = `
+"<button class=\\"ecl-tag\\" type=\\"button\\">Button tag</button>
+"
+`;
+
+exports[`EC - Tag Link - link tag renders correctly 1`] = `
+"<a href=\\"/example-path\\" class=\\"ecl-tag\\"> Link tag </a>
+"
+`;
+
+exports[`EC - Tag Removable - removable tag renders correctly 1`] = `
+"<button class=\\"ecl-tag ecl-tag--removable\\" type=\\"button\\">
+  Removable tag
+  <span class=\\"ecl-tag__icon\\">
+    <svg
+      class=\\"ecl-icon ecl-icon--xs ecl-tag__icon-close\\"
+      focusable=\\"false\\"
+      aria-hidden=\\"true\\"
+    >
+      <use xlink:href=\\"static/icons.svg#ui--close\\"></use>
+    </svg>
+
+    <svg
+      class=\\"ecl-icon ecl-icon--xs ecl-tag__icon-close-filled\\"
+      focusable=\\"false\\"
+      aria-hidden=\\"true\\"
+    >
+      <use xlink:href=\\"static/icons.svg#ui--close-filled\\"></use>
+    </svg>
+  </span>
+</button>
+"
+`;

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 type is 'removable')
+- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the tag
+- "extra_attributes" (optional) (array) (default: []) Extra attributes for tag
+  - "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: '/path-to-the-icon-file',
+  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' }]
+} %}
+```

src/ec/packages/ec-component-tag/package.json

@@ -0,0 +1,28 @@
+{
+  "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"
+  },
+  "devDependencies": {
+    "@ecl/ec-resources-icons": "~2.1.0",
+    "@ecl/ec-specs-tag": "~2.1.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"
+  ]
+}

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' %}
+  <button class="{{ _css_class }}" type="button"{{ _extra_attributes|raw }}>
+    {{ _tag.label }}
+    {% if _tag.type=='removable' %}
+      <span class="ecl-tag__icon">
+        {% include '../ec-component-icon/icon.html.twig' with { icon: { type: 'ui', name: 'close', size: 'xs', path: default_icon_path }, extra_classes: 'ecl-tag__icon-close' } %}
+        {% include '../ec-component-icon/icon.html.twig' with { icon: { type: 'ui', name: 'close-filled', size: 'xs', path: default_icon_path }, extra_classes: 'ecl-tag__icon-close-filled' } %}
+      </span>
+    {% endif %}
+  </button>
+{% else %}
+  <a href="{{ _tag.path }}" class="{{ _css_class }}"{{ _extra_attributes|raw }}>
+    {{ _tag.label }}
+  </a>
+{% endif %}

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 },
+    }
+  );

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();
+      });
+    });
+  });
+});