feat(file): label(s) also in the default variant - FRONT-3350

src/implementations/twig/components/file/README.md

@@ -17,7 +17,8 @@ npm install --save @ecl/twig-component-file
 - **"detail_meta"** (array) (default: []) Meta element for the thumbnail variant
 - **"download"** (object) (default: {}): object of type Link
 - **"image"** (object) (default: {}): image for the thumbnail variant
-- **"label"** (object) (default: {}) label for the thumbnail variant
+- **"label"** (array of objects of type Label) (default: []) labels
+  ** also supported as an object with a single label **
 - **"lists"** (array) (default: []) Array of objects of type "description list"
   - "variant" (optional) (taxonomy or horizontal)
   - "items" (array)
@@ -39,43 +40,43 @@ npm install --save @ecl/twig-component-file
 
 <!-- prettier-ignore -->
 ```twig
-{% include '@ecl/file/file.html.twig' with { 
-  title: 'State of the Union 2018 brochure', 
-  language: 'English', 
-  meta: '(16.2 MB - PDF)', 
-  icon_path: 'path/to/icons.svg', 
-  icon: { 
-    name: 'copy', 
-    size: '2xl', 
-    path: 'path/to/icons.svg', 
-  }, 
-  download: { 
-    label: 'Download', 
-    path: '/example', 
-    icon: { 
-      name: 'download', 
-      size: 'fluid', 
-      path: 'path/to/icons.svg', 
-    }, 
-  }, 
-  translation: { 
-    toggle: { 
-      label: 'Other languages (3)', 
-      icon: { 
-        name: 'corner-arrow', 
-        size: 'fluid', 
-        transform: 'rotate-180', 
-      }, 
-    }, 
-    description: 'Looking for another language which is not on the list? Find out why.', 
-    items: [ 
-      { 
-        title: 'български', 
-        meta: '(15.7 MB - PDF)', 
-        lang: 'bg', 
-      }, 
-      ... 
-    ], 
-  }, 
+{% include '@ecl/file/file.html.twig' with {
+  title: 'State of the Union 2018 brochure',
+  language: 'English',
+  meta: '(16.2 MB - PDF)',
+  icon_path: 'path/to/icons.svg',
+  icon: {
+    name: 'copy',
+    size: '2xl',
+    path: 'path/to/icons.svg',
+  },
+  download: {
+    label: 'Download',
+    path: '/example',
+    icon: {
+      name: 'download',
+      size: 'fluid',
+      path: 'path/to/icons.svg',
+    },
+  },
+  translation: {
+    toggle: {
+      label: 'Other languages (3)',
+      icon: {
+        name: 'corner-arrow',
+        size: 'fluid',
+        transform: 'rotate-180',
+      },
+    },
+    description: 'Looking for another language which is not on the list? Find out why.',
+    items: [
+      {
+        title: 'български',
+        meta: '(15.7 MB - PDF)',
+        lang: 'bg',
+      },
+      ...
+    ],
+  },
 } %}
 ```

src/implementations/twig/components/file/__snapshots__/file.test.js.snap

@@ -1759,6 +1759,77 @@ exports[`File Without translation renders correctly 1`] = `
 </jest>
 `;
 
+exports[`File Without translation renders correctly with a single label 1`] = `
+<jest>
+  <div
+    class="ecl-file"
+    data-ecl-file=""
+  >
+    <div
+      class="ecl-file__container"
+    >
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--2xl ecl-file__icon"
+        focusable="false"
+      >
+        <use
+          xlink:href="/icons.svg#file"
+        />
+      </svg>
+      <div
+        class="ecl-file__info"
+      >
+        <div
+          class="ecl-file__label"
+        >
+          <span
+            class="ecl-label ecl-label--highlight"
+          >
+            highlight
+          </span>
+        </div>
+        <div
+          class="ecl-file__title"
+        >
+          State of the Union 2018 brochure
+        </div>
+        <div
+          class="ecl-file__language"
+        >
+          English
+        </div>
+        <div
+          class="ecl-file__meta"
+        >
+          (16.2 MB - PDF)
+        </div>
+      </div>
+      <a
+        class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
+        download=""
+        href="/example"
+      >
+        <span
+          class="ecl-link__label"
+        >
+          Download
+        </span>
+        <svg
+          aria-hidden="true"
+          class="ecl-icon ecl-icon--fluid ecl-link__icon"
+          focusable="false"
+        >
+          <use
+            xlink:href="/icons.svg#download"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</jest>
+`;
+
 exports[`File Without translation renders correctly with extra attributes 1`] = `
 <jest>
   <div
@@ -1884,3 +1955,83 @@ exports[`File Without translation renders correctly with extra class names 1`] =
   </div>
 </jest>
 `;
