Feat(web-twig): Use Icon in Modal #DS-305

lmc-eu · Sep 8, 2022 · c8cb2cf · c8cb2cf
1 parent 2ba6478
commit c8cb2cf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.twig b/packages/web-twig/src/Resources/components/Modal/Modal.twig
@@ -5,7 +5,6 @@
 
 {# Class names #}
 {%- set _bodyClassName = _spiritClassPrefix ~ 'Modal__body' -%}
-{%- set _closeClassName = _spiritClassPrefix ~ 'Modal__close' -%}
 {%- set _contentClassName = _spiritClassPrefix ~ 'Modal__content' -%}
 {%- set _dialogClassName = _spiritClassPrefix ~ 'Modal__dialog' -%}
 {%- set _headerClassName = _spiritClassPrefix ~ 'Modal__header' -%}
@@ -35,7 +34,7 @@
           data-target="{{ '#' ~ _id }}"
           isSquare
         >
-          <span class="{{ _closeClassName }}" aria-hidden="true"></span>
+          <Icon name="close" aria-hidden="true" />
           <span class="accessibility-hidden">{{ _closeLabel }}</span>
         </Button>
       </div>

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,10 @@
   <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--square" type="button">          <span class="Modal__close" aria-hidden="true"></span>
+        <button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary  Button--square" type="button">          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="37e00f33a768e01446941dba6bd3af5e" class="Icon " 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>
+
           <span class="accessibility-hidden">Close</span>
         </button>
       </div>
@@ -17,7 +20,8 @@
   <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--square" type="button">          <span class="Modal__close" aria-hidden="true"></span>
+        <button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary  Button--square" type="button">          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon " aria-hidden="true"><use href="#37e00f33a768e01446941dba6bd3af5e"></use></svg>
+
           <span class="accessibility-hidden">Dismiss</span>
         </button>
       </div>