@razorpay/blade 11.6.1 → 11.6.2

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

@@ -1,13 +1,18 @@
 import { applyTransform } from '@hypermod/utils';
 import * as transformer from '..';
 
-it('should update the lineHeight & fontSize tokens', async () => {
+it('should update the color 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')};
+
+            span {
+              color: \${theme.colors.brand.primary[500]};
+              backgroundColor: \${theme.colors.brand.gray[200].lowContrast};
+            }
         \`  
         const App = () => (
             <>
@@ -24,6 +29,11 @@ it('should update the lineHeight & fontSize tokens', async () => {
     "const CustomBox = styled(Box)\`
                 color: \${theme.colors.interactive.background.notice.faded};
                 backgroundColor: \${getIn(theme.colors, 'surface.background.gray.moderate')};
+
+                span {
+                  color: \${theme.colors.surface.background.primary.intense};
+                  backgroundColor: \${theme.colors.surface.background.gray.moderate};
+                }
             \`  
             const App = () => (
                 <>

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

@@ -37,6 +37,8 @@ it('should remove the "variant" prop from Heading', async () => {
   const result = await applyTransform(
     transformer,
     `
+        import { Heading } from '@razorpay/blade/components';
+
         const App = () => (
           <>
             <Heading type="subtle" weight="bold" variant="subheading" marginTop="spacing.2"> Lorem ipsum </Heading>  
@@ -47,7 +49,9 @@ it('should remove the "variant" prop from Heading', async () => {
   );
 
   expect(result).toMatchInlineSnapshot(`
-    "const App = () => (
+    "import { Heading, Text } from '@razorpay/blade/components';
+
+            const App = () => (
               <>
                 <Text weight="semibold" marginTop="spacing.2" size="small" color="surface.text.gray.subtle"> Lorem ipsum </Text>  
               </>

package/codemods/brand-refresh/transformers/index.ts

@@ -46,7 +46,9 @@ const transformer: Transform = (file, api, options) => {
           return 'UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN';
         }
 
-        const replacement = colorTokensMapping[originalString];
+        // Get the token from the original string, e.g. "brand.primary[500]" -> "brand.primary.500"
+        const token = originalString.replace('[', '.').replace(/\]|'|"/g, '');
+        const replacement = colorTokensMapping[token];
 
         if (!replacement) {
           return originalString;

package/codemods/brand-refresh/transformers/migrate-typography.ts

@@ -89,6 +89,28 @@ function migrateTypographyComponents({ root, j, file }): void {
         ) {
           node.openingElement.name.name = 'Text';
           node.closingElement.name.name = 'Text';
+
+          // Add 'Text' import if not present
+          // Note that we don't remove the 'Heading' import as it might be used elsewhere
+          root
+            .find(j.ImportDeclaration, {
+              source: {
+                value: '@razorpay/blade/components',
+              },
+            })
+            .replaceWith((path) => {
+              // Check if Heading import is already present
+              const isTextImportPresent = path.node.specifiers.some(
+                (node) => node.imported.name === 'Text',
+              );
+
+              // If Heading import is not present, update the "Title" import to use "Heading"
+              if (!isTextImportPresent) {
+                path.node.specifiers.push(j.importSpecifier(j.identifier('Text')));
+              }
+
+              return path.node;
+            });
         }
 
         if (

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.6.1",
+  "version": "11.6.2",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -274,7 +274,7 @@
     "typescript-transform-paths": "3.4.6",
     "@types/body-scroll-lock": "3.1.0",
     "ramda": "0.29.1",
-    "@razorpay/i18nify-js": "1.4.0",
+    "@razorpay/i18nify-js": "1.4.4",
     "@razorpay/i18nify-react": "4.0.0"
   },
   "peerDependencies": {
@@ -291,7 +291,7 @@
     "react-hot-toast": "2.4.1",
     "@gorhom/bottom-sheet": "^4.4.6",
     "@gorhom/portal": "^1.0.14",
-    "@razorpay/i18nify-js": "^1.4.0"
+    "@razorpay/i18nify-js": "^1.4.4"
   },
   "peerDependenciesMeta": {
     "react-native": {