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

---
 .../web/src/scss/components/Toast/README.md   | 14 ++++-----
 .../src/scss/components/Toast/_ToastBar.scss  | 12 ++++----
 .../web/src/scss/components/Toast/index.html  | 30 +++++++++----------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/web/src/scss/components/Toast/README.md b/packages/web/src/scss/components/Toast/README.md
index e971b274b4..9092957eb7 100644
--- a/packages/web/src/scss/components/Toast/README.md
+++ b/packages/web/src/scss/components/Toast/README.md
@@ -164,7 +164,7 @@ Minimum example:
 ```html
 <div class="ToastBar ToastBar--inverted">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <div class="ToastBar__message">Message only</div>
     </div>
   </div>
@@ -178,7 +178,7 @@ An icon can be added to the ToastBar component:
 ```html
 <div class="ToastBar ToastBar--inverted">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <svg width="20" height="20" aria-hidden="true">
         <use xlink:href="/icons/svg/sprite.svg#info" />
       </svg>
@@ -195,7 +195,7 @@ An action link can be added to the ToastBar component:
 ```html
 <div class="ToastBar ToastBar--inverted">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <div class="ToastBar__message">
         Message with action
         <a href="#" class="link-inverted link-underlined">Action</a>
@@ -219,7 +219,7 @@ For example:
 ```html
 <div class="ToastBar ToastBar--success">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <div class="ToastBar__message">Success message</div>
     </div>
   </div>
@@ -256,7 +256,7 @@ button:
 ```html
 <div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <div class="ToastBar__message">Dismissible message</div>
     </div>
     <button
@@ -298,7 +298,7 @@ button:
     <!-- ToastBar: start -->
     <div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible is-hidden">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/icons/svg/sprite.svg#info" />
           </svg>
@@ -341,7 +341,7 @@ the template and apply it on any toasts to be shown to the user, using the confi
     <template data-spirit-snippet="item">
       <div class="ToastBar is-hidden" data-spirit-color="inverted" data-spirit-populate-field="item">
         <div class="ToastBar__box">
-          <div class="ToastBar__content">
+          <div class="ToastBar__container">
             <svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
               <use xlink:href="/icons/svg/sprite.svg#info" />
             </svg>
diff --git a/packages/web/src/scss/components/Toast/_ToastBar.scss b/packages/web/src/scss/components/Toast/_ToastBar.scss
index 7255b4e4aa..39941cc3a6 100644
--- a/packages/web/src/scss/components/Toast/_ToastBar.scss
+++ b/packages/web/src/scss/components/Toast/_ToastBar.scss
@@ -48,17 +48,17 @@
     align-items: start;
 }
 
-.ToastBar__content:has(> svg:first-child) {
+.ToastBar__container:has(> svg:first-child) {
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: theme.$bar-content-gap;
 }
 
-.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__content {
+.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__container {
     align-self: center; // 4.
 }
 
-.ToastBar__container {
+.ToastBar__content {
     @include typography.generate(theme.$bar-typography);
 
     display: flex;
@@ -66,14 +66,12 @@
     gap: theme.$bar-message-gap-y theme.$bar-message-gap-x;
 }
 
-.ToastBar__container > :is(a, button):last-child {
+.ToastBar__link {
     font-weight: 400;
 }
 
 // stylelint-disable-next-line selector-max-specificity -- Specificity is needed to precisely target the action.
-.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast']))
-    .ToastBar__container
-    > :is(a, button):last-child {
+.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__link {
     margin-inline-end: theme.$bar-action-margin-inline-end; // 6.
 }
 
diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
index 0de0ff5e08..8a27c0081b 100644
--- a/packages/web/src/scss/components/Toast/index.html
+++ b/packages/web/src/scss/components/Toast/index.html
@@ -26,7 +26,7 @@ <h2 class="docs-Heading">Static Toast</h2>
 
         <div id="my-hidden-dismissible-toast" class="ToastBar ToastBar--warning ToastBar--dismissible is-hidden">
           <div class="ToastBar__box">
-            <div class="ToastBar__content">
+            <div class="ToastBar__container">
               <svg width="20" height="20" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
               </svg>
@@ -245,7 +245,7 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
         <template data-spirit-snippet="item">
           <div class="ToastBar is-hidden" data-spirit-color="inverted" data-spirit-populate-field="item">
             <div class="ToastBar__box">
-              <div class="ToastBar__content">
+              <div class="ToastBar__container">
                 <svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
                   <use xlink:href="/assets/icons/svg/sprite.svg#info" />
                 </svg>
@@ -270,7 +270,7 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
         <div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible is-visible">
           <div class="ToastBar__box">
-            <div class="ToastBar__content">
+            <div class="ToastBar__container">
               <svg width="20" height="20" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
               </svg>
@@ -297,7 +297,7 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
         <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible is-visible">
           <div class="ToastBar__box">
-            <div class="ToastBar__content">
+            <div class="ToastBar__container">
               <svg width="20" height="20" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#info" />
               </svg>
@@ -337,7 +337,7 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <div class="ToastBar__message">
             Message only
           </div>
@@ -347,7 +347,7 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <div class="ToastBar__message">
             Message with action
             <a href="#" class="link-inverted link-underlined">Action</a>
@@ -358,7 +358,7 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <div class="ToastBar__message">
             When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
             <a href="#" class="link-inverted link-underlined">Action</a>
@@ -369,7 +369,7 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#info" />
           </svg>
@@ -383,7 +383,7 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div id="my-toast-variation-dismissible" class="ToastBar ToastBar--inverted ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <div class="ToastBar__message">
             Dismissible message
           </div>
@@ -405,7 +405,7 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div id="my-toast-variation-dismissible-with-icon-and-action" class="ToastBar ToastBar--inverted ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#download" />
           </svg>
@@ -440,7 +440,7 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-inverted" class="ToastBar ToastBar--inverted ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#info" />
           </svg>
@@ -466,7 +466,7 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-informative" class="ToastBar ToastBar--informative ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#info" />
           </svg>
@@ -492,7 +492,7 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-success" class="ToastBar ToastBar--success ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
           </svg>
@@ -518,7 +518,7 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-warning" class="ToastBar ToastBar--warning ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
           </svg>
@@ -544,7 +544,7 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-danger" class="ToastBar ToastBar--danger ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#danger" />
           </svg>