@payfit/unity-components
Version:
44 lines (43 loc) • 2.31 kB
TypeScript
import { ComponentPropsWithoutRef } from 'react';
import { ValidTextElements } from '../../../../../core/components/text/Text.js';
type HeadingElement = Extract<ValidTextElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
/** Props for a question title in an `AIStructuredInputStep`. */
export type AIStructuredInputStepTitleProps = Omit<ComponentPropsWithoutRef<'h2'>, 'className'> & {
/** Semantic heading level used for the question prompt. Defaults to `h2`. */
asElement?: HeadingElement;
/** Adds styles to the title. */
className?: string;
};
/**
* Renders a semantic question heading and places sequence navigation beside it.
*
* Use this as the title of each `AIStructuredInputStep`. It renders a
* configurable heading with Unity's body-strong text style. Previous/next controls and the live
* question count appear alongside it when the sequence has multiple steps.
* After navigation, the new heading receives programmatic focus without
* becoming an extra Tab stop.
* @param props - Heading content and standard heading attributes.
* @param props.asElement - Semantic heading level; defaults to `h2`.
* @param props.className - Adds styles to the heading element.
* @remarks
* - The heading receives programmatic focus after sequence navigation.
* - The heading level can be adjusted to fit the surrounding page hierarchy.
* @example
* ```tsx
* <AIStructuredInputStep id="effective-date">
* <AIStructuredInputStepTitle>
* When should it take effect?
* </AIStructuredInputStepTitle>
* <DateCalendar aria-label="Effective date" />
* </AIStructuredInputStep>
* ```
* @see {@link AIStructuredInputStepTitleProps} for all available props.
* @see {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=25380-13051 Figma design}
*/
export declare const AIStructuredInputStepTitle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "className"> & {
/** Semantic heading level used for the question prompt. Defaults to `h2`. */
asElement?: HeadingElement;
/** Adds styles to the title. */
className?: string;
} & import('react').RefAttributes<HTMLHeadingElement>>;
export {};