From ec38c36c01969b0ae7c0a5c1ed56da1cd1579b05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Mon, 20 May 2024 16:32:49 +0200
Subject: [PATCH] Feat(web-twig): Add Message and Link for ToastBar #DS-1213

---
 .../Resources/components/Toast/ToastBar.twig  |  4 +--
 .../components/Toast/ToastBarLink.twig        | 26 +++++++++++++++
 .../components/Toast/ToastBarMessage.twig     | 14 ++++++++
 .../__snapshots__/toastBar.twig.snap.html     | 32 +++++++++----------
 .../components/Toast/stories/ToastColors.twig | 20 ++++++------
 .../Toast/stories/ToastContentVariations.twig | 22 +++++++------
 .../Toast/stories/ToastDynamicToastQueue.twig |  8 ++---
 .../Toast/stories/ToastStaticToast.twig       |  2 +-
 .../twig-components/toastBarLink.twig         |  1 +
 .../twig-components/toastBarMessage.twig      |  1 +
 10 files changed, 87 insertions(+), 43 deletions(-)
 create mode 100644 packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
 create mode 100644 packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig
 create mode 100644 packages/web-twig/src/Resources/twig-components/toastBarLink.twig
 create mode 100644 packages/web-twig/src/Resources/twig-components/toastBarMessage.twig

diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBar.twig b/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
index d865fad5ae..0f83fe2c07 100644
--- a/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
+++ b/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
@@ -15,7 +15,7 @@
 {%- set _rootDismissibleClassName = _isDismissible is same as(true) and _isTemplate is same as(false) ? _spiritClassPrefix ~ 'ToastBar--dismissible' : null -%}
 {%- set _boxClassName = _spiritClassPrefix ~ 'ToastBar__box' -%}
 {%- set _contentClassName = _spiritClassPrefix ~ 'ToastBar__content' -%}
-{%- set _messageClassName = _spiritClassPrefix ~ 'ToastBar__message' -%}
+{%- set _containerClassName = _spiritClassPrefix ~ 'ToastBar__container' -%}
 {%- set _isOpenClassName = _isOpen or _isTemplate ? 'is-open' : 'is-hidden' -%}
 
 {# Attributes #}
@@ -53,7 +53,7 @@
                    <Icon boxSize="20" name="{{ _iconNameValue }}" isReusable={ false } />
                 {% endif %}
             {% endif %}
-            <div class="{{ _messageClassName }}" data-spirit-populate-field="message">
+            <div class="{{ _containerClassName }}" data-spirit-populate-field="message">
                 {% block content %}{% endblock %}
             </div>
         </div>
diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig b/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
new file mode 100644
index 0000000000..7b713f3007
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
@@ -0,0 +1,26 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _color = props.color | default('inverted') -%}
+{%- set _href = props.href -%}
+{%- set _isDisabled = props.isDisabled | default(false) -%}
+{%- set _isUnderlined = props.isUnderlined | default(true) -%}
+
+{# Class names #}
+{%- set _colorClassName = _spiritClassPrefix ~ 'link-' ~ _color -%}
+{%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'link-disabled' : null -%}
+{%- set _rootUnderlinedClassName = _isUnderlined ? _spiritClassPrefix ~ 'link-underlined' : null -%}
+
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _colorClassName, _rootDisabledClassName, _rootUnderlinedClassName, _styleProps.className ] -%}
+{%- set _allowedAttributes = [ 'target', 'title' ] -%}
+
+<a
+    {{ mainProps(props, _allowedAttributes) }}
+    href="{{ _href }}"
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_classNames) }}
+>
+    {%- block content %}{% endblock %}
+</a>
+
diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig b/packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig
new file mode 100644
index 0000000000..907d42a4c7
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig
@@ -0,0 +1,14 @@
+{# API #}
+{%- set props = props | default([]) -%}
+
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _styleProps.className ] -%}
+
+<div
+    {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_classNames) }}
+>
+    {% block content %}{% endblock %}
+</div>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
index c0dcddfc02..9f8c70e788 100644
--- a/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
@@ -7,8 +7,8 @@
   <body>
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+        <div class="ToastBar__container">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
             Message only
           </div>
         </div>
