fix: card page breaking

razorpay · Jan 23, 2025 · b8e1419 · b8e1419
1 parent 2692d5b
commit b8e1419
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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/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
@@ -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';