@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/components/Toggle/Toggle.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type LabelText = {
+    text: string;
+    type?: 'subdued' | 'normal';
+};
+export type StatusTextType = {
+    checked: string;
+    unchecked: string;
+};
+export declare enum TogglePosition {
+    left = "left",
+    right = "right"
+}
+export declare enum ToggleOnColor {
+    onwhite = "onwhite",
+    onneutral = "onneutral",
+    onblueberry = "onblueberry"
+}
+export interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**  Determines if the Toggle is checked */
+    checked?: boolean;
+    /** Sets the label of the Toggle */
+    label: LabelText[];
+    /** Defines the color of the toggle */
+    onColor?: keyof typeof ToggleOnColor;
+    /** A text that is shown under the Toggle switch */
+    statusText?: StatusTextType;
+    /** Sets the sublabel of the Toggle */
+    subLabel?: string;
+    /** Sets the position of the toggle relative to the label */
+    togglePosition?: keyof typeof TogglePosition;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/lib/components/Toggle/Toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Toggle } from './Toggle';
+export * from './Toggle';
+export default Toggle;

package/lib/components/Toggle/index.js

@@ -0,0 +1,152 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "../../constants.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import styles from "./styles.module.scss";
+import { u as useAnimate } from "../../use-animate.js";
+var TogglePosition = /* @__PURE__ */ ((TogglePosition2) => {
+  TogglePosition2["left"] = "left";
+  TogglePosition2["right"] = "right";
+  return TogglePosition2;
+})(TogglePosition || {});
+var ToggleOnColor = /* @__PURE__ */ ((ToggleOnColor2) => {
+  ToggleOnColor2["onwhite"] = "onwhite";
+  ToggleOnColor2["onneutral"] = "onneutral";
+  ToggleOnColor2["onblueberry"] = "onblueberry";
+  return ToggleOnColor2;
+})(ToggleOnColor || {});
+const Toggle = ({
+  checked = false,
+  label,
+  onChange,
+  onColor = "onwhite",
+  statusText,
+  subLabel,
+  togglePosition = "left",
+  testId
+}) => {
+  const [checkedState, setCheckedState] = useState(checked);
+  const [showToggleAnimation, setShowToggleAnimation] = useState(false);
+  const [scope, animate] = useAnimate();
+  const inputId = useUuid();
+  const toggleId = useUuid();
+  const toggleDotId = useUuid();
+  const labelId = useUuid();
+  const subLabelId = useUuid();
+  const { refObject, isHovered, isActive } = usePseudoClasses(scope);
+  const showHoveredStyling = isHovered && !showToggleAnimation;
+  const isOnWhite = onColor === "onwhite";
+  useEffect(() => {
+    if (showToggleAnimation) {
+      const timer = setTimeout(() => setShowToggleAnimation(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [showToggleAnimation]);
+  useEffect(() => {
+    setCheckedState(checked);
+  }, [checked]);
+  useEffect(() => {
+    animate("#" + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: "easeInOut" });
+    animate(
+      "#" + toggleDotId,
+      { background: checkedState ? "var(--color-action-graphics-ondark)" : "var(--core-color-neutral-700)" },
+      { duration: 0.2, ease: "easeInOut" }
+    );
+    animate("#" + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: "easeInOut" });
+    animate("svg", { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: "easeInOut" });
+  }, [checkedState, showHoveredStyling, isActive]);
+  const getBackgroundColor = () => {
+    if (checkedState && isActive) {
+      return "var(--core-color-blueberry-800)";
+    } else if (checkedState) {
+      return showHoveredStyling ? "var(--color-action-graphics-onlight-hover)" : "var(--color-action-graphics-onlight)";
+    } else if (isOnWhite && isActive) {
+      return "var(--core-color-neutral-400)";
+    } else if (isOnWhite) {
+      return showHoveredStyling ? "var(--core-color-neutral-200)" : "var(--core-color-neutral-50)";
+    } else if (isActive) {
+      return "var(--core-color-neutral-200)";
+    } else {
+      return showHoveredStyling ? "var(--core-color-neutral-50)" : "var(--core-color-white)";
+    }
+  };
+  const handleChange = (event) => {
+    setCheckedState(event.target.checked);
+    setShowToggleAnimation(true);
+    onChange == null ? void 0 : onChange(event);
+  };
+  const toggleContainerClassNames = classNames(styles["toggle-container"], {
+    [styles["toggle-container--position-right"]]: togglePosition === "right",
+    [styles["toggle-container--with-status"]]: statusText !== void 0 && statusText !== null
+  });
+  const subLabelClassNames = classNames(styles["toggle-container__sublabel"]);
+  const statusTextClassNames = classNames(styles["toggle-container__status"], {
+    [styles["toggle-container__status--checked"]]: checkedState
+  });
+  const toggleClassNames = classNames(styles["toggle-container__toggle"], {
+    [styles["toggle-container__toggle--ignore-hover"]]: showToggleAnimation,
+    [styles["toggle-container__toggle--on-white"]]: onColor === "onwhite"
+    /* onwhite */
+  });
+  const toggleDotClassNames = classNames(styles["toggle-container__toggle__dot"], {
+    [styles["toggle-container__toggle__dot--ignore-hover"]]: showToggleAnimation
+  });
+  const renderToggle = () => /* @__PURE__ */ jsxs("div", { className: styles["toggle-container__outer-toggle"], children: [
+    /* @__PURE__ */ jsxs("label", { ref: refObject, className: classNames(styles["toggle-container__toggle-group"]), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          type: "checkbox",
+          checked: checkedState,
+          onChange: handleChange,
+          className: styles["toggle-container__input"],
+          "aria-label": label.map((l) => l.text).join(" "),
+          "aria-describedby": `${subLabel ? subLabelId + " " : void 0} ${statusText ? toggleId + "-status" : void 0}`,
+          role: "switch"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: toggleId, className: toggleClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { id: toggleDotId, className: toggleDotClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "17",
+          height: "13",
+          viewBox: "0 0 17 13",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: styles["toggle-container__toggle__dot__icon"],
+          children: /* @__PURE__ */ jsx("path", { d: "M15 2L6.80839 10.548L2 5.53145", fill: "none", strokeWidth: "3" })
+        }
+      ) }) })
+    ] }),
+    statusText && /* @__PURE__ */ jsx("span", { className: statusTextClassNames, id: toggleId + "-status", children: checkedState ? statusText.checked : statusText.unchecked })
+  ] });
+  const renderLabelText = () => {
+    return /* @__PURE__ */ jsxs("div", { className: styles["toggle-container__outer-label"], children: [
+      /* @__PURE__ */ jsx("span", { id: labelId, className: classNames(styles["toggle-container__label"]), children: label.map((labelText) => {
+        const labelClassNames = classNames({
+          [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued"
+        });
+        return /* @__PURE__ */ jsx("span", { className: labelClassNames, children: labelText.text }, labelId + labelText.text);
+      }) }),
+      subLabel && /* @__PURE__ */ jsx("div", { id: subLabelId, className: subLabelClassNames, children: subLabel })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: toggleContainerClassNames, "data-testid": testId, "data-analyticsid": AnalyticsId.Toggle, children: [
+    togglePosition === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderToggle(),
+      renderLabelText()
+    ] }),
+    togglePosition === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderLabelText(),
+      renderToggle()
+    ] })
+  ] });
+};
+export {
+  ToggleOnColor,
+  TogglePosition,
+  Toggle as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={classNames(styles['toggle-container__toggle-group'])}>\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={`${subLabel ? subLabelId + ' ' : undefined} ${statusText ? toggleId + '-status' : undefined}`}\n          role=\"switch\"\n        />\n        <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n          <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"17\"\n              height=\"13\"\n              viewBox=\"0 0 17 13\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={classNames(styles['toggle-container__label'])}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}

package/lib/components/Validation/ErrorList.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ValidationErrors } from './types';
+interface ErrorListProps {
+    errors: ValidationErrors;
+}
+declare const ErrorList: React.FC<ErrorListProps>;
+export default ErrorList;

