@studiometa/ui 0.2.48 → 0.2.50

package/atoms/Button/Button.twig

@@ -8,6 +8,7 @@
  * @param string $href
  * @param array $attr
  * @param string $icon
+ * @param array  $icon_attr
  * @param array|string $icon_classes
  * @param 'start'|'end' $icon_position
  * @param boolean $icon_only
@@ -39,12 +40,21 @@
 
 {% set rendered_icon %}
   {% block icon %}
-    {% include '@ui/atoms/Icon/Icon.twig' with {
+    {# @TODO: Breaking change -> Delete icon_classes to use only icon_attr #}
+    {% include '@ui/atoms/Icon/IconInline.twig' with {
       name: icon ?? '',
-      classes: icon_classes ?? {
-        'mr-3': not icon_only and icon_position == 'start',
-        'ml-3': not icon_only and icon_position == 'end',
-       }
+      attr: merge_html_attributes(
+        icon_attr ?? null,
+        {
+          class: {
+            'mr-3': not icon_only and icon_position == 'start',
+            'ml-3': not icon_only and icon_position == 'end',
+          }
+        },
+        {
+          class: icon_classes,
+        },
+      )
     } %}
   {% endblock %}
 {% endset %}

package/atoms/Icon/IconInline.twig

@@ -3,8 +3,9 @@
  * @file
  * Icon component
  *
- * @param string $name The file name of the icon.
- * @param array $attr Custom attributes.
+ * @param string  $name           The file name of the icon.
+ * @param boolean $ignore_missing Avoid empty <span> printing
+ * @param array   $attr           Custom attributes.
  */
 #}
 
@@ -21,6 +22,12 @@
   }
 ) %}
 
