feat(funnels): Informative Screen and StepHeadline component

packages/shared/src/features/onboarding/shared/FunnelStepCtaWrapper.tsx

@@ -1,22 +1,25 @@
 import type { ReactElement } from 'react';
 import React from 'react';
+import classNames from 'classnames';
 import type { ButtonProps } from '../../../components/buttons/Button';
 import { Button, ButtonVariant } from '../../../components/buttons/Button';
 
 export type FunnelStepCtaWrapperProps = ButtonProps<'button'> & {
   cta?: {
     label?: string;
   };
+  containerClassName?: string;
 };
 
 export function FunnelStepCtaWrapper({
   children,
   cta,
+  containerClassName,
   ...props
 }: FunnelStepCtaWrapperProps): ReactElement {
   return (
     <div className="relative flex min-h-dvh flex-col gap-4">
-      <div className="flex-1">{children}</div>
+      <div className={classNames('flex-1', containerClassName)}>{children}</div>
       <div className="sticky bottom-2 m-4">
         <Button
           type="button"

packages/shared/src/features/onboarding/shared/StepHeadline.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StepHeadline, { StepHeadlineAlign } from './StepHeadline';
+import { TypographyType } from '../../../components/typography/Typography';
+
+const defaultProps = {
+  heading: 'Test Headline',
+  description: 'Test description text',
+};
+
+const renderComponent = (props = {}) => {
+  return render(<StepHeadline {...defaultProps} {...props} />);
+};
+
+describe('StepHeadline', () => {
+  it('should render headline and description text', () => {
+    renderComponent();
+    expect(screen.getByText('Test Headline')).toBeInTheDocument();
+    expect(screen.getByText('Test description text')).toBeInTheDocument();
+  });
+
+  it('should have text-center class when align is center', () => {
+    renderComponent({ align: StepHeadlineAlign.Center });
+    const container = screen.getByTestId('step-headline-container');
+    expect(container).toHaveClass('text-center');
+  });
+
+  it('should have text-left class when align is left', () => {
+    renderComponent({ align: StepHeadlineAlign.Left });
+    const container = screen.getByTestId('step-headline-container');
+    expect(container).toHaveClass('text-left');
+  });
+
+  it('should have text-right class when align is right', () => {
+    renderComponent({ align: StepHeadlineAlign.Right });
+    const container = screen.getByTestId('step-headline-container');
+    expect(container).toHaveClass('text-right');
+  });
+
+  it('should apply custom props to description text', () => {
+    renderComponent({
+      description: 'Test description text',
+      descriptionProps: { type: TypographyType.Subhead },
+    });
+    const description = screen.getByTestId('step-headline-description');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveClass('typo-subhead');
+  });
+
+  it('should not render description when not provided', () => {
+    renderComponent({ description: undefined });
+    expect(
+      screen.queryByTestId('step-headline-description'),
+    ).not.toBeInTheDocument();
+  });
+});

packages/shared/src/features/onboarding/shared/StepHeadline.tsx

@@ -0,0 +1,61 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyType,
+  TypographyTag,
+  TypographyColor,
+} from '../../../components/typography/Typography';
+import type { TypographyProps } from '../../../components/typography/Typography';
+
+export enum StepHeadlineAlign {
+  Left = 'left',
+  Center = 'center',
+  Right = 'right',
+}
+
+export type StepHeadlineProps = {
+  align?: StepHeadlineAlign;
+  description?: string;
+  descriptionProps?: TypographyProps<TypographyTag.P>;
+  heading: string;
+};
+
+const StepHeadline = ({
+  align = StepHeadlineAlign.Center,
+  description,
+  descriptionProps,
+  heading,
+}: StepHeadlineProps): ReactElement => {
+  return (
+    <div
+      data-testid="step-headline-container"
+      className={classNames('flex flex-col gap-2', {
+        'text-left': align === StepHeadlineAlign.Left,
+        'text-center': align === StepHeadlineAlign.Center,
+        'text-right': align === StepHeadlineAlign.Right,
+      })}
+    >
+      <Typography
+        bold
+        color={TypographyColor.Primary}
+        tag={TypographyTag.H2}
+        type={TypographyType.Title1}
+      >
+        {heading}
+      </Typography>
+      {!!description?.length && (
+        <Typography
+          data-testid="step-headline-description"
+          color={TypographyColor.Primary}
+          type={TypographyType.Body}
+          {...descriptionProps}
+        >
+          {description}
+        </Typography>
+      )}
+    </div>
+  );
+};
+export default StepHeadline;

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import FunnelInformative from './FunnelInformative';
+import { FunnelStepType } from '../types/funnel';
+import type { FunnelInformativeProps } from './FunnelInformative';
+
+const mockOnTransition = jest.fn();
+
+const defaultProps: FunnelInformativeProps = {
+  id: 'test-id',
+  type: FunnelStepType.Fact,
+  transitions: [],
+  parameters: {
+    headline: 'Test Headline',
+    explainer: 'Test explanation text',
+    align: 'center',
+    cta: 'Continue',
+  },
+  onTransition: mockOnTransition,
+};
+
+const renderComponent = (props = {}) => {
+  return render(<FunnelInformative {...defaultProps} {...props} />);
+};
+
+describe('FunnelInformative', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render headline and explainer text', async () => {
+    renderComponent();
+    expect(await screen.findByText('Test Headline')).toBeInTheDocument();
+    expect(
+      await screen.findByText('Test explanation text'),
+    ).toBeInTheDocument();
+  });
+
+  it('should call onTransition when button is clicked', async () => {
+    renderComponent();
+    const button = await screen.findByText('Continue');
+    fireEvent.click(button);
+    expect(mockOnTransition).toHaveBeenCalledTimes(1);
+  });
+
+  it('should use "Next" as default CTA text when not provided', async () => {
+    renderComponent({
+      parameters: {
+        ...defaultProps.parameters,
+        cta: undefined,
+      },
+    });
+    expect(await screen.findByText('Next')).toBeInTheDocument();
+  });
+
+  it('should render with reverse layout when specified', async () => {
+    renderComponent({
+      parameters: {
+        ...defaultProps.parameters,
+        reverse: 'true',
+      },
+    });
+
+    const content = screen.getByTestId('informative-content');
+    expect(content).toHaveClass('flex-col-reverse');
+  });
+
+  it('should render an image when visualUrl is provided', async () => {
+    const visualUrl = 'https://example.com/image.png';
+    renderComponent({
+      parameters: {
+        ...defaultProps.parameters,
+        visualUrl,
+      },
+    });
+
+    const image = screen.getByAltText(
+      'Supportive illustration for the information',
+    );
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', visualUrl);
+  });
+
+  it('should pass left alignment to StepHeadline when specified', async () => {
+    renderComponent({
+      parameters: {
+        ...defaultProps.parameters,
+        align: 'left',
+      },
+    });
+
+    const headlineContainer = screen.getByTestId('step-headline-container');
+    expect(headlineContainer).toHaveClass('text-left');
+    expect(headlineContainer).not.toHaveClass('text-center');
+  });
+});