+
+exports[`File Without translation renders correctly with multiple labels 1`] = `
+<jest>
+  <div
+    class="ecl-file"
+    data-ecl-file=""
+  >
+    <div
+      class="ecl-file__container"
+    >
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--2xl ecl-file__icon"
+        focusable="false"
+      >
+        <use
+          xlink:href="/icons.svg#file"
+        />
+      </svg>
+      <div
+        class="ecl-file__info"
+      >
+        <div
+          class="ecl-file__label"
+        >
+          <span
+            class="ecl-label ecl-label--highlight"
+          >
+            highlight
+          </span>
+        </div>
+        <div
+          class="ecl-file__label"
+        >
+          <span
+            class="ecl-label ecl-label--low"
+          >
+            important
+          </span>
+        </div>
+        <div
+          class="ecl-file__title"
+        >
+          State of the Union 2018 brochure
+        </div>
+        <div
+          class="ecl-file__language"
+        >
+          English
+        </div>
+        <div
+          class="ecl-file__meta"
+        >
+          (16.2 MB - PDF)
+        </div>
+      </div>
+      <a
+        class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-file__download"
+        download=""
+        href="/example"
+      >
+        <span
+          class="ecl-link__label"
+        >
+          Download
+        </span>
+        <svg
+          aria-hidden="true"
+          class="ecl-icon ecl-icon--fluid ecl-link__icon"
+          focusable="false"
+        >
+          <use
+            xlink:href="/icons.svg#download"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</jest>
+`;

src/implementations/twig/components/file/file.html.twig

@@ -11,7 +11,8 @@
   - "detail_meta" (array) (default: []) Meta element(s) for the thumbnail variant
   - "download" (object) (default: {}): object of type Link
   - "image" (object) (default: {}): image for the thumbnail variant
-  - "label" (object) (default: {}) Object of type label
+  - "label" (array) (default: {}) array of objects of type
+  ** still supported as an object with a single label **
   - "lists" (array) (default: []) Array of objects of type "description list".
   - "variant" (optional) (taxonomy or horizontal)
   - "items" (array)
@@ -51,6 +52,12 @@
 {% set _description = description|default('') %}
 {% set _extra_attributes = 'data-ecl-file' %}
 
+{% if _label.label is defined %}
+  {% set _labels = [_label] %}
+{% elseif _label[0] is defined %}
+  {% set _labels = _label %}
+{% endif %}
+
 {% if _translation is not empty and _translation.items is not empty and _translation.items is iterable %}
   {% set _extra_attributes = _extra_attributes ~ ' ' ~ 'data-ecl-auto-init="FileDownload"' %}
 {% endif %}
@@ -87,23 +94,27 @@
 
 <div class="{{ _css_class }}" {{ _extra_attributes|raw }}>
   <div class="ecl-file__container">
-  {% if _variant == 'thumbnail' %}
+  {% if _variant == 'thumbnail'%}
     <div class="ecl-file__detail">
       <div class="ecl-file__detail-info">
-      {% if _label is not empty and _label.label is not empty%}
+      {% if _labels is defined and _labels is iterable %}
+        {% for _label in _labels %}
         <div class="ecl-file__label">
           {% include '@ecl/label/label.html.twig' with _label only %}
         </div>
+        {% endfor %}
       {% endif %}
       {% if _meta_detail_string is not empty %}
         <div class="ecl-file__detail-meta">
           {{- _meta_detail_string -}}
         </div>
       {% endif %}
+    {% if _variant == 'thumbnail' %}
         <div class="ecl-file__title">{{ _title }}</div>
       {% if _description is not empty %}
         <div class="ecl-file__description">{{ _description }}</div>
       {% endif %}
+    {% endif %}
       </div>
     {% if _image is not empty and _image.src is defined and _image.src is not empty %}
       <img
@@ -120,14 +131,22 @@
       {% endfor %}
     </div>
     {% endif %}
-  {% else %}
+  {% endif %}
+  {% if _variant != 'thumbnail' %}
     {% include '@ecl/icon/icon.html.twig' with {
       icon: _icon,
       extra_classes: 'ecl-file__icon',
     } only %}
   {% endif %}
   {% if _title is not empty or language is not empty or meta is not empty %}
     <div class="ecl-file__info">
+    {% if _variant != 'thumbnail' and _labels is defined and _labels is iterable %}
+      {% for _label in _labels %}
+      <div class="ecl-file__label">
+        {% include '@ecl/label/label.html.twig' with _label only %}
+      </div>
+      {% endfor %}
+    {% endif %}
     {% if _title is not empty and _variant != 'thumbnail' %}
       <div class="ecl-file__title">{{ _title }}</div>
     {% endif %}

src/implementations/twig/components/file/file.story.js

@@ -24,9 +24,9 @@ const getArgs = (data) => {
   if (data.description) {
     args.description = data.description;
   }
-  if (data.label) {
-    args.label = data.label.label;
-  }
+
+  args.label = data.label ? data.label.label : '';
+
   if (data.image) {
     args.image = data.image.src;
   }
@@ -66,18 +66,16 @@ const getArgTypes = (data) => {
     },
   };
 
-  if (data.label) {
-    argTypes.label = {
-      name: 'label',
-      type: { name: 'string' },
-      description: 'The optional label element',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: '' },
-        category: 'Content',
-      },
-    };
-  }
+  argTypes.label = {
+    name: 'label',
+    type: { name: 'string' },
+    description: 'The optional label element',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+      category: 'Content',
+    },
+  };
 
   if (data.description) {
     argTypes.description = {
@@ -161,11 +159,13 @@ const prepareData = (data, args) => {
   }
   data.detail_meta = args.detail_meta;
   data.title = args.title;
-  if (data.label) {
+  if (args.label) {
     data.label = {
       label: args.label,
-      variant: data.label.variant,
+      variant: data.label ? data.label.variant : 'highlight',
     };
+  } else {
+    delete data.label;
   }
   data.description = args.description;
   data.download.link.label = args.download_label;