Merge remote-tracking branch 'origin' into feat/add-corner-and-arrow-…

…icons
razorpay · Jan 28, 2025 · 0f317a0 · 0f317a0
2 parents d301d1d + fb16afc
commit 0f317a0
Show file tree

Hide file tree

Showing 19 changed files with 859 additions and 562 deletions.
diff --git a/.changeset/soft-numbers-divide.md b/.changeset/soft-numbers-divide.md
diff --git a/packages/blade/CHANGELOG.md b/packages/blade/CHANGELOG.md
@@ -1,5 +1,24 @@
 # @razorpay/blade
 
+## 12.5.1
+
+### Patch Changes
+
+- 3a7f55f8: fix(codemod-v12): add missing token map for `standard.attentive` to codemod and manual migration
+- 08c5a4ae: fix(blade): fix: data analytics attribute from another external module
+
+## 12.5.0
+
+### Minor Changes
+
+- 194fffc5: feat(SideNav): add `description` on SideNavLink and `onVisibleLevelChange` callback on `SideNav`
+
+## 12.4.1
+
+### Patch Changes
+
+- 2692d5b6: fix(blade): remove file icon aligment while uploading
+
 ## 12.4.0
 
 ### Minor Changes

diff --git a/packages/blade/codemods/migrate-motion-tokens/transformers/motionTokenMapping.json b/packages/blade/codemods/migrate-motion-tokens/transformers/motionTokenMapping.json
@@ -6,6 +6,7 @@
   "motion.easing.standard.revealing": "motion.easing.emphasized",
   "motion.easing.exit.revealing": "motion.easing.exit",
   "motion.easing.entrance.attentive": "motion.easing.overshoot",
+  "motion.easing.standard.attentive": "motion.easing.overshoot",
   "motion.easing.exit.attentive": "motion.easing.exit",
   "motion.easing.standard.wary": "motion.easing.shake"
 }
diff --git a/packages/blade/docs/migration-docs/upgrade-v12.md b/packages/blade/docs/migration-docs/upgrade-v12.md
@@ -38,6 +38,7 @@ You can skip this if you've run the codemod but in case not or you see some edge
 | theme.motion.easing.standard.revealing | theme.motion.easing.emphasized |
 | theme.motion.easing.exit.revealing     | theme.motion.easing.exit       |
 | theme.motion.easing.entrance.attentive | theme.motion.easing.overshoot  |
+| theme.motion.easing.standard.attentive | theme.motion.easing.overshoot  |
 | theme.motion.easing.exit.attentive     | theme.motion.easing.exit       |
 | theme.motion.easing.standard.wary      | theme.motion.easing.shake      |
 

diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.4.0",
+  "version": "12.5.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"

diff --git a/packages/blade/src/components/Card/Card.stories.tsx b/packages/blade/src/components/Card/Card.stories.tsx
@@ -466,53 +466,3 @@ CardWithoutPadding.parameters = {
     disable: true,
   },
 };
