@lanaco/lnc-react-ui 4.0.125 → 4.0.127

package/dist/FaqSection.cjs

@@ -1,176 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("react"),n=require("./index-BpbMKBf_.cjs"),q=require("./Chip.cjs"),b=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),N=require("./useDetectMobile-zkbzoOGV.cjs"),j=require("./Icon.cjs"),P=require("./IconButton.cjs"),C=require("./Button.cjs"),M=b.styled.div`
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  align-content: center;
-
-  & .tags__item {
-    color: var(--gray-900, #0c1520);
-    background: var(--gray-100, #f3f6fb);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.25rem;
-    letter-spacing: -0.0056rem;
-    padding: 0.5rem 0.75rem;
-
-    &.active {
-      color: var(--white, #fff);
-      background: var(--gray-900, #0c1520);
-      font-weight: 500;
-
-      &:hover {
-        color: var(--white, #fff);
-        background: var(--gray-900, #0c1520);
-      }
-    }
-
-    &:hover {
-      background: var(--gray-200, #e4e9f0);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
-    width: 100%;
-    overflow-x: auto;
-    white-space: nowrap;
-
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
-  }
-`,E=b.styled.div`
-  display: flex;
-  gap: 1.25rem;
-  width: 100%;
-
-  & .section__column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-    width: 100%;
-  }
-
-  & .section__show-more {
-    color: var(--neutral-600, #0f2a46);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.25rem;
-    letter-spacing: -0.0056rem;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
-    flex-direction: column;
-  }
-`,$=b.styled.div`
-  width: 100%;
-  height: fit-content;
-  background: var(--white, #fff);
-  border: 1px solid var(--gray-100, #f3f6fb);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 0.75rem;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &.expanded {
-    border: 1px solid #ff7621;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16),
-      0 1px 4px 0 rgba(255, 118, 33, 0.5) inset;
-  }
-
-  & .card__heading {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    & .card__title {
-      color: var(--neutral-600, #0f2a46);
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1.5rem;
-    }
-
-    & .card__icon {
-      color: var(--neutral-600, #0f2a46);
-    }
-  }
-
-  & .card__description {
-    color: var(--neutral-400, #47607b);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.25rem;
-    letter-spacing: 0.0156rem;
-  }
-
-  & .card__impression {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-
-    & .imppression__question {
-      color: var(--gray-500, #7a8594);
-      font-size: 0.75rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1rem;
-      letter-spacing: 0.0313rem;
-    }
-
-    & .impression__actions {
-      display: flex;
-      gap: 0.5rem;
-
-      button {
-        color: var(--gray-600, #676e79);
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-
-    &.feedback {
-      gap: 0.25rem;
-    }
-  }
-
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
-    & .card__impression {
-      justify-content: space-between;
-
-      &.feedback {
-        justify-content: flex-start;
-      }
-    }
-  }
-`,I=f.forwardRef(({tags:i=[],allTagText:c,selectedTagCode:l=null,onSelectTag:h=()=>{}},d)=>e.jsx(M,{children:[{name:c,code:null},...i].map((t,p)=>e.jsx(q,{label:t==null?void 0:t.name,borderRadius:"curved",color:"neutral",className:`tags__item ${l===(t==null?void 0:t.code)?"active":""}`,onClick:()=>{h(t)}},`faq-section-tag__${p+1}`))}));I.propTypes={tags:n.PropTypes.array,allTagText:n.PropTypes.string,onSelectTag:n.PropTypes.func};const w=({title:i,description:c,questionText:l,feedbackText:h,impressions:d=!1,onSelectItem:t=()=>{},onImpressed:p=()=>{}})=>{const[u,a]=f.useState(!1),[_,m]=f.useState(!1),x=()=>{a(o=>!o),t()},s=(o,g)=>{o==null||o.stopPropagation(),m(!0),p(g)};return e.jsxs($,{className:u?"expanded":"",onClick:x,children:[e.jsxs("div",{className:"card__heading",children:[e.jsx("div",{className:"card__title",children:i}),e.jsx(j,{icon:u?" mng-lnc-subtract":" mng-lnc-add",sizeInUnits:"1.25rem",className:"card__icon"})]}),u&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"card__description",children:c}),d&&e.jsx(e.Fragment,{children:_?e.jsxs("div",{className:"card__impression feedback",children:[e.jsx(j,{icon:" mng-lnc-checkmark--outline",sizeInUnits:"1.25rem",color:"success"}),e.jsx("div",{className:"imppression__question",children:h})]}):e.jsxs("div",{className:"card__impression",children:[e.jsx("div",{className:"imppression__question",children:l}),e.jsxs("div",{className:"impression__actions",children:[e.jsx(P,{icon:" mng-lnc-thumbs-up",borderRadius:"curved",btnType:"outline",onClick:o=>s(o,!0)}),e.jsx(P,{icon:" mng-lnc-thumbs-down",borderRadius:"curved",btnType:"outline",onClick:o=>s(o,!1)})]})]})})]})]})},S=f.forwardRef(({items:i=[],questionText:c,feedbackText:l,showMoreText:h,impressions:d=!1,onSelectItem:t=()=>{},onImpressed:p=()=>{}},u)=>{const a=N.useDetectMobile(),[_,m]=f.useState(!1),x=()=>{m(o=>!o)},s=f.useMemo(()=>{if(a)return i==null?void 0:i.map((r,y)=>e.jsx(w,{title:r==null?void 0:r.title,description:r==null?void 0:r.description,questionText:c,feedbackText:l,impressions:d,onSelectItem:()=>t(r),onImpressed:T=>p(r,T)},`faq-section-item__${y+1}`));const o=[],g=[];return i==null||i.forEach((r,y)=>{y%2===0?o.push(e.jsx(w,{title:r==null?void 0:r.title,description:r==null?void 0:r.description,questionText:c,feedbackText:l,impressions:d,onSelectItem:()=>t(r),onImpressed:T=>p(r,T)},`faq-section-item__${y+1}`)):g.push(e.jsx(w,{title:r==null?void 0:r.title,description:r==null?void 0:r.description,questionText:c,feedbackText:l,impressions:d,onSelectItem:()=>t(r),onImpressed:T=>p(r,T)},`faq-section-item__${y+1}`))}),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"section__column",children:o}),e.jsx("div",{className:"section__column",children:g})]})},[i,a]);return e.jsx(E,{children:a?_?s:e.jsxs(e.Fragment,{children:[s==null?void 0:s.slice(0,4),(s==null?void 0:s.length)>4&&e.jsx(C,{text:h,btnType:"basic",color:"neutral",className:"section__show-more",onClick:x})]}):s})});w.propTypes={title:n.PropTypes.string,description:n.PropTypes.string,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};S.propTypes={items:n.PropTypes.array,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};const F=b.styled.div`
+"use strict";const e=require("react/jsx-runtime"),h=require("react"),n=require("./index-BpbMKBf_.cjs"),P=require("./tag-Bov1gw34.cjs"),w=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Icon.cjs"),b=require("./IconButton.cjs"),I=require("./Button.cjs"),N=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./consts-goSZX3xP.cjs"),m=({title:t,description:i,questionText:a,feedbackText:g,impressions:l=!1,onSelectItem:p=()=>{},onImpressed:d=()=>{}})=>{const[u,c]=h.useState(!1),[x,f]=h.useState(!1),y=()=>{c(o=>!o),p()},r=(o,_)=>{o==null||o.stopPropagation(),f(!0),d(_)};return e.jsxs(P.ItemContainer,{className:u?"expanded":"",onClick:y,children:[e.jsxs("div",{className:"card__heading",children:[e.jsx("div",{className:"card__title",children:t}),e.jsx(q,{icon:u?" mng-lnc-subtract":" mng-lnc-add",sizeInUnits:"1.25rem",className:"card__icon"})]}),u&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"card__description",children:i}),l&&e.jsx(e.Fragment,{children:x?e.jsxs("div",{className:"card__impression feedback",children:[e.jsx(q,{icon:" mng-lnc-checkmark--outline",sizeInUnits:"1.25rem",color:"success"}),e.jsx("div",{className:"imppression__question",children:g})]}):e.jsxs("div",{className:"card__impression",children:[e.jsx("div",{className:"imppression__question",children:a}),e.jsxs("div",{className:"impression__actions",children:[e.jsx(b,{icon:" mng-lnc-thumbs-up",borderRadius:"curved",btnType:"outline",onClick:o=>r(o,!0)}),e.jsx(b,{icon:" mng-lnc-thumbs-down",borderRadius:"curved",btnType:"outline",onClick:o=>r(o,!1)})]})]})})]})]})},v=h.forwardRef(({items:t=[],questionText:i,feedbackText:a,showMoreText:g,impressions:l=!1,onSelectItem:p=()=>{},onImpressed:d=()=>{}},u)=>{const c=w.useDetectMobile(),[x,f]=h.useState(!1),y=()=>{f(o=>!o)},r=h.useMemo(()=>{if(c)return t==null?void 0:t.map((s,T)=>e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${T+1}`));const o=[],_=[];return t==null||t.forEach((s,T)=>{T%2===0?o.push(e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${T+1}`)):_.push(e.jsx(m,{title:s==null?void 0:s.title,description:s==null?void 0:s.description,questionText:i,feedbackText:a,impressions:l,onSelectItem:()=>p(s),onImpressed:j=>d(s,j)},`faq-section-item__${T+1}`))}),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"section__column",children:o}),e.jsx("div",{className:"section__column",children:_})]})},[t,c]);return e.jsx(P.ItemsContainer,{children:c?x?r:e.jsxs(e.Fragment,{children:[r==null?void 0:r.slice(0,4),(r==null?void 0:r.length)>4&&e.jsx(I,{text:g,btnType:"basic",color:"neutral",className:"section__show-more",onClick:y})]}):r})});m.propTypes={title:n.PropTypes.string,description:n.PropTypes.string,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};v.propTypes={items:n.PropTypes.array,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};const M=N.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -202,7 +30,7 @@
     line-height: 1.5rem;
   }
 
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${k.MOBILE_SIZE_PX+"px"}) {
     & .section__title {
       font-size: 1rem;
       font-weight: 500;
@@ -216,4 +44,4 @@
       letter-spacing: 0.25px;
     }
   }
-`,k=f.forwardRef(({title:i,description:c,questionText:l="What do you think about this answer?",feedbackText:h="Thank you for feedback!",showMoreText:d="Show more",allTagText:t="All",impressions:p=!1,tags:u=[],items:a=[],onSelectItem:_=()=>{},onImpressed:m=()=>{}},x)=>{const[s,o]=f.useState(null),g=r=>{o(r==null?void 0:r.code)};return e.jsxs(F,{ref:x,children:[e.jsxs("div",{className:"section__heading",children:[i&&e.jsx("div",{className:"section__title",children:i}),c&&e.jsx("div",{className:"section__description",children:c})]}),e.jsx(I,{tags:u,allTagText:t,selectedTagCode:s,onSelectTag:g}),e.jsx(S,{items:s===null?a:a==null?void 0:a.filter(r=>(r==null?void 0:r.tagCode)===s),questionText:l,feedbackText:h,showMoreText:d,impressions:p,onSelectItem:_,onImpressed:m},`faq-section-items__${s}`)]})});k.propTypes={title:n.PropTypes.string,description:n.PropTypes.string,tags:n.PropTypes.array,items:n.PropTypes.array,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,allTagText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};module.exports=k;
+`,S=h.forwardRef(({title:t,description:i,questionText:a="What do you think about this answer?",feedbackText:g="Thank you for feedback!",showMoreText:l="Show more",allTagText:p="All",impressions:d=!1,tags:u=[],items:c=[],onSelectItem:x=()=>{},onImpressed:f=()=>{}},y)=>{const[r,o]=h.useState(null),_=s=>{o(s==null?void 0:s.code)};return e.jsxs(M,{ref:y,children:[e.jsxs("div",{className:"section__heading",children:[t&&e.jsx("div",{className:"section__title",children:t}),i&&e.jsx("div",{className:"section__description",children:i})]}),e.jsx(P.FaqSectionTags,{tags:u,allTagText:p,selectedTagCode:r,onSelectTag:_}),e.jsx(v,{items:r===null?c:c==null?void 0:c.filter(s=>(s==null?void 0:s.tagCode)===r),questionText:a,feedbackText:g,showMoreText:l,impressions:d,onSelectItem:x,onImpressed:f},`faq-section-items__${r}`)]})});S.propTypes={title:n.PropTypes.string,description:n.PropTypes.string,tags:n.PropTypes.array,items:n.PropTypes.array,questionText:n.PropTypes.string,feedbackText:n.PropTypes.string,showMoreText:n.PropTypes.string,allTagText:n.PropTypes.string,impressions:n.PropTypes.bool,onSelectItem:n.PropTypes.func,onImpressed:n.PropTypes.func};module.exports=S;