@norges-domstoler/dds-components 24.2.1 → 24.3.0

package/dist/index.cjs

@@ -7349,22 +7349,15 @@ const TextArea = ({ id, value, defaultValue, onChange, errorMessage, required =
 };
 TextArea.displayName = "TextArea";
 //#endregion
-//#region src/components/Feedback/utils.tsx
-const getIconSize = (layout) => layout === "vertical" ? "large" : "medium";
-//#endregion
 //#region src/components/Feedback/CommentComponent.tsx
-const CommentComponent = ({ layout, rating, feedbackText, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, textAreaTip, loading, handleSubmit, handleFeedbackTextChange }) => {
+const CommentComponent = ({ rating, feedbackText, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, textAreaTip, loading, handleSubmit, handleFeedbackTextChange }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VStack, {
 		gap: "x1",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: Feedback_module_default["rating-submitted-title"],
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-					icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
-					color: "icon-action-resting",
-					iconSize: getIconSize(layout)
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Paragraph, { children: [ratingSubmittedTitle, " "] })]
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Paragraph, { children: [ratingSubmittedTitle, " "] })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextArea, {
 				value: feedbackText,
@@ -7390,6 +7383,9 @@ const texts$17 = createTexts({ send: {
 	se: "Sádde"
 } });
 //#endregion
+//#region src/components/Feedback/utils.tsx
+const getButtonSize = (layout) => layout === "vertical" ? "medium" : "small";
+//#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 const Tooltip = ({ text, placement = "bottom", children, tooltipId, delay = 100, style, onMouseLeave, onMouseOver, keepMounted = true, id, ref, className, htmlProps, ...rest }) => {
 	const generatedId = (0, react.useId)();
@@ -7485,26 +7481,32 @@ Tooltip.displayName = "Tooltip";
 //#region src/components/Feedback/RatingComponent.tsx
 const RatingComponent = ({ layout, ratingLabel, loading, thumbUpTooltip, thumbDownTooltip, handleRatingChange }) => {
 	const { t } = useTranslation();
-	const button = (rating, layout, tooltip) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineIconButton, {
-		"aria-label": tooltip,
-		onClick: () => handleRatingChange(rating),
-		size: getIconSize(layout),
-		icon: rating === "positive" ? ThumbUpIcon : ThumbDownIcon,
-		color: "icon-medium"
-	});
+	const buttonSize = getButtonSize(layout);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn(Feedback_module_default["rating-container"], Feedback_module_default[`rating-container--${layout}`]),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 			className: typographyStyles_module_default["label-medium"],
 			children: ratingLabel
 		}), loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spinner, { tooltip: t(texts$16.uploadingFeedback) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HStack, {
-			gap: "x1",
+			gap: "x0.75",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 				text: thumbUpTooltip,
-				children: button("positive", layout, thumbUpTooltip)
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					purpose: "secondary",
+					"aria-label": thumbUpTooltip,
+					onClick: () => handleRatingChange("positive"),
+					size: buttonSize,
+					icon: ThumbUpIcon
+				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 				text: thumbDownTooltip,
-				children: button("negative", layout, thumbDownTooltip)
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					purpose: "secondary",
+					"aria-label": thumbDownTooltip,
+					onClick: () => handleRatingChange("negative"),
+					size: buttonSize,
+					icon: ThumbDownIcon
+				})
 			})]
 		})]
 	});
@@ -7562,7 +7564,6 @@ const Feedback = ({ layout = "vertical", ratingLabel, positiveFeedbackLabel, neg
 		handleRatingChange
 	});
 	if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentComponent, {
-		layout,
 		rating,
 		feedbackText,
 		positiveFeedbackLabel: tPositiveFeedbackLabel,
@@ -9507,15 +9508,23 @@ const getCustomStyles = (size, hasError, isReadOnly) => ({
 //#endregion
 //#region src/components/Select/SelectComponents.tsx
 const { Option, NoOptionsMessage, Input, SingleValue, ClearIndicator, DropdownIndicator, MultiValueRemove, Control } = react_select.components;
-const DDSOption = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Option, {
+const DDSOption = ({ testId, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Option, {
 	...props,
+	innerProps: {
+		...props.innerProps,
+		"data-testid": testId
+	},
 	children: [props.isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		icon: CheckIcon,
 		iconSize: "small"
 	}), props.children]
 });
-const CustomOption = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option, {
+const CustomOption = ({ testId, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Option, {
 	...props,
+	innerProps: {
+		...props.innerProps,
+		"data-testid": testId
+	},
 	children: react.default.createElement(props.customElement, props)
 });
 const CustomSingleValue = ({ id, Element, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleValue, {
@@ -9628,12 +9637,21 @@ function Select({ id, label, componentSize = "medium", errorMessage, tip, "aria-
 		dataTestId
 	]);
 	const customOptionComponent = (0, react.useCallback)((props) => {
+		const optionTestId = dataTestId ? `${dataTestId}-option-${String(rest.getOptionValue?.(props.data) ?? props.data.value)}` : void 0;
 		if (customOptionElement) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomOption, {
 			...props,
-			customElement: customOptionElement
+			customElement: customOptionElement,
+			testId: optionTestId
+		});
+		else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DDSOption, {
+			...props,
+			testId: optionTestId
 		});
-		else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DDSOption, { ...props });
-	}, [customOptionElement, componentSize]);
+	}, [
+		customOptionElement,
+		dataTestId,
+		rest.getOptionValue
+	]);
 	const reactSelectProps = {
 		options,
 		value,