@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.71

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,55 @@
+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} />;
+
+// Bare ternary — direct rename in one branch, safe removal in the other
+const L = ({ active }: { active: boolean }) => (
+	<div
+		className={active ? 'pds-button--navbar' : 'pds-typography--product'}
+	/>
+);
+
+// Bare logical expression — right-hand side is a flagged class
+const M = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && 'pds-color-bg-brand'} />
+);
+
+// Ternary nested inside a template literal interpolation
+const N = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? 'pds-button--navbar' : 'pds-ts-9xl'
+		}`}
+	/>
+);
+
+// Non-className prop that still ends in "ClassName"
+const O = () => <Icon iconClassName='pds-button--navbar' />;

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

@@ -0,0 +1,55 @@
+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} />;
+
+// Bare ternary — direct rename in one branch, safe removal in the other
+const L = ({ active }: { active: boolean }) => (
+	<div
+		className={active ? "pds-button--subtle" : ""}
+	/>
+);
+
+// Bare logical expression — right-hand side is a flagged class
+const M = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && 'pds-color-bg-brand'} />
+);
+
+// Ternary nested inside a template literal interpolation
+const N = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? "pds-button--subtle" : "pds-ts-8xl"
+		}`}
+	/>
+);
+
+// Non-className prop that still ends in "ClassName"
+const O = () => <Icon iconClassName="pds-button--subtle" />;

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

@@ -0,0 +1,60 @@
+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} />;
+
+// Bare ternary — both branches are string literals
+const J = ({ active }: { active: boolean }) => (
+	<div className={active ? 'pds-overline-text' : 'pds-overline-text--sm'} />
+);
+
+// Bare logical expression — right-hand side is a string literal
+const K = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && 'pds-overline-text'} />
+);
+
+// Ternary nested inside a template literal interpolation
+const L = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? 'pds-overline-text--sm' : 'pds-overline-text--lg'
+		}`}
+	/>
+);
+
+// Ternary with one literal branch and one dynamic branch — only the literal
+// branch can be renamed; the dynamic branch is left untouched
+const M = ({ active, fallbackClass }: { active: boolean; fallbackClass: string }) => (
+	<div className={active ? 'pds-overline-text' : fallbackClass} />
+);
+
+// Non-className prop that still ends in "ClassName" — common for components
+// with multiple styleable slots
+const N = () => <Icon iconClassName='pds-overline-text' />;
+
+// 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,60 @@
+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} />;
+
+// Bare ternary — both branches are string literals
+const J = ({ active }: { active: boolean }) => (
+	<div className={active ? "pds-overline-m" : "pds-overline-s"} />
+);
+
+// Bare logical expression — right-hand side is a string literal
+const K = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && "pds-overline-m"} />
+);
+
+// Ternary nested inside a template literal interpolation
+const L = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? "pds-overline-s" : "pds-overline-l"
+		}`}
+	/>
+);
+
+// Ternary with one literal branch and one dynamic branch — only the literal
+// branch can be renamed; the dynamic branch is left untouched
+const M = ({ active, fallbackClass }: { active: boolean; fallbackClass: string }) => (
+	<div className={active ? "pds-overline-m" : fallbackClass} />
+);
+
+// Non-className prop that still ends in "ClassName" — common for components
+// with multiple styleable slots
+const N = () => <Icon iconClassName="pds-overline-m" />;
+
+// 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,37 @@
+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's size prop was removed in v2 (no value mapping), so this
+// transform leaves it untouched — prop removal is handled by a separate transform
+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,37 @@
+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's size prop was removed in v2 (no value mapping), so this
+// transform leaves it untouched — prop removal is handled by a separate transform
+const F = () => <StatusIndicator size='sm' />;
+const G = () => <StatusIndicator size='md' />;
+// 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' />;