@helsenorge/designsystem-react 1.0.0-beta106 → 1.0.0-beta107

package/components/Close/Close.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-export interface CloseProps {
-    /** Function is called when user clicks the button */
-    onClick?: () => void;
-    /** Sets the aria-label of the button */
-    ariaLabel?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-declare const Close: (props: CloseProps) => JSX.Element;
-export default Close;
+/// <reference types="react" />
+export interface CloseProps {
+    /** Function is called when user clicks the button */
+    onClick?: () => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Close: (props: CloseProps) => JSX.Element;
+export default Close;
 //# sourceMappingURL=Close.d.ts.map

package/components/Close/index.d.ts

@@ -1,4 +1,4 @@
-import Close from './Close';
-export * from './Close';
-export default Close;
+import Close from './Close';
+export * from './Close';
+export default Close;
 //# sourceMappingURL=index.d.ts.map

package/components/Close/index.js

@@ -1,2 +1,2 @@
-import{C as s}from"../../Close-060173de.js";export{C as default}from"../../Close-060173de.js";import"react";import"../../palette-f206f488.js";import"../../Icon-537c6b21.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"./styles.module.scss";import"../../useBreakpoint-552af2b9.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"../../grid-11a70eb7.js";
+import{C as s}from"../../Close-d81081c8.js";export{C as default}from"../../Close-d81081c8.js";import"react";import"../../palette-f206f488.js";import"../Icons/Icon.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"../Icons/X.js";import"./styles.module.scss";import"../../useBreakpoint-552af2b9.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"../../grid-11a70eb7.js";
 //# sourceMappingURL=index.js.map

package/components/Close/styles.module.scss

@@ -1,32 +1,32 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_breakpoints.scss';
-
-.close {
-  @media (max-width: map-get($grid-breakpoints, sm)) {
-    height: 2.375rem;
-    width: 2.375rem;
-  }
-
-  height: 3rem;
-  width: 3rem;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-
-  &:hover,
-  &:active {
-    background-color: rgba(88, 170, 187, 0.1);
-  }
-  &:focus {
-    box-shadow: 0px 0px 0px 2px $black;
-    background-color: transparent;
-    border-radius: 0;
-    border: 0;
-    outline: none;
-  }
-  &:hover#{&}:hover{
-    background-color: rgba(88, 170, 187, 0.1);
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_breakpoints.scss';
+
+.close {
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    height: 2.375rem;
+    width: 2.375rem;
+  }
+
+  height: 3rem;
+  width: 3rem;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:hover,
+  &:active {
+    background-color: rgba(88, 170, 187, 0.1);
+  }
+  &:focus {
+    box-shadow: 0px 0px 0px 2px $black;
+    background-color: transparent;
+    border-radius: 0;
+    border: 0;
+    outline: none;
+  }
+  &:hover#{&}:hover{
+    background-color: rgba(88, 170, 187, 0.1);
+  }
+}

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

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

package/components/Expander/Expander.d.ts

@@ -1,33 +1,33 @@
-import React from 'react';
-import { SvgIcon } from '../Icons';
-import { PaletteNames } from '../../theme/palette';
-export declare enum ExpanderSize {
-    small = "small",
-    large = "large"
-}
-export declare type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
-interface ExpanderProps {
-    /** Sets the trigger title */
-    title: string;
-    /** Sets the expanded content */
-    children?: React.ReactNode;
-    /** Sets the size of the expander. Default: ExpanderSize.small */
-    size?: ExpanderSize;
-    /** Sets the background of the expander. Requires size=ExpanderSize.large. */
-    color?: ExpanderColors;
-    /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */
-    svgIcon?: SvgIcon;
-    /** Adds an icon to the expander trigger */
-    expanded?: boolean;
-    /** Removes border to the left of the content. Requires size=ExpanderSize.small. */
-    noNestedLine?: boolean;
-    /** Stick expander trigger to top of screen while scrolling down */
-    sticky?: boolean;
-    /** Called when expander is open/closed. */
-    onExpand?: (isExpanded: boolean) => void;
-    /** Sets the data-testid attribute on the expander button. */
-    testId?: string;
-}
-declare const Expander: React.FC<ExpanderProps>;
-export default Expander;
+import React from 'react';
+import { SvgIcon } from '../Icons';
+import { PaletteNames } from '../../theme/palette';
+export declare enum ExpanderSize {
+    small = "small",
+    large = "large"
+}
+export declare type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
+interface ExpanderProps {
+    /** Sets the trigger title */
+    title: string;
+    /** Sets the expanded content */
+    children?: React.ReactNode;
+    /** Sets the size of the expander. Default: ExpanderSize.small */
+    size?: ExpanderSize;
+    /** Sets the background of the expander. Requires size=ExpanderSize.large. */
+    color?: ExpanderColors;
+    /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */
+    svgIcon?: SvgIcon;
+    /** Adds an icon to the expander trigger */
+    expanded?: boolean;
+    /** Removes border to the left of the content. Requires size=ExpanderSize.small. */
+    noNestedLine?: boolean;
+    /** Stick expander trigger to top of screen while scrolling down */
+    sticky?: boolean;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const Expander: React.FC<ExpanderProps>;
+export default Expander;
 //# sourceMappingURL=Expander.d.ts.map

package/components/Expander/Expander.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/Expander/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAUnD,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,cAAc,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAE9H,UAAU,aAAa;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyHrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/Expander/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAUnD,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,cAAc,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAE9H,UAAU,aAAa;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0HrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Expander/index.d.ts

@@ -1,4 +1,4 @@
-import Expander from './Expander';
-export * from './Expander';
-export default Expander;
+import Expander from './Expander';
+export * from './Expander';
+export default Expander;
 //# sourceMappingURL=index.d.ts.map

package/components/Expander/index.js

@@ -1,2 +1,2 @@
-import{_ as e}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import t,{useState as a,useRef as n,useEffect as r}from"react";import{I as o}from"../../Icon-537c6b21.js";import{Z as s,A as i,I as d}from"../../constants-eb74321e.js";import{u as l}from"../../useHover-9710204a.js";import c from"./styles.module.scss";import{c as p}from"../../index-9b84fabc.js";import{C as m,a as _}from"../../ChevronUp-4b6797ef.js";import{B as x}from"../../Button-397ff5a8.js";import{a as u}from"../../useSticky-d61d1f0b.js";import"../../_tslib-51c8a283.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../Loader-bc13d060.js";import"../../uuid-fe7442b7.js";import"../Loader/styles.module.scss";import"../../useWindowSize-750f9b68.js";import"../Button/styles.module.scss";var f;!function(e){e.small="small",e.large="large"}(f||(f={}));export default function(g){var v=g.title,b=g.children,j=g.size,E=void 0===j?f.small:j,y=g.color,I=g.svgIcon,N=g.expanded,h=void 0!==N&&N,k=g.noNestedLine,z=void 0!==k&&k,H=g.sticky,S=void 0!==H&&H,w=g.testId,B=g.onExpand,C=a(h),L=e(C,2),W=L[0],X=L[1],T=n(null),A=n(null),O=n(null),P=l(A).isHovered,U=u(T,A),Z=U.isOutsideWindow,q=U.isLeavingWindow,D=U.offsetHeight,F=U.contentWidth,G=S&&W&&Z;r((function(){h!==W&&X(h)}),[h]),r((function(){B&&B(!!W)}),[W,B]);var J=function(e){return t.createElement("span",{className:p(c.expander__icon,c["expander__icon--".concat(e)])},t.createElement(o,{svgIcon:W?m:_,size:d.XSmall,isHovered:P}))},K=p(c.expander__trigger,c["expander__trigger--".concat(E)],E===f.large&&c["expander__trigger--".concat(y||"neutral")],E===f.large&&I&&c["expander__trigger--icon"],W&&c["expander__trigger--expanded"],G&&!q&&c["expander__trigger--sticky"],G&&q&&c["expander__trigger--absolute"]),M=p(c.expander__button,W&&c["expander__button--expanded"],G&&!q&&c["expander__button--sticky"],G&&q&&c["expander__button--absolute"]),Q=p(c.expander__content,c["expander__content--".concat(E)],E===f.large&&c["expander__content--".concat(y||"neutral")],E===f.large&&I&&c["expander__content--icon"],W&&c["expander__content--expanded"],E===f.small&&!z&&c["expander__content--nested-line"]);return t.createElement("div",{className:c.expander,ref:T,style:{paddingTop:G&&D?"".concat(D,"px"):void 0}},E===f.large?t.createElement("button",{className:K,style:{zIndex:P||G?s.ExpanderTrigger:void 0,width:G&&F?"".concat(F,"px"):void 0},"aria-expanded":W,ref:A,onClick:function(){return X(!W)},"data-testid":w,"data-analyticsid":i.Expander},E===f.small&&J("left"),I&&t.createElement("span",{className:p(c.expander__icon,c["expander__icon--left"])},t.createElement(o,{svgIcon:I,size:d.XSmall,isHovered:P})),v,E===f.large&&J("right")):t.createElement(x,{variant:"borderless",className:M,"aria-expanded":W,ref:A,onClick:function(){return X(!W)},testId:w,"data-analyticsid":i.Expander},t.createElement(o,{svgIcon:W?m:_,size:d.XSmall}),v),t.createElement("div",{className:Q,ref:O},b))}export{f as ExpanderSize};
+import{_ as e}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import t,{useState as n,useRef as r,useEffect as a}from"react";import{Icon as o}from"../Icons/Icon.js";import{Z as s,A as i,I as d}from"../../constants-eb74321e.js";import{u as c}from"../../useHover-9710204a.js";import{u as l}from"../../usePrevious-ae293b10.js";import p from"./styles.module.scss";import{c as m}from"../../index-9b84fabc.js";import _ from"../Icons/ChevronDown.js";import u from"../Icons/ChevronUp.js";import{B as x}from"../../Button-7e82091f.js";import{a as f}from"../../useSticky-d61d1f0b.js";import"../../_tslib-51c8a283.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../Loader-bc13d060.js";import"../../uuid-fe7442b7.js";import"../Loader/styles.module.scss";import"../../useWindowSize-750f9b68.js";import"../Button/styles.module.scss";var g;!function(e){e.small="small",e.large="large"}(g||(g={}));export default function(v){var b=v.title,j=v.children,E=v.size,I=void 0===E?g.small:E,y=v.color,h=v.svgIcon,N=v.expanded,k=void 0!==N&&N,z=v.noNestedLine,H=void 0!==z&&z,w=v.sticky,S=void 0!==w&&w,B=v.testId,C=v.onExpand,L=n(k),W=e(L,2),X=W[0],P=W[1],T=l(X),A=r(null),D=r(null),O=r(null),U=c(D).isHovered,Z=f(A,D),q=Z.isOutsideWindow,F=Z.isLeavingWindow,G=Z.offsetHeight,J=Z.contentWidth,K=S&&X&&q;a((function(){k!==X&&P(k)}),[k]),a((function(){C&&X!==!!T&&C(X)}),[X,C]);var M=function(e){return t.createElement("span",{className:m(p.expander__icon,p["expander__icon--".concat(e)])},t.createElement(o,{svgIcon:X?u:_,size:d.XSmall,isHovered:U}))},Q=m(p.expander__trigger,p["expander__trigger--".concat(I)],I===g.large&&p["expander__trigger--".concat(y||"neutral")],I===g.large&&h&&p["expander__trigger--icon"],X&&p["expander__trigger--expanded"],K&&!F&&p["expander__trigger--sticky"],K&&F&&p["expander__trigger--absolute"]),R=m(p.expander__button,X&&p["expander__button--expanded"],K&&!F&&p["expander__button--sticky"],K&&F&&p["expander__button--absolute"]),V=m(p.expander__content,p["expander__content--".concat(I)],I===g.large&&p["expander__content--".concat(y||"neutral")],I===g.large&&h&&p["expander__content--icon"],X&&p["expander__content--expanded"],I===g.small&&!H&&p["expander__content--nested-line"]);return t.createElement("div",{className:p.expander,ref:A,style:{paddingTop:K&&G?"".concat(G,"px"):void 0}},I===g.large?t.createElement("button",{className:Q,style:{zIndex:U||K?s.ExpanderTrigger:void 0,width:K&&J?"".concat(J,"px"):void 0},"aria-expanded":X,ref:D,onClick:function(){return P(!X)},"data-testid":B,"data-analyticsid":i.Expander},I===g.small&&M("left"),h&&t.createElement("span",{className:m(p.expander__icon,p["expander__icon--left"])},t.createElement(o,{svgIcon:h,size:d.XSmall,isHovered:U})),b,I===g.large&&M("right")):t.createElement(x,{variant:"borderless",className:R,"aria-expanded":X,ref:D,onClick:function(){return P(!X)},testId:B,"data-analyticsid":i.Expander},t.createElement(o,{svgIcon:X?u:_,size:d.XSmall}),b),t.createElement("div",{className:V,ref:O},j))}export{g as ExpanderSize};
 //# sourceMappingURL=index.js.map

package/components/Expander/styles.module.scss

@@ -1,165 +1,165 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-
-.expander {
-  position: relative;
-  width: 100%;
-  &__icon {
-    display: flex;
-    align-items: center;
-    &--left {
-      margin-right: getSpacer(2xs);
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: getSpacer(s);
-      }
-    }
-    &--right {
-      margin-left: auto;
-      padding-left: getSpacer(2xs);
-    }
-  }
-  &__button {
-    position: relative;
-    &:hover {
-      background-color: $blueberry50;
-    }
-    &--expanded {
-      background-color: $blueberry50;
-    }
-  }
-  &__trigger {
-    $trigger: &;
-    position: relative;
-    display: flex;
-    align-items: center;
-    border: none;
-    outline: none;
-    font-size: $font-size-sm;
-    line-height: $lineheight-size-sm;
-    font-weight: 600;
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
-      line-height: $lineheight-size-md;
-    }
-
-    &--large {
-      width: 100%;
-      padding: getSpacer(xs) getSpacer(2xs) getSpacer(xs) getSpacer(s);
-
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(l);
-      }
-    }
-    &--icon {
-      padding-left: getSpacer(2xs);
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        padding-left: getSpacer(s);
-      }
-    }
-
-    $colors: 'neutral', 'blueberry', 'cherry', 'kiwi', 'banana', 'plum';
-
-    @each $color in $colors {
-      &--#{$color} {
-        background-color: map-get($palette-map, #{$color}50);
-        &:hover {
-          background-color: map-get($palette-map, #{$color}100);
-        }
-        &:focus {
-          box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600;
-        }
-        &#{$trigger}--expanded {
-          background-color: map-get($palette-map, #{$color}100);
-          &:hover {
-            background-color: map-get($palette-map, #{$color}200);
-          }
-        }
-      }
-    }
-
-    // Hvit bakgrunn har egne regler for bakgrunnsfarge, hover og fokus
-    &--white {
-      background-color: $white;
-      &:hover {
-        background-color: $neutral100;
-      }
-      &:focus {
-        box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600;
-      }
-      &#{$trigger}--expanded {
-        box-shadow: inset 0 0 0 6px $neutral100;
-        &:focus {
-          box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600, inset 0 0 0 6px $neutral100;
-        }
-      }
-    }
-  }
-  &__button,
-  &__trigger {
-    &--sticky {
-      position: fixed;
-      top: 0;
-    }
-    &--absolute {
-      position: absolute;
-      bottom: 0;
-    }
-  }
-  &__content {
-    $content: &;
-    display: none;
-    width: 100%;
-
-    &--expanded {
-      display: block;
-    }
-    &--small {
-      margin-top: getSpacer(s);
-    }
-    &--nested-line {
-      padding-left: getSpacer(s);
-      border-left: solid 3px $neutral200;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
-        padding-left: calc(
-          38px / 2 + 12px - 2px
-        ); // Halvparten av chevron-ikonets bredde, pluss ikonets margin-right på tablet, minus bredden på border
-      }
-    }
-    &--large {
-      padding: getSpacer(s) getSpacer(m) getSpacer(l) getSpacer(s);
-
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        padding: getSpacer(m) getSpacer(l) getSpacer(xl) getSpacer(l);
-      }
-      &#{$content}--icon {
-        @media (min-width: map-get($grid-breakpoints, md)) {
-          padding-left: 70px;
-        }
-      }
-    }
-    &--neutral {
-      background-color: $neutral50;
-    }
-    &--blueberry {
-      background-color: $blueberry50;
-    }
-    &--cherry {
-      background-color: $cherry50;
-    }
-    &--kiwi {
-      background-color: $kiwi50;
-    }
-    &--banana {
-      background-color: $banana50;
-    }
-    &--plum {
-      background-color: $plum50;
-    }
-    &--white {
-      background-color: $white;
-    }
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+
+.expander {
+  position: relative;
+  width: 100%;
+  &__icon {
+    display: flex;
+    align-items: center;
+    &--left {
+      margin-right: getSpacer(2xs);
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: getSpacer(s);
+      }
+    }
+    &--right {
+      margin-left: auto;
+      padding-left: getSpacer(2xs);
+    }
+  }
+  &__button {
+    position: relative;
+    &:hover {
+      background-color: $blueberry50;
+    }
+    &--expanded {
+      background-color: $blueberry50;
+    }
+  }
+  &__trigger {
+    $trigger: &;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: none;
+    outline: none;
+    font-size: $font-size-sm;
+    line-height: $lineheight-size-sm;
+    font-weight: 600;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+      line-height: $lineheight-size-md;
+    }
+
+    &--large {
+      width: 100%;
+      padding: getSpacer(xs) getSpacer(2xs) getSpacer(xs) getSpacer(s);
+
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(l);
+      }
+    }
+    &--icon {
+      padding-left: getSpacer(2xs);
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding-left: getSpacer(s);
+      }
+    }
+
+    $colors: 'neutral', 'blueberry', 'cherry', 'kiwi', 'banana', 'plum';
+
+    @each $color in $colors {
+      &--#{$color} {
+        background-color: map-get($palette-map, #{$color}50);
+        &:hover {
+          background-color: map-get($palette-map, #{$color}100);
+        }
+        &:focus {
+          box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600;
+        }
+        &#{$trigger}--expanded {
+          background-color: map-get($palette-map, #{$color}100);
+          &:hover {
+            background-color: map-get($palette-map, #{$color}200);
+          }
+        }
+      }
+    }
+
+    // Hvit bakgrunn har egne regler for bakgrunnsfarge, hover og fokus
+    &--white {
+      background-color: $white;
+      &:hover {
+        background-color: $neutral100;
+      }
+      &:focus {
+        box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600;
+      }
+      &#{$trigger}--expanded {
+        box-shadow: inset 0 0 0 6px $neutral100;
+        &:focus {
+          box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600, inset 0 0 0 6px $neutral100;
+        }
+      }
+    }
+  }
+  &__button,
+  &__trigger {
+    &--sticky {
+      position: fixed;
+      top: 0;
+    }
+    &--absolute {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  &__content {
+    $content: &;
+    display: none;
+    width: 100%;
+
+    &--expanded {
+      display: block;
+    }
+    &--small {
+      margin-top: getSpacer(s);
+    }
+    &--nested-line {
+      padding-left: getSpacer(s);
+      border-left: solid 3px $neutral200;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
+        padding-left: calc(
+          38px / 2 + 12px - 2px
+        ); // Halvparten av chevron-ikonets bredde, pluss ikonets margin-right på tablet, minus bredden på border
+      }
+    }
+    &--large {
+      padding: getSpacer(s) getSpacer(m) getSpacer(l) getSpacer(s);
+
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding: getSpacer(m) getSpacer(l) getSpacer(xl) getSpacer(l);
+      }
+      &#{$content}--icon {
+        @media (min-width: map-get($grid-breakpoints, md)) {
+          padding-left: 70px;
+        }
+      }
+    }
+    &--neutral {
+      background-color: $neutral50;
+    }
+    &--blueberry {
+      background-color: $blueberry50;
+    }
+    &--cherry {
+      background-color: $cherry50;
+    }
+    &--kiwi {
+      background-color: $kiwi50;
+    }
+    &--banana {
+      background-color: $banana50;
+    }
+    &--plum {
+      background-color: $plum50;
+    }
+    &--white {
+      background-color: $white;
+    }
+  }
+}

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

