@razorpay/blade 11.12.0 → 11.13.1

package/build/lib/web/production/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  32: 32,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 56 px */\n  56: 56,\n  /** 64 px */\n  64: 64,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 300 px */\n  300: 300,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  32: 32,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 56 px */\n  56: 56,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 240 px */\n  240: 240,\n  /** 300 px */\n  300: 300,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAAA;AACA;AACA;AACO,IAAMA,IAAI,GAAG;AAClB;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,CAAC,EAAE,CAAC;AACJ;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,EAAE,EAAE,EAAE;AACN;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,GAAG,EAAE,GAAG;AACR;AACA,EAAA,IAAI,EAAE,IAAI;AACV;AACA,EAAA,IAAI,EAAE,IAAA;AACR;;;;"}

package/build/types/components/index.d.ts

@@ -7070,15 +7070,21 @@ type ProgressBarCommonProps = {
      * Sets the color of the progress bar which changes the feedback color.
      */
     color?: FeedbackColors;
+    /**
+     * Sets the type of the progress bar.
+     * @default 'progress'
+     */
+    type?: 'meter' | 'progress';
     /**
      * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
      */
     label?: string;
     /**
      * Sets the size of the progress bar.
+     * Note: 'large' size isn't available when the variant is 'linear'.
      * @default 'small'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Sets the progress value of the progress bar.
      * @default 'small'
@@ -7095,13 +7101,13 @@ type ProgressBarCommonProps = {
      */
     max?: number;
 } & TestID & StyledPropsBlade;
-type ProgressBarVariant = 'progress' | 'meter';
+type ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';
 type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
      * Sets the variant to be rendered for the progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'progress'>;
+    variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -7118,7 +7124,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
      * Sets the variant to be rendered for thr progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'meter'>;
+    variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -7131,7 +7137,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
     showPercentage?: undefined;
 };
 type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
