@kaizen/components 2.2.3 → 2.2.4

package/codemods/migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.spec.ts

@@ -15,9 +15,10 @@ const transformGuidanceBlock = (sourceFile: TransformSourceArgs['sourceFile']):
   })
 }
 
-describe('transformActionsToButtonNext()', () => {
-  it('imports Button from the /next path and transforms all button-like actions prop into a Button component', () => {
-    const inputAst = parseJsx(`
+describe('migrateGuidanceBlockActionsToActionsSlot()', () => {
+  describe('basic transformation', () => {
+    it('imports Button and transforms all button-like actions prop into a Button component', () => {
+      const inputAst = parseJsx(`
       import { GuidanceBlock } from "@kaizen/components"
       <GuidanceBlock
         layout="default"
@@ -34,21 +35,21 @@ describe('transformActionsToButtonNext()', () => {
           },
         }}
       />`)
-    const outputAst = parseJsx(`
-      import { GuidanceBlock } from "@kaizen/components"
-      import { Button } from "@kaizen/components/next"
+      const outputAst = parseJsx(`
+      import { GuidanceBlock, Button, Icon } from "@kaizen/components"
       <GuidanceBlock
         layout="default"
         illustration={<Informative alt="" />}
         content={<div>Test</div>}
-        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><Button onPress={() => alert('click 2')} variant="tertiary" size="large">Secondary action</Button></>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button><Button onPress={() => alert('click 2')} variant="tertiary" size="large">Secondary action</Button></>}
         />
       `)
 
-    expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
-  })
-  it('imports and transforms all button-like and link-like actions prop into a Button and LinkButton', () => {
-    const inputAst = parseJsx(`
+      expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+    })
+
+    it('imports and transforms all button-like and link-like actions prop into a Button and LinkButton', () => {
+      const inputAst = parseJsx(`
       import { GuidanceBlock } from "@kaizen/components"
       <GuidanceBlock
         layout="default"
@@ -65,23 +66,22 @@ describe('transformActionsToButtonNext()', () => {
           },
         }}
       />`)
-    const outputAst = parseJsx(`
-      import { GuidanceBlock, LinkButton } from "@kaizen/components"
-      import { Button } from "@kaizen/components/next"
+      const outputAst = parseJsx(`
+      import {GuidanceBlock, Button, LinkButton, Icon } from "@kaizen/components"
       <GuidanceBlock
         layout="default"
         illustration={<Informative alt="" />}
         content={<div>Test</div>}
-        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
         />
       `)
 
-    expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
-  })
-  it('does not redeclare imports if found', () => {
-    const inputAst = parseJsx(`
-      import { GuidanceBlock } from "@kaizen/components"
-      import { Button } from "@kaizen/components/next"
+      expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+    })
+
+    it('does not redeclare imports if found', () => {
+      const inputAst = parseJsx(`
+      import { Button, GuidanceBlock } from "@kaizen/components"
       const MockLayout = () => (
       <>
         <GuidanceBlock
@@ -102,21 +102,204 @@ describe('transformActionsToButtonNext()', () => {
         <Button onPress={() => alert('page click 1')} variant="primary" size="large">Page button</Button>
       </>
       )`)
-    const outputAst = parseJsx(`
-      import { GuidanceBlock, LinkButton } from "@kaizen/components"
-      import { Button } from "@kaizen/components/next"
+      const outputAst = parseJsx(`
+      import { Button, GuidanceBlock, LinkButton, Icon } from "@kaizen/components"
       const MockLayout = () => (
       <>
         <GuidanceBlock
           layout="default"
           illustration={<Informative alt="" />}
           content={<div>Test</div>}
-          actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+          actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
         />
         <Button onPress={() => alert('page click 1')} variant="primary" size="large">Page button</Button>
       </>
       )`)
 
-    expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+      expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+    })
+
+    it('preserves custom icon components without adding Icon import', () => {
+      const inputAst = parseJsx(`
+          import { GuidanceBlock } from "@kaizen/components"
+          <GuidanceBlock
+            actions={{
+              primary: {
+                label: 'Action',
+                onClick: () => {},
+                icon: <MyCustomIcon />,
+                iconPosition: 'end',
+              },
+            }}
+          />`)
+      const outputAst = parseJsx(`
+          import { GuidanceBlock, Button } from "@kaizen/components"
+          <GuidanceBlock
+            actionsSlot={<><Button onPress={() => {}} icon={<MyCustomIcon />} iconPosition='end' variant="secondary" size="large">Action</Button></>}
+          />
+          `)
+
+      expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+    })
+
+    describe('arrow icon handling', () => {
+      // When withActionButtonArrow not specified, add arrow icon actionsSlot secondary Button
+      it('adds arrow icon to actionsSlot secondary Button when withActionButtonArrow is not explicitly set', () => {
+        const inputAst = parseJsx(`
+        import { GuidanceBlock, LinkButton } from "@kaizen/components"
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt="" />}
+          content={<div>Test</div>}
+          actions={{
+            primary: {
+              label: 'Primary action',
+              onClick: () => alert('click 1'),
+            },
+            secondary: {
+              label: 'Secondary action',
+              href: "#secondary"
+            },
+          }}
+        />`)
+        const outputAst = parseJsx(`
+        import { GuidanceBlock, LinkButton, Button, Icon } from "@kaizen/components"        
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt="" />}
+          content={<div>Test</div>}
+          actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+          />
+        `)
+
+        expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+      })
+
+      // When withActionButtonArrow is set to true, add arrow icon to actionsSlot secondary Button
+      it('adds arrow icon to actionsSlot secondary Button when withActionButtonArrow is true', () => {
+        const inputAst = parseJsx(`
+        import { GuidanceBlock } from "@kaizen/components"
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt="" />}
+          content={<div>Test</div>}
+          withActionButtonArrow={true}
+          actions={{
+            primary: {
+              label: 'Primary action',
+              onClick: () => alert('click 1'),
+            },
+            secondary: {
+              label: 'Secondary action',
+              href: "#secondary"
+            },
+          }}
+        />`)
+        const outputAst = parseJsx(`
+        import { GuidanceBlock, Button, LinkButton, Icon } from "@kaizen/components"
+        <GuidanceBlock
+          layout="default"
+          illustration={<Informative alt="" />}
+          content={<div>Test</div>}
+          actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+          />
+        `)
+
+        expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+      })
+
+      // When withActionButtonArrow is explicitly false, do not add arrow icon to actionsSlot secondary Button
+      it('does not add arrow icon to actionsSlot secondary Button when withActionButtonArrow is false', () => {
+        const inputAst = parseJsx(`
+      import { GuidanceBlock } from "@kaizen/components"
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        withActionButtonArrow={false}
+        actions={{
+          primary: {
+            label: 'Primary action',
+            onClick: () => alert('click 1'),
+          },
+          secondary: {
+            label: 'Secondary action',
+            href: "#secondary"
+          },
+        }}
+      />`)
+        const outputAst = parseJsx(`
+      import { GuidanceBlock, Button, LinkButton } from "@kaizen/components"
+      <GuidanceBlock
+        layout="default"
+        illustration={<Informative alt="" />}
+        content={<div>Test</div>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+        />
+      `)
+
+        expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+      })
+    })
+
+    describe('removes deprecated props', () => {
+      it('removes withActionButtonArrow prop', () => {
+        const inputAst = parseJsx(`
+            import { GuidanceBlock } from "@kaizen/components"
+            <GuidanceBlock
+              layout="default"
+              illustration={<Informative alt="" />}
+              content={<div>Test</div>}
+              withActionButtonArrow={true}
+              actions={{
+                primary: {
+                  label: 'Primary action',
+                  onClick: () => alert('click 1'),
+                },
+              }}
+            />
+          `)
+        const outputAst = parseJsx(`
+            import { GuidanceBlock, Button, Icon } from "@kaizen/components"
+            <GuidanceBlock
+              layout="default"
+              illustration={<Informative alt="" />}
+              content={<div>Test</div>}
+              actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button></>}
+            />
+          `)
+
+        expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+      })
+
+      it('removes secondaryDismiss prop', () => {
+        const inputAst = parseJsx(`
+            import { GuidanceBlock } from "@kaizen/components"
+            <GuidanceBlock
+              layout="default"
+              illustration={<Informative alt="" />}
+              content={<div>Test</div>}
+              secondaryDismiss={true}
+              actions={{
+                primary: {
+                  label: 'Primary action',
+                  onClick: () => alert('click 1'),
+                },
+              }}
+            />
+          `)
+        const outputAst = parseJsx(`
+            import {GuidanceBlock, Button, Icon } from "@kaizen/components"
+            <GuidanceBlock
+              layout="default"
+              illustration={<Informative alt="" />}
+              content={<div>Test</div>}
+              actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational />} iconPosition="end">Primary action</Button></>}
+            />
+          `)
+
+        expect(transformGuidanceBlock(inputAst)).toBe(printAst(outputAst))
+      })
+    })
   })
 })

package/codemods/migrateGuidanceBlockActionsToActionsSlot/migrateGuidanceBlockActionsToActionsSlot.ts

@@ -8,8 +8,9 @@ import {
 } from '../utils'
 import { transformActionsToActionsSlot } from './transformActionsToActionsSlot'
 
-const BUTTON_IMPORT_DESTINATION = '@kaizen/components/next'
+const BUTTON_IMPORT_DESTINATION = '@kaizen/components'
 const LINKBUTTON_IMPORT_DESTINATION = '@kaizen/components'
+const ICON_IMPORT_DESTINATION = '@kaizen/components'
 
 export const migrateGuidanceBlockActionsToActionsSlot =
   (tagsMap: TagImportAttributesMap): ts.TransformerFactory<ts.SourceFile> =>
@@ -40,6 +41,9 @@ export const migrateGuidanceBlockActionsToActionsSlot =
           tagName === 'GuidanceBlock' ||
           tagImportAttributes.importModuleName === 'GuidanceBlock'
         ) {
+          // Added flag to add arrow-forward icon to the secondary-variant Button created from the primary action, to minimise visual changes
+          let hasActionButtonArrow: boolean = true
+
           const componentProps: ts.JsxAttributeLike[] = node.attributes.properties.reduce<
             ts.JsxAttributeLike[]
           >((guidanceBlockProps, prop) => {
@@ -47,9 +51,23 @@ export const migrateGuidanceBlockActionsToActionsSlot =
               const propName = prop.name.getText()
               const propValue = prop.initializer as ts.JsxExpression
 
+              if (propName === 'withActionButtonArrow') {
+                if (propValue?.expression?.kind === ts.SyntaxKind.FalseKeyword) {
+                  hasActionButtonArrow = false
+                } else {
+                  hasActionButtonArrow = true
+                }
+                return guidanceBlockProps
+              }
+
+              if (propName === 'secondaryDismiss') {
+                return guidanceBlockProps
+              }
+
               if (propName === 'actions') {
                 const transformedActions = transformActionsToActionsSlot(
                   propValue.getChildren()[1] as ts.ObjectLiteralExpression,
+                  hasActionButtonArrow,
                 )
 
                 if (transformedActions?.importsToAdd) {
@@ -72,6 +90,11 @@ export const migrateGuidanceBlockActionsToActionsSlot =
                             : undefined,
                       })
                     }
+                    if (importToAdd === 'Icon') {
+                      setImportToAdd(importsToAdd, ICON_IMPORT_DESTINATION, {
+                        componentName: 'Icon',
+                      })
+                    }
                   })
                 }
 

