Anchor Transform

Converts a v6 Anchor component to a v7 Link component.

Automatic Changes

Renames the import and usages of Anchor to Link.
Attempts to transform the deprecated theme prop to the className prop. If it cannot, deletes the theme prop.

For example:

1import { Anchor } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return <Anchor {...otherProps}>Some Link</Anchor>;
5}

Transforms into:

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

When Anchor has the btn className, renames the import and usages of Anchor to CallToAction. Will transform className prop to the corresponding variant prop.

For example:

1import { Anchor } from '@americanexpress/dls-react6';
2
3export default function Page() {
4  return (
5    <>
6      <Anchor className="btn btn-primary" href="#" {...otherProps}>
7        Anchor with Button Styles
8      </Anchor>
9      <Anchor className="btn btn-secondary" href="#" {...otherProps}>
10        Anchor with Button Styles
11      </Anchor>
12    </>
13  );
14}

Transforms into:

1import { CallToAction } from '@americanexpress/dls-react';
2
3export default function Page() {
4  return (
5    <>
6      <CallToAction variant="primary" href="#" {...otherProps}>
7        Anchor with Button Styles
8      </CallToAction>
9      <CallToAction variant="secondary" href="#" {...otherProps}>
10        Anchor with Button Styles
11      </CallToAction>
12    </>
13  );
14}