Codemods

Collapsible Transform

Converts a v6 CollapsiblePanel component to a v7 AccordionPanel component.

Automatic Changes

Collapsible Panel

• Renames the import and usages of CollapsiblePanel to AccordionPanel.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.
• Moves children into a heading element and places that in the heading prop.
• Deletes the headingLevel prop. Use the heading prop instead.

For example:

1import { CollapsiblePanel } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <CollapsiblePanel id="collapsible-p-h1" icon={<IconHotel />} {...otherProps}>
6      Hotel
7    </CollapsiblePanel>
8  )

Transforms into:

1import { AccordionPanel } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <AccordionPanel
6      id="collapsible-p-h1"
7      icon={<IconHotel />}
8      heading={<h3>Hotel</h3>}
9      {...otherProps}
10    />
11  );
12}

Manual Changes

Heading and Subtext

Use the heading prop to pass a heading element directly to the AccordionPanel. Use the subtext prop for any additional information displayed below.