fansunited-frontend-components 0.0.1-RC5 → 0.0.1-RC6

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

@@ -1,82 +0,0 @@
-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.js

@@ -1,373 +0,0 @@
-export const createStyles = (props) => ({
-    // Pulse animation for buttons
-    pulseAnimation: {
-        "@keyframes pulse": {
-            "0%": { transform: "scale(1)" },
-            "50%": { transform: "scale(1.05)" },
-            "100%": { transform: "scale(1)" },
-        },
-    },
-    // Mobile headline with image background
-    mobileHeadlineWithImage: {
-        display: { xs: "flex", md: "none" },
-        flexDirection: "column",
-        justifyContent: "space-between",
-        gap: "10px",
-        backgroundImage: `url(${props.quizImage})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        borderTopLeftRadius: "5px",
-        borderTopRightRadius: "5px",
-        position: "relative",
-        minHeight: "210px",
-        overflow: "hidden",
-        height: "auto",
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            background: "linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%)",
-            borderTopLeftRadius: "5px",
-            borderTopRightRadius: "5px",
-        },
-    },
-    // Mobile headline content
-    mobileHeadlineContent: {
-        zIndex: 1,
-        height: "100%",
-        p: props.spacingScale.xl,
-        gap: props.spacingScale["2xl"],
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-    },
-    // Mobile headline without image
-    mobileHeadlineWithoutImage: {
-        display: { xs: "flex", md: "none" },
-        flex: "0.5",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        p: props.spacingScale.lg,
-        gap: props.spacingScale["2xl"],
-    },
-    // Headline typography (mobile with image)
-    headlineTypographyMobileImage: {
-        fontWeight: 500,
-        lineHeight: "166%",
-        letterSpacing: "1px",
-        fontSize: "0.75rem",
-        color: props.brandingColors?.secondaryColor || props.darkTextColor,
-        opacity: "70%",
-        textTransform: "uppercase",
-        fontFamily: props.fontFamilySecondary,
-        textAlign: "center",
-    },
-    // Headline typography (mobile without image & desktop)
-    headlineTypography: {
-        fontWeight: 500,
-        lineHeight: "166%",
-        letterSpacing: "1px",
-        textTransform: "uppercase",
-        fontSize: "0.75rem",
-        color: props.secondaryColor,
-        opacity: props.opacity,
-        fontFamily: props.fontFamilySecondary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Headline typography (desktop centered)
-    headlineTypographyDesktop: {
-        fontWeight: 500,
-        lineHeight: "166%",
-        letterSpacing: "1px",
-        textTransform: "uppercase",
-        fontSize: "0.75rem",
-        color: props.secondaryColor,
-        opacity: props.opacity,
-        fontFamily: props.fontFamilySecondary,
-    },
-    // Content container
-    contentContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: props.spacingScale["3xs"],
-    },
-    // Title typography (mobile with image)
-    titleTypographyMobileImage: {
-        fontWeight: 700,
-        lineHeight: "133%",
-        fontSize: "1.5rem",
-        letterSpacing: "0.15px",
-        color: props.brandingColors?.contentColor || props.darkTextColor,
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: "center",
-    },
-    // Title typography (mobile without image & desktop responsive)
-    titleTypography: {
-        fontWeight: 700,
-        lineHeight: "133%",
-        letterSpacing: "0px",
-        fontSize: "1.5rem",
-        color: props.textColor,
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Title typography (desktop centered)
-    titleTypographyDesktop: {
-        fontWeight: 700,
-        lineHeight: "133%",
-        letterSpacing: "0px",
-        fontSize: "1.5rem",
-        color: props.textColor,
-        fontFamily: props.fontFamilyPrimary,
-    },
-    // Description typography (mobile with image)
-    descriptionTypographyMobileImage: {
-        fontWeight: 500,
-        lineHeight: "140%",
-        fontSize: "1.25rem",
-        letterSpacing: "0.15px",
-        color: props.brandingColors?.secondaryColor || props.darkTextColor,
-        opacity: "70%",
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: "center",
-    },
-    // Description typography (mobile without image & desktop responsive)
-    descriptionTypography: {
-        fontWeight: 500,
-        lineHeight: "140%",
-        letterSpacing: "0.15px",
-        fontSize: "1.25rem",
-        color: props.secondaryColor,
-        opacity: props.opacity,
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Description typography (desktop centered)
-    descriptionTypographyDesktop: {
-        fontWeight: 500,
-        lineHeight: "140%",
-        letterSpacing: "0.15px",
-        fontSize: "1.25rem",
-        color: props.secondaryColor,
-        opacity: props.opacity,
-        fontFamily: props.fontFamilyPrimary,
-    },
-    // Start button container
-    startButtonContainer: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: props.spacingScale["2xl"],
-    },
-    // Start button
-    startButton: {
-        borderRadius: props.buttonRadius,
-        py: "10px",
-        pr: "12px",
-        pl: "16px",
-        bgcolor: props.primaryColor,
-        color: "#FFFFFF",
-        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
-        transform: "scale(1)",
-        alignSelf: "center",
-        "&:hover": {
-            bgcolor: props.primaryColor,
-            transform: "scale(1.02)",
-        },
-        "&:active": {
-            color: "#FFFFFF",
-            transform: "scale(0.98)",
-        },
-        "&:disabled": {
-            bgcolor: "#000000",
-            color: "#FFFFFF",
-            opacity: "12%",
-        },
-        animation: "pulse 1s infinite",
-    },
-    // Start button text
-    startButtonText: {
-        fontFamily: props.fontFamilyPrimary,
-        fontWeight: 500,
-        fontSize: "0.9375rem",
-        lineHeight: "24px",
-        letterSpacing: "0.46px",
-        textTransform: "uppercase",
-        color: "#FFFFFF",
-        gap: "8px",
-        display: "flex",
-        alignItems: "center",
-    },
-    // Image container (left position)
-    imageContainerLeft: {
-        display: { xs: "none", md: "block" },
-        flex: "0.3",
-        borderTopLeftRadius: props.mdBorderRadius,
-        borderBottomLeftRadius: props.mdBorderRadius,
-        overflow: "hidden",
-        height: "auto",
-        position: "relative",
-    },
-    // Image container (right position)
-    imageContainerRight: {
-        display: { xs: "none", md: "block" },
-        flex: "0.3",
-        borderTopRightRadius: "5px",
-        borderBottomRightRadius: "5px",
-        overflow: "hidden",
-        height: "auto",
-        position: "relative",
-    },
-    // Quiz image
-    quizImage: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-    },
-    // Main content area
-    mainContentArea: {
-        flex: { xs: "1", md: props.quizImage ? "0.7" : "1" },
-        display: {
-            md: "flex",
-            xs: props.applyFilterScreen ? "none" : "flex",
-        },
-        flexDirection: "column",
-        p: props.spacingScale.md,
-        gap: { xs: props.spacingScale.sm, md: props.spacingScale.md },
-    },
-    // Desktop headline container
-    desktopHeadlineContainer: {
-        display: { xs: "none", md: "flex" },
-        flexDirection: "column",
-        justifyContent: "space-between",
-        gap: props.spacingScale["2xl"],
-        textAlign: "center",
-    },
-    // Hidden desktop filter screen container
-    hiddenDesktopFilterContainer: {
-        display: { xs: "none", md: "none" },
-    },
-    // Stopwatch container
-    stopwatchContainer: {
-        display: "flex",
-        justifyContent: "center",
-    },
-    // Pagination container
-    paginationContainer: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "centered",
-        gap: props.spacingScale.md,
-    },
-    // Lead collection container
-    leadCollectionContainer: {
-        display: "flex",
-        flexDirection: "column",
-        p: props.spacingScale.md,
-    },
-    // Lead question container
-    leadQuestionContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: { xs: props.spacingScale.lg, md: props.spacingScale.md },
-    },
-    // Lead content container
-    leadContentContainer: {
-        borderRadius: props.mdBorderRadius,
-        px: props.spacingScale.md,
-        pt: props.spacingScale.md,
-        pb: props.spacingScale.lg,
-        gap: props.spacingScale.md,
-        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-        display: "flex",
-        flexDirection: "column",
-        backdropFilter: "blur(4px)",
-    },
-    // Question area
-    questionArea: {
-        display: "flex",
-        flexDirection: "column",
-        p: props.spacingScale.md,
-    },
-    // Question container
-    questionContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: { xs: props.spacingScale.lg, md: props.spacingScale.md },
-    },
-    // Question content container
-    questionContentContainer: {
-        borderRadius: props.mdBorderRadius,
-        px: props.spacingScale.md,
-        pt: props.spacingScale.md,
-        pb: props.spacingScale.lg,
-        gap: props.spacingScale.md,
-        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-        display: "flex",
-        flexDirection: "column",
-        backdropFilter: "blur(4px)",
-    },
-    // Aspect ratio container for embed/image
-    aspectRatioContainer: {
-        borderRadius: props.smBorderRadius,
-    },
-    // Question image container
-    questionImageContainer: {
-        overflow: "hidden",
-        borderRadius: props.smBorderRadius,
-    },
-    // Question image box
-    questionImageBox: {
-        borderRadius: props.smBorderRadius,
-        overflow: "hidden",
-        height: "auto",
-    },
-    // Question image
-    questionImage: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-    },
-    // Question text container
-    questionTextContainer: {
-        gap: "8px",
-        display: "flex",
-        justifyContent: "center",
-    },
-    // Question text
-    questionText: {
-        fontFamily: props.fontFamilyPrimary,
-        lineHeight: "150%",
-        letterSpacing: "0.15px",
-        fontWeight: 500,
-        fontSize: "1.25rem",
-        textAlign: "center",
-        color: props.textColor,
-    },
-    // Footer container
-    footerContainer: {
-        display: "flex",
-        flexDirection: { xs: "column", md: "row" },
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: props.spacingScale.lg,
-    },
-    // Footer container (no logo)
-    footerContainerNoLogo: {
-        display: "flex",
-        flexDirection: { xs: "column", md: "row" },
-        justifyContent: "flex-end",
-        alignItems: "center",
-        gap: props.spacingScale.lg,
-    },
-    // Presented by desktop
-    presentedByDesktop: {
-        display: { xs: "none", md: "block" },
-    },
-    // Presented by mobile
-    presentedByMobile: {
-        display: { xs: "block", md: "none" },
-    },
-});