Merge ac409c5 into ba02d34

lmc-eu · May 2, 2024 · 712bd41 · 712bd41
2 parents ba02d34 + ac409c5
commit 712bd41
Show file tree

Hide file tree

Showing 42 changed files with 1,609 additions and 619 deletions.
diff --git a/apps/web-twig-demo/assets/scripts/toast-dynamic.ts b/apps/web-twig-demo/assets/scripts/toast-dynamic.ts
@@ -0,0 +1,22 @@
+import { Toast } from '@lmc-eu/spirit-web/src/js/index.esm';
+
+const addDynamicToast = (event, containerId) => {
+  const formElement = event.target.closest('form');
+  const config = {
+    color: formElement.querySelector('#toast-color').value,
+    containerId,
+    content: formElement.querySelector('#toast-content').value,
+    hasIcon: formElement.querySelector('#toast-has-icon').checked,
+    id: `my-dynamic-toast-${Date.now()}`,
+    isDismissible: formElement.querySelector('#toast-is-dismissible').checked,
+  };
+
+  const toast = new Toast(null, config);
+  toast.show();
+  console.log('Created dynamic toast with config:', config);
+};
+
+// Make it available in the global scope
+window.addDynamicToast = addDynamicToast;
+
+export default addDynamicToast;
diff --git a/apps/web-twig-demo/webpack.config.js b/apps/web-twig-demo/webpack.config.js
@@ -25,6 +25,7 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('app', './assets/app.ts')
+    .addEntry('toastDynamic', './assets/scripts/toast-dynamic.ts')
     .addEntry('fileUploaderImagePreview', './assets/scripts/file-uploader-image-preview.ts')
     .addEntry('fileUploaderMetaData', './assets/scripts/file-uploader-meta-data.ts')
     .addEntry('formValidations', './assets/scripts/form-validations.ts')

diff --git a/packages/web-twig/src/Resources/components/Icon/Icon.twig b/packages/web-twig/src/Resources/components/Icon/Icon.twig
@@ -2,14 +2,16 @@
 {%- set props = props | default([]) -%}
 {%- set _ariaHidden = props.ariaHidden ?? true -%}
 {%- set _isReusable = props.isReusable ?? true -%}
