From cde5dae3ca53bb8aca5ca6d7c22f39b294ded2a5 Mon Sep 17 00:00:00 2001
From: Ojima Abraham <ojima.abraham@viam.com>
Date: Tue, 9 Jan 2024 14:27:16 -0500
Subject: [PATCH] APP-2198: Addressing stylistic issues in toast (#457)

---
 packages/core/package.json                    |  2 +-
 packages/core/src/lib/index.ts                |  1 +
 packages/core/src/lib/toast/context.ts        |  3 +-
 .../core/src/lib/toast/toast-banner.svelte    | 43 ++++++++++---------
 .../core/src/lib/toast/toast-container.svelte |  6 +--
 .../storybook/src/stories/toast-banner.mdx    | 20 +++++++++
 .../src/stories/toast-banner.stories.svelte   | 32 ++++++++++++++
 7 files changed, 80 insertions(+), 27 deletions(-)
 create mode 100644 packages/storybook/src/stories/toast-banner.mdx
 create mode 100644 packages/storybook/src/stories/toast-banner.stories.svelte

diff --git a/packages/core/package.json b/packages/core/package.json
index 95acc164..784a1362 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 645bd7ea..be6100f4 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -50,6 +50,7 @@ export {
 
 export {
   ToastContainer,
+  ToastBanner,
   provideToast,
   useToast,
   ToastVariant,
diff --git a/packages/core/src/lib/toast/context.ts b/packages/core/src/lib/toast/context.ts
index a7a828a9..444fc95a 100644
--- a/packages/core/src/lib/toast/context.ts
+++ b/packages/core/src/lib/toast/context.ts
@@ -62,7 +62,7 @@ export const createToastContext = (): ToastContext => {
     const pause = () => setPaused(id, true);
     const resume = () => setPaused(id, false);
     const dismiss = () => remove(id);
-    const { progress, unsubscribe } = pausableProgress({
+    const { unsubscribe } = pausableProgress({
       isPaused,
       totalDuration: ToastDuration,
       onComplete: dismiss,
@@ -70,7 +70,6 @@ export const createToastContext = (): ToastContext => {
 
     const toast = {
       id,
-      progress,
       pause,
       resume,
       dismiss,
diff --git a/packages/core/src/lib/toast/toast-banner.svelte b/packages/core/src/lib/toast/toast-banner.svelte
index 5cd18cc7..3d630d95 100644
--- a/packages/core/src/lib/toast/toast-banner.svelte
+++ b/packages/core/src/lib/toast/toast-banner.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 import cx from 'classnames';
-import { Button, Icon } from '$lib';
+import { Icon, IconButton } from '$lib';
 import { iconName, iconClasses } from './variants';
 
 /** The message displayed on the toast */
@@ -20,11 +20,11 @@ export { extraClasses as cx };
 
 <div
   class={cx(
-    'relative flex w-auto items-center gap-2 border bg-medium p-2 text-sm',
+    'relative flex h-10 w-max max-w-[480px] items-center border bg-medium pl-3 pr-1 text-sm',
     extraClasses
   )}
 >
-  <div class="w-[18px]">
+  <div class="mr-4 flex gap-2">
     <Icon
       size="lg"
       name={iconName}
@@ -33,24 +33,25 @@ export { extraClasses as cx };
       aria-hidden={false}
       aria-label="success"
     />
-  </div>
 
-  <div class="mr-auto">{message}</div>
+    <p class="truncate">{message}</p>
+  </div>
 
-  {#if action}
-    <button
-      on:click={action.handler}
-      aria-label="Perform action"
-    >
-      <span class="text-sm font-medium hover:underline">{action.text}</span>
-    </button>
-  {/if}
-  <Button
-    variant="ghost"
-    cx="text-gray-7"
-    aria-label="Dismiss toast"
-    on:click={dismiss}
-  >
-    <Icon name="close" />
-  </Button>
+  <div class="flex gap-1">
+    {#if action}
+      <button
+        type="button"
+        on:click={action.handler}
+        aria-label="Perform action"
+      >
+        <span class="text-sm font-medium hover:underline">{action.text}</span>
+      </button>
+    {/if}
+    <IconButton
+      cx="text-gray-7"
+      label="Dismiss toast"
+      icon="close"
+      on:click={dismiss}
+    />
+  </div>
 </div>
diff --git a/packages/core/src/lib/toast/toast-container.svelte b/packages/core/src/lib/toast/toast-container.svelte
index 9bca0b43..49f04bc0 100644
--- a/packages/core/src/lib/toast/toast-container.svelte
+++ b/packages/core/src/lib/toast/toast-container.svelte
@@ -28,12 +28,12 @@ $: pageIsVisible.set(visibilityState === 'visible');
 <div
   role="status"
   aria-label="Toasts"
-  class="pointer-events-auto fixed bottom-0 left-1/2 top-auto z-max -translate-x-1/2 transform overflow-hidden p-1.5"
+  class="fixed bottom-0 left-1/2 top-auto z-max -translate-x-1/2 transform pb-6"
 >
-  <ul class="flex flex-col items-center gap-2">
+  <ul class="flex flex-col items-center gap-3">
     {#each $toasts as { id, pause, resume, ...toast } (id)}
       <li
-        in:fly={{ y: 256 }}
+        in:fly={{ y: 64 }}
         out:fade
         animate:flip={{ duration: 200 }}
         on:mouseenter={pause}
diff --git a/packages/storybook/src/stories/toast-banner.mdx b/packages/storybook/src/stories/toast-banner.mdx
new file mode 100644
index 00000000..dab4ebdd
--- /dev/null
+++ b/packages/storybook/src/stories/toast-banner.mdx
@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import * as ToastBannerStories from './toast-banner.stories.svelte';
+
+<Meta title='Elements/ToastBanner' />
+
+# ToastBanner
+
+Toast Banner message of type success.
+
+```ts
+import { ToastBanner } from '@viamrobotics/prime-core';
+```
+
+<Canvas>
+  <Story of={ToastBannerStories.Success} />
+</Canvas>
+
+<Canvas>
+  <Story of={ToastBannerStories.SuccessWithEmphasizedAction} />
+</Canvas>
diff --git a/packages/storybook/src/stories/toast-banner.stories.svelte b/packages/storybook/src/stories/toast-banner.stories.svelte
new file mode 100644
index 00000000..dc8d02e0
--- /dev/null
+++ b/packages/storybook/src/stories/toast-banner.stories.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+import { Meta, Story } from '@storybook/addon-svelte-csf';
+import { ToastBanner } from '@viamrobotics/prime-core';
+</script>
+
+<Meta title="Elements/ToastBanner" />
+
+<Story name="Success">
+  <ToastBanner
+    message="Success message"
+    dismiss={() => {
+      console.log('Clicked close button');
+    }}
+    cx="max-w-[240px]"
+  />
+</Story>
+
+<Story name="SuccessWithEmphasizedAction">
+  <ToastBanner
+    message="Success message"
+    dismiss={() => {
+      console.log('Clicked close button');
+    }}
+    action={{
+      text: 'action',
+      handler: () => {
+        console.log('Clicked action');
+      },
+    }}
+    cx="max-w-[280px]"
+  />
+</Story>