fansunited-frontend-components 0.0.1-RC3 → 0.0.1-RC5

package/src/components/Variants/Standard/StandardVariant.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Typography, Button as JoyButton, AspectRatio } from "@mui/joy";
+import { hexToRgb, stripHtmlTags, useImageUrl, useFontFamily, useCornerRadius, useColors, isMobile, useSpacingScale, useInternalTheme, } from "@fansunited/common";
+import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
+import Button from "../../Shared/Button";
+import Answers from "../../Shared/Answers/Answers";
+import Stepper from "../../Shared/Stepper";
+import Stopwatch from "../../Shared/Stopwatch";
+import MainCard from "../../Shared/MainCard";
+import { useTranslation } from "react-i18next";
+import PresentedBy from "../../Shared/PresentedBy";
+import CollectLead from "../../Leads/CollectLead";
+import { quizTypes } from "../../../constants/constants";
+import { useEmbedCode } from "../../../hooks/useEmbedCodeContainer";
+import { createStyles } from "./StandardVariant.styles";
+const StandardVariant = (props) => {
+    const [showLead, setShowLead] = React.useState(props.leads?.position === "before" &&
+        props.classicQuiz.authRequirement === "LEAD");
+    const embedContainerRef = useEmbedCode(props.question.embedCode, props.applyFilterScreen);
+    const internalTheme = useInternalTheme();
+    const quizImage = useImageUrl(props.classicQuiz.images);
+    const questionImage = useImageUrl(props.question.images);
+    const { t } = useTranslation();
+    const brandingColors = props.classicQuiz.branding?.colors || null;
+    const brandingLogo = isMobile()
+        ? props.classicQuiz.branding?.images.mobileLogo ||
+            props.classicQuiz.branding?.images.mainLogo ||
+            ""
+        : props.classicQuiz.branding?.images.mainLogo || "";
+    const imagePosition = props.imagePosition || "left";
+    // Styling variables
+    const textColor = brandingColors?.contentColor || useColors().textColor;
+    const secondaryColor = brandingColors?.secondaryColor || useColors().textColor;
+    const fontFamilySecondary = useFontFamily().secondary;
+    const opacity = "60%";
+    const fontFamilyPrimary = useFontFamily().primary;
+    const bgcolor = brandingColors?.backgroundColor || useColors().surfaceVariant;
+    const mdBorderRadius = useCornerRadius().md;
+    const smBorderRadius = useCornerRadius().sm;
+    const primaryColor = brandingColors?.primaryColor || useColors().palette.primary.plainColor;
+    const buttonRadius = useCornerRadius().xl;
+    const spacingScale = useSpacingScale();
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        quizImage,
+        questionImage,
+        spacingScale,
+        borderRadius: useCornerRadius(),
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        textColor,
+        secondaryColor,
+        bgcolor: hexToRgb(bgcolor || ""),
+        mdBorderRadius,
+        smBorderRadius,
+        primaryColor,
+        buttonRadius,
+        opacity,
+        brandingColors,
+        imagePosition,
+        applyFilterScreen: props.applyFilterScreen,
+        darkTextColor: internalTheme.colorSchemes.dark.textColor,
+    });
+    const closeLeadForm = () => {
+        setShowLead(false);
+    };
+    const renderStartButton = () => (_jsx(JoyButton, { variant: "soft", sx: {
+            ...styles.startButton,
+            ...styles.pulseAnimation,
+        }, endDecorator: _jsx(ArrowRightAltIcon, {}), onClick: props.startPlaying, children: _jsx(Typography, { sx: styles.startButtonText, children: t("classicQuiz.buttons.start") }) }));
+    const renderPresentedBy = (textColor) => (_jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: textColor }));
+    const renderStartButtonWithPresentedBy = (textColorOverride) => (_jsxs(Box, { sx: styles.startButtonContainer, children: [renderStartButton(), renderPresentedBy(textColorOverride || textColor)] }));
+    return (_jsxs(MainCard, { brandingBorderColor: brandingColors?.borderColor || null, children: [quizImage ? (_jsx(Box, { sx: styles.mobileHeadlineWithImage, children: _jsxs(Box, { sx: styles.mobileHeadlineContent, children: [_jsxs(Box, { children: [_jsx(Typography, { level: "body-sm", sx: styles.headlineTypographyMobileImage, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "body-lg", sx: styles.titleTypographyMobileImage, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-md", sx: styles.descriptionTypographyMobileImage, children: stripHtmlTags(props.classicQuiz.description) })] })] }), props.applyFilterScreen && (_jsx(Box, { children: renderStartButtonWithPresentedBy(brandingColors?.contentColor ||
+                                internalTheme.colorSchemes.dark.textColor) }))] }) })) : (_jsxs(Box, { sx: styles.mobileHeadlineWithoutImage, children: [_jsxs(Box, { children: [_jsx(Typography, { level: "body-sm", sx: styles.headlineTypography, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "h4", sx: styles.titleTypography, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-md", sx: styles.descriptionTypography, children: stripHtmlTags(props.classicQuiz.description) })] })] }), props.applyFilterScreen && (_jsx(Box, { children: renderStartButtonWithPresentedBy() }))] })), quizImage && imagePosition === "left" && (_jsx(Box, { sx: styles.imageContainerLeft, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) })), _jsxs(Box, { sx: styles.mainContentArea, children: [_jsx(Box, { children: _jsxs(Box, { sx: styles.desktopHeadlineContainer, children: [_jsxs(Box, { children: [_jsx(Typography, { level: "body-sm", sx: styles.headlineTypographyDesktop, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "h4", sx: styles.titleTypographyDesktop, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-md", sx: styles.descriptionTypographyDesktop, children: stripHtmlTags(props.classicQuiz.description) })] })] }), props.applyFilterScreen && (_jsx(Box, { children: renderStartButtonWithPresentedBy() }))] }) }), props.applyFilterScreen ? (_jsx(Box, { sx: styles.hiddenDesktopFilterContainer, children: renderStartButtonWithPresentedBy() })) : (_jsx(_Fragment, { children: showLead ? (_jsx(Box, { sx: styles.leadCollectionContainer, children: _jsx(Box, { sx: styles.leadQuestionContainer, children: _jsx(Box, { sx: styles.leadContentContainer, children: _jsx(CollectLead, { sdk: props.sdk, contentType: "quiz", startGame: closeLeadForm, contentId: props.classicQuiz.id, contentName: props.classicQuiz.title, brandingColors: props.classicQuiz.branding?.colors, brandingUrls: props.classicQuiz.branding?.urls, campaignId: props.leads?.campaignId, campaignName: props.leads?.campaignName, fields: props.leads?.fields, leadTitle: props.classicQuiz.labels?.leadTitle, leadDescription: props.classicQuiz.labels?.leadDescription, leadCta: props.classicQuiz.labels?.leadCta, leadSuccessTitle: props.classicQuiz.labels?.leadSuccessTitle, leadSuccessDescription: props.classicQuiz.labels?.leadSuccessDescription }) }) }) })) : (_jsxs(_Fragment, { children: [quizTypes.includes(props.classicQuiz.type?.toLocaleLowerCase()) && (_jsx(Box, { sx: styles.stopwatchContainer, children: _jsx(Stopwatch, { isRunning: props.isStopwatchRunning, timer: props.stopwatchTime, quizType: props.classicQuiz.type, initialTime: props.classicQuiz.time || 10, brandingPrimaryColor: brandingColors?.primaryColor || null, onTimeUpdate: props.onTimeUpdate }) })), _jsx(Box, { sx: styles.paginationContainer, children: _jsx(Stepper, { classicQuiz: props.classicQuiz, currentQuestion: props.currentQuestion, userParticipation: props.userParticipation, brandingPrimaryColor: brandingColors?.primaryColor }) }), _jsx(Box, { sx: styles.questionArea, children: _jsxs(Box, { sx: styles.questionContainer, children: [_jsxs(Box, { sx: styles.questionContentContainer, children: [props.question.embedCode && (_jsx(AspectRatio, { ratio: "16/9", sx: styles.aspectRatioContainer, children: _jsx(Box, { ref: embedContainerRef }) })), !props.question.embedCode && questionImage && (_jsx(AspectRatio, { ratio: "16/9", sx: styles.questionImageContainer, children: _jsx(Box, { sx: styles.questionImageBox, children: _jsx("img", { src: questionImage, alt: "Question illustration", style: styles.questionImage }) }) })), _jsx(Box, { sx: styles.questionTextContainer, children: _jsx(Typography, { level: "body-lg", sx: styles.questionText, children: props.question.question }) }), _jsx(Answers, { options: props.question.options || [], answerQuestion: props.answerQuestion, selectedOption: props.selectedOption, showAnswer: props.showAnswer, twoByTwo: true, questionImage: questionImage, brandingColors: brandingColors })] }), _jsxs(Box, { sx: brandingLogo
+                                                    ? styles.footerContainer
+                                                    : styles.footerContainerNoLogo, children: [_jsx(Box, { sx: styles.presentedByDesktop, children: renderPresentedBy(textColor) }), _jsx(Button, { showAnswer: props.showAnswer, selectedOption: props.selectedOption, endDecorator: _jsx(ArrowRightAltIcon, {}), label: props.currentQuestion ===
+                                                            props.classicQuiz.questionsCount
+                                                            ? t("classicQuiz.buttons.finish")
+                                                            : t("classicQuiz.buttons.next"), buttonColor: primaryColor, onClick: props.handleNext })] }), _jsx(Box, { sx: styles.presentedByMobile, children: renderPresentedBy(textColor) })] }) })] })) }))] }), quizImage && imagePosition === "right" && (_jsx(Box, { sx: styles.imageContainerRight, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) }))] }));
+};
+export default StandardVariant;

