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

React component library

"use strict";const e=require("react/jsx-runtime"),u=require("react"),S=require("./tag-CWcvCQcz.cjs"),N=require("./useDetectMobile-DYV6V1yw.cjs"),m=require("./Icon.cjs"),w=require("./IconButton.cjs"),b=require("./Button.cjs"),y=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),I=require("./breakpoints-CcVm-gVm.cjs"),q=({title:o,description:t,questionText:i,feedbackText:p,impressions:l=!1,onSelectItem:a=()=>{},onImpressed:d=()=>{}})=>{const[h,r]=u.useState(!1),[f,x]=u.useState(!1),g=()=>{r(c=>!c),a()},s=(c,_)=>{c==null||c.stopPropagation(),x(!0),d(_)};return e.jsxs(S.ItemContainer,{className:h?"expanded":"",onClick:g,children:[e.jsxs("div",{className:"card__heading",children:[e.jsx("div",{className:"card__title",children:o}),e.jsx(m,{icon:h?" mng-lnc-subtract":" mng-lnc-add",sizeInUnits:"1.25rem",className:"card__icon"})]}),h&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"card__description",children:t}),l&&e.jsx(e.Fragment,{children:f?e.jsxs("div",{className:"card__impression feedback",children:[e.jsx(m,{icon:" mng-lnc-checkmark--outline",sizeInUnits:"1.25rem",color:"success"}),e.jsx("div",{className:"imppression__question",children:p})]}):e.jsxs("div",{className:"card__impression",children:[e.jsx("div",{className:"imppression__question",children:i}),e.jsxs("div",{className:"impression__actions",children:[e.jsx(w,{icon:" mng-lnc-thumbs-up",borderRadius:"curved",btnType:"outline",onClick:c=>s(c,!0)}),e.jsx(w,{icon:" mng-lnc-thumbs-down",borderRadius:"curved",btnType:"outline",onClick:c=>s(c,!1)})]})]})})]})]})},C=u.forwardRef(({items:o=[],questionText:t,feedbackText:i,showMoreText:p,impressions:l=!1,onSelectItem:a=()=>{},onImpressed:d=()=>{}},h)=>{const r=N.useDetectMobile(),[f,x]=u.useState(!1),g=()=>{x(c=>!c)},s=u.useMemo(()=>{if(r)return o==null?void 0:o.map((n,j)=>e.jsx(q,{title:n==null?void 0:n.title,description:n==null?void 0:n.description,questionText:t,feedbackText:i,impressions:l,onSelectItem:()=>a(n),onImpressed:v=>d(n,v)},`faq-section-item__${j+1}`));const c=[],_=[];return o==null||o.forEach((n,j)=>{j%2===0?c.push(e.jsx(q,{title:n==null?void 0:n.title,description:n==null?void 0:n.description,questionText:t,feedbackText:i,impressions:l,onSelectItem:()=>a(n),onImpressed:v=>d(n,v)},`faq-section-item__${j+1}`)):_.push(e.jsx(q,{title:n==null?void 0:n.title,description:n==null?void 0:n.description,questionText:t,feedbackText:i,impressions:l,onSelectItem:()=>a(n),onImpressed:v=>d(n,v)},`faq-section-item__${j+1}`))}),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"section__column",children:c}),e.jsx("div",{className:"section__column",children:_})]})},[o,r]);return e.jsx(S.ItemsContainer,{ref:h,children:r?f?s:e.jsxs(e.Fragment,{children:[s==null?void 0:s.slice(0,4),(s==null?void 0:s.length)>4&&e.jsx(b,{text:p,btnType:"basic",color:"neutral",className:"section__show-more",onClick:g})]}):s})}),k=y.styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  & .section__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    width: 100%;
  }

  & .section__title {
    color: var(--navy-900, #0c1520);
    text-align: center;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2rem;
  }

  & .section__description {
    color: var(--navy-500, #7a8594);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
  }

  @media ${I.down("S")} {
    & .section__title {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5rem;
    }

    & .section__description {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0.25px;
    }
  }
`,F=u.forwardRef(({title:o,description:t,questionText:i="What do you think about this answer?",feedbackText:p="Thank you for feedback!",showMoreText:l="Show more",allTagText:a="All",impressions:d=!1,tags:h=[],items:r=[],onSelectItem:f=()=>{},onImpressed:x=()=>{}},g)=>{const[s,c]=u.useState(null),_=n=>{c(n==null?void 0:n.code)};return e.jsxs(k,{ref:g,children:[e.jsxs("div",{className:"section__heading",children:[o&&e.jsx("div",{className:"section__title",children:o}),t&&e.jsx("div",{className:"section__description",children:t})]}),e.jsx(S.FaqSectionTags,{tags:h,allTagText:a,selectedTagCode:s,onSelectTag:_}),e.jsx(C,{items:s===null?r:r==null?void 0:r.filter(n=>(n==null?void 0:n.tagCode)===s),questionText:i,feedbackText:p,showMoreText:l,impressions:d,onSelectItem:f,onImpressed:x},`faq-section-items__${s}`)]})});module.exports=F;