@razorpay/blade 10.23.5 → 11.0.0

package/codemods/brand-refresh/transformers/__tests__/migrate-badge.test.ts

@@ -0,0 +1,32 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Badge component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Badge fontWeight="bold"> Hello </Badge>
+            <Badge variant="blue"> Hello </Badge>
+            <Badge color="default"> Hello </Badge>
+            <Badge variant="blue" color="default"> Hello </Badge>
+            <Badge variant="negative" color="positive"> Hello </Badge>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Badge> Hello </Badge>
+                <Badge color="primary"> Hello </Badge>
+                <Badge color="primary"> Hello </Badge>
+                <Badge color="primary"> Hello </Badge>
+                <Badge color="positive"> Hello </Badge>
+            </>
+          );"
+  `);
+});

package/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts

@@ -0,0 +1,180 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Card component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Card elevation="lowRaised" padding="spacing.7" surfaceLevel={2}>
+                <CardBody>
+                    <Text>
+                        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>
+            </Card>
+
+            <Card elevation="lowRaised" padding="spacing.7" surfaceLevel={3}>
+                <CardBody>
+                    <Text>
+                        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>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing visual={<CardHeaderBadge variant="positive">NEW</CardHeaderBadge>} />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing visual={<CardHeaderText weight="bold">NEW</CardHeaderText>} />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing visual={<CardHeaderIconButton color="default">NEW</CardHeaderIconButton>} />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardHeaderLeading
+                        title="Card Header"
+                        subtitle="Subtitle"
+                        prefix={<CardHeaderIcon icon={InfoIcon} />}
+                        suffix={<CardHeaderCounter intent="positive" value={12} />}
+                    />
+                    <CardHeaderTrailing
+                        visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />}
+                    />
+                </CardHeader>
+                <CardBody>
+                    <Text> Hello World</Text>
+                </CardBody>
+            </Card>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.moderate">
+                    <CardBody>
+                        <Text>
+                            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>
+                </Card>
+
+                <Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.intense">
+                    <CardBody>
+                        <Text>
+                            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>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing visual={<CardHeaderText weight="semibold">NEW</CardHeaderText>} />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing visual={<CardHeaderIconButton color="primary">NEW</CardHeaderIconButton>} />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+
+                <Card>
+                    <CardHeader>
+                        <CardHeaderLeading
+                            title="Card Header"
+                            subtitle="Subtitle"
+                            prefix={<CardHeaderIcon icon={InfoIcon} />}
+                            suffix={<CardHeaderCounter value={12} color="positive" />}
+                        />
+                        <CardHeaderTrailing
+                            visual={<CardHeaderAmount
+                                value={123}
+                                color="feedback.text.positive.intense"
+                                type="heading"
+                                size="large" />}
+                        />
+                    </CardHeader>
+                    <CardBody>
+                        <Text> Hello World</Text>
+                    </CardBody>
+                </Card>
+            </>
+          );"
+  `);
+});

package/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts

