@useloops/design-system/dist/systems/Platform/QuestionBlock/QuestionBlock.d.ts

The official React based Loops design system

import { FunctionComponent, ReactNode } from 'react';
import { TypographyProps } from '../../WebCore/Typography/Typography.js';
import { QuestionLabelProps } from '../QuestionBar/QuestionBar.js';
import { QuestionType } from '../utils/mapQuestionTypeToLabel.js';

type QuestionBlockVariation = 'default' | 'simple' | 'complex';
type QuestionBlockCommonProps = {
    preQuestionText?: string;
    questionText: string;
    questionNumber?: number;
    questionType?: QuestionType;
    supportText?: string;
    labels?: QuestionLabelProps[];
    loading?: boolean;
    slotProps?: {
        supportText?: Partial<TypographyProps>;
        questionText?: Partial<TypographyProps>;
    };
    slots?: {
        supportText?: ReactNode;
    };
};
type QuestionBlockBaseProps = QuestionBlockCommonProps & {
    slots?: {
        answerPreview?: never;
    };
    variation?: Exclude<QuestionBlockVariation, 'complex'>;
};
type QuestionBlockComplexProps = QuestionBlockCommonProps & {
    slots?: {
        answerPreview?: ReactNode;
    };
    variation: 'complex';
};
type QuestionBlockProps = QuestionBlockBaseProps | QuestionBlockComplexProps;
declare const QuestionBlock: FunctionComponent<QuestionBlockProps>;

export { QuestionBlock as default };
export type { QuestionBlockBaseProps, QuestionBlockComplexProps, QuestionBlockProps, QuestionBlockVariation };