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
razorpay · Jan 29, 2025 · 214b212 · 214b212
1 parent 883f132
commit 214b212
Show file tree

Hide file tree

Showing 17 changed files with 840 additions and 55 deletions.
diff --git a/.changeset/itchy-dogs-bow.md b/.changeset/itchy-dogs-bow.md
@@ -0,0 +1,7 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(Motion / Elevate): add `Elevate` component to motion presets
+
+Docs: https://blade.razorpay.com/?path=/docs/motion-elevate--docs
diff --git a/packages/blade/src/components/BaseMotion/docs/MotionIntro.stories.mdx b/packages/blade/src/components/BaseMotion/docs/MotionIntro.stories.mdx
@@ -21,6 +21,7 @@ import {
   MoveIntro,
   SlideIntro,
   ScaleIntro,
+  ElevateIntro,
   MorphIntro,
   StaggerIntro,
   AnimateInteractionsIntro,
@@ -106,8 +107,18 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
   <p align="right">[View Scale Documentation](/?path=/docs/motion-scale--docs)</p>
 </Box>
 
+<Box id="elevate">
+  <Heading size="large">5. Elevate</Heading>
+  <Text marginTop="spacing.1">
+    Elevate component animates over CSS `box-shadow` property and allows you to highlight components
+    by adding shadows to it
+  </Text>
+  <ElevateIntro />
+  <p align="right">[View Elevate Documentation](/?path=/docs/motion-elevate--docs)</p>
+</Box>
+
 <Box id="morph">
-  <Heading size="large">5. Morph</Heading>
+  <Heading size="large">6. Morph</Heading>
   <Text marginTop="spacing.1">
     Morph component is a abstraction on motion react's layout animations. It allows you to morph
     between 2 elements
@@ -117,7 +128,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
 </Box>
 
 <Box id="animateinteractions">
-  <Heading size="large">6. AnimateInteractions</Heading>
+  <Heading size="large">7. AnimateInteractions</Heading>
   <Text marginTop="spacing.1">
     AnimateInteractions is a component that allows you to animate child components based on
     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
 </Box>
 
 <Box id="stagger">
-  <Heading size="large">7. Stagger</Heading>
+  <Heading size="large">8. Stagger</Heading>
   <Text marginTop="spacing.1">
     Stagger component allows you to stagger children (make them appear one after the other). Its a
     utility preset. You can use any of the base presets like Move, Fade, Slide inside of it

diff --git a/packages/blade/src/components/BaseMotion/docs/MotionIntroUtils.web.tsx b/packages/blade/src/components/BaseMotion/docs/MotionIntroUtils.web.tsx
@@ -3,6 +3,7 @@ import { AnimateInteractions } from '~components/AnimateInteractions';
 import type { BoxProps } from '~components/Box';
 import { Box } from '~components/Box';
 import { Button } from '~components/Button';
+import { Elevate } from '~components/Elevate';
 import { Fade } from '~components/Fade';
 import { Link } from '~components/Link';
 import { Morph } from '~components/Morph';
@@ -35,7 +36,7 @@ const MotionExampleBox = React.forwardRef(
       <Box
         ref={ref as never}
         backgroundColor="surface.background.gray.intense"
-        elevation="midRaised"
+        elevation="none"
         height="100%"
         width="100%"
         borderColor="surface.border.gray.muted"
@@ -151,6 +152,13 @@ export const Showcase = (): React.ReactElement => {
               </Scale>
             </ShowcaseBox>
           </ShowcaseLinkBox>
+          <ShowcaseLinkBox name="Elevate">
+            <ShowcaseBox>
+              <Elevate isHighlighted={isVisible}>
+                <MotionExampleBox name="Elevate" />
+              </Elevate>
+            </ShowcaseBox>
+          </ShowcaseLinkBox>
           <ShowcaseLinkBox name="Morph">
             <ShowcaseBox>
               {isVisible ? (
@@ -195,7 +203,7 @@ export const Showcase = (): React.ReactElement => {
               <AnimateInteractions motionTriggers={['hover', 'focus']}>
                 <Box
                   backgroundColor="surface.background.gray.intense"
-                  elevation="midRaised"
+                  elevation="none"
                   height="100%"
                   width="100%"
                   borderColor="surface.border.gray.muted"

diff --git a/packages/blade/src/components/BaseMotion/docs/codeExamples.tsx b/packages/blade/src/components/BaseMotion/docs/codeExamples.tsx
@@ -140,6 +140,39 @@ export const ScaleSandbox = ({
   );
 };
 
+export const ElevateSandbox = ({
+  padding,
+}: {
+  padding?: BoxProps['padding'];
+}): React.ReactElement => {
+  return (
+    <Sandbox padding={padding}>{`import { 
+      Elevate,
+      Card, 
+      CardBody,
+      Text, 
+      Box,
+    } from '@razorpay/blade/components';
+
+    function App() {
+      return (
+        <Box>
+          <Elevate motionTriggers={['hover']}>
+            <Card>
+              <CardBody>
+                <Text>Card that drops shadow on hover</Text>
+              </CardBody>
+            </Card>
+          </Elevate>
+        </Box>
+      )
+    }
+
+    export default App;
+    `}</Sandbox>
+  );
+};
+
 export const MorphSandbox = ({
   padding,
 }: {

diff --git a/packages/blade/src/components/BaseMotion/docs/introExamples.tsx b/packages/blade/src/components/BaseMotion/docs/introExamples.tsx
@@ -98,6 +98,29 @@ export const ScaleIntro = (): React.ReactElement => {
   );
 };
 
+export const ElevateIntro = (): React.ReactElement => {
+  return (
+    <Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
+      <Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
+        <SandboxHighlighter>{`import { 
+        Elevate, 
+      } from '@razorpay/blade/components';
+
+
+      <Elevate motionTriggers={['hover']}>
+        <Card>
+          <CardBody>Card that drops shadow on hover</CardBody>
+        </Card>
+      </Elevate>
+      `}</SandboxHighlighter>
+      </Box>
+      <Box flex="1">
+        <Story id="motion-elevate--default" />
+      </Box>
+    </Box>
+  );
+};
+
 export const MorphIntro = (): React.ReactElement => {
   return (
     <Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">

diff --git a/packages/blade/src/components/Card/InternalCardExample.tsx b/packages/blade/src/components/Card/InternalCardExample.tsx
@@ -12,54 +12,57 @@ import {
   CardHeaderCounter,
   CardHeaderBadge,
 } from '.';
+import type { CardProps } 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>
-  );
-});
+export const InternalCardExample = React.forwardRef(
+  ({ elevation = 'lowRaised' }: Partial<CardProps>, ref) => {
+    return (
+      <Card
+        ref={ref as never}
+        backgroundColor="surface.background.gray.intense"
+        borderRadius="medium"
+        elevation={elevation}
+        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/Elevate/Elevate.native.tsx b/packages/blade/src/components/Elevate/Elevate.native.tsx
@@ -0,0 +1,14 @@
+import type { ElevateProps } from './types';
+import { Text } from '~components/Typography';
+import { throwBladeError } from '~utils/logger';
+
+const Elevate = (_props: ElevateProps): React.ReactElement => {
+  throwBladeError({
+    message: 'Elevate is not yet implemented for native',
+    moduleName: 'Elevate',
+  });
+
+  return <Text>Elevate Component is not available for Native mobile apps.</Text>;
+};
+
+export { Elevate };