@@ -1,42 +1,42 @@
-export type Styles = {
-  expander: string;
-  expander__button: string;
-  'expander__button--absolute': string;
-  'expander__button--expanded': string;
-  'expander__button--sticky': string;
-  expander__content: string;
-  'expander__content--banana': string;
-  'expander__content--blueberry': string;
-  'expander__content--cherry': string;
-  'expander__content--expanded': string;
-  'expander__content--icon': string;
-  'expander__content--kiwi': string;
-  'expander__content--large': string;
-  'expander__content--nested-line': string;
-  'expander__content--neutral': string;
-  'expander__content--plum': string;
-  'expander__content--small': string;
-  'expander__content--white': string;
-  expander__icon: string;
-  'expander__icon--left': string;
-  'expander__icon--right': string;
-  expander__trigger: string;
-  'expander__trigger--absolute': string;
-  'expander__trigger--banana': string;
-  'expander__trigger--blueberry': string;
-  'expander__trigger--cherry': string;
-  'expander__trigger--expanded': string;
-  'expander__trigger--icon': string;
-  'expander__trigger--kiwi': string;
-  'expander__trigger--large': string;
-  'expander__trigger--neutral': string;
-  'expander__trigger--plum': string;
-  'expander__trigger--sticky': string;
-  'expander__trigger--white': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  expander: string;
+  expander__button: string;
+  'expander__button--absolute': string;
+  'expander__button--expanded': string;
+  'expander__button--sticky': string;
+  expander__content: string;
+  'expander__content--banana': string;
+  'expander__content--blueberry': string;
+  'expander__content--cherry': string;
+  'expander__content--expanded': string;
+  'expander__content--icon': string;
+  'expander__content--kiwi': string;
+  'expander__content--large': string;
+  'expander__content--nested-line': string;
+  'expander__content--neutral': string;
+  'expander__content--plum': string;
+  'expander__content--small': string;
+  'expander__content--white': string;
+  expander__icon: string;
+  'expander__icon--left': string;
+  'expander__icon--right': string;
+  expander__trigger: string;
+  'expander__trigger--absolute': string;
+  'expander__trigger--banana': string;
+  'expander__trigger--blueberry': string;
+  'expander__trigger--cherry': string;
+  'expander__trigger--expanded': string;
+  'expander__trigger--icon': string;
+  'expander__trigger--kiwi': string;
+  'expander__trigger--large': string;
+  'expander__trigger--neutral': string;
+  'expander__trigger--plum': string;
+  'expander__trigger--sticky': string;
+  'expander__trigger--white': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;