packages/shared/src/features/onboarding/steps/FunnelInformative.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import type { ReactElement } from 'react';
+import classNames from 'classnames';
+import type { StepHeadlineAlign } from '../shared/StepHeadline';
+import StepHeadline from '../shared/StepHeadline';
+import type { FunnelStepFact } from '../types/funnel';
+import { FunnelStepTransitionType } from '../types/funnel';
+import { FunnelStepCtaWrapper } from '../shared/FunnelStepCtaWrapper';
+import {
+  FunnelStepBackground,
+  FunnelBackgroundVariant,
+} from '../shared/FunnelStepBackground';
+import { LazyImage } from '../../../components/LazyImage';
+
+const FunnelInformative = ({
+  parameters,
+  onTransition,
+}: FunnelStepFact): ReactElement => {
+  const bgVariant = parameters?.reverse
+    ? FunnelBackgroundVariant.Top
+    : FunnelBackgroundVariant.Bottom;
+  return (
+    <FunnelStepBackground variant={bgVariant}>
+      <FunnelStepCtaWrapper
+        containerClassName="flex"
+        onClick={() =>
+          onTransition({
+            type: FunnelStepTransitionType.Complete,
+          })
+        }
+        cta={{ label: parameters?.cta ?? 'Next' }}
+      >
+        <div
+          data-testid="informative-content"
+          className={classNames(
+            'flex flex-1 items-center gap-12 px-4 pt-6',
+            parameters?.reverse
+              ? 'flex-col-reverse justify-end'
+              : 'flex-col justify-between',
+          )}
+        >
+          <StepHeadline
+            heading={parameters?.headline}
+            description={parameters?.explainer}
+            align={parameters?.align as StepHeadlineAlign}
+          />
+          {parameters?.visualUrl && (
+            <LazyImage
+              eager
+              imgSrc={parameters?.visualUrl}
+              className="h-auto w-full object-cover"
+              ratio="64%"
+              imgAlt="Supportive illustration for the information"
+            />
+          )}
+        </div>
+      </FunnelStepCtaWrapper>
+    </FunnelStepBackground>
+  );
+};
+
+export default FunnelInformative;

