Feat(web-twig): Remove Icon class from the Icon component

lmc-eu · Sep 15, 2022 · 3987190 · 3987190
1 parent 489784a
commit 3987190
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 29 deletions.
diff --git a/packages/web-twig/src/Resources/components/Icon/Icon.twig b/packages/web-twig/src/Resources/components/Icon/Icon.twig
@@ -4,10 +4,4 @@
 {%- set _size = props.size | default('24') -%}
 {%- set _title = props.title | default(null) -%}
 
-{# Class names #}
-{%- set _rootClassName = _spiritClassPrefix ~ 'Icon' -%}
-
-{# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _class ] -%}
-
-{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _classNames|join(' '), size: _size, title: _title, mainProps: props }) }}
+{{ inlineSvg('@icons-assets/' ~ _name ~ '.svg', { class: _class, size: _size, title: _title, mainProps: props }) }}
diff --git a/packages/web-twig/src/Resources/components/Icon/README.md b/packages/web-twig/src/Resources/components/Icon/README.md
@@ -1,7 +1,5 @@
 # Icon
 
-This is Twig implementation of the [Icon] component.
-
 Icon component uses inlineSVG extension, so don't forget to add icons path in the configuration
 as seen in [inlineSVG docs].
 
@@ -34,8 +32,7 @@ Without lexer:
 | `size`    | `number` | `24`    | no       | Size of the icon                   |
 | `title`   | `string` | `null`  | no       | Optional title to display on hover |
 
-Get list of `name` options in the [Icon package] or your source of icons.
+Get the list of `name` options in the [Icon package] or your source of icons.
 