package/lib/components/Validation/ErrorListItem.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { ErrorDetails } from './types';
+interface ErrorElementProps {
+    name: string;
+    error: ErrorDetails;
+}
+declare const ErrorListItem: React.FC<ErrorElementProps>;
+export default ErrorListItem;

package/lib/components/Validation/Validation.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ValidationErrors } from './types';
+import { FormSize } from '../../constants';
+interface ValidationProps {
+    /** Error summary title */
+    errorTitle?: string;
+    /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */
+    errors?: ValidationErrors;
+    /** Items in the Validation compontent */
+    children?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the visuals of the formgroup */
+    size?: keyof typeof FormSize;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Hides the ValidationSummary list visually - summary is still announced by screen readers */
+    visuallyHiddenSummary?: boolean;
+}
+export declare const Validation: React.ForwardRefExoticComponent<ValidationProps & React.RefAttributes<HTMLDivElement>>;
+export default Validation;

package/lib/components/Validation/Validation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Validation/ValidationSummary.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ValidationErrors } from './types';
+import { TitleTags } from '../Title';
+interface ValidationSummaryProps {
+    /** Error summary title */
+    errorTitle?: string;
+    /** Error list */
+    errors?: ValidationErrors;
+    /** Markup props for error summary title. Default: h2 */
+    errorTitleHtmlMarkup?: TitleTags;
+    /** Will be shown last */
+    children?: React.ReactNode;
+    /** Hides the list visually - summary is still announced by screen readers */
+    visuallyHidden?: boolean;
+}
+declare const ValidationSummary: React.FC<ValidationSummaryProps>;
+export default ValidationSummary;

