@razorpay/blade 10.23.4 → 11.0.0

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

@@ -6,12 +6,18 @@ import { MutableRefObject } from 'react';
 type BorderRadius = Readonly<{
     /** none: 0(px/rem/pt) */
     none: 0;
+    /** xsmall: 1(px/rem/pt) */
+    xsmall: 1;
     /** small: 2(px/rem/pt) */
     small: 2;
     /** medium: 4(px/rem/pt) */
     medium: 4;
     /** large: 8(px/rem/pt) */
     large: 8;
+    /** xlarge: 12(px/rem/pt) */
+    xlarge: 12;
+    /** 2xlarge: 16(px/rem/pt) */
+    '2xlarge': 16;
     /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
     max: 9999;
     /** round: 50%(pt). This will turn the box element into a circle */
@@ -105,14 +111,18 @@ type Breakpoints = Readonly<{
 }>;
 
 type FontFamily = {
-    /** Used for all type of textual content except code snippets */
+    /** Used for all type of textual content except code snippets, and headings */
     text: string;
     /** Used for code snippets  */
     code: string;
+    /** Used for headings */
+    heading: string;
 };
 
 type FontWeight = {
     regular: 400;
+    medium: 500;
+    semibold: 600;
     bold: 700;
 };
 /**
@@ -122,11 +132,6 @@ type FontWeight = {
  * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
  */
 type FontSize = {
-    /** desktop: 9(px/rem/pt)
-     *
-     * mobile: 9(px/rem/pt)
-     */
-    10: number;
     /** desktop: 10(px/rem/pt)
      *
      * mobile: 10(px/rem/pt)
@@ -162,56 +167,41 @@ type FontSize = {
      * mobile: 18(px/rem/pt)
      */
     400: number;
-    /** desktop: 22(px/rem/pt)
+    /** desktop: 24(px/rem/pt)
      *
      * mobile: 20(px/rem/pt)
      */
     500: number;
-    /** desktop: 24(px/rem/pt)
+    /** desktop: 32(px/rem/pt)
      *
-     * mobile: 20(px/rem/pt)
+     * mobile: 24(px/rem/pt)
      */
     600: number;
-    /** desktop: 28(px/rem/pt)
+    /** desktop: 40(px/rem/pt)
      *
-     * mobile: 24(px/rem/pt)
+     * mobile: 32(px/rem/pt)
      */
     700: number;
-    /** desktop: 32(px/rem/pt)
+    /** desktop: 48(px/rem/pt)
      *
-     * mobile: 28(px/rem/pt)
+     * mobile: 34(px/rem/pt)
      */
     800: number;
-    /** desktop: 36(px/rem/pt)
+    /** desktop: 56(px/rem/pt)
      *
-     * mobile: 32(px/rem/pt)
+     * mobile: 36(px/rem/pt)
      */
     900: number;
-    /** desktop: 40(px/rem/pt)
+    /** desktop: 64(px/rem/pt)
      *
-     * mobile: 32(px/rem/pt)
+     * mobile: 38(px/rem/pt)
      */
     1000: number;
-    /** desktop: 48(px/rem/pt)
+    /** desktop: 72(px/rem/pt)
      *
      * mobile: 40(px/rem/pt)
      */
     1100: number;
-    /** desktop: 56(px/rem/pt)
-     *
-     * mobile: 48(px/rem/pt)
-     */
-    1200: number;
-    /** desktop: 64(px/rem/pt)
-     *
-     * mobile: 56(px/rem/pt)
-     */
-    1300: number;
-    /** desktop: 88(px/rem/pt)
-     *
-     * mobile: 64(px/rem/pt)
-     */
-    1600: number;
 };
 type Typography = {
     fonts: {
@@ -247,59 +237,60 @@ type Typography = {
         100: number;
         /** desktop: 24(px/rem/pt)
          *
-         * mobile: 20(px/rem/pt)
+         * mobile: 24(px/rem/pt)
          */
         200: number;
         /** desktop: 24(px/rem/pt)
          *
-         * mobile: 24(px/rem/pt)
+         * mobile: 22(px/rem/pt)
          */
         300: number;
-        /** desktop: 28(px/rem/pt)
+        /** desktop: 26(px/rem/pt)
          *
          * mobile: 24(px/rem/pt)
          */
         400: number;
         /** desktop: 32(px/rem/pt)
          *
-         * mobile: 28(px/rem/pt)
+         * mobile: 26(px/rem/pt)
          */
         500: number;
-        /** desktop: 40(px/rem/pt)
+        /** desktop: 38(px/rem/pt)
          *
          * mobile: 32(px/rem/pt)
          */
         600: number;
-        /** desktop: 40(px/rem/pt)
+        /** desktop: 46(px/rem/pt)
          *
-         * mobile: 40(px/rem/pt)
+         * mobile: 38(px/rem/pt)
          */
         700: number;
-        /** desktop: 48(px/rem/pt)
+        /** desktop: 56(px/rem/pt)
          *
          * mobile: 40(px/rem/pt)
          */
         800: number;
-        /** desktop: 56(px/rem/pt)
+        /** desktop: 64(px/rem/pt)
          *
-         * mobile: 48(px/rem/pt)
+         * mobile: 42(px/rem/pt)
          */
         900: number;
-        /** desktop: 64(px/rem/pt)
+        /** desktop: 70(px/rem/pt)
          *
-         * mobile: 56(px/rem/pt)
+         * mobile: 46(px/rem/pt)
          */
         1000: number;
-        /** desktop: 72(px/rem/pt)
+        /** desktop: 78(px/rem/pt)
          *
-         * mobile: 64(px/rem/pt)
+         * mobile: 48(px/rem/pt)
          */
         1100: number;
-        /** desktop: 104(px/rem/pt)
-         *
-         * mobile: 72(px/rem/pt)
-         */
-        1500: number;
+    };
+    letterSpacings: {
+        /** -1% */
+        50: number;
+        /** 0% */
+        100: number;
     };
 };
 type TypographyPlatforms = 'onDesktop' | 'onMobile';
@@ -461,10 +452,10 @@ type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
  * ### Usage
  *
  * ```ts
- * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * type ThemeName = 'themeOne' | 'themeTwo' | StringWithAutocomplete;
  * ```
  *
- * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ * This will show themeOne and themeTwo in autocomplete but also allow any other string as value.
  *
  * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
  * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
@@ -475,127 +466,76 @@ type StringWithAutocomplete = string & Record<never, never>;
 type ColorSchemeNames = 'dark' | 'light';
 type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 type ColorSchemeModes = 'onDark' | 'onLight';
-type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
-type ColorContrastTypes = 'low' | 'high';
-type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
-type ColorContrast = {
-    [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+type FeedbackColors = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+type Emphasis = {
+    subtle: string;
+    moderate: string;
+    intense: string;
+    normal: string;
+    muted: string;
+    disabled: string;
 };
-type ActionStates = {
+type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
+type InteractiveStates = {
     default: string;
-    hover: string;
-    focus: string;
-    active: string;
+    highlighted: string;
     disabled: string;
+    faded: string;
 };
-type LinkActionStates = ActionStates & {
-    visited: string;
-};
-type ActionStatesWithContrast = {
-    default: ColorContrast;
-    hover: ColorContrast;
-    focus: ColorContrast;
-    active: ColorContrast;
-    disabled: ColorContrast;
-};
-type ActionStatesWithLowContrast = {
-    default: Pick<ColorContrast, 'lowContrast'>;
-    hover: Pick<ColorContrast, 'lowContrast'>;
-    focus: Pick<ColorContrast, 'lowContrast'>;
-    active: Pick<ColorContrast, 'lowContrast'>;
-    disabled: Pick<ColorContrast, 'lowContrast'>;
+type OnEmphasis = {
+    onSubtle: string;
+    onIntense: string;
 };
-type ActionVariants = {
-    primary: ActionStates;
-    secondary: ActionStates;
-    tertiary: ActionStates;
-    link: LinkActionStates;
-};
-type FeedbackActions = {
-    action: {
-        background: {
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-        border: {
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-        text: {
-            link: ActionStatesWithContrast;
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-        icon: {
-            link: ActionStatesWithContrast;
-            primary: ActionStatesWithContrast;
-            secondary: ActionStatesWithLowContrast;
-        };
-    };
-};
-type WhiteColors = {
-    background: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
-    border: Pick<ActionVariants, 'primary' | 'secondary' | 'tertiary'>;
-    text: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
-    icon: Pick<ActionVariants, 'link' | 'primary' | 'secondary' | 'tertiary'>;
+type ColorCategories = {
+    staticBlack: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+    staticWhite: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+    gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>;
+    onSea: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
+    onCloud: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>;
+    primary: Pick<Emphasis, 'normal'>;
 };
+type InteractiveColorKeys = FeedbackColors | Exclude<keyof ColorCategories, 'onSea' | 'onCloud'>;
 type Colors = {
-    brand: {
-        primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
-        secondary: Record<500, string>;
-        gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
+    interactive: {
+        background: Record<InteractiveColorKeys, InteractiveStates & {
+            fadedHighlighted: string;
+        }>;
+        border: Record<InteractiveColorKeys, InteractiveStates>;
+        text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+        icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
     };
     feedback: {
-        background: Record<Feedback, ColorContrast>;
-        border: Record<Feedback, ColorContrast>;
-        text: Record<Feedback, ColorContrast>;
-        icon: Record<Feedback, ColorContrast>;
-        positive: FeedbackActions;
-        negative: FeedbackActions;
-        information: FeedbackActions;
-        notice: FeedbackActions;
-        neutral: FeedbackActions;
+        background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+        border: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+        text: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
+        icon: Record<FeedbackColors, SubtleOrIntenseEmphasis>;
     };
     surface: {
-        background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
-        border: Record<'normal' | 'subtle', ColorContrast>;
-        text: Record<TextTypes, ColorContrast>;
-        action: {
-            icon: ActionStatesWithContrast;
-        };
-        overlay: Record<'background', Record<400 | 800, string>>;
-        popup: Record<'background', string>;
-    };
-    action: {
-        background: Omit<ActionVariants, 'link'>;
-        border: Omit<ActionVariants, 'link'>;
-        text: ActionVariants;
-        icon: ActionVariants;
-    };
-    badge: {
         background: {
-            blue: ColorContrast;
+            gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>;
+            primary: SubtleOrIntenseEmphasis;
+            sea: SubtleOrIntenseEmphasis;
+            cloud: SubtleOrIntenseEmphasis;
         };
         border: {
-            blue: ColorContrast;
-        };
-        text: {
-            blue: ColorContrast;
-        };
-        icon: {
-            blue: ColorContrast;
+            gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>;
+            primary: Pick<Emphasis, 'normal' | 'muted'>;
         };
+        text: ColorCategories;
+        icon: ColorCategories;
     };
-    static: {
-        white: string;
+    overlay: {
+        background: Pick<Emphasis, 'moderate' | 'subtle'>;
     };
-    white: {
-        action: WhiteColors;
+    popup: {
+        background: SubtleOrIntenseEmphasis;
+        border: SubtleOrIntenseEmphasis;
     };
+    transparent: string;
 };
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 type ThemeTokens = {
-    name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+    name: 'bladeTheme' | StringWithAutocomplete;
     border: Border;
     breakpoints: Breakpoints;
     colors: ColorsWithModes;

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

@@ -0,0 +1,88 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ActionList component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <ActionList surfaceLevel={2}>
+                <ActionListSection title="Help">
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={SettingsIcon} />}
+                    title="Settings"
+                    value="settings"
+                    isDisabled={true}
+                />
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={DownloadIcon} />}
+                    title="Download"
+                    value="download"
+                />
+                
+                </ActionListSection>
+            </ActionList>
+
+            <ActionList surfaceLevel={3}>
+                <ActionListSection title="Help">
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={SettingsIcon} />}
+                    title="Settings"
+                    value="settings"
+                    isDisabled={true}
+                />
+                <ActionListItem
+                    leading={<ActionListItemIcon icon={DownloadIcon} />}
+                    title="Download"
+                    value="download"
+                />
+                
+                </ActionListSection>
+            </ActionList>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <ActionList>
+                    <ActionListSection title="Help">
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={SettingsIcon} />}
+                        title="Settings"
+                        value="settings"
+                        isDisabled={true}
+                    />
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={DownloadIcon} />}
+                        title="Download"
+                        value="download"
+                    />
+                    
+                    </ActionListSection>
+                </ActionList>
+
+                <ActionList>
+                    <ActionListSection title="Help">
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={SettingsIcon} />}
+                        title="Settings"
+                        value="settings"
+                        isDisabled={true}
+                    />
+                    <ActionListItem
+                        leading={<ActionListItemIcon icon={DownloadIcon} />}
+                        title="Download"
+                        value="download"
+                    />
+                    
+                    </ActionListSection>
+                </ActionList>
+            </>
+          );"
+  `);
+});

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

@@ -0,0 +1,186 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+describe('should migrate the Amount & CardHeaderAmount components', () => {
+  it('should migrate the size prop', async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const App = () => (
+          <>  
+            <Amount size="body-small" value={123456.789} />
+  
+            <Amount size="body-small-bold" value={123456.789} />
+            
+            <Amount size="body-medium" value={123456.789} />
+      
+            <Amount size="body-medium-bold" value={123456.789} />
+             
+            <Amount size="heading-small" value={123456.789} />
+      
+            <Amount size="heading-small-bold" value={123456.789} />
+            
+            <Amount size="heading-large" value={123456.789} />
+  
+            <Amount size="heading-large-bold" value={123456.789} />  
+   
+            <Amount size="title-small" value={123456.789} />
+  
+            <CardHeaderAmount size="title-medium" value={123456.789} />
+  
+            <CardHeaderAmount size="body-small" value={123456.789} />
+  
+            <CardHeaderAmount size="body-small-bold" value={123456.789} />
+            
+            <CardHeaderAmount size="body-medium" value={123456.789} />
+      
+            <CardHeaderAmount size="body-medium-bold" value={123456.789} />
+             
+            <CardHeaderAmount size="heading-small" value={123456.789} />
+      
+            <CardHeaderAmount size="heading-small-bold" value={123456.789} />
+            
+            <CardHeaderAmount size="heading-large" value={123456.789} />
+  
+            <CardHeaderAmount size="heading-large-bold" value={123456.789} />  
+   
+            <CardHeaderAmount size="title-small" value={123456.789} />
+  
+            <CardHeaderAmount size="title-medium" value={123456.789} />
+          </>
+        );
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const App = () => (
+                <>  
+                  <Amount value={123456.789} type="body" size="small" />
+        
+                  <Amount value={123456.789} type="body" size="small" weight="semibold" />
+                  
+                  <Amount value={123456.789} type="body" size="medium" />
+            
+                  <Amount value={123456.789} type="body" size="medium" weight="semibold" />
+                   
+                  <Amount value={123456.789} type="body" size="large" />
+            
+                  <Amount value={123456.789} type="body" size="large" weight="semibold" />
+                  
+                  <Amount value={123456.789} type="heading" size="medium" />
+        
+                  <Amount value={123456.789} type="heading" size="medium" weight="semibold" />  
+         
+                  <Amount value={123456.789} type="heading" size="large" />
+        
+                  <CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
+        
+                  <CardHeaderAmount value={123456.789} type="body" size="small" />
+        
+                  <CardHeaderAmount value={123456.789} type="body" size="small" weight="semibold" />
+                  
+                  <CardHeaderAmount value={123456.789} type="body" size="medium" />
+            
+                  <CardHeaderAmount value={123456.789} type="body" size="medium" weight="semibold" />
+                   
+                  <CardHeaderAmount value={123456.789} type="body" size="large" />
+            
+                  <CardHeaderAmount value={123456.789} type="body" size="large" weight="semibold" />
+                  
+                  <CardHeaderAmount value={123456.789} type="heading" size="medium" />
+        
+                  <CardHeaderAmount value={123456.789} type="heading" size="medium" weight="semibold" />  
+         
+                  <CardHeaderAmount value={123456.789} type="heading" size="large" />
+        
+                  <CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
+                </>
+              );"
+    `);
+  });
+
+  it('should migrate the intent prop', async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const App = () => (
+          <>
+            <Amount value={1234} intent="positive" />
+  
+            <Amount value={1234} intent="negative" />
+  
+            <Amount value={1234} intent="information" />
+  
+            <Amount value={1234} intent="notice" />
+  
+            <CardHeaderAmount value={1234} intent="positive" />
+  
+            <CardHeaderAmount value={1234} intent="negative" />
+  
+            <CardHeaderAmount value={1234} intent="information" />
+  
+            <CardHeaderAmount value={1234} intent="notice" />
+          </>
+        );
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const App = () => (
+                <>
+                  <Amount value={1234} color="feedback.text.positive.intense" />
+        
+                  <Amount value={1234} color="feedback.text.negative.intense" />
+        
+                  <Amount value={1234} color="feedback.text.information.intense" />
+        
+                  <Amount value={1234} color="feedback.text.notice.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.positive.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.negative.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.information.intense" />
+        
+                  <CardHeaderAmount value={1234} color="feedback.text.notice.intense" />
+                </>
+              );"
+    `);
+  });
+
+  it('should migrate the prefix prop', async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const App = () => (
+          <>
+            <Amount value={1234} prefix="currency-symbol" />
+  
+            <Amount value={1234} prefix="currency-code" />
+
+            <CardHeaderAmount value={1234} prefix="currency-symbol" />
+  
+            <CardHeaderAmount value={1234} prefix="currency-code" />  
+          </>
+        );
+      `,
+      { parser: 'tsx' },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const App = () => (
+                <>
+                  <Amount value={1234} currencyIndicator="currency-symbol" />
+        
+                  <Amount value={1234} currencyIndicator="currency-code" />
+
+                  <CardHeaderAmount value={1234} currencyIndicator="currency-symbol" />
+        
+                  <CardHeaderAmount value={1234} currencyIndicator="currency-code" />  
+                </>
+              );"
+    `);
+  });
+});