Codemods

Collapsible Transform

Converts a v6 Collapsible component to a v7 Accordion component.

Automatic Changes

Collapsible Text

• Renames the import and usages of Collapsible to Accordion.
• Renames defaultOpen prop to defaultOpenPanelIds.
• Renames open prop to openPanelIds.
• Renames onCollapsibleHeadingClick prop to onAccordionToggle.
• Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Collapsible } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  const callback = () => {};
5
6  return (
7    <Collapsible
8      defaultOpen={['panel-1']}
9      open={['panel-2']}
10      onCollapsibleHeadingClick={callback}
11      {...otherProps}
12    ></Collapsible>
13  );
14}

Transforms into:

1import { Accordion } from '@americanexpress/dls-react';
2
3export default function Page() {
4  const callback = () => {};
5
6  return (
7    <Accordion
8      defaultOpenPanelIds={['panel-1']}
9      openPanelIds={['panel-2']}
10      onAccordionToggle={callback}
11      {...otherProps}
12    ></Accordion>
13  );
14}

Manual Changes

Multiple Expanded Panels

Multiple accordion panels can be expanded at the same time. To do so, set shouldAllowMultipleExpanded to true.