@norges-domstoler/dds-components 13.5.0 → 13.6.0

package/dist/cjs/index.d.ts

@@ -48,3 +48,4 @@ export * from './types/BaseComponentProps';
 export * from './helpers/ScreenSize';
 export * from './components/EmptyContent';
 export * from './components/BackLink';
+export * from './components/Feedback';

package/dist/cjs/index.js

@@ -11495,6 +11495,201 @@ var BackLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 BackLink.displayName = 'BackLink';
 
+var FlexContainer = styled__default.default.div.withConfig({
+  displayName: "FlexContainer",
+  componentId: "sc-se7ebh-0"
+})(["display:flex;", ";"], function (_ref) {
+  var flexDirection = _ref.flexDirection;
+  return styled.css(["flex-direction:", ";gap:", ";"], flexDirection, ddsDesignTokens.ddsBaseTokens.spacing.SizesDdsSpacingLocalX1);
+});
+
+var RatingContainer = styled__default.default.div.withConfig({
+  displayName: "RatingComponent__RatingContainer",
+  componentId: "sc-3siwxn-0"
+})(["display:flex;gap:", ";", ""], ddsDesignTokens.ddsBaseTokens.spacing.SizesDdsSpacingLocalX1, function (_ref) {
+  var layout = _ref.layout;
+  return styled.css(["flex-direction:", ";align-items:", ";"], layout === 'horizontal' ? 'row' : 'column', layout === 'horizontal' ? 'center' : 'start');
+});
+var RatingButton = styled__default.default(Button$1).withConfig({
+  displayName: "RatingComponent__RatingButton",
+  componentId: "sc-3siwxn-1"
+})(["padding:0px;color:", ";"], ddsDesignTokens.ddsBaseTokens.colors.DdsColorNeutralsGray7);
+var RatingComponent = function RatingComponent(_ref2) {
+  var layout = _ref2.layout,
+    ratingLabel = _ref2.ratingLabel,
+    loading = _ref2.loading,
+    thumbUpTooltip = _ref2.thumbUpTooltip,
+    thumbDownTooltip = _ref2.thumbDownTooltip,
+    handleRatingChange = _ref2.handleRatingChange;
+  return jsxRuntime.jsxs(RatingContainer, {
+    layout: layout,
+    children: [jsxRuntime.jsx(Label$2, {
+      children: ratingLabel
+    }), loading ? jsxRuntime.jsx(Spinner, {
+      tooltip: "Laster opp tilbakemelding ..."
+    }) : jsxRuntime.jsxs(FlexContainer, {
+      flexDirection: "row",
+      children: [jsxRuntime.jsx(Tooltip, {
+        text: thumbUpTooltip,
+        children: jsxRuntime.jsx(RatingButton, {
+          htmlProps: {
+            'aria-label': thumbUpTooltip
+          },
+          icon: Thumbup,
+          appearance: "borderless",
+          onClick: function onClick() {
+            return handleRatingChange('positive');
+          },
+          size: "large"
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        text: thumbDownTooltip,
+        children: jsxRuntime.jsx("div", {
+          children: jsxRuntime.jsx(RatingButton, {
+            htmlProps: {
+              'aria-label': thumbDownTooltip
+            },
+            icon: Thumbdown,
+            appearance: "borderless",
+            onClick: function onClick() {
+              return handleRatingChange('negative');
+            },
+            size: "large"
+          })
+        })
+      })]
+    })]
+  });
+};
+
+var IconLabelSpan = styled__default.default.span.withConfig({
+  displayName: "CommentComponent__IconLabelSpan",
+  componentId: "sc-15c6vik-0"
+})(["display:inline-flex;align-items:center;gap:", ";"], ddsDesignTokens.ddsBaseTokens.spacing.SizesDdsSpacingLocalX05);
+var CommentComponent = function CommentComponent(_ref) {
+  var rating = _ref.rating,
+    feedbackText = _ref.feedbackText,
+    positiveFeedbackLabel = _ref.positiveFeedbackLabel,
+    negativeFeedbackLabel = _ref.negativeFeedbackLabel,
+    ratingSubmittedTitle = _ref.ratingSubmittedTitle,
+    loading = _ref.loading,
+    handleSubmit = _ref.handleSubmit,
+    handleFeedbackTextChange = _ref.handleFeedbackTextChange;
+  return jsxRuntime.jsxs(FlexContainer, {
+    flexDirection: "column",
+    children: [jsxRuntime.jsxs(IconLabelSpan, {
+      children: [jsxRuntime.jsx(Icon, {
+        icon: rating === 'positive' ? ThumbupFilled : ThumbdownFilled,
+        color: ddsDesignTokens.ddsBaseTokens.colors.DdsColorInteractiveBase
+      }), jsxRuntime.jsxs(Paragraph, {
+        children: [ratingSubmittedTitle, " "]
+      })]
+    }), jsxRuntime.jsx(TextArea, {
+      value: feedbackText,
+      onChange: function onChange(e) {
+        return handleFeedbackTextChange(e.target.value);
+      },
+      label: rating === 'positive' ? positiveFeedbackLabel : negativeFeedbackLabel,
+      tip: "Ikke send inn personopplysninger eller annen sensitiv informasjon"
+    }), jsxRuntime.jsx(Button$1, {
+      label: "Send inn",
+      purpose: "secondary",
+      size: "small",
+      onClick: handleSubmit,
+      loading: loading
+    })]
+  });
+};
+
+var Feedback = function Feedback(_ref) {
+  var _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
+    _ref$ratingLabel = _ref.ratingLabel,
+    ratingLabel = _ref$ratingLabel === void 0 ? 'Hva syns du om tjenesten?' : _ref$ratingLabel,
+    _ref$positiveFeedback = _ref.positiveFeedbackLabel,
+    positiveFeedbackLabel = _ref$positiveFeedback === void 0 ? 'Hva kan vi forbedre? (valgfritt)' : _ref$positiveFeedback,
+    _ref$negativeFeedback = _ref.negativeFeedbackLabel,
+    negativeFeedbackLabel = _ref$negativeFeedback === void 0 ? 'Hva kan vi forbedre? (valgfritt)' : _ref$negativeFeedback,
+    _ref$ratingSubmittedT = _ref.ratingSubmittedTitle,
+    ratingSubmittedTitle = _ref$ratingSubmittedT === void 0 ? 'Tusen takk! Tilbakemeldingen din hjelper oss å forbedre løsningen' : _ref$ratingSubmittedT,
+    _ref$submittedTitle = _ref.submittedTitle,
+    submittedTitle = _ref$submittedTitle === void 0 ? 'Tusen takk! Tilbakemeldingen din hjelper oss å forbedre løsningen' : _ref$submittedTitle,
+    ratingProp = _ref.ratingValue,
+    feedbackTextProp = _ref.feedbackTextValue,
+    _ref$thumbUpTooltip = _ref.thumbUpTooltip,
+    thumbUpTooltip = _ref$thumbUpTooltip === void 0 ? 'Bra' : _ref$thumbUpTooltip,
+    _ref$thumbDownTooltip = _ref.thumbDownTooltip,
+    thumbDownTooltip = _ref$thumbDownTooltip === void 0 ? 'Dårlig' : _ref$thumbDownTooltip,
+    _ref$feedbackTextArea = _ref.feedbackTextAreaExcluded,
+    feedbackTextAreaExcluded = _ref$feedbackTextArea === void 0 ? false : _ref$feedbackTextArea,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    isSubmittedProp = _ref.isSubmitted,
+    onRating = _ref.onRating,
+    onFeedbackTextChange = _ref.onFeedbackTextChange,
+    onSubmit = _ref.onSubmit;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    rating = _useState2[0],
+    setRating = _useState2[1];
+  var _useState3 = React.useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    feedbackText = _useState4[0],
+    setFeedbackText = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFeedbackSubmitted = _useState6[0],
+    setIsFeedbackSubmitted = _useState6[1];
+  React.useEffect(function () {
+    ratingProp !== undefined && setRating(ratingProp);
+  }, [ratingProp]);
+  React.useEffect(function () {
+    feedbackTextProp !== undefined && setFeedbackText(feedbackTextProp);
+  }, [feedbackTextProp]);
+  React.useEffect(function () {
+    isSubmittedProp !== undefined && setIsFeedbackSubmitted(isSubmittedProp);
+  }, [isSubmittedProp]);
+  var handleRatingChange = function handleRatingChange(newRating) {
+    onRating && onRating(newRating);
+    onSubmit && feedbackTextAreaExcluded && onSubmit(newRating, '');
+    ratingProp === undefined && setRating(newRating);
+  };
+  var handleFeedbackTextChange = function handleFeedbackTextChange(newFeedbackText) {
+    onFeedbackTextChange && onFeedbackTextChange(newFeedbackText);
+    feedbackTextProp === undefined && setFeedbackText(newFeedbackText);
+  };
+  var handleSubmit = function handleSubmit() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Ved submit er rating alltid satt
+    onSubmit && onSubmit(rating, feedbackText !== null && feedbackText !== void 0 ? feedbackText : '');
+    isSubmittedProp === undefined && setIsFeedbackSubmitted(true);
+  };
+  if (rating === null && !isFeedbackSubmitted) {
+    return jsxRuntime.jsx(RatingComponent, {
+      layout: layout,
+      ratingLabel: ratingLabel,
+      loading: loading,
+      thumbUpTooltip: thumbUpTooltip,
+      thumbDownTooltip: thumbDownTooltip,
+      handleRatingChange: handleRatingChange
+    });
+  }
+  if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) {
+    return jsxRuntime.jsx(CommentComponent, {
+      rating: rating,
+      feedbackText: feedbackText,
+      positiveFeedbackLabel: positiveFeedbackLabel,
+      negativeFeedbackLabel: negativeFeedbackLabel,
+      ratingSubmittedTitle: ratingSubmittedTitle,
+      loading: loading,
+      handleSubmit: handleSubmit,
+      handleFeedbackTextChange: handleFeedbackTextChange
+    });
+  }
+  return jsxRuntime.jsx(Paragraph, {
+    children: submittedTitle
+  });
+};
+
 exports.AgreementIcon = AgreementIcon;
 exports.AppsIcon = AppsIcon;
 exports.ArchiveIcon = ArchiveIcon;
