@kubit-ui-web/react-components/dist/esm/components/confirmationMessage/confirmationMessageStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Text } from '../../components/text/text';
import { buildPropsDecorativeElement } from '../../utils/buildPropsDecorativeElement/buildPropsDecorativeElement';
import { DecorativeElement } from '../decorativeElement/decorativeElementStandAlone';
import { Footer } from '../footer/footer';
import { ContentDirectionType } from '../footer/types/direction';
import { TextComponentType } from '../text/types/component';
import { ConfirmationMessageStyled, ContentContainerStyled, DescriptionTextStyled, FooterStyled, FooterWrapperStyled, TitleAndDescriptionStyled, TitleTextStyled, } from './confirmationMessage.styled';
import { ALIGN_TYPE, } from './types/confirmationMessage';
const alignValue = {
    center: 'center',
    right: 'flex-end',
    left: 'flex-start',
};
const ConfirmationMessageStandAloneComponent = ({ align = ALIGN_TYPE.CENTER, dataTestId = 'confirmation-message', ...props }, ref) => {
    const footerVariant = props.stylesState?.footer?.variant || props.footer?.variant;
    const buildDescription = () => {
        const isTextContent = typeof props.description.content === 'string';
        return (_jsx(_Fragment, { children: isTextContent ? (_jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.stylesState?.description, ...props.description, children: props.description.content })) : (props.description.content) }));
    };
    return (_jsxs(ConfirmationMessageStyled, { ref: ref, "data-testid": dataTestId, styles: props.stylesState, children: [_jsxs(TitleAndDescriptionStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-title-and-description-container`, styles: props.stylesState, children: [props.title && (_jsxs(TitleTextStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-title-container`, styles: props.stylesState, children: [props.decorativeElement?.element && (_jsx(DecorativeElement, { ...props.decorativeElement, element: buildPropsDecorativeElement(props.decorativeElement?.element, props.stylesState) })), _jsx(Text, { align: align, component: props.title?.component || TextComponentType.H2, customTypography: props.stylesState?.title, ...props.title, children: props.title.content })] })), _jsxs(DescriptionTextStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-description-container`, styles: props.stylesState, children: [buildDescription(), _jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.stylesState?.secondaryDescription, ...props.secondaryDescription, children: props.secondaryDescription?.content })] })] }), props.content && (_jsx(ContentContainerStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-content`, styles: props.stylesState, children: props.content })), props.footer?.content && footerVariant && (_jsx(FooterWrapperStyled, { align: alignValue[align.toLocaleLowerCase()], children: _jsx(FooterStyled, { as: Footer, contentDirection: alignValue[align.toLocaleLowerCase()] === ALIGN_TYPE.CENTER
                        ? ContentDirectionType.VERTICAL
                        : ContentDirectionType.HORIZONTAL, customFooterStyles: props.stylesState, dataTestId: `${dataTestId}-navbar`, forceVertical: alignValue[align.toLocaleLowerCase()] === ALIGN_TYPE.CENTER, variant: footerVariant, ...props.footer, children: props.footer.content }) }))] }));
};
export const ConfirmationMessageStandAlone = React.forwardRef(ConfirmationMessageStandAloneComponent);
//# sourceMappingURL=confirmationMessageStandAlone.js.map