@helsenorge/designsystem-react 1.0.0-beta120 → 1.0.0-beta123

package/components/Dropdown/componentdata.json

@@ -0,0 +1,254 @@
+{
+  "props": {
+    "label": {
+      "defaultValue": null,
+      "description": "Label for dropdown. Synlig for skjermlesere.",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "toggleLabel": {
+      "defaultValue": null,
+      "description": "Tekst på knappen som åpner dropdownen",
+      "name": "toggleLabel",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Sets the dropdown content",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        },
+        {
+          "fileName": "designsystem/node_modules/@types/react/index.d.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "closeText": {
+      "defaultValue": null,
+      "description": "Close button text",
+      "name": "closeText",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "noCloseButton": {
+      "defaultValue": null,
+      "description": "No close button",
+      "name": "noCloseButton",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onToggle": {
+      "defaultValue": null,
+      "description": "Called when dropdown is open/closed.",
+      "name": "onToggle",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((isOpen: boolean) => void)"
+      }
+    },
+    "open": {
+      "defaultValue": null,
+      "description": "Om dropdown er åpen",
+      "name": "open",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "mode": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the dropdown",
+      "name": "mode",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"oncherry\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"onwhite\""
+          },
+          {
+            "value": "\"ongrey\""
+          },
+          {
+            "value": "\"onblueberry\""
+          },
+          {
+            "value": "\"oncherry\""
+          }
+        ]
+      }
+    },
+    "transparent": {
+      "defaultValue": null,
+      "description": "Makes the background transparent",
+      "name": "transparent",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "fluid": {
+      "defaultValue": null,
+      "description": "Makes the background transparent",
+      "name": "fluid",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Makes the dropdown disabled",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute on the dropdown button.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Dropdown/Dropdown.tsx",
+        "name": "DropdownProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Dropdown/Dropdown.tsx",
+          "name": "DropdownProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Dropdown/index.d.ts

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

package/components/Dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,eAAe,QAAQ,CAAC"}

package/components/Dropdown/index.js

@@ -0,0 +1,2 @@
+import{_ as e,d as o}from"../../_rollupPluginBabelHelpers-4f206abf.js";import r,{useRef as t,useState as n}from"react";import{c as a}from"../../index-9b84fabc.js";import{Icon as l}from"../Icons/Icon.js";import{K as d,A as s,I as i}from"../../constants-9528513d.js";import c from"./styles.module.scss";import u from"../Icons/PlusSmall.js";import{B as p}from"../../Button-9f2ce63d.js";import{u as m}from"../../useHover-026f72c1.js";import{a as f,u as _,d as g,b as v,c as w}from"../../useUuid-1ecdf8e8.js";import{t as b}from"../../index-d1c9177a.js";import"../../_tslib-51c8a283.js";import"../../color-e7d082c1.js";import"../../Loader-670979af.js";import"../../uuid-11037462.js";import"../Loader/styles.module.scss";import"../../useWindowSize-5cc481da.js";import"../../grid-c105cad1.js";import"../Button/styles.module.scss";import"../../usePrevious-ae293b10.js";import"../../palette-f206f488.js";var y;!function(e){e.onwhite="onwhite",e.ongrey="ongrey",e.onblueberry="onblueberry",e.oncherry="oncherry"}(y||(y={}));export default function(h){var j,E=h.label,x=h.toggleLabel,k=h.closeText,N=void 0===k?"Lukk":k,I=h.noCloseButton,H=void 0!==I&&I,A=h.onToggle,B=h.open,C=void 0!==B&&B,D=h.children,L=h.mode,P=void 0===L?y.onwhite:L,S=h.transparent,U=void 0!==S&&S,z=h.fluid,R=void 0!==z&&z,T=h.testId,K=h.disabled,V=t(null),W=t(null),X=m(),q=X.hoverRef,F=X.isHovered,G=f(!K&&C,A),J=G.value,M=G.toggleValue,O=t(r.Children.map(D,(function(){return r.createRef()}))),Q=n(),Y=e(Q,2),Z=Y[0],$=Y[1],ee=(_(q)||{}).width,oe=g(),re=g(),te=g(),ne=function(){var e;M(),null===(e=W.current)||void 0===e||e.focus()},ae=function(){var e;M(),null===(e=q.current)||void 0===e||e.focus()};v("keydown",V,[d.ArrowDown,d.ArrowUp,d.End,d.Enter,d.Escape,d.Home],(function(e){var o;if(e.preventDefault(),O.current)if(J)if(e.key===d.Escape&&J)ae();else{var r=O.current.findIndex((function(o){return o.current===e.target})),t=r;e.key===d.Home?t=0:e.key===d.End?t=O.current.length-1:e.key===d.ArrowDown&&r<O.current.length-1?t=r+1:e.key===d.ArrowUp&&r>0?t=r-1:e.key===d.Enter&&-1!==r&&(t=r),-1!==t&&(null===(o=O.current[t].current)||void 0===o||o.focus(),$(t))}else ne()})),w(V,(function(){return J&&ae()}));var le=a(c.dropdown__toggle,!K&&(o(j={},c["dropdown__toggle--on-white"],P===y.onwhite),o(j,c["dropdown__toggle--on-grey"],P===y.ongrey),o(j,c["dropdown__toggle--on-blueberry"],P===y.onblueberry),o(j,c["dropdown__toggle--on-cherry"],P===y.oncherry),o(j,c["dropdown__toggle--transparent"],U),o(j,c["dropdown__toggle--fluid"],R),o(j,c["dropdown__toggle--open"],J),j)),de=a(c.dropdown__content,J&&c["dropdown__content--open"]);return r.createElement("div",{className:c.dropdown,ref:V},r.createElement("span",{id:oe,className:c.dropdown__label},E),r.createElement("button",{type:"button",onClick:function(){return!J&&ne()},className:le,ref:q,"data-testid":T,"data-analyticsid":s.Dropdown,disabled:K,"aria-labelledby":re,"aria-haspopup":"listbox","aria-expanded":J},r.createElement("span",{id:re,className:c.dropdown__toggle__label},x),r.createElement(l,{color:K?b.palette.neutral500:b.palette.blueberry600,svgIcon:u,className:c.dropdown__icon,isHovered:F,size:i.XSmall})),r.createElement("div",{className:de,style:{width:R?"100%":"".concat(ee,"px")}},r.createElement("ul",{className:c.dropdown__options,role:"listbox","aria-labelledby":oe,tabIndex:-1,"aria-activedescendant":void 0!==Z?"".concat(te,"-").concat(Z):void 0,ref:W},r.Children.map(D,(function(e,o){var t;return r.createElement("li",{className:c.dropdown__input,role:"option",id:"".concat(te,"-").concat(o)},r.cloneElement(e,{ref:null===(t=O.current)||void 0===t?void 0:t[o]}))}))),!H&&r.createElement("div",{className:c.dropdown__close},r.createElement(p,{onClick:ae,fluid:!0,"aria-expanded":J},N))))}export{y as DropdownMode};
+//# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Dropdown/styles.module.scss

@@ -0,0 +1,196 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+@import 'bootstrap/scss/mixins/_screen-reader.scss';
+
+.dropdown {
+  position: relative;
+
+  &__label {
+    @include sr-only();
+  }
+
+  &__toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 0;
+    border-width: 2px;
+    border-style: solid;
+    padding: 0 getSpacer(3xs) 0 getSpacer(s);
+    font-size: $font-size-sm;
+    line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: getSpacer(3xs) getSpacer(3xs) getSpacer(3xs) getSpacer(s);
+      font-size: $font-size-md;
+      line-height: 1.5rem;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:disabled {
+      background-color: $neutral50;
+      border-color: $neutral500;
+    }
+
+    &--on-white,
+    &--on-grey {
+      border-color: $neutral700;
+      background-color: $white;
+      &:hover {
+        background-color: $neutral50;
+        box-shadow: 0 0 0 1px $neutral700;
+      }
+      &:focus {
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
+      }
+    }
+
+    &--on-blueberry {
+      border-color: $blueberry500;
+      background-color: $white;
+      &:hover {
+        background-color: $blueberry50;
+        box-shadow: 0 0 0 1px $blueberry500;
+      }
+      &:focus {
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
+      }
+    }
+
+    &--on-cherry {
+      border-color: $cherry500;
+      background-color: $white;
+      &:hover {
+        background-color: $cherry50;
+        box-shadow: 0 0 0 1px $cherry500;
+      }
+      &:focus {
+        border-color: $black;
+        box-shadow: 0 0 0 1px $black;
+      }
+    }
+
+    &--open#{&}--on-white,
+    &--open#{&}--on-grey {
+      background-color: $neutral50;
+      &:hover {
+        background-color: $white;
+      }
+    }
+
+    &--open#{&}--on-blueberry {
+      background-color: $blueberry50;
+      &:hover {
+        background-color: $white;
+      }
+    }
+
+    &--open#{&}--on-cherry {
+      background-color: $cherry50;
+      &:hover {
+        background-color: $white;
+      }
+    }
+
+    &--transparent {
+      background-color: transparent;
+    }
+
+    &--transparent#{&}--on-grey {
+      &:hover {
+        background-color: $neutral100;
+      }
+    }
+
+    &--transparent#{&}--on-blueberry {
+      &:hover {
+        background-color: $blueberry100;
+      }
+    }
+
+    &--transparent#{&}--on-cherry {
+      &:hover {
+        background-color: $cherry100;
+      }
+    }
+
+    &--transparent#{&}--open#{&}--on-grey {
+      background-color: $neutral100;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--transparent#{&}--open#{&}--on-blueberry {
+      background-color: $blueberry100;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--transparent#{&}--open#{&}--on-cherry {
+      background-color: $cherry100;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--fluid {
+      width: 100%;
+    }
+
+    &__label {
+      padding: getSpacer(3xs) 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding: getSpacer(2xs) 0;
+      }
+    }
+  }
+
+  &__icon {
+    margin-left: getSpacer(2xs);
+  }
+
+  &__content {
+    display: none;
+    position: absolute;
+    background-color: $white;
+    margin-top: getSpacer(2xs);
+    box-shadow: 0 0 0 2px $blueberry500;
+    &--open {
+      display: block;
+    }
+  }
+  &__options {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 384px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      max-height: 464px;
+    }
+  }
+  &__close {
+    padding: getSpacer(s);
+  }
+  &__input {
+    border-bottom: 1px solid $neutral300;
+    padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(s);
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: getSpacer(s);
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

package/components/Expander/index.js

@@ -1,2 +1,2 @@
-import{_ as e}from"../../_rollupPluginBabelHelpers-4f206abf.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-4fe8c7ff.js";import{u as c}from"../../useHover-026f72c1.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 f}from"../../Button-19ee3464.js";import{u as x}from"../../useSticky-807e5dde.js";import"../../_tslib-51c8a283.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Loader-2f304e4f.js";import"../../uuid-fe7442b7.js";import"../Loader/styles.module.scss";import"../../useWindowSize-5cc481da.js";import"../Button/styles.module.scss";var g;!function(e){e.small="small",e.large="large"}(g||(g={}));export default function(v){var j=v.title,b=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=x(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})),j,I===g.large&&M("right")):t.createElement(f,{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}),j),t.createElement("div",{className:V,ref:O},b))}export{g as ExpanderSize};
+import{_ as e}from"../../_rollupPluginBabelHelpers-4f206abf.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-9528513d.js";import{u as c}from"../../useHover-026f72c1.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-9f2ce63d.js";import{u as f}from"../../useSticky-807e5dde.js";import"../../_tslib-51c8a283.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Loader-670979af.js";import"../../uuid-11037462.js";import"../Loader/styles.module.scss";import"../../useWindowSize-5cc481da.js";import"../Button/styles.module.scss";var g;!function(e){e.small="small",e.large="large"}(g||(g={}));export default function(v){var j=v.title,b=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})),j,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}),j),t.createElement("div",{className:V,ref:O},b))}export{g as ExpanderSize};
 //# sourceMappingURL=index.js.map