-<span {{ html_attributes(attributes) }}>
+{%- set icon -%}
   {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
-</span>
+{%- endset -%}
+
+{% if icon is not empty or not ignore_missing %}
+  <span {{ html_attributes(attributes) }}>
+    {{ icon }}
+  </span>
+{% endif %}

package/atoms/Icon/IconInlineImg.twig

@@ -4,54 +4,57 @@
  * Icon Image component
  * Use `<img>` instead of injecting the SVG file.
  *
- * @param string $name The file name of the icon.
- * @param array $attr Custom attributes.
- * @param array $css_vars Custom CSS variables to pass to the SVG.
- * @param string $current_color Custom color for the `currentColor` CSS variable in the SVG.
+ * @param string  $name           The file name of the icon.
+ * @param boolean $ignore_missing Avoid empty <img> printing
+ * @param array   $attr           Custom attributes.
+ * @param array   $css_vars       Custom CSS variables to pass to the SVG.
+ * @param string  $current_color  Custom color for the `currentColor` CSS variable in the SVG.
  */
 #}
 {%- set svg -%}
   {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
 {%- endset -%}
 
-{% if current_color is defined or css_vars is defined %}
-  {%- set style -%}
-    <style>
-      :root {
-        {% if current_color is defined %}
-          color: {{ current_color }};
-        {% endif %}
-        {% if css_vars is defined %}
-          {% for var, value in css_vars %}
-            --{{ var }}: {{ value }};
-          {% endfor %}
-        {% endif %}
-      }
-    </style>
-  {%- endset -%}
+{% if svg is not empty or not ignore_missing %}
+  {% if current_color is defined or css_vars is defined %}
+    {%- set style -%}
+      <style>
+        :root {
+          {% if current_color is defined %}
+            color: {{ current_color }};
+          {% endif %}
+          {% if css_vars is defined %}
+            {% for var, value in css_vars %}
+              --{{ var }}: {{ value }};
+            {% endfor %}
+          {% endif %}
+        }
+      </style>
+    {%- endset -%}
 
-  {% set svg = svg|replace({ '</svg>': '%s</svg>'|format(style) }) %}
-{% endif %}
+    {% set svg = svg|replace({ '</svg>': '%s</svg>'|format(style) }) %}
+  {% endif %}
 
-{% if not 'xmlns="http://www.w3.org/2000/svg"' in svg %}
-  {% set svg = svg|replace({ '<svg': '<svg %s'|format('xmlns="http://www.w3.org/2000/svg"') }) %}
-{% endif %}
+  {% if not 'xmlns="http://www.w3.org/2000/svg"' in svg %}
+    {% set svg = svg|replace({ '<svg': '<svg %s'|format('xmlns="http://www.w3.org/2000/svg"') }) %}
+  {% endif %}
 
-{% set attributes = merge_html_attributes(
-  attr ?? null,
-  {
-    width: '',
-    height: '',
-    alt: ' ',
-    aria_hidden: 'true'
-  },
-  {
-    src: 'data:image/svg+xml,%s'|format(svg|url_encode),
-    class: [
-      'icon-img',
-      'icon-img--%s'|format(name),
-    ],
-  }
-) %}
+  {% set attributes = merge_html_attributes(
+    attr ?? null,
+    {
+      width: '',
+      height: '',
+      alt: ' ',
+      aria_hidden: 'true'
+    },
+    {
+      src: svg ? 'data:image/svg+xml,%s'|format(svg|url_encode) : '',
+      class: [
+        'icon-img',
+        'icon-img--%s'|format(name),
+      ],
+    }
+  ) %}
 
-<img {{ html_attributes(attributes) }}>
+  <img {{ html_attributes(attributes) }}>
+{% endif %}

package/molecules/IconList/IconList.twig

@@ -0,0 +1,83 @@
+{#
+/**
+ * @file
+ * Icon list component.
+ *
+ * @param array  $attr        Shorthand of $list_attr.
+ * @param array  $list_attr   List attributes.
+ * @param array  $item_attr   List item attributes.
+ * @param array  $icon_attr   Icon attibutes.
+ * @param array  $action_attr Action attributes.
+ * @param string $action_tag  Action tag.
+ * @param array  $items       Items:
+ *   - Use the icon name in key and the url in value for each entry of this array.
+ *   - You can pass an array instead of the url to pass custom attributes to the action.
+ *
+ * @block $item
+ *   Use this block to override the component behavior inside the list items.
+ * @block $icon
+ *   Use this block to override the icons.
+ */
+#}
+
+{% set list_attributes =
+  merge_html_attributes(
+    attr ?? list_attr ?? null,
+    { class: ['flex justify-start items-center gap-3'] }
+  )
+%}
+
+{% set item_attributes = merge_html_attributes(item_attr ?? null, {}) %}
+
+{% set icon_attributes = merge_html_attributes(icon_attr ?? null, { class: 'flex items-center' }) %}
+
+<ul {{ html_attributes(list_attributes) }}>
+  {% for name, value in items %}
+    {%- set rendered_icon -%}
+      {%- block icon -%}
+        {%- include '@ui/atoms/Icon/IconInline.twig' with {
+          name: name,
+          attr: icon_attributes,
+          ignore_missing: true
+        } only -%}
+      {%- endblock -%}
+    {%- endset -%}
+
+    {% if rendered_icon is not empty %}
+      {% if value is iterable %}
+        {% set href = value.attr.href ?? value.href ?? null %}
+        {% set label = value.attr.label ?? value.label ?? (name|capitalize) %}
+        {% set title = value.attr.title ?? value.title %}
+        {% set tag = value.tag
+          ?? (action_tag|default(href is defined and href is not null ? 'a' : 'button'))
+        %}
+        {% set current_attr = merge_html_attributes(value.attr ?? {}, action_attr) %}
+      {% else %}
+        {% set href = value %}
+        {% set label = name|capitalize %}
+        {% set tag = action_tag|default('a') %}
+        {% set current_attr = action_attr %}
+      {% endif %}
+
+      {% set action_attributes =
+        merge_html_attributes(
+          current_attr ?? null,
+          {
+            title: title ?? label,
+            aria_label: label,
+            class: 'block p-1 hover:opacity-80 cursor-pointer'
+          }|merge(tag == 'button' ? { type: 'button' } : { href: href })
+        )
+      %}
+
+      <li {{ html_attributes(item_attributes) }}>
+        {% block item %}
+          {% html_element tag with action_attributes %}
+            {{ rendered_icon }}
+            <span class="sr-only">{{ label }}</span>
+          {% end_html_element %}
+        {% endblock %}
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.48",
+  "version": "0.2.50",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"