feat: Ec component breadcrumb

src/ec/.storybook/preview-head.html

@@ -1,12 +1,9 @@
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://unpkg.com/@ecl/[email protected].0/dist/styles/ecl-ec-preset-website.css"
+  href="https://unpkg.com/@ecl/[email protected].1/dist/styles/ecl-ec-preset-website.css"
 />
-<script
-  defer
-  src="https://unpkg.com/@ecl/[email protected]/dist/scripts/ecl-ec-preset-website.js"
-></script>
+<script src="https://unpkg.com/@ecl/[email protected]/dist/scripts/ecl-ec-preset-website.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/svg4everybody.min.js"></script>
 <script>
   svg4everybody();

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

@@ -0,0 +1,5 @@
+__snapshots__
+docs
+*.story.js
+*.test.js
+**/*.md

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

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

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

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EC - Site Header Breadcrumb long - renders correctly 1`] = `
+<nav
+  aria-label="You are here:"
+  class="ecl-breadcrumb"
+  data-ecl-breadcrumb="true"
+>
+  <ol
+    class="ecl-breadcrumb__container"
+  >
+    <li
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment"
+      data-ecl-breadcrumb-item="static"
+    >
+      <a
+        class="ecl-link ecl-link--standalone ecl-breadcrumb__link"
+        href="/example"
+      >
+        Home
+      </a>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis"
+      data-ecl-breadcrumb-ellipsis="true"
+    >
+      <button
+        aria-label="Click to expand"
+        class="ecl-breadcrumb__ellipsis"
+        data-ecl-breadcrumb-ellipsis-button="true"
+        type="button"
+      >
+        …
+      </button>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ecl-breadcrumb__segment"
+      data-ecl-breadcrumb-item="expandable"
+    >
+      <a
+        class="ecl-link ecl-link--standalone ecl-breadcrumb__link"
+        href="/example"
+      >
+        About the European Commission
+      </a>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ecl-breadcrumb__segment"
+      data-ecl-breadcrumb-item="expandable"
+    >
+      <a
+        class="ecl-link ecl-link--standalone ecl-breadcrumb__link"
+        href="/example"
+      >
+        Organisational structure
+      </a>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment"
+      data-ecl-breadcrumb-item="static"
+    >
+      <a
+        class="ecl-link ecl-link--standalone ecl-breadcrumb__link"
+        href="/example"
+      >
+        How the Commission is organised
+      </a>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-current="page"
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment ecl-breadcrumb__current-page"
+      data-ecl-breadcrumb-item="static"
+    >
+      News
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`EC - Site Header Breadcrumb simple - renders correctly 1`] = `
+<nav
+  aria-label="You are here:"
+  class="ecl-breadcrumb"
+  data-ecl-breadcrumb="true"
+>
+  <ol
+    class="ecl-breadcrumb__container"
+  >
+    <li
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment"
+      data-ecl-breadcrumb-item="static"
+    >
+      <a
+        class="ecl-link ecl-link--standalone ecl-breadcrumb__link"
+        href="/example"
+      >
+        Home
+      </a>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment"
+      data-ecl-breadcrumb-item="static"
+    >
+      <a
+        class="ecl-link ecl-link--standalone ecl-breadcrumb__link"
+        href="/example"
+      >
+        About the European Commission
+      </a>
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-icon--inverted ecl-breadcrumb__icon"
+        focusable="false"
+        role="presentation"
+      >
+        <use
+          xlink:href="static/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </li>
+    <li
+      aria-current="page"
+      aria-hidden="false"
+      class="ecl-breadcrumb__segment ecl-breadcrumb__current-page"
+      data-ecl-breadcrumb-item="static"
+    >
+      News
+    </li>
+  </ol>
+</nav>
+`;

src/ec/packages/ec-component-breadcrumb/breadcrumb.html.twig

@@ -0,0 +1,89 @@
+{#
+  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
+    - "icon_file_path" (string) (default: ''): URL to icons file
+    - "extra_classes" (string) (default: '')
+    - "extra_attributes" (array) (default: []): format: [
+        {
+          "name" (string) (default: ''),
+          "value" (string) (default: '')
+        },
+        ...
+      ]
+#}
+
+{# variables #}
+{% set _breadcrumb_size = links|length %}
+{% set _navigation_text = navigation_text|default('') %}
+{% set _breadcrumb_segment_class = 'ecl-breadcrumb__segment' %}
+
+{% set _default_icon_structure = {
+  icon: {
+    type: 'ui',
+    name: 'corner-arrow',
+    size: 'xs',
+    transform: 'rotate-90',
+    path: icon_file_path|default(''),
+    color: 'inverted'
+  },
+  extra_classes: 'ecl-breadcrumb__icon',
+  extra_attributes: [{ name: 'role', value: 'presentation' }]
+  }
+%}
+
+{% set _css_class = 'ecl-breadcrumb' %}
+{% set _extra_attributes = 'aria-label="' ~ _navigation_text ~ '" data-ecl-breadcrumb="true"' %}
+
+{# 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 #}
+{% spaceless %}
+<nav class="{{- _css_class -}}"{{- _extra_attributes -}}>
+  <ol class="ecl-breadcrumb__container">
+    {%- for key,link in links -%}
+
+      {%- set _breadcrumb_segment_attributes = 'data-ecl-breadcrumb-item="static" aria-hidden="false"' -%}
+
+      {%- if loop.last -%}
+        <li class="{{- _breadcrumb_segment_class ~ ' ecl-breadcrumb__current-page' -}}" {{- _breadcrumb_segment_attributes ~ ' aria-current="page"' -}}>
+          {{- link.label -}}
+        </li>
+      {%- else -%}
+        {%- if _breadcrumb_size > 3 and (key > 0 and key < _breadcrumb_size - 2) -%}
+
+          {%- if key == 1 -%}
+            <li class="{{- _breadcrumb_segment_class ~ ' ecl-breadcrumb__segment--ellipsis' -}}" aria-hidden="false" data-ecl-breadcrumb-ellipsis="true">
+              <button type="button" class="ecl-breadcrumb__ellipsis" aria-label="Click to expand" data-ecl-breadcrumb-ellipsis-button="true">…</button>
+              {%- include '../ec-component-icon/icon.html.twig' with _default_icon_structure -%}
+            </li>
+          {%- endif -%}
+
+          {%- set _breadcrumb_segment_attributes = 'data-ecl-breadcrumb-item="expandable" aria-hidden="true"' -%}
+        {%- endif -%}
+
+        <li class="{{- _breadcrumb_segment_class -}}" {{- _breadcrumb_segment_attributes -}}>
+          {%- include '../ec-component-link/link.html.twig' with { link: { type: 'standalone', label: link.label, path: link.path }, extra_classes: 'ecl-breadcrumb__link' } -%}
+          {%- include '../ec-component-icon/icon.html.twig' with _default_icon_structure -%}
+        </li>
+      {%- endif -%}
+
+    {%- endfor -%}
+  </ol>
+</nav>
+{% endspaceless %}

src/ec/packages/ec-component-breadcrumb/breadcrumb.story.js

@@ -0,0 +1,70 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs } 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 breadcrumbDataSimple from '@ecl/ec-specs-breadcrumb/demo/data-simple';
+import breadcrumbDataLong from '@ecl/ec-specs-breadcrumb/demo/data';
+
+import breadcrumbDocs from './docs/breadcrumb.md';
+import breadcrumb from './breadcrumb.html.twig';
+
+function formatLink(l) {
+  const link = {
+    label: l.label,
+    path: l.href,
+  };
+
+  return link;
+}
+
+const simpleBreadcrumbLinks = breadcrumbDataSimple.items.map(formatLink);
+const longBreadcrumbLinks = breadcrumbDataLong.items.map(formatLink);
+
+storiesOf('Components/Breadcrumb', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(withCode)
+  .add(
+    'simple',
+    () =>
+      breadcrumb({
+        links: simpleBreadcrumbLinks,
+        icon_file_path: defaultSprite,
+        navigation_text: breadcrumbDataSimple.label,
+      }),
+    {
+      notes: { markdown: breadcrumbDocs },
+    }
+  )
+  .add(
+    'long',
+    () => {
+      const html = breadcrumb({
+        links: longBreadcrumbLinks,
+        icon_file_path: defaultSprite,
+        navigation_text: breadcrumbDataLong.label,
+      });
+
+      const demo = document.createDocumentFragment();
+
+      const htmlElement = document.createElement('div');
+      htmlElement.innerHTML = html.trim();
+      demo.append(htmlElement.firstChild);
+
+      const scriptElement = document.createElement('script');
+      scriptElement.innerHTML = `
+      var breadcrumbElement = document.querySelector("[data-ecl-breadcrumb]");
+      var breadcrumb = new ECL.Breadcrumb(breadcrumbElement);
+      breadcrumb.init();
+      `;
+      demo.append(scriptElement);
+
+      return demo;
+    },
+    {
+      notes: { markdown: breadcrumbDocs },
+    }
+  );