feat(Amount): Amount component migration (#1909)

Co-authored-by: Kamlesh Chandnani <kamlesh.chandnani@gmail.com>
razorpay · Dec 29, 2023 · b19e967 · b19e967
1 parent 1b9f4ee
commit b19e967
Show file tree

Hide file tree

Showing 17 changed files with 1,294 additions and 932 deletions.
diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts
@@ -18,6 +18,7 @@ const config: StorybookConfig = {
   stories: [
     '../../docs/guides/*.stories.mdx',
     '../../src/components/Box/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Amount/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Badge/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Card/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Icons/**/*.stories.@(ts|tsx|js|jsx)',

diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -250,7 +250,7 @@
     "postinstall-postinstall": "2.1.0",
     "react-refresh": "0.11.0",
     "react-docgen-typescript-plugin": "1.0.5",
-    "react-json-tree":"0.18.0",
+    "react-json-tree": "0.18.0",
     "metro-config": "0.66.2",
     "@babel/plugin-proposal-class-static-block": "7.21.0",
     "react-native-safe-area-context": "3.4.1",

diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js
@@ -1,4 +1,5 @@
 const rebrandedComponents = [
+  'Amount',
   'BaseBox',
   'BaseText',
   'BaseLink',

diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -2,12 +2,15 @@ import type { StoryFn, Meta } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import type { AmountProps } from './Amount';
 import { Amount as AmountComponent } from './Amount';
+import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens';
 import { currencyPrefixMapping } from './amountTokens';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import BaseBox from '~components/Box/BaseBox';
 import { Sandbox } from '~utils/storybook/Sandbox';
-import { Text } from '~components/Typography';
+import { Display, Text } from '~components/Typography';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Box } from '~components/Box';
+import { objectKeysWithType } from '~utils/objectKeysWithType';
 
 const Page = (): React.ReactElement => {
   return (
@@ -67,40 +70,47 @@ const AmountTemplateWithText: StoryFn<typeof AmountComponent> = (args) => {
 export const AmountWithText = AmountTemplateWithText.bind({});
 
 AmountWithText.args = {
-  value: 12500.45,
-  size: 'body-medium',
+  value: 1000.0,
+  type: 'body',
+  size: 'medium',
 };
 AmountWithText.storyName = 'With Text';
 
-const AmountSizesTemplate: StoryFn<typeof AmountComponent> = ({ ...args }) => {
-  const sizes: AmountProps['size'][] = [
-    'body-small',
-    'body-small-bold',
-    'body-medium',
-    'body-medium-bold',
-    'heading-small',
-    'heading-small-bold',
-    'heading-large',
-    'heading-large-bold',
-    'title-small',
-    'title-medium',
-  ];
+const AmountSizesTemplate: StoryFn<typeof AmountComponent> = (args) => {
+  const sizes: {
+    heading: AmountHeadingProps['size'][];
+    body: AmountBodyProps['size'][];
+    display: AmountDisplayProps['size'][];
+  } = {
+    body: ['xsmall', 'small', 'medium', 'large'],
+    heading: ['small', 'medium', 'large', 'xlarge', '2xlarge'],
+    display: ['small', 'medium', 'large', 'xlarge'],
+  };
+
   return (
-    <BaseBox justifyContent="center">
-      {sizes.map((size) => (
-        <BaseBox key={size} marginBottom="spacing.3">
-          <Text>{size}</Text>
-          <BaseBox marginBottom="spacing.1" />
-          <AmountComponent {...args} size={size} />
-        </BaseBox>
+    <Box justifyContent="center">
+      {objectKeysWithType(sizes).map((amountTypeProp) => (
+        <Box key={amountTypeProp}>
+          <Display size="small" marginTop="spacing.8" marginBottom="spacing.4">
+            Type {amountTypeProp}
+          </Display>
+          {sizes[amountTypeProp].map((size) => (
+            <Box key={size} marginBottom="spacing.4">
+              <Text>{size}</Text>
+              <BaseBox marginBottom="spacing.1" />
+              {/* @ts-expect-error */}
+              <AmountComponent {...args} type={amountTypeProp} size={size} />
+            </Box>
+          ))}
+        </Box>
       ))}
-    </BaseBox>
+    </Box>
   );
 };
 
 const defaultArgs: AmountProps = {
   value: 123456.789,
-  size: 'title-medium',
+  size: 'medium',
 };
 
 export const AmountSizes: StoryFn<typeof AmountComponent> = AmountSizesTemplate.bind({});
@@ -110,21 +120,21 @@ AmountSizes.args = {
 AmountSizes.storyName = 'Sizes';
 
 const AmountTemplate: StoryFn<typeof AmountComponent> = (args) => {
-  const intents = ['positive', 'negative', 'notice', 'information'] as const;
+  const colors = ['positive', 'negative', 'notice', 'information'] as const;
 
   return (
     <BaseBox justifyContent="flex-start">
-      {intents.map((intent) => (
+      {colors.map((color) => (
         <BaseBox
           display="flex"
-          key={intent}
+          key={color}
           alignItems="baseline"
           paddingRight="spacing.3"
           paddingTop="spacing.3"
           flexDirection="column"
         >
-          <Text marginBottom="spacing.1">{intent}</Text>
-          <AmountComponent {...args} intent={intent} />
+          <Text marginBottom="spacing.1">{color}</Text>
+          <AmountComponent {...args} color={color} />
         </BaseBox>
       ))}
     </BaseBox>