package/components/Expander/styles.module.scss

@@ -6,6 +6,11 @@
 .expander {
   position: relative;
   width: 100%;
+
+  @media print {
+    border: 1px solid $black;
+  }
+
   &__icon {
     display: flex;
     align-items: center;
@@ -112,9 +117,14 @@
     display: none;
     width: 100%;
 
+    @media print {
+      display: block;
+    }
+
     &--expanded {
       display: block;
     }
+
     &--small {
       margin-top: getSpacer(s);
     }

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import{_ as e,d as n}from"../../_rollupPluginBabelHelpers-4f206abf.js";import t,{useState as a,useEffect as i}from"react";import{Icon as r}from"../Icons/Icon.js";import{A as o,I as d}from"../../constants-4fe8c7ff.js";import s from"../Icons/ChevronUp.js";import l from"../Icons/ChevronDown.js";import{u as c}from"../../useHover-026f72c1.js";import{u as m}from"../../usePrevious-ae293b10.js";import{u as p,B as f}from"../../useBreakpoint-6eb418f7.js";import{c as u}from"../../index-9b84fabc.js";import x from"./styles.module.scss";import"../../_tslib-51c8a283.js";import"../../grid-c105cad1.js";var v=t.forwardRef((function(v,g){var E,_=v.id,h=v.children,b=v.padding,j=void 0===b||b,k=v.color,N=void 0===k?"neutral":k,I=v.className,w=void 0===I?"":I,C=v.icon,H=v.large,y=void 0!==H&&H,B=v.title,O=v.expanded,R=void 0!==O&&O,L=v.testId,P=v.handleExpanderClick,S=v.onExpand,z=a(R),W=e(z,2),X=W[0],A=W[1],D=m(X),T=c(),U=T.hoverRef,V=T.isHovered,q=p(),F=u(x["expander-list-link"],x["expander-list-link--".concat(N)],(n(E={},x["expander-list-link--closed"],!X),n(E,x["expander-list-link--large"],y),E)),G=u(x["expander-list-link__main-content"],X&&x["expander-list-link__main-content--expanded"],j?x["expander-list-link__main-content--padding"]:"");return i((function(){R!==X&&A(R)}),[R]),i((function(){S&&X!==!!D&&S(X)}),[X,S]),t.createElement("li",{className:w,ref:g},t.createElement("button",{id:_,onClick:P,"data-testid":L,"data-analyticsid":o.ExpanderListExpander,className:F,ref:U,"aria-expanded":X},C&&t.createElement("span",{className:x["expander-list-link__icon"]},t.cloneElement(C,{size:q===f.xs?d.XSmall:d.Small,isHovered:V})),t.createElement("span",{className:x["expander-list-link__title"]},B),t.createElement("span",{className:x["expander-list-link__chevron"]},t.createElement(r,{size:d.XSmall,svgIcon:X?s:l,isHovered:V}))),t.createElement("div",{className:G},h))})),g=t.forwardRef((function(r,d){var s=r.children,l=r.childPadding,c=void 0===l||l,m=r.large,p=r.isOpen,f=void 0!==p&&p,g=r.color,E=r.className,_=void 0===E?"":E,h=r.accordion,b=void 0!==h&&h,j=r.topBorder,k=void 0===j||j,N=r.bottomBorder,I=void 0===N||N,w=r.testId,C=a({}),H=e(C,2),y=H[0],B=H[1],O=a(),R=e(O,2),L=R[0],P=R[1],S=t.Children.count(s),z=u(x["expander-list"],_);return i((function(){var e,n,t,a,i;!b||!L||(e=L.getBoundingClientRect(),n=e.top,t=e.left,a=e.bottom,i=e.right,n>=0&&t>=0&&a<=(window.innerHeight||document.documentElement.clientHeight)&&i<=(window.innerWidth||document.documentElement.clientWidth))||L.scrollIntoView()}),[b,L]),i((function(){if(f){var e="expander-0";B((function(t){return b?n({},e,!t[e]):Object.assign(Object.assign({},t),n({},e,!t[e]))}))}}),[f]),t.createElement("ul",{className:z,ref:d,"data-testid":w,"data-analyticsid":o.ExpanderList},t.Children.map(s,(function(e,a){if(e.type===v){var i=y["expander-".concat(a)],r=function(e){var t;return u(x["expander-list__item"],(n(t={},x["expander-list__item--top"],0===e&&k),n(t,x["expander-list__item--no-bottom"],e===S-1&&!I),t))}(a);return t.cloneElement(e,{id:"expander-".concat(a),key:"expander-".concat(a),expanded:i,padding:c,color:g,large:m,"aria-expanded":i,className:r,handleExpanderClick:function(e){return function(e,t){B((function(e){return b?n({},t,!e[t]):Object.assign(Object.assign({},e),n({},t,!e[t]))})),P(e.currentTarget)}(e,"expander-".concat(a))}})}return e})))}));g.Expander=v,v.displayName="ExpanderList.Expander";export default g;export{g as ExpanderList};
+import{_ as e,d as n}from"../../_rollupPluginBabelHelpers-4f206abf.js";import t,{useState as a,useEffect as i}from"react";import{Icon as r}from"../Icons/Icon.js";import{A as o,I as d}from"../../constants-9528513d.js";import s from"../Icons/ChevronUp.js";import l from"../Icons/ChevronDown.js";import{u as c}from"../../useHover-026f72c1.js";import{u as m}from"../../usePrevious-ae293b10.js";import{u as p,B as u}from"../../useBreakpoint-6eb418f7.js";import{c as f}from"../../index-9b84fabc.js";import x from"./styles.module.scss";import"../../_tslib-51c8a283.js";import"../../grid-c105cad1.js";var v=t.forwardRef((function(v,g){var E,_=v.id,h=v.children,b=v.padding,j=void 0===b||b,k=v.color,N=void 0===k?"neutral":k,I=v.className,w=void 0===I?"":I,C=v.icon,H=v.large,y=void 0!==H&&H,B=v.title,O=v.expanded,R=void 0!==O&&O,L=v.testId,P=v.handleExpanderClick,S=v.onExpand,z=a(R),W=e(z,2),X=W[0],A=W[1],D=m(X),T=c(),U=T.hoverRef,V=T.isHovered,q=p(),F=f(x["expander-list-link"],x["expander-list-link--".concat(N)],(n(E={},x["expander-list-link--closed"],!X),n(E,x["expander-list-link--large"],y),E)),G=f(x["expander-list-link__main-content"],X&&x["expander-list-link__main-content--expanded"],j?x["expander-list-link__main-content--padding"]:"");return i((function(){R!==X&&A(R)}),[R]),i((function(){S&&X!==!!D&&S(X)}),[X,S]),t.createElement("li",{className:w,ref:g},t.createElement("button",{id:_,onClick:P,"data-testid":L,"data-analyticsid":o.ExpanderListExpander,className:F,ref:U,"aria-expanded":X},C&&t.createElement("span",{className:x["expander-list-link__icon"]},t.cloneElement(C,{size:q===u.xs?d.XSmall:d.Small,isHovered:V})),t.createElement("span",{className:x["expander-list-link__title"]},B),t.createElement("span",{className:x["expander-list-link__chevron"]},t.createElement(r,{size:d.XSmall,svgIcon:X?s:l,isHovered:V}))),t.createElement("div",{className:G},h))})),g=t.forwardRef((function(r,d){var s=r.children,l=r.childPadding,c=void 0===l||l,m=r.large,p=r.isOpen,u=void 0!==p&&p,g=r.color,E=r.className,_=void 0===E?"":E,h=r.accordion,b=void 0!==h&&h,j=r.topBorder,k=void 0===j||j,N=r.bottomBorder,I=void 0===N||N,w=r.testId,C=a({}),H=e(C,2),y=H[0],B=H[1],O=a(),R=e(O,2),L=R[0],P=R[1],S=t.Children.count(s),z=f(x["expander-list"],_);return i((function(){var e,n,t,a,i;!b||!L||(e=L.getBoundingClientRect(),n=e.top,t=e.left,a=e.bottom,i=e.right,n>=0&&t>=0&&a<=(window.innerHeight||document.documentElement.clientHeight)&&i<=(window.innerWidth||document.documentElement.clientWidth))||L.scrollIntoView()}),[b,L]),i((function(){if(u){var e="expander-0";B((function(t){return b?n({},e,!t[e]):Object.assign(Object.assign({},t),n({},e,!t[e]))}))}}),[u]),t.createElement("ul",{className:z,ref:d,"data-testid":w,"data-analyticsid":o.ExpanderList},t.Children.map(s,(function(e,a){if(e.type===v){var i=y["expander-".concat(a)],r=function(e){var t;return f(x["expander-list__item"],(n(t={},x["expander-list__item--top"],0===e&&k),n(t,x["expander-list__item--no-bottom"],e===S-1&&!I),t))}(a);return t.cloneElement(e,{id:"expander-".concat(a),key:"expander-".concat(a),expanded:i,padding:c,color:g,large:m,"aria-expanded":i,className:r,handleExpanderClick:function(e){return function(e,t){B((function(e){return b?n({},t,!e[t]):Object.assign(Object.assign({},e),n({},t,!e[t]))})),P(e.currentTarget)}(e,"expander-".concat(a))}})}return e})))}));g.Expander=v,v.displayName="ExpanderList.Expander";export default g;export{g as ExpanderList};
 //# sourceMappingURL=index.js.map

package/components/ExpanderList/styles.module.scss

@@ -145,6 +145,10 @@
     padding: 0;
     display: none;
 
+    @media print {
+      display: block;
+    }
+
     &--expanded {
       display: block;
     }