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

package/src/components/Variants/Split/SplitVariant.styles.d.ts

@@ -0,0 +1,252 @@
+import { CustomSpacingScale, CustomBorderRadius } from "@fansunited/common";
+import { BrandingColorsModel } from "fansunited-sdk-esm";
+import { CSSProperties } from "react";
+interface StyleProps {
+    quizImage: string | null;
+    questionImage: string | null;
+    imagePlaceholder: string;
+    spacingScale: CustomSpacingScale;
+    borderRadius: CustomBorderRadius;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    secondaryColor: string;
+    opacity: string;
+    buttonRadius: string;
+    bgcolor: string;
+    primaryColor: string;
+    onPrimaryColor: string;
+    textColor: string;
+    brandingColors: BrandingColorsModel | null;
+    darkTextColor: string;
+    applyFilterScreen: boolean;
+}
+export declare const createStyles: (props: StyleProps) => {
+    pulseAnimation: {
+        "@keyframes pulse": {
+            "0%": {
+                transform: string;
+            };
+            "50%": {
+                transform: string;
+            };
+            "100%": {
+                transform: string;
+            };
+        };
+    };
+    headlineSection: {
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        flex: string;
+        backgroundImage: string;
+        backgroundSize: string;
+        backgroundPosition: string;
+        borderTopLeftRadius: string;
+        borderTopRightRadius: {
+            xs: string;
+            md: string;
+        };
+        borderBottomLeftRadius: {
+            xs: number;
+            md: string;
+        };
+        overflow: string;
+        height: string;
+        position: string;
+        minHeight: {
+            xs: string;
+            md: string;
+        };
+        "&::before": {
+            content: string;
+            position: string;
+            width: string;
+            height: string;
+            background: string;
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+    };
+    headlineContent: {
+        zIndex: number;
+        height: string;
+        p: string;
+        gap: string;
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+    };
+    quizHeadlineText: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        textTransform: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    contentContainer: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    quizTitleText: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        letterSpacing: string;
+        color: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    quizDescriptionText: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        letterSpacing: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    filterScreenBottomContainer: {
+        display: string;
+        flexDirection: {
+            md: string;
+            xs: string;
+        };
+        justifyContent: string;
+        alignItems: string;
+        gap: string;
+    };
+    startButton: {
+        borderRadius: string;
+        bgcolor: string;
+        color: string;
+        "&:hover": {
+            bgcolor: string;
+        };
+        "&:active": {
+            color: string;
+        };
+        animation: string;
+    };
+    startButtonText: {
+        fontFamily: string;
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        color: string;
+        gap: string;
+        display: string;
+        alignItems: string;
+    };
+    presentedByDesktop: {
+        display: {
+            xs: string;
+            md: string;
+        };
+    };
+    questionArea: {
+        flex: string;
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        p: string;
+    };
+    stopwatchContainer: {
+        display: string;
+        justifyContent: string;
+    };
+    leadContentContainer: {
+        p: string;
+        gap: string;
+        display: string;
+        flexDirection: string;
+        backdropFilter: string;
+        bgcolor: string;
+        borderRadius: string;
+    };
+    mainContentContainer: {
+        p: string;
+        gap: string;
+        display: string;
+        flexDirection: string;
+        backdropFilter: string;
+        bgcolor: string;
+        borderRadius: string;
+    };
+    aspectRatioContainer: {
+        borderRadius: string;
+    };
+    questionImageContainer: {
+        overflow: string;
+        borderRadius: string;
+    };
+    questionImageBox: {
+        borderRadius: string;
+        overflow: string;
+        height: string;
+    };
+    questionImage: {
+        width: string;
+        height: string;
+        objectFit: CSSProperties["objectFit"];
+    };
+    questionSection: {
+        gap: string;
+        display: {
+            md: string;
+            xs: string;
+        };
+        justifyContent: string;
+    };
+    questionStepsText: {
+        fontFamily: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontWeight: number;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        textAlign: string;
+    };
+    questionText: {
+        fontFamily: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontWeight: number;
+        fontSize: string;
+        textAlign: string;
+        color: string;
+    };
+    buttonFooterContainer: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    presentedByMobile: {
+        display: {
+            xs: string;
+            md: string;
+        };
+    };
+};
+export {};
+//# sourceMappingURL=SplitVariant.styles.d.ts.map

package/src/components/Variants/Split/SplitVariant.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitVariant.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Variants/Split/SplitVariant.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,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;IACjC,YAAY,EAAE,kBAAkB,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,UAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAuMpB,aAAa,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ClD,CAAC"}

package/src/components/Variants/Split/SplitVariant.styles.js

@@ -0,0 +1,216 @@
+export const createStyles = (props) => ({
+    // Pulse animation for buttons
+    pulseAnimation: {
+        "@keyframes pulse": {
+            "0%": { transform: "scale(1)" },
+            "50%": { transform: "scale(1.05)" },
+            "100%": { transform: "scale(1)" },
+        },
+    },
+    // Main headline section with background image
+    headlineSection: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "10px",
+        flex: "0.5",
+        backgroundImage: `url(${props.quizImage || props.imagePlaceholder})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        borderTopLeftRadius: props.borderRadius.md,
+        borderTopRightRadius: { xs: props.borderRadius.md, md: "0" },
+        borderBottomLeftRadius: { xs: 0, md: props.borderRadius.md },
+        overflow: "hidden",
+        height: "auto",
+        position: "relative",
+        minHeight: { xs: "210px", md: "430px" },
+        "&::before": {
+            content: '""',
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            background: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
+            borderTopLeftRadius: "5px",
+            borderTopRightRadius: "5px",
+        },
+    },
+    // Headline content wrapper
+    headlineContent: {
+        zIndex: 1,
+        height: "100%",
+        p: props.spacingScale.xl,
+        gap: props.spacingScale.xl,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+    },
+    // Quiz headline typography
+    quizHeadlineText: {
+        fontWeight: 500,
+        lineHeight: "166%",
+        letterSpacing: "1px",
+        fontSize: "0.75rem",
+        color: props.brandingColors?.secondaryColor || props.darkTextColor,
+        opacity: "70%",
+        textTransform: "uppercase",
+        fontFamily: props.fontFamilySecondary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Content container
+    contentContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: props.spacingScale["3xs"],
+    },
+    // Quiz title typography
+    quizTitleText: {
+        fontWeight: 700,
+        lineHeight: "133%",
+        fontSize: "1.5rem",
+        letterSpacing: "0.15px",
+        color: props.brandingColors?.contentColor || props.darkTextColor,
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Quiz description typography
+    quizDescriptionText: {
+        fontWeight: 500,
+        lineHeight: "140%",
+        fontSize: "1.25rem",
+        letterSpacing: "0.15px",
+        color: props.brandingColors?.secondaryColor || props.darkTextColor,
+        opacity: "70%",
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Filter screen bottom container
+    filterScreenBottomContainer: {
+        display: "flex",
+        flexDirection: { md: "row", xs: "column-reverse" },
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: props.spacingScale.lg,
+    },
+    // Start button (filter screen)
+    startButton: {
+        borderRadius: props.buttonRadius,
+        bgcolor: props.primaryColor,
+        color: props.onPrimaryColor,
+        "&:hover": {
+            bgcolor: props.primaryColor,
+        },
+        "&:active": {
+            color: props.onPrimaryColor,
+        },
+        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",
+    },
+    // Presented by desktop container
+    presentedByDesktop: {
+        display: { xs: "none", md: "block" },
+    },
+    // Question area
+    questionArea: {
+        flex: "0.5",
+        display: props.applyFilterScreen ? "none" : "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: "10px",
+        p: props.spacingScale.lg,
+    },
+    // Stopwatch container
+    stopwatchContainer: {
+        display: "flex",
+        justifyContent: "center",
+    },
+    // Lead content container (filter screen)
+    leadContentContainer: {
+        p: props.spacingScale.md,
+        gap: props.spacingScale.md,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: props.borderRadius.sm,
+    },
+    // Main content container
+    mainContentContainer: {
+        p: props.spacingScale.lg,
+        gap: props.spacingScale.md,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: props.borderRadius.sm,
+    },
+    // Aspect ratio container for embed/image
+    aspectRatioContainer: {
+        borderRadius: props.borderRadius.sm,
+    },
+    // Question image container
+    questionImageContainer: {
+        overflow: "hidden",
+        borderRadius: props.borderRadius.sm,
+    },
+    // Question image box
+    questionImageBox: {
+        borderRadius: props.borderRadius.sm,
+        overflow: "hidden",
+        height: "auto",
+    },
+    // Question image
+    questionImage: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+    },
+    // Question section
+    questionSection: {
+        gap: "8px",
+        display: { md: "flex", xs: "block" },
+        justifyContent: "center",
+    },
+    // Question steps typography
+    questionStepsText: {
+        fontFamily: props.fontFamilyPrimary,
+        lineHeight: "150%",
+        letterSpacing: "0.15px",
+        fontWeight: 500,
+        fontSize: "1.25rem",
+        color: props.secondaryColor,
+        opacity: props.opacity,
+        textAlign: "center",
+    },
+    // Question text
+    questionText: {
+        fontFamily: props.fontFamilyPrimary,
+        lineHeight: "150%",
+        letterSpacing: "0.15px",
+        fontWeight: 500,
+        fontSize: "1.25rem",
+        textAlign: "center",
+        color: props.textColor,
+    },
+    // Button and footer container
+    buttonFooterContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: props.spacingScale.lg,
+    },
+    // Presented by mobile container
+    presentedByMobile: {
+        display: { xs: "block", md: "none" },
+    },
+});

package/src/components/Variants/Standard/AuthError/StandardAuthError.d.ts

@@ -0,0 +1,9 @@
+import { ClassicQuizFullModel } from "fansunited-sdk-esm";
+import React from "react";
+type StandardAuthErrorProps = {
+    classicQuiz: ClassicQuizFullModel;
+    imagePosition?: "left" | "right";
+};
+declare const StandardAuthError: React.FC<StandardAuthErrorProps>;
+export default StandardAuthError;
+//# sourceMappingURL=StandardAuthError.d.ts.map

package/src/components/Variants/Standard/AuthError/StandardAuthError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardAuthError.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Variants/Standard/AuthError/StandardAuthError.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,sBAAsB,GAAG;IAC5B,WAAW,EAAE,oBAAoB,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqJvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/src/components/Variants/Standard/AuthError/StandardAuthError.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AlertMessage from "../../../Shared/AlertMessage";
+import MainCard from "../../../Shared/MainCard";
+import PresentedBy from "../../../Shared/PresentedBy";
+import { stripHtmlTags, useImageUrl, isMobile, useColors, useCornerRadius, useFontFamily, useSpacingScale, useInternalTheme, } from "@fansunited/common";
+import { Box, Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import { createStyles } from "./StandardAuthError.styles";
+const StandardAuthError = (props) => {
+    const brandingColors = props.classicQuiz.branding?.colors || null;
+    const theme = useInternalTheme();
+    const quizImage = useImageUrl(props.classicQuiz.images);
+    const spacingScale = useSpacingScale();
+    const fontFamilyPrimary = useFontFamily().primary;
+    const fontFamilySecondary = useFontFamily().secondary;
+    const borderRadius = useCornerRadius();
+    const textColor = brandingColors?.contentColor || useColors().textColor;
+    const secondaryColor = brandingColors?.secondaryColor || useColors().textColor;
+    const brandingLogo = isMobile()
+        ? props.classicQuiz.branding?.images.mobileLogo ||
+            props.classicQuiz.branding?.images.mainLogo ||
+            ""
+        : props.classicQuiz.branding?.images.mainLogo || "";
+    const { t } = useTranslation();
+    const imagePosition = props.imagePosition || "left";
+    const opacity = "60%";
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        quizImage,
+        spacingScale,
+        borderRadius,
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        textColor,
+        secondaryColor,
+        brandingColors,
+        darkTextColor: theme.colorSchemes.dark.textColor,
+        opacity,
+        imagePosition,
+    });
+    return (_jsxs(MainCard, { brandingBorderColor: brandingColors?.borderColor || null, children: [quizImage ? (_jsx(Box, { sx: styles.mobileHeadlineWithImage, children: _jsx(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) })] })] }) }) })) : (_jsx(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) })] })] }) })), 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: _jsx(Box, { sx: styles.desktopHeadlineContainer, 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.titleTypographyDesktop, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-md", sx: styles.descriptionTypographyDesktop, children: stripHtmlTags(props.classicQuiz.description) })] })] }) }) }), _jsx(Box, { sx: styles.questionArea, children: _jsxs(Box, { sx: styles.questionContainer, children: [_jsx(Box, { sx: styles.alertContainer, children: _jsx(AlertMessage, { variant: "error", title: t("common.authentication.accessRequired"), message: t("common.authentication.invalidOrMissingAuth") }) }), _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: textColor })] }) })] }), quizImage && imagePosition === "right" && (_jsx(Box, { sx: styles.imageContainerRight, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) }))] }));
+};
+export default StandardAuthError;