Feat(web): Add Message and Link for ToastBar #DS-1213

lmc-eu · May 24, 2024 · 22d080f · 22d080f
1 parent ec38c36
commit 22d080f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 29 deletions.
diff --git 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
@@ -48,32 +48,30 @@
     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;
     flex-wrap: wrap; // 5.
     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
@@ -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>