-
-// Hidden example. It is reused in motion stories
-export const InternalCardExample = React.forwardRef((_, ref) => {
-  return (
-    <Card
-      ref={ref as never}
-      backgroundColor="surface.background.gray.intense"
-      borderRadius="medium"
-      elevation="lowRaised"
-      padding="spacing.7"
-      width="300px"
-      marginRight="spacing.6"
-      href="https://razorpay.com"
-    >
-      <CardHeader marginBottom="spacing.4" paddingBottom="spacing.4">
-        <CardHeaderLeading
-          prefix={<CardHeaderIcon icon={CheckCircleIcon} />}
-          subtitle="Share payment link via an email, SMS, messenger, chatbot etc."
-          suffix={<CardHeaderCounter value={12} />}
-          title="Payment Links"
-        />
-        <CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
-      </CardHeader>
-      <CardBody>
-        <Text position="relative" zIndex={1}>
-          Create Razorpay Payments Links and share them with your customers from the Razorpay
-          Dashboard or using APIs and start accepting payments. Check the advantages, payment
-          methods, international currency support and more.
-        </Text>
-      </CardBody>
-      <CardFooter marginTop="spacing.4" paddingTop="spacing.4">
-        <CardFooterTrailing
-          actions={{
-            primary: {
-              accessibilityLabel: undefined,
-              icon: undefined,
-              iconPosition: undefined,
-              isDisabled: false,
-              isLoading: false,
-              // eslint-disable-next-line @typescript-eslint/no-empty-function
-              onClick: () => {},
-              text: 'Learn More',
-              type: undefined,
-            },
-          }}
-        />
-      </CardFooter>
-    </Card>
-  );
-});
diff --git a/packages/blade/src/components/Card/InternalCardExample.tsx b/packages/blade/src/components/Card/InternalCardExample.tsx
@@ -0,0 +1,65 @@
+// Hidden example. It is  used in motion stories
+import React from 'react';
+import {
+  CardBody,
+  Card,
+  CardFooter,
+  CardFooterTrailing,
+  CardHeader,
+  CardHeaderLeading,
+  CardHeaderTrailing,
+  CardHeaderIcon,
+  CardHeaderCounter,
+  CardHeaderBadge,
+} from '.';
+import { Text } from '~components/Typography';
+import { CheckCircleIcon } from '~components/Icons';
+
+export const InternalCardExample = React.forwardRef((_, ref) => {
+  return (
+    <Card
+      ref={ref as never}
+      backgroundColor="surface.background.gray.intense"
+      borderRadius="medium"
+      elevation="lowRaised"
+      padding="spacing.7"
+      width="300px"
+      marginRight="spacing.6"
+      href="https://razorpay.com"
+    >
+      <CardHeader marginBottom="spacing.4" paddingBottom="spacing.4">
+        <CardHeaderLeading
+          prefix={<CardHeaderIcon icon={CheckCircleIcon} />}
+          subtitle="Share payment link via an email, SMS, messenger, chatbot etc."
+          suffix={<CardHeaderCounter value={12} />}
+          title="Payment Links"
+        />
+        <CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
+      </CardHeader>
+      <CardBody>
+        <Text position="relative" zIndex={1}>
+          Create Razorpay Payments Links and share them with your customers from the Razorpay
+          Dashboard or using APIs and start accepting payments. Check the advantages, payment
+          methods, international currency support and more.
+        </Text>
+      </CardBody>
+      <CardFooter marginTop="spacing.4" paddingTop="spacing.4">
+        <CardFooterTrailing
+          actions={{
+            primary: {
+              accessibilityLabel: undefined,
+              icon: undefined,
+              iconPosition: undefined,
+              isDisabled: false,
+              isLoading: false,
+              // eslint-disable-next-line @typescript-eslint/no-empty-function
+              onClick: () => {},
+              text: 'Learn More',
+              type: undefined,
+            },
+          }}
+        />
+      </CardFooter>
+    </Card>
+  );
+});
diff --git a/packages/blade/src/components/Fade/Fade.stories.tsx b/packages/blade/src/components/Fade/Fade.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import StoryRouter from 'storybook-react-router';
-import { InternalCardExample } from '../Card/Card.stories';
+import { InternalCardExample } from '../Card/InternalCardExample';
 import { Fade } from './';
 import type { FadeProps } from './';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

diff --git a/packages/blade/src/components/Move/Move.stories.tsx b/packages/blade/src/components/Move/Move.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import StoryRouter from 'storybook-react-router';
-import { InternalCardExample } from '../Card/Card.stories';
+import { InternalCardExample } from '../Card/InternalCardExample';
 import { Move } from './';
 import type { MoveProps } from './';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

diff --git a/packages/blade/src/components/Scale/Scale.stories.tsx b/packages/blade/src/components/Scale/Scale.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
-import { InternalCardExample } from '../Card/Card.stories';
+import { InternalCardExample } from '../Card/InternalCardExample';
 import qrCodesImage from './docs-qrcodes.svg';
 import { Scale } from './';
 import type { ScaleProps } from './';

