From b8e1419a7dfaf89e46543d0601204f09f8438be4 Mon Sep 17 00:00:00 2001
From: tewarig <gaurav.tewari@razorpay.com>
Date: Thu, 23 Jan 2025 17:39:34 +0530
Subject: [PATCH] fix: card page breaking

---
 .../src/components/Card/Card.stories.tsx      | 49 --------------
 .../components/Card/InternalCardExample.tsx   | 67 +++++++++++++++++++
 .../src/components/Fade/Fade.stories.tsx      |  2 +-
 .../src/components/Move/Move.stories.tsx      |  2 +-
 .../src/components/Scale/Scale.stories.tsx    |  2 +-
 .../src/components/Slide/Slide.stories.tsx    |  2 +-
 .../components/Stagger/Stagger.stories.tsx    |  2 +-
 7 files changed, 72 insertions(+), 54 deletions(-)
 create mode 100644 packages/blade/src/components/Card/InternalCardExample.tsx

diff --git a/packages/blade/src/components/Card/Card.stories.tsx b/packages/blade/src/components/Card/Card.stories.tsx
index 57f3282f20c..e9ee640e04c 100644
--- a/packages/blade/src/components/Card/Card.stories.tsx
+++ b/packages/blade/src/components/Card/Card.stories.tsx
@@ -467,52 +467,3 @@ CardWithoutPadding.parameters = {
   },
 };
 
-// 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
new file mode 100644
index 00000000000..85c61d3c1c4
--- /dev/null
+++ b/packages/blade/src/components/Card/InternalCardExample.tsx
@@ -0,0 +1,67 @@
+// Hidden example. It is reused 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';
+
+// Hidden example. It is reused in motion stories
+//how avoid this example to be shown in storybook
+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
index 0f21f0574ab..98a8a0506e8 100644
--- 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
index 9a22a8c8c22..ab2471ef0f6 100644
--- 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
index 37c74fa56f7..06c2b459edc 100644
--- 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/Slide/Slide.stories.tsx b/packages/blade/src/components/Slide/Slide.stories.tsx
index f6bebb19e4d..888b367a914 100644
--- a/packages/blade/src/components/Slide/Slide.stories.tsx
+++ b/packages/blade/src/components/Slide/Slide.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 { Slide } from './';
 import type { SlideProps } from './';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
diff --git a/packages/blade/src/components/Stagger/Stagger.stories.tsx b/packages/blade/src/components/Stagger/Stagger.stories.tsx
index d43ec4bb2db..a2ba15fdc58 100644
--- a/packages/blade/src/components/Stagger/Stagger.stories.tsx
+++ b/packages/blade/src/components/Stagger/Stagger.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 { Stagger } from './';
 import type { StaggerProps } from './';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';