@lanaco/lnc-react-ui
Version:
React component library
388 lines (335 loc) • 14 kB
JavaScript
"use strict";const e=require("react/jsx-runtime"),i=require("react"),z=require("./utils-NZLCh-J5.cjs"),k=require("./Button.cjs"),S=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),p=require("./consts-CtNoHdBj.cjs"),A=require("./Icon.cjs"),H=require("./ProgressBar.cjs"),J=S.newStyled.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 (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
& .wrapper__title {
font-size: 1.375rem;
line-height: 1.75rem;
}
& .wrapper__description {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
`,K=S.newStyled.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);
}
& .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 (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
& .wrapper__content {
& .wrapper__item {
& .wrapper__answers {
flex-direction: column;
}
}
}
}
`,V=S.newStyled.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 (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
width: 100%;
& .wrapper__actions {
& .wrapper__action {
width: 100%;
min-width: 100%;
}
}
}
`,Y=i.forwardRef(({title:d,description:s,startQuizText:m="Start quiz",onStartQuiz:f=()=>{}},c)=>e.jsxs(J,{children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__title",children:d}),e.jsx("div",{className:"wrapper__description",children:s})]}),e.jsx(k,{text:m,size:"medium",className:"wrapper__action",onClick:f})]})),q=i.forwardRef(({questionNoText:d,questionNo:s,totalQuestions:m,text:f,answers:c,selectedAnswer:_,secondsPerQuestion:r,nextText:E="Next",giveUpText:C="Give up",nextDisabled:T=!0,onSelectAnswer:Q=()=>{},onGiveUp:U=()=>{},onNext:Z=()=>{}},W)=>{const[g,N]=i.useState(r),[x,I]=i.useState(!0),u=i.useRef(null);i.useEffect(()=>(x&&g>0&&(u.current=setInterval(()=>{N(a=>a>0?a-1:0)},1e3)),()=>clearInterval(u.current)),[x,g]);const b=g>0?g/r*p.CIRCLE_CIRCUMFERENCE:0,w=a=>(_==null?void 0:_.uuid)===a;return e.jsxs(K,{children:[e.jsxs("div",{className:"wrapper__headline",children:[e.jsxs("div",{className:"wrapper__question-no",children:[e.jsx("div",{className:"question-no__text",children:`${d} ${s} / ${m}`}),e.jsx(H,{progressPercentage:s/m*100,className:"question-no__progress-bar"})]}),e.jsxs("div",{className:"wrapper__timer",children:[e.jsxs("svg",{className:"timer__ring",width:"60",height:"60",children:[e.jsx("circle",{className:"ring__progres-background",cx:"30",cy:"30",r:p.CIRCLE_RADIUS,stroke:"#e0e0e0",strokeWidth:"4",fill:"transparent"}),e.jsx("circle",{className:"ring__progres",cx:"30",cy:"30",r:p.CIRCLE_RADIUS,stroke:"#d97706",strokeWidth:"4",fill:"transparent",strokeLinecap:"round",transform:"rotate(-90 30 30)",strokeDasharray:p.CIRCLE_CIRCUMFERENCE,strokeDashoffset:p.CIRCLE_CIRCUMFERENCE-b})]}),e.jsx("div",{className:"timer__display",children:e.jsx("span",{className:"timer__text",children:z.formatTimerText(g)})})]})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__item",children:[e.jsx("div",{className:"wrapper__text",children:f}),e.jsx("div",{className:"wrapper__answers",children:c&&(c==null?void 0:c.map((a,v)=>e.jsxs("div",{className:`wrapper__answer ${w(a==null?void 0:a.uuid)?"active":""}`,onClick:()=>Q(a),children:[`${String.fromCharCode(65+v)}: ${a==null?void 0:a.label}`,w(a==null?void 0:a.uuid)&&e.jsx(A,{icon:" mng-lnc-checkmark--filled",sizeInUnits:"1.25rem",className:"wrapper__icon"})]},`quiz-answer__${v+1}`)))})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(k,{text:C,borderRadius:"curved",size:"medium",className:"wrapper__action action__give-up",onClick:U}),e.jsx(k,{text:E,borderRadius:"curved",size:"medium",className:"wrapper__action action__next",disabled:T,onClick:Z})]})]})]})}),ee=i.forwardRef(({title:d,description:s,continueText:m="Continue",endQuizText:f="End quiz",onContinue:c=()=>{},onEndQuiz:_=()=>{}},r)=>e.jsxs(V,{children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx(A,{icon:" mng-lnc-checkmark--outline",color:"success",sizeInUnits:"4rem",className:"wrapper__icon"}),e.jsxs("div",{className:"wrapper__info",children:[d&&e.jsx("div",{className:"wrapper__title",children:d}),s&&e.jsx("div",{className:"wrapper__description",children:s})]})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(k,{text:m,borderRadius:"curved",size:"medium",className:"wrapper__action action__continue",onClick:c}),e.jsx(k,{text:f,borderRadius:"curved",size:"medium",className:"wrapper__action action__end-quiz",onClick:_})]})]})),l={START_QUIZ:0,QUIZ:1,CORRECT_ANSWER:2},re=S.newStyled.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;
}
@media (max-width: ${p.MOBILE_SIZE_PX+"px"}) {
& .wrapper__outlet {
padding: 0;
}
& .wrapper__image {
display: none;
}
}
`,te=i.forwardRef(({welcomeTitle:d,welcomeDescription:s,endTitle:m,endDescription:f,image:c,imageComponent:_,questions:r,secondsPerQuestion:E,numOfCredits:C,startQuizText:T="Start quiz",nextText:Q="Next",giveUpText:U="Give up",questionNoText:Z="Question",continueText:W="Continue",endQuizText:g="End quiz",onStartQuiz:N=()=>{},onSelectAnswer:x=()=>{},onGiveUp:I=()=>{},onNext:u=()=>{},onContinue:b=()=>{},onEndQuiz:w=()=>{}},a)=>{const[v,h]=i.useState(l.START_QUIZ),[o,y]=i.useState(1),[t,L]=i.useState(null),[j,R]=i.useState(null),O=i.useRef([]),D=i.useRef(0),M=()=>{h(l.QUIZ),L(r==null?void 0:r.find(n=>(n==null?void 0:n.questionNo)===o)),N==null||N()},P=n=>{R(n),x==null||x()},B=()=>{h(l.START_QUIZ),y(1),R(null),I==null||I()},X=()=>{let n=(j==null?void 0:j.uuid)===(t==null?void 0:t.correctAnswer);n?(h(l.CORRECT_ANSWER),D.current+=C||(t==null?void 0:t.numOfCredits)):o===(r==null?void 0:r.length)?(h(l.START_QUIZ),y(1),R(null)):(y(o+1),L(r==null?void 0:r.find($=>($==null?void 0:$.questionNo)===o+1)),R(null)),O.current=[...O.current,{question:t,selectedAnswer:j,isCorrect:n}],u==null||u()},F=()=>{o===(r==null?void 0:r.length)?(h(l.START_QUIZ),y(1)):(h(l.QUIZ),y(o+1),L(r==null?void 0:r.find(n=>(n==null?void 0:n.questionNo)===o+1))),R(null),b==null||b()},G=()=>{h(l.START_QUIZ),y(1),R(null),w==null||w()};return e.jsxs(re,{ref:a,children:[e.jsxs("div",{className:"wrapper__outlet",children:[v===l.START_QUIZ&&e.jsx(Y,{title:d,description:s,startQuizText:T,onStartQuiz:M}),v===l.QUIZ&&t&&e.jsx(q,{questionNoText:Z,questionNo:o,totalQuestions:(r==null?void 0:r.length)||0,text:t==null?void 0:t.text,answers:t==null?void 0:t.answers,secondsPerQuestion:E||(t==null?void 0:t.secondsPerQuestion),selectedAnswer:j,nextText:Q,giveUpText:U,nextDisabled:!z.isDefined(j),onSelectAnswer:P,onGiveUp:B,onNext:X},`quiz-question__${o}`),v===l.CORRECT_ANSWER&&e.jsx(ee,{title:m,description:z.formatString(f,C||(t==null?void 0:t.numOfCredits)),continueText:W,endQuizText:g,onContinue:F,onEndQuiz:G})]}),z.isDefined(_)?_:e.jsx("img",{src:c,className:"wrapper__image"})]})});module.exports=te;