Codemods

Heading Transform

Converts a v6 Heading component to a v7 Heading component.

Automatic Changes

• Updates the headingStyle prop to the variant or className prop with the following mappings:
  • 'heading1' -> className='heading-1'
  • 'heading2' -> className='heading-2'
  • 'heading3' -> variant='sans-xsmall-bold'
  • 'heading4' -> variant='sans-small-regular'
  • 'heading4g' -> variant='serif-small-regular'
  • 'heading5' -> variant='sans-medium-regular'
  • 'heading5g' -> variant='serif-medium-regular'
  • 'heading6' -> variant='sans-large-book'
  • 'heading6g' -> variant='serif-large-regular'
  • 'heading7g' -> variant='serif-xlarge-regular'
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Heading } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <Heading
6      level={1}
7      headingStyle="heading7g"
8      theme={{ color: 'red' }}
9      {...otherProps}
10    >
11      Heading Text
12    </Heading>
13  );
14}

Transforms into:

1import { Heading } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <Heading level={1} variant="serif-xlarge-regular" {...otherProps}>
6      Heading Text
7    </Heading>
8  );
9}