feat(file-upload): file-upload twig implementation - TWIG-30 (#134)

* feat(file-upload): file-upload twig implementation - TWIG-30

* feat(file-upload): file-upload yarn jest-update  - TWIG-30

* feat(file-upload): file-upload twig link check fix - TWIG-30

* feat(file-upload): snake case instead of camelCase  - TWIG-30

* TWIG-30 - Updating yarn.lock

* TWIG-30 - Updating yarn.lock

* feat(file-upload): Adding adapter, rewriting template and fixed story - TWIG-30

* feat(file-upload) - yarn.lock - TWIG-30

* feat(file-upload) - Fixing extra attributes - TWIG-30

src/ec/packages/ec-component-file-upload/.npmignore

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

src/ec/packages/ec-component-file-upload/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 2.11 (2019-09-13)
+
+### Features
+
+- **file-upload:** add component - TWIG-30

src/ec/packages/ec-component-file-upload/README.md

@@ -0,0 +1,53 @@
+# ECL Twig - EC File Upload component
+
+npm package: `@ecl-twig/ec-component-file-upload`
+
+```shell
+npm install --save @ecl-twig/ec-component-file-upload
+```
+
+## File Upload
+
+### Parameters:
+
+- "id" (string) (default: '') - Input id
+- "name" (string) (default: '') - Input id
+- "invalid" (boolean) (default: false) - When an error is found
+- "invalid_text" (string) (default: '') - Error message
+- "disabled" (boolean) (default: false) - Disables the input field
+- "required" (boolean) (default: false) - Makes the input required
+- "required_text" (string) (default: '') - Text after the label when required
+- "optional_text" (string) (default: '') - Text after the label when not required
+- "extra_classes" (string) (default: '') - Extra classes for the wrapper
+- "extra_attributes" (optional) (array) (default: []) Form extra attributes
+  - "name" (string) Attribute name
+  - "value" (string) Attribute value
+
+### Blocks:
+
+- "label" (string) (default: '')
+- "helper_text" (string) (default: '')
+
+### Example:
+
+<!-- prettier-ignore -->
+```twig
+{% include 'path/to/file-upload.html.twig' with { 
+  id: 'my-file-upload', 
+  label: 'my file upload label', 
+  helper_text: 'this is a helper text', 
+  invalid_text: 'this is an invalid text', 
+  required_text: '*', 
+  optional_text: 'this is an optional text', 
+  disabled: false, 
+  required: false, 
+  invalid: false, 
+  extra_classes: 'ecl-deprecated', 
+  extra_attributes: [ 
+    { 
+        name: 'data-test', 
+        value : 'data-test-1' 
+    }, 
+  ], 
+} %}
+```

src/ec/packages/ec-component-file-upload/__snapshots__/file-upload.test.js.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EC - File Upload  Default renders correctly 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--file-upload"
+>
+  <label
+    class="ecl-form-label"
+    for="example-input-id-1"
+  >
+    Label    
+  </label>
+  <div
+    class="ecl-help-block"
+  >
+    This is the input's helper text.
+  </div>
+  <input
+    class="ecl-file-upload"
+    name="file-upload-name"
+    type="file"
+  />
+</div>
+`;
+
+exports[`EC - File Upload  Default renders correctly when disabled 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--file-upload"
+>
+  <label
+    class="ecl-form-label ecl-form-label--disabled"
+    for="example-input-id-1"
+  >
+    Label    
+  </label>
+  <div
+    class="ecl-help-block ecl-help-block--disabled"
+  >
+    This is the input's helper text.
+  </div>
+  <input
+    class="ecl-file-upload"
+    name="file-upload-name"
+    type="file"
+  />
+</div>
+`;
+
+exports[`EC - File Upload  Default renders correctly when invalid 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--file-upload"
+>
+  <label
+    class="ecl-form-label ecl-form-label--invalid"
+    for="example-input-id-1"
+  >
+    Label    
+  </label>
+  <div
+    class="ecl-help-block"
+  >
+    This is the input's helper text.
+  </div>
+  <div
+    class="ecl-feedback-message"
+  >
+    Invalid text
+  </div>
+  <input
+    class="ecl-file-upload ecl-file-upload--invalid"
+    name="file-upload-name"
+    type="file"
+  />
+</div>
+`;
+
+exports[`EC - File Upload  Default renders correctly when required 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--file-upload"
+>
+  <label
+    class="ecl-form-label"
+    for="example-input-id-1"
+  >
+    Label
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
+  </label>
+  <div
+    class="ecl-help-block"
+  >
+    This is the input's helper text.
+  </div>
+  <input
+    class="ecl-file-upload"
+    required=""
+    type="file"
+  />
+</div>
+`;
+
+exports[`EC - File Upload  Default renders correctly with extra attributes 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--file-upload"
+>
+  <label
+    class="ecl-form-label"
+    for="example-input-id-1"
+  >
+    Label    
+  </label>
+  <div
+    class="ecl-help-block"
+  >
+    This is the input's helper text.
+  </div>
+  <input
+    class="ecl-file-upload"
+    data-test="data-test-value"
+    data-test-1="data-test-value-1"
+    name="file-upload-name"
+    type="file"
+  />
+</div>
+`;
+
+exports[`EC - File Upload  Default renders correctly with extra class names 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--file-upload custom-class custom-class--test"
+>
+  <label
+    class="ecl-form-label"
+    for="example-input-id-1"
+  >
+    Label    
+  </label>
+  <div
+    class="ecl-help-block"
+  >
+    This is the input's helper text.
+  </div>
+  <input
+    class="ecl-file-upload"
+    name="file-upload-name"
+    type="file"
+  />
+</div>
+`;

src/ec/packages/ec-component-file-upload/demo/data.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */
+import specData from '@ecl/ec-specs-file-upload/demo/data--default';
+
+const adapter = initialData => {
+  // Copy reference specification demo data.
+  const adaptedData = JSON.parse(JSON.stringify(initialData));
+  adaptedData.helper_text = adaptedData.helperText;
+  delete adaptedData.helperText;
+
+  return adaptedData;
+};
+
+export default adapter(specData);

src/ec/packages/ec-component-file-upload/file-upload.html.twig

@@ -0,0 +1,129 @@
+{% spaceless %}
+
+{#
+  Blocks:
+  - "label" (string) (default: '')
+  - "helper_text" (string) (default: '')
+  
+  Parameters:
+  - "id" (string) (default: '')
+  - "name" (string) (default: '')
+  - "invalid" (boolean) (default: false)
+  - "invalid_text" (string) (default: '')
+  - "disabled" (boolean) (default: false)
+  - "required" (boolean) (default: false)
+  - "required_text" (string) (default: '*')
+  - "optional_text" (string) (default: '')
+  - "extra_classes" (string) (default: '')
+  - "extra_attributes" (array) (default: []): format: [
+        {
+          "name" (string) (default: ''),
+          "value" (string) (default: '')
+        },
+        ...
+      ]
+#}
+
+{# Parameters #}
+
+{% set _id = id|default('') %}
+{% set _name = name|default('') %}
+{% set _invalid = invalid|default(false) %}
+{% set _invalid_text = invalid_text|default('') %}
+{% set _disabled = disabled|default(false) %}
+{% set _required = required|default(false) %}
+{% set _required_text = required_text|default('*') %}
+{% set _optional_text = optional_text|default('') %}
+{% set _extra_classes = extra_classes|default('') %}
+
+{# Blocks #}
+{% set _label = label|default('') %}
+{% set _helper_text = helper_text|default('') %}
+
+{# Internal properties #}
+
+{% set _component_class = 'ecl-file-upload' %}
+{% set _main_attributes = '' %}
+{% set _disabled_variant = '--disabled' %}
+{% set _invalid_variant = '--invalid' %}
+{% set _label_base_class = 'ecl-form-label' %}
+{% set _label_classes = _label_base_class %}
+{% set _help_classes = 'ecl-help-block' %}
+{% set _group_css_classes = 'ecl-form-group ecl-form-group--file-upload' %}
+{% set _extra_attributes = '' %}
+
+{# Internal logic - Process properties #}
+
+{% if _id is not empty %}
+  {% set _main_attributes = _component_attributes ~ ' ' ~ 'id="' ~ _id ~ '"' %}
+{% endif %}
+
+{% if _name is not empty %}
+  {% set _main_attributes = _component_attributes ~ ' ' ~ 'name="' ~ _name ~ '"' %}
+{% endif %}
+
+{% if _required %}
+  {% set _main_attributes = _component_attributes ~ ' ' ~ 'required' %}
+{% endif %}
+
+{% if _invalid %}
+  {% set _label_classes = _label_base_class ~ ' ' ~ _label_base_class ~ _invalid_variant %}
+  {% set _component_class = _component_class ~ ' ' ~ _component_class ~ _invalid_variant %}
+{% endif %}
+
+{% if _disabled %}
+  {% set _label_classes = _label_base_class ~ ' ' ~ _label_base_class ~ _disabled_variant %}
+  {% set _help_classes = _help_classes ~ ' ' ~ _help_classes ~ _disabled_variant %}
+  {% set _component_attributes = _component_attributes ~ ' ' ~ 'disabled' %}
+{% endif %}
+
+{% if _extra_classes is not empty %}
+  {% set _group_css_classes = _group_css_classes ~ ' ' ~ _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 #}
+
+<div class="{{ _group_css_classes }}">
+  {% if _label is not empty %}
+    <label class="{{ _label_classes }}"
+      {{- _id ? 'for="' ~ _id ~ '"' -}}
+    >
+      {%- block label _label -%}
+      {%- if _required and _required_text is not empty -%}
+        <span class="{{ _label_base_class }}__required">
+          {{- _required_text -}}
+        </span>
+      {%- elseif not _required and _optional_text is not empty -%}
+        <span class="{{ _label_base_class }}__optional">
+          {{ _optional_text -}}
+        </span>
+      {% endif %}
+    </label>
+  {% endif %}
+
+  {% if _helper_text is not empty %}
+    <div class="{{ _help_classes }}">
+      {%- block helper_text _helper_text -%}
+    </div>
+  {% endif %}
+
+  {% if _invalid and _invalid_text is not empty %}
+    <div class="ecl-feedback-message">
+      {%- block invalid_text _invalid_text -%}
+    </div>
+  {% endif %}
+
+  <input type="file"
+    class="{{ _component_class }}"
+    {{- _main_attributes -}}
+    {{- _extra_attributes|raw -}}
+  />
+</div>
+
+{% endspaceless %}