-declare const ProgressBar: ({ accessibilityLabel, color, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
+declare const ProgressBar: ({ accessibilityLabel, color, type, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
 
 type RadioProps = {
     /**

package/build/types/components/index.native.d.ts

@@ -6103,15 +6103,21 @@ type ProgressBarCommonProps = {
      * Sets the color of the progress bar which changes the feedback color.
      */
     color?: FeedbackColors;
+    /**
+     * Sets the type of the progress bar.
+     * @default 'progress'
+     */
+    type?: 'meter' | 'progress';
     /**
      * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.
      */
     label?: string;
     /**
      * Sets the size of the progress bar.
+     * Note: 'large' size isn't available when the variant is 'linear'.
      * @default 'small'
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Sets the progress value of the progress bar.
      * @default 'small'
@@ -6128,13 +6134,13 @@ type ProgressBarCommonProps = {
      */
     max?: number;
 } & TestID & StyledPropsBlade;
-type ProgressBarVariant = 'progress' | 'meter';
+type ProgressBarVariant = 'progress' | 'meter' | 'linear' | 'circular';
 type ProgressBarProgressProps = ProgressBarCommonProps & {
     /**
      * Sets the variant to be rendered for the progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'progress'>;
+    variant?: Extract<ProgressBarVariant, 'progress' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -6151,7 +6157,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
      * Sets the variant to be rendered for thr progress bar.
      * @default 'progress'
      */
-    variant?: Extract<ProgressBarVariant, 'meter'>;
+    variant?: Extract<ProgressBarVariant, 'meter' | 'linear' | 'circular'>;
     /**
      * Sets whether the progress bar is in an indeterminate state.
      * @default false
@@ -6164,7 +6170,7 @@ type ProgressBarMeterProps = ProgressBarCommonProps & {
     showPercentage?: undefined;
 };
 type ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;
-declare const ProgressBar: ({ accessibilityLabel, color, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
+declare const ProgressBar: ({ accessibilityLabel, color, type, isIndeterminate, label, showPercentage, size, value, variant, min, max, testID, ...styledProps }: ProgressBarProps) => ReactElement;
 
 type RadioProps = {
     /**

package/build/types/tokens/index.d.ts

@@ -737,6 +737,8 @@ declare const size: {
     readonly 5: 5;
     /** 6 px */
     readonly 6: 6;
+    /** 7 px */
+    readonly 7: 7;
     /** 8 px */
     readonly 8: 8;
     /** 10 px */
@@ -767,6 +769,8 @@ declare const size: {
     readonly 56: 56;
     /** 64 px */
     readonly 64: 64;
+    /** 72 px */
+    readonly 72: 72;
     /** 100 px */
     readonly 100: 100;
     /** 120 px */

package/build/types/tokens/index.native.d.ts

@@ -737,6 +737,8 @@ declare const size: {
     readonly 5: 5;
     /** 6 px */
     readonly 6: 6;
+    /** 7 px */
+    readonly 7: 7;
     /** 8 px */
     readonly 8: 8;
     /** 10 px */
@@ -767,6 +769,8 @@ declare const size: {
     readonly 56: 56;
     /** 64 px */
     readonly 64: 64;
+    /** 72 px */
+    readonly 72: 72;
     /** 100 px */
     readonly 100: 100;
     /** 120 px */

package/codemods/migrate-progressbar/transformers/__test__/migrate-progressbar.test.ts

@@ -0,0 +1,28 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ProgressBar component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+          <ProgressBar value={20} label="Label" />
+          <ProgressBar variant="meter" value={20} label="Label" />
+          <ProgressBar variant="progress" value={20} label="Label" />
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+              <ProgressBar value={20} label="Label" type="progress" />
+              <ProgressBar type="meter" value={20} label="Label" />
+              <ProgressBar type="progress" value={20} label="Label" />
+            </>
+          );"
+  `);
+});

package/codemods/migrate-progressbar/transformers/index.ts

@@ -0,0 +1,89 @@
+import type { Transform } from 'jscodeshift';
+
+import { red, isExpression } from '../../brand-refresh/transformers/utils';
+
+const transformer: Transform = (file, api, options) => {
+  // Don't transform if the file doesn't import `@razorapy/blade/components` because it's not using Blade components
+  // Allow the migration test file to be transformed
+  if (!file.source.includes('@razorpay/blade/components') && file.path !== undefined) {
+    return file.source;
+  }
+
+  const j = api.jscodeshift;
+  const root = j.withParser('tsx')(file.source);
+
+  // Add type prop if variant prop is not defined
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'ProgressBar',
+          },
+        },
+      })
+      .replaceWith(({ node }) => {
+        const variantAttribute = node.openingElement.attributes.find(
+          (attribute) => attribute.name?.name === 'variant',
+        );
+
+        if (!variantAttribute) {
+          node.openingElement.attributes?.push(
+            j.jsxAttribute(j.jsxIdentifier('type'), j.literal('progress')),
+          );
+        }
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while adding the "type" prop to the ProgressBar component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  // Update the variant prop to type prop if defined
+  try {
+    root
+      .find(j.JSXElement, {
+        openingElement: {
+          name: {
+            name: 'ProgressBar',
+          },
+        },
+      })
+      .find(j.JSXAttribute, {
+        name: {
+          name: 'variant',
+        },
+      })
+      .replaceWith(({ node }) => {
+        if (isExpression(node)) {
+          console.warn(
+            red('\n⛔️ Expression found in the "variant" attribute, please update manually:'),
+            red(`${file.path}:${node.loc?.start.line}:${node.loc.start.column}\n`),
+          );
+          return node;
+        }
+
+        if (node.value?.value === 'progress' || node.value?.value === 'meter') {
+          node.name.name = 'type';
+        }
+
+        return node;
+      });
+  } catch (error) {
+    console.error(
+      red(
+        `⛔️ ${file.path}: Oops! Ran into an issue while updating the "variant" prop  of the ProgressBar component.`,
+      ),
+      `\n${red(error.stack)}\n`,
+    );
+  }
+
+  return root.toSource(options.printOptions);
+};
+
+export default transformer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.12.0",
+  "version": "11.13.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"