fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

package/packages/classic-quiz-play/src/components/Shared/Answers/Option.js

@@ -0,0 +1,130 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as x, AspectRatio as R, Typography as h } from "@mui/joy";
+import { useInternalTheme as v, useColors as z, useCornerRadius as g, useFontFamily as O, useBorderSize as B, useSpacingScale as P } from "../../../../../common/src/functions/theme.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageUrl as T } from "../../../../../common/src/hooks/useImageUrl.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+const Q = (o) => {
+  var d;
+  const f = v(), t = z(), u = g().sm, i = O().primary, l = g().xs, p = B().size, r = P(), b = T(o.option.images), s = o.questionImage ? null : b, c = ((d = o.brandingColors) == null ? void 0 : d.primaryColor) || t.palette.primary.plainColor, w = t.palette.success.plainColor, y = t.palette.danger.plainColor, F = t.palette.primary.onPrimary, a = f.colorSchemes.light.textColor, S = (n) => o.showAnswer ? n.correct ? {
+    bgcolor: w,
+    color: "#fff",
+    boxShadow: "none"
+  } : o.selectedOption === n.optionId && !n.correct ? {
+    bgcolor: y,
+    color: "#fff",
+    boxShadow: "none"
+  } : {
+    bgcolor: "#FFFFFF",
+    color: a,
+    opacity: o.showAnswer ? 0.6 : 1,
+    boxShadow: "none"
+  } : o.selectedOption === n.optionId ? {
+    bgcolor: c,
+    boxShadow: `inset 0 0 0 ${p} ${c}`,
+    color: F
+  } : {
+    bgcolor: "#FFFFFF",
+    color: a,
+    boxShadow: "none"
+  }, C = () => {
+    o.showAnswer || o.answerQuestion(o.option.optionId);
+  }, { bgcolor: j, color: m, opacity: A, boxShadow: I } = S(o.option);
+  return /* @__PURE__ */ e.jsx(
+    x,
+    {
+      sx: {
+        borderRadius: u,
+        flex: 1,
+        // Take equal space within the row
+        p: r.xs,
+        gap: r.xs,
+        bgcolor: j,
+        cursor: o.showAnswer ? "default" : "pointer",
+        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+        transform: "scale(1)",
+        boxShadow: I,
+        // Using boxShadow instead of border to prevent layout shifts
+        "&:hover": {
+          transform: o.showAnswer ? "scale(1)" : "scale(1.02)"
+          // boxShadow: !props.showAnswer
+          //   ? `inset 0 0 0 ${borderSize} ${primaryColor}`
+          //   : boxShadow,
+        },
+        "&:active": {
+          transform: o.showAnswer ? "scale(1)" : "scale(0.98)"
+        },
+        // Make the overall container have consistent height
+        display: "flex",
+        flexDirection: "column",
+        opacity: A
+      },
+      onClick: C,
+      children: s ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(
+          x,
+          {
+            sx: {
+              borderRadius: l,
+              overflow: "hidden",
+              flexGrow: 1
+            },
+            children: /* @__PURE__ */ e.jsx(R, { ratio: "16/9", sx: { borderRadius: l }, children: /* @__PURE__ */ e.jsx(
+              "img",
+              {
+                src: s,
+                alt: "Option illustration",
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          h,
+          {
+            level: "body-md",
+            sx: {
+              fontFamily: i,
+              fontWeight: 500,
+              fontSize: "0.935em",
+              lineHeight: "24px",
+              letterSpacing: "0.46px",
+              textAlign: "center",
+              color: m,
+              px: r["2xs"]
+            },
+            children: o.option.option
+          }
+        )
+      ] }) : /* @__PURE__ */ e.jsx(
+        h,
+        {
+          level: "body-md",
+          sx: {
+            fontFamily: i,
+            fontWeight: 500,
+            fontSize: "0.935em",
+            lineHeight: "16px",
+            letterSpacing: "0.46px",
+            textAlign: "center",
+            color: m,
+            px: r["2xs"],
+            my: "auto"
+          },
+          children: o.option.option
+        }
+      )
+    },
+    o.option.optionId
+  );
+};
+export {
+  Q as default
+};

package/packages/classic-quiz-play/src/components/Shared/Button.js

@@ -0,0 +1,67 @@
+import { j as r } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Button as n, Typography as l } from "@mui/joy";
+import { useFontFamily as a, useCornerRadius as c, useColors as s } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const g = (o) => {
+  const e = a().primary, i = c().xl, t = s().palette.primary.onPrimary;
+  return /* @__PURE__ */ r.jsx(
+    n,
+    {
+      variant: "soft",
+      disabled: o.selectedOption === null || o.showAnswer || o.isSubmitting,
+      sx: {
+        borderRadius: i,
+        py: "10px",
+        pr: "12px",
+        pl: "16px",
+        bgcolor: o.buttonColor,
+        color: t,
+        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+        transform: "scale(1)",
+        alignSelf: "center",
+        "&:hover": {
+          bgcolor: o.buttonColor,
+          transform: "scale(1.02)"
+        },
+        "&:active": {
+          color: t,
+          transform: "scale(0.98)"
+        },
+        "&:disabled": {
+          bgcolor: o.buttonColor,
+          color: t,
+          opacity: "12%"
+        },
+        "--Icon-color": t,
+        fontSize: "0.9375em"
+      },
+      endDecorator: o.endDecorator,
+      onClick: o.onClick,
+      children: /* @__PURE__ */ r.jsx(
+        l,
+        {
+          sx: {
+            fontFamily: e,
+            fontWeight: 500,
+            fontSize: "0.9375em",
+            lineHeight: "24px",
+            letterSpacing: "0.46px",
+            textTransform: "uppercase",
+            color: t,
+            gap: "8px",
+            display: "flex",
+            alignItems: "center"
+          },
+          children: o.label
+        }
+      )
+    }
+  );
+};
+export {
+  g as default
+};

package/packages/classic-quiz-play/src/components/Shared/MainCard.js

@@ -0,0 +1,34 @@
+import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a } from "@mui/joy";
+import { useCornerRadius as p, useColors as o, useBorderSize as u, isMobile as c } from "../../../../common/src/functions/theme.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const j = ({
+  children: r,
+  brandingBorderColor: e
+}) => {
+  const i = p().md, s = e || o().secondaryContainer, t = u().size, d = c(), m = t + " solid " + s;
+  return /* @__PURE__ */ n.jsx(
+    a,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: d ? "column" : "row",
+        width: "100%",
+        borderRadius: i,
+        boxShadow: "md",
+        border: m,
+        overflow: "hidden",
+        background: o().surface,
+        minHeight: "250px"
+      },
+      children: r
+    }
+  );
+};
+export {
+  j as default
+};

