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

React component library

import { jsx as n, jsxs as l, Fragment as w } from "react/jsx-runtime";
import { forwardRef as C, useState as S, useMemo as k } from "react";
import { I as q, a as x, F } from "./tag-CHNc7DhI.js";
import { u as M } from "./useDetectMobile-B0Jog4jQ.js";
import y from "./Icon.js";
import I from "./IconButton.js";
import T from "./Button.js";
import { s as $ } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as z } from "./breakpoints-BubDitvo.js";
const b = ({
  title: s,
  description: t,
  questionText: a,
  feedbackText: _,
  impressions: i = !1,
  onSelectItem: d = () => {
  },
  onImpressed: h = () => {
  }
}) => {
  const [p, r] = S(!1), [f, u] = S(!1), g = () => {
    r((c) => !c), d();
  }, o = (c, m) => {
    c == null || c.stopPropagation(), u(!0), h(m);
  };
  return /* @__PURE__ */ l(
    x,
    {
      className: p ? "expanded" : "",
      onClick: g,
      children: [
        /* @__PURE__ */ l("div", { className: "card__heading", children: [
          /* @__PURE__ */ n("div", { className: "card__title", children: s }),
          /* @__PURE__ */ n(
            y,
            {
              icon: p ? " mng-lnc-subtract" : " mng-lnc-add",
              sizeInUnits: "1.25rem",
              className: "card__icon"
            }
          )
        ] }),
        p && /* @__PURE__ */ l(w, { children: [
          /* @__PURE__ */ n("div", { className: "card__description", children: t }),
          i && /* @__PURE__ */ n(w, { children: f ? /* @__PURE__ */ l("div", { className: "card__impression feedback", children: [
            /* @__PURE__ */ n(
              y,
              {
                icon: " mng-lnc-checkmark--outline",
                sizeInUnits: "1.25rem",
                color: "success"
              }
            ),
            /* @__PURE__ */ n("div", { className: "imppression__question", children: _ })
          ] }) : /* @__PURE__ */ l("div", { className: "card__impression", children: [
            /* @__PURE__ */ n("div", { className: "imppression__question", children: a }),
            /* @__PURE__ */ l("div", { className: "impression__actions", children: [
              /* @__PURE__ */ n(
                I,
                {
                  icon: " mng-lnc-thumbs-up",
                  borderRadius: "curved",
                  btnType: "outline",
                  onClick: (c) => o(c, !0)
                }
              ),
              /* @__PURE__ */ n(
                I,
                {
                  icon: " mng-lnc-thumbs-down",
                  borderRadius: "curved",
                  btnType: "outline",
                  onClick: (c) => o(c, !1)
                }
              )
            ] })
          ] }) })
        ] })
      ]
    }
  );
}, E = C(
  ({
    items: s = [],
    questionText: t,
    feedbackText: a,
    showMoreText: _,
    impressions: i = !1,
    onSelectItem: d = () => {
    },
    onImpressed: h = () => {
    }
  }, p) => {
    const r = M(), [f, u] = S(!1), g = () => {
      u((c) => !c);
    }, o = k(() => {
      if (r)
        return s == null ? void 0 : s.map((e, v) => /* @__PURE__ */ n(
          b,
          {
            title: e == null ? void 0 : e.title,
            description: e == null ? void 0 : e.description,
            questionText: t,
            feedbackText: a,
            impressions: i,
            onSelectItem: () => d(e),
            onImpressed: (N) => h(e, N)
          },
          `faq-section-item__${v + 1}`
        ));
      const c = [], m = [];
      return s == null || s.forEach((e, v) => {
        v % 2 === 0 ? c.push(
          /* @__PURE__ */ n(
            b,
            {
              title: e == null ? void 0 : e.title,
              description: e == null ? void 0 : e.description,
              questionText: t,
              feedbackText: a,
              impressions: i,
              onSelectItem: () => d(e),
              onImpressed: (N) => h(e, N)
            },
            `faq-section-item__${v + 1}`
          )
        ) : m.push(
          /* @__PURE__ */ n(
            b,
            {
              title: e == null ? void 0 : e.title,
              description: e == null ? void 0 : e.description,
              questionText: t,
              feedbackText: a,
              impressions: i,
              onSelectItem: () => d(e),
              onImpressed: (N) => h(e, N)
            },
            `faq-section-item__${v + 1}`
          )
        );
      }), /* @__PURE__ */ l(w, { children: [
        /* @__PURE__ */ n("div", { className: "section__column", children: c }),
        /* @__PURE__ */ n("div", { className: "section__column", children: m })
      ] });
    }, [s, r]);
    return /* @__PURE__ */ n(q, { ref: p, children: r ? f ? o : /* @__PURE__ */ l(w, { children: [
      o == null ? void 0 : o.slice(0, 4),
      (o == null ? void 0 : o.length) > 4 && /* @__PURE__ */ n(
        T,
        {
          text: _,
          btnType: "basic",
          color: "neutral",
          className: "section__show-more",
          onClick: g
        }
      )
    ] }) : o });
  }
), R = $.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 ${z("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;
    }
  }
`, J = C(
  ({
    title: s,
    description: t,
    questionText: a = "What do you think about this answer?",
    feedbackText: _ = "Thank you for feedback!",
    showMoreText: i = "Show more",
    allTagText: d = "All",
    impressions: h = !1,
    tags: p = [],
    items: r = [],
    onSelectItem: f = () => {
    },
    onImpressed: u = () => {
    }
  }, g) => {
    const [o, c] = S(null);
    return /* @__PURE__ */ l(R, { ref: g, children: [
      /* @__PURE__ */ l("div", { className: "section__heading", children: [
        s && /* @__PURE__ */ n("div", { className: "section__title", children: s }),
        t && /* @__PURE__ */ n("div", { className: "section__description", children: t })
      ] }),
      /* @__PURE__ */ n(
        F,
        {
          tags: p,
          allTagText: d,
          selectedTagCode: o,
          onSelectTag: (e) => {
            c(e == null ? void 0 : e.code);
          }
        }
      ),
      /* @__PURE__ */ n(
        E,
        {
          items: o === null ? r : r == null ? void 0 : r.filter((e) => (e == null ? void 0 : e.tagCode) === o),
          questionText: a,
          feedbackText: _,
          showMoreText: i,
          impressions: h,
          onSelectItem: f,
          onImpressed: u
        },
        `faq-section-items__${o}`
      )
    ] });
  }
);
export {
  J as default
};