-
+ {errors.map((error) =>
This plan includes:
+-
+
+
+ {dismissControl && (
+
+
+ );
+ }
+
+ if (variant === 'inline') {
+ const alertIconImage = content.assets?.logo ?? assets.logomark ?? assets.logo;
+ const alertIconDark = content.assets?.logoDark ?? assets.logomarkDark ?? assets.logoDark;
+ const alertIcon = content.icon ?? (alertIconImage ? (
+ <>
+ {dismissControl}
+ )}
+ {withExpandableContent(body)}
+
+
+ {content.body}
+ {content.secondaryBody && {content.secondaryBody} }
+ {content.disclosure && {content.disclosure} }
+
+
+ );
+ }
+
+ if (variant === 'compact') {
+ const fieldValue = metrics[0]
+ ? `${formatMetricValue(metrics[0].value, metrics[0].format)} ${metrics[0].label}`
+ : undefined;
+ const fieldContent = (
+
+
+ {withExpandableContent(fieldContent)}
+ {dismissControl && {dismissControl} }
+
+
+ );
+ }
+
+ return null;
+};
+
+const ProductNudge: FunctionComponent
+ 
+ 
+
+ );
+};
+
+export const ProductNudgeContactModal = ({
+ isOpen,
+ namePlaceholder = '',
+ emailPlaceholder = '',
+ phonePlaceholder = '',
+ onClose,
+ onSubmit,
+ titleText,
+ titleIcon,
+ headerIcon,
+ descriptionText,
+ submitText,
+ fields,
+ successMessage,
+ brand,
+ partnerLogo,
+ partnerLogoDark,
+ ctaColorScheme,
+ ctaStyle: customCtaStyle,
+ titleIconSize = '1.5rem',
+ errorTitle = 'Unable to submit request',
+ errorMessage,
+ contentAriaLabel = 'Contact request details',
+ id,
+}: ProductNudgeContactModalProps) => {
+ const classes = useStyles();
+ const generatedId = useId();
+ const idPrefix = id ?? `product-nudge-contact-${generatedId.replace(/:/g, '')}`;
+ const errorRef = useRef
+
+
+
+ );
+};
+
+const renderFooterAction = (
+ action: ProductNudgeAction | undefined,
+ variant: 'primary' | 'link',
+ style?: React.CSSProperties,
+) => {
+ if (!action) {
+ return null;
+ }
+
+ const linkIconProps = variant === 'link' ? { icon:
+
+ Match analysis
+
+ {matchPercentage}% of packages match the catalog.
+
+
+
+
+ ({ x: label, y: value }))}
+ labels={({ datum }) => `${datum.x}: ${datum.y}`}
+ labelComponent={
+
+
+ {matchItems.map(({ label, value, helpText }) => (
+
+ {value}
+
+ }
+ iconPosition="end"
+ >
+ {label}
+
+
+
+ ))}
+
+
+
+
+
+
+
+ By ecosystem
+ See how packages map to supported ecosystems.
+
+
+
+
+ name)} />
+
+ ({ x: name, y: exact, label: `Exact match: ${exact}` }))}
+ labels={({ datum }) => datum.label}
+ labelComponent={ ({ x: name, y: partial, label: `Partial match: ${partial}` }))}
+ labels={({ datum }) => datum.label}
+ labelComponent={ ({ x: name, y: noMatch, label: `No match: ${noMatch}` }))}
+ labels={({ datum }) => datum.label}
+ labelComponent={
+
+
+ -
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+ {termText}
+
+
+
+ {headline}
+ {bodyText && {bodyText} }
+ {ctaUrl && (
+
+ }
+ iconPosition="end"
+ ouiaId={`${ouiaId}-cta`}
+ >
+ {ctaText ?? 'Learn more'}
+
+
+ )}
+
+
+
+ );
+};
+
+export default ProductNudgeDescriptionItem;
diff --git a/packages/module/src/ProductNudge/ProductNudgeModalFooter.test.tsx b/packages/module/src/ProductNudge/ProductNudgeModalFooter.test.tsx
new file mode 100644
index 00000000..6d1d3e79
--- /dev/null
+++ b/packages/module/src/ProductNudge/ProductNudgeModalFooter.test.tsx
@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+
+import ProductNudgeModalFooter from './ProductNudgeModalFooter';
+
+describe('ProductNudgeModalFooter component', () => {
+ it('renders nothing when no content is provided', () => {
+ const { container } = render(
+
+
+ {titleIcon ? (
+ {titleIcon}
+ ) : resolvedLogo && (
+
+ 
+ {resolvedLogoDark && (
+ 
+ )}
+
+ )}
+ {titleText}
+
+
+ {value && {value} }
+ {bodyText && {bodyText} }
+ {(ctaUrl || onAction) && (
+
+ {ctaUrl ? (
+ }
+ iconPosition="end"
+ ouiaId={`${ouiaId}-cta`}
+ >
+ {ctaText ?? 'Learn more'}
+
+ ) : (
+
+ )}
+
+ )}
+
+ );
+};
+
+export default ProductNudgeStack;
diff --git a/packages/module/src/ProductNudge/assets/RedHatIBMLogo.svg b/packages/module/src/ProductNudge/assets/RedHatIBMLogo.svg
new file mode 100644
index 00000000..a6476f53
--- /dev/null
+++ b/packages/module/src/ProductNudge/assets/RedHatIBMLogo.svg
@@ -0,0 +1,62 @@
+
diff --git a/packages/module/src/ProductNudge/assets/RedHatIBMLogoDark.svg b/packages/module/src/ProductNudge/assets/RedHatIBMLogoDark.svg
new file mode 100644
index 00000000..be6ea37d
--- /dev/null
+++ b/packages/module/src/ProductNudge/assets/RedHatIBMLogoDark.svg
@@ -0,0 +1,62 @@
+
diff --git a/packages/module/src/ProductNudge/assets/lightwell-bg-dark.png b/packages/module/src/ProductNudge/assets/lightwell-bg-dark.png
new file mode 100644
index 00000000..dd1bbd80
Binary files /dev/null and b/packages/module/src/ProductNudge/assets/lightwell-bg-dark.png differ
diff --git a/packages/module/src/ProductNudge/assets/lightwell-bg-light.png b/packages/module/src/ProductNudge/assets/lightwell-bg-light.png
new file mode 100644
index 00000000..81982704
Binary files /dev/null and b/packages/module/src/ProductNudge/assets/lightwell-bg-light.png differ
diff --git a/packages/module/src/ProductNudge/assets/lightwell-logo-dark.svg b/packages/module/src/ProductNudge/assets/lightwell-logo-dark.svg
new file mode 100644
index 00000000..a02d71bd
--- /dev/null
+++ b/packages/module/src/ProductNudge/assets/lightwell-logo-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/module/src/ProductNudge/assets/lightwell-logo.svg b/packages/module/src/ProductNudge/assets/lightwell-logo.svg
new file mode 100644
index 00000000..833ae3ab
--- /dev/null
+++ b/packages/module/src/ProductNudge/assets/lightwell-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/module/src/ProductNudge/assets/lightwell-logomark-dark.svg b/packages/module/src/ProductNudge/assets/lightwell-logomark-dark.svg
new file mode 100644
index 00000000..24586272
--- /dev/null
+++ b/packages/module/src/ProductNudge/assets/lightwell-logomark-dark.svg
@@ -0,0 +1,15 @@
+
diff --git a/packages/module/src/ProductNudge/assets/lightwell-logomark-light.svg b/packages/module/src/ProductNudge/assets/lightwell-logomark-light.svg
new file mode 100644
index 00000000..b55d1c21
--- /dev/null
+++ b/packages/module/src/ProductNudge/assets/lightwell-logomark-light.svg
@@ -0,0 +1,35 @@
+
\ No newline at end of file
diff --git a/packages/module/src/ProductNudge/index.ts b/packages/module/src/ProductNudge/index.ts
new file mode 100644
index 00000000..0a79b2b1
--- /dev/null
+++ b/packages/module/src/ProductNudge/index.ts
@@ -0,0 +1,25 @@
+export { default } from './ProductNudge';
+export * from './ProductNudge';
+export * from './ProductNudge.types';
+
+export { default as ProductNudgeContactModal } from './ProductNudgeContactModal';
+export * from './ProductNudgeContactModal';
+
+
+export { default as ProductNudgeStack } from './ProductNudgeStack';
+export * from './ProductNudgeStack';
+
+export { default as ProductNudgeDescriptionItem } from './ProductNudgeDescriptionItem';
+export * from './ProductNudgeDescriptionItem';
+
+export { default as ProductNudgeDataModal } from './ProductNudgeDataModal';
+export * from './ProductNudgeDataModal';
+
+export { default as ProductNudgeModalFooter } from './ProductNudgeModalFooter';
+export * from './ProductNudgeModalFooter';
+
+export { default as ProductNudgeBrandLogo } from './ProductNudgeBrandLogo';
+export * from './ProductNudgeBrandLogo';
+
+export * from './productNudgeDefaults';
+export { useImpressionTracking } from './useImpressionTracking';
diff --git a/packages/module/src/ProductNudge/nudgeStyles.ts b/packages/module/src/ProductNudge/nudgeStyles.ts
new file mode 100644
index 00000000..5b2f60c5
--- /dev/null
+++ b/packages/module/src/ProductNudge/nudgeStyles.ts
@@ -0,0 +1,42 @@
+import type { CSSProperties } from 'react';
+
+export const nudgeModeStyles = {
+ lightModeOnly: {
+ '.pf-v6-theme-dark &': { display: 'none' },
+ },
+ darkModeOnly: {
+ display: 'none',
+ '.pf-v6-theme-dark &': { display: 'block' },
+ },
+};
+
+export const partnerLogoStyles = {
+ display: 'block',
+ width: 'min(120px, 30vw)',
+};
+
+/**
+ * Shared sizing for a rectangular brand image (e.g. a full wordmark logo), built from
+ * caller-supplied size/offset values rather than hardcoded per asset.
+ */
+export const createImageSizeStyle = (size: string, offset?: string): CSSProperties => (
+ offset === undefined ? { width: size } : { width: size, marginInlineStart: offset }
+);
+
+/**
+ * Shared sizing for a square brand mark (icon-style logomark or title icon container).
+ */
+export const createSquareImageSizeStyle = (size: string, offset?: string): CSSProperties => ({
+ ...createImageSizeStyle(size, offset),
+ height: size,
+});
+
+/** Default background tint applied for `brand="lightwell"`; overridable via the `backgroundColor` prop. */
+export const LIGHTWELL_BACKGROUND_COLOR = '#e5e0df';
+
+export const lightwellCtaStyle = {
+ '--pf-v6-c-button--BackgroundColor': 'var(--pf-t--color--red--50)',
+ '--pf-v6-c-button--hover--BackgroundColor': 'var(--pf-t--color--red--60)',
+ '--pf-v6-c-button--m-clicked--BackgroundColor': 'var(--pf-t--color--red--60)',
+ '--pf-v6-c-button--Color': 'var(--pf-t--color--white)'
+} as CSSProperties;
diff --git a/packages/module/src/ProductNudge/productNudgeChartUtils.test.ts b/packages/module/src/ProductNudge/productNudgeChartUtils.test.ts
new file mode 100644
index 00000000..834138d6
--- /dev/null
+++ b/packages/module/src/ProductNudge/productNudgeChartUtils.test.ts
@@ -0,0 +1,43 @@
+import { formatAxisTick, getYAxisTicks } from './productNudgeChartUtils';
+
+describe('getYAxisTicks', () => {
+ it.each([
+ [ 804, [ 250, 500, 750, 1000 ] ],
+ [ 180, [ 50, 100, 150, 200 ] ],
+ [ 200, [ 50, 100, 150, 200 ] ],
+ [ 350, [ 100, 200, 300, 400 ] ],
+ [ 1001, [ 500, 1000, 1500 ] ],
+ [ 3, [ 1, 2, 3 ] ],
+ [ 9, [ 5, 10 ] ],
+ [ 12500, [ 5000, 10000, 15000 ] ],
+ ])('covers a max of %s without overshooting', (max, expected) => {
+ expect(getYAxisTicks(max)).toEqual(expected);
+ });
+
+ it.each([ 0, -5, NaN, Infinity ])('falls back to the default ticks for %s', (max) => {
+ expect(getYAxisTicks(max)).toEqual([ 50, 100, 150, 200 ]);
+ });
+
+ it('always ends at the first tick that covers the max and uses whole numbers', () => {
+ for (let max = 1; max <= 5000; max += 7) {
+ const ticks = getYAxisTicks(max);
+ const step = ticks[0];
+ expect(ticks[ticks.length - 1]).toBeGreaterThanOrEqual(max);
+ expect(ticks[ticks.length - 1] - step).toBeLessThan(max);
+ expect(ticks.every(Number.isInteger)).toBe(true);
+ }
+ });
+
+ it('returns a new array each call so callers cannot mutate the defaults', () => {
+ getYAxisTicks(0).push(999);
+ expect(getYAxisTicks(0)).toEqual([ 50, 100, 150, 200 ]);
+ });
+});
+
+describe('formatAxisTick', () => {
+ it('uses compact notation for large values', () => {
+ expect(formatAxisTick(250)).toBe('250');
+ expect(formatAxisTick(1000)).toBe('1K');
+ expect(formatAxisTick(1500)).toBe('1.5K');
+ });
+});
diff --git a/packages/module/src/ProductNudge/productNudgeChartUtils.ts b/packages/module/src/ProductNudge/productNudgeChartUtils.ts
new file mode 100644
index 00000000..8a1b7ba3
--- /dev/null
+++ b/packages/module/src/ProductNudge/productNudgeChartUtils.ts
@@ -0,0 +1,28 @@
+const TARGET_TICK_COUNT = 4;
+const DEFAULT_TICKS = [ 50, 100, 150, 200 ];
+const NICE_MULTIPLIERS = [ 1, 2, 2.5, 5, 10 ];
+
+/**
+ * Returns evenly spaced whole-number tick values for a chart's dependent axis.
+ * The last tick is the first "nice" step that covers `maxValue`, so the axis never extends
+ * much beyond the data. Falls back to 50-200 when there is no positive data.
+ */
+export const getYAxisTicks = (maxValue: number): number[] => {
+ if (!Number.isFinite(maxValue) || maxValue <= 0) {
+ return [ ...DEFAULT_TICKS ];
+ }
+
+ // Counts are whole numbers, so never use a step smaller than 1.
+ const rawStep = Math.max(1, maxValue / TARGET_TICK_COUNT);
+ const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+ const step = NICE_MULTIPLIERS
+ .map((multiplier) => multiplier * magnitude)
+ .find((candidate) => candidate >= rawStep && Number.isInteger(candidate)) ?? 10 * magnitude;
+ const count = Math.ceil(maxValue / step);
+
+ return Array.from({ length: count }, (_, index) => step * (index + 1));
+};
+
+/** Compact axis label (for example 1500 becomes "1.5K") so large values fit the axis padding. */
+export const formatAxisTick = (value: number): string =>
+ new Intl.NumberFormat(undefined, { notation: 'compact' }).format(value);
diff --git a/packages/module/src/ProductNudge/productNudgeDefaults.ts b/packages/module/src/ProductNudge/productNudgeDefaults.ts
new file mode 100644
index 00000000..ed65747f
--- /dev/null
+++ b/packages/module/src/ProductNudge/productNudgeDefaults.ts
@@ -0,0 +1,41 @@
+import LightwellLogo from './assets/lightwell-logo.svg';
+import LightwellLogoDark from './assets/lightwell-logo-dark.svg';
+import LightwellLogomark from './assets/lightwell-logomark-light.svg';
+import LightwellLogomarkDark from './assets/lightwell-logomark-dark.svg';
+import RedHatIBMLogo from './assets/RedHatIBMLogo.svg';
+import RedHatIBMLogoDark from './assets/RedHatIBMLogoDark.svg';
+
+import { NudgeContent, ProductNudgeBrandAssets } from './ProductNudge.types';
+
+/** Individual asset exports for consumers that need direct access. */
+export { LightwellLogo, LightwellLogoDark, LightwellLogomark, LightwellLogomarkDark, RedHatIBMLogo, RedHatIBMLogoDark };
+
+/**
+ * Visual defaults for `brand="lightwell"`. Product copy is intentionally not included.
+ * Alt text below ("Lightwell", "Red Hat and IBM") is part of the Lightwell preset itself,
+ * not generic component chrome — it travels with its asset, so a consumer overriding any
+ * of these images (via `content.assets` or a component's `logo`/`logoDark`/`partnerLogo`
+ * props) supplies their own matching alt text in the same call.
+ *
+ * Background images are intentionally NOT included here — see `productNudgeLightwellBackgrounds.ts`.
+ */
+export const lightwellBrandAssets: ProductNudgeBrandAssets = {
+ logo: { src: LightwellLogo, alt: 'Lightwell' },
+ logoDark: { src: LightwellLogoDark, alt: 'Lightwell' },
+ logomark: { src: LightwellLogomark, alt: 'Lightwell' },
+ logomarkDark: { src: LightwellLogomarkDark, alt: 'Lightwell' },
+ partnerLogo: { src: RedHatIBMLogo, alt: 'Red Hat and IBM' },
+ partnerLogoDark: { src: RedHatIBMLogoDark, alt: 'Red Hat and IBM' },
+};
+
+/** Assembled assets for a full hero nudge (logo + partner logo). Add the Lightwell background
+ * images from `productNudgeLightwellBackgrounds.ts` for a hero nudge that needs one. */
+export const lightwellHeroAssets: NudgeContent['assets'] = {
+ ...lightwellBrandAssets,
+};
+
+/** Assembled assets for an alert or field nudge (logomark icon). */
+export const lightwellAlertAssets: NudgeContent['assets'] = {
+ logo: lightwellBrandAssets.logomark,
+ logoDark: lightwellBrandAssets.logomarkDark,
+};
diff --git a/packages/module/src/ProductNudge/productNudgeLightwellBackgrounds.ts b/packages/module/src/ProductNudge/productNudgeLightwellBackgrounds.ts
new file mode 100644
index 00000000..ebb0d852
--- /dev/null
+++ b/packages/module/src/ProductNudge/productNudgeLightwellBackgrounds.ts
@@ -0,0 +1,27 @@
+import LightwellBgLight from './assets/lightwell-bg-light.png';
+import LightwellBgDark from './assets/lightwell-bg-dark.png';
+
+import { ProductNudgeBrandAssets } from './ProductNudge.types';
+
+/** Individual asset exports for consumers that need direct access. */
+export { LightwellBgLight, LightwellBgDark };
+
+/**
+ * Lightwell's hero background images (~2MB combined). Deliberately NOT re-exported from
+ * `index.ts` so non-Lightwell consumers never pay for these bytes regardless of bundler
+ * tree-shaking configuration. Lightwell hero nudges that need a background opt in with one
+ * extra import, spreading this into `content.assets` alongside `lightwellBrandAssets`:
+ *
+ * ```ts
+ * import { lightwellBrandAssets } from '@patternfly/react-component-groups/dist/esm/ProductNudge/productNudgeDefaults';
+ * import { lightwellBackgroundAssets } from '@patternfly/react-component-groups/dist/esm/ProductNudge/productNudgeLightwellBackgrounds';
+ *
+ * content.assets = { ...lightwellBrandAssets, ...lightwellBackgroundAssets };
+ * ```
+ */
+export const lightwellBackgroundAssets: Pick