package/packages/classic-quiz-play/src/components/Shared/PresentedBy.js

@@ -0,0 +1,122 @@
+import { j as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Box as t, Typography as a } from "@mui/joy";
+import { useFontFamily as c, isMobile as s } from "../../../../common/src/functions/theme.js";
+import { getBrandingClickUrl as d } from "../../../../common/src/functions/helpers.js";
+import "../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const k = (e) => {
+  const l = c().secondary, x = s(), i = d(
+    e.primaryUrl,
+    e.secondaryUrl,
+    "logo"
+  );
+  if (!e.brandingLogo)
+    return null;
+  const m = () => {
+    i && window.open(i, "_blank", "noopener,noreferrer");
+  }, o = /* @__PURE__ */ n.jsx(
+    "img",
+    {
+      src: e.brandingLogo,
+      alt: "branding-logo",
+      style: {
+        maxHeight: "50px",
+        maxWidth: "100px"
+      }
+    }
+  ), r = i ? typeof window > "u" ? /* @__PURE__ */ n.jsx(
+    t,
+    {
+      component: "a",
+      href: i,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        cursor: "pointer",
+        textDecoration: "none",
+        display: "inline-flex"
+      },
+      children: o
+    }
+  ) : /* @__PURE__ */ n.jsx(
+    t,
+    {
+      onClick: m,
+      sx: {
+        cursor: "pointer",
+        display: "inline-flex"
+      },
+      children: o
+    }
+  ) : o;
+  return e.isCentered || x ? /* @__PURE__ */ n.jsxs(
+    t,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        alignItems: "center",
+        minWidth: "180px",
+        fontSize: "1em",
+        zIndex: 1
+      },
+      children: [
+        e.label && /* @__PURE__ */ n.jsx(
+          a,
+          {
+            level: "body-sm",
+            sx: {
+              fontWeight: 400,
+              lineHeight: "166%",
+              letterSpacing: "0.4px",
+              fontSize: "1em",
+              color: e.textColor,
+              textAlign: "right",
+              fontFamily: l
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ n.jsxs(
+    t,
+    {
+      sx: {
+        minWidth: "180px",
+        display: "flex",
+        gap: "8px",
+        alignItems: "center",
+        zIndex: 10,
+        fontSize: "1em"
+      },
+      children: [
+        e.label && /* @__PURE__ */ n.jsx(
+          a,
+          {
+            level: "body-sm",
+            sx: {
+              fontWeight: 400,
+              lineHeight: "166%",
+              letterSpacing: "0.4px",
+              textAlign: "right",
+              fontSize: "1em",
+              color: e.textColor,
+              fontFamily: l
+            },
+            children: e.label
+          }
+        ),
+        r
+      ]
+    }
+  );
+};
+export {
+  k as default
+};