@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/lib/PanelOld.js

@@ -0,0 +1,325 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "./constants.js";
+import { useExpand } from "./hooks/useExpand.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { palette } from "./theme/palette.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import { B as Badge } from "./Badge.js";
+import { B as Button } from "./Button.js";
+import { I as Icon } from "./Icon.js";
+import AlertSignFill from "./components/Icons/AlertSignFill.js";
+import ArrowRight from "./components/Icons/ArrowRight.js";
+import Calendar from "./components/Icons/Calendar.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import Pencil from "./components/Icons/Pencil.js";
+import Watch from "./components/Icons/Watch.js";
+import { T as Title } from "./Title.js";
+import panelStyles from "./components/PanelOld/styles.module.scss";
+var PanelOldStatus = /* @__PURE__ */ ((PanelOldStatus2) => {
+  PanelOldStatus2["normal"] = "normal";
+  PanelOldStatus2["new"] = "new";
+  PanelOldStatus2["error"] = "error";
+  PanelOldStatus2["draft"] = "draft";
+  return PanelOldStatus2;
+})(PanelOldStatus || {});
+var PanelOldVariant = /* @__PURE__ */ ((PanelOldVariant2) => {
+  PanelOldVariant2["fill"] = "fill";
+  PanelOldVariant2["white"] = "white";
+  PanelOldVariant2["stroke"] = "stroke";
+  PanelOldVariant2["line"] = "line";
+  return PanelOldVariant2;
+})(PanelOldVariant || {});
+var PanelOldLayout = /* @__PURE__ */ ((PanelOldLayout2) => {
+  PanelOldLayout2["layout1"] = "layout1";
+  PanelOldLayout2["layout2"] = "layout2";
+  PanelOldLayout2["layout3a"] = "layout3a";
+  PanelOldLayout2["layout3b"] = "layout3b";
+  PanelOldLayout2["layout3c"] = "layout3c";
+  return PanelOldLayout2;
+})(PanelOldLayout || {});
+const StatusText = ({ status, statusMessage }) => {
+  const statusIcon = () => {
+    if (status === "error") {
+      return { color: palette.cherry500, svgIcon: AlertSignFill };
+    }
+    return { color: palette.black, svgIcon: Pencil };
+  };
+  const statusMessageClass = classNames(panelStyles["status-message"], {
+    [panelStyles["status-message--new"]]: status === "new"
+    /* new */
+  });
+  if ((status === "error" || status === "draft") && statusMessage) {
+    return /* @__PURE__ */ jsxs("div", { className: statusMessageClass, "data-testid": "display-status", children: [
+      /* @__PURE__ */ jsx(Icon, { ...statusIcon(), size: IconSize.XSmall }),
+      " ",
+      /* @__PURE__ */ jsx("span", { children: statusMessage })
+    ] });
+  }
+  return null;
+};
+const PreContainer = ({ children }) => {
+  if (typeof children === "undefined") return null;
+  return /* @__PURE__ */ jsx("div", { className: panelStyles["header-container"], children });
+};
+const DateTime = ({ date, time }) => {
+  if (date || time) {
+    return /* @__PURE__ */ jsxs("div", { className: panelStyles["datetime-container"], "data-testid": "datetime", children: [
+      date && /* @__PURE__ */ jsxs("div", { className: panelStyles["datetime-container__icon"], children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: Calendar, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: date })
+      ] }),
+      time && /* @__PURE__ */ jsxs("div", { className: panelStyles["datetime-container__icon"], children: [
+        /* @__PURE__ */ jsx(Icon, { svgIcon: Watch, size: IconSize.XSmall }),
+        /* @__PURE__ */ jsx("span", { children: time })
+      ] })
+    ] });
+  }
+  return null;
+};
+const PanelLayout1 = ({
+  contentA,
+  contentB,
+  contentHeader,
+  ctaContainer,
+  icon,
+  status,
+  statusMessage,
+  titleElement
+}) => {
+  const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], {
+    [panelStyles["panel__layout-1--with-icon"]]: icon
+  });
+  const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], {
+    [panelStyles["panel__icon--no-content"]]: !contentA && !contentB
+  });
+  return /* @__PURE__ */ jsxs("div", { className: panelLayoutClasses, children: [
+    /* @__PURE__ */ jsx(StatusText, { status, statusMessage }),
+    /* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+    icon && /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: panelStyles["panel__layout-1__content-a"], children: [
+      titleElement,
+      contentA
+    ] }),
+    contentB && /* @__PURE__ */ jsx("div", { children: contentB }),
+    ctaContainer
+  ] });
+};
+const PanelLayout2 = ({
+  contentA,
+  contentB,
+  contentHeader,
+  ctaContainer,
+  icon,
+  status,
+  statusMessage,
+  titleElement
+}) => {
+  const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], {
+    [panelStyles["panel__layout-2--with-icon"]]: icon
+  });
+  const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], {
+    [panelStyles["panel__icon--no-content"]]: !contentA && !contentB
+  });
+  const lastColumnClass = panelStyles["panel__layout-2__last-column"];
+  return /* @__PURE__ */ jsxs("div", { className: panelLayoutClasses, children: [
+    /* @__PURE__ */ jsx(StatusText, { status, statusMessage }),
+    /* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+    icon && /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: panelStyles["panel__layout-2__content-a"], children: [
+      titleElement,
+      contentA
+    ] }),
+    contentB && /* @__PURE__ */ jsx("div", { className: lastColumnClass, children: contentB }),
+    ctaContainer && /* @__PURE__ */ jsx("div", { className: lastColumnClass, children: ctaContainer })
+  ] });
+};
+const PanelLayout3 = ({
+  contentA,
+  contentB,
+  contentHeader,
+  ctaContainer,
+  icon,
+  layout,
+  status,
+  statusMessage,
+  titleElement
+}) => {
+  const layoutClasses = classNames(panelStyles["panel__layout-3"], {
+    [panelStyles["panel__layout-3--with-icon"]]: icon,
+    [panelStyles["panel__layout-3--a"]]: layout === "layout3a",
+    [panelStyles["panel__layout-3--b"]]: layout === "layout3b",
+    [panelStyles["panel__layout-3--c"]]: layout === "layout3c"
+    /* layout3c */
+  });
+  const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], {
+    [panelStyles["panel__icon--no-content"]]: !contentA && !contentB
+  });
+  return /* @__PURE__ */ jsxs("div", { className: layoutClasses, children: [
+    /* @__PURE__ */ jsx(StatusText, { status, statusMessage }),
+    /* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+    icon && /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      titleElement,
+      contentA
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: panelStyles["panel__layout-3__last-column"], children: [
+      contentB && /* @__PURE__ */ jsx("div", { className: panelStyles["panel__layout-3__last-column__content-b"], children: contentB }),
+      ctaContainer
+    ] })
+  ] });
+};
+const PanelOld = React__default.forwardRef(function PanelForwardedRef(props, ref) {
+  const {
+    buttonAriaLabel,
+    buttonAriaLabelledById,
+    buttonText = "Se detaljer",
+    buttonTextClose = "Skjul detaljer",
+    buttonHtmlMarkup = "a",
+    buttonOnClick,
+    children,
+    className,
+    containerAsButton = false,
+    contentA,
+    contentB,
+    contentHeader,
+    date,
+    expanded = false,
+    focusable = false,
+    icon,
+    layout = "layout2",
+    noTopBorder,
+    onExpand,
+    renderChildrenWhenClosed = false,
+    status = "normal",
+    statusMessage,
+    target = "_self",
+    testId,
+    time,
+    title,
+    titleHtmlMarkup = "h2",
+    url,
+    variant = "fill"
+    /* fill */
+  } = props;
+  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
+  const titleId = useUuid();
+  const buttonTextId = useUuid();
+  const hasBadge = statusMessage && status === "new";
+  const noContentB = typeof contentB === "undefined";
+  const layout1 = layout === "layout1" || noContentB;
+  const layout2 = !noContentB && layout === "layout2";
+  const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
+  const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
+  const panelClasses = classNames(panelStyles.panel, {
+    [panelStyles["panel--fill"]]: variant === "fill",
+    [panelStyles["panel--stroke"]]: variant === "stroke",
+    [panelStyles["panel--white"]]: variant === "white",
+    [panelStyles["panel--line"]]: variant === "line",
+    [panelStyles["panel--no-top-border"]]: variant === "line" && noTopBorder,
+    [panelStyles["panel--selected"]]: isExpanded,
+    [panelStyles["panel--new"]]: status === "new",
+    [panelStyles["panel--draft"]]: status === "draft",
+    [panelStyles["panel--error"]]: status === "error",
+    [panelStyles["panel--status"]]: status && status !== "normal",
+    [panelStyles["panel--with-icon"]]: icon,
+    [panelStyles["panel--button"]]: containerAsButton,
+    [panelStyles["panel--clickable"]]: children || url || onExpand || buttonOnClick || containerAsButton
+  });
+  const renderCTAContainer = () => {
+    const hasButton = children || url || buttonOnClick;
+    const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
+      [panelStyles["panel__btn-container--no-content-b"]]: noContentB,
+      [panelStyles["panel__btn-container--no-button"]]: !hasButton
+    });
+    return (hasButton || date || time) && /* @__PURE__ */ jsxs("div", { className: btnContainerClasses, children: [
+      /* @__PURE__ */ jsx(DateTime, { date, time }),
+      hasButton && /* @__PURE__ */ jsx("div", { className: panelStyles["panel__details-btn"], children: renderDetailsButton() })
+    ] });
+  };
+  const renderDetailsButton = () => {
+    const ariaLabelAttributes = getAriaLabelAttributes({
+      label: buttonAriaLabel,
+      id: buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}` || title && titleId && `${buttonTextId} ${titleId}`,
+      prefer: "label"
+    });
+    const commonProps = {
+      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),
+      className: containerAsButton ? panelStyles["panel__expand"] : void 0,
+      variant: "borderless",
+      ellipsis: true,
+      ...ariaLabelAttributes
+    };
+    if (children) {
+      return /* @__PURE__ */ jsxs(Button, { testId: "expand", "aria-expanded": isExpanded, ...commonProps, children: [
+        /* @__PURE__ */ jsx("span", { id: buttonTextId, children: isExpanded ? buttonTextClose : buttonText }),
+        /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Button, { testId: "url", htmlMarkup: buttonHtmlMarkup, href: url, target, ...commonProps, children: [
+      /* @__PURE__ */ jsx("span", { id: buttonTextId, children: buttonText }),
+      /* @__PURE__ */ jsx(Icon, { svgIcon: ArrowRight })
+    ] });
+  };
+  const renderContent = () => {
+    if (!children || !renderChildrenWhenClosed && !isExpanded) {
+      return null;
+    }
+    const panelDetailsClasses = classNames(panelStyles["panel-details"], {
+      [panelStyles["panel-details--open"]]: isExpanded,
+      [panelStyles["panel-details--line"]]: variant === "line",
+      [panelStyles["panel-details--white"]]: variant === "white"
+      /* white */
+    });
+    return /* @__PURE__ */ jsx("div", { className: panelDetailsClasses, "data-testid": "panel-details", children: /* @__PURE__ */ jsx("div", { children }) });
+  };
+  const renderTitle = () => {
+    const titleContainerClasses = classNames(panelStyles["title-container"], {
+      [panelStyles["title-container--no-content-a"]]: !contentA
+    });
+    const titleClasses = classNames(panelStyles["title-container__title"], {
+      [panelStyles["title-container__title--badge"]]: hasBadge
+    });
+    return title && /* @__PURE__ */ jsxs("div", { className: titleContainerClasses, children: [
+      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleHtmlMarkup, id: titleId, className: titleClasses, children: title }),
+      hasBadge && /* @__PURE__ */ jsx("div", { className: panelStyles.panel__badge, children: /* @__PURE__ */ jsx(Badge, { color: "blueberry", testId: "badge-status", children: statusMessage }) })
+    ] });
+  };
+  const layoutProps = {
+    contentA,
+    contentB,
+    contentHeader,
+    ctaContainer: renderCTAContainer(),
+    icon,
+    status,
+    statusMessage,
+    titleElement: renderTitle()
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      tabIndex: focusable ? -1 : void 0,
+      ref,
+      "data-testid": testId,
+      className: panelWrapperClasses,
+      "data-analyticsid": AnalyticsId.PanelOld,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: panelClasses, children: [
+          layout1 && /* @__PURE__ */ jsx(PanelLayout1, { ...layoutProps }),
+          layout2 && /* @__PURE__ */ jsx(PanelLayout2, { ...layoutProps }),
+          layout3 && /* @__PURE__ */ jsx(PanelLayout3, { ...layoutProps, layout })
+        ] }),
+        renderContent()
+      ]
+    }
+  );
+});
+export {
+  PanelOld as P,
+  PanelOldStatus as a,
+  PanelOldVariant as b,
+  PanelOldLayout as c
+};
+//# sourceMappingURL=PanelOld.js.map

package/lib/PanelOld.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelOld.js","sources":["../src/components/PanelOld/PanelOld.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n"],"names":["PanelOldStatus","PanelOldVariant","PanelOldLayout","React"],"mappings":"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"}

package/lib/PanelTitle.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { H as Highlighter } from "./Highlighter.js";
+import { T as Title } from "./Title.js";
+import styles from "./components/Panel/PanelTitle/styles.module.scss";
+const PanelTitle = (props) => {
+  const { testId, icon, badge, title, titleMarkup = "h3", highlightText } = props;
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }), "data-testid": testId, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__icon"], children: icon }),
+    title && /* @__PURE__ */ jsxs("div", { className: styles["paneltitle__title"], children: [
+      /* @__PURE__ */ jsx(Title, { appearance: "title3", htmlMarkup: titleMarkup, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: title }) }),
+      badge && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__badge"], children: badge })
+    ] })
+  ] });
+};
+export {
+  PanelTitle as P
+};
+//# sourceMappingURL=PanelTitle.js.map

package/lib/PanelTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTitle.js","sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n"],"names":[],"mappings":";;;;;AAwBA,MAAM,aAAwC,CAAC,UAA2B;AACxE,QAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,8BACG,OAAA,EAAI,WAAW,WAAW,OAAO,YAAY,GAAG,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,MAAM,GAAG,eAAa,QACxG,UAAA;AAAA,IAAA,4BAAS,OAAA,EAAI,WAAW,OAAO,kBAAkB,GAAI,UAAA,MAAK;AAAA,IAC1D,SACC,qBAAC,OAAA,EAAI,WAAW,OAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAM,YAAW,UAAS,YAAY,aACrC,8BAAC,aAAA,EAAY,YAAY,eAAgB,UAAA,MAAA,CAAM,GACjD;AAAA,MACC,SAAS,oBAAC,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAA,MAAA,CAAM;AAAA,IAAA,EAAA,CAChE;AAAA,EAAA,GAEJ;AAEJ;"}

package/lib/PopOver.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef } from "react";
+import { u as useFloating, a as useClick, b as useDismiss, c as useInteractions, d as useMergeRefs, F as FloatingFocusManager, e as FloatingArrow, f as autoUpdate, o as offset, g as flip, s as shift, h as hide, i as arrow } from "./floating-ui.react.js";
+import classNames from "classnames";
+import { ZIndex, AnalyticsId } from "./constants.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import styles from "./components/PopOver/styles.module.scss";
+var PopOverVariant = /* @__PURE__ */ ((PopOverVariant2) => {
+  PopOverVariant2["positionautomatic"] = "positionautomatic";
+  PopOverVariant2["positionbelow"] = "positionbelow";
+  PopOverVariant2["positionabove"] = "positionabove";
+  return PopOverVariant2;
+})(PopOverVariant || {});
+const PopOver = React__default.forwardRef((props, ref) => {
+  var _a;
+  const {
+    ariaLabel,
+    ariaLabelledById,
+    id,
+    children,
+    controllerRef,
+    show = false,
+    className = "",
+    variant = "positionautomatic",
+    role = "dialog",
+    testId,
+    zIndex = ZIndex.PopOver,
+    placement
+  } = props;
+  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
+  const placementProp = placement ?? (variant === "positionabove" ? "top" : "bottom");
+  const arrowRef = useRef(null);
+  const { refs, floatingStyles, context, middlewareData } = useFloating({
+    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+    elements: {
+      reference: controllerRef.current
+    }
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { getFloatingProps } = useInteractions([click, dismiss]);
+  const isVisible = show && !((_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden);
+  const mergedRef = useMergeRefs([refs.setFloating, ref]);
+  return /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ref: mergedRef,
+      style: { ...floatingStyles, visibility: isVisible ? "visible" : "hidden", zIndex },
+      className: classNames(styles.popover, className),
+      ...getFloatingProps(),
+      role,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.PopOver,
+      ...ariaLabelAttributes,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          FloatingArrow,
+          {
+            ref: arrowRef,
+            className: styles["popover__arrow"],
+            context,
+            fill: "var(--core-color-white)",
+            stroke: "var(--color-base-border-onlight)",
+            strokeWidth: 1
+          }
+        )
+      ]
+    }
+  ) });
+});
+PopOver.displayName = "PopOver";
+export {
+  PopOver as P,
+  PopOverVariant as a
+};
+//# sourceMappingURL=PopOver.js.map

package/lib/PopOver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip' | 'dialog';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement | HTMLElement, PopOverProps>((props, ref) => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","React"],"mappings":";;;;;;;AAwBO,IAAK,mCAAAA,oBAAL;AACLA,kBAAA,mBAAA,IAAoB;AACpBA,kBAAA,eAAA,IAAgB;AAChBA,kBAAA,eAAA,IAAgB;AAHN,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAuCZ,MAAM,UAAUC,eAAM,WAAuE,CAAC,OAAO,QAAQ;;AAC3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,SAAS,OAAO;AAAA,IAChB;AAAA,EAAA,IACE;AAEJ,QAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAE7F,QAAM,gBAAgB,cAAc,YAAY,kBAA+B,QAAQ;AAEvF,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,gBAAgB,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpE,YAAY,CAAC,OAAO,EAAE,GAAG,KAAA,GAAQ,MAAM,EAAE,SAAS,GAAG,GAAG,QAAQ,MAAM,EAAE,SAAS,SAAA,CAAU,CAAC;AAAA,IAC5F,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,cAAc;AAAA,IAAA;AAAA,EAC3B,CACD;AAED,QAAM,QAAQ,SAAS,OAAO;AAC9B,QAAM,UAAU,WAAW,OAAO;AAElC,QAAM,EAAE,iBAAA,IAAqB,gBAAgB,CAAC,OAAO,OAAO,CAAC;AAE7D,QAAM,YAAY,QAAQ,GAAC,oBAAe,SAAf,mBAAqB;AAEhD,QAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;AAEnF,SACE,oBAAC,sBAAA,EAAqB,SAAkB,OAAO,OAC7C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,OAAO,EAAE,GAAG,gBAAgB,YAAY,YAAY,YAAY,UAAU,OAAA;AAAA,MAC1E,WAAW,WAAW,OAAO,SAAS,SAAS;AAAA,MAC9C,GAAG,iBAAA;AAAA,MACJ;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC7B,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,OAAO,gBAAgB;AAAA,YAClC;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,QAAQ,cAAc;"}

package/lib/RadioButton.js

@@ -0,0 +1,122 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useState } from "react";
+import classNames from "classnames";
+import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { u as uuid } from "./uuid.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { g as getLabelText, r as renderLabelAsParent } from "./Label.js";
+import radioButtonStyles from "./components/RadioButton/styles.module.scss";
+const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
+  const onCherry = onColor === "oninvalid";
+  const checked = radioId === checkedRadioId;
+  return classNames({
+    [radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
+    [radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
+    [radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,
+    [radioButtonStyles["radio-button-label__large--selected-invalid"]]: large && checked && onCherry
+  });
+};
+const RadioButton = React__default.forwardRef((props, ref) => {
+  const {
+    className,
+    defaultChecked,
+    onChange,
+    disabled,
+    label,
+    inputId = uuid(),
+    onColor = FormOnColor.onwhite,
+    name = inputId,
+    size,
+    errorText,
+    error = !!errorText,
+    errorTextId,
+    errorWrapperClassName,
+    value = getLabelText(label),
+    testId,
+    required,
+    labelClassNames,
+    ...rest
+  } = props;
+  const invalid = error || onColor === FormOnColor.oninvalid;
+  const onDark = onColor === FormOnColor.ondark;
+  const onBlueberry = onColor === FormOnColor.onblueberry;
+  const onCherry = onColor === FormOnColor.oninvalid;
+  const isLarge = size === FormSize.large;
+  const [checked, changeChecked] = useState();
+  const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+  const mergedRefs = mergeRefs([ref, refObject]);
+  const errorTextUuid = useUuid(errorTextId);
+  const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
+    [radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
+    [radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
+    [radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
+    [radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
+    [radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
+  });
+  const radioButtonLabelClasses = classNames(
+    radioButtonStyles["radio-button-label"],
+    {
+      [radioButtonStyles["radio-button-label--disabled"]]: disabled,
+      [radioButtonStyles["radio-button-label--on-dark"]]: onDark,
+      [radioButtonStyles["radio-button-label--invalid"]]: invalid,
+      [radioButtonStyles["radio-button-label__large"]]: isLarge,
+      [radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
+      [radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
+    },
+    labelClassNames
+  );
+  const radioButtonClasses = classNames(
+    radioButtonStyles["radio-button"],
+    {
+      [radioButtonStyles["radio-button--on-dark"]]: onDark,
+      [radioButtonStyles["radio-button--disabled"]]: disabled,
+      [radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
+      [radioButtonStyles["radio-button--invalid"]]: invalid,
+      [radioButtonStyles["radio-button__large"]]: isLarge,
+      [radioButtonStyles["radio-button__large--disabled"]]: isLarge && disabled,
+      [radioButtonStyles["radio-button__large--invalid"]]: isLarge && invalid
+    },
+    className
+  );
+  const change = (e) => {
+    changeChecked(e.target.checked);
+    if (onChange) onChange(e);
+  };
+  const getLabelContent = () => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      id: inputId,
+      name,
+      className: radioButtonClasses,
+      type: "radio",
+      disabled,
+      value,
+      ref: mergedRefs,
+      defaultChecked,
+      "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+      required,
+      onChange: (e) => change(e)
+    }
+  );
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsx("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.RadioButton, className: radioButtonWrapperClasses, children: renderLabelAsParent(
+    label,
+    getLabelContent(),
+    inputId,
+    onColor,
+    radioButtonLabelClasses,
+    void 0,
+    radioButtonStyles["radiobutton-sublabel-wrapper"],
+    isLarge
+  ) }) });
+});
+RadioButton.displayName = "RadioButton";
+export {
+  RadioButton as R,
+  getRadioLabelClasses as g
+};
+//# sourceMappingURL=RadioButton.js.map

package/lib/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}