@helsenorge/designsystem-react 7.6.0 → 7.8.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [7.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.6.0&targetVersion=GTv7.7.0) (2024-05-28)
+
+### Features
+
+- ny type notification Badge og tillates flere badges i ListHeader
+  ([0768e0a](https://github.com/helsenorge/designsystem/commit/0768e0ae1d137f17ecfa92aa2b708ca52862e6b2)), closes
+  [#325119](https://github.com/helsenorge/designsystem/issues/325119)
+- **expander:** bruk token på bakgrunn for liten expander
+  ([73d8531](https://github.com/helsenorge/designsystem/commit/73d8531a52ed5a6387af8fa84045a0afd620eb38)), closes
+  [#324989](https://github.com/helsenorge/designsystem/issues/324989)
+- **notificationpanel:** bruk Expander-komponent i NotificationPanel
+  ([e8d4e8d](https://github.com/helsenorge/designsystem/commit/e8d4e8d776333f243cddba8f15742dd6f271bb3d)), closes
+  [#324989](https://github.com/helsenorge/designsystem/issues/324989)
+
+### Bug Fixes
+
+- **expander:** manglende import av supernova stylesheet
+  ([077ec2d](https://github.com/helsenorge/designsystem/commit/077ec2d1f59ce80076deeae5bc7911f7a9a2e431)), closes
+  [#324989](https://github.com/helsenorge/designsystem/issues/324989)
+
+## [7.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.5.0&targetVersion=GTv7.6.0) (2024-05-15)
+
+### Features
+
+- **notificationpanel:** legg til prop for å sette html tag for label
+  ([ebd331a](https://github.com/helsenorge/designsystem/commit/ebd331a75f04099c4ad7e552ff70df8751675734)), closes
+  [#324952](https://github.com/helsenorge/designsystem/issues/324952)
+
+### Bug Fixes
+
+- skjemaelementer med error styling overlapper utifra dom rekkefølge
+  ([b07b7d6](https://github.com/helsenorge/designsystem/commit/b07b7d69391b3e4296e8a8cde8b8d312f835cb03)), closes
+  [#324846](https://github.com/helsenorge/designsystem/issues/324846)
+- **expanderlist:** fiks så variant fill ikke mister margin top ved åpning av expander
+  ([d277c97](https://github.com/helsenorge/designsystem/commit/d277c97660aa8334a44b1183445f55f2037b2263)), closes
+  [#324823](https://github.com/helsenorge/designsystem/issues/324823)
+
 ## [7.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.4.0&targetVersion=GTv7.5.0) (2024-05-08)
 
 ### Features
@@ -1431,12 +1468,12 @@ Dette er fordi vi skal kunne dynamisk importere alt som ligger i Icons, så da b
 
 ### Bug Fixes
 
-- panel har avstand fra tittel til badge
-  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
-  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 - økt kontrast på understreking av lenker
   ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
   [#229049](https://github.com/helsenorge/designsystem/issues/229049)
+- panel har avstand fra tittel til badge
+  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
+  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/components/AnchorLink/styles.module.scss

@@ -10,7 +10,7 @@ $focus-width: 0.15rem;
   cursor: pointer;
   color: $blueberry700;
   background-color: $blueberry60010;
-  border-bottom-color: $blueberry600;
+  text-decoration-color: $blueberry600;
 }
 
 @mixin anchorlink-focus {
@@ -24,12 +24,13 @@ $focus-width: 0.15rem;
   overflow-wrap: break-word;
   word-break: break-word;
   text-align: left;
-  text-decoration: none;
   color: $blueberry600;
   border: $focus-width solid transparent;
-  border-bottom-color: $neutral700;
-  border-bottom-width: $underline-width;
-  padding-bottom: calc($focus-width - $underline-width);
+  text-decoration: underline;
+  text-underline-offset: 0.16rem;
+  text-decoration-color: $blueberry400;
+  text-decoration-thickness: $underline-width;
+  padding: 0.1rem;
 
   &:hover {
     @include anchorlink-hover;

package/components/Badge/Badge.d.ts

@@ -1,16 +1,22 @@
 import React from 'react';
+import { BadgeNotificationVariant } from './NotificationBadge';
 import { PaletteNames } from '../../theme/palette';
 export type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;
 export type BadgeChildren = string | number;
+export type BadgeVariant = 'string' | 'notification';
 export interface BadgeProps {
     /** Sets the content of the badge. */
-    children: BadgeChildren;
+    children?: BadgeChildren;
     /** Adds custom classes to the element. */
     className?: string;
     /** Changes the badge background color. */
     color?: BadgeColors;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Changes the type of the badge. Default: string */
+    type?: BadgeVariant;
+    /** Type of notification badge. Only works if type is 'notification'. */
+    notificationVariant?: BadgeNotificationVariant;
 }
 export type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
 declare const Badge: BadgeType;

package/components/Badge/Badge.js

@@ -1,20 +1,30 @@
-import r from "react";
-import n from "classnames";
-import { AnalyticsId as b } from "../../constants.js";
+import t from "react";
+import m from "classnames";
+import g from "./NotificationBadge.js";
+import { IconSize as b, AnalyticsId as d } from "../../constants.js";
 import e from "../Badge/styles.module.scss";
-const m = r.forwardRef(function(t, d) {
-  const { children: s, className: o = "", color: a = "blueberry", testId: l } = t, c = n(
+const u = t.forwardRef(function(n, s) {
+  const { children: c, className: r = "", color: a = "blueberry", testId: i, type: l = "string", notificationVariant: o = "info" } = n, f = m(
     e.badge,
     {
       [e["badge--blueberry"]]: a === "blueberry",
       [e["badge--cherry"]]: a === "cherry",
       [e["badge--neutral"]]: a === "neutral"
     },
-    o
+    r
   );
-  return /* @__PURE__ */ r.createElement("span", { className: c, ref: d, "data-testid": l, "data-analyticsid": b.Badge }, s);
-}), p = m;
+  return l === "notification" && o !== void 0 ? /* @__PURE__ */ t.createElement(
+    g,
+    {
+      variant: o,
+      size: b.XSmall,
+      className: r,
+      testId: i,
+      "data-analyticsid": d.Badge
+    }
+  ) : /* @__PURE__ */ t.createElement("span", { className: f, ref: s, "data-testid": i, "data-analyticsid": d.Badge }, c);
+}), R = u;
 export {
-  p as default
+  R as default
 };
 //# sourceMappingURL=Badge.js.map

package/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;\nexport type BadgeChildren = string | number;\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'blueberry', testId } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n    },\n    className\n  );\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","badgeClasses","classNames","badgeStyles","AnalyticsId","Badge$1"],"mappings":";;;;AAuBA,MAAMA,IAAmBC,EAAM,WAAW,SAA2BC,GAAmBC,GAAsC;AAC5H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,OAAAC,IAAQ,aAAa,QAAAC,EAAW,IAAAL,GAC5DM,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,kBAAkB,CAAC,GAAGJ,MAAU;AAAA,MAC7C,CAACI,EAAY,eAAe,CAAC,GAAGJ,MAAU;AAAA,MAC1C,CAACI,EAAY,gBAAgB,CAAC,GAAGJ,MAAU;AAAA,IAC7C;AAAA,IACAD;AAAA,EAAA;AAIA,SAAAJ,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWO,GAAc,KAAAL,GAAU,eAAaI,GAAQ,oBAAkBI,EAAY,MAAA,GACzFP,CACH;AAEJ,CAAC,GAEDQ,IAAeZ;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport NotificationBadge, { BadgeNotificationVariant } from './NotificationBadge';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = Extract<PaletteNames, 'blueberry' | 'cherry' | 'neutral'>;\nexport type BadgeChildren = string | number;\nexport type BadgeVariant = 'string' | 'notification';\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children?: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the type of the badge. Default: string */\n  type?: BadgeVariant;\n  /** Type of notification badge. Only works if type is 'notification'. */\n  notificationVariant?: BadgeNotificationVariant;\n}\n\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'blueberry', testId, type = 'string', notificationVariant = 'info' } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n    },\n    className\n  );\n\n  if (type === 'notification' && notificationVariant !== undefined) {\n    return (\n      <NotificationBadge\n        variant={notificationVariant}\n        size={IconSize.XSmall}\n        className={className}\n        testId={testId}\n        data-analyticsid={AnalyticsId.Badge}\n      />\n    );\n  }\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","type","notificationVariant","badgeClasses","classNames","badgeStyles","NotificationBadge","IconSize","AnalyticsId","Badge$1"],"mappings":";;;;;AA8BA,MAAMA,IAAmBC,EAAM,WAAW,SAA2BC,GAAmBC,GAAsC;AACtH,QAAA,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,OAAAC,IAAQ,aAAa,QAAAC,GAAQ,MAAAC,IAAO,UAAU,qBAAAC,IAAsB,OAAA,IAAWP,GAC3GQ,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,kBAAkB,CAAC,GAAGN,MAAU;AAAA,MAC7C,CAACM,EAAY,eAAe,CAAC,GAAGN,MAAU;AAAA,MAC1C,CAACM,EAAY,gBAAgB,CAAC,GAAGN,MAAU;AAAA,IAC7C;AAAA,IACAD;AAAA,EAAA;AAGE,SAAAG,MAAS,kBAAkBC,MAAwB,SAEnDR,gBAAAA,EAAA;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,SAASJ;AAAA,MACT,MAAMK,EAAS;AAAA,MACf,WAAAT;AAAA,MACA,QAAAE;AAAA,MACA,oBAAkBQ,EAAY;AAAA,IAAA;AAAA,EAAA,IAMlCd,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWS,GAAc,KAAAP,GAAU,eAAaI,GAAQ,oBAAkBQ,EAAY,MAAA,GACzFX,CACH;AAEJ,CAAC,GAEDY,IAAehB;"}

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

@@ -14,6 +14,8 @@ declare const meta: {
     args: {
         children: string;
         color: "blueberry";
+        type: "string";
+        notificationVariant: "info";
     };
     argTypes: {
         children: {
@@ -23,9 +25,18 @@ declare const meta: {
             control: string;
             options: string[];
         };
+        type: {
+            control: string;
+            options: string[];
+        };
+        notificationVariant: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Variants: Story;
+export declare const Notification: Story;

package/components/Badge/NotificationBadge.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IconSize } from '../../constants';
+export type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';
+export interface NotificationBadgeProps {
+    /** Changes the type of the badge */
+    variant: BadgeNotificationVariant;
+    /** Sets the size of the badge */
+    size: IconSize;
+    /** Adds custom classes to the element */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Sets hover state */
+    isHovered?: boolean;
+}
+declare const NotificationBadge: (props: NotificationBadgeProps) => React.JSX.Element;
+export default NotificationBadge;

package/components/Badge/NotificationBadge.js

@@ -0,0 +1,68 @@
+import c from "react";
+import { palette as r } from "../../theme/palette.js";
+import { Icon as n } from "../Icon/Icon.js";
+import s from "../Icons/CheckFill.js";
+import m from "../Icons/ErrorSignFill.js";
+import f from "../Icons/InfoSignFill.js";
+import v from "../Icons/TriangleX.js";
+const g = (i) => {
+  const { variant: l, size: e, className: o = "", testId: t, isHovered: a = !1 } = i;
+  switch (l) {
+    case "info":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: f,
+          color: r.blueberry700,
+          hoverColor: r.blueberry700,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+    case "warn":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: m,
+          color: r.banana700,
+          hoverColor: r.banana700,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: v,
+          color: r.cherry700,
+          hoverColor: r.cherry700,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+    case "success":
+      return /* @__PURE__ */ c.createElement(
+        n,
+        {
+          svgIcon: s,
+          color: r.kiwi900,
+          hoverColor: r.kiwi900,
+          size: e,
+          className: o,
+          testId: t,
+          isHovered: a
+        }
+      );
+  }
+}, E = g;
+export {
+  E as default
+};
+//# sourceMappingURL=NotificationBadge.js.map

package/components/Badge/NotificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana700}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":["NotificationBadge","props","variant","size","className","testId","isHovered","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","NotificationBadge$1"],"mappings":";;;;;;;AAyBA,MAAMA,IAAoB,CAACC,MAAqD;AACxE,QAAA,EAAE,SAAAC,GAAS,MAAAC,GAAM,WAAAC,IAAY,IAAI,QAAAC,GAAQ,WAAAC,IAAY,GAAU,IAAAL;AACrE,UAAQC,GAAS;AAAA,IACf,KAAK;AAED,aAAAK,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASC;AAAA,UACT,OAAOC,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASG;AAAA,UACT,OAAOD,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASI;AAAA,UACT,OAAOF,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AAED,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASK;AAAA,UACT,OAAOH,EAAQ;AAAA,UACf,YAAYA,EAAQ;AAAA,UACpB,MAAAP;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,WAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,EAGR;AACF,GAEAQ,IAAed;"}

package/components/Button/Button.d.ts

@@ -6,6 +6,7 @@ export type ButtonSize = 'medium' | 'large';
 export type ButtonMode = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
 export type ButtonArrows = 'icon' | 'accessibility-character';
+export type ButtonTextPosition = 'left' | 'centered-mobile';
 export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {
     /** Sets the aria-label of the button, use when the button only includes an icon */
     ariaLabel?: string;
@@ -41,6 +42,8 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     tabIndex?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Sets the position of the text in the button - only applies when button is fluid */
+    textPosition?: ButtonTextPosition;
     /** Button type. Default: button */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
 }

package/components/Button/Button.js

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

@@ -330,6 +330,12 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    &--centered-mobile {
+      @media (max-width: map.get($grid-max-breakpoints, xs)) {
+        width: 100%;
+      }
+    }
   }
 
   &__right-unicode-arrow {

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

@@ -8,6 +8,7 @@ export type Styles = {
   'button__right-icon': string;
   'button__right-unicode-arrow': string;
   button__text: string;
+  'button__text--centered-mobile': string;
   'button__text--ellipsis': string;
   'button--arrow': string;
   'button--arrow--both-icons': string;