chore: add docs

razorpay · Feb 11, 2024 · 469e8f5 · 469e8f5
1 parent 5185747
commit 469e8f5
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 82 deletions.
diff --git a/packages/blade/src/components/Toast/Toast.stories.tsx b/packages/blade/src/components/Toast/Toast.stories.tsx
@@ -3,8 +3,8 @@
 import { Title } from '@storybook/addon-docs';
 import type { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
-import { useToasterStore } from 'react-hot-toast';
 import { useToast } from './useToast';
+import { Toast } from './Toast';
 import type { ToastProps } from './';
 import { ToastContainer } from './';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
@@ -17,21 +17,31 @@ const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
       componentName="Toast"
-      componentDescription="A switch component is used to quickly switch between two possible states. These are only used for binary actions that occur immediately after the user turn the switch on/off."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
+      componentDescription="Toast is a feedback element to display temporary short messages in the interface"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=75839-1125191&mode=design&t=SLxhqgKm27oCjSYV-4"
     >
       <Title>Usage</Title>
       <Sandbox>
         {`
-        import { Switch } from '@razorpay/blade/components';
+        import { ToastContainer, useToast } from '@razorpay/blade/components';
 
         function App(): React.ReactElement {
+          const toast = useToast();
+
+          // Integrating Blade Toast in your App
+          // 1. Render the ToastContainer component at the root of your app
+          // 2. Utilize the methods exposed via useToast hook to show/dismiss toasts
           return (
-            // Check console
-            <Switch
-              onChange={(e) => console.log(e.isChecked)}
-              accessibilityLabel="Toggle DarkMode"
-            />
+            <Box>
+              <ToastContainer />
+              <Button 
+                onClick={() => {
+                  toast.show({ content: 'Payment successful', color: 'positive' })
+                }}
+              >
+                Show Toast
+              </Button>
+            </Box>
           );
         }
         
@@ -44,88 +54,136 @@ const Page = (): React.ReactElement => {
 
 export default {
   title: 'Components/Toast',
-  component: ToastContainer,
+  component: Toast,
   tags: ['autodocs'],
+  argTypes: {
+    isVisible: {
+      table: {
+        disable: true,
+      },
+    },
+    id: {
+      table: {
+        disable: true,
+      },
+    },
+  },
   parameters: {
     docs: {
       page: Page,
     },
   },
 } as Meta<ToastProps>;
 
-const ToastTemplate: StoryFn<typeof ToastContainer> = () => {
+const BasicToastTemplate: StoryFn<ToastProps> = (args) => {
   const toast = useToast();
-  const { toasts } = useToasterStore();
-  const promoToasts = React.useMemo(
-    // @ts-expect-error
-    () => toasts.filter((toast) => toast.type === 'promotional' && toast.visible),
-    [toasts],
-  );
-  const hasPromoToast = promoToasts.length > 0;
+
+  if (args.type === 'promotional') {
+    args.content = <Text>{args.content}</Text>;
+  }
+
   return (
     <Box>
-      <ToastContainer />
       <Button
-        onClick={() =>
-          toast.show({
-            content:
-              Math.random() > 0.5
-                ? 'Payment Successful'
-                : 'Razorpay Turbo UPI streamlines all the friction points of previous flows. Businesses can now manage the UPI checkout experience within their app, without the user ever leaving the app',
-            // @ts-expect-error
-            color: ['positive', 'negative', 'warning', 'information', 'neutral'][
-              Math.floor(Math.random() * 5)
-            ],
-            action: {
-              text: 'Okay',
-              onClick: () => console.log(1),
-            },
-            onDismissButtonClick: () => console.log(1),
-          })
-        }
+        onClick={() => {
+          toast.show(args);
+        }}
       >
-        show info
-      </Button>
-      <Button
-        marginLeft="spacing.3"
-        isDisabled={hasPromoToast}
-        onClick={() =>
-          toast.show({
-            type: 'promotional',
-            content: (
-              <Box display="flex" gap="spacing.3" flexDirection="column">
-                <Heading>Introducing TurboUPI</Heading>
-                <img
-                  loading="lazy"
-                  src="https://d6xcmfyh68wv8.cloudfront.net/blog-content/uploads/2023/05/Features-blog.png"
-                  width="100%"
-                  height="100px"
-                  alt="Promotional Toast"
-                  style={{ objectFit: 'cover', borderRadius: '8px' }}
-                />
-                <Text weight="semibold">
-                  Lightning-fast payments with the new Razorpay Turbo UPI
-                </Text>
-                <Text size="xsmall">
-                  Turbo UPI allows end-users to complete their payment in-app, with no redirections
-                  or dependence on third-party UPI apps. With Turbo UPI, payments will be 5x faster
-                  with a significantly-improved success rate of 10%!
-                </Text>
-              </Box>
-            ),
-            action: {
-              text: 'Try TurboUPI',
-              onClick: () => console.log(1),
-            },
-            onDismissButtonClick: () => console.log(1),
-          })
-        }
-      >
-        show promo
+        Show Toast
       </Button>
+      <ToastContainer />
+    </Box>
+  );
+};
+
+BasicToastTemplate.storyName = 'Basic';
+export const Basic = BasicToastTemplate.bind({});
+Basic.args = {
+  color: 'neutral',
+  type: 'informational',
+  autoDismiss: false,
+  content: 'Payment successful',
+  action: {
+    text: 'Okay',
+    onClick: ({ toastId }) => console.log(toastId),
+  },
+};
+
+const ToastVariantsTemplate: StoryFn<ToastProps> = () => {
+  const toast = useToast();
+
+  const showInformationalToast = ({ color }: { color: ToastProps['color'] }) => {
+    toast.show({
+      content: `Payment ${color}`,
+      color,
+      action: {
+        text: 'Okay',
+        onClick: ({ toastId }) => toast.dismiss(toastId),
+      },
+      onDismissButtonClick: ({ toastId }) => console.log(`${toastId} Dismissed!`),
+    });
+  };
+
+  const showPromotionalToast = () => {
+    toast.show({
+      type: 'promotional',
+      content: (
+        <Box display="flex" gap="spacing.3" flexDirection="column">
+          <Heading>Introducing TurboUPI</Heading>
+          <img
+            loading="lazy"
+            width="100%"
+            height="100px"
+            alt="Promotional Toast"
+            style={{ objectFit: 'cover', borderRadius: '8px' }}
+            src="https://d6xcmfyh68wv8.cloudfront.net/blog-content/uploads/2023/05/Features-blog.png"
+          />
+          <Text weight="semibold">Lightning-fast payments with the new Razorpay Turbo UPI</Text>
+          <Text size="xsmall">
+            Turbo UPI allows end-users to complete their payment in-app, with no redirections or
+            dependence on third-party UPI apps. With Turbo UPI, payments will be 5x faster with a
+            significantly-improved success rate of 10%!
+          </Text>
+        </Box>
+      ),
+      action: {
+        text: 'Try TurboUPI',
+        onClick: ({ toastId }) => toast.dismiss(toastId),
+      },
+      onDismissButtonClick: ({ toastId }) => console.log(`${toastId} Dismissed!`),
+    });
+  };
+
+  return (
+    <Box>
+      <Text>Show Informational Toasts:</Text>
+      <Box display="flex" gap="spacing.3" marginY="spacing.4">
+        <Button variant="tertiary" onClick={() => showInformationalToast({ color: 'positive' })}>
+          Positive
+        </Button>
+        <Button variant="tertiary" onClick={() => showInformationalToast({ color: 'negative' })}>
+          Negative
+        </Button>
+        <Button variant="tertiary" onClick={() => showInformationalToast({ color: 'warning' })}>
+          Warning
+        </Button>
+        <Button variant="tertiary" onClick={() => showInformationalToast({ color: 'information' })}>
+          Information
+        </Button>
+        <Button variant="tertiary" onClick={() => showInformationalToast({ color: 'neutral' })}>
+          Neutral
+        </Button>
+      </Box>
+      <Text>Show Promotional Toasts:</Text>
+      <Box display="flex" gap="spacing.3" marginY="spacing.4">
+        <Button variant="tertiary" onClick={() => showPromotionalToast()}>
+          Promotional
+        </Button>
+      </Box>
+      <ToastContainer />
     </Box>
   );
 };
 
-export const Default = ToastTemplate.bind({});
-Default.storyName = 'Default';
+export const ToastVariants = ToastVariantsTemplate.bind({});
+ToastVariants.storyName = 'ToastVariants';
diff --git a/packages/blade/src/components/Toast/Toast.web.tsx b/packages/blade/src/components/Toast/Toast.web.tsx
@@ -69,7 +69,9 @@ const Toast = ({
   onDismissButtonClick,
   isVisible,
   id,
-}: ToastProps): React.ReactElement => {
+}: ToastProps & {
+  isVisible?: boolean;
+}): React.ReactElement => {
   const { theme } = useTheme();
   const Icon = leading || iconMap[color];
 

diff --git a/packages/blade/src/components/Toast/types.ts b/packages/blade/src/components/Toast/types.ts
@@ -13,11 +13,6 @@ type ToastProps = {
    */
   content: React.ReactNode;
 
-  /**
-   * @internal
-   */
-  isVisible?: boolean;
-
   /**
    * @default `neutral`
    */