@helsenorge/designsystem-react 9.0.0 → 9.2.0

package/components/Button/styles.module.scss

@@ -4,6 +4,7 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 @import '../../scss/screen-reader';
+@import '../../scss/supernova/styles/colors';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
@@ -20,6 +21,18 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   'both-icons' 'normal' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0,
   'both-icons' 'large' getSpacer(xs) getSpacer(xs) getSpacer(xs) getSpacer(xs) 0 0 0 0;
 
+// Brukes til å aktivere hover styling uten at button hovres
+@mixin outline-borderless-hover {
+  @include outline-borderless-background(
+    var(--color-action-background-transparent-onlight-hover),
+    var(--color-action-background-transparent-onlight-hover)
+  );
+}
+
+@mixin outline-borderless-text-hover {
+  @include text-color(var(--color-action-text-onlight-hover), var(--color-action-text-onlight-hover));
+}
+
 @mixin focus-shadow {
   box-shadow: 0 0 0 getSpacer(3xs) $black;
 }
@@ -28,11 +41,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   box-shadow: 0 0 0 getSpacer(3xs) $white;
 }
 
-@mixin outline-borderless($background-color) {
-  background-color: transparent;
+@mixin outline-borderless-background($background-color, $hover-background-color) {
+  background-color: $background-color;
 
   &:hover {
-    background-color: $background-color;
+    background-color: $hover-background-color;
   }
 
   :disabled > & {
@@ -57,9 +70,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 }
 
-@mixin outline-text($color) {
+@mixin text-color($color, $hover-color) {
   color: $color;
 
+  :hover > & {
+    color: $hover-color;
+  }
+
   :disabled > & {
     @media (min-width: map.get($grid-breakpoints, md)) {
       color: $neutral700;
@@ -67,14 +84,6 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 }
 
-@mixin borderless-text($color) {
-  color: $color;
-
-  :disabled > & {
-    color: $neutral700;
-  }
-}
-
 @mixin fill-on-dark($background-color) {
   background-color: $white;
 
@@ -113,7 +122,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
 @mixin on-dark {
   &--on-dark {
-    @include fill-on-dark($blueberry50);
+    @include fill-on-dark(var(--color-action-background-ondark-hover));
   }
   &--on-dark#{&}--destructive {
     @include fill-on-dark($cherry50);
@@ -272,11 +281,11 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   &--outline,
   &--borderless {
-    @include outline-borderless(rgba(18, 111, 135, 0.1));
+    @include outline-borderless-background(transparent, var(--color-action-background-transparent-onlight-hover));
   }
   &--outline#{&}--destructive,
   &--borderless#{&}--destructive {
-    @include outline-borderless($cherry50);
+    @include outline-borderless-background(transparent, $cherry50);
   }
 
   &--outline {
@@ -341,19 +350,13 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   /* stylelint-disable-next-line */
-  &--outline &__text {
-    @include outline-text($blueberry600);
-  }
-  &--outline#{&}--destructive &__text {
-    @include outline-text($cherry600);
-  }
-
-  /* stylelint-disable-next-line */
+  &--outline &__text,
   &--borderless &__text {
-    @include borderless-text($blueberry600);
+    @include text-color(var(--color-action-text-onlight), var(--color-action-text-onlight-hover));
   }
+  &--outline#{&}--destructive &__text,
   &--borderless#{&}--destructive &__text {
-    @include borderless-text($cherry600);
+    @include text-color($cherry600, $cherry700);
   }
 
   /* stylelint-disable-next-line */

package/components/Expander/styles.module.scss

@@ -5,6 +5,7 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 @import '../../scss/supernova/styles/colors';
+@import '../Button/styles.module';
 
 .expander {
   position: initial;
@@ -37,15 +38,15 @@
     padding-right: getSpacer(s);
     text-align: left;
 
-    &:hover {
-      background-color: var(--color-action-background-transparent-onlight-hover);
-    }
-
     &--expanded {
-      background-color: var(--color-action-background-transparent-onlight-hover);
+      @include outline-borderless-hover;
     }
   }
 
+  &__button &__button__text {
+    @include outline-borderless-text-hover;
+  }
+
   &__trigger {
     $trigger: &;
 

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

@@ -1,6 +1,35 @@
 export type Styles = {
+  button: string;
+  button__arrow: string;
+  'button__arrow--both-icons': string;
+  'button__both-icons': string;
+  'button__left-icon': string;
+  'button__only-icon': string;
+  'button__right-icon': string;
+  'button__right-unicode-arrow': string;
+  button__text: string;
+  'button__text--centered': string;
+  'button__text--ellipsis': string;
+  'button--arrow': string;
+  'button--arrow--both-icons': string;
+  'button--borderless': string;
+  'button--both-icons': string;
+  'button--destructive': string;
+  'button--large': string;
+  'button--left-icon': string;
+  'button--normal': string;
+  'button--on-dark': string;
+  'button--only-icon': string;
+  'button--outline': string;
+  'button--right-icon': string;
+  'button-wrapper': string;
+  'button-wrapper--fluid': string;
+  diagonal: string;
+  diagonal__line: string;
+  'diagonal--on-dark': string;
   expander: string;
   expander__button: string;
+  expander__button__text: string;
   'expander__button--expanded': string;
   'expander__button--sticky': string;
   expander__content: string;

package/components/HelpPanel/index.js

@@ -1,24 +1,21 @@
 import { jsx as p } from "react/jsx-runtime";
-import t from "classnames";
-import { H as n } from "../../HighlightPanel.js";
-import i from "../Icons/HandWaving.js";
-import a from "./styles.module.scss";
-const N = ({ className: e, testId: s, size: l, children: o, title: r }) => {
-  const m = t(a["help-panel"], e);
-  return /* @__PURE__ */ p(
-    n,
-    {
-      className: m,
-      contentWrapperClassName: a["help-panel"],
-      testId: s,
-      size: l,
-      svgIcon: i,
-      title: r,
-      children: o
-    }
-  );
-};
+import s from "classnames";
+import { H as t } from "../../HighlightPanel.js";
+import n from "../Icons/HandWaving.js";
+import e from "./styles.module.scss";
+const H = ({ className: r, testId: l, size: a, children: o, title: m }) => /* @__PURE__ */ p(
+  t,
+  {
+    className: s(r, { [e["help-panel"]]: a === "fluid" }),
+    contentWrapperClassName: e["help-panel"],
+    testId: l,
+    size: a,
+    svgIcon: n,
+    title: m,
+    children: o
+  }
+);
 export {
-  N as default
+  H as default
 };
 //# sourceMappingURL=index.js.map

package/components/HelpPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightPanel\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","jsx","HighlightPanel","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAA,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,MAEC,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames(className, { [styles['help-panel']]: size === 'fluid' })}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","jsx","HighlightPanel","classNames","styles","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWP,GAAW,EAAE,CAACQ,EAAO,YAAY,CAAC,GAAGN,MAAS,SAAS;AAAA,IAC7E,yBAAyBM,EAAO,YAAY;AAAA,IAC5C,QAAAP;AAAA,IACA,MAAAC;AAAA,IACA,SAASO;AAAA,IACT,OAAAL;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}

package/components/HighlightPanel/HighlightPanel.d.ts

@@ -23,7 +23,7 @@ export interface HighlightPanelProps {
     htmlMarkup?: HighlightPanelTags;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Adds custom classes to the content-wrapper */
+    /** Adds custom classes to the content-wrapper. Not used for fluid size. */
     contentWrapperClassName?: string;
     /** Sets the data-testid attribute. */
     testId?: string;

package/components/Slider/Slider.d.ts

@@ -4,7 +4,7 @@ export type SliderStep = {
     label?: number | string;
     emojiUniCode?: string;
 };
-export interface SliderProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'onChange' | 'onBlur'> {
+export interface SliderProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {
     /** Activates Error style for the input */
     error?: boolean;
     /** Error text to show above the component */

package/components/Tabs/TabList/styles.module.scss

@@ -12,13 +12,18 @@
   gap: 0.25rem;
   list-style-type: none;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: auto hidden;
   height: 3rem;
   margin: 0;
   background-color: var(--color-base-background-white);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin-bottom: -1px;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none; /* Safari */
+  }
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     padding-left: 0;

package/components/Tabs/Tabs.d.ts

@@ -13,6 +13,8 @@ export interface TabsProps {
     className?: string;
     /** Sets the color of the tabs. Default: white */
     color?: TabsColors;
+    /** Sets wether the component should use the container-breakout class. Default: true */
+    containerBreakout?: boolean;
     /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */
     onColor?: TabsOnColor;
     /** Whether the tab list should be sticky */

package/components/Tabs/index.js

@@ -1,63 +1,65 @@
-import { jsxs as y, jsx as d } from "react/jsx-runtime";
-import b, { useState as i, useRef as v, useEffect as A } from "react";
-import S from "classnames";
-import { a as H, T as J } from "../../TabList.js";
-import { T as K } from "../../TabPanel.js";
-import { isMobileUA as O } from "../../utils/mobile.js";
+import { jsxs as A, jsx as d } from "react/jsx-runtime";
+import b, { useState as i, useRef as v, useEffect as N } from "react";
+import w from "classnames";
+import { a as J, T as K } from "../../TabList.js";
+import { T as O } from "../../TabPanel.js";
+import Q from "../../scss/layout.module.scss";
+import { isMobileUA as V } from "../../utils/mobile.js";
 import m from "./styles.module.scss";
-const Q = 75, V = ({
-  activeTab: E,
+const W = 75, Y = ({
+  activeTab: L,
   children: c,
-  className: M,
+  className: S,
   color: l = "white",
-  onColor: N = "onwhite",
-  sticky: g = !0,
+  containerBreakout: g = !0,
+  onColor: M = "onwhite",
+  sticky: k = !0,
   testId: D,
-  touchBehaviour: L = "none"
+  touchBehaviour: X = "none"
 }) => {
-  const X = E !== void 0, [P, U] = i(0), [u, j] = i(0), [h, k] = i(0), [F, s] = i(0), [I, f] = i(null), C = O(), n = v(null), r = v(null), $ = v(null);
+  const y = L !== void 0, [P, U] = i(0), [u, j] = i(0), [h, F] = i(0), [I, s] = i(0), [$, f] = i(null), C = V(), n = v(null), r = v(null), q = v(null);
   let R = "onwhite";
-  l === "white" && (R = N);
+  l === "white" && (R = M);
   const p = (e, o) => {
-    X || (U(e), e > o ? (s(0), z()) : e < o && (s(0), q()));
-  }, q = () => {
-    C && f("right");
+    y || (U(e), e > o ? (s(0), G()) : e < o && (s(0), z()));
   }, z = () => {
-    C && f("left");
+    C && f("right");
   }, G = () => {
+    C && f("left");
+  }, H = () => {
     f(null);
-  }, t = X ? E : P;
-  return A(() => {
+  }, t = y ? L : P;
+  return N(() => {
     const e = (a) => {
       j(a.touches[0].clientX);
     }, o = (a) => {
-      k(a.touches[0].clientX);
+      F(a.touches[0].clientX);
       const T = a.touches[0].clientX - u;
       t === 0 && T > 0 || t === b.Children.count(c) - 1 && T < 0 ? s(0) : s(T);
     }, x = () => {
-      Math.abs(h - u) >= Q && (h > u ? p(Math.max(0, t - 1), t) : p(Math.min(b.Children.count(c) - 1, t + 1), t)), s(0);
+      Math.abs(h - u) >= W && (h > u ? p(Math.max(0, t - 1), t) : p(Math.min(b.Children.count(c) - 1, t + 1), t)), s(0);
     };
-    return L === "swipe" && n.current && (n.current.addEventListener("touchstart", e), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", x)), () => {
+    return X === "swipe" && n.current && (n.current.addEventListener("touchstart", e), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", x)), () => {
       n.current && (n.current.removeEventListener("touchstart", e), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", x));
     };
-  }, [L, u, h, t]), A(() => {
+  }, [X, u, h, t]), N(() => {
     const e = () => {
-      G();
+      H();
     };
     return r.current && r.current.addEventListener("animationend", e), () => {
       r.current && r.current.removeEventListener("animationend", e);
     };
-  }, []), /* @__PURE__ */ y("div", { className: M, "data-testid": D, children: [
-    /* @__PURE__ */ y(
+  }, []), /* @__PURE__ */ A("div", { className: w(S, g && Q["container-breakout"]), "data-testid": D, children: [
+    /* @__PURE__ */ A(
       "div",
       {
-        ref: $,
-        className: S(m["tab-list-wrapper"], {
-          [m["tab-list-wrapper--sticky"]]: g
+        ref: q,
+        className: w(m["tab-list-wrapper"], {
+          [m["tab-list-wrapper--sticky"]]: k
         }),
         children: [
           /* @__PURE__ */ d(
-            J,
+            K,
             {
               onTabListClick: (e) => p(e, t),
               selectedTab: t,
@@ -66,17 +68,17 @@ const Q = 75, V = ({
               children: c
             }
           ),
-          /* @__PURE__ */ d("div", { className: S(m["panel-wrapper"], m[`panel-wrapper--${l}`]) })
+          /* @__PURE__ */ d("div", { className: w(m["panel-wrapper"], m[`panel-wrapper--${l}`]) })
         ]
       }
     ),
-    /* @__PURE__ */ d("div", { ref: n, style: { marginTop: "-50px" }, children: /* @__PURE__ */ d(K, { ref: r, color: l, isFirst: t == 0, translateX: F, animate: I, children: b.Children.toArray(c)[t] }) })
+    /* @__PURE__ */ d("div", { ref: n, style: { marginTop: "-50px" }, children: /* @__PURE__ */ d(O, { ref: r, color: l, isFirst: t == 0, translateX: I, animate: $, children: b.Children.toArray(c)[t] }) })
   ] });
-}, w = V;
-w.displayName = "Tabs";
-w.Tab = H;
-w.Tab.displayName = "Tabs.Tab";
+}, E = Y;
+E.displayName = "Tabs";
+E.Tab = J;
+E.Tab.displayName = "Tabs.Tab";
 export {
-  w as default
+  E as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  touchBehaviour = 'none',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0} translateX={translateX} animate={panelAnimation}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","onColor","sticky","testId","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onColorUsed","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  touchBehaviour = 'none',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0} translateX={translateX} animate={panelAnimation}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","containerBreakout","onColor","sticky","testId","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onColorUsed","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","designsystemlayout","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "9.0.0",
+  "version": "9.2.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/layout.module.scss

@@ -0,0 +1,14 @@
+@import './breakpoints';
+
+/*
+Denne filen er ment til å importeres som en css module:
+import designsystemlayout from './scss/layout.scss'
+<div className={designsystemlayout['container-breakout']}></div>
+*/
+
+.container-breakout {
+  // This is a copy of how bootstrap's row class sets margins inside a container
+  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_grid.scss#L16C1-L17C30
+  margin-right: -$grid-gutter-width * 0.5;
+  margin-left: -$grid-gutter-width * 0.5;
+}

package/scss/layout.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'container-breakout': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;