package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.spec.ts

@@ -19,6 +19,7 @@ export const mockedTransformer =
             if (propName === 'actions') {
               const transformedActions = transformActionsToActionsSlot(
                 propValue.getChildren()[1] as ts.ObjectLiteralExpression,
+                true,
               )
 
               return transformedActions?.actionsSlotAttr
@@ -74,7 +75,7 @@ describe('transformActionsToActionsSlot()', () => {
         layout="default"
         illustration={<Informative alt="" />}
         content={<div>Test</div>}
-        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
+        actionsSlot={<><Button onPress={() => alert('click 1')} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Primary action</Button><LinkButton href="#secondary" variant="tertiary" size="large">Secondary action</LinkButton></>}
         />
       `)
 
@@ -193,4 +194,109 @@ describe('transformActionsToActionsSlot()', () => {
       printAst(outputAst).replace(/\s+/g, ' '),
     )
   })
+
+  it('removes primary: true and applies variantOverride as secondary for primary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          primary: {
+            label: 'Action',
+            onClick: () => {},
+            primary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('removes secondary: true and applies variantOverride as secondary for primary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          primary: {
+            label: 'Action',
+            onClick: () => {},
+            secondary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('removes primary: true and applies variantOverride as tertiary for secondary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          secondary: {
+            label: 'Secondary Action',
+            onClick: () => {},
+            primary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="tertiary" size="large">Secondary Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('removes secondary: true and applies variantOverride as tertiary for secondary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          secondary: {
+            label: 'Secondary Action',
+            onClick: () => {},
+            secondary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="tertiary" size="large">Secondary Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('applies correct variants for both primary and secondary actions with primary: true', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          primary: {
+            label: 'Primary',
+            onClick: () => {},
+            primary: true,
+          },
+          secondary: {
+            label: 'Secondary',
+            onClick: () => {},
+            primary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Primary</Button><Button onPress={() => {}} variant="tertiary" size="large">Secondary</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
 })

package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.ts

@@ -13,9 +13,11 @@ type GuidanceBlockTransformedActions = {
  */
 export const transformActionsToActionsSlot = (
   node: ts.ObjectLiteralExpression,
+  hasActionButtonArrow: boolean,
 ): GuidanceBlockTransformedActions | undefined => {
   if (ts.isObjectLiteralExpression(node)) {
     const newImports: (string | undefined)[] = []
+    let arrowIconWasAdded = false
 
     const primaryAction = node.properties.find((prop) => prop?.name?.getText() === 'primary') as
       | ts.PropertyAssignment
@@ -30,10 +32,23 @@ export const transformActionsToActionsSlot = (
 
     if (primaryAction) {
       const actionValue = primaryAction.initializer as ts.ObjectLiteralExpression
+
+      // Check if icon prop already exists
+      const hasExistingIcon = actionValue.properties.some(
+        (prop) => prop?.name?.getText() === 'icon',
+      )
+
       const transformedComponent = transformV1ButtonPropsToButtonOrLinkButton(
         actionValue,
         'secondary',
+        hasActionButtonArrow,
       )
+
+      // Track if arrow icon was actually added (only if hasActionButtonArrow is true and no existing icon)
+      if (hasActionButtonArrow && !hasExistingIcon) {
+        arrowIconWasAdded = true
+      }
+
       primaryButton = transformedComponent.component
       newImports.push(transformedComponent.import)
     }
@@ -61,6 +76,11 @@ export const transformActionsToActionsSlot = (
         ),
       )
 
+      // Add Icon import if arrow icon was added
+      if (arrowIconWasAdded) {
+        newImports.push('Icon')
+      }
+
       return {
         actionsSlotAttr: newActionsSlotAttr,
         importsToAdd: newImports.filter(Boolean) as string[],

package/codemods/runV1Codemods/__snapshots__/runV1Codemods.spec.ts.snap

@@ -4,8 +4,7 @@ exports[`runV1Codemods > MockComponentDir Snapshot Tests > should transform Mock
 {
   "MockComponent.tsx": "// @ts-nocheck this is a mock file - we can ignore this
 import React from 'react';
-import { BrandMoment, Card, GlobalNotification, GuidanceBlock, Informative, ProgressBar, Well, LinkButton } from '@kaizen/components';
-import { Button } from "@kaizen/components/next";
+import { BrandMoment, Card, GlobalNotification, GuidanceBlock, Informative, ProgressBar, Well, Button, LinkButton, Icon } from '@kaizen/components';
 import { MockSubcomponent } from './subcomponents/MockSubcomponent';
 
 export const MockComponent = (): JSX.Element => {
@@ -13,7 +12,7 @@ export const MockComponent = (): JSX.Element => {
       <GuidanceBlock illustration={<Informative alt=""/>} text={{
             title: 'This is the call to action title',
             description: 'Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss, é um leite divinis.',
-        }} actionsSlot={<><Button onPress={() => undefined} variant="secondary" size="large">Action!</Button><LinkButton href='/cancel' variant="tertiary" size="large">Cancel</LinkButton></>}/>
+        }} actionsSlot={<><Button onPress={() => undefined} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Action!</Button><LinkButton href='/cancel' variant="tertiary" size="large">Cancel</LinkButton></>}/>
       <BrandMoment variant="success">
         <div>Success message</div>
       </BrandMoment>

package/codemods/runV1Codemods/runV1Codemods.spec.ts

@@ -71,9 +71,8 @@ describe('runV1Codemods', () => {
 
         expect(transformedFiles['MockComponent.tsx']).toContain('actionsSlot')
         expect(transformedFiles['MockComponent.tsx']).not.toContain('actions={{')
-        expect(transformedFiles['MockComponent.tsx']).toContain(
-          'import { Button } from "@kaizen/components/next"',
-        )
+        expect(transformedFiles['MockComponent.tsx']).toContain('Button')
+        expect(transformedFiles['MockComponent.tsx']).toContain(`from '@kaizen/components'`)
 
         expect(transformedFiles['subcomponents/MockSubcomponent.tsx']).toContain('onPress')
         expect(transformedFiles['subcomponents/MockSubcomponent.tsx']).toContain(

package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts

@@ -64,9 +64,9 @@ export const transformButtonProp = (
       return oldValue ? createStringProp('size', buttonSizeMap[oldValue]) : undefined
     }
     case 'primary':
-      return createStringProp('variant', 'primary')
+      return null
     case 'secondary':
-      return createStringProp('variant', 'tertiary')
+      return null
     case 'destructive':
       return null
     default:
@@ -84,11 +84,13 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
   buttonProps: ts.ObjectLiteralExpression,
   /** optional override for the variant type if needed, ie: primary or secondary actions*/
   variantOverride?: string,
+  /** whether to add an arrow icon to the button */
+  addArrowIcon?: boolean,
 ): TransformButtonProp => {
   let childrenValue: ts.JsxAttributeValue | undefined
   let hasSizeProp = false
-  let hasVariant = false
   let hasLinkAttr = false
+  let hasIconProp = false
 
   const newProps = buttonProps.properties.reduce<ts.JsxAttributeLike[]>((acc, currentProp) => {
     const propName = currentProp?.name?.getText()
@@ -119,14 +121,14 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
         ]
       }
 
-      if (propName === 'primary' || propName === 'secondary' || variantOverride) {
-        hasVariant = true
-      }
-
       if (propName === 'size') {
         hasSizeProp = true
       }
 
+      if (propName === 'icon') {
+        hasIconProp = true
+      }
+
       if (propName === 'href') {
         hasLinkAttr = true
         if (propValue && propValue?.kind !== ts.SyntaxKind.StringLiteral) {
@@ -172,18 +174,46 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
     return acc
   }, [])
 
-  if (!hasVariant) {
-    newProps.push(createStringProp('variant', 'secondary'))
-  }
-
-  if (variantOverride) {
-    newProps.push(createStringProp('variant', variantOverride))
-  }
+  // Always add variant from variantOverride, or default to 'secondary'
+  newProps.push(createStringProp('variant', variantOverride ?? 'secondary'))
 
   if (!hasSizeProp) {
     newProps.push(createStringProp('size', 'large'))
   }
 
+  // Only add arrow icon if addArrowIcon is true AND there's no existing icon prop
+  if (addArrowIcon && !hasIconProp) {
+    const iconProp = ts.factory.createJsxAttribute(
+      ts.factory.createIdentifier('icon'),
+      ts.factory.createJsxExpression(
+        undefined,
+        ts.factory.createJsxSelfClosingElement(
+          ts.factory.createIdentifier('Icon'),
+          undefined,
+          ts.factory.createJsxAttributes([
+            ts.factory.createJsxAttribute(
+              ts.factory.createIdentifier('name'),
+              ts.factory.createStringLiteral('arrow_forward'),
+            ),
+            ts.factory.createJsxAttribute(
+              ts.factory.createIdentifier('shouldMirrorInRTL'),
+              undefined,
+            ),
+            ts.factory.createJsxAttribute(
+              ts.factory.createIdentifier('isPresentational'),
+              undefined,
+            ),
+          ]),
+        ),
+      ),
+    )
+    const iconPositionProp = ts.factory.createJsxAttribute(
+      ts.factory.createIdentifier('iconPosition'),
+      ts.factory.createStringLiteral('end'),
+    )
+    newProps.push(iconProp, iconPositionProp)
+  }
+
   return {
     import: hasLinkAttr ? 'LinkButton' : 'Button',
     component: createJsxElementWithChildren(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",