Codemods

Carousel Transform

Converts a v6 Carousel component to a v7 Carousel component.

Automatic Changes

• Renames the navigationPagination prop to navigationStyle. If navigationPagination is true, then navigationStyle="text". Otherwise navigationStyle="dots".
• Renames the type prop to isSlideFullWidth. If type is "small", then isSlideFullWidth={false}. Otherwise isSlideFullWidth={true}.
• Renames the heading prop to labelOverrides['aria-label'].
• Removes the animate prop, which has been deprecated.
• Removes the headingLevel prop, which has been deprecated.
• Renames the autoplay prop to shouldAutoPlay.
• Renames the onChange prop to onSlideChange.
• Renames the nextButtonLabel prop to labelOverrides.nextButtonScreenReaderLabel.
• Renames the previousButtonLabel prop to labelOverrides.previousButtonScreenReaderLabel.
• Renames the playLabel prop to labelOverrides.playButtonScreenReaderLabel.
• Renames the pauseLabel prop to labelOverrides.pauseButtonScreenReaderLabel.
• Renames the getSlideButtonLabel prop to labelOverrides.getDotNavigationScreenReaderLabel.
• Renames the getPaginationText prop to labelOverrides.getTextNavigationLabel.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Carousel } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Carousel
6      navigationPagination={true}
7      type="small"
8      animate={animate}
9      heading="Carousel"
10      headingLevel={headingLevel}
11      autoplay={autoplay}
12      onChange={onChange}
13      nextButtonLabel="Go to next offer"
14      previousButtonLabel="Go to previous offer"
15      playLabel="Play carousel"
16      pauseLabel="Pause carousel"
17      getSlideButtonLabel={(slideNumber) => `Offer ${slideNumber}`}
18      getPaginationText={(current, total) => `Offer ${current} of ${total}`}
19      theme={{ color: 'red' }}
20      {...otherProps}
21    >
22      {/** Children */}
23    </Carousel>
24  );
25}

Transforms into:

1import { Carousel } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Carousel
6      navigationStyle="text"
7      isSlideFullWidth={false}
8      shouldAutoPlay={autoplay}
9      onSlideChange={onChange}
10      {...otherProps}
11      labelOverrides={{
12        'aria-label': 'Carousel',
13        nextButtonScreenReaderLabel: 'Go to next offer',
14        previousButtonScreenReaderLabel: 'Go to previous offer',
15        playButtonScreenReaderLabel: 'Play carousel',
16        pauseButtonScreenReaderLabel: 'Pause carousel',
17        getDotNavigationScreenReaderLabel: (slideNumber) =>
18          `Offer ${slideNumber}`,
19        getTextNavigationLabel: (current, total) =>
20          `Offer ${current} of ${total}`,
21      }}
22    >
23      {/** Children */}
24    </Carousel>
25  );
26}