Acme Pro includes:
+-
+
+
+
+
+ );
+ }
+
+ if (prominence === 'alert') {
+ const alertIconImage = content.assets?.logo ?? assets.logomark ?? assets.logo;
+ const alertIconDark = content.assets?.logoDark ?? assets.logomarkDark ?? assets.logoDark;
+ const alertIcon = content.icon ?? (alertIconImage ? (
+ <>
+ {withExpandableContent(body)}
+ {dismissControl && (
+ {dismissControl}
+ )}
+
+ {content.secondaryBody} }
+ {content.disclosure && {content.disclosure} }
+
+
+ );
+ }
+
+ if (prominence === 'field') {
+ const fieldValue = metrics[0]
+ ? String(formatMetricValue(metrics[0].value, metrics[0].format))
+ : 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 = 'Please try again. If the problem continues, contact support.',
+ contentAriaLabel = 'Contact request details',
+ id,
+}: ProductNudgeContactModalProps) => {
+ const classes = useStyles();
+ const idRef = useRef
+
+
+
+ );
+};
+
+let analysisModalInstance = 0;
+
+const renderFooterAction = (
+ action: ProductNudgeAction | undefined,
+ variant: 'primary' | 'link',
+ style?: React.CSSProperties,
+) => {
+ if (!action) {
+ return null;
+ }
+
+ return action.href ? (
+
+ ) : (
+
+ );
+};
+
+export const ProductNudgeDataModal: FunctionComponent
+
+ 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.
+
+
+
+
+ [ exact, partial, noMatch ])) ] }}
+ height={ECOSYSTEM_CHART_HEIGHT}
+ legendData={legendData}
+ legendOrientation="vertical"
+ legendPosition="right"
+ padding={{ bottom: 45, left: 58, right: 150, top: 12 }}
+ width={Math.max(chartEcosystemData.length * 75 + 250, ecosystemChartWidth)}
+ containerComponent={ 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.tsx b/packages/module/src/ProductNudge/ProductNudgeModalFooter.tsx
new file mode 100644
index 00000000..ca9b4b08
--- /dev/null
+++ b/packages/module/src/ProductNudge/ProductNudgeModalFooter.tsx
@@ -0,0 +1,50 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { Content, ContentVariants, Flex, FlexItem, ModalFooter, Stack } from '@patternfly/react-core';
+
+import { ProductNudgeImage } from './ProductNudge.types';
+import { ProductNudgeBrandLogo } from './ProductNudgeBrandLogo';
+
+export interface ProductNudgeModalFooterProps {
+ actions?: ReactNode;
+ footerText?: ReactNode;
+ partnerLogo?: ProductNudgeImage;
+ partnerLogoDark?: ProductNudgeImage;
+ className?: string;
+ isCentered?: boolean;
+}
+
+/** Shared modal footer for actions, optional supporting copy, and brand logo. */
+export const ProductNudgeModalFooter: FunctionComponent
+
+
+ {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/__snapshots__/ProductNudge.test.tsx.snap b/packages/module/src/ProductNudge/__snapshots__/ProductNudge.test.tsx.snap
new file mode 100644
index 00000000..78801600
--- /dev/null
+++ b/packages/module/src/ProductNudge/__snapshots__/ProductNudge.test.tsx.snap
@@ -0,0 +1,419 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductNudge component renders alert prominence dismissible 1`] = `
+
+
+`;
+
+exports[`ProductNudge component renders alert prominence with link CTA 1`] = `
+
+
+
+
+
+
+
+ + + Info alert: + + Test headline +
+
+
+
+
+ Test body copy.
+
+
+
+
+
+
+`;
+
+exports[`ProductNudge component renders hero prominence 1`] = `
+
+
+
+
+
+`;
+
+exports[`ProductNudge component renders nothing when not eligible 1`] = ``;
+
+exports[`ProductNudge component renders with default CTA color scheme 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+ + Test headline +
+
+
+ + Test body copy. +
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`ProductNudge component renders with metrics 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+ + Test headline +
+
+
+ + Test body copy. +
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/module/src/ProductNudge/__snapshots__/ProductNudgeContactModal.test.tsx.snap b/packages/module/src/ProductNudge/__snapshots__/ProductNudgeContactModal.test.tsx.snap
new file mode 100644
index 00000000..7a7a0895
--- /dev/null
+++ b/packages/module/src/ProductNudge/__snapshots__/ProductNudgeContactModal.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductNudgeContactModal component renders closed (nothing visible) 1`] = ``;
+
+exports[`ProductNudgeContactModal component renders supplied field placeholders and submits ContactFormValues 1`] = `
+
+`;
+
+exports[`ProductNudgeContactModal component renders when open 1`] = `
+
+`;
diff --git a/packages/module/src/ProductNudge/__snapshots__/ProductNudgeDataModal.test.tsx.snap b/packages/module/src/ProductNudge/__snapshots__/ProductNudgeDataModal.test.tsx.snap
new file mode 100644
index 00000000..fffb6bda
--- /dev/null
+++ b/packages/module/src/ProductNudge/__snapshots__/ProductNudgeDataModal.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductNudgeDataModal component renders closed 1`] = ``;
+
+exports[`ProductNudgeDataModal component renders when open 1`] = `
+
+`;
diff --git a/packages/module/src/ProductNudge/__snapshots__/ProductNudgeStack.test.tsx.snap b/packages/module/src/ProductNudge/__snapshots__/ProductNudgeStack.test.tsx.snap
new file mode 100644
index 00000000..6d16714b
--- /dev/null
+++ b/packages/module/src/ProductNudge/__snapshots__/ProductNudgeStack.test.tsx.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductNudgeStack component renders nothing when not eligible 1`] = ``;
+
+exports[`ProductNudgeStack component renders when eligible 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+ + Test headline +
+
+
+ + Test body copy. +
+
+
+
+
+
+
+ + + 42 + + + packages +
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`ProductNudgeStack component renders without logo or CTA link 1`] = `
+
+
+
+`;
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/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
+
+
+
+
+
+
+
+ Headline
+
+
+
+ Body text.
+
+