@@ -0,0 +1,172 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should update the lineHeight & fontSize tokens', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+        const CustomBox = styled(Box)\`
+            color: \${theme.colors.feedback.notice.action.background.primary.default.lowContrast};
+            backgroundColor: \${getIn(theme.colors, 'surface.background.level3.lowContrast')};
+        \`  
+        const App = () => (
+            <>
+              <CustomBox> Lorem ipsum </CustomBox>  
+              <Text color="feedback.text.information.lowContrast"> Lorem ipsum </Text>
+              <Text color="feedback.text.information.highContrast"> Lorem ipsum </Text>
+            </>
+          );
+        `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const CustomBox = styled(Box)\`
+                color: \${theme.colors.interactive.background.notice.faded};
+                backgroundColor: \${getIn(theme.colors, 'surface.background.gray.moderate')};
+            \`  
+            const App = () => (
+                <>
+                  <CustomBox> Lorem ipsum </CustomBox>  
+                  <Text color="feedback.text.information.intense"> Lorem ipsum </Text>
+                  <Text color="feedback.text.information.intense"> Lorem ipsum </Text>
+                </>
+              );"
+  `);
+});
+
+it('should update token values contextually', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <Box borderRightColor="brand.primary.500" backgroundColor="brand.primary.500"> Lorem ipsum </Box>  
+          <Text color="brand.primary.500"> Lorem ipsum </Text>
+          <MapIcon color="brand.primary.500" />
+          <MapIcon color="brand.secondary.500" />
+          <MapIcon color="badge.text.blue.lowContrast" />
+          <MapIcon color="surface.action.icon.default.lowContrast" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <Box borderRightColor="surface.border.primary.normal" backgroundColor="surface.background.primary.intense"> Lorem ipsum </Box>  
+              <Text color="surface.text.primary.normal"> Lorem ipsum </Text>
+              <MapIcon color="interactive.icon.primary.normal" />
+              <MapIcon color="surface.text.onSea.onSubtle" />
+              <MapIcon color="interactive.icon.primary.normal" />
+              <MapIcon color="interactive.icon.gray.normal" />
+            </>
+          );"
+  `);
+});
+
+it('should create TS error for highContrast tokens', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const CustomBox = styled(Box)\`
+        color: \${theme.colors.surface.text.subdued.highContrast};
+        backgroundColor: \${getIn(theme.colors, 'surface.background.level1.highContrast')};
+    \`
+    const App = () => (
+        <>
+          <CustomBox> Lorem ipsum </CustomBox>
+          <Text color="surface.text.subtle.highContrast"> Lorem ipsum </Text>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const CustomBox = styled(Box)\`
+            color: \${theme.colors.UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN};
+            backgroundColor: \${getIn(theme.colors, 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN')};
+        \`
+        const App = () => (
+            <>
+              <CustomBox> Lorem ipsum </CustomBox>
+              <Text color="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"> Lorem ipsum </Text>
+            </>
+          );"
+  `);
+});
+
+it('should update the theme in BladeProvider', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    import { BladeProvider } from '@razorpay/blade/components';
+    import { bankingTheme } from '@razorpay/blade/tokens';
+
+    const AppWrapper = () => {
+      return (
+        <BladeProvider themeTokens={bankingTheme} colorScheme="light">
+          <App />
+        </BladeProvider>
+      );
+    }
+
+    export default AppWrapper;
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "import { BladeProvider } from '@razorpay/blade/components';
+        import { bladeTheme } from '@razorpay/blade/tokens';
+
+        const AppWrapper = () => {
+          return (
+            <BladeProvider themeTokens={bladeTheme} colorScheme="light">
+              <App />
+            </BladeProvider>
+          );
+        }
+
+        export default AppWrapper;"
+  `);
+});
+
+it('should update the theme in BladeProvider', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    import { BladeProvider } from '@razorpay/blade/components';
+    import { paymentTheme } from '@razorpay/blade/tokens';
+
+    const AppWrapper = () => {
+      return (
+        <BladeProvider themeTokens={paymentTheme} colorScheme="light">
+          <App />
+        </BladeProvider>
+      );
+    }
+
+    export default AppWrapper;
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "import { BladeProvider } from '@razorpay/blade/components';
+        import { bladeTheme } from '@razorpay/blade/tokens';
+
+        const AppWrapper = () => {
+          return (
+            <BladeProvider themeTokens={bladeTheme} colorScheme="light">
+              <App />
+            </BladeProvider>
+          );
+        }
+
+        export default AppWrapper;"
+  `);
+});

package/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts

