@lanaco/lnc-react-ui
Version:
React component library
724 lines (670 loc) • 18.9 kB
JavaScript
import { jsxs as t, jsx as r } from "react/jsx-runtime";
import { forwardRef as I, useState as w, useRef as B, useEffect as re } from "react";
import { y as ae, l as te, m as J, s as ie } from "./utils-BUdHa0nB.js";
import z from "./Button.js";
import { s as U } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as E } from "./breakpoints-BubDitvo.js";
import M from "./Icon.js";
import ne from "./ProgressBar.js";
const le = U.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2rem;
flex: 1 0 0;
& .wrapper__content {
display: flex;
flex-direction: column;
& .wrapper__title {
color: var(--gray-950, #14161a);
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2.25rem;
letter-spacing: -0.59px;
}
& .wrapper__description {
color: var(--gray-950, #14161a);
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
letter-spacing: -0.18px;
}
}
& .wrapper__action {
background: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
padding: 0.625rem 0.75rem;
&:hover {
color: var(--white, #fff);
background: var(---gray-600, #676e79);
}
&:focus {
outline: none;
background: var(--gray-950, #14161a);
}
}
@media ${E("S")} {
& .wrapper__title {
font-size: 1.375rem;
line-height: 1.75rem;
}
& .wrapper__description {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
`, ce = U.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
align-self: stretch;
& .wrapper__headline {
display: flex;
align-items: flex-start;
justify-items: space-between;
gap: 32px;
width: 100%;
& .wrapper__question-no {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
& .question-no__text {
color: var(--gray-950, #14161a);
font-size: 1.375rem;
font-style: normal;
font-weight: 600;
line-height: 1.75rem;
}
& .question-no__progress-bar {
height: 0.25rem;
& > div {
background: var(--yellow-600, #d97706);
}
}
}
& .wrapper__timer {
position: relative;
width: 3.75rem;
height: 3.75rem;
background-color: #f0f0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
& .timer__display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
& .timer__text {
color: var(--red-600, #e11d48);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1rem;
letter-spacing: 0.5px;
}
}
}
}
& .wrapper__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.5rem;
width: 100%;
& .wrapper__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
align-self: stretch;
& .wrapper__text {
color: var(--gray-950, #14161a);
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem;
letter-spacing: 0.1px;
}
& .wrapper__answers {
display: flex;
align-items: flex-start;
gap: 0.75rem;
align-self: stretch;
& .wrapper__answer {
display: flex;
padding: 1rem 0.75rem;
align-items: flex-start;
justify-content: space-between;
border-radius: 0.75rem;
border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
color: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
width: 100%;
&:hover {
cursor: pointer;
}
&.active {
border: 2px solid var(--yellow-600, #d97706);
}
&.incorrect {
border: 2px solid var(--danger-700, #be123c);
}
& .wrapper__icon__incorrect {
color: var(--danger-700, #be123c);
}
& .wrapper__icon {
color: var(--yellow-600, #d97706);
}
}
}
}
& .wrapper__actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
align-items: center;
align-self: stretch;
width: 100%;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
& .wrapper__action {
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
min-width: 5rem;
&.action__give-up {
background: transparent;
color: var(--gray-950, #14161a);
&:hover {
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
}
&:focus {
outline: none;
background: transparent;
}
}
&.action__next {
background: var(--gray-950, #14161a);
&:hover {
background: var(---gray-600, #676e79);
}
&:focus {
outline: none;
background: var(--gray-950, #14161a);
}
&:disabled {
color: var(--white, #fff);
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
}
}
}
}
}
@media ${E("S")} {
& .wrapper__content {
& .wrapper__item {
& .wrapper__answers {
flex-direction: column;
}
}
}
}
`, oe = U.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
& .wrapper__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
align-self: stretch;
& .wrapper__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
align-self: stretch;
color: var(--gray-950, #14161a);
align-items: center;
& .wrapper__title {
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2.25rem;
}
& .wrapper__description {
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
}
}
& .wrapper__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 100%;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
& .wrapper__action {
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
min-width: 22rem;
width: 100%;
&.action__end-quiz {
background: transparent;
color: var(--gray-950, #14161a);
&:hover {
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
}
&:focus {
outline: none;
background: transparent;
}
}
&.action__continue {
background: var(--gray-950, #14161a);
&:hover {
background: var(---gray-600, #676e79);
}
&:focus {
outline: none;
background: var(--gray-950, #14161a);
}
}
}
}
@media ${E("S")} {
width: 100%;
& .wrapper__actions {
& .wrapper__action {
width: 100%;
min-width: 100%;
}
}
}
`, se = I(
({
title: g,
description: o,
startQuizText: f = "Start quiz",
onStartQuiz: h = () => {
}
}, s) => /* @__PURE__ */ t(le, { ref: s, children: [
/* @__PURE__ */ t("div", { className: "wrapper__content", children: [
/* @__PURE__ */ r("div", { className: "wrapper__title", children: g }),
/* @__PURE__ */ r("div", { className: "wrapper__description", children: o })
] }),
/* @__PURE__ */ r(
z,
{
text: f,
size: "medium",
className: "wrapper__action",
onClick: h
}
)
] })
), F = 26, P = 2 * Math.PI * F, pe = I(
({
questionNoText: g,
questionNo: o,
totalQuestions: f,
text: h,
options: s,
correctAnswerIndex: n,
selectedAnswer: e,
secondsPerQuestion: R,
nextText: C = "Next",
giveUpText: $ = "Give up",
nextDisabled: W = !0,
onSelectAnswer: Z = () => {
},
onGiveUp: j = () => {
},
onNext: D = () => {
},
selectedAnswerIndex: p
}, N) => {
const [m, k] = w(R), [u, S] = w(!0), v = B(null);
re(() => (u && m > 0 && (v.current = setInterval(() => {
k((d) => d > 0 ? d - 1 : 0);
}, 1e3)), () => clearInterval(v.current)), [u, m]);
const A = m > 0 ? m / R * P : 0;
return /* @__PURE__ */ t(ce, { ref: N, children: [
/* @__PURE__ */ t("div", { className: "wrapper__headline", children: [
/* @__PURE__ */ t("div", { className: "wrapper__question-no", children: [
/* @__PURE__ */ r("div", { className: "question-no__text", children: `${g} ${o} / ${f}` }),
/* @__PURE__ */ r(
ne,
{
progressPercentage: o / f * 100,
className: "question-no__progress-bar"
}
)
] }),
/* @__PURE__ */ t("div", { className: "wrapper__timer", children: [
/* @__PURE__ */ t("svg", { className: "timer__ring", width: "60", height: "60", children: [
/* @__PURE__ */ r(
"circle",
{
className: "ring__progres-background",
cx: "30",
cy: "30",
r: F,
stroke: "#e0e0e0",
strokeWidth: "4",
fill: "transparent"
}
),
/* @__PURE__ */ r(
"circle",
{
className: "ring__progres",
cx: "30",
cy: "30",
r: F,
stroke: "#d97706",
strokeWidth: "4",
fill: "transparent",
strokeLinecap: "round",
transform: "rotate(-90 30 30)",
strokeDasharray: P,
strokeDashoffset: P - A
}
)
] }),
/* @__PURE__ */ r("div", { className: "timer__display", children: /* @__PURE__ */ r("span", { className: "timer__text", children: ae(m) }) })
] })
] }),
/* @__PURE__ */ t("div", { className: "wrapper__content", children: [
/* @__PURE__ */ t("div", { className: "wrapper__item", children: [
/* @__PURE__ */ r("div", { className: "wrapper__text", children: h }),
/* @__PURE__ */ r("div", { className: "wrapper__answers", children: s == null ? void 0 : s.map((d, i) => /* @__PURE__ */ t(
"div",
{
className: `wrapper__answer ${n === i && n === p ? "active" : te(e) && n !== p && p === i ? "incorrect" : ""}`,
onClick: () => Z(d, i),
children: [
`${String.fromCharCode(65 + i)}: ${d}`,
n === i && n === p && /* @__PURE__ */ r(
M,
{
icon: " mng-lnc-checkmark--filled",
sizeInUnits: "1.25rem",
className: "wrapper__icon"
}
),
p >= 0 && n !== p && p === i && /* @__PURE__ */ r(
M,
{
icon: " mng-lnc-close--filled",
sizeInUnits: "1.25rem",
className: "wrapper__icon__incorrect"
}
)
]
},
`quiz-answer__${i + 1}`
)) })
] }),
/* @__PURE__ */ t("div", { className: "wrapper__actions", children: [
/* @__PURE__ */ r(
z,
{
text: $,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__give-up",
onClick: j
}
),
/* @__PURE__ */ r(
z,
{
text: C,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__next",
disabled: W,
onClick: D
}
)
] })
] })
] });
}
), me = I(
({
title: g,
description: o,
continueText: f = "Continue",
endQuizText: h = "End quiz",
onContinue: s = () => {
},
onEndQuiz: n = () => {
}
}, e) => /* @__PURE__ */ t(oe, { ref: e, children: [
/* @__PURE__ */ t("div", { className: "wrapper__content", children: [
/* @__PURE__ */ r(
M,
{
icon: " mng-lnc-checkmark--outline",
color: "success",
sizeInUnits: "4rem",
className: "wrapper__icon"
}
),
/* @__PURE__ */ t("div", { className: "wrapper__info", children: [
g && /* @__PURE__ */ r("div", { className: "wrapper__title", children: g }),
o && /* @__PURE__ */ r("div", { className: "wrapper__description", children: o })
] })
] }),
/* @__PURE__ */ t("div", { className: "wrapper__actions", children: [
/* @__PURE__ */ r(
z,
{
text: f,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__continue",
onClick: s
}
),
/* @__PURE__ */ r(
z,
{
text: h,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__end-quiz",
onClick: n
}
)
] })
] })
), l = {
START_QUIZ: 0,
QUIZ: 1,
CORRECT_ANSWER: 2
}, de = U.div`
display: flex;
width: 100%;
align-items: center;
gap: 2rem;
& .wrapper__outlet {
display: flex;
padding: 2rem 3rem;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
align-self: stretch;
}
& .wrapper__image {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
max-width: 22.5rem;
border-radius: 0.75rem;
}
@media ${E("S")} {
& .wrapper__outlet {
padding: 0;
}
& .wrapper__image {
display: none;
}
}
`, ye = I(
({
title: g,
subtitle: o,
endTitle: f,
endDescription: h,
imageUrl: s,
imageComponent: n,
questions: e,
secondsPerQuestion: R,
numberOfCredits: C,
startQuizText: $ = "Start quiz",
nextText: W = "Next",
giveUpText: Z = "Give up",
questionNoText: j = "Question",
continueText: D = "Continue",
endQuizText: p = "End quiz",
onStartQuiz: N = () => {
},
onSelectAnswer: m = () => {
},
onGiveUp: k = () => {
},
onNext: u = () => {
},
onContinue: S = () => {
},
onEndQuiz: v = () => {
}
}, A) => {
const [d, i] = w(l.START_QUIZ), [_, x] = w(0), [a, L] = w(null), [O, y] = w(null), [G, b] = w(null), H = B([]), T = B(0), K = () => {
var c;
i(l.QUIZ), L(
// questions?.find((question) => question?.questionNo === questionNo)
(c = e == null ? void 0 : e.at) == null ? void 0 : c.call(e, _)
), N == null || N();
}, V = (c, Q) => {
b(Q), y(c), m == null || m();
}, X = () => {
i(l.START_QUIZ), x(0), y(null), b(null), k == null || k();
}, Y = () => {
var Q;
const c = G === (a == null ? void 0 : a.correctAnswerIndex);
c ? (i(l.CORRECT_ANSWER), T.current += C || (a == null ? void 0 : a.numberOfCredits)) : _ === (e == null ? void 0 : e.length) - 1 ? (i(l.START_QUIZ), x(0), y(null), b(null)) : (x(_ + 1), L(
// questions?.find((question) => question?.questionNo === questionNo + 1)
(Q = e == null ? void 0 : e.at) == null ? void 0 : Q.call(e, _ + 1)
), y(null), b(null)), H.current = [
...H.current,
{
question: a,
selectedAnswer: O,
isCorrect: c
}
], u == null || u();
}, q = () => {
var c;
_ === (e == null ? void 0 : e.length) - 1 ? (i(l.START_QUIZ), x(0)) : (i(l.QUIZ), x(_ + 1), L(
// questions?.find((question) => question?.questionNo === questionNo + 1)
(c = e == null ? void 0 : e.at) == null ? void 0 : c.call(e, _ + 1)
)), y(null), b(null), S == null || S(T == null ? void 0 : T.current);
}, ee = () => {
i(l.START_QUIZ), x(0), y(null), b(null), v == null || v();
};
return /* @__PURE__ */ t(de, { ref: A, className: "lp-section lp-quiz-section", children: [
/* @__PURE__ */ t("div", { className: "wrapper__outlet", children: [
d === l.START_QUIZ && /* @__PURE__ */ r(
se,
{
title: g,
description: o,
startQuizText: $,
onStartQuiz: K
}
),
d === l.QUIZ && a && /* @__PURE__ */ r(
pe,
{
questionNoText: j,
questionNo: _,
totalQuestions: (e == null ? void 0 : e.length) || 0,
text: a == null ? void 0 : a.questionText,
options: a == null ? void 0 : a.options,
secondsPerQuestion: R || (a == null ? void 0 : a.secondsPerQuestion),
correctAnswerIndex: a == null ? void 0 : a.correctAnswerIndex,
selectedAnswer: O,
nextText: W,
giveUpText: Z,
nextDisabled: !J(O),
onSelectAnswer: V,
onGiveUp: X,
onNext: Y,
selectedAnswerIndex: G
},
`quiz-question__${_}`
),
d === l.CORRECT_ANSWER && /* @__PURE__ */ r(
me,
{
title: f,
description: ie(
h,
C || (a == null ? void 0 : a.numberOfCredits)
),
continueText: D,
endQuizText: p,
onContinue: q,
onEndQuiz: ee
}
)
] }),
J(n) ? n : /* @__PURE__ */ r("img", { src: s, className: "wrapper__image" })
] });
}
);
export {
ye as default
};