Skip to content

Commit 214b212

Browse files
saurabhdawaresaurabhdaware
authored
feat(Motion - Elevate): add Elevate component to motion presets (#2501)
* feat: add elevate component * refactor: rename variants variable * Create itchy-dogs-bow.md * fix: children type in story props
1 parent 883f132 commit 214b212

17 files changed

+840
-55
lines changed

‎.changeset/itchy-dogs-bow.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@razorpay/blade": minor
3+
---
4+
5+
feat(Motion / Elevate): add `Elevate` component to motion presets
6+
7+
Docs: https://blade.razorpay.com/?path=/docs/motion-elevate--docs

‎packages/blade/src/components/BaseMotion/docs/MotionIntro.stories.mdx

+14-3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
MoveIntro,
2222
SlideIntro,
2323
ScaleIntro,
24+
ElevateIntro,
2425
MorphIntro,
2526
StaggerIntro,
2627
AnimateInteractionsIntro,
@@ -106,8 +107,18 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
106107
<p align="right">[View Scale Documentation](/?path=/docs/motion-scale--docs)</p>
107108
</Box>
108109

110+
<Box id="elevate">
111+
<Heading size="large">5. Elevate</Heading>
112+
<Text marginTop="spacing.1">
113+
Elevate component animates over CSS `box-shadow` property and allows you to highlight components
114+
by adding shadows to it
115+
</Text>
116+
<ElevateIntro />
117+
<p align="right">[View Elevate Documentation](/?path=/docs/motion-elevate--docs)</p>
118+
</Box>
119+
109120
<Box id="morph">
110-
<Heading size="large">5. Morph</Heading>
121+
<Heading size="large">6. Morph</Heading>
111122
<Text marginTop="spacing.1">
112123
Morph component is a abstraction on motion react's layout animations. It allows you to morph
113124
between 2 elements
@@ -117,7 +128,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
117128
</Box>
118129

119130
<Box id="animateinteractions">
120-
<Heading size="large">6. AnimateInteractions</Heading>
131+
<Heading size="large">7. AnimateInteractions</Heading>
121132
<Text marginTop="spacing.1">
122133
AnimateInteractions is a component that allows you to animate child components based on
123134
interactions on parent. This is similar to doing `.parent:hover .child {}` styling in CSS.
@@ -129,7 +140,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
129140
</Box>
130141

131142
<Box id="stagger">
132-
<Heading size="large">7. Stagger</Heading>
143+
<Heading size="large">8. Stagger</Heading>
133144
<Text marginTop="spacing.1">
134145
Stagger component allows you to stagger children (make them appear one after the other). Its a
135146
utility preset. You can use any of the base presets like Move, Fade, Slide inside of it

‎packages/blade/src/components/BaseMotion/docs/MotionIntroUtils.web.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AnimateInteractions } from '~components/AnimateInteractions';
33
import type { BoxProps } from '~components/Box';
44
import { Box } from '~components/Box';
55
import { Button } from '~components/Button';
6+
import { Elevate } from '~components/Elevate';
67
import { Fade } from '~components/Fade';
78
import { Link } from '~components/Link';
89
import { Morph } from '~components/Morph';
@@ -35,7 +36,7 @@ const MotionExampleBox = React.forwardRef(
3536
<Box
3637
ref={ref as never}
3738
backgroundColor="surface.background.gray.intense"
38-
elevation="midRaised"
39+
elevation="none"
3940
height="100%"
4041
width="100%"
4142
borderColor="surface.border.gray.muted"
@@ -151,6 +152,13 @@ export const Showcase = (): React.ReactElement => {
151152
</Scale>
152153
</ShowcaseBox>
153154
</ShowcaseLinkBox>
155+
<ShowcaseLinkBox name="Elevate">
156+
<ShowcaseBox>
157+
<Elevate isHighlighted={isVisible}>
158+
<MotionExampleBox name="Elevate" />
159+
</Elevate>
160+
</ShowcaseBox>
161+
</ShowcaseLinkBox>
154162
<ShowcaseLinkBox name="Morph">
155163
<ShowcaseBox>
156164
{isVisible ? (
@@ -195,7 +203,7 @@ export const Showcase = (): React.ReactElement => {
195203
<AnimateInteractions motionTriggers={['hover', 'focus']}>
196204
<Box
197205
backgroundColor="surface.background.gray.intense"
198-
elevation="midRaised"
206+
elevation="none"
199207
height="100%"
200208
width="100%"
201209
borderColor="surface.border.gray.muted"

‎packages/blade/src/components/BaseMotion/docs/codeExamples.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,39 @@ export const ScaleSandbox = ({
140140
);
141141
};
142142

143+
export const ElevateSandbox = ({
144+
padding,
145+
}: {
146+
padding?: BoxProps['padding'];
147+
}): React.ReactElement => {
148+
return (
149+
<Sandbox padding={padding}>{`import {
150+
Elevate,
151+
Card,
152+
CardBody,
153+
Text,
154+
Box,
155+
} from '@razorpay/blade/components';
156+
157+
function App() {
158+
return (
159+
<Box>
160+
<Elevate motionTriggers={['hover']}>
161+
<Card>
162+
<CardBody>
163+
<Text>Card that drops shadow on hover</Text>
164+
</CardBody>
165+
</Card>
166+
</Elevate>
167+
</Box>
168+
)
169+
}
170+
171+
export default App;
172+
`}</Sandbox>
173+
);
174+
};
175+
143176
export const MorphSandbox = ({
144177
padding,
145178
}: {

‎packages/blade/src/components/BaseMotion/docs/introExamples.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,29 @@ export const ScaleIntro = (): React.ReactElement => {
9898
);
9999
};
100100

101+
export const ElevateIntro = (): React.ReactElement => {
102+
return (
103+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
104+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
105+
<SandboxHighlighter>{`import {
106+
Elevate,
107+
} from '@razorpay/blade/components';
108+
109+
110+
<Elevate motionTriggers={['hover']}>
111+
<Card>
112+
<CardBody>Card that drops shadow on hover</CardBody>
113+
</Card>
114+
</Elevate>
115+
`}</SandboxHighlighter>
116+
</Box>
117+
<Box flex="1">
118+
<Story id="motion-elevate--default" />
119+
</Box>
120+
</Box>
121+
);
122+
};
123+
101124
export const MorphIntro = (): React.ReactElement => {
102125
return (
103126
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">

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

+51-48
Original file line numberDiff line numberDiff line change
@@ -12,54 +12,57 @@ import {
1212
CardHeaderCounter,
1313
CardHeaderBadge,
1414
} from '.';
15+
import type { CardProps } from '.';
1516
import { Text } from '~components/Typography';
1617
import { CheckCircleIcon } from '~components/Icons';
1718

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

‎packages/blade/src/components/Elevate/Elevate.native.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { ElevateProps } from './types';
2+
import { Text } from '~components/Typography';
3+
import { throwBladeError } from '~utils/logger';
4+
5+
const Elevate = (_props: ElevateProps): React.ReactElement => {
6+
throwBladeError({
7+
message: 'Elevate is not yet implemented for native',
8+
moduleName: 'Elevate',
9+
});
10+
11+
return <Text>Elevate Component is not available for Native mobile apps.</Text>;
12+
};
13+
14+
export { Elevate };

0 commit comments

Comments
 (0)