feat(file): add download link per translation - INNO-1581 (#105)

* feat(file): add download link per translation - INNO-1581 * remove icon_path * fix tests
ec-europa · Jun 28, 2019 · c2218a7 · c2218a7
1 parent b508e73
commit c2218a7
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 21 deletions.
diff --git a/src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap b/src/ec/packages/ec-component-file/__snapshots__/file.test.js.snap
@@ -111,7 +111,7 @@ exports[`EC - File With translation renders correctly 1`] = `
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#bg"
           hreflang="bg"
         >
           <span
@@ -152,7 +152,7 @@ exports[`EC - File With translation renders correctly 1`] = `
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#es"
           hreflang="es"
         >
           <span
@@ -193,7 +193,7 @@ exports[`EC - File With translation renders correctly 1`] = `
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#fr"
           hreflang="fr"
         >
           <span
@@ -336,7 +336,7 @@ exports[`EC - File With translation renders correctly with extra attributes 1`]
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#bg"
           hreflang="bg"
         >
           <span
@@ -377,7 +377,7 @@ exports[`EC - File With translation renders correctly with extra attributes 1`]
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#es"
           hreflang="es"
         >
           <span
@@ -418,7 +418,7 @@ exports[`EC - File With translation renders correctly with extra attributes 1`]
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#fr"
           hreflang="fr"
         >
           <span
@@ -559,7 +559,7 @@ exports[`EC - File With translation renders correctly with extra class names 1`]
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#bg"
           hreflang="bg"
         >
           <span
@@ -600,7 +600,7 @@ exports[`EC - File With translation renders correctly with extra class names 1`]
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#es"
           hreflang="es"
         >
           <span
@@ -641,7 +641,7 @@ exports[`EC - File With translation renders correctly with extra class names 1`]
         <a
           class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__translation-download"
           download=""
-          href="/example"
+          href="/example#fr"
           hreflang="fr"
         >
           <span

diff --git a/src/ec/packages/ec-component-file/demo/data.js b/src/ec/packages/ec-component-file/demo/data.js
@@ -15,15 +15,6 @@ function formatIcon(i) {
   return icon;
 }
 
-function formatButton(b) {
-  const button = {
-    label: b.label,
-    icon: formatIcon(b.icon),
-  };
-
-  return button;
-}
-
 function formatLink(l) {
   const link = {
     link: {
@@ -47,9 +38,51 @@ export const dataWithTranslation = {
   icon: formatIcon(specDataWithTranslation.icon),
   download: formatLink(specDataWithTranslation.download),
   translation: {
-    toggle: formatButton(specDataWithTranslation.translation.toggle),
+    toggle: {
+      ...specDataWithTranslation.translation.toggle,
+      icon: {
+        path: '/static/icons.svg',
+      },
+    },
     description: specDataWithTranslation.translation.description,
-    items: specDataWithTranslation.translation.items,
+    items: [
+      {
+        ...specDataWithTranslation.translation.items[0],
+        download: {
+          link: {
+            label: 'Download',
+            path: '/example#bg',
+          },
+          icon: {
+            path: '/static/icons.svg',
+          },
+        },
+      },
+      {
+        ...specDataWithTranslation.translation.items[1],
+        download: {
+          link: {
+            label: 'Download',
+            path: '/example#es',
+          },
+          icon: {
+            path: '/static/icons.svg',
+          },
+        },
+      },
+      {
+        ...specDataWithTranslation.translation.items[2],
+        download: {
+          link: {
+            label: 'Download',
+            path: '/example#fr',
+          },
+          icon: {
+            path: '/static/icons.svg',
+          },
+        },
+      },
+    ],
   },
 };
 

diff --git a/src/ec/packages/ec-component-file/docs/file.md b/src/ec/packages/ec-component-file/docs/file.md
@@ -19,6 +19,7 @@ npm install --save @ecl-twig/ec-component-file
     - "title" (string) (default: '')
     - "meta" (string) (default: '')
     - "lang" (string) (default: '')
+    - "download" (object) (default to the parent download property) object of type Link
   - "description (string) (default:'')
 - "extra_classes" (optional) (string) (default: '')
 - "extra_attributes" (optional) (array) (default: [])
@@ -33,6 +34,7 @@ npm install --save @ecl-twig/ec-component-file
   title: 'State of the Union 2018 brochure', 
   language: 'English', 
   meta: '(16.2 MB - PDF)', 
+  icon_path: 'path/to/icons.svg', 
   icon: { 
     type: 'general', 
     name: 'copy', 

diff --git a/src/ec/packages/ec-component-file/file.html.twig b/src/ec/packages/ec-component-file/file.html.twig
@@ -12,6 +12,7 @@
       - "title" (string) (default: '')
       - "meta" (string) (default: '')
       - "lang" (string) (default: '')
+      - "download" (object) (default to the parent download property) object of type Link
     - "description (string) (default:'')
   - "extra_classes" (optional) (string) (default: '')
   - "extra_attributes" (optional) (array) (default: [])
@@ -63,6 +64,11 @@
         type: 'standalone',
         icon_position: 'after',
       }),
+      icon: _download.icon|default({})|merge({
+        type: 'ui',
+        name: 'download',
+        size: 'fluid'
+      }),
       extra_classes: 'ecl-file__download',
       extra_attributes: [{ name: 'download' }]
     }) only %}
@@ -73,6 +79,12 @@
       {% include '../ec-component-button/button.html.twig' with _translation.toggle|merge({
         variant: 'ghost',
         type: 'button',
+        icon: _translation.toggle.icon|default({})|merge({
+          type: 'ui',
+          name: 'corner-arrow',
+          size: 'fluid',
+          transform: 'rotate-180'
+        }),
         extra_classes: 'ecl-file__translation-toggle',
         extra_attributes: [{ name: 'data-ecl-file-translation-toggle' }]
       }) only %}
@@ -90,10 +102,15 @@
               <div class="ecl-file__translation-meta">{{ _item.meta }}</div>
             </div>
             {% include '../ec-component-link/link.html.twig' with _download|merge({
-              link: _download.link|default({})|merge({
+              link: _item.download.link|default(_download.link|default({}))|merge({
                 type: 'standalone',
                 icon_position: 'after'
               }),
+              icon: _item.download.icon|default(_download.icon|default({}))|merge({
+                type: 'ui',
+                name: 'download',
+                size: 'fluid'
+              }),
               extra_classes: 'ecl-file__translation-download',
               extra_attributes: [
                 { name: 'download' },

diff --git a/src/ec/packages/ec-component-file/file.story.js b/src/ec/packages/ec-component-file/file.story.js
@@ -14,6 +14,16 @@ import file from './file.html.twig';
 dataWithTranslation.icon.path = defaultSprite;
 dataWithTranslation.download.icon.path = defaultSprite;
 dataWithTranslation.translation.toggle.icon.path = defaultSprite;
+dataWithTranslation.translation.items[0].download.icon = {
+  path: defaultSprite,
+};
+dataWithTranslation.translation.items[1].download.icon = {
+  path: defaultSprite,
+};
+dataWithTranslation.translation.items[2].download.icon = {
+  path: defaultSprite,
+};
+
 dataWithoutTranslation.icon.path = defaultSprite;
 dataWithoutTranslation.download.icon.path = defaultSprite;