packages/shared/src/features/onboarding/steps/FunnelQuiz.tsx

@@ -9,6 +9,9 @@ import { FormInputRating } from '../../common/components/FormInputRating';
 import { FormInputCheckboxGroup } from '../../common/components/FormInputCheckboxGroup';
 import ConditionalWrapper from '../../../components/ConditionalWrapper';
 import { FunnelStepCtaWrapper } from '../shared/FunnelStepCtaWrapper';
+import { FunnelStepBackground } from '../shared/FunnelStepBackground';
+import StepHeadline from '../shared/StepHeadline';
+import { Image } from '../../../components/image/Image';
 
 const quizComponentsMap = {
   [FunnelStepQuizQuestionType.Rating]: FormInputRating,
@@ -26,6 +29,7 @@ const checkIfSingleChoice = (type: FunnelStepQuizQuestionType): boolean => {
 export const FunnelQuiz = ({
   id,
   question,
+  explainer,
   onTransition,
 }: FunnelStepQuiz): ReactElement => {
   const { type, text, options, imageUrl } = question;
@@ -68,28 +72,33 @@ export const FunnelQuiz = ({
   }, [isSingleChoice, stepValue, onTransition]);
 
   return (
-    <ConditionalWrapper
-      condition={!isSingleChoice}
-      wrapper={(component) => (
-        <FunnelStepCtaWrapper onClick={onCtaClick}>
-          {component}
-        </FunnelStepCtaWrapper>
-      )}
-    >
-      {/* todo: MI-854 add Step Headline component once ready */}
-      <div className="flex flex-col gap-4">
-        <h2>{text}</h2>
-        {imageUrl && (
-          <img
-            alt="Question additional context"
-            aria-hidden
-            className="max-w-lg object-contain object-center"
-            role="presentation"
-            src={imageUrl}
-          />
+    <FunnelStepBackground>
+      <ConditionalWrapper
+        condition={!isSingleChoice}
+        wrapper={(component) => (
+          <FunnelStepCtaWrapper onClick={onCtaClick}>
+            {component}
+          </FunnelStepCtaWrapper>
         )}
-        <Component name={id} options={inputOptions} onValueChange={onChange} />
-      </div>
-    </ConditionalWrapper>
+      >
+        <div className="flex flex-col gap-4 px-4 py-6">
+          <StepHeadline heading={text} description={explainer} />
+          {imageUrl && (
+            <Image
+              alt="Question additional context"
+              aria-hidden
+              className="mx-auto max-w-lg object-contain object-center"
+              role="presentation"
+              src={imageUrl}
+            />
+          )}
+          <Component
+            name={id}
+            options={inputOptions}
+            onValueChange={onChange}
+          />
+        </div>
+      </ConditionalWrapper>
+    </FunnelStepBackground>
   );
 };

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

@@ -46,6 +46,7 @@ export interface FunnelStepLandingPage extends FunnelStepCommon {
 
 export interface FunnelStepFact extends FunnelStepCommon {
   type: FunnelStepType.Fact;
+  onTransition: FunnelStepTransitionCallback<void>;
 }
 
 export enum FunnelStepQuizQuestionType {