@pantheon-systems/pds-toolkit-react 2.0.0-alpha.4 → 2.0.0-alpha.41

package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/basic.input.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+	IndicatorBadge,
+	NavMenu,
+	RefreshChecker,
+	FlowSteps,
+	CardSelectGroup,
+	DashboardSearch,
+	SideNavCompact,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import — imported name changes, local alias and JSX stay the same
+import { IndicatorBadge as LegacyBadge } from '@pantheon-systems/pds-toolkit-react';
+// Non-PDS import with the same name — untouched
+import { IndicatorBadge as ThirdPartyBadge } from 'some-other-library';
+// Deep path import — path and specifier name should both be updated
+import { IndicatorBadge as DeepBadge } from '@pantheon-systems/pds-toolkit-react/components/badges/IndicatorBadge/IndicatorBadge';
+// Deep path aliased import — path and imported name updated, local alias preserved
+import { IndicatorBadge as LegacyDeepBadge } from '@pantheon-systems/pds-toolkit-react/components/badges/IndicatorBadge/IndicatorBadge';
+
+// Non-aliased — both import specifier and JSX tags should be renamed
+const A = () => <IndicatorBadge color='blue' label='v1 badge' />;
+const B = () => <NavMenu ariaLabel='Main nav' menuItems={[]} />;
+const C = () => <RefreshChecker />;
+const D = () => <FlowSteps steps={[]} />;
+const E = () => <CardSelectGroup options={[]} />;
+const F = () => <DashboardSearch id='search' label='Search' siteList={[]} />;
+const G = () => <SideNavCompact items={[]} />;
+
+// Aliased — only the import specifier changes, JSX stays as <LegacyBadge>
+const H = () => <LegacyBadge color='blue' label='aliased' />;
+
+// Non-PDS import — untouched
+const I = () => <ThirdPartyBadge />;

package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/basic.output.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+	Badge,
+	SiteMenu,
+	StatusChecker,
+	StepList,
+	CardSelect,
+	SiteSearch,
+	TreeNav,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import — imported name changes, local alias and JSX stay the same
+import { Badge as LegacyBadge } from '@pantheon-systems/pds-toolkit-react';
+// Non-PDS import with the same name — untouched
+import { IndicatorBadge as ThirdPartyBadge } from 'some-other-library';
+// Deep path import — path and specifier name should both be updated
+import { Badge as DeepBadge } from "@pantheon-systems/pds-toolkit-react/components/badges/Badge/Badge";
+// Deep path aliased import — path and imported name updated, local alias preserved
+import { Badge as LegacyDeepBadge } from "@pantheon-systems/pds-toolkit-react/components/badges/Badge/Badge";
+
+// Non-aliased — both import specifier and JSX tags should be renamed
+const A = () => <Badge color='blue' label='v1 badge' />;
+const B = () => <SiteMenu ariaLabel='Main nav' menuItems={[]} />;
+const C = () => <StatusChecker />;
+const D = () => <StepList steps={[]} />;
+const E = () => <CardSelect options={[]} />;
+const F = () => <SiteSearch id='search' label='Search' siteList={[]} />;
+const G = () => <TreeNav items={[]} />;
+
+// Aliased — only the import specifier changes, JSX stays as <LegacyBadge>
+const H = () => <LegacyBadge color='blue' label='aliased' />;
+
+// Non-PDS import — untouched
+const I = () => <ThirdPartyBadge />;

package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/only.input.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IndicatorBadge, NavMenu } from '@pantheon-systems/pds-toolkit-react';
+
+// IndicatorBadge — matches --only=IndicatorBadge, should be renamed
+const A = () => <IndicatorBadge color='blue' label='v1 badge' />;
+
+// NavMenu — not in --only list, should be left alone
+const B = () => <NavMenu ariaLabel='Main nav' menuItems={[]} />;

