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

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfirmationMessageStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const buildPropsDecorativeElement_1 = require("../../utils/buildPropsDecorativeElement/buildPropsDecorativeElement");
const decorativeElementStandAlone_1 = require("../decorativeElement/decorativeElementStandAlone");
const footer_1 = require("../footer/footer");
const direction_1 = require("../footer/types/direction");
const component_1 = require("../text/types/component");
const confirmationMessage_styled_1 = require("./confirmationMessage.styled");
const confirmationMessage_1 = require("./types/confirmationMessage");
const alignValue = {
    center: 'center',
    right: 'flex-end',
    left: 'flex-start',
};
const ConfirmationMessageStandAloneComponent = ({ align = confirmationMessage_1.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isTextContent ? ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.stylesState?.description, ...props.description, children: props.description.content })) : (props.description.content) }));
    };
    return ((0, jsx_runtime_1.jsxs)(confirmationMessage_styled_1.ConfirmationMessageStyled, { ref: ref, "data-testid": dataTestId, styles: props.stylesState, children: [(0, jsx_runtime_1.jsxs)(confirmationMessage_styled_1.TitleAndDescriptionStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-title-and-description-container`, styles: props.stylesState, children: [props.title && ((0, jsx_runtime_1.jsxs)(confirmationMessage_styled_1.TitleTextStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-title-container`, styles: props.stylesState, children: [props.decorativeElement?.element && ((0, jsx_runtime_1.jsx)(decorativeElementStandAlone_1.DecorativeElement, { ...props.decorativeElement, element: (0, buildPropsDecorativeElement_1.buildPropsDecorativeElement)(props.decorativeElement?.element, props.stylesState) })), (0, jsx_runtime_1.jsx)(text_1.Text, { align: align, component: props.title?.component || component_1.TextComponentType.H2, customTypography: props.stylesState?.title, ...props.title, children: props.title.content })] })), (0, jsx_runtime_1.jsxs)(confirmationMessage_styled_1.DescriptionTextStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-description-container`, styles: props.stylesState, children: [buildDescription(), (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.stylesState?.secondaryDescription, ...props.secondaryDescription, children: props.secondaryDescription?.content })] })] }), props.content && ((0, jsx_runtime_1.jsx)(confirmationMessage_styled_1.ContentContainerStyled, { align: alignValue[align.toLocaleLowerCase()], "data-testid": `${dataTestId}-content`, styles: props.stylesState, children: props.content })), props.footer?.content && footerVariant && ((0, jsx_runtime_1.jsx)(confirmationMessage_styled_1.FooterWrapperStyled, { align: alignValue[align.toLocaleLowerCase()], children: (0, jsx_runtime_1.jsx)(confirmationMessage_styled_1.FooterStyled, { as: footer_1.Footer, contentDirection: alignValue[align.toLocaleLowerCase()] === confirmationMessage_1.ALIGN_TYPE.CENTER
                        ? direction_1.ContentDirectionType.VERTICAL
                        : direction_1.ContentDirectionType.HORIZONTAL, customFooterStyles: props.stylesState, dataTestId: `${dataTestId}-navbar`, forceVertical: alignValue[align.toLocaleLowerCase()] === confirmationMessage_1.ALIGN_TYPE.CENTER, variant: footerVariant, ...props.footer, children: props.footer.content }) }))] }));
};
exports.ConfirmationMessageStandAlone = react_1.default.forwardRef(ConfirmationMessageStandAloneComponent);
//# sourceMappingURL=confirmationMessageStandAlone.js.map