Merge pull request #10 from fortanix/feature/update-toast-design

Update toast design
fortanix · Oct 29, 2024 · 9507ac8 · 9507ac8
2 parents 42da881 + 5430fe8
commit 9507ac8
Show file tree

Hide file tree

Showing 9 changed files with 452 additions and 294 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -13,7 +13,6 @@ import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { DocsContainer, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
 
-import { ToastContainer } from '../src/components/overlays/Toast/Toast.tsx';
 
 
 const channel = addons.getChannel();
@@ -139,10 +138,7 @@ const preview = {
 
         const theme = React.useMemo(() => isDark ? themes.dark : themes.light, [isDark]);
         return (
-          <>
-            <ToastContainer/>
-            <DocsContainer {...props} theme={theme}/>
-          </>
+          <DocsContainer {...props} theme={theme}/>
         );
       },
       // page: () => (

diff --git a/app/lib.ts b/app/lib.ts
@@ -34,7 +34,7 @@ export { Stepper } from '../src/components/navigations/Stepper/Stepper.tsx';
 
 export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx';
 export { Modal } from '../src/components/overlays/Modal/Modal.tsx';
-export { type ToastContent, ToastContainer, ToastMessage } from '../src/components/overlays/Toast/Toast.tsx';
+export { type ToastContent, ToastProvider, ToastMessage } from '../src/components/overlays/Toast/Toast.tsx';
 export { Tooltip } from '../src/components/overlays/Tooltip/Tooltip.tsx';
 export { TooltipProvider } from '../src/components/overlays/Tooltip/TooltipProvider.tsx';
 

diff --git a/src/components/containers/Alert/Alert.module.scss b/src/components/containers/Alert/Alert.module.scss
@@ -11,21 +11,21 @@
     @include bk.theme('only light'); /* TEMP: no dark mode styling yet in Figma */
 
     &.bk-alert--info {
-      --bk-panel-background-color: #{bk.$theme-notifcation-informational-background-default};
-      --bk-panel-border-color: #{bk.$theme-notifcation-informational-border-default};
+      --bk-panel-background-color: #{bk.$theme-notification-informational-background-default};
+      --bk-panel-border-color: #{bk.$theme-notification-informational-border-default};
     }
     &.bk-alert--warning {
       /* FIXME */
       --bk-panel-background-color: light-dark(#FFFAEB, #FFFAEB);
       --bk-panel-border-color: light-dark(#FEC84B, #FEC84B);
     }
     &.bk-alert--error {
-      --bk-panel-background-color: #{bk.$theme-notifcation-informational-background-default};
-      --bk-panel-border-color: #{bk.$theme-notifcation-informational-background-default};
+      --bk-panel-background-color: #{bk.$theme-notification-informational-background-default};
+      --bk-panel-border-color: #{bk.$theme-notification-informational-background-default};
     }
     &.bk-alert--success {
-      --bk-panel-background-color: #{bk.$theme-notifcation-informational-background-default};
-      --bk-panel-border-color: #{bk.$theme-notifcation-informational-background-default};
+      --bk-panel-background-color: #{bk.$theme-notification-informational-background-default};
+      --bk-panel-border-color: #{bk.$theme-notification-informational-background-default};
     }
 
     display: grid;

diff --git a/src/components/overlays/Toast/Toast.css b/src/components/overlays/Toast/Toast.css
diff --git a/src/components/overlays/Toast/Toast.module.scss b/src/components/overlays/Toast/Toast.module.scss
@@ -0,0 +1,123 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-toast {
+    width: auto !important; // Override style for .Toastify__toast-container
+    padding: 0 !important; // Override style for .Toastify__toast-container
+    width: 400px !important; // Override style for .Toastify__toast-container
+
+    &:has(.bk-close--dark) {
+      .bk-toast__body {
+        margin-right: bk.$spacing-4 !important; // Override style for .Toastify__toast-body
+      }
+    }
+
+    .bk-toast--success,
+    .bk-toast--info,
+    .bk-toast--error {
+      min-height: 54px !important; // Override style for .Toastify__toast
+      padding: bk.$spacing-4 !important; // Override style for .Toastify__toast
+      border: 1px solid transparent;
+      border-left: 4px solid transparent;
+    }
+
+    .bk-toast--success {
+      border-color: #{bk.$theme-notification-success-border-default};
+      // Override style for .Toastify__toast-theme--light
+      background-color: #{bk.$theme-notification-success-background-default} !important; 
+    }
+
+    .bk-toast--info {
+      border-color: #{bk.$theme-notification-informational-border-default};
+      // Override style for .Toastify__toast-theme--light
+      background-color: #{bk.$theme-notification-informational-background-default} !important;
+    }
+
+    .bk-toast--error {
+      border-color: #{bk.$theme-notification-alert-border-default};
+      // Override style for .Toastify__toast-theme--light
+      background-color: #{bk.$theme-notification-alert-background-default} !important;
+    }
+
+    .bk-toast__icon--success,
+    .bk-toast__icon--info,
+    .bk-toast__icon--error {
+      font-size: 18px;
+    }
+
+    .bk-toast__icon--success {
+      color: #{bk.$theme-notification-success-border-default};
+    }
+
+    .bk-toast__icon--info {
+      color: #{bk.$theme-notification-informational-border-default};
+    }
+
+    .bk-toast__icon--error {
+      color: #{bk.$theme-notification-alert-border-default};
+    }
+
+    .bk-close--dark {
+      position: absolute;
+      top: bk.$spacing-4;
+      right: bk.$spacing-4;
+      color: #{bk.$theme-notification-icon-default};
+      cursor: pointer;
+    }
+
+    .bk-toast__body {
+      margin: 0 !important; // Override style for .Toastify__toast-body
+      padding: 0 !important; // Override style for .Toastify__toast-body
+      align-items: flex-start !important; // Override style for .Toastify__toast-body
+      color: bk.$theme-notification-text-default;
+      @include bk.font(bk.$font-family-body);
+      font-size: 14px;
+    }
+
+    .bk-toast__message {
+      display: flex;
+      flex-direction: column;
+      gap: bk.$spacing-1;
+    }
+
+    .bk-toast__message__title {
+      font-weight: bk.$font-weight-semibold;
+    }
+
+    .bk-toast__actions {
+      display: flex;
+      align-items: center;
+      gap: bk.$spacing-3;
+      margin-top: bk.$spacing-3;
+    }
+
+    .bk-toast__copy-icon {
+      padding: 0;
+      color: bk.$theme-notification-text-link;
+    }
+
+    .bk-toast__progress-bar--success,
+    .bk-toast__progress-bar--info,
+    .bk-toast__progress-bar--error {
+      margin-top: bk.$spacing-3;
+      opacity: 1 !important; // Override style for .Toastify__progress-bar
+      background-color: #{bk.$theme-progress-bar-fill} !important; // Override style for .Toastify__progress-bar
+    }
+
+    .bk-toast__button,
+    .bk-toast__copy-button {
+      padding: 0;
+      color: bk.$theme-notification-text-link;
+      font-size: 12px;
+      font-weight: bk.$font-weight-semibold;
+    }
+
+    .bk-toast__link {
+      font-weight: bk.$font-weight-semibold;
+    }
+  }
+}