feat(funnels): CTA micro-liners to fact screen

packages/shared/src/components/Badge.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from './typography/Typography';
+
+type BadgeProps = {
+  icon?: ReactNode;
+  label: string;
+  variant: 'primary' | 'onion';
+};
+
+const variantToClassName: Record<BadgeProps['variant'], string> = {
+  primary: 'border-border-subtlest-secondary text-surface-primary',
+  onion: 'border-overlay-secondary-onion text-accent-onion-subtler',
+};
+
+export const Badge = ({ label, icon, variant }: BadgeProps) => {
+  return (
+    <div
+      className={classNames(
+        variantToClassName[variant],
+        'flex items-center gap-1 rounded-20 border px-3 py-2',
+      )}
+    >
+      {icon}
+      <Typography type={TypographyType.Body} bold tag={TypographyTag.P}>
+        {label}
+      </Typography>
+    </div>
+  );
+};

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFact.spec.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { FunnelFact } from '.';
 import { FunnelStepType } from '../../types/funnel';
 import type { FunnelStepFact } from '../../types/funnel';
+import { StepHeadlineAlign } from '../../shared';
 
 const mockOnTransition = jest.fn();
 
@@ -13,7 +14,7 @@ const defaultProps: FunnelStepFact = {
   parameters: {
     headline: 'Test Headline',
     explainer: 'Test explanation text',
-    align: 'center',
+    align: StepHeadlineAlign.Center,
     cta: 'Continue',
   },
   onTransition: mockOnTransition,
@@ -36,6 +37,21 @@ describe('FunnelFact', () => {
     ).toBeInTheDocument();
   });
 
+  it('should render badge when provided', async () => {
+    renderComponent({
+      parameters: {
+        ...defaultProps.parameters,
+        badge: {
+          cta: 'Badge CTA',
+          variant: 'primary',
+          placement: 'top',
+        },
+      },
+    });
+
+    expect(await screen.findByText('Badge CTA')).toBeInTheDocument();
+  });
+
   it('should call onTransition when button is clicked', async () => {
     renderComponent();
     const button = await screen.findByText('Continue');
@@ -85,7 +101,7 @@ describe('FunnelFact', () => {
     renderComponent({
       parameters: {
         ...defaultProps.parameters,
-        align: 'left',
+        align: StepHeadlineAlign.Left,
       },
     });
 

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFactCentered.tsx

@@ -1,16 +1,33 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { ReactElement } from 'react';
 import Head from 'next/head';
 import { StepHeadline } from '../../shared';
 import type { FunnelStepFact } from '../../types/funnel';
 import { FunnelStepTransitionType } from '../../types/funnel';
 import { FunnelStepCtaWrapper } from '../../shared/FunnelStepCtaWrapper';
 import { LazyImage } from '../../../../components/LazyImage';
+import { ReputationLightningIcon } from '../../../../components/icons';
+import { Badge } from '../../../../components/Badge';
 
 export const FunnelFactCentered = ({
   parameters,
   onTransition,
 }: FunnelStepFact): ReactElement => {
+  const { badge } = parameters;
+
+  const badgeComponent = useMemo(() => {
+    if (!badge?.cta) {
+      return null;
+    }
+    return (
+      <Badge
+        label={badge.cta}
+        icon={<ReputationLightningIcon className="h-6 w-6" secondary />}
+        variant={badge.variant}
+      />
+    );
+  }, [badge?.cta, badge?.variant]);
+
   return (
     <FunnelStepCtaWrapper
       containerClassName="flex max-h-screen"
@@ -40,12 +57,16 @@ export const FunnelFactCentered = ({
             />
           </>
         )}
-        <StepHeadline
-          className="!gap-6"
-          heading={parameters?.headline}
-          description={parameters?.explainer}
-          align={parameters?.align}
-        />
+        <div className="flex flex-col items-center gap-4">
+          {badge?.placement === 'top' && badgeComponent}
+          <StepHeadline
+            className="!gap-6"
+            heading={parameters?.headline}
+            description={parameters?.explainer}
+            align={parameters?.align}
+          />
+          {badge?.placement === 'bottom' && badgeComponent}
+        </div>
       </div>
     </FunnelStepCtaWrapper>
   );

packages/shared/src/features/onboarding/steps/FunnelFact/FunnelFactDefault.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { ReactElement } from 'react';
 import classNames from 'classnames';
 import Head from 'next/head';
@@ -7,6 +7,8 @@ import type { FunnelStepFact } from '../../types/funnel';
 import { FunnelStepTransitionType } from '../../types/funnel';
 import { FunnelStepCtaWrapper } from '../../shared/FunnelStepCtaWrapper';
 import { LazyImage } from '../../../../components/LazyImage';
+import { Badge } from '../../../../components/Badge';
+import { ReputationLightningIcon } from '../../../../components/icons';
 
 export const FunnelFactDefault = ({
   parameters,
@@ -15,6 +17,21 @@ export const FunnelFactDefault = ({
   const isLayoutReversed =
     parameters.layout === 'reversed' || parameters.reverse;
 
+  const { badge } = parameters;
+
+  const badgeComponent = useMemo(() => {
+    if (!badge?.cta) {
+      return null;
+    }
+    return (
+      <Badge
+        label={badge.cta}
+        icon={<ReputationLightningIcon className="h-6 w-6" secondary />}
+        variant={badge.variant}
+      />
+    );
+  }, [badge?.cta, badge?.variant]);
+
   return (
     <FunnelStepCtaWrapper
       containerClassName="flex"
@@ -34,11 +51,15 @@ export const FunnelFactDefault = ({
             : 'flex-col justify-between',
         )}
       >
-        <StepHeadline
-          heading={parameters?.headline}
-          description={parameters?.explainer}
-          align={parameters?.align}
-        />
+        <div className="flex flex-col items-center gap-4">
+          {badge?.placement === 'top' && badgeComponent}
+          <StepHeadline
+            heading={parameters?.headline}
+            description={parameters?.explainer}
+            align={parameters?.align}
+          />
+          {badge?.placement === 'bottom' && badgeComponent}
+        </div>
         {parameters?.visualUrl && (
           <>
             <Head>

packages/shared/src/features/onboarding/types/funnel.ts

@@ -105,6 +105,11 @@ export interface FunnelStepFactParameters {
   headline: string;
   cta?: string;
   reverse?: boolean;
+  badge?: {
+    placement?: 'bottom' | 'top';
+    cta?: string;
+    variant?: 'primary' | 'onion';
+  };
   explainer: string;
   align: StepHeadlineAlign;
   visualUrl?: string;