package/lib/components/Validation/ValidationSummary.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/Validation/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Validation } from './Validation';
+export * from './Validation';
+export default Validation;

package/lib/components/Validation/index.js

@@ -0,0 +1,86 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { A as AnchorLink } from "../../AnchorLink.js";
+import { L as List } from "../../List.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+import { AnalyticsId } from "../../constants.js";
+import { isComponent, isComponentWithDisplayName } from "../../utils/component.js";
+import { C as Checkbox } from "../../Checkbox.js";
+import { F as FormGroup } from "../../FormGroup.js";
+import { I as Input } from "../../Input.js";
+import { R as RadioButton } from "../../RadioButton.js";
+import { S as Select } from "../../Select.js";
+import { S as Slider } from "../../Slider.js";
+import { T as Textarea } from "../../Textarea.js";
+const ErrorListItem = (props) => {
+  const handleClick = (event, element) => {
+    event == null ? void 0 : event.preventDefault();
+    if (element == null ? void 0 : element.focus) element == null ? void 0 : element.focus();
+  };
+  if (props.error.ref) {
+    return /* @__PURE__ */ jsx(AnchorLink, { href: `#${props.name}`, onClick: (e) => handleClick(e, props.error.ref), children: props.error.message });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.error.message });
+};
+const ErrorList = (props) => /* @__PURE__ */ jsx(List, { children: Object.entries(props.errors).map(([name, error]) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(ErrorListItem, { name, error }) }, name)) });
+const ValidationSummary = (props) => {
+  const { errorTitleHtmlMarkup = "h2" } = props;
+  const titleId = useUuid();
+  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;
+  const visuallyHidden = props.visuallyHidden;
+  const summaryClasses = classNames(styles["validation__summary"], {
+    [styles["validation__summary--visible"]]: hasErrors && !visuallyHidden,
+    [styles["validation__summary--sr-only"]]: visuallyHidden
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite",
+      "aria-relevant": "all",
+      "aria-labelledby": hasErrors && props.errorTitle ? titleId : void 0,
+      className: summaryClasses,
+      children: [
+        hasErrors && /* @__PURE__ */ jsxs(Fragment, { children: [
+          props.errorTitle && /* @__PURE__ */ jsx(Title, { appearance: "title4", id: titleId, htmlMarkup: errorTitleHtmlMarkup, margin: { marginTop: 0, marginBottom: 1 }, children: props.errorTitle }),
+          /* @__PURE__ */ jsx(ErrorList, { errors: props.errors })
+        ] }),
+        props.children
+      ]
+    }
+  );
+};
+const Validation = React__default.forwardRef((props, ref) => {
+  const validationErrorClass = styles["validation__error-wrapper"];
+  const cloneFormElement = (child) => {
+    return React__default.cloneElement(child, {
+      ...child.props,
+      errorWrapperClassName: validationErrorClass
+    });
+  };
+  const renderChild = (child) => {
+    if (isComponent(child, FormGroup) || isComponent(child, Checkbox) || isComponent(child, RadioButton) || isComponent(child, Textarea) || isComponent(child, Input) || isComponent(child, Select) || isComponent(child, Slider) || isComponentWithDisplayName(child, "DateTimePickerWrapper") || isComponentWithDisplayName(child, "DatePicker") || isComponentWithDisplayName(child, "DateTime")) {
+      return cloneFormElement(child);
+    }
+    if (React__default.isValidElement(child) && child.type === React__default.Fragment) {
+      return React__default.Children.map(child.props.children, (child2) => {
+        return renderChild(child2);
+      });
+    }
+    return child;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { "data-testid": props.testId, "data-analyticsid": AnalyticsId.Validation, className: props.className, ref, children: React__default.Children.map(props.children, (child) => renderChild(child)) }),
+    /* @__PURE__ */ jsx(ValidationSummary, { errorTitle: props.errorTitle, errors: props.errors, visuallyHidden: props.visuallyHiddenSummary })
+  ] });
+});
+Validation.displayName = "Validation";
+export {
+  Validation,
+  Validation as default
+};
+//# sourceMappingURL=index.js.map

package/lib/components/Validation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["React","child"],"mappings":"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"}

package/lib/components/Validation/types.d.ts