package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/only.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Badge, NavMenu } from '@pantheon-systems/pds-toolkit-react';
+
+// IndicatorBadge — matches --only=IndicatorBadge, should be renamed
+const A = () => <Badge color='blue' label='v1 badge' />;
+
+// NavMenu — not in --only list, should be left alone
+const B = () => <NavMenu ariaLabel='Main nav' menuItems={[]} />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.input.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+// Direct renames — replaced automatically
+const A = () => <div className='pds-button--navbar' />;
+const B = () => <div className='pds-ts-9xl heading' />;
+
+// Safe removal — removed automatically (product is now the default context)
+const C = () => <div className='pds-typography--product body-text' />;
+
+// Mixed: rename + safe removal in one className
+const D = () => <div className='pds-button--navbar pds-typography--product foo' />;
+
+// Template literal with direct rename
+const E = ({ active }: { active: boolean }) => (
+	<div className={`pds-button--navbar ${active ? 'is-active' : ''}`} />
+);
+
+// Flag only — left in place, warning emitted
+const F = () => <div className='pds-color-bg-brand header' />;
+const G = () => <div className='pds-lead-text intro' />;
+const H = () => <div className='pds-quote-text pullquote' />;
+
+// JSX expression container
+const I = () => <div className={'pds-button--navbar extra'} />;
+
+// Already correct — should be left alone
+const J = () => <div className='pds-button--subtle' />;
+
+// Dynamic class — cannot transform, leave as-is
+const cls = 'pds-button--navbar';
+const K = () => <div className={cls} />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.output.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+// Direct renames — replaced automatically
+const A = () => <div className="pds-button--subtle" />;
+const B = () => <div className="pds-ts-8xl heading" />;
+
+// Safe removal — removed automatically (product is now the default context)
+const C = () => <div className="body-text" />;
+
+// Mixed: rename + safe removal in one className
+const D = () => <div className="pds-button--subtle foo" />;
+
+// Template literal with direct rename
+const E = ({ active }: { active: boolean }) => (
+	<div className={`pds-button--subtle ${active ? 'is-active' : ''}`} />
+);
+
+// Flag only — left in place, warning emitted
+const F = () => <div className='pds-color-bg-brand header' />;
+const G = () => <div className='pds-lead-text intro' />;
+const H = () => <div className='pds-quote-text pullquote' />;
+
+// JSX expression container
+const I = () => <div className={"pds-button--subtle extra"} />;
+
+// Already correct — should be left alone
+const J = () => <div className='pds-button--subtle' />;
+
+// Dynamic class — cannot transform, leave as-is
+const cls = 'pds-button--navbar';
+const K = () => <div className={cls} />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.input.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+// String literal — single class
+const A = () => <div className='pds-overline-text' />;
+
+// String literal — multiple classes, variant classes must not be mangled
+const B = () => <div className='pds-overline-text--sm foo pds-overline-text--lg' />;
+
+// String literal — old and variant together
+const C = () => <div className='pds-overline-text pds-overline-text--sm bar' />;
+
+// JSX expression container with string literal
+const D = () => <div className={'pds-overline-text'} />;
+
+// Template literal — static part
+const E = () => <div className={`pds-overline-text extra-class`} />;
+
+// Template literal — with interpolation
+const F = ({ active }: { active: boolean }) => (
+	<div className={`pds-overline-text--lg ${active ? 'is-active' : ''}`} />
+);
+
+// Already correct — should be left alone
+const G = () => <div className='pds-overline-m' />;
+
+// Dynamic class — cannot transform, leave as-is
+const cls = 'pds-overline-text';
+const H = () => <div className={cls} />;
+
+// Non-className attribute — should be left alone
+const I = () => <div id='pds-overline-text' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.output.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+// String literal — single class
+const A = () => <div className="pds-overline-m" />;
+
+// String literal — multiple classes, variant classes must not be mangled
+const B = () => <div className="pds-overline-s foo pds-overline-l" />;
+
+// String literal — old and variant together
+const C = () => <div className="pds-overline-m pds-overline-s bar" />;
+
+// JSX expression container with string literal
+const D = () => <div className={"pds-overline-m"} />;
+
+// Template literal — static part
+const E = () => <div className={`pds-overline-m extra-class`} />;
+
+// Template literal — with interpolation
+const F = ({ active }: { active: boolean }) => (
+	<div className={`pds-overline-l ${active ? 'is-active' : ''}`} />
+);
+
+// Already correct — should be left alone
+const G = () => <div className='pds-overline-m' />;
+
+// Dynamic class — cannot transform, leave as-is
+const cls = 'pds-overline-text';
+const H = () => <div className={cls} />;
+
+// Non-className attribute — should be left alone
+const I = () => <div id='pds-overline-text' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/basic.input.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+	Button,
+	ButtonLink,
+	Icon,
+	IconButton,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import
+import { Icon as PdsIcon } from '@pantheon-systems/pds-toolkit-react';
+
+// Icon component — renamed icons should be updated
+const A = () => <Icon iconName='circlePlusOutline' />;
+const B = () => <Icon iconName='circleMinusOutline' />;
+const C = () => <Icon iconName='globeLine' />;
+
+// Other PDS components using the same registry — should also be updated
+const D = () => <Button iconName='circlePlusOutline' label='Add' />;
+const E = () => <ButtonLink iconName='globeLine' linkContent={<a href='/'>Home</a>} />;
+const F = () => <IconButton iconName='circleMinusOutline' label='Remove' />;
+
+// JSX expression container — should also be updated
+const G = () => <Icon iconName={'circlePlusOutline'} />;
+
+// Aliased import — should still be updated
+const H = () => <PdsIcon iconName='globeLine' />;
+
+// Already correct — should be left alone
+const I = () => <Icon iconName='circlePlus' />;
+
+// Dynamic value — cannot transform, leave as-is
+const myIcon = 'circlePlusOutline';
+const J = () => <Icon iconName={myIcon} />;
+
+// Non-PDS component — should be left alone
+const K = () => <div iconName='circlePlusOutline' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/basic.output.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+	Button,
+	ButtonLink,
+	Icon,
+	IconButton,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import
+import { Icon as PdsIcon } from '@pantheon-systems/pds-toolkit-react';
+
+// Icon component — renamed icons should be updated
+const A = () => <Icon iconName="circlePlus" />;
+const B = () => <Icon iconName="circleMinus" />;
+const C = () => <Icon iconName="globe" />;
+
+// Other PDS components using the same registry — should also be updated
+const D = () => <Button iconName="circlePlus" label='Add' />;
+const E = () => <ButtonLink iconName="globe" linkContent={<a href='/'>Home</a>} />;
+const F = () => <IconButton iconName="circleMinus" label='Remove' />;
+
+// JSX expression container — should also be updated
+const G = () => <Icon iconName={"circlePlus"} />;
+
+// Aliased import — should still be updated
+const H = () => <PdsIcon iconName="globe" />;
+
+// Already correct — should be left alone
+const I = () => <Icon iconName='circlePlus' />;
+
+// Dynamic value — cannot transform, leave as-is
+const myIcon = 'circlePlusOutline';
+const J = () => <Icon iconName={myIcon} />;
+
+// Non-PDS component — should be left alone
+const K = () => <div iconName='circlePlusOutline' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.input.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon, Button } from '@pantheon-systems/pds-toolkit-react';
+
+// Icon — matches --only=Icon, should be updated
+const A = () => <Icon iconName='circlePlusOutline' />;
+
+// Button — not in --only list, should be left alone
+const B = () => <Button iconName='circlePlusOutline' label='Add' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon, Button } from '@pantheon-systems/pds-toolkit-react';
+
+// Icon — matches --only=Icon, should be updated
+const A = () => <Icon iconName="circlePlus" />;
+
+// Button — not in --only list, should be left alone
+const B = () => <Button iconName='circlePlusOutline' label='Add' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/basic.input.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+	Button,
+	CloseButton,
+	FileDiff,
+	GlobalWrapper,
+	Icon,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import
+import { Icon as PdsIcon } from '@pantheon-systems/pds-toolkit-react';
+
+// Simple renames
+const A = () => <Button isLoading />;
+const B = () => <GlobalWrapper mobileMenuMaxWidth={767} />;
+const C = () => <FileDiff labelStrings={{ add: 'Added', remove: 'Removed' }} />;
+
+// Same old prop name, different components — both should rename
+const D = () => <Icon iconSize='m' iconName='star' />;
+const E = () => <CloseButton iconSize='l' />;
+
+// Aliased import — should still rename
+const F = () => <PdsIcon iconSize='s' iconName='gear' />;
+
+// Already correct — should be left alone
+const G = () => <Button isWorking />;
+
+// Non-PDS component — should be left alone
+const H = () => <div isLoading />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/basic.output.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+	Button,
+	CloseButton,
+	FileDiff,
+	GlobalWrapper,
+	Icon,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import
+import { Icon as PdsIcon } from '@pantheon-systems/pds-toolkit-react';
+
+// Simple renames
+const A = () => <Button isWorking />;
+const B = () => <GlobalWrapper mobileMaxWidth={767} />;
+const C = () => <FileDiff translationStrings={{ add: 'Added', remove: 'Removed' }} />;
+
+// Same old prop name, different components — both should rename
+const D = () => <Icon size='m' iconName='star' />;
+const E = () => <CloseButton size='l' />;
+
+// Aliased import — should still rename
+const F = () => <PdsIcon size='s' iconName='gear' />;
+
+// Already correct — should be left alone
+const G = () => <Button isWorking />;
+
+// Non-PDS component — should be left alone
+const H = () => <div isLoading />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/only.input.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Icon } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be renamed
+const A = () => <Button isLoading />;
+
+// Icon — not in --only list, should be left alone
+const B = () => <Icon iconSize='m' iconName='star' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/only.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Icon } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be renamed
+const A = () => <Button isWorking />;
+
+// Icon — not in --only list, should be left alone
+const B = () => <Icon iconSize='m' iconName='star' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.input.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// String literals — should be updated
+const A = () => <Spinner size='sm' />;
+const B = () => <Spinner size='md' />;
+const C = () => <Spinner size='lg' />;
+const D = () => <Avatar size='sm' />;
+const E = () => <Avatar size='lg' />;
+// StatusIndicator has a different mapping: sm→xs, md→s
+const F = () => <StatusIndicator size='sm' />;
+const G = () => <StatusIndicator size='md' />;
+// Aliased import
+const H = () => <PdsIconButton size='sm' />;
+
+// JSX expression container — should also be updated
+const I = () => <Badge size={'sm'} />;
+
+// Already correct — should be left alone
+const J = () => <Spinner size='s' />;
+// Variable — cannot be transformed at compile time, leave as-is
+const mySize = 'sm';
+const K = () => <Spinner size={mySize} />;
+
+// Non-PDS component — should be left alone
+const L = () => <div size='sm' />;
+
+// Tooltip uses a different prop name: triggerIconSize
+const M = () => <Tooltip triggerIconSize='sm' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.output.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// String literals — should be updated
+const A = () => <Spinner size="s" />;
+const B = () => <Spinner size="m" />;
+const C = () => <Spinner size="l" />;
+const D = () => <Avatar size="s" />;
+const E = () => <Avatar size="m" />;
+// StatusIndicator has a different mapping: sm→xs, md→s
+const F = () => <StatusIndicator size="xs" />;
+const G = () => <StatusIndicator size="s" />;
+// Aliased import
+const H = () => <PdsIconButton size="s" />;
+
+// JSX expression container — should also be updated
+const I = () => <Badge size={"s"} />;
+
+// Already correct — should be left alone
+const J = () => <Spinner size='s' />;
+// Variable — cannot be transformed at compile time, leave as-is
+const mySize = 'sm';
+const K = () => <Spinner size={mySize} />;
+
+// Non-PDS component — should be left alone
+const L = () => <div size='sm' />;
+
+// Tooltip uses a different prop name: triggerIconSize
+const M = () => <Tooltip triggerIconSize="s" />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.input.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// Spinner — matches --only=Spinner, should be updated
+const A = () => <Spinner size='sm' />;
+const B = () => <Spinner size='md' />;
+const C = () => <Spinner size='lg' />;
+
+// Other PDS components — not in --only list, should be left alone
+const D = () => <Avatar size='sm' />;
+const E = () => <StatusIndicator size='sm' />;
+const F = () => <Badge size={'sm'} />;
+const G = () => <PdsIconButton size='sm' />;
+const H = () => <Tooltip triggerIconSize='sm' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.output.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// Spinner — matches --only=Spinner, should be updated
+const A = () => <Spinner size="s" />;
+const B = () => <Spinner size="m" />;
+const C = () => <Spinner size="l" />;
+
+// Other PDS components — not in --only list, should be left alone
+const D = () => <Avatar size='sm' />;
+const E = () => <StatusIndicator size='sm' />;
+const F = () => <Badge size={'sm'} />;
+const G = () => <PdsIconButton size='sm' />;
+const H = () => <Tooltip triggerIconSize='sm' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.input.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+	Avatar,
+	Button,
+	Card,
+	CodeBlock,
+	IconButton,
+	MenuButton,
+	Panel,
+	Spinner,
+	Switch,
+} from '@pantheon-systems/pds-toolkit-react';
+
+// Value rewrites — prop stays, value changes
+const A = () => <Button variant='brand-secondary'>Click</Button>;
+const B = () => <Button variant='navbar'>Click</Button>;
+const C = () => (
+	<MenuButton variant='navbar' id='menu' label='Menu' menuItems={[]} />
+);
+const D = () => (
+	<IconButton variant='critical-hover' iconName='x' label='Close' />
+);
+const E = () => <Avatar size='xl' />;
+
+// JSX expression container value rewrite
+const F = () => <Button variant={'brand-secondary'}>Click</Button>;
+
+// Unconditional prop removals
+const G = () => <Spinner colorType='full-color' />;
+const H = () => <CodeBlock colorType='dark' />;
+const I = () => (
+	<Panel
+		hasStatusIndicator
+		statusType='success'
+		typeLabels={{ success: 'OK' }}
+	/>
+);
+const J = () => (
+	<Switch
+		showStatusLabel
+		statusLabelPlacement='end'
+		onLabel='On'
+		offLabel='Off'
+	/>
+);
+
+// Conditional removal — remove only deprecated gradient values, leave valid values alone
+const K = () => <Card background='mint-gradient' />;
+const L = () => <Card background='sundown-gradient' />;
+const M = () => <Card background='default' />;
+
+// Already correct — should be left alone
+const N = () => <Button variant='secondary'>Click</Button>;
+
+// Non-PDS component — should be left alone
+const O = () => <div variant='brand-secondary' />;
+
+// Dynamic value — cannot transform, leave as-is
+const myVariant = 'brand-secondary';
+const P = () => <Button variant={myVariant}>Click</Button>;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.output.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+	Avatar,
+	Button,
+	Card,
+	CodeBlock,
+	IconButton,
+	MenuButton,
+	Panel,
+	Spinner,
+	Switch,
+} from '@pantheon-systems/pds-toolkit-react';
+
+// Value rewrites — prop stays, value changes
+const A = () => <Button variant="secondary">Click</Button>;
+const B = () => <Button variant="subtle">Click</Button>;
+const C = () => (
+	<MenuButton variant="subtle" id='menu' label='Menu' menuItems={[]} />
+);
+const D = () => (
+	<IconButton variant="critical" iconName='x' label='Close' />
+);
+const E = () => <Avatar size="l" />;
+
+// JSX expression container value rewrite
+const F = () => <Button variant={"secondary"}>Click</Button>;
+
+// Unconditional prop removals
+const G = () => <Spinner />;
+const H = () => <CodeBlock />;
+const I = () => (
+	<Panel />
+);
+const J = () => (
+	<Switch />
+);
+
+// Conditional removal — remove only deprecated gradient values, leave valid values alone
+const K = () => <Card />;
+const L = () => <Card />;
+const M = () => <Card background='default' />;
+
+// Already correct — should be left alone
+const N = () => <Button variant='secondary'>Click</Button>;
+
+// Non-PDS component — should be left alone
+const O = () => <div variant='brand-secondary' />;
+
+// Dynamic value — cannot transform, leave as-is
+const myVariant = 'brand-secondary';
+const P = () => <Button variant={myVariant}>Click</Button>;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.input.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Spinner } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be transformed
+const A = () => <Button variant='brand-secondary'>Click</Button>;
+
+// Spinner — not in --only list, should be left alone
+const B = () => <Spinner colorType='full-color' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Spinner } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be transformed
+const A = () => <Button variant="secondary">Click</Button>;
+
+// Spinner — not in --only list, should be left alone
+const B = () => <Spinner colorType='full-color' />;

package/codemods/v1-to-v2/transforms/__tests__/component-renames.test.js

@@ -0,0 +1,15 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'component-renames';
+
+// Unfiltered: renames all components
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });
+
+// --only=IndicatorBadge: renames only IndicatorBadge; all other components untouched
+defineTest(
+	__dirname,
+	transform,
+	{ only: 'IndicatorBadge' },
+	`${transform}/only`,
+	{ parser: 'tsx' },
+);