+{%- set _isSymbol = props.isSymbol | default(false) -%}
 {%- set _name = props.name -%}
 {%- set _boxSize = props.boxSize | default('24') -%}
 {%- set _title = props.title | default(null) -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
+{%- set _symbolName = _isSymbol ? _name : '' -%}
 {%- set _mainProps = props | filter((value, prop) => prop is not same as('ariaHidden')) | merge({
     'aria-hidden': _ariaHidden ? 'true' : 'false',
 }) -%}
 
-{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _styleProps.className, style: _styleProps.style, size: _boxSize, title: _title, mainProps: _mainProps }, _isReusable) }}
+{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _styleProps.className, style: _styleProps.style, size: _boxSize, title: _title, mainProps: _mainProps }, _isReusable, false, _symbolName) }}
diff --git a/packages/web-twig/src/Resources/components/Icon/README.md b/packages/web-twig/src/Resources/components/Icon/README.md
@@ -23,21 +23,45 @@ Without lexer:
 }} %}{% endembed %}
 ```
 
+## Render as Symbol
+
+If you need to prerender the icon as a [symbol][mdn-symbol], you can use the `isSymbol` prop:
+
+```html
+<Icon name="warning" isSymbol />
+```
+
+The ID of the symbol will be the same as the `name` prop and the whole SVG element will be hidden.
+
+⚠️ Please note that SVG IDs are global and you might encounter ID conflicts if you use the same in
+`name` prop as an existing element on your site.
+
+👉 Even though the `svg` only includes the `symbol` element, the `svg` still takes some space in browser,
+so you might want to hide it using either wrapping element with `hidden` attribute or use CSS.
+
+```html
+<div hidden>
+  <Icon name="warning" isSymbol />
+</div>
+```
+
 ## API
 
-| Name         | Type     | Default | Required | Description                           |
-| ------------ | -------- | ------- | -------- | ------------------------------------- |
-| `ariaHidden` | `bool`   | `true`  | ✕        | If true, icon is hidden from a11y API |
-| `boxSize`    | `number` | `24`    | ✕        | Size of the icon                      |
-| `isReusable` | `bool`   | `true`  | ✕        | Enables reusability of SVG icons      |
-| `name`       | `string` | —       | ✔        | Name of the icon, case sensitive      |
-| `title`      | `string` | `null`  | ✕        | Optional title to display on hover    |
+| Name         | Type     | Default | Required | Description                                                                                                             |
+| ------------ | -------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `ariaHidden` | `bool`   | `true`  | ✕        | If true, icon is hidden from a11y API                                                                                   |
+| `boxSize`    | `number` | `24`    | ✕        | Size of the icon                                                                                                        |
+| `isReusable` | `bool`   | `true`  | ✕        | Enables reusability of SVG icons                                                                                        |
+| `isSymbol`   | `bool`   | `false` | ✕        | If true, the element will be rendered as SVG symbol with the name assigned to the ID attribute, other props are skipped |
+| `name`       | `string` | —       | ✔        | Name of the icon, case sensitive                                                                                        |
+| `title`      | `string` | `null`  | ✕        | Optional title to display on hover                                                                                      |
 
 Get the list of `name` options in the [Icon package][icon-package] or your source of icons.
 
 Also, UNSAFE styling props are available, see the [Escape hatches][escape-hatches]
 section in README to learn how and when to use them.
 
-[inlinesvg-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/docs/inlineSVG.md
-[icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
+[icon-package]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/icons
+[inlinesvg-docs]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/docs/inlineSVG.md
+[mdn-symbol]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
diff --git a/packages/web-twig/src/Resources/components/Icon/__tests__/__fixtures__/icon.twig b/packages/web-twig/src/Resources/components/Icon/__tests__/__fixtures__/icon.twig
@@ -0,0 +1,19 @@
+<Icon name="warning" />
+
+<!-- Render with title -->
+<Icon name="warning" title="This is warning!" />
+
+<!-- Render with boxSize -->
+<Icon name="warning" boxSize="32" />
+
+<!-- Render as symbol -->
+<Icon name="info" isSymbol />
+
+<!-- Render with all props -->
+<Icon
+    ariaHidden={ false }
+    boxSize="48"
+    isReusable={ false }
+    name="info"
+    title="This is info!"
+/>
diff --git a/packages/web-twig/src/Resources/components/Icon/__tests__/__fixtures__/iconDefault.twig b/packages/web-twig/src/Resources/components/Icon/__tests__/__fixtures__/iconDefault.twig
diff --git a/.../__snapshots__/iconDefault.twig.snap.html → ...tests__/__snapshots__/icon.twig.snap.html b/.../__snapshots__/iconDefault.twig.snap.html → ...tests__/__snapshots__/icon.twig.snap.html
@@ -7,16 +7,26 @@
   <body>
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="f0c4c080075841bbc911dd74dc9df8be" aria-hidden="true">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor">
-    </path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bb6d031b3d8f5bbf783f291e56d73a0a" aria-hidden="true">
+    </path></svg> <!-- Render with title -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bb6d031b3d8f5bbf783f291e56d73a0a" aria-hidden="true">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor">
     </path>
     <title>
       This is warning!
-    </title></svg> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" id="8bc4779b0487f150e0300458b1973f89" aria-hidden="true">
+    </title></svg> <!-- Render with boxSize -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" id="88980d19ca0d40366928acb0ed6d6f1c" aria-hidden="true">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor">
+    </path></svg> <!-- Render as symbol -->
+    <svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="info" viewbox="0 0 24 24">
+      <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="currentColor">
+      </path>
+    </symbol></svg> <!-- Render with all props -->
+    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 24 24" fill="none" aria-hidden="false">
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="currentColor">
     </path>
     <title>
-      This is warning!
+      This is info!
     </title></svg>
   </body>
 </html>