@@ -18,11 +18,11 @@
 
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <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></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
             Message with icon
           </div>
         </div>
@@ -32,11 +32,11 @@
 
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 16.575C11.8667 16.575 11.7417 16.5542 11.625 16.5125C11.5083 16.4708 11.4 16.4 11.3 16.3L6.7 11.7C6.51667 11.5167 6.425 11.2833 6.425 11C6.425 10.7167 6.51667 10.4833 6.7 10.3C6.88333 10.1167 7.12083 10.0208 7.4125 10.0125C7.70417 10.0042 7.94167 10.0917 8.125 10.275L11 13.15V4C11 3.71667 11.0958 3.47917 11.2875 3.2875C11.4792 3.09583 11.7167 3 12 3C12.2833 3 12.5208 3.09583 12.7125 3.2875C12.9042 3.47917 13 3.71667 13 4V13.15L15.875 10.275C16.0583 10.0917 16.2958 10.0042 16.5875 10.0125C16.8792 10.0208 17.1167 10.1167 17.3 10.3C17.4833 10.4833 17.575 10.7167 17.575 11C17.575 11.2833 17.4833 11.5167 17.3 11.7L12.7 16.3C12.6 16.4 12.4917 16.4708 12.375 16.5125C12.2583 16.5542 12.1333 16.575 12 16.575ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16C4.28333 16 4.52083 16.0958 4.7125 16.2875C4.90417 16.4792 5 16.7167 5 17V19H19V17C19 16.7167 19.0958 16.4792 19.2875 16.2875C19.4792 16.0958 19.7167 16 20 16C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="currentColor">
           </path></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
             Message with custom icon
           </div>
         </div>
@@ -46,8 +46,8 @@
 
     <div class="ToastBar ToastBar--success ToastBar--dismissible is-open" id="toast-dismiss" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+        <div class="ToastBar__container">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
             Dismissible message with success color
           </div>
         </div>
@@ -60,8 +60,8 @@
 
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+        <div class="ToastBar__container">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
           </div>
         </div>
       </div>
@@ -70,11 +70,11 @@
 
     <div class="ToastBar ToastBar--inverted is-open" id="template-toast" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true" data-spirit-populate-field="icon">
           <use xlink:href="#">
           </use></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
           </div>
         </div>
         <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#template-toast" aria-controls="template-toast" aria-expanded="true" class="Button Button--inverted Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
@@ -86,11 +86,11 @@
 
     <div style="outline: 5px solid blue; outline-offset: -5px;" class="ToastBar ToastBar--success ToastBar--dismissible is-hidden custom-class" id="my-toast" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 16.575C11.8667 16.575 11.7417 16.5542 11.625 16.5125C11.5083 16.4708 11.4 16.4 11.3 16.3L6.7 11.7C6.51667 11.5167 6.425 11.2833 6.425 11C6.425 10.7167 6.51667 10.4833 6.7 10.3C6.88333 10.1167 7.12083 10.0208 7.4125 10.0125C7.70417 10.0042 7.94167 10.0917 8.125 10.275L11 13.15V4C11 3.71667 11.0958 3.47917 11.2875 3.2875C11.4792 3.09583 11.7167 3 12 3C12.2833 3 12.5208 3.09583 12.7125 3.2875C12.9042 3.47917 13 3.71667 13 4V13.15L15.875 10.275C16.0583 10.0917 16.2958 10.0042 16.5875 10.0125C16.8792 10.0208 17.1167 10.1167 17.3 10.3C17.4833 10.4833 17.575 10.7167 17.575 11C17.575 11.2833 17.4833 11.5167 17.3 11.7L12.7 16.3C12.6 16.4 12.4917 16.4708 12.375 16.5125C12.2583 16.5542 12.1333 16.575 12 16.575ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16C4.28333 16 4.52083 16.0958 4.7125 16.2875C4.90417 16.4792 5 16.7167 5 17V19H19V17C19 16.7167 19.0958 16.4792 19.2875 16.2875C19.4792 16.0958 19.7167 16 20 16C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="currentColor">
           </path></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
             Dismissible message with custom icon and action <a href="#" class="link-inverted link-underlined">Action</a>
           </div>
         </div>
