test data

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

@@ -8,24 +8,34 @@ npm install --save @ecl/twig-component-icon
 
 ### Parameters
 
-- **"icon"** (associative array) (default: 'predefined structure below')
-  - "path" (string) (default: '') - path/url to general icon file (eg. /path-to-icon/icon.svg)
-  - "name" (string) (default: '') - name of icon, eg. 'facebook', 'twitter'.
-  - "size" (string) (default: 'm') size of icon. Available sizes are 'xs','s','m','l','xl','2xl','fluid'
-  - "transform" (string) (default: '') Transformation of icon. Available transformations are 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical')
-  - "color" (string) (default: '') Color of icon. Available colors are 'default', 'inverted', 'primary'
-  - "title": '' (string) (default: '') Additional title for the icon; shortcut for extra accessibility title
-- **"as_image"**: (boolean) (default: false) Whether the icon is used as an image
+- **"icon"** (associative array) (default: predefined structure):
+  {
+  path (string) (default: ''): path to the icon file,
+  name (string) (default: ''): name of the icon,
+  size (string) (default: 'm'): icon size (available options: '2xs', 'xs','s','m','l','xl','2xl','fluid'),
+  transform (string) (default: ''): icon transformation (available options: 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical'),
+  color (string) (default: ''): icon color (available options: 'default', 'inverted', 'primary')
+  title (string) (default: ''): additional title for the icon; shortcut for extra accessibility title parameter
+  }
+- **"as_image"** (boolean) (default: false): should the icon be dipslayed as an image?
 - **"wt_markup"** (boolean) (default: false): should the icon use the Webtools markup?
-- **"extra_accessibility"** (optional) (object) Extra tags for accessibility when used as an image
-  - description: '' (desc tag)
-  - description_id: '' (desc tag id)
-  - title: '' (title tag)
-  - title_id: '' (title tag id)
-- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
-- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
-  - "name" (string) Attribute name, eg. 'data-test'
-  - "value" (string) Attribute value, eg: 'data-test-1'
+- **"extra_accessibility"** (associative array) (default: {}):
+  {
+  description (string) (default: ''): additional description
+  description_id (string) (default: ''): unique id for the description
+  title (string) (default: ''): additional title
+  title_id (string) (default: ''): unique id for the title
+  role (string) (default: ''): role attribute
+  }
+- **"extra_classes"** (string) (default: ''): additional classes (space separated)
+- **"extra_attributes"** (array) (default: []):
+  [
+  {
+  name (string) (default: ''),
+  value (string) (default: ''),
+  }
+  ...
+  ],
 
 ### Example:
 

src/implementations/twig/components/icon/icon.html.twig

@@ -3,28 +3,31 @@
 {#
   Parameters:
     - "icon" (associative array) (default: predefined structure): format:
+      {
+        path (string) (default: ''): path to the icon file,
+        name (string) (default: ''): name of the icon,
+        size (string) (default: 'm'): icon size (available options: '2xs', 'xs','s','m','l','xl','2xl','fluid'),
+        transform (string) (default: ''): icon transformation (available options: 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical'),
+        color (string) (default: ''): icon color (available options: 'default', 'inverted', 'primary')
+        title (string) (default: ''): additional title for the icon; shortcut for extra accessibility title parameter
+      }
+    - "as_image" (boolean) (default: false): should the icon be dipslayed as an image?
+    - "wt_markup" (boolean) (default: false): should the icon use the Webtools markup?
+    - "extra_accessibility" (associative array) (default: {}):
+      {
+        description (string) (default: ''): additional description
+        description_id (string) (default: ''): unique id for the description
+        title (string) (default: ''): additional title
+        title_id (string) (default: ''): unique id for the title
+        role (string) (default: ''): role attribute
+      }
+    - "extra_classes" (string) (default: ''): additional classes (space separated)
+    - "extra_attributes" (array) (default: []): 
+      [
         {
-          path: '/static/media/icons.cbfd6efe.svg',
-          name: '',
-          size: 'm' (available options: 'xs','s','m','l','xl','2xl','fluid'),
-          transform: 'rotate-0' (available options: 'rotate-0', 'rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical'),
-          color: 'default' (available options: 'default', 'inverted', 'primary')
-          title: '' (additional title for the icon; shortcut for extra accessibility title)
+          name (string) (default: ''),
+          value (string) (default: ''),
         }
-    - "as_image": false,
-    - "wt_markup" (bool) (default: false): should the icon use the Webtools markup?
-    - "extra_accessibility" : {
-        description: '' (desc tag)
-        description_id: '' (desc tag id)
-        title: '' (title tag)
-        title_id: '' (title tag id)
-        role: 'image' (role attribute)
-    }
-    - "extra_classes" (string) (default: '')
-    - "extra_attributes" (array) (default: []): format: [
-        {
-          "name" (string) (default: ''),
-          "value" (optional) (string)
         ...
       ],
 #}
@@ -115,9 +118,30 @@
     focusable="false"
     aria-hidden="{{ _aria_hidden }}"
     {{ _extra_attributes|raw }}>
+
+{% if _extra_accessibility.title is not empty %}
+    <title
+    {% if _extra_accessibility.title_id is not empty %}
+      id="{{ _extra_accessibility.title_id }}"
+    {% endif %}
+    >
+      {{- _extra_accessibility.title -}}
+    </title>
+    {% endif %}
+  {% if _extra_accessibility.description is not empty %}
+    <desc
+    {% if _extra_accessibility.description_id is not empty %}
+      id="{{ _extra_accessibility.description_id }}"
+    {% endif %}
+    >
+      {{- _extra_accessibility.description -}}
+    </desc>
+  {% endif %}
+
   </span>
 
 {% else %}
+
   <svg
     class="{{ _css_class }}"
     focusable="false"

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

@@ -35,7 +35,10 @@ const prepareData = (data, args) => {
   data.icon.name = args.name;
   data.icon.size = args.size;
   data.icon.color = args.color;
-  data.extra_classes = data.icon.color === 'inverted' ? 'ecl-u-bg-dark' : '';
+  data.extra_classes =
+    data.icon.color === 'inverted'
+      ? `ecl-u-bg-dark ${data.extra_classes}`
+      : data.extra_classes;
   data.icon.transform = args.transform;
   return data;
 };

src/implementations/vanilla/components/icon/icon-print.scss

@@ -62,6 +62,10 @@ $theme: null !default;
   fill: map.get($theme, 'color', 'white');
 }
 
+.ecl-icon--rotate-0 {
+  transform: rotateZ(0deg);
+}
+
 .ecl-icon--rotate-90 {
   transform: rotateZ(90deg);
 }

src/implementations/vanilla/components/icon/icon.scss

@@ -63,6 +63,10 @@ $icons: null !default;
   fill: map.get($theme, 'color', 'white');
 }
 
+.ecl-icon--rotate-0 {
+  transform: rotateZ(0deg);
+}
+
 .ecl-icon--rotate-90 {
   transform: rotateZ(90deg);
 }

src/specs/components/icon/demo/data.js

@@ -4,4 +4,18 @@ module.exports = {
     name: 'audio',
     size: 'm',
   },
+  wt_markup: true,
+  extra_classes: 'test',
+  extra_attributes: [
+    {
+      name: 'id',
+      value: 'test',
+    },
+  ],
+  extra_accessibility: {
+    title: 'title',
+    title_id: 'title-id',
+    description: 'additional description',
+    description_id: 'desc-id',
+  },
 };