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
@@ -48,11 +51,11 @@
   data-testid={testid}
 >
   {#if type === "success"}
-    <goa-icon type="checkmark-circle" />
+    <goa-icon type="checkmark-circle" size={iconSize} />
   {/if}
 
   {#if type === "failure"}
-    <goa-icon type="close-circle" />
+    <goa-icon type="close-circle" size={iconSize} />
   {/if}
 
   <span class="message">
@@ -82,18 +85,33 @@
     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));
+    row-gap: var(--goa-temporary-notification-row-gap, var(--goa-space-s));
+    column-gap: var(--goa-temporary-notification-column-gap, var(--goa-space-m));
+    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));
+  }
+
+  /* Icon spacing - 12px margin to the right */
+  .snackbar goa-icon {
+    margin-right: var(--goa-temporary-notification-icon-margin, var(--goa-space-s));
+    margin-left: calc(-1 * var(--goa-temporary-notification-column-gap, var(--goa-space-m)));
+  }
+
   @media (--not-mobile) {
     .snackbar {
-      min-width: 360px;
+      min-width: var(--goa-temporary-notification-min-width-desktop, 360px);
     }
   }
 
@@ -107,8 +125,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 +141,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 +178,24 @@
   }
 
   .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));
+    padding-top: var(--goa-temporary-notification-padding-text-top, 0);
   }
 </style>