@@ -103,11 +103,11 @@
 
     <div style="outline: 5px solid blue; outline-offset: -5px;" class="ToastBar ToastBar--success is-open custom-class" id="my-toast-template" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true" data-spirit-populate-field="icon">
           <use xlink:href="#">
           </use></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+          <div class="ToastBar__content" data-spirit-populate-field="message">
             Dismissible message with custom icon and action <a href="#" class="link-inverted link-underlined">Action</a>
           </div>
         </div>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
index 1c3ca4dc82..a4d54531b0 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
@@ -1,24 +1,24 @@
 <ToastBar id="my-toast-color-inverted" hasIcon isDismissible>
-    Inverted
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Inverted</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="informative" id="my-toast-color-informative" hasIcon isDismissible>
-    Informative
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage> Informative</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="success" id="my-toast-color-success" hasIcon isDismissible>
-    Success
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Success</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="warning" id="my-toast-color-warning" hasIcon isDismissible>
-    Warning
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Warning</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="danger" id="my-toast-color-danger" hasIcon isDismissible>
-    Danger
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Danger</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
index 741b581c07..873a129d49 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
@@ -1,25 +1,27 @@
-<ToastBar>Message only</ToastBar>
+<ToastBar>
+    <ToastBarMessage>Message only</ToastBarMessage>
+</ToastBar>
 
 <ToastBar>
-    Message with action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Message with action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar>
-    When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar hasIcon>
-    Message with icon and action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Message with icon and action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar id="my-toast-variation-dismissible" isDismissible>
-    Dismissible message
+    <ToastBarMessage>Dismissible message</ToastBarMessage>
 </ToastBar>
 
 <ToastBar id="my-toast-variation-dismissible-with-icon-and-action" iconName="download" isDismissible>
-    Dismissible message with custom icon and action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Dismissible message with custom icon and action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
index 1840b265a7..3d8854cff8 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
@@ -140,13 +140,13 @@
     </template>
 
     <ToastBar color="success" id="my-dismissible-toast" hasIcon isDismissible>
-        I was first!
-        <a href="#" class="link-inverted link-underlined">Action</a>
+        <ToastBarMessage>I was first!</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
     </ToastBar>
 
     <ToastBar color="informative" id="my-other-dismissible-toast" hasIcon isDismissible>
-        I appeared later. This toast has a long message that wraps automatically.
-        <Link href="#" color="inverted" isUnderlined>Action</Link>
+        <ToastBarMessage>I appeared later. This toast has a long message that wraps automatically.</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
     </ToastBar>
 
 </Toast>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig
index 151fa7c88f..ce2978531d 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig
@@ -19,6 +19,6 @@
         isDismissible
         isOpen={ false }
     >
-        I was hidden and you exposed me!
+        <ToastBarMessage>I was hidden and you exposed me!</ToastBarMessage>
     </ToastBar>
 </Toast>
diff --git a/packages/web-twig/src/Resources/twig-components/toastBarLink.twig b/packages/web-twig/src/Resources/twig-components/toastBarLink.twig
new file mode 100644
index 0000000000..bdad9e93f2
--- /dev/null
+++ b/packages/web-twig/src/Resources/twig-components/toastBarLink.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Toast/ToastBarLink.twig' %}
diff --git a/packages/web-twig/src/Resources/twig-components/toastBarMessage.twig b/packages/web-twig/src/Resources/twig-components/toastBarMessage.twig
new file mode 100644
index 0000000000..130cb00d48
--- /dev/null
+++ b/packages/web-twig/src/Resources/twig-components/toastBarMessage.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Toast/ToastBarMessage.twig' %}