Codemods

Step Transform

Converts a v6 Step component to a v7 Step component.

Automatic Changes

• Removes the current prop as it is a deprecated internal prop.
• Removes the active prop as it is a deprecated internal prop.
• Removes the last prop as it is a deprecated internal prop.
• Removes the onlyShowLabel prop as it is a deprecated internal prop.
• Removes the currentSubStep prop. See currentSubStep and subStepLabels manual changes below.
• Removes the isInProgress prop. See currentSubStep and subStepLabels manual changes below.
• Removes the gatewayIcon prop. See securityConfig manual changes below.
• Removes the gatewayLabel prop. See securityConfig manual changes below.
• Removes the gatewayCompleteLabel prop. See securityConfig manual changes below.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Step } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Step
6      label="Step 1"
7      current={false}
8      active={false}
9      last={false}
10      onlyShowLabel={false}
11      currentSubStep={1}
12      isInProgress={isInProgress}
13      gatewayIcon={gatewayIcon}
14      gatewayLabel={gatewayLabel}
15      gatewayCompleteLabel={gatewayCompleteLabel}
16      theme={{ color: 'red' }}
17      {...otherProps}
18    />
19  );
20}

Transforms into:

1import { Step } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return <Step label="Step 1" {...otherProps} />;
5}

Manual Changes

currentSubStep and subStepLabels

In order to have sub-steps in v7, supply the currentSubStep prop to the MultiStepTracker and the subStepLabels prop to each Step which has sub-steps. For example:

1import { MultiStepTracker, Step } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <MultiStepTracker currentStep={1} currentSubStep={1}>
6      <Step label="Step 1" subStepLabels={['Substep 1', 'Substep 2']} />
7      <Step label="Step 2" />
8    </MultiStepTracker>
9  );
10}

securityConfig

In order to have a <IconLock /> associated with a given Step, supply the securityConfig: { isLocked: boolean, label: string} prop. For example:

1import { MultiStepTracker, Step } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <MultiStepTracker currentStep={1}>
6      <Step
7        label="Step 1"
8        securityConfig={{ isLocked: true, label: 'Verify Card Number' }}
9      />
10      <Step label="Step 2" />
11    </MultiStepTracker>
12  );
13}