@@ -0,0 +1,206 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate contrast prop to emphasis', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <Badge contrast="low">Hello</Badge> 
+          <Badge contrast="high">Hello</Badge> 
+
+          <Text> Lorem Ipsum <Badge contrast="high">Hello</Badge> </Text>
+
+          <Counter contrast="low">Hello</Counter> 
+          <Counter contrast="high">Hello</Counter>
+
+          <IconButton icon={CloseIcon} contrast="low" onClick={() => console.log('Clicked')} />
+          <IconButton icon={CloseIcon} contrast="high" onClick={() => console.log('Clicked')} />
+          
+          <Alert description="Hello World" contrast="low" />
+          <Alert description="Hello World" contrast="high" />
+
+          <Skeleton height="50px" width="100%" contrast="low" />
+          <Skeleton height="50px" width="100%" contrast="high" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <Badge emphasis="subtle">Hello</Badge> 
+              <Badge emphasis="intense">Hello</Badge> 
+
+              <Text> Lorem Ipsum <Badge emphasis="intense">Hello</Badge> </Text>
+
+              <Counter emphasis="subtle">Hello</Counter> 
+              <Counter emphasis="intense">Hello</Counter>
+
+              <IconButton icon={CloseIcon} emphasis="intense" onClick={() => console.log('Clicked')} />
+              <IconButton icon={CloseIcon} emphasis="subtle" onClick={() => console.log('Clicked')} />
+              
+              <Alert description="Hello World" emphasis="subtle" />
+              <Alert description="Hello World" emphasis="intense" />
+
+              <Skeleton height="50px" width="100%" />
+              <Skeleton height="50px" width="100%" />
+            </>
+          );"
+  `);
+});
+
+it('should remove variant/intent prop in favor of color prop', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+      <>
+        <Alert description="Hello World" intent="information" />
+
+        <Badge variant="blue"> Hello </Badge>
+        <Badge color="default"> Hello </Badge>
+        <Badge variant="blue" color="default"> Hello </Badge>
+        <Badge variant="negative" color="positive"> Hello </Badge>
+
+        <CardHeaderBadge variant="blue"> Hello </CardHeaderBadge>
+        <CardHeaderBadge color="default"> Hello </CardHeaderBadge>
+        <CardHeaderBadge variant="blue" color="default"> Hello </CardHeaderBadge>
+        <CardHeaderBadge variant="negative" color="positive"> Hello </CardHeaderBadge>
+
+        <Counter variant="blue"> Hello </Counter>
+        <Counter intent="positive"> Hello </Counter>
+        <Counter color="default"> Hello </Counter>
+        <Counter variant="blue" intent="positive" color="default"> Hello </Counter>
+        <Counter variant="negative" intent="notice" color="positive"> Hello </Counter>
+
+        <CardHeaderCounter variant="blue"> Hello </CardHeaderCounter>
+        <CardHeaderCounter intent="positive"> Hello </CardHeaderCounter>
+        <CardHeaderCounter color="default"> Hello </CardHeaderCounter>
+        <CardHeaderCounter variant="blue" intent="positive" color="default"> Hello </CardHeaderCounter>
+        <CardHeaderCounter variant="negative" intent="notice" color="positive"> Hello </CardHeaderCounter>
+
+        <Indicator intent="positive" />
+
+        <Button variant="secondary" color="default"> Click Me </Button>
+        <Button variant="secondary" color="white"> Click Me </Button>
+
+        <CardHeaderIconButton variant="secondary" color="default"> Click Me </CardHeaderIconButton>
+        <CardHeaderIconButton variant="secondary" color="white"> Click Me </CardHeaderIconButton>
+
+        <Link color="default" href="https://github.com/razorpay/blade" variant="anchor">
+          Learn More
+        </Link>
+
+        <CardHeaderLink color="default" href="https://github.com/razorpay/blade" variant="anchor">
+          Learn More
+        </CardHeaderLink>
+
+        <ChipGroup defaultValue="yes">
+          <Chip intent="positive" value="yes"> Yes </Chip>
+          <Chip intent="negative" value="no"> No </Chip>
+        </ChipGroup>
+
+        <ChipGroup defaultValue="yes" intent="none">
+          <Chip value="yes" intent="none"> Yes </Chip>
+          <Chip value="no" intent="none"> No </Chip>
+        </ChipGroup>
+
+        <ChipGroup defaultValue="yes" color="default">
+          <Chip value="yes" color="default"> Yes </Chip>
+          <Chip value="no" color="default"> No </Chip>
+        </ChipGroup>
+
+        <Amount intent="positive" value={1234} />
+
+        <CardHeaderAmount intent="positive" value={1234} />
+
+        <ProgressBar intent="positive" label="Label" size="medium" value={10} />
+        <ProgressBar intent="positive" label="Label" size="medium" value={10}  contrast="low"  />
+        <ProgressBar intent="positive" label="Label" size="medium" value={10}  contrast="high"  />
+
+        <Spinner contrast="high" />
+        <Spinner contrast="low" />
+        <Spinner color="default" />
+      </>
+    );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+          <>
+            <Alert description="Hello World" color="information" />
+
+            <Badge color="primary"> Hello </Badge>
+            <Badge color="primary"> Hello </Badge>
+            <Badge color="primary"> Hello </Badge>
+            <Badge color="positive"> Hello </Badge>
+
+            <CardHeaderBadge color="primary"> Hello </CardHeaderBadge>
+            <CardHeaderBadge color="primary"> Hello </CardHeaderBadge>
+            <CardHeaderBadge color="primary"> Hello </CardHeaderBadge>
+            <CardHeaderBadge color="positive"> Hello </CardHeaderBadge>
+
+            <Counter color="primary"> Hello </Counter>
+            <Counter color="positive"> Hello </Counter>
+            <Counter color="primary"> Hello </Counter>
+            <Counter color="primary"> Hello </Counter>
+            <Counter color="positive"> Hello </Counter>
+
+            <CardHeaderCounter color="primary"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="positive"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="primary"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="primary"> Hello </CardHeaderCounter>
+            <CardHeaderCounter color="positive"> Hello </CardHeaderCounter>
+
+            <Indicator color="positive" />
+
+            <Button variant="secondary" color="primary"> Click Me </Button>
+            <Button variant="secondary" color="white"> Click Me </Button>
+
+            <CardHeaderIconButton variant="secondary" color="primary"> Click Me </CardHeaderIconButton>
+            <CardHeaderIconButton variant="secondary" color="white"> Click Me </CardHeaderIconButton>
+
+            <Link color="primary" href="https://github.com/razorpay/blade" variant="anchor">
+              Learn More
+            </Link>
+
+            <CardHeaderLink color="primary" href="https://github.com/razorpay/blade" variant="anchor">
+              Learn More
+            </CardHeaderLink>
+
+            <ChipGroup defaultValue="yes">
+              <Chip value="yes" color="positive"> Yes </Chip>
+              <Chip value="no" color="negative"> No </Chip>
+            </ChipGroup>
+
+            <ChipGroup defaultValue="yes" color="primary">
+              <Chip value="yes" color="primary"> Yes </Chip>
+              <Chip value="no" color="primary"> No </Chip>
+            </ChipGroup>
+
+            <ChipGroup defaultValue="yes" color="primary">
+              <Chip value="yes" color="primary"> Yes </Chip>
+              <Chip value="no" color="primary"> No </Chip>
+            </ChipGroup>
+
+            <Amount color="feedback.text.positive.intense" value={1234} />
+
+            <CardHeaderAmount color="feedback.text.positive.intense" value={1234} />
+
+            <ProgressBar label="Label" size="medium" value={10} color="positive" />
+            <ProgressBar label="Label" size="medium" value={10} color="positive" />
+            <ProgressBar label="Label" size="medium" value={10} contrast="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN"  color="positive"  />
+
+            <Spinner color="white" />
+            <Spinner color="primary" />
+            <Spinner color="primary" />
+          </>
+        );"
+  `);
+});

package/codemods/brand-refresh/transformers/__tests__/migrate-divider.test.ts

@@ -0,0 +1,24 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Divider component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <Divider variant="normal" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <Divider variant="muted" />
+            </>
+          );"
+  `);
+});