package/src/components/Variants/Standard/StandardVariant.styles.d.ts

@@ -0,0 +1,414 @@
+import { CustomSpacingScale, CustomBorderRadius } from "@fansunited/common";
+import { BrandingColorsModel } from "fansunited-sdk-esm";
+import { CSSProperties } from "react";
+interface StyleProps {
+    quizImage: string | null;
+    questionImage: string | null;
+    spacingScale: CustomSpacingScale;
+    borderRadius: CustomBorderRadius;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    textColor: string;
+    secondaryColor: string;
+    bgcolor: string;
+    mdBorderRadius: string;
+    smBorderRadius: string;
+    primaryColor: string;
+    buttonRadius: string;
+    opacity: string;
+    brandingColors: BrandingColorsModel | null;
+    imagePosition: "left" | "right";
+    applyFilterScreen: boolean;
+    darkTextColor: string;
+}
+export declare const createStyles: (props: StyleProps) => {
+    pulseAnimation: {
+        "@keyframes pulse": {
+            "0%": {
+                transform: string;
+            };
+            "50%": {
+                transform: string;
+            };
+            "100%": {
+                transform: string;
+            };
+        };
+    };
+    mobileHeadlineWithImage: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        backgroundImage: string;
+        backgroundSize: string;
+        backgroundPosition: string;
+        borderTopLeftRadius: string;
+        borderTopRightRadius: string;
+        position: string;
+        minHeight: string;
+        overflow: string;
+        height: string;
+        "&::before": {
+            content: string;
+            position: string;
+            width: string;
+            height: string;
+            background: string;
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+    };
+    mobileHeadlineContent: {
+        zIndex: number;
+        height: string;
+        p: string;
+        gap: string;
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+    };
+    mobileHeadlineWithoutImage: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flex: string;
+        flexDirection: string;
+        justifyContent: string;
+        p: string;
+        gap: string;
+    };
+    headlineTypographyMobileImage: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        textTransform: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    headlineTypography: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    headlineTypographyDesktop: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+    };
+    contentContainer: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    titleTypographyMobileImage: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        letterSpacing: string;
+        color: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    titleTypography: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    titleTypographyDesktop: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+    };
+    descriptionTypographyMobileImage: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        letterSpacing: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    descriptionTypography: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    descriptionTypographyDesktop: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+    };
+    startButtonContainer: {
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+        alignItems: string;
+        gap: string;
+    };
+    startButton: {
+        borderRadius: string;
+        py: string;
+        pr: string;
+        pl: string;
+        bgcolor: string;
+        color: string;
+        transition: string;
+        transform: string;
+        alignSelf: string;
+        "&:hover": {
+            bgcolor: string;
+            transform: string;
+        };
+        "&:active": {
+            color: string;
+            transform: string;
+        };
+        "&:disabled": {
+            bgcolor: string;
+            color: string;
+            opacity: string;
+        };
+        animation: string;
+    };
+    startButtonText: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        color: string;
+        gap: string;
+        display: string;
+        alignItems: string;
+    };
+    imageContainerLeft: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flex: string;
+        borderTopLeftRadius: string;
+        borderBottomLeftRadius: string;
+        overflow: string;
+        height: string;
+        position: string;
+    };
+    imageContainerRight: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flex: string;
+        borderTopRightRadius: string;
+        borderBottomRightRadius: string;
+        overflow: string;
+        height: string;
+        position: string;
+    };
+    quizImage: {
+        width: string;
+        height: string;
+        objectFit: CSSProperties["objectFit"];
+    };
+    mainContentArea: {
+        flex: {
+            xs: string;
+            md: string;
+        };
+        display: {
+            md: string;
+            xs: string;
+        };
+        flexDirection: string;
+        p: string;
+        gap: {
+            xs: string;
+            md: string;
+        };
+    };
+    desktopHeadlineContainer: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        textAlign: string;
+    };
+    hiddenDesktopFilterContainer: {
+        display: {
+            xs: string;
+            md: string;
+        };
+    };
+    stopwatchContainer: {
+        display: string;
+        justifyContent: string;
+    };
+    paginationContainer: {
+        display: string;
+        flexDirection: string;
+        alignItems: string;
+        gap: string;
+    };
+    leadCollectionContainer: {
+        display: string;
+        flexDirection: string;
+        p: string;
+    };
+    leadQuestionContainer: {
+        display: string;
+        flexDirection: string;
+        gap: {
+            xs: string;
+            md: string;
+        };
+    };
+    leadContentContainer: {
+        borderRadius: string;
+        px: string;
+        pt: string;
+        pb: string;
+        gap: string;
+        bgcolor: string;
+        display: string;
+        flexDirection: string;
+        backdropFilter: string;
+    };
+    questionArea: {
+        display: string;
+        flexDirection: string;
+        p: string;
+    };
+    questionContainer: {
+        display: string;
+        flexDirection: string;
+        gap: {
+            xs: string;
+            md: string;
+        };
+    };
+    questionContentContainer: {
+        borderRadius: string;
+        px: string;
+        pt: string;
+        pb: string;
+        gap: string;
+        bgcolor: string;
+        display: string;
+        flexDirection: string;
+        backdropFilter: string;
+    };
+    aspectRatioContainer: {
+        borderRadius: string;
+    };
+    questionImageContainer: {
+        overflow: string;
+        borderRadius: string;
+    };
+    questionImageBox: {
+        borderRadius: string;
+        overflow: string;
+        height: string;
+    };
+    questionImage: {
+        width: string;
+        height: string;
+        objectFit: CSSProperties["objectFit"];
+    };
+    questionTextContainer: {
+        gap: string;
+        display: string;
+        justifyContent: string;
+    };
+    questionText: {
+        fontFamily: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontWeight: number;
+        fontSize: string;
+        textAlign: string;
+        color: string;
+    };
+    footerContainer: {
+        display: string;
+        flexDirection: {
+            xs: string;
+            md: string;
+        };
+        justifyContent: string;
+        alignItems: string;
+        gap: string;
+    };
+    footerContainerNoLogo: {
+        display: string;
+        flexDirection: {
+            xs: string;
+            md: string;
+        };
+        justifyContent: string;
+        alignItems: string;
+        gap: string;
+    };
+    presentedByDesktop: {
+        display: {
+            xs: string;
+            md: string;
+        };
+    };
+    presentedByMobile: {
+        display: {
+            xs: string;
+            md: string;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=StandardVariant.styles.d.ts.map

package/src/components/Variants/Standard/StandardVariant.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardVariant.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Variants/Standard/StandardVariant.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,UAAU;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,kBAAkB,CAAC;IACjC,YAAY,EAAE,kBAAkB,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,UAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAsPpB,aAAa,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2H1B,aAAa,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDlD,CAAC"}