Skip to content

Commit 2d14a3f

Browse files
tewarigtewarig
authored
fix: card story page breaking (#2492)
* fix: card page breaking * chore: changes * chore: minor change * fix: lint
1 parent 2692d5b commit 2d14a3f

File tree

7 files changed

+70
-55
lines changed

7 files changed

+70
-55
lines changed

‎packages/blade/src/components/Card/Card.stories.tsx

-50
Original file line numberDiff line numberDiff line change
@@ -466,53 +466,3 @@ CardWithoutPadding.parameters = {
466466
disable: true,
467467
},
468468
};
469-
470-
// Hidden example. It is reused in motion stories
471-
export const InternalCardExample = React.forwardRef((_, ref) => {
472-
return (
473-
<Card
474-
ref={ref as never}
475-
backgroundColor="surface.background.gray.intense"
476-
borderRadius="medium"
477-
elevation="lowRaised"
478-
padding="spacing.7"
479-
width="300px"
480-
marginRight="spacing.6"
481-
href="https://razorpay.com"
482-
>
483-
<CardHeader marginBottom="spacing.4" paddingBottom="spacing.4">
484-
<CardHeaderLeading
485-
prefix={<CardHeaderIcon icon={CheckCircleIcon} />}
486-
subtitle="Share payment link via an email, SMS, messenger, chatbot etc."
487-
suffix={<CardHeaderCounter value={12} />}
488-
title="Payment Links"
489-
/>
490-
<CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
491-
</CardHeader>
492-
<CardBody>
493-
<Text position="relative" zIndex={1}>
494-
Create Razorpay Payments Links and share them with your customers from the Razorpay
495-
Dashboard or using APIs and start accepting payments. Check the advantages, payment
496-
methods, international currency support and more.
497-
</Text>
498-
</CardBody>
499-
<CardFooter marginTop="spacing.4" paddingTop="spacing.4">
500-
<CardFooterTrailing
501-
actions={{
502-
primary: {
503-
accessibilityLabel: undefined,
504-
icon: undefined,
505-
iconPosition: undefined,
506-
isDisabled: false,
507-
isLoading: false,
508-
// eslint-disable-next-line @typescript-eslint/no-empty-function
509-
onClick: () => {},
510-
text: 'Learn More',
511-
type: undefined,
512-
},
513-
}}
514-
/>
515-
</CardFooter>
516-
</Card>
517-
);
518-
});

‎packages/blade/src/components/Card/InternalCardExample.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Hidden example. It is used in motion stories
2+
import React from 'react';
3+
import {
4+
CardBody,
5+
Card,
6+
CardFooter,
7+
CardFooterTrailing,
8+
CardHeader,
9+
CardHeaderLeading,
10+
CardHeaderTrailing,
11+
CardHeaderIcon,
12+
CardHeaderCounter,
13+
CardHeaderBadge,
14+
} from '.';
15+
import { Text } from '~components/Typography';
16+
import { CheckCircleIcon } from '~components/Icons';
17+
18+
export const InternalCardExample = React.forwardRef((_, ref) => {
19+
return (
20+
<Card
21+
ref={ref as never}
22+
backgroundColor="surface.background.gray.intense"
23+
borderRadius="medium"
24+
elevation="lowRaised"
25+
padding="spacing.7"
26+
width="300px"
27+
marginRight="spacing.6"
28+
href="https://razorpay.com"
29+
>
30+
<CardHeader marginBottom="spacing.4" paddingBottom="spacing.4">
31+
<CardHeaderLeading
32+
prefix={<CardHeaderIcon icon={CheckCircleIcon} />}
33+
subtitle="Share payment link via an email, SMS, messenger, chatbot etc."
34+
suffix={<CardHeaderCounter value={12} />}
35+
title="Payment Links"
36+
/>
37+
<CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
38+
</CardHeader>
39+
<CardBody>
40+
<Text position="relative" zIndex={1}>
41+
Create Razorpay Payments Links and share them with your customers from the Razorpay
42+
Dashboard or using APIs and start accepting payments. Check the advantages, payment
43+
methods, international currency support and more.
44+
</Text>
45+
</CardBody>
46+
<CardFooter marginTop="spacing.4" paddingTop="spacing.4">
47+
<CardFooterTrailing
48+
actions={{
49+
primary: {
50+
accessibilityLabel: undefined,
51+
icon: undefined,
52+
iconPosition: undefined,
53+
isDisabled: false,
54+
isLoading: false,
55+
// eslint-disable-next-line @typescript-eslint/no-empty-function
56+
onClick: () => {},
57+
text: 'Learn More',
58+
type: undefined,
59+
},
60+
}}
61+
/>
62+
</CardFooter>
63+
</Card>
64+
);
65+
});

‎packages/blade/src/components/Fade/Fade.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import { Title } from '@storybook/addon-docs';
44
import StoryRouter from 'storybook-react-router';
5-
import { InternalCardExample } from '../Card/Card.stories';
5+
import { InternalCardExample } from '../Card/InternalCardExample';
66
import { Fade } from './';
77
import type { FadeProps } from './';
88
import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

‎packages/blade/src/components/Move/Move.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import { Title } from '@storybook/addon-docs';
44
import StoryRouter from 'storybook-react-router';
5-
import { InternalCardExample } from '../Card/Card.stories';
5+
import { InternalCardExample } from '../Card/InternalCardExample';
66
import { Move } from './';
77
import type { MoveProps } from './';
88
import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

‎packages/blade/src/components/Scale/Scale.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import { Title } from '@storybook/addon-docs';
4-
import { InternalCardExample } from '../Card/Card.stories';
4+
import { InternalCardExample } from '../Card/InternalCardExample';
55
import qrCodesImage from './docs-qrcodes.svg';
66
import { Scale } from './';
77
import type { ScaleProps } from './';

‎packages/blade/src/components/Slide/Slide.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import { Title } from '@storybook/addon-docs';
44
import StoryRouter from 'storybook-react-router';
5-
import { InternalCardExample } from '../Card/Card.stories';
5+
import { InternalCardExample } from '../Card/InternalCardExample';
66
import { Slide } from './';
77
import type { SlideProps } from './';
88
import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

‎packages/blade/src/components/Stagger/Stagger.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
33
import { Title } from '@storybook/addon-docs';
44
import StoryRouter from 'storybook-react-router';
5-
import { InternalCardExample } from '../Card/Card.stories';
5+
import { InternalCardExample } from '../Card/InternalCardExample';
66
import { Stagger } from './';
77
import type { StaggerProps } from './';
88
import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';

0 commit comments

Comments
 (0)