@pantheon-systems/pds-toolkit-react 2.0.0-alpha.37 → 2.0.0-alpha.39

package/codemods/v1-to-v2/mappings.json

@@ -153,6 +153,24 @@
 				"prop": "size",
 				"description": "New size prop controls logo scale. The wordmark height is the sizing basis and maps to PDS typography size tokens: s = --pds-typography-size-s, m = --pds-typography-size-m, l = --pds-typography-size-l. The full and icon variants scale proportionally so the fist matches the wordmark height.",
 				"usage": "Use size='s' for compact contexts (e.g. navbar), size='m' for default, size='l' for hero or marketing use."
+			},
+			{
+				"component": "AppLayout",
+				"prop": "header slot",
+				"description": "New header named slot renders a full-width region (typically a Navbar) above the sidebar and main content. When present, AppLayout stacks the header on top and positions the sidebar directly below it, so consumers no longer need an external flex-column wrapper to combine a Navbar with AppLayout.",
+				"usage": "Pass a component such as <Navbar slot='header'>...</Navbar> as a child of AppLayout."
+			},
+			{
+				"component": "AppLayout",
+				"prop": "footer slot",
+				"description": "New footer named slot renders a region (typically a SiteFooter) below the main content and aligned with it, while the sidebar spans the full height alongside the main + footer column. Gives the footer its own landmark instead of nesting it inside the main element.",
+				"usage": "Pass a component such as <SiteFooter as='footer' slot='footer' /> as a child of AppLayout."
+			},
+			{
+				"component": "Navbar",
+				"prop": "inlinePadding",
+				"description": "New inlinePadding prop overrides the desktop bar's horizontal (inline) padding with any CSS length, applied symmetrically. Defaults to the Container's standard gutter, so existing navbars are unaffected.",
+				"usage": "Set inlinePadding (e.g. 'var(--pds-spacing-m)') to align the navbar content with an adjacent app shell, such as the AppLayout sidebar when the navbar is in a header slot."
 			}
 		],
 		"deprecations": [
@@ -237,13 +255,13 @@
 				"component": "Icon",
 				"from": "iconSize",
 				"to": "size",
-				"reason": "The iconSize prop has been renamed to size for consistency across V2 icon components. The available size values and defaults remain unchanged."
+				"reason": "The iconSize prop has been renamed to size for consistency across V2 icon components. The default ('l') is unchanged, but the 'xs' (10px) value has been removed (see props.typeChanges) — use 's' instead."
 			},
 			{
 				"component": "CloseButton",
 				"from": "iconSize",
 				"to": "size",
-				"reason": "The iconSize prop has been renamed to size for consistency with other button components. The available size values remain the same ('m', 'l', 'xl')."
+				"reason": "The iconSize prop has been renamed to size for consistency with other button components. Size values have also been standardized to 's', 'm', 'l' (see props.typeChanges)."
 			},
 			{
 				"component": "PlatformIcon",
@@ -271,6 +289,12 @@
 			}
 		],
 		"additions": [
+			{
+				"component": "ButtonLink",
+				"prop": "variant",
+				"description": "ButtonLink now supports the full Button variant set, including the new 'link' variant (a text-link appearance on a real anchor). Previously the 'inline' variant was excluded.",
+				"usage": "Use variant=\"link\" for an anchor styled as an inline text link — e.g. the account-tier links in a dashboard workspace header."
+			},
 			{
 				"component": "Card",
 				"prop": "imageVariant",
@@ -325,6 +349,12 @@
 				"description": "New size prop adds two tab height variants. Defaults to 's' (32px). 'm' gives 40px tabs with larger text and icons.",
 				"usage": "Use size='s' (default) for standard navigation, size='m' for more prominent tab navigation."
 			},
+			{
+				"component": "SegmentedButton",
+				"prop": "size",
+				"description": "New size prop adds two height/font-size variants. Defaults to 's' (32px, matching the small button height). 'xs' gives 24px segments for compact layouts.",
+				"usage": "Use size='s' (default) for standard usage, size='xs' for dense or space-constrained layouts."
+			},
 			{
 				"component": "ComboboxMultiselect",
 				"prop": "size",
@@ -491,12 +521,6 @@
 				"replacement": "Remove the prop. TabMenu now renders at a single size equivalent to the former size='m'.",
 				"reason": "The size prop has been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage."
 			},
-			{
-				"component": "SegmentedButton",
-				"prop": "size",
-				"replacement": "Remove the prop. SegmentedButton now renders at a single size equivalent to the former size='s'.",
-				"reason": "The size prop and the medium size have been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage. A smaller size may be reintroduced later if a need arises."
-			},
 			{
 				"component": "ButtonNav",
 				"prop": "size",
@@ -534,6 +558,13 @@
 				"replacement": "Use variant=\"subtle\"",
 				"reason": "The navbar variant has been removed in v2. It was visually identical to subtle — replace with subtle."
 			},
+			{
+				"component": "Button",
+				"prop": "variant",
+				"oldValue": "inline",
+				"replacement": "Use variant=\"link\"",
+				"reason": "The 'inline' button variant has been renamed to 'link' to describe its appearance (a text link) rather than its placement, and is no longer treated as legacy."
+			},
 			{
 				"component": "MenuButton",
 				"prop": "variant",
@@ -729,6 +760,132 @@
 			}
 		],
 		"typeChanges": [
+			{
+				"component": "Icon",
+				"prop": "size",
+				"description": "The 'xs' size value has been removed",
+				"v1Type": "'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl'",
+				"v2Type": "'s' | 'm' | 'l' | 'xl' | '2xl' | '3xl'",
+				"migration": {
+					"xs": "s (removed, use 's' instead)"
+				},
+				"reason": "The 10px 'xs' icon size has been removed in v2. It had a single internal usage (the TagsInput remove button, now 's'/12px) and is superseded by 's'. Use size='s' instead."
+			},
+			{
+				"component": "FlexContainer",
+				"prop": "gap",
+				"description": "The named gap scale was replaced by the numbered spacing scale (`GapScale`). Fixed at all breakpoints; use `mobileGap` to change the gap on small screens.",
+				"v1Type": "'minimal' | 'narrow' | 'standard' | 'wide' | 'none'",
+				"v2Type": "'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'",
+				"migration": {
+					"minimal": "s",
+					"narrow": "m",
+					"standard": "xl",
+					"wide": "3xl"
+				},
+				"reason": "Unifies gap onto one predictable, fixed spacing scale across FlexContainer, Grid, and the layout components."
+			},
+			{
+				"component": "FlexContainer",
+				"prop": "mobileGap",
+				"description": "The named gap scale was replaced by the numbered spacing scale (`GapScale`).",
+				"v1Type": "'minimal' | 'narrow' | 'standard' | 'wide' | 'none'",
+				"v2Type": "'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'",
+				"migration": {
+					"minimal": "s",
+					"narrow": "m",
+					"standard": "xl",
+					"wide": "3xl"
+				},
+				"reason": "Unifies gap onto one predictable, fixed spacing scale across FlexContainer, Grid, and the layout components."
+			},
+			{
+				"component": "SidebarLayout",
+				"prop": "gridGap",
+				"description": "The named gap scale was replaced by the numbered spacing scale (`GapScale`).",
+				"v1Type": "'narrow' | 'standard' | 'wide' | 'none'",
+				"v2Type": "'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'",
+				"migration": {
+					"narrow": "m",
+					"standard": "xl",
+					"wide": "3xl"
+				},
+				"reason": "Unifies gap onto one predictable, fixed spacing scale across FlexContainer, Grid, and the layout components."
+			},
+			{
+				"component": "TwoItemLayout",
+				"prop": "gridGap",
+				"description": "The named gap scale was replaced by the numbered spacing scale (`GapScale`).",
+				"v1Type": "'narrow' | 'standard' | 'wide' | 'none'",
+				"v2Type": "'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'",
+				"migration": {
+					"narrow": "m",
+					"standard": "xl",
+					"wide": "3xl"
+				},
+				"reason": "Unifies gap onto one predictable, fixed spacing scale across FlexContainer, Grid, and the layout components."
+			},
+			{
+				"component": "ThreeItemLayout",
+				"prop": "gridGap",
+				"description": "The named gap scale was replaced by the numbered spacing scale (`GapScale`).",
+				"v1Type": "'narrow' | 'standard' | 'wide' | 'none'",
+				"v2Type": "'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'",
+				"migration": {
+					"narrow": "m",
+					"standard": "xl",
+					"wide": "3xl"
+				},
+				"reason": "Unifies gap onto one predictable, fixed spacing scale across FlexContainer, Grid, and the layout components."
+			},
+			{
+				"component": "Panel",
+				"prop": "padding",
+				"description": "The padding prop moved from the shared GridGapOptions scale to a dedicated, curated PaddingScale. Values were renamed: narrow → condensed, wide → spacious. standard and none are unchanged. The underlying spacing values are preserved.",
+				"v1Type": "'wide' | 'standard' | 'narrow' | 'none'",
+				"v2Type": "'none' | 'condensed' | 'standard' | 'spacious'",
+				"migration": {
+					"narrow": "condensed",
+					"wide": "spacious"
+				},
+				"reason": "Padding is a container-internal concern with its own curated semantic scale, separated from the numbered gap scale used for layout spacing."
+			},
+			{
+				"component": "Card",
+				"prop": "padding",
+				"description": "The padding prop moved from the shared GridGapOptions scale to a dedicated, curated PaddingScale. Values were renamed: narrow → condensed, wide → spacious. standard and none are unchanged. The underlying spacing values are preserved.",
+				"v1Type": "'wide' | 'standard' | 'narrow' | 'none'",
+				"v2Type": "'none' | 'condensed' | 'standard' | 'spacious'",
+				"migration": {
+					"narrow": "condensed",
+					"wide": "spacious"
+				},
+				"reason": "Padding is a container-internal concern with its own curated semantic scale, separated from the numbered gap scale used for layout spacing."
+			},
+			{
+				"component": "ActionCard",
+				"prop": "padding",
+				"description": "The padding prop moved from the shared GridGapOptions scale to a dedicated, curated PaddingScale. Values were renamed: narrow → condensed, wide → spacious. standard and none are unchanged. The underlying spacing values are preserved.",
+				"v1Type": "'wide' | 'standard' | 'narrow' | 'none'",
+				"v2Type": "'none' | 'condensed' | 'standard' | 'spacious'",
+				"migration": {
+					"narrow": "condensed",
+					"wide": "spacious"
+				},
+				"reason": "Padding is a container-internal concern with its own curated semantic scale, separated from the numbered gap scale used for layout spacing."
+			},
+			{
+				"component": "UtilityBar",
+				"prop": "padding",
+				"description": "The padding prop moved from the shared GridGapOptions scale to a dedicated, curated PaddingScale. Values were renamed: narrow → condensed, wide → spacious. standard and none are unchanged. The underlying spacing values are preserved.",
+				"v1Type": "'wide' | 'standard' | 'narrow' | 'none'",
+				"v2Type": "'none' | 'condensed' | 'standard' | 'spacious'",
+				"migration": {
+					"narrow": "condensed",
+					"wide": "spacious"
+				},
+				"reason": "Padding is a container-internal concern with its own curated semantic scale, separated from the numbered gap scale used for layout spacing."
+			},
 			{
 				"component": "StepList",
 				"prop": "steps",
@@ -807,15 +964,15 @@
 			{
 				"component": "CloseButton",
 				"prop": "size",
-				"description": "Prop renamed from iconSize to size, and size naming convention updated to match standardized naming",
+				"description": "Prop renamed from iconSize to size, and size naming convention standardized to s/m/l",
 				"v1Type": "'md' | 'lg' | 'xl' (on iconSize prop)",
-				"v2Type": "'m' | 'l' | 'xl' (on size prop)",
+				"v2Type": "'s' | 'm' | 'l' (on size prop)",
 				"migration": {
-					"md": "m",
-					"lg": "l",
-					"xl": "xl (unchanged)"
+					"md": "s",
+					"lg": "m",
+					"xl": "l"
 				},
-				"reason": "Prop renamed from iconSize to size for consistency with other button components. Size value naming also standardized - the 'md' and 'lg' values have been shortened to 'm' and 'l' for consistency."
+				"reason": "Prop renamed from iconSize to size for consistency with other button components. Size values standardized to the single-letter s/m/l scale used across V2 (smallest rung is now 's'); pixel sizes are unchanged, only the labels shifted (md→s, lg→m, xl→l)."
 			},
 			{
 				"component": "Icon",
@@ -828,6 +985,18 @@
 				},
 				"reason": "The 'Outline' and 'Line' suffixed icon names have been removed. The base names (circlePlus, circleMinus, globe) now render the outlined/regular style by default."
 			},
+			{
+				"component": "Icon",
+				"prop": "iconName",
+				"description": "Several verbose icon names were shortened for clarity.",
+				"migration": {
+					"arrowDownLeftAndArrowUpRightToCenter": "collapseToCenter",
+					"arrowsUpDownLeftRight": "move",
+					"linkSimple": "link",
+					"linkSimpleSlash": "unlink"
+				},
+				"reason": "Renamed for brevity and clarity: 'arrowDownLeftAndArrowUpRightToCenter' → 'collapseToCenter' (pairs with 'expandFromCenter'), 'arrowsUpDownLeftRight' → 'move', 'linkSimple' → 'link', 'linkSimpleSlash' → 'unlink'. Run the icon-name-updates codemod to migrate."
+			},
 			{
 				"component": "Tooltip",
 				"prop": "triggerIconSize",
@@ -916,14 +1085,14 @@
 			{
 				"component": "CTALink",
 				"prop": "size",
-				"description": "Size naming convention updated and default changed",
+				"description": "Size naming convention updated (sm → s, md → m), default changed from 'md' to 's', and an 'xs' variant added. v2 accepts 'xs' | 's' | 'm'.",
 				"v1Type": "'sm' | 'md'",
-				"v2Type": "'s' | 'm'",
+				"v2Type": "'xs' | 's' | 'm'",
 				"migration": {
 					"sm": "s",
 					"md": "m"
 				},
-				"reason": "Standardized size naming. Default changed from 'md' to 's'."
+				"reason": "Standardized size naming and added 'xs' to support compact contexts such as the Payment Card pattern footer."
 			},
 			{
 				"component": "LinkNewWindow",
@@ -1012,17 +1181,6 @@
 				"newType": "(key: string, order: SortOrder) => void",
 				"reason": "The sort callback now receives a column id string instead of a positional index."
 			},
-			{
-				"component": "CTALink",
-				"prop": "size",
-				"description": "Added xs size variant. The size prop now accepts xs | s | m (previously s | m).",
-				"v1Type": "'s' | 'm'",
-				"v2Type": "'xs' | 's' | 'm'",
-				"migration": {
-					"note": "Backwards compatible — existing size values are unchanged. Use size=\"xs\" when a smaller CTA link is needed."
-				},
-				"reason": "Added to support compact contexts such as the Payment Card pattern footer."
-			},
 			{
 				"component": "MenuButton",
 				"prop": "displayType",
@@ -1060,6 +1218,16 @@
 	},
 	"cssClasses": {
 		"renames": [
+			{
+				"old": "pds-grid--narrow",
+				"new": "pds-grid--gap-m",
+				"reason": "The grid gap moved to the numbered spacing scale. The old responsive `narrow` gutter maps to a fixed `m` (16px) gap."
+			},
+			{
+				"old": "pds-grid--wide",
+				"new": "pds-grid--gap-3xl",
+				"reason": "The grid gap moved to the numbered spacing scale. The old responsive `wide` gutter maps to a fixed `3xl` (40px) gap."
+			},
 			{
 				"old": "pds-overline-text",
 				"new": "pds-overline-m",
@@ -1156,6 +1324,27 @@
 		"removals": []
 	},
 	"behaviorChanges": [
+		{
+			"component": "Container",
+			"prop": "full width",
+			"description": "The 'full' container width is now edge-to-edge with no inline padding.",
+			"v1Behavior": "containerWidth='full' (class pds-container--full) removed the max-width but kept the standard 2xl inline padding, so full-width sections still had a gutter.",
+			"v2Behavior": "The 'full' width now has no inline padding (padding-inline: 0), so content spans edge-to-edge. Add your own padding for full-width sections that need a gutter.",
+			"migration": "If you used containerWidth='full' (or the pds-container--full class) and relied on its inline padding, add the padding yourself (e.g. a spacing utility or wrapper).",
+			"affectedAreas": [
+				"Container",
+				"Any full-width sections using pds-container--full"
+			]
+		},
+		{
+			"component": "SiteFooter",
+			"prop": "containerWidth",
+			"description": "Default containerWidth changed from 'standard' to 'full'; the footer no longer applies its own inline padding or max-width by default.",
+			"v1Behavior": "SiteFooter wrapped its content in a standard Container, applying a max-width and inline padding (gutter) by default, plus 2xl vertical padding.",
+			"v2Behavior": "SiteFooter defaults to containerWidth='full', which is now edge-to-edge (no max-width, no inline padding); the containing layout or app provides the gutter. Vertical padding is reduced to xl.",
+			"migration": "If you relied on the footer's built-in gutter or max-width, set containerWidth explicitly (e.g. 'x-wide') or wrap the footer in your layout's container. When placing SiteFooter in AppLayout's footer slot, the region provides the inline padding.",
+			"affectedAreas": ["SiteFooter", "Footers in app and docs layouts"]
+		},
 		{
 			"component": "TextInput, RadioGroup, FileUpload, Combobox, ComboboxMultiselect, Select, Textarea, Checkbox, Switch, TagsInput, Datepicker",
 			"prop": "inputWidth",

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' />;