feat(#3096): update temporary-notification to v2

Author: twjeffery

libs/web-components/src/components/temporary-notification/TemporaryNotification.svelte

@@ -32,6 +32,9 @@
   export let actionText: string = "";
   export let visible: boolean = true;
   export let animationDirection: TemporaryNotificationAnimationDirection = "down";
+
+  // Icon size for success/failure icons
+  const iconSize = "large";
 </script>
 
 <div
@@ -47,17 +50,19 @@
   class:animate-down={animationDirection === "down"}
   data-testid={testid}
 >
-  {#if type === "success"}
-    <goa-icon type="checkmark-circle" />
-  {/if}
+  <div class="content">
+    {#if type === "success"}
+      <goa-icon type="checkmark-circle" size={iconSize} />
+    {/if}
 
-  {#if type === "failure"}
-    <goa-icon type="close-circle" />
-  {/if}
+    {#if type === "failure"}
+      <goa-icon type="close-circle" size={iconSize} />
+    {/if}
 
-  <span class="message">
-    {message}
-  </span>
+    <span class="message">
+      {message}
+    </span>
+  </div>
 
   {#if actionText}
     <div class="action">
@@ -82,18 +87,35 @@
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    border-radius: var(--goa-border-radius-m);
-    gap: var(--goa-space-m);
-    padding: var(--goa-space-m) var(--goa-space-l);
-    max-width: 640px;
-    color: var(--goa-color-text-light);
-    transition: transform 0.3s ease, opacity 0.3s ease;
+    border-radius: var(--goa-temporary-notification-borderRadius, var(--goa-border-radius-m));
+    gap: var(--goa-temporary-notification-row-gap, var(--goa-space-m)); /* 16px between content and action */
+    padding: var(--goa-temporary-notification-padding, var(--goa-space-m) var(--goa-space-l));
+    max-width: var(--goa-temporary-notification-max-width, 640px);
+    color: var(--goa-temporary-notification-color-text, var(--goa-color-text-light));
+    transition:
+      transform var(--goa-temporary-notification-transition-duration, 0.3s) ease,
+      opacity var(--goa-temporary-notification-transition-duration, 0.3s) ease;
     overflow: hidden;
   }
 
+  /* Add extra bottom padding when progress bar is present */
+  .snackbar.progress,
+  .snackbar.indeterminate {
+    padding: var(--goa-temporary-notification-padding-with-progress, var(--goa-space-m) var(--goa-space-l) 22px var(--goa-space-l));
+  }
+
+  /* Content wrapper keeps icon and message together as a single flex item */
+  .content {
+    display: flex;
+    align-items: flex-start; /* Icon aligns with first line of text */
+    gap: var(--goa-temporary-notification-column-gap, var(--goa-space-s));
+    flex: 1 1 auto;
+    min-width: 0; /* Allow content to shrink */
+  }
+
   @media (--not-mobile) {
     .snackbar {
-      min-width: 360px;
+      min-width: var(--goa-temporary-notification-min-width-desktop, 360px);
     }
   }
 
@@ -107,8 +129,8 @@
   .snackbar.basic,
   .snackbar.indeterminate,
   .snackbar.progress {
-    border: 1px solid var(--goa-color-greyscale-700);
-    background: var(--goa-color-greyscale-black);
+    border: var(--goa-temporary-notification-borderWidth, var(--goa-border-width-s)) solid var(--goa-temporary-notification-color-border, var(--goa-color-greyscale-700));
+    background: var(--goa-temporary-notification-color-bg-basic, var(--goa-color-greyscale-black));
   }
 
   .action {
@@ -123,7 +145,24 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 6px;
+    height: var(--goa-temporary-notification-progress-bar-height, 6px);
+    border-radius: 0 0 var(--goa-temporary-notification-progress-bar-borderRadius, 0) var(--goa-temporary-notification-progress-bar-borderRadius, 0);
+  }
+
+  /* Progress bar browser-specific styling */
+  progress::-webkit-progress-bar {
+    background-color: var(--goa-temporary-notification-progress-bar-color-bg, #adadad);
+    border-radius: 0 0 var(--goa-temporary-notification-progress-bar-borderRadius, 0) var(--goa-temporary-notification-progress-bar-borderRadius, 0);
+  }
+
+  progress::-webkit-progress-value {
+    background-color: var(--goa-temporary-notification-progress-bar-color-fill, white);
+    border-radius: 0 0 var(--goa-temporary-notification-progress-bar-borderRadius, 0) var(--goa-temporary-notification-progress-bar-borderRadius, 0);
+  }
+
+  progress::-moz-progress-bar {
+    background-color: var(--goa-temporary-notification-progress-bar-color-fill, white);
+    border-radius: 0 0 var(--goa-temporary-notification-progress-bar-borderRadius, 0) var(--goa-temporary-notification-progress-bar-borderRadius, 0);
   }
 
   .show {
@@ -143,23 +182,28 @@
   }
 
   .hide.animate-up {
-    transform: translateY(-100px);
+    transform: translateY(calc(-1 * var(--goa-temporary-notification-animation-distance, 100px)));
   }
 
   .hide.animate-down {
-    transform: translateY(100px);
+    transform: translateY(var(--goa-temporary-notification-animation-distance, 100px));
   }
 
   .snackbar.success {
-    background: var(--goa-color-success-default);
+    background: var(--goa-temporary-notification-color-bg-success, var(--goa-color-success-default));
   }
 
   .snackbar.failure {
-    background: var(--goa-color-emergency-default);
+    background: var(--goa-temporary-notification-color-bg-failure, var(--goa-color-emergency-default));
   }
 
   .message {
     flex: 1 1 auto;
-    font: var(--goa-typography-body-m);
+    font: var(--goa-temporary-notification-typography, var(--goa-typography-body-m));
+  }
+
+  /* Add top margin to message when icon is present to vertically center first line with icon */
+  .content:has(goa-icon) .message {
+    margin-top: var(--goa-temporary-notification-padding-text-top, var(--goa-space-2xs));
   }
 </style>