@fremtind/jkl-feedback-react/build/esm/followup/Followup.js

Jøkul react feedback component

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import {
  PrimaryButton,
  SecondaryButton,
  TertiaryButton
} from "@fremtind/jkl-button-react";
import React, { useEffect, useRef, useState } from "react";
import { useFeedbackContext } from "../feedbackContext";
import { FeedbackSuccess } from "../FeedbackSuccess";
import { getQuestionFromType } from "../utils";
import { FollowUpProvider } from "./followupContext";
import { useFollowup } from "./useFollowup";
const defaultSuccessMessage = {
  title: "Takk, igjen!",
  children: "Vi setter pris p\xE5 at du tok deg tid til \xE5 svare p\xE5 flere sp\xF8rsm\xE5l. Det hjelper oss med \xE5 gj\xF8re nettsidene bedre for deg og alle andre som bruker dem."
};
const Followup = ({
  questions,
  successMessage = defaultSuccessMessage,
  onSubmit
}) => {
  const [noThanks, setNoThanks] = useState(false);
  const focusRef = useRef(null);
  const followupState = useFollowup(questions, onSubmit);
  const { handleAbort, handleNext, step, submitted } = followupState;
  const {
    followupStarted,
    setFollowupStarted,
    setFollowupSubmitted,
    contactSubmitted,
    landmarkLabel
  } = useFeedbackContext();
  useEffect(() => {
    if (step.number === 0) {
      return;
    }
    focusRef.current && focusRef.current.focus();
  }, [step]);
  useEffect(() => {
    setFollowupSubmitted(submitted);
  }, [submitted, setFollowupSubmitted]);
  const QuestionComponent = getQuestionFromType(questions[step.number].type);
  const Button = step.isLast ? PrimaryButton : SecondaryButton;
  if (noThanks) {
    return null;
  }
  return /* @__PURE__ */ React.createElement("div", { "aria-live": "polite" }, /* @__PURE__ */ React.createElement(FollowUpProvider, { state: followupState }, !followupStarted && /* @__PURE__ */ React.createElement("div", { className: "jkl-feedback__fade-in" }, /* @__PURE__ */ React.createElement("p", { className: "jkl-heading-4 jkl-spacing-xl--top jkl-spacing-xs--bottom" }, "Har du tid til \xE5 svare p\xE5 noen flere sp\xF8rsm\xE5l?"), /* @__PURE__ */ React.createElement("p", { className: "jkl-body jkl-spacing-xl--bottom" }, "Det tar kun et minutt, og hjelper oss \xE5 lage bedre l\xF8sninger for deg."), /* @__PURE__ */ React.createElement(
    PrimaryButton,
    {
      onClick: () => setFollowupStarted(true),
      className: "jkl-spacing-xl--right"
    },
    "Jeg har tid!"
  ), /* @__PURE__ */ React.createElement(TertiaryButton, { onClick: () => setNoThanks(true) }, "Nei takk")), !submitted && followupStarted && /* @__PURE__ */ React.createElement(
    "form",
    {
      onSubmit: handleNext,
      className: "jkl-feedback__fade-in",
      "aria-label": landmarkLabel
    },
    /* @__PURE__ */ React.createElement(
      "p",
      {
        className: "jkl-feedback__step-counter",
        ref: focusRef
      },
      "Steg ",
      step.number + 1,
      " av ",
      questions.length
    ),
    /* @__PURE__ */ React.createElement(
      QuestionComponent,
      __spreadProps(__spreadValues({}, questions[step.number]), {
        autoFocus: true,
        key: step.number
      })
    ),
    /* @__PURE__ */ React.createElement("div", { className: "jkl-spacing-xl--top", "aria-live": "off" }, /* @__PURE__ */ React.createElement(Button, { type: "submit" }, step.isLast ? "Send inn" : "Neste"), /* @__PURE__ */ React.createElement(
      TertiaryButton,
      {
        onClick: handleAbort,
        className: "jkl-spacing-xl--left"
      },
      "Avbryt"
    ))
  ), submitted && !contactSubmitted && /* @__PURE__ */ React.createElement(FeedbackSuccess, __spreadValues({}, successMessage))));
};
export {
  Followup
};
//# sourceMappingURL=Followup.js.map