@helsenorge/designsystem-react 7.0.0-beta.2 → 7.0.0-beta.5

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 7.0.0-beta.3 (2024-04-04)
+
+### Features
+
+- button arrow prop endres til aa stotte accessibility-character
+  ([e516b86](https://github.com/helsenorge/designsystem/commit/e516b869cd48f301b3ab0242548ef33c07c0da1c)), closes
+  [#320171](https://github.com/helsenorge/designsystem/issues/320171)
+- skjermleser leser oppsummerende feilmelding i validation automatisk
+  ([0c9fc3a](https://github.com/helsenorge/designsystem/commit/0c9fc3aa1f9dd2d245a9037b568bce58d6d7455c)), closes
+  [#316622](https://github.com/helsenorge/designsystem/issues/316622)
+
+### Bug Fixes
+
+- trigger har riktig avstand til andre elementer og større klikkflate i medium størrelse
+  ([c9d566f](https://github.com/helsenorge/designsystem/commit/c9d566fefe6ff0797925e7c90ebfe17e48de041e)), closes
+  [#322394](https://github.com/helsenorge/designsystem/issues/322394)
+
+## 7.0.0-beta.2 (2024-03-07)
+
 ## 7.0.0-beta.1 (2024-03-07)
 
 ## 7.0.0-beta.0 (2024-03-07)

package/__mocks__/usePseudoClasses.d.ts

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

package/__mocks__/usePseudoClasses.js

@@ -0,0 +1,5 @@
+import { vi as e } from "vitest";
+e.mock("../hooks/usePseudoClasses", () => ({
+  usePseudoClasses: e.fn().mockImplementation((s) => ({ refObject: s, isHovered: !1, isFocused: !1 }))
+}));
+//# sourceMappingURL=usePseudoClasses.js.map

package/__mocks__/usePseudoClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePseudoClasses.js","sources":["../../src/__mocks__/usePseudoClasses.ts"],"sourcesContent":["import { vi as jest } from 'vitest';\n\njest.mock('../hooks/usePseudoClasses', () => ({\n  usePseudoClasses: jest.fn().mockImplementation(ref => {\n    return { refObject: ref, isHovered: false, isFocused: false };\n  }),\n}));\n\nexport {};\n"],"names":["jest","ref"],"mappings":";AAEAA,EAAK,KAAK,6BAA6B,OAAO;AAAA,EAC5C,kBAAkBA,EAAK,GAAG,EAAE,mBAAmB,CAAOC,OAC7C,EAAE,WAAWA,GAAK,WAAW,IAAO,WAAW,KACvD;AACH,EAAE;"}

package/components/AnchorLink/AnchorLink.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type AnchorLinkTargets = '_self' | '_blank' | '_parent';
 export type AnchorLinkTags = 'a' | 'button';
+export type AnchorLinkOnClickEvent = React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null;
 export interface AnchorLinkProps {
     /** Sets the content of the <a> tag */
     children: React.ReactNode;
@@ -15,7 +16,7 @@ export interface AnchorLinkProps {
     /** HTML markup for anchor link. Default: a */
     htmlMarkup?: AnchorLinkTags;
     /** Function that is called when clicked */
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;
+    onClick?: (e?: AnchorLinkOnClickEvent) => void;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/AnchorLink/AnchorLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorLink.js","sources":["../../../src/components/AnchorLink/AnchorLink.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport interface AnchorLinkProps {\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst AnchorLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, AnchorLinkProps>((props, ref) => {\n  const { id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = () => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          href={href}\n          target={target}\n          className={anchorClasses}\n          rel={external ? 'noopener noreferrer' : undefined}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button\n          type=\"button\"\n          className={AnchorLinkStyles['anchorlink-wrapper']}\n          ref={hoverRef as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nexport default AnchorLink;\n"],"names":["AnchorLink","React","props","ref","id","href","children","className","target","htmlMarkup","onClick","testId","external","hoverRef","isHovered","useHover","anchorClasses","classNames","AnchorLinkStyles","commonProps","AnalyticsId","renderContent","Icon","ArrowUpRight","getColor","IconSize","AnchorLink$1"],"mappings":";;;;;;;;AAmCA,MAAMA,IAAaC,EAAM,WAAmE,CAACC,GAAOC,MAAQ;AACpG,QAAA,EAAE,IAAAC,GAAI,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,YAAAC,IAAa,KAAK,SAAAC,GAAS,QAAAC,EAAA,IAAWT,GACzFU,IAAWJ,MAAW,UACtB,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC;AAAA,IAC9BZ;AAAA,EAAA,GAEIa,IAAgBC,EAAWC,EAAiB,YAAYX,CAAS,GAEjEY,IAAc;AAAA,IAClB,IAAAf;AAAA,IACC,eAAgBO;AAAA,IAChB,oBAAqBS,EAAY;AAAA,IAClC,SAAAV;AAAA,EAAA,GAGIW,IAAgB,MAEjBpB,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAK,GACAM,KACCX,gBAAAA,EAAA;AAAA,IAACqB;AAAA,IAAA;AAAA,MACC,WAAWJ,EAAiB;AAAA,MAC5B,SAASK;AAAA,MACT,OAAOC,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,MACrC,MAAMC,EAAS;AAAA,MACf,WAAAX;AAAA,IAAA;AAAA,EAAA,CAGN;AAIA,SAAAb,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACGQ,MAAe,OACdR,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAI;AAAA,MACA,QAAAG;AAAA,MACA,WAAWQ;AAAA,MACX,KAAKJ,IAAW,wBAAwB;AAAA,MACxC,KAAKC;AAAA,MACJ,GAAGM;AAAA,IAAA;AAAA,IAEHE,EAAc;AAAA,EAAA,GAGlBZ,MAAe,YACdR,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWiB,EAAiB,oBAAoB;AAAA,MAChD,KAAKL;AAAA,MACJ,GAAGM;AAAA,IAAA;AAAA,IAEHlB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWe,EAAA,GAAgBK,GAAgB;AAAA,EAAA,CAGvD;AAEJ,CAAC,GAEDK,IAAe1B;"}
+{"version":3,"file":"AnchorLink.js","sources":["../../../src/components/AnchorLink/AnchorLink.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport Icon, { IconSize } from '../Icon';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\nexport type AnchorLinkOnClickEvent =\n  | React.MouseEvent<HTMLElement, MouseEvent>\n  | React.FormEvent<{}>\n  | React.KeyboardEvent<HTMLUListElement>\n  | null;\n\nexport interface AnchorLinkProps {\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: AnchorLinkOnClickEvent) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst AnchorLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, AnchorLinkProps>((props, ref) => {\n  const { id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = () => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          href={href}\n          target={target}\n          className={anchorClasses}\n          rel={external ? 'noopener noreferrer' : undefined}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button\n          type=\"button\"\n          className={AnchorLinkStyles['anchorlink-wrapper']}\n          ref={hoverRef as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nexport default AnchorLink;\n"],"names":["AnchorLink","React","props","ref","id","href","children","className","target","htmlMarkup","onClick","testId","external","hoverRef","isHovered","useHover","anchorClasses","classNames","AnchorLinkStyles","commonProps","AnalyticsId","renderContent","Icon","ArrowUpRight","getColor","IconSize","AnchorLink$1"],"mappings":";;;;;;;;AAyCA,MAAMA,IAAaC,EAAM,WAAmE,CAACC,GAAOC,MAAQ;AACpG,QAAA,EAAE,IAAAC,GAAI,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,YAAAC,IAAa,KAAK,SAAAC,GAAS,QAAAC,EAAA,IAAWT,GACzFU,IAAWJ,MAAW,UACtB,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC;AAAA,IAC9BZ;AAAA,EAAA,GAEIa,IAAgBC,EAAWC,EAAiB,YAAYX,CAAS,GAEjEY,IAAc;AAAA,IAClB,IAAAf;AAAA,IACC,eAAgBO;AAAA,IAChB,oBAAqBS,EAAY;AAAA,IAClC,SAAAV;AAAA,EAAA,GAGIW,IAAgB,MAEjBpB,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAK,GACAM,KACCX,gBAAAA,EAAA;AAAA,IAACqB;AAAA,IAAA;AAAA,MACC,WAAWJ,EAAiB;AAAA,MAC5B,SAASK;AAAA,MACT,OAAOC,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,MACrC,MAAMC,EAAS;AAAA,MACf,WAAAX;AAAA,IAAA;AAAA,EAAA,CAGN;AAIA,SAAAb,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACGQ,MAAe,OACdR,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAI;AAAA,MACA,QAAAG;AAAA,MACA,WAAWQ;AAAA,MACX,KAAKJ,IAAW,wBAAwB;AAAA,MACxC,KAAKC;AAAA,MACJ,GAAGM;AAAA,IAAA;AAAA,IAEHE,EAAc;AAAA,EAAA,GAGlBZ,MAAe,YACdR,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWiB,EAAiB,oBAAoB;AAAA,MAChD,KAAKL;AAAA,MACJ,GAAGM;AAAA,IAAA;AAAA,IAEHlB,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWe,EAAA,GAAgBK,GAAgB;AAAA,EAAA,CAGvD;AAEJ,CAAC,GAEDK,IAAe1B;"}

package/components/Badge/Badge.stories.d.ts

@@ -19,7 +19,7 @@ declare const meta: {
         };
         color: {
             control: string;
-            options: import("./Badge").BadgeColors[];
+            options: import("../../theme/palette").PaletteNames[];
         };
     };
 };

package/components/Button/Button.d.ts

@@ -5,6 +5,7 @@ export type ButtonVariant = 'fill' | 'outline' | 'borderless';
 export type ButtonSize = 'medium' | 'large';
 export type ButtonMode = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
+export type ButtonArrows = 'icon' | 'accessibility-character';
 export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {
     /** Sets the aria-label of the button, use when the button only includes an icon */
     ariaLabel?: string;
@@ -17,7 +18,7 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     /** Adds custom classes to the element. */
     className?: string;
     /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */
-    arrow?: boolean;
+    arrow?: ButtonArrows;
     /** Changes the intent of the button. Mostly changes the color profile. */
     concept?: ButtonConcept;
     /** Disables text wrapping and enables ellipsis. */

package/components/Button/Button.js

@@ -1,116 +1,116 @@
-import o, { useRef as at, useEffect as lt } from "react";
-import m from "classnames";
-import { Icon as ct } from "../Icon/Icon.js";
-import { AnalyticsId as V, IconSize as y } from "../../constants.js";
-import { useBreakpoint as it } from "../../hooks/useBreakpoint.js";
-import { useHover as W } from "../../hooks/useHover.js";
-import { useIcons as ut } from "../../hooks/useIcons.js";
-import { getColor as c } from "../../theme/currys/color.js";
-import { breakpoints as mt } from "../../theme/grid.js";
-import { isTest as bt, isProd as pt } from "../../utils/environment.js";
-import dt from "../Icons/ArrowRight.js";
+import o, { useRef as lt, useEffect as ct } from "react";
+import p from "classnames";
+import { Icon as it } from "../Icon/Icon.js";
+import { AnalyticsId as $, IconSize as v } from "../../constants.js";
+import { useBreakpoint as ut } from "../../hooks/useBreakpoint.js";
+import { useHover as D } from "../../hooks/useHover.js";
+import { useIcons as mt } from "../../hooks/useIcons.js";
+import { getColor as i } from "../../theme/currys/color.js";
+import { breakpoints as bt } from "../../theme/grid.js";
+import { isTest as pt, isProd as dt } from "../../utils/environment.js";
+import ft from "../Icons/ArrowRight.js";
 import t from "./styles.module.scss";
-const ft = (e, r, n, b, s, g) => g && n ? !s || e ? c("neutral", r ? 500 : 700) : c("white") : n ? !s || e ? c("neutral", 500) : `${c("white")}b3` : e && !s || !e && s ? "white" : b === "normal" ? c("blueberry", 600) : c("cherry", 500), k = (e, r) => r && e ? y.Small : e ? y.Medium : y.XSmall, ht = (e, r, n) => {
+const ht = (e, r, n, d, s, g) => g && n ? !s || e ? i("neutral", r ? 500 : 700) : i("white") : n ? !s || e ? i("neutral", 500) : `${i("white")}b3` : e && !s || !e && s ? "white" : d === "normal" ? i("blueberry", 600) : i("cherry", 500), N = (e, r) => r && e ? v.Small : e ? v.Medium : v.XSmall, gt = (e, r, n) => {
   if (n && e && (r === void 0 || r === ""))
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
-}, gt = o.forwardRef(function(r, n) {
+}, _t = o.forwardRef(function(r, n) {
   const {
-    ariaLabel: b,
+    ariaLabel: d,
     id: s,
     children: g,
-    wrapperClassName: $,
-    className: D,
-    arrow: v = !1,
-    concept: N = "normal",
-    disabled: p = !1,
-    ellipsis: B = !1,
-    fluid: O = !1,
-    htmlMarkup: _ = "button",
-    mode: X = "onlight",
-    onBlur: R,
+    wrapperClassName: O,
+    className: X,
+    arrow: _,
+    concept: B = "normal",
+    disabled: f = !1,
+    ellipsis: R = !1,
+    fluid: A = !1,
+    htmlMarkup: w = "button",
+    mode: j = "onlight",
+    onBlur: E,
     onClick: x,
-    size: j = "medium",
-    variant: w = "fill",
-    href: q,
-    tabIndex: A,
-    testId: E,
-    target: S,
-    type: G = "button",
-    ...z
-  } = r, [d, f, F] = ut(o.Children.toArray(g)), { hoverRef: H, isHovered: J } = _ === "button" ? W(n) : W(n), K = at(null), a = !!(d || f) && !F, L = d && (f || v) && !a, I = X === "ondark", h = it() < mt.md, M = N === "destructive" && !p, Q = w === "outline", i = w === "borderless", Y = ft(w === "fill", i, p, N, I, h), P = v && !i, u = j === "large" && !M && !i, Z = { ...z }, T = m(
+    size: q = "medium",
+    variant: I = "fill",
+    href: G,
+    tabIndex: S,
+    testId: z,
+    target: U,
+    type: J = "button",
+    ...F
+  } = r, [u, m, H] = mt(o.Children.toArray(g)), { hoverRef: L, isHovered: K } = w === "button" ? D(n) : D(n), Q = lt(null), a = !!(u || m) && !H, M = u && (m || _) && !a, y = j === "ondark", h = ut() < bt.md, P = B === "destructive" && !f, Y = I === "outline", l = I === "borderless", T = ht(I === "fill", l, f, B, y, h), C = _ === "icon" && !l, b = q === "large" && !P && !l, Z = _ === "accessibility-character" && !A && !u && !m && !C && l, tt = { ...F }, V = p(
     t["button-wrapper"],
-    { [t["button-wrapper--fluid"]]: O || B },
-    $
-  ), tt = m(
+    { [t["button-wrapper--fluid"]]: A || R },
+    O
+  ), ot = p(
     t.button,
     {
-      [t["button--destructive"]]: M,
-      [t["button--normal"]]: !u,
-      [t["button--large"]]: u,
-      [t["button--outline"]]: Q,
-      [t["button--borderless"]]: i,
-      [t["button--left-icon"]]: d && !a,
-      [t["button--right-icon"]]: f && !a,
-      [t["button--both-icons"]]: L,
+      [t["button--destructive"]]: P,
+      [t["button--normal"]]: !b,
+      [t["button--large"]]: b,
+      [t["button--outline"]]: Y,
+      [t["button--borderless"]]: l,
+      [t["button--left-icon"]]: u && !a,
+      [t["button--right-icon"]]: m && !a,
+      [t["button--both-icons"]]: M,
       [t["button--only-icon"]]: a,
-      [t["button--arrow"]]: P,
-      [t["button--on-dark"]]: I
+      [t["button--arrow"]]: C,
+      [t["button--on-dark"]]: y
     },
-    D
-  ), ot = m(t.button__text, {
-    [t["button__text--ellipsis"]]: B
-  }), et = m(t.diagonal, {
-    [t["diagonal--on-dark"]]: I
+    X
+  ), et = p(t.button__text, {
+    [t["button__text--ellipsis"]]: R
+  }), rt = p(t.diagonal, {
+    [t["diagonal--on-dark"]]: y
   });
-  lt(() => {
-    ht(a, b, !bt() && !pt());
+  ct(() => {
+    gt(a, d, !pt() && !dt());
   }, []);
-  const C = (l, nt, st) => l ? o.cloneElement(l, {
-    size: nt,
-    color: l != null && l.props.color ? l.props.color : Y,
-    isHovered: J,
-    className: st
-  }) : null, rt = () => /* @__PURE__ */ o.createElement("span", { className: ot, ref: K }, p && i && /* @__PURE__ */ o.createElement("span", { className: et }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, a ? b : F)), U = () => /* @__PURE__ */ o.createElement("span", { className: tt }, C(d, k(u, h), a ? void 0 : t["button__left-icon"]), rt(), P ? C(
-    /* @__PURE__ */ o.createElement(ct, { svgIcon: dt }),
-    k(u, h),
-    m(t.button__arrow, { [t["button__arrow--both-icons"]]: L })
-  ) : C(f, k(u, h), t["button__right-icon"]));
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, _ === "button" && /* @__PURE__ */ o.createElement(
+  const k = (c, st, at) => c ? o.cloneElement(c, {
+    size: st,
+    color: c != null && c.props.color ? c.props.color : T,
+    isHovered: K,
+    className: at
+  }) : null, nt = () => /* @__PURE__ */ o.createElement("span", { className: et, ref: Q }, f && l && /* @__PURE__ */ o.createElement("span", { className: rt }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, a ? d : H)), W = () => /* @__PURE__ */ o.createElement("span", { className: ot }, k(u, N(b, h), a ? void 0 : t["button__left-icon"]), nt(), C ? k(
+    /* @__PURE__ */ o.createElement(it, { svgIcon: ft }),
+    N(b, h),
+    p(t.button__arrow, { [t["button__arrow--both-icons"]]: M })
+  ) : k(m, N(b, h), t["button__right-icon"]), Z && /* @__PURE__ */ o.createElement("span", { style: { color: T }, className: t["button__right-unicode-arrow"] }, "  →"));
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, w === "button" && /* @__PURE__ */ o.createElement(
     "button",
     {
       id: s,
-      onBlur: R,
+      onBlur: E,
       onClick: x,
-      disabled: p,
-      "data-testid": E,
-      "data-analyticsid": V.Button,
-      className: T,
-      ref: H,
-      tabIndex: A,
-      type: G,
-      ...Z
+      disabled: f,
+      "data-testid": z,
+      "data-analyticsid": $.Button,
+      className: V,
+      ref: L,
+      tabIndex: S,
+      type: J,
+      ...tt
     },
-    U()
-  ), _ === "a" && /* @__PURE__ */ o.createElement(
+    W()
+  ), w === "a" && /* @__PURE__ */ o.createElement(
     "a",
     {
       id: s,
-      onBlur: R,
+      onBlur: E,
       onClick: x,
-      "data-testid": E,
-      "data-analyticsid": V.Button,
-      className: T,
-      href: q,
-      target: S,
-      rel: S === "_blank" ? "noopener noreferrer" : r.rel,
-      ref: H,
-      tabIndex: A,
-      ...z
+      "data-testid": z,
+      "data-analyticsid": $.Button,
+      className: V,
+      href: G,
+      target: U,
+      rel: U === "_blank" ? "noopener noreferrer" : r.rel,
+      ref: L,
+      tabIndex: S,
+      ...F
     },
-    U()
+    W()
   ));
-}), St = gt;
+}), zt = _t;
 export {
-  St as default
+  zt as default
 };
 //# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: boolean;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean) => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']}>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}

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

@@ -52,3 +52,4 @@ export declare const DarkMode: Story;
 export declare const Disabled: Story;
 export declare const Fluid: Story;
 export declare const Ellipsis: Story;
+export declare const UURightArrow: Story;

package/components/Button/styles.module.scss

@@ -332,6 +332,10 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
+  &__right-unicode-arrow {
+    white-space: pre;
+  }
+
   /* stylelint-disable-next-line */
   &--outline &__text {
     @include outline-text($blueberry600);

package/components/Button/styles.module.scss.d.ts

@@ -6,6 +6,7 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
+  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--ellipsis': string;
   'button--arrow': string;

package/components/Checkbox/Checkbox.d.ts

@@ -15,6 +15,8 @@ export interface CheckboxProps extends Pick<React.InputHTMLAttributes<HTMLInputE
     error?: boolean;
     /** Error text to show above the component */
     errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/Checkbox/Checkbox.js

@@ -1,107 +1,109 @@
-import l, { useState as H, useEffect as X } from "react";
+import l, { useState as X, useEffect as $ } from "react";
 import t from "classnames";
-import { FormMode as b, FormSize as $, AnalyticsId as J, IconSize as K } from "../../constants.js";
-import { usePseudoClasses as Q } from "../../hooks/usePseudoClasses.js";
+import { FormMode as i, FormSize as J, AnalyticsId as K, IconSize as Q } from "../../constants.js";
+import { usePseudoClasses as V } from "../../hooks/usePseudoClasses.js";
+import { useUuid as Y } from "../../hooks/useUuid.js";
 import { getColor as h } from "../../theme/currys/color.js";
-import { isMutableRefObject as U, mergeRefs as V } from "../../utils/refs.js";
-import { uuid as Y } from "../../utils/uuid.js";
-import { Icon as Z } from "../Icon/Icon.js";
-import ee from "../Icons/Check.js";
-import { getLabelText as ce, renderLabelAsParent as oe } from "../Label/Label.js";
+import { isMutableRefObject as Z, mergeRefs as ee } from "../../utils/refs.js";
+import { uuid as ce } from "../../utils/uuid.js";
+import { Icon as re } from "../Icon/Icon.js";
+import oe from "../Icons/Check.js";
+import { getLabelText as ae, renderLabelAsParent as le } from "../Label/Label.js";
 import e from "./styles.module.scss";
-const v = l.forwardRef((x, d) => {
+const I = l.forwardRef((x, d) => {
   const {
-    className: I,
+    className: N,
     checked: k = !1,
     disabled: a,
     label: m,
-    inputId: p = Y(),
-    mode: n = b.onwhite,
-    name: N = p,
-    size: E,
+    inputId: p = ce(),
+    mode: n = i.onwhite,
+    name: E = p,
+    size: S,
     errorText: s,
     error: g = !!s,
-    value: S = ce(m),
-    testId: R,
-    required: z,
+    errorTextId: R,
+    value: T = ae(m),
+    testId: z,
+    required: F,
     onChange: u,
-    ...F
-  } = x, [o, w] = H(k), f = n === b.onwhite, C = n === b.ongrey, y = n === b.onblueberry, r = g || n === b.oninvalid, i = n === b.ondark, c = E === $.large, { refObject: L, isFocused: T } = Q(U(d) ? d : null), W = V([d, L]), j = t(e["checkbox-wrapper"], {
+    ...L
+  } = x, [r, w] = X(k), f = Y(R), C = n === i.onwhite, y = n === i.ongrey, v = n === i.onblueberry, o = g || n === i.oninvalid, b = n === i.ondark, c = S === J.large, { refObject: j, isFocused: W } = V(Z(d) ? d : null), A = ee([d, j]), M = t(e["checkbox-wrapper"], {
     [e["checkbox-wrapper--with-error"]]: s,
     [e["checkbox-wrapper--large"]]: c
-  }), A = t(e["checkbox-label"], {
+  }), O = t(e["checkbox-label"], {
     [e["checkbox-label--disabled"]]: a,
-    [e["checkbox-label--on-dark"]]: i,
+    [e["checkbox-label--on-dark"]]: b,
     [e["checkbox-label--large"]]: c,
-    [e["checkbox-label__large--checked"]]: c && o,
-    [e["checkbox-label__large--focus"]]: c && T,
-    [e["checkbox-label__large--on-white"]]: c && f,
-    [e["checkbox-label__large--on-grey"]]: c && C,
-    [e["checkbox-label__large--on-blueberry"]]: c && y,
-    [e["checkbox-label__large--on-invalid"]]: c && r,
+    [e["checkbox-label__large--checked"]]: c && r,
+    [e["checkbox-label__large--focus"]]: c && W,
+    [e["checkbox-label__large--on-white"]]: c && C,
+    [e["checkbox-label__large--on-grey"]]: c && y,
+    [e["checkbox-label__large--on-blueberry"]]: c && v,
+    [e["checkbox-label__large--on-invalid"]]: c && o,
     [e["checkbox-label__large--disabled"]]: c && a
-  }), M = t(e.checkbox, I), O = t(e["checkbox__icon-wrapper"], {
-    [e["checkbox__icon-wrapper--on-white"]]: f,
-    [e["checkbox__icon-wrapper--on-grey"]]: C,
-    [e["checkbox__icon-wrapper--on-invalid"]]: r,
+  }), P = t(e.checkbox, N), U = t(e["checkbox__icon-wrapper"], {
+    [e["checkbox__icon-wrapper--on-white"]]: C,
+    [e["checkbox__icon-wrapper--on-grey"]]: y,
+    [e["checkbox__icon-wrapper--on-invalid"]]: o,
     [e["checkbox__icon-wrapper--disabled"]]: a,
-    [e["checkbox__icon-wrapper__regular--checked"]]: !c && o,
-    [e["checkbox__icon-wrapper__regular--invalid"]]: !c && o && r,
-    [e["checkbox__icon-wrapper__regular--on-dark"]]: !c && o && i,
-    [e["checkbox__icon-wrapper__large--checked"]]: c && o,
-    [e["checkbox__icon-wrapper__large--invalid"]]: c && r,
-    [e["checkbox__icon-wrapper--on-dark"]]: i,
-    [e["checkbox__icon-wrapper--on-blueberry"]]: y,
-    [e["checkbox__icon-wrapper--invalid"]]: r,
-    [e["checkbox__icon-wrapper__large--invalid"]]: c && o && r,
-    [e["checkbox__icon-wrapper__large--disabled"]]: a && c && o,
-    [e["checkbox__icon-wrapper__large--checked--invalid"]]: c && o && r,
-    [e["checkbox__icon-wrapper__large--checked--disabled"]]: a && c && o
-  }), P = t(e["checkbox-label__text"], {
-    [e["checkbox-label__text__large--checked"]]: c && o,
-    [e["checkbox-label__text__large--invalid"]]: c && o && r,
-    [e["checkbox-label__text--on-dark"]]: i,
+    [e["checkbox__icon-wrapper__regular--checked"]]: !c && r,
+    [e["checkbox__icon-wrapper__regular--invalid"]]: !c && r && o,
+    [e["checkbox__icon-wrapper__regular--on-dark"]]: !c && r && b,
+    [e["checkbox__icon-wrapper__large--checked"]]: c && r,
+    [e["checkbox__icon-wrapper__large--invalid"]]: c && o,
+    [e["checkbox__icon-wrapper--on-dark"]]: b,
+    [e["checkbox__icon-wrapper--on-blueberry"]]: v,
+    [e["checkbox__icon-wrapper--invalid"]]: o,
+    [e["checkbox__icon-wrapper__large--invalid"]]: c && r && o,
+    [e["checkbox__icon-wrapper__large--disabled"]]: a && c && r,
+    [e["checkbox__icon-wrapper__large--checked--invalid"]]: c && r && o,
+    [e["checkbox__icon-wrapper__large--checked--disabled"]]: a && c && r
+  }), q = t(e["checkbox-label__text"], {
+    [e["checkbox-label__text__large--checked"]]: c && r,
+    [e["checkbox-label__text__large--invalid"]]: c && r && o,
+    [e["checkbox-label__text--on-dark"]]: b,
     [e["checkbox-label__text--disabled"]]: a
-  }), q = t(e["checkbox-errors"]);
+  }), B = t(e["checkbox-errors"]);
   let _ = h("white");
-  (i || c && o) && (_ = h("blueberry", 900)), r && c && o && (_ = h("white")), a && (_ = h("neutral", 400)), X(() => {
+  (b || c && r) && (_ = h("blueberry", 900)), o && c && r && (_ = h("white")), a && (_ = h("neutral", 400)), $(() => {
     w(k);
   }, [k]);
-  const B = (G) => {
-    u && u(G), w(!o);
-  }, D = () => /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+  const D = (H) => {
+    u && u(H), w(!r);
+  }, G = () => /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
     "input",
     {
       id: p,
-      name: N,
-      className: M,
+      name: E,
+      className: P,
       type: "checkbox",
-      checked: o,
+      checked: r,
       disabled: a,
-      value: S,
-      ref: W,
-      "aria-describedby": x["aria-describedby"] ?? void 0,
+      value: T,
+      ref: A,
+      "aria-describedby": [x["aria-describedby"] || "", f].join(" "),
       "aria-invalid": g,
-      required: z,
-      onChange: B,
-      ...F
+      required: F,
+      onChange: D,
+      ...L
     }
-  ), /* @__PURE__ */ l.createElement("span", { className: O }, o && /* @__PURE__ */ l.createElement(Z, { color: _, className: e.checkbox__icon, svgIcon: ee, size: K.XSmall })));
-  return /* @__PURE__ */ l.createElement("div", { "data-testid": R, "data-analyticsid": J.Checkbox, className: j }, s && /* @__PURE__ */ l.createElement("p", { className: q }, s), oe(
+  ), /* @__PURE__ */ l.createElement("span", { className: U }, r && /* @__PURE__ */ l.createElement(re, { color: _, className: e.checkbox__icon, svgIcon: oe, size: Q.XSmall })));
+  return /* @__PURE__ */ l.createElement("div", { "data-testid": z, "data-analyticsid": K.Checkbox, className: M }, s && /* @__PURE__ */ l.createElement("p", { className: B, id: f }, s), le(
     m,
-    D(),
+    G(),
     p,
     n,
-    A,
-    P,
+    O,
+    q,
     e["checkbox-sublabel-wrapper"],
     c
   ));
 });
-v.displayName = "Checkbox";
-const ke = v;
+I.displayName = "Checkbox";
+const ge = I;
 export {
-  v as Checkbox,
-  ke as default
+  I as Checkbox,
+  ge as default
 };
 //# sourceMappingURL=Checkbox.js.map