@@ -11573,6 +11768,7 @@ exports.ExclaimIcon = ExclaimIcon;
 exports.ExpandIcon = ExpandIcon;
 exports.FacebookIcon = FacebookIcon;
 exports.FamilyIcon = FamilyIcon;
+exports.Feedback = Feedback;
 exports.FeedbackIcon = FeedbackIcon;
 exports.FileAddIcon = FileAddIcon;
 exports.FileIcon = FileIcon;

package/dist/components/Button/Button.stories.d.ts

@@ -2,7 +2,7 @@
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick">, "className" | "id"> & {
         size?: import("./Button.types").ButtonSize | undefined;
         label?: string | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;
@@ -15,12 +15,12 @@ declare const _default: {
         href?: string | undefined;
         target?: string | undefined;
     } & {
+        type?: "button" | "submit" | "reset" | undefined;
         onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-        type?: "button" | "submit" | "reset" | undefined;
     } & {
-        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
+        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick"> | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         label: {

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -2,14 +2,14 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked">, "className" | "id"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
     } & import("../../types").CheckboxPickedHTMLAttributes & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

package/dist/components/Chip/Chip.stories.d.ts

@@ -2,7 +2,7 @@
 import { ChipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         text?: string | undefined;
         onClose?: (() => void) | undefined;
     } & {

package/dist/components/DescriptionList/DescriptionList.stories.d.ts

@@ -2,9 +2,9 @@
 import { DescriptionListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "className" | "id"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
-        direction?: "row" | "column" | undefined;
+        direction?: "column" | "row" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {

package/dist/components/Divider/Divider.stories.d.ts

@@ -2,7 +2,7 @@
 import { DividerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHRElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHRElement>, "className" | "id"> & {
         color?: import("./Divider").DividerColor | undefined;
     } & {
         htmlProps?: import("react").HTMLAttributes<HTMLHRElement> | undefined;

package/dist/components/Drawer/Drawer.stories.d.ts

@@ -2,7 +2,7 @@
 import { DrawerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
         size?: import("./Drawer").DrawerSize | undefined;
         placement?: import("./Drawer").DrawerPlacement | undefined;
         header?: import("react").ReactNode;

package/dist/components/Feedback/CommentComponent.d.ts

@@ -0,0 +1,13 @@
+import { Rating } from './Feedback.types';
+type CommentComponentType = {
+    rating: Rating | null;
+    feedbackText: string | undefined;
+    positiveFeedbackLabel: string;
+    negativeFeedbackLabel: string;
+    ratingSubmittedTitle: string;
+    loading: boolean;
+    handleSubmit: () => void;
+    handleFeedbackTextChange: (newText: string) => void;
+};
+export declare const CommentComponent: ({ rating, feedbackText, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, loading, handleSubmit, handleFeedbackTextChange, }: CommentComponentType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Feedback/CommentComponent.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { FlexContainer } from './FlexContainer.js';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { Icon } from '../Icon/Icon.js';
+import 'tslib';
+import '../../icons/utils/StyledSvg.js';
+import { ThumbdownFilled } from '../../icons/tsx/thumbdownFilled.js';
+import { ThumbupFilled } from '../../icons/tsx/thumbupFilled.js';
+import { Button } from '../Button/Button.js';
+import { TextArea } from '../TextArea/TextArea.js';
+import '../Typography/Typography/Typography.js';
+import '../Typography/Label/Label.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
+import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
+
+var IconLabelSpan = styled.span.withConfig({
+  displayName: "CommentComponent__IconLabelSpan",
+  componentId: "sc-15c6vik-0"
+})(["display:inline-flex;align-items:center;gap:", ";"], ddsBaseTokens.spacing.SizesDdsSpacingLocalX05);
+var CommentComponent = function CommentComponent(_ref) {
+  var rating = _ref.rating,
+    feedbackText = _ref.feedbackText,
+    positiveFeedbackLabel = _ref.positiveFeedbackLabel,
+    negativeFeedbackLabel = _ref.negativeFeedbackLabel,
+    ratingSubmittedTitle = _ref.ratingSubmittedTitle,
+    loading = _ref.loading,
+    handleSubmit = _ref.handleSubmit,
+    handleFeedbackTextChange = _ref.handleFeedbackTextChange;
+  return jsxs(FlexContainer, {
+    flexDirection: "column",
+    children: [jsxs(IconLabelSpan, {
+      children: [jsx(Icon, {
+        icon: rating === 'positive' ? ThumbupFilled : ThumbdownFilled,
+        color: ddsBaseTokens.colors.DdsColorInteractiveBase
+      }), jsxs(Paragraph, {
+        children: [ratingSubmittedTitle, " "]
+      })]
+    }), jsx(TextArea, {
+      value: feedbackText,
+      onChange: function onChange(e) {
+        return handleFeedbackTextChange(e.target.value);
+      },
+      label: rating === 'positive' ? positiveFeedbackLabel : negativeFeedbackLabel,
+      tip: "Ikke send inn personopplysninger eller annen sensitiv informasjon"
+    }), jsx(Button, {
+      label: "Send inn",
+      purpose: "secondary",
+      size: "small",
+      onClick: handleSubmit,
+      loading: loading
+    })]
+  });
+};
+
+export { CommentComponent };

package/dist/components/Feedback/Feedback.d.ts

@@ -0,0 +1,2 @@
+import { FeedbackProps } from './Feedback.types';
+export declare const Feedback: ({ layout, ratingLabel, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, submittedTitle, ratingValue: ratingProp, feedbackTextValue: feedbackTextProp, thumbUpTooltip, thumbDownTooltip, feedbackTextAreaExcluded, loading, isSubmitted: isSubmittedProp, onRating, onFeedbackTextChange, onSubmit, }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Feedback/Feedback.js

@@ -0,0 +1,103 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '../Typography/Typography/Typography.js';
+import '../Typography/Label/Label.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
+import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
+import { RatingComponent } from './RatingComponent.js';
+import { CommentComponent } from './CommentComponent.js';
+
+var Feedback = function Feedback(_ref) {
+  var _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
+    _ref$ratingLabel = _ref.ratingLabel,
+    ratingLabel = _ref$ratingLabel === void 0 ? 'Hva syns du om tjenesten?' : _ref$ratingLabel,
+    _ref$positiveFeedback = _ref.positiveFeedbackLabel,
+    positiveFeedbackLabel = _ref$positiveFeedback === void 0 ? 'Hva kan vi forbedre? (valgfritt)' : _ref$positiveFeedback,
+    _ref$negativeFeedback = _ref.negativeFeedbackLabel,
+    negativeFeedbackLabel = _ref$negativeFeedback === void 0 ? 'Hva kan vi forbedre? (valgfritt)' : _ref$negativeFeedback,
+    _ref$ratingSubmittedT = _ref.ratingSubmittedTitle,
+    ratingSubmittedTitle = _ref$ratingSubmittedT === void 0 ? 'Tusen takk! Tilbakemeldingen din hjelper oss å forbedre løsningen' : _ref$ratingSubmittedT,
+    _ref$submittedTitle = _ref.submittedTitle,
+    submittedTitle = _ref$submittedTitle === void 0 ? 'Tusen takk! Tilbakemeldingen din hjelper oss å forbedre løsningen' : _ref$submittedTitle,
+    ratingProp = _ref.ratingValue,
+    feedbackTextProp = _ref.feedbackTextValue,
+    _ref$thumbUpTooltip = _ref.thumbUpTooltip,
+    thumbUpTooltip = _ref$thumbUpTooltip === void 0 ? 'Bra' : _ref$thumbUpTooltip,
+    _ref$thumbDownTooltip = _ref.thumbDownTooltip,
+    thumbDownTooltip = _ref$thumbDownTooltip === void 0 ? 'Dårlig' : _ref$thumbDownTooltip,
+    _ref$feedbackTextArea = _ref.feedbackTextAreaExcluded,
+    feedbackTextAreaExcluded = _ref$feedbackTextArea === void 0 ? false : _ref$feedbackTextArea,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    isSubmittedProp = _ref.isSubmitted,
+    onRating = _ref.onRating,
+    onFeedbackTextChange = _ref.onFeedbackTextChange,
+    onSubmit = _ref.onSubmit;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    rating = _useState2[0],
+    setRating = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    feedbackText = _useState4[0],
+    setFeedbackText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFeedbackSubmitted = _useState6[0],
+    setIsFeedbackSubmitted = _useState6[1];
+  useEffect(function () {
+    ratingProp !== undefined && setRating(ratingProp);
+  }, [ratingProp]);
+  useEffect(function () {
+    feedbackTextProp !== undefined && setFeedbackText(feedbackTextProp);
+  }, [feedbackTextProp]);
+  useEffect(function () {
+    isSubmittedProp !== undefined && setIsFeedbackSubmitted(isSubmittedProp);
+  }, [isSubmittedProp]);
+  var handleRatingChange = function handleRatingChange(newRating) {
+    onRating && onRating(newRating);
+    onSubmit && feedbackTextAreaExcluded && onSubmit(newRating, '');
+    ratingProp === undefined && setRating(newRating);
+  };
+  var handleFeedbackTextChange = function handleFeedbackTextChange(newFeedbackText) {
+    onFeedbackTextChange && onFeedbackTextChange(newFeedbackText);
+    feedbackTextProp === undefined && setFeedbackText(newFeedbackText);
+  };
+  var handleSubmit = function handleSubmit() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- Ved submit er rating alltid satt
+    onSubmit && onSubmit(rating, feedbackText !== null && feedbackText !== void 0 ? feedbackText : '');
+    isSubmittedProp === undefined && setIsFeedbackSubmitted(true);
+  };
+  if (rating === null && !isFeedbackSubmitted) {
+    return jsx(RatingComponent, {
+      layout: layout,
+      ratingLabel: ratingLabel,
+      loading: loading,
+      thumbUpTooltip: thumbUpTooltip,
+      thumbDownTooltip: thumbDownTooltip,
+      handleRatingChange: handleRatingChange
+    });
+  }
+  if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) {
+    return jsx(CommentComponent, {
+      rating: rating,
+      feedbackText: feedbackText,
+      positiveFeedbackLabel: positiveFeedbackLabel,
+      negativeFeedbackLabel: negativeFeedbackLabel,
+      ratingSubmittedTitle: ratingSubmittedTitle,
+      loading: loading,
+      handleSubmit: handleSubmit,
+      handleFeedbackTextChange: handleFeedbackTextChange
+    });
+  }
+  return jsx(Paragraph, {
+    children: submittedTitle
+  });
+};
+
+export { Feedback };

package/dist/components/Feedback/Feedback.stories.d.ts

@@ -0,0 +1,66 @@
+import { FeedbackProps } from '.';
+declare const _default: {
+    title: string;
+    component: ({ layout, ratingLabel, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, submittedTitle, ratingValue: ratingProp, feedbackTextValue: feedbackTextProp, thumbUpTooltip, thumbDownTooltip, feedbackTextAreaExcluded, loading, isSubmitted: isSubmittedProp, onRating, onFeedbackTextChange, onSubmit, }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        layout: {
+            control: {
+                type: string;
+                options: {
+                    vertical: string;
+                    horizontal: string;
+                };
+            };
+        };
+        ratingLabel: {
+            control: string;
+        };
+        ratingValue: {
+            control: {
+                type: string;
+                options: {
+                    null: null;
+                    positive: string;
+                    negative: string;
+                };
+            };
+        };
+        positiveFeedbackLabel: {
+            control: string;
+        };
+        negativeFeedbackLabel: {
+            control: string;
+        };
+        feedbackTextValue: {
+            control: string;
+        };
+        thumbUpTooltip: {
+            control: string;
+        };
+        thumbDownTooltip: {
+            control: string;
+        };
+        feedbackTextAreaExcluded: {
+            control: string;
+        };
+        loading: {
+            control: string;
+        };
+        isSubmitted: {
+            control: string;
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalLayout: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutTextArea: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomLabels: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomButtonTooltips: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingState: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledComponent: (args: FeedbackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Feedback/Feedback.types.d.ts

@@ -0,0 +1,36 @@
+export type FeedbackProps = {
+    /**Om knappene skal være plassert under eller ved siden av teksten. */
+    layout?: Layout;
+    /**Label som er plassert over tommel opp/ned knappene */
+    ratingLabel: string;
+    /**Label til fritekstfeltet når bruker har gitt tommel opp */
+    positiveFeedbackLabel?: string;
+    /**Label til fritekstfeltet når bruker har gitt tommel ned */
+    negativeFeedbackLabel?: string;
+    /**Tittel som vises når bruker har gitt tommel opp/ned, og enda ikke sendt inn kommentar */
+    ratingSubmittedTitle?: string;
+    /**Tittel som vises når bruker har gitt feedback (inkl. eventuell kommentar) */
+    submittedTitle?: string;
+    /**Om tommel opp eller ned er valgt. Brukes når komponenten skal være styrt utenfra. */
+    ratingValue?: Rating | null;
+    /**Verdien til fritekstfeltet. Brukes når komponenten skal være styrt utenfra. */
+    feedbackTextValue?: string;
+    /**Tooltip-teksten til tommel-opp-knappen*/
+    thumbUpTooltip?: string;
+    /**Tooltip-teksten til tommel-ned-knappen*/
+    thumbDownTooltip?: string;
+    /**Om tilbakemeldingskomponenten skal ekskludere fritekstfeltet (i.e. kun ha tommel opp/ned).*/
+    feedbackTextAreaExcluded?: boolean;
+    /**Om knappene skal vise spinner. Gjelder både tommel opp/ned knappene, og "send inn" knappen. */
+    loading?: boolean;
+    /**Om tilbakemelding er sendt inn. Brukes når komponenten skal være styrt utenfra. */
+    isSubmitted?: boolean;
+    /**Callback når bruker har gitt tommelrating */
+    onRating?: (rating: Rating) => void;
+    /**Callback når bruker skriver noe i fritekstfeltet */
+    onFeedbackTextChange?: (feedbackText: string) => void;
+    /**Callback når bruker sender inn feedback */
+    onSubmit?: (rating: Rating, feedbackText: string) => void;
+};
+export type Rating = 'positive' | 'negative';
+export type Layout = 'vertical' | 'horizontal';

package/dist/components/Feedback/FlexContainer.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+type FlexContainerProps = {
+    flexDirection: CSSProperties['flexDirection'];
+};
+export declare const FlexContainer: import("styled-components").StyledComponent<"div", any, FlexContainerProps, never>;
+export {};

package/dist/components/Feedback/FlexContainer.js

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var FlexContainer = styled.div.withConfig({
+  displayName: "FlexContainer",
+  componentId: "sc-se7ebh-0"
+})(["display:flex;", ";"], function (_ref) {
+  var flexDirection = _ref.flexDirection;
+  return css(["flex-direction:", ";gap:", ";"], flexDirection, ddsBaseTokens.spacing.SizesDdsSpacingLocalX1);
+});
+
+export { FlexContainer };

package/dist/components/Feedback/RatingComponent.d.ts

@@ -0,0 +1,11 @@
+import { Layout, Rating } from './Feedback.types';
+type RatingComponentType = {
+    layout: Layout;
+    ratingLabel: string;
+    loading: boolean;
+    thumbUpTooltip: string;
+    thumbDownTooltip: string;
+    handleRatingChange: (rating: Rating) => void;
+};
+export declare const RatingComponent: ({ layout, ratingLabel, loading, thumbUpTooltip, thumbDownTooltip, handleRatingChange, }: RatingComponentType) => import("react/jsx-runtime").JSX.Element;
+export {};