@lanaco/lnc-react-ui/dist/QuizSection.cjs

React component library

"use strict";const e=require("react/jsx-runtime"),i=require("react"),N=require("./utils-BK6B_Y9X.cjs"),R=require("./Button.cjs"),Q=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),I=require("./breakpoints-CcVm-gVm.cjs"),P=require("./Icon.cjs"),Y=require("./ProgressBar.cjs"),q=Q.styled.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 ${I.down("S")} {
    & .wrapper__title {
      font-size: 1.375rem;
      line-height: 1.75rem;
    }

    & .wrapper__description {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }
`,ee=Q.styled.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 ${I.down("S")} {
    & .wrapper__content {
      & .wrapper__item {
        & .wrapper__answers {
          flex-direction: column;
        }
      }
    }
  }
`,re=Q.styled.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 ${I.down("S")} {
    width: 100%;

    & .wrapper__actions {
      & .wrapper__action {
        width: 100%;
        min-width: 100%;
      }
    }
  }
`,te=i.forwardRef(({title:g,description:c,startQuizText:f="Start quiz",onStartQuiz:h=()=>{}},o)=>e.jsxs(q,{ref:o,children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx("div",{className:"wrapper__title",children:g}),e.jsx("div",{className:"wrapper__description",children:c})]}),e.jsx(R,{text:f,size:"medium",className:"wrapper__action",onClick:h})]})),B=26,O=2*Math.PI*B,ae=i.forwardRef(({questionNoText:g,questionNo:c,totalQuestions:f,text:h,options:o,correctAnswerIndex:n,selectedAnswer:r,secondsPerQuestion:k,nextText:z="Next",giveUpText:U="Give up",nextDisabled:E=!0,onSelectAnswer:$=()=>{},onGiveUp:W=()=>{},onNext:Z=()=>{},selectedAnswerIndex:p},j)=>{const[d,b]=i.useState(k),[u,S]=i.useState(!0),x=i.useRef(null);i.useEffect(()=>(u&&d>0&&(x.current=setInterval(()=>{b(m=>m>0?m-1:0)},1e3)),()=>clearInterval(x.current)),[u,d]);const D=d>0?d/k*O:0;return e.jsxs(ee,{ref:j,children:[e.jsxs("div",{className:"wrapper__headline",children:[e.jsxs("div",{className:"wrapper__question-no",children:[e.jsx("div",{className:"question-no__text",children:`${g} ${c} / ${f}`}),e.jsx(Y,{progressPercentage:c/f*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:B,stroke:"#e0e0e0",strokeWidth:"4",fill:"transparent"}),e.jsx("circle",{className:"ring__progres",cx:"30",cy:"30",r:B,stroke:"#d97706",strokeWidth:"4",fill:"transparent",strokeLinecap:"round",transform:"rotate(-90 30 30)",strokeDasharray:O,strokeDashoffset:O-D})]}),e.jsx("div",{className:"timer__display",children:e.jsx("span",{className:"timer__text",children:N.formatTimerText(d)})})]})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__item",children:[e.jsx("div",{className:"wrapper__text",children:h}),e.jsx("div",{className:"wrapper__answers",children:o==null?void 0:o.map((m,a)=>e.jsxs("div",{className:`wrapper__answer ${n===a&&n===p?"active":N.isDefinedNotEmptyString(r)&&n!==p&&p===a?"incorrect":""}`,onClick:()=>$(m,a),children:[`${String.fromCharCode(65+a)}: ${m}`,n===a&&n===p&&e.jsx(P,{icon:" mng-lnc-checkmark--filled",sizeInUnits:"1.25rem",className:"wrapper__icon"}),p>=0&&n!==p&&p===a&&e.jsx(P,{icon:" mng-lnc-close--filled",sizeInUnits:"1.25rem",className:"wrapper__icon__incorrect"})]},`quiz-answer__${a+1}`))})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(R,{text:U,borderRadius:"curved",size:"medium",className:"wrapper__action action__give-up",onClick:W}),e.jsx(R,{text:z,borderRadius:"curved",size:"medium",className:"wrapper__action action__next",disabled:E,onClick:Z})]})]})]})}),ie=i.forwardRef(({title:g,description:c,continueText:f="Continue",endQuizText:h="End quiz",onContinue:o=()=>{},onEndQuiz:n=()=>{}},r)=>e.jsxs(re,{ref:r,children:[e.jsxs("div",{className:"wrapper__content",children:[e.jsx(P,{icon:" mng-lnc-checkmark--outline",color:"success",sizeInUnits:"4rem",className:"wrapper__icon"}),e.jsxs("div",{className:"wrapper__info",children:[g&&e.jsx("div",{className:"wrapper__title",children:g}),c&&e.jsx("div",{className:"wrapper__description",children:c})]})]}),e.jsxs("div",{className:"wrapper__actions",children:[e.jsx(R,{text:f,borderRadius:"curved",size:"medium",className:"wrapper__action action__continue",onClick:o}),e.jsx(R,{text:h,borderRadius:"curved",size:"medium",className:"wrapper__action action__end-quiz",onClick:n})]})]})),l={START_QUIZ:0,QUIZ:1,CORRECT_ANSWER:2},ne=Q.styled.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 ${I.down("S")} {
    & .wrapper__outlet {
      padding: 0;
    }

    & .wrapper__image {
      display: none;
    }
  }
`,le=i.forwardRef(({title:g,subtitle:c,endTitle:f,endDescription:h,imageUrl:o,imageComponent:n,questions:r,secondsPerQuestion:k,numberOfCredits:z,startQuizText:U="Start quiz",nextText:E="Next",giveUpText:$="Give up",questionNoText:W="Question",continueText:Z="Continue",endQuizText:p="End quiz",onStartQuiz:j=()=>{},onSelectAnswer:d=()=>{},onGiveUp:b=()=>{},onNext:u=()=>{},onContinue:S=()=>{},onEndQuiz:x=()=>{}},D)=>{const[m,a]=i.useState(l.START_QUIZ),[_,w]=i.useState(0),[t,A]=i.useState(null),[L,v]=i.useState(null),[M,y]=i.useState(null),F=i.useRef([]),C=i.useRef(0),G=()=>{var s;a(l.QUIZ),A((s=r==null?void 0:r.at)==null?void 0:s.call(r,_)),j==null||j()},H=(s,T)=>{y(T),v(s),d==null||d()},J=()=>{a(l.START_QUIZ),w(0),v(null),y(null),b==null||b()},K=()=>{var T;const s=M===(t==null?void 0:t.correctAnswerIndex);s?(a(l.CORRECT_ANSWER),C.current+=z||(t==null?void 0:t.numberOfCredits)):_===(r==null?void 0:r.length)-1?(a(l.START_QUIZ),w(0),v(null),y(null)):(w(_+1),A((T=r==null?void 0:r.at)==null?void 0:T.call(r,_+1)),v(null),y(null)),F.current=[...F.current,{question:t,selectedAnswer:L,isCorrect:s}],u==null||u()},V=()=>{var s;_===(r==null?void 0:r.length)-1?(a(l.START_QUIZ),w(0)):(a(l.QUIZ),w(_+1),A((s=r==null?void 0:r.at)==null?void 0:s.call(r,_+1))),v(null),y(null),S==null||S(C==null?void 0:C.current)},X=()=>{a(l.START_QUIZ),w(0),v(null),y(null),x==null||x()};return e.jsxs(ne,{ref:D,className:"lp-section lp-quiz-section",children:[e.jsxs("div",{className:"wrapper__outlet",children:[m===l.START_QUIZ&&e.jsx(te,{title:g,description:c,startQuizText:U,onStartQuiz:G}),m===l.QUIZ&&t&&e.jsx(ae,{questionNoText:W,questionNo:_,totalQuestions:(r==null?void 0:r.length)||0,text:t==null?void 0:t.questionText,options:t==null?void 0:t.options,secondsPerQuestion:k||(t==null?void 0:t.secondsPerQuestion),correctAnswerIndex:t==null?void 0:t.correctAnswerIndex,selectedAnswer:L,nextText:E,giveUpText:$,nextDisabled:!N.isDefined(L),onSelectAnswer:H,onGiveUp:J,onNext:K,selectedAnswerIndex:M},`quiz-question__${_}`),m===l.CORRECT_ANSWER&&e.jsx(ie,{title:f,description:N.formatString(h,z||(t==null?void 0:t.numberOfCredits)),continueText:Z,endQuizText:p,onContinue:V,onEndQuiz:X})]}),N.isDefined(n)?n:e.jsx("img",{src:o,className:"wrapper__image"})]})});module.exports=le;