diff --git a/packages/blade/src/components/SideNav/SideNav.web.tsx b/packages/blade/src/components/SideNav/SideNav.web.tsx
@@ -123,7 +123,7 @@ const BannerContainer = styled(BaseBox)((props) => {
  *
  */
 const _SideNav = (
-  { children, isOpen, onDismiss, banner, testID, ...rest }: SideNavProps,
+  { children, isOpen, onDismiss, onVisibleLevelChange, banner, testID, ...rest }: SideNavProps,
   ref: React.Ref<BladeElementRef>,
 ): React.ReactElement => {
   const l2PortalContainerRef = React.useRef(null);
@@ -143,6 +143,7 @@ const _SideNav = (
     if (isMobile) {
       setIsMobileL2Open(false);
       onDismiss?.();
+      onVisibleLevelChange?.({ visibleLevel: 0 });
     }
   };
 
@@ -155,6 +156,36 @@ const _SideNav = (
     timeoutIdsRef.current.push(clearTransitionTimeout);
   };
 
+  const collapseL1 = (title: string): void => {
+    if (isMobile) {
+      setL2DrawerTitle(title);
+      setIsMobileL2Open(true);
+      onVisibleLevelChange?.({ visibleLevel: 2 });
+      return;
+    }
+
+    if (!isL1Collapsed) {
+      setIsL1Collapsed(true);
+      onVisibleLevelChange?.({ visibleLevel: 2 });
+    }
+  };
+
+  const expandL1 = (): void => {
+    if (isMobile) {
+      setIsMobileL2Open(false);
+      onVisibleLevelChange?.({ visibleLevel: 1 });
+      return;
+    }
+    // Ensures that if Normal L1 item is clicked, the L1 stays expanded
+    if (isL1Collapsed) {
+      setIsL1Collapsed(false);
+      // We want to avoid calling onVisibleLevelChange twice when L1 is hovered and then item on L1 is selected
+      if (!isL1Hovered) {
+        onVisibleLevelChange?.({ visibleLevel: 1 });
+      }
+    }
+  };
+
   /**
    * Handles L1 -> L2 menu changes based on active item
    */
@@ -164,13 +195,7 @@ const _SideNav = (
     if (isL1ItemActive) {
       if (args.isL2Trigger) {
         // Click on L2 Trigger
-        if (isMobile) {
-          setL2DrawerTitle(args.title);
-          setIsMobileL2Open(true);
-          return;
-        }
-
-        setIsL1Collapsed(true);
+        collapseL1(args.title);
 
         // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change
         if (!args.isFirstRender) {
@@ -186,12 +211,7 @@ const _SideNav = (
         }
       } else {
         // Click on normal L1 Item
-        // eslint-disable-next-line no-lonely-if
-        if (isMobile) {
-          setIsMobileL2Open(false);
-        }
-        // Ensures that if Normal L1 item is clicked, the L1 stays expanded
-        setIsL1Collapsed(false);
+        expandL1();
       }
     }
   };
@@ -205,7 +225,7 @@ const _SideNav = (
       setIsL1Collapsed,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isL1Collapsed, isMobile, isMobileL2Open],
+    [isL1Collapsed, isMobile, isMobileL2Open, isL1Hovered],
   );
 
   React.useEffect(() => {
@@ -222,7 +242,7 @@ const _SideNav = (
       {isMobile && onDismiss ? (
         <>
           {/* L1 */}
-          <Drawer isOpen={isOpen ?? false} onDismiss={onDismiss}>
+          <Drawer isOpen={isOpen ?? false} onDismiss={closeMobileNav}>
             <DrawerHeader title="Main Menu" />
             <DrawerBody>
               <MobileL1Container
@@ -241,7 +261,7 @@ const _SideNav = (
             </DrawerBody>
           </Drawer>
           {/* L2 */}
-          <Drawer isOpen={isMobileL2Open} onDismiss={() => setIsMobileL2Open(false)} isLazy={false}>
+          <Drawer isOpen={isMobileL2Open} onDismiss={() => expandL1()} isLazy={false}>
             <DrawerHeader title={l2DrawerTitle} />
             <DrawerBody>
               <BaseBox ref={l2PortalContainerRef} />
@@ -320,8 +340,9 @@ const _SideNav = (
                 if (mouseOverTimeoutRef.current) {
                   clearTimeout(mouseOverTimeoutRef.current);
                 }
-                if (isL1Collapsed && isHoverAgainEnabled) {
+                if (isL1Collapsed && isHoverAgainEnabled && !isL1Hovered) {
                   setIsL1Hovered(true);
+                  onVisibleLevelChange?.({ visibleLevel: 1 });
                 }
               }}
               onMouseLeave={() => {
@@ -330,6 +351,7 @@ const _SideNav = (
                     setIsL1Hovered(false);
                     setIsTransitioning(true);
                     cleanupTransition();
+                    onVisibleLevelChange?.({ visibleLevel: 2 });
                   }, L1_EXIT_HOVER_DELAY);
                 }
               }}