-[icon]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/components/Icon
 [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
diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set alertDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set alertDefault.twig__1.html
@@ -1,34 +1,34 @@
 <html><body>
 <div class="Alert Alert--success" role="alert">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="c8234aea19a1765fd7159042b3b9e243" class="Icon ">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="f2a24493df19a9ab7cc4ae396bd3af1f">
 <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="#132930"></path>
 </svg>
 
   <div>    Message
 </div>
 </div>
 <div class="Alert Alert--danger" role="alert">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="c846042e9c5c04cfddd9711f60b1041f" class="Icon ">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="74cb08d4169396b608227b1f2248b99b">
 <path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930"></path>
 </svg>
 
   <div>  Message
 </div>
 </div>
 <div class="Alert Alert--informative" role="alert">
-  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#c8234aea19a1765fd7159042b3b9e243"></use></svg>
+  <svg width="24" height="24" viewbox="0 0 24 24" fill="none"><use href="#f2a24493df19a9ab7cc4ae396bd3af1f"></use></svg>
 
   <div>  Message
 </div>
 </div>
 <div class="Alert Alert--informative Alert--center" role="alert">
-  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#c8234aea19a1765fd7159042b3b9e243"></use></svg>
+  <svg width="24" height="24" viewbox="0 0 24 24" fill="none"><use href="#f2a24493df19a9ab7cc4ae396bd3af1f"></use></svg>
 
   <div>  Message
 </div>
 </div>
 <div class="Alert Alert--informative Alert--center" role="alert">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="277452fbebadc2edda859e14f02d84a1" class="Icon ">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="6884320ae887d659a2f9665886b25e49">
 <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 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z" fill="#132930"></path>
 </svg>
 

diff --git a/.../__snapshots__/ComponentsSnapshotTest__test with data set breadcrumbsDefault.twig__1.html b/.../__snapshots__/ComponentsSnapshotTest__test with data set breadcrumbsDefault.twig__1.html
@@ -2,19 +2,19 @@
 <nav class="Breadcrumbs" aria-label="Breadcrumb">
 <ol>
 <li class="d-none d-tablet-flex">
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="df26744430af4aa0758c272de1191fe3" class="Icon "><path d="M9.29006 7.0545C8.90006 7.4445 8.90006 8.0745 9.29006 8.4645L13.1701 12.3445L9.29006 16.2245C8.90006 16.6145 8.90006 17.2445 9.29006 17.6345C9.68006 18.0245 10.3101 18.0245 10.7001 17.6345L15.2901 13.0445C15.6801 12.6545 15.6801 12.0245 15.2901 11.6345L10.7001 7.0445C10.3201 6.6645 9.68006 6.6645 9.29006 7.0545Z" fill="#132930"></path></svg><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="0c680e66af930deff1946b89db86a062"><path d="M9.29006 7.0545C8.90006 7.4445 8.90006 8.0745 9.29006 8.4645L13.1701 12.3445L9.29006 16.2245C8.90006 16.6145 8.90006 17.2445 9.29006 17.6345C9.68006 18.0245 10.3101 18.0245 10.7001 17.6345L15.2901 13.0445C15.6801 12.6545 15.6801 12.0245 15.2901 11.6345L10.7001 7.0445C10.3201 6.6645 9.68006 6.6645 9.29006 7.0545Z" fill="#132930"></path></svg><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a>
 </li>
 <li class="d-none d-tablet-flex">
-<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
+<svg width="24" height="24" viewbox="0 0 24 24" fill="none"><use href="#0c680e66af930deff1946b89db86a062"></use></svg><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
 </li>
 <li class="d-tablet-none">
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bf49b4c841f6d98add4cbe87ee7f63d4" class="Icon "><path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="#132930"></path></svg><a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="2c05fd4d0d3716ae9bcf21a8d7137681"><path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="#132930"></path></svg><a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
 </li>
 <li class="d-none d-tablet-flex">
-<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
+<svg width="24" height="24" viewbox="0 0 24 24" fill="none"><use href="#0c680e66af930deff1946b89db86a062"></use></svg><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
 </li>
 <li class="d-none d-tablet-flex">
-<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
+<svg width="24" height="24" viewbox="0 0 24 24" fill="none"><use href="#0c680e66af930deff1946b89db86a062"></use></svg><a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
 </li>
 </ol></nav>
 </body></html>
diff --git a/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerFull.twig__1.html b/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerFull.twig__1.html
@@ -5,7 +5,7 @@
   </a>
 
 <div class="Header__mobileOnlyActions">
-    <button aria-expanded="false" class="Button Button--inverted Button--medium Button--square" type="button">        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="6eaf1a71b2f68249cc6fdca0ecd5752d" class="Icon ">
+    <button aria-expanded="false" class="Button Button--inverted Button--medium Button--square" type="button">        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="d96e578abfd1e29d5d48e02d20c00734">
 <path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="#132930"></path>
 </svg>
 
@@ -17,7 +17,7 @@
   <div class="Header__content">
 
 <button type="button" class="Header__close" aria-expanded="false">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="ec3c53ebe9882d30ab0e3ad39a73afee" class="Icon ">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="58306158fd875d4c0bf7c9820b4db6ef">
 <path d="M18.3002 5.71022C17.9102 5.32022 17.2802 5.32022 16.8902 5.71022L12.0002 10.5902L7.11022 5.70021C6.72022 5.31021 6.09021 5.31021 5.70021 5.70021C5.31021 6.09021 5.31021 6.72022 5.70021 7.11022L10.5902 12.0002L5.70021 16.8902C5.31021 17.2802 5.31021 17.9102 5.70021 18.3002C6.09021 18.6902 6.72022 18.6902 7.11022 18.3002L12.0002 13.4102L16.8902 18.3002C17.2802 18.6902 17.9102 18.6902 18.3002 18.3002C18.6902 17.9102 18.6902 17.2802 18.3002 16.8902L13.4102 12.0002L18.3002 7.11022C18.6802 6.73022 18.6802 6.09022 18.3002 5.71022Z" fill="#132930"></path>
 </svg>
 

diff --git a/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html b/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set iconDefault.twig__1.html
@@ -1,13 +1,13 @@
 <html><body>
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="c846042e9c5c04cfddd9711f60b1041f" class="Icon ">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="74cb08d4169396b608227b1f2248b99b">
 <path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930"></path>
 </svg>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="5c00b38ce04c4f7fff9f8bf5906ae926" class="Icon ">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="1f350b2089d78ee5e53f13d412983c1a">
 <path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930"></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="9f15abaa1dc09ae90f6606f64ffe8b9f" class="Icon ">
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" id="22f5bc8a0468d0fd2c7b490f6ef63235">
 <path d="M2.72992 21.0001H21.2599C22.0299 21.0001 22.5099 20.1701 22.1299 19.5001L12.8599 3.50006C12.4699 2.83006 11.5099 2.83006 11.1299 3.50006L1.85992 19.5001C1.47992 20.1701 1.95992 21.0001 2.72992 21.0001ZM12.9999 18.0001H10.9999V16.0001H12.9999V18.0001ZM11.9999 14.0001C11.4499 14.0001 10.9999 13.5501 10.9999 13.0001V11.0001C10.9999 10.4501 11.4499 10.0001 11.9999 10.0001C12.5499 10.0001 12.9999 10.4501 12.9999 11.0001V13.0001C12.9999 13.5501 12.5499 14.0001 11.9999 14.0001Z" fill="#132930"></path>
 <title>This is warning!</title></svg>
 

diff --git a/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html b/.../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html
@@ -3,7 +3,7 @@
   <div class="Modal__content">
     <div class="Modal__dialog">
       <div class="Modal__header">
-        <button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary Button--medium Button--square" type="button">          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="1717b24b944c2906a0fe418d63414994" class="Icon " aria-hidden="true">
+        <button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary Button--medium Button--square" type="button">          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="5cf4a361209150b84108c93d7bf13d46" aria-hidden="true">
 <path d="M18.3002 5.71022C17.9102 5.32022 17.2802 5.32022 16.8902 5.71022L12.0002 10.5902L7.11022 5.70021C6.72022 5.31021 6.09021 5.31021 5.70021 5.70021C5.31021 6.09021 5.31021 6.72022 5.70021 7.11022L10.5902 12.0002L5.70021 16.8902C5.31021 17.2802 5.31021 17.9102 5.70021 18.3002C6.09021 18.6902 6.72022 18.6902 7.11022 18.3002L12.0002 13.4102L16.8902 18.3002C17.2802 18.6902 17.9102 18.6902 18.3002 18.3002C18.6902 17.9102 18.6902 17.2802 18.3002 16.8902L13.4102 12.0002L18.3002 7.11022C18.6802 6.73022 18.6802 6.09022 18.3002 5.71022Z" fill="#132930"></path>
 </svg>
 
@@ -20,7 +20,7 @@
   <div class="Modal__content">
     <div class="Modal__dialog">
       <div class="Modal__header">
-        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium Button--square" type="button">          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon " aria-hidden="true"><use href="#1717b24b944c2906a0fe418d63414994"></use></svg>
+        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium Button--square" type="button">          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true"><use href="#5cf4a361209150b84108c93d7bf13d46"></use></svg>
 
           <span class="accessibility-hidden">Dismiss</span>
         </button>

diff --git a/.../__snapshots__/ComponentsSnapshotTest__test with data set tooltipDefaultPure.twig__1.html b/.../__snapshots__/ComponentsSnapshotTest__test with data set tooltipDefaultPure.twig__1.html
@@ -2,7 +2,7 @@
 <div class="Tooltip Tooltip--right Tooltip--dismissible" id="my-tooltip">
             Hello there!
                 <button type="button" class="Tooltip__close" data-dismiss="tooltip" data-target="#my-tooltip" aria-controls="my-tooltip" aria-expanded="true">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="1717b24b944c2906a0fe418d63414994" class="Icon " aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="5cf4a361209150b84108c93d7bf13d46" aria-hidden="true">
 <path d="M18.3002 5.71022C17.9102 5.32022 17.2802 5.32022 16.8902 5.71022L12.0002 10.5902L7.11022 5.70021C6.72022 5.31021 6.09021 5.31021 5.70021 5.70021C5.31021 6.09021 5.31021 6.72022 5.70021 7.11022L10.5902 12.0002L5.70021 16.8902C5.31021 17.2802 5.31021 17.9102 5.70021 18.3002C6.09021 18.6902 6.72022 18.6902 7.11022 18.3002L12.0002 13.4102L16.8902 18.3002C17.2802 18.6902 17.9102 18.6902 18.3002 18.3002C18.6902 17.9102 18.6902 17.2802 18.3002 16.8902L13.4102 12.0002L18.3002 7.11022C18.6802 6.73022 18.6802 6.09022 18.3002 5.71022Z" fill="#132930"></path>
 </svg>