@@ -0,0 +1,8 @@
+export interface FocusableElement {
+    focus?: () => void;
+}
+export interface ErrorDetails {
+    message?: React.ReactNode;
+    ref?: FocusableElement;
+}
+export type ValidationErrors = Record<string, ErrorDetails>;

package/lib/constants.d.ts

@@ -0,0 +1,139 @@
+export declare enum IconSize {
+    XXSmall = 24,
+    XSmall = 38,
+    Small = 48,
+    Medium = 64,
+    Large = 80,
+    XLarge = 130
+}
+export declare enum ZIndex {
+    OverlayScreen = 1300000,
+    PopOver = 11000,
+    LightBoxButtons = 1000
+}
+export declare const AVERAGE_CHARACTER_WIDTH_PX = 12;
+export interface HTMLButtonProps {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    type?: 'submit' | 'reset' | 'button' | string;
+    value?: string | string[] | number;
+    id?: string;
+}
+export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';
+export interface HTMLAnchorProps {
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: AnchorTarget;
+    target?: string;
+    referrerPolicy?: '' | 'same-origin' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+}
+export type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;
+export declare enum FormOnColor {
+    onwhite = "onwhite",
+    ongrey = "ongrey",
+    onblueberry = "onblueberry",
+    ondark = "ondark",
+    oninvalid = "oninvalid"
+}
+export declare enum FormSize {
+    medium = "medium",
+    large = "large"
+}
+export declare enum AnalyticsId {
+    AnchorLink = "anchor-link",
+    ArticleTeaser = "article-teaser",
+    Avatar = "avatar",
+    Badge = "badge",
+    Button = "button",
+    Checkbox = "checkbox",
+    Chip = "chip",
+    Close = "close",
+    DictionaryTrigger = "dictionary-trigger",
+    Drawer = "Drawer",
+    Dropdown = "dropdown",
+    Duolist = "duolist",
+    EmptyState = "empty-state",
+    Expander = "expander",
+    ExpanderHierarchy = "expander-hierarchy",
+    ExpanderHierarchyExpander = "expander-hierarchy-expander",
+    ExpanderList = "expander-list",
+    ExpanderListExpander = "expander-list-expander",
+    EyebrowHeader = "eyebrow-header",
+    FavoriteButton = "favorite-button",
+    FormFieldTag = "form-field-tag",
+    FormGroup = "form-group",
+    FormLayout = "form-layout",
+    HelpBubble = "help-bubble",
+    HelpDrawer = "help-drawer",
+    HelpExpanderInline = "help-expander-inline",
+    HelpExpanderStandalone = "help-expander-standalone",
+    HelpTooltip = "help-tooltip",
+    HelpTriggerIcon = "help-trigger-icon",
+    HelpTriggerInline = "help-trigger-inline",
+    HelpTriggerStandalone = "help-trigger-standalone",
+    HighlightPanel = "highlight-panel",
+    Icon = "icon",
+    Illustration = "Illustration",
+    InfoTeaser = "info-teaser",
+    Input = "input",
+    Label = "label",
+    Link = "link",
+    LinkList = "link-list",
+    List = "list",
+    Loader = "loader",
+    Logo = "logo",
+    Modal = "modal",
+    NotificationPanel = "notification-panel",
+    PanelOld = "panel",
+    PanelList = "panel-list",
+    PopMenu = "pop-menu",
+    PopOver = "pop-over",
+    Portal = "portal",
+    PromoPanel = "promo-panel",
+    RadioButton = "radio-button",
+    Select = "select",
+    SharingStatus = "sharing-status",
+    Slider = "slider",
+    Spacer = "spacer",
+    StatusDot = "status-dot",
+    Step = "step",
+    StepButtons = "step-buttons",
+    Stepper = "stepper",
+    Sublabel = "sublabel",
+    Table = "table",
+    Tag = "tag",
+    TagList = "tag-list",
+    Textarea = "textarea",
+    Tile = "tile",
+    Title = "title",
+    Toggle = "toggle",
+    Validation = "validation"
+}
+export declare enum KeyboardEventKey {
+    Enter = "Enter",
+    Escape = "Escape",
+    ArrowDown = "ArrowDown",
+    ArrowUp = "ArrowUp",
+    ArrowRight = "ArrowRight",
+    ArrowLeft = "ArrowLeft",
+    Home = "Home",
+    End = "End",
+    Space = " ",
+    Tab = "Tab"
+}
+export declare enum LanguageLocales {
+    NORWEGIAN = "nb-NO",
+    NORWEGIAN_NYNORSK = "nn-NO",
+    ENGLISH = "en-GB",
+    SAMI_NORTHERN = "se-NO"
+}