@fortanix/baklava 1.0.0-beta-20241114

package/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;
+    }
+  }
+}

package/src/components/overlays/Toast/Toast.stories.tsx

@@ -0,0 +1,219 @@
+/* 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/. */
+
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../../actions/Button/Button.tsx';
+import {
+  notify,
+  ToastButton,
+  CopyActionButton,
+  ToastLink,
+  ToastMessage,
+  ToastProvider,
+  type NotifyProps,
+} from './Toast.tsx';
+
+type ToastArg = NotifyProps;
+type Story = StoryObj<ToastArg>;
+
+export default {
+  component: ToastMessage,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    title: 'Title',
+  },
+  decorators: [
+    Story => (
+      <ToastProvider>
+        <Story/>
+      </ToastProvider>
+    ),
+  ],
+} satisfies Meta<ToastArg>;
+
+const notificationText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, magna aliqua.`;
+
+const Actions = () => {
+  return (
+    <>
+      <CopyActionButton message={notificationText} />
+      <ToastButton>Share</ToastButton>
+    </>
+  );
+};
+
+export const Success: Story = {
+  args: {
+    options: {},
+  },
+  render: (args) => (
+    <Button onClick={() => notify.success(args)}>
+      Notify Success
+    </Button>
+  ),
+};
+
+export const Info: Story = {
+  args: {
+    options: {},
+  },
+  render: (args) => (
+    <Button onClick={() => notify.info(args)}>
+      Notify Info
+    </Button>
+  ),
+};
+
+export const Error: Story = {
+  args: {
+    options: {},
+  },
+  render:  (args) => (
+    <Button onClick={() => notify.error(args)}>
+      Notify Error
+    </Button>
+  ),
+};
+
+export const ErrorWithMessage: Story = {
+  args: {
+    message: notificationText,
+    options: {},
+  },
+  render:  (args) => (
+    <Button onClick={() => notify.error(args)}>
+      Notify Error with message (includes a default copy button)
+    </Button>
+  ),
+};
+
+export const SuccessWithMessageAndLink: Story = {
+  args: {
+    message: (
+      <>
+        {`${notificationText} `}
+        <ToastLink href="/">Link</ToastLink>
+      </>
+    ),
+    options: {
+      autoClose: false,
+    },
+  },
+  render:  (args) => (
+    <Button onClick={() => notify.success(args)}>
+      Notify success with message and link
+    </Button>
+  ),
+};
+
+export const SuccessWithCloseButton: Story = {
+  args: {
+    message: notificationText,
+    options: {
+      closeButton: true,
+      autoClose: false,
+    },
+  },
+  render:  (args) => (
+    <Button onClick={() => notify.success(args)}>
+      Notify success with close button
+    </Button>
+  ),
+};
+
+export const SuccessWithActions: Story = {
+  args: {
+    message: notificationText,
+    options: {
+      closeButton: true,
+      autoClose: false,
+      actions: <Actions />,
+    },
+  },
+  render:  (args) => (
+    <Button onClick={() => notify.success(args)}>
+      Notify success with actions
+    </Button>
+  ),
+};
+
+export const PreventDuplicate: Story = {
+  args: {
+    options: {
+      toastId: 'uniqueId',
+    },
+  },
+  render:  (args) => (
+    <Button onClick={() => notify.success(args)}>
+      Notify
+    </Button>
+  ),
+};
+
+export const AddProgressBarToAllToasts: Story = {
+  args: {
+    message: notificationText,
+    options: {
+      closeButton: true,
+      actions: <Actions />,
+      hideProgressBar: false,
+    }
+  },
+  render: (args) => (
+    <>
+      <div style={{ marginBottom: '20px' }}>
+        <Button onClick={() => notify.success(args)}>
+          Notify success with progress bar
+        </Button>
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <Button onClick={() => notify.info(args)}>
+          Notify info with progress bar
+        </Button>
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <Button onClick={() => notify.error(args)}>
+          Notify error with progress bar
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const AddProgressBarToAllToastsWithAutoDelay: Story = {
+  args: {
+    message: notificationText,
+    options: {
+      delay: 3000,
+      closeButton: true,
+      actions: <Actions />,
+      hideProgressBar: false,
+    }
+  },
+  render: (args) => (
+    <>
+      <div style={{ marginBottom: '20px' }}>
+        <Button onClick={() => notify.success(args)}>
+          Notify success with progress bar after 3 seconds
+        </Button>
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <Button onClick={() => notify.info(args)}>
+          Notify info with progress bar after 3 seconds
+        </Button>
+      </div>
+      <div style={{ marginBottom: '20px' }}>
+        <Button onClick={() => notify.error(args)}>
+          Notify error with progress bar after 3 seconds
+        </Button>
+      </div>
+    </>
+  ),
+};

package/src/components/overlays/Toast/Toast.tsx

@@ -0,0 +1,233 @@
+/* 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/. */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { classNames as cx, type ClassNameArgument } from '../../../util/componentUtil.ts';
+import {
+  toast,
+  ToastContainer as ToastifyContainer,
+  type ToastContainerProps as ToastifyContainerProps,
+  type ToastContent,
+  type ToastOptions as ToastifyOptions,
+} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+import { Icon } from '../../graphics/Icon/Icon.tsx';
+import { TooltipProvider } from '../Tooltip/TooltipProvider.tsx';
+import { Button, type ButtonProps } from '../../actions/Button/Button.tsx';
+import { Link, type LinkProps } from '../../actions/Link/Link.tsx';
+
+import './ToastyOverride.scss';
+import cl from './Toast.module.scss';
+
+export { cl as ToastClassNames };
+
+export { type ToastContent };
+
+
+export const ToastLink = ({ className, ...propsRest }: LinkProps) => {
+  return (
+    <Link className={cx(cl['bk-toast__link'], className)} {...propsRest} />
+  );
+};
+
+export const ToastButton = ({ className, ...propsRest }: ButtonProps) => {
+  return (
+    <Button className={cx(cl['bk-toast__button'], className)} {...propsRest} />
+  );
+};
+
+export type CopyActionButton = {
+  /** A tooltip message of this component. */
+  message: ToastContent,
+  
+  /** A classname of this component. */
+  className?: ClassNameArgument,
+};
+export const CopyActionButton = ({ message = null, className }: CopyActionButton): React.ReactElement | null => {
+  const defaultTooltipMessage = 'Copy message';
+  const [tooltipMessage, setTooltipMessage] = React.useState<string>(defaultTooltipMessage);
+  const isStringMessage = typeof message === 'string';
+  
+  const handleCopy = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (isStringMessage) {
+      try {
+        await navigator.clipboard.writeText(message);
+        setTooltipMessage('Successfully copied');
+      } catch (error: unknown) {
+        setTooltipMessage('Failed to copy');
+      } finally {
+        setTimeout(() => {
+          setTooltipMessage(defaultTooltipMessage);
+        }, 2000);
+      }
+    }
+  };
+  
+  return (
+    <>
+      {isStringMessage &&
+        <TooltipProvider placement="bottom" tooltip={tooltipMessage} className="bk-toast__tooltip">
+          <Button
+            className={cx(cl['bk-toast__copy-button'], className)}
+            onClick={handleCopy}
+          >
+            Copy
+          </Button>
+        </TooltipProvider>
+      }
+    </>
+  );
+};
+
+export const ToastMessage = (props: NotifyProps): React.ReactElement => {
+  const { title, message, options = {} } = props;
+  
+  return (
+    <>
+      <div className={cx(cl['bk-toast__message'])}>
+        <div className={cx(cl['bk-toast__message__title'])}>
+          {title}
+        </div>
+        {(message && typeof message !== 'function') && <p>{message}</p>}
+      </div>
+      {options.actions &&
+        <div className={cx(cl['bk-toast__actions'])}>
+          {options.actions}
+        </div>
+      }
+    </>
+  );
+};
+
+type ToastOptions = Omit<ToastifyOptions, 'bodyClassName'> & {
+  className?: ClassNameArgument,
+  bodyClassName?: ClassNameArgument,
+  actions?: React.ReactElement,
+};
+export type NotifyProps = {
+  /** A title of this component. */
+  title: string | React.ReactNode,
+  
+  /** A message of this component. */
+  message?: ToastContent,
+  
+  /** Options of this component. */
+  options?: ToastOptions,
+}
+const success = ({ title, message, options = {} }: NotifyProps) => {
+  const { className, bodyClassName, actions, closeButton = false, ...restOptions } = options;
+  const content = <ToastMessage title={title} message={message} options={options} />;
+  const updatedOptions: ToastifyOptions = {
+    autoClose: 5000,
+    className: cx(cl['bk-toast--success'], className),
+    bodyClassName: cx(cl['bk-toast__body'], bodyClassName),
+    progressClassName: cx(cl['bk-toast__progress-bar--success']),
+    icon: <Icon icon="success" className={cx(cl['bk-toast__icon--success'])} />,
+    closeButton: closeButton === true ? <CloseToastButton /> : closeButton,
+    ...restOptions,
+  };
+  return toast.success(content, updatedOptions);
+};
+
+const info = ({ title, message, options = {} }: NotifyProps) => {
+  const { className, bodyClassName, actions, closeButton = false, ...restOptions } = options;
+  const content = <ToastMessage title={title} message={message} options={options} />;
+  const updatedOptions: ToastifyOptions = {
+    autoClose: 5000,
+    className: cx(cl['bk-toast--info'], className),
+    bodyClassName: cx(cl['bk-toast__body'], bodyClassName),
+    progressClassName: cx(cl['bk-toast__progress-bar--info']),
+    icon: <Icon icon="warning" className={cx(cl['bk-toast__icon--info'])} />,
+    closeButton: closeButton === true ? <CloseToastButton /> : closeButton,
+    ...restOptions,
+  };
+  return toast.info(content, updatedOptions);
+};
+
+const error = ({ title, message, options = {} }: NotifyProps) => {
+  const { className, bodyClassName, actions, closeButton = false, ...restOptions } = options;
+  const content = (
+    <ToastMessage
+      title={title}
+      message={message}
+      options={{
+        ...options,
+        ...(actions || message) && { actions: actions || <CopyActionButton message={message} /> },
+      }}
+    />
+  );
+  const updatedOptions: ToastifyOptions = {
+    autoClose: 5000,
+    className: cx(cl['bk-toast--error'], className),
+    bodyClassName: cx(cl['bk-toast__body'], bodyClassName),
+    progressClassName: cx(cl['bk-toast__progress-bar--error']),
+    icon: <Icon icon="alert" className={cx(cl['bk-toast__icon--error'])} />,
+    closeButton: closeButton === true ? <CloseToastButton /> : closeButton,
+    ...restOptions,
+  };
+  return toast.error(content, updatedOptions);
+};
+
+const dismiss = (id?: string | number): boolean | void => toast.dismiss(id);
+
+export const notify = { success, info, error, dismiss };
+
+type CloseToastButtonProps = {
+  closeToast?: () => void,
+};
+const CloseToastButton = ({ closeToast }: CloseToastButtonProps) => (
+  <Icon icon="cross" className={cx(cl['bk-close--dark'])} onClick={closeToast} />
+);
+
+type ToastProviderProps = Omit<ToastifyContainerProps, 'className'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** A classname of this component. */
+  className?: ClassNameArgument,
+  
+  /** Whether this component should have a close button. */
+  hasCloseButton?: boolean,
+  
+  /** Whether this component should display progress bar. */
+  showProgressBar?: boolean,
+  
+  /** Components or elements to be rendered within the Provider. */
+  children: React.ReactNode,
+};
+export const ToastProvider = (props: ToastProviderProps) => {
+  const {
+    unstyled = false,
+    hasCloseButton = false,
+    className = '',
+    showProgressBar = false,
+    children,
+    ...propsRest
+  } = props;
+  
+  return (
+    <>
+      {children}
+      {ReactDOM.createPortal(
+        <ToastifyContainer
+          className={cx(
+            {
+              bk: true,
+              [cl['bk-toast']]: !unstyled,
+            },
+            className,
+          )}
+          hideProgressBar={!showProgressBar}
+          closeButton={hasCloseButton && <CloseToastButton/>}
+          {...propsRest}
+        />,
+        window.document.body,
+      )}
+    </>
+  );
+};

package/src/components/overlays/Toast/ToastyOverride.scss

@@ -0,0 +1,27 @@
+/* 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;
+
+// Define styling to override react-toastify's styles, as overriding directly from Toast.module.scss is not possible.
+.Toastify {
+  .Toastify__toast {
+    &:has(.Toastify__progress-bar--wrp) {
+      padding-bottom: calc(bk.$spacing-4 + 4px);
+      overflow: visible; // to display progress bar over the border
+    }
+  }
+  
+  .Toastify__progress-bar--wrp {
+    height: 4px;
+    left: -2px;
+    width: calc(100% + 2px);
+    border-bottom-right-radius: var(--toastify-toast-bd-radius); 
+  }
+  
+  .Toastify__progress-bar--bg {
+    background: transparent;
+  }
+}
+