@helsenorge/designsystem-react 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ import{_ as e,d as t}from"./_rollupPluginBabelHelpers-0f007973.js";import{_ as a}from"./_tslib-b219470a.js";import n,{useState as l,useRef as o,useEffect as r}from"react";import{c as i}from"./index-d1c0552c.js";import s from"./components/Panel/styles.module.scss";import{T as c}from"./Title-01820508.js";import{B as d}from"./Button-0917df8e.js";import{A as u,I as m}from"./constants-dbdea596.js";import{I as p}from"./Icon-d69d65b3.js";import{C as f}from"./ChevronDown-2b3daace.js";import{C as v}from"./ChevronUp-dfafe27b.js";import{A as b}from"./ArrowRight-43c97f7a.js";import{A as y}from"./AlertSignFill-5df5b7c7.js";import{p as g}from"./palette-f206f488.js";import{P as E}from"./Pencil-dd3fe667.js";import{C as _}from"./Calendar-a9aa98de.js";import{W as h}from"./Watch-3d5fc351.js";import{u as j,B as k}from"./useBreakpoint-a74f5af5.js";import{u as w}from"./useUuid-3b1e73f2.js";import{u as x}from"./usePrevious-ae293b10.js";import{B as C}from"./Badge-eebcb720.js";var N,I,B;!function(e){e.normal="normal",e.new="new",e.error="error",e.draft="draft"}(N||(N={})),function(e){e.fill="fill",e.white="white",e.stroke="stroke",e.line="line"}(I||(I={})),function(e){e.layout1="layout1",e.layout2="layout2",e.layout3a="layout3a",e.layout3b="layout3b",e.layout3c="layout3c"}(B||(B={}));var T=function(e){var a=e.status,l=e.statusMessage,o=i(s["status-message"],t({},s["status-message--new"],a===N.new));return a!==N.error&&a!==N.draft||!l?null:n.createElement("div",{className:o,"data-testid":"display-status"},n.createElement(p,Object.assign({},a===N.error?{color:g.cherry500,svgIcon:y}:{color:g.black,svgIcon:E},{size:m.XSmall}))," ",n.createElement("span",null,l))},A=function(e){var t=e.date,a=e.time;return t||a?n.createElement("div",{className:s["datetime-container"],"data-testid":"datetime"},t&&n.createElement("div",{className:s["datetime-container__icon"]},n.createElement(p,{svgIcon:_,size:m.XSmall}),n.createElement("span",null,t)),a&&n.createElement("div",{className:s["datetime-container__icon"]},n.createElement(p,{svgIcon:h,size:m.XSmall}),n.createElement("span",null,a))):null},M=n.forwardRef((function(e,t){var l=e.buttonText,o=e.buttonTextClose,r=e.url,i=e.target,s=e.onClick,c=e.renderAsExpander,u=e.isExpanded,m=e.buttonHtmlMarkup,y=void 0===m?"a":m,g=a(e,["buttonText","buttonTextClose","url","target","onClick","renderAsExpander","isExpanded","buttonHtmlMarkup"]);return c?n.createElement(d,Object.assign({testId:"expand",ref:t,onClick:s},g,{"aria-expanded":u}),u?o:l,n.createElement(p,{svgIcon:u?v:f})):n.createElement(d,Object.assign({testId:"url",ref:t,htmlMarkup:y,onClick:s,href:r,target:i},g),l,n.createElement(p,{svgIcon:b}))})),S=n.forwardRef((function(a,d){var m,p,f,v,b,y,g=a.children,E=a.contentA,_=a.contentB,h=a.className,S=a.testId,P=a.title,H=a.titleHtmlMarkup,O=void 0===H?"h2":H,R=a.url,z=a.target,D=void 0===z?"_self":z,W=a.icon,X=a.iconRight,U=void 0!==X&&X,F=a.variant,K=void 0===F?I.fill:F,q=a.status,G=void 0===q?N.normal:q,J=a.statusMessage,L=a.buttonText,Q=void 0===L?"Se detaljer":L,V=a.buttonTextClose,Y=void 0===V?"Skjul detaljer":V,Z=a.showCloseButtonInExpand,$=void 0===Z||Z,ee=a.layout,te=void 0===ee?B.layout2:ee,ae=a.containerAsButton,ne=void 0!==ae&&ae,le=a.date,oe=a.time,re=a.noTopBorder,ie=a.buttonOnClick,se=a.buttonHtmlMarkup,ce=a.expanded,de=void 0!==ce&&ce,ue=a.onExpand,me=a.renderChildrenWhenClosed,pe=void 0!==me&&me,fe=l(de),ve=e(fe,2),be=ve[0],ye=ve[1],ge=x(be),Ee=o(null),_e=w(),he=j();r((function(){de!==be&&ye(de)}),[de]),r((function(){ue&&be!==!!ge&&ue(be)}),[be,ue]);var je=[B.layout3a.toString(),B.layout3b.toString(),B.layout3c.toString()].includes(te),ke=i(s["panel-wrapper"],h),we=i(s.panel,(t(m={},s["panel--fill"],K===I.fill),t(m,s["panel--stroke"],K===I.stroke),t(m,s["panel--white"],K===I.white),t(m,s["panel--line"],K===I.line),t(m,s["panel--no-top-border"],K===I.line&&re),t(m,s["panel--selected"],be),t(m,s["panel--new"],G===N.new),t(m,s["panel--draft"],G===N.draft),t(m,s["panel--error"],G===N.error),t(m,s["panel--status"],G&&G!==N.normal),t(m,s["panel--with-icon"],W),t(m,s["panel--button"],ne),t(m,s["panel--clickable"],g||R||ue||ie||ne),m)),xe=i((t(p={},s.panel__container,te===B.layout2&&_),t(p,s["panel__container--layout3"],je&&_),t(p,s["panel__container--grow"],W),p)),Ce=i((t(f={},s["panel-content-a"],te===B.layout2),t(f,s["panel-content-a--layout3a"],te===B.layout3a),t(f,s["panel-content-a--layout3b"],te===B.layout3b),t(f,s["panel-content-a--layout3c"],te===B.layout3c),f)),Ne=i((t(v={},s["panel__content-right--layout1"],_&&te===B.layout1),t(v,s["panel__content-right--layout2"],_&&te===B.layout2),t(v,s["panel__content-right--layout3"],_&&je),t(v,s["panel__content-right--layout3a"],_&&te===B.layout3a),t(v,s["panel__content-right--layout3b"],_&&te===B.layout3b),t(v,s["panel__content-right--layout3c"],_&&te===B.layout3c),v)),Ie=i(s["panel-content-b"],(t(b={},s["panel-content-b--layout1"],te===B.layout1),t(b,s["panel-content-b--layout3"],je),b)),Be=i(s["panel__details-btn"]),Te=function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=arguments.length>1?arguments[1]:void 0,a={id:t,tabIndex:e?void 0:-1,variant:"borderless",ellipsis:!0};return n.createElement(M,Object.assign({renderAsExpander:!!g,onClick:ie||function(){return ye(!be)},isExpanded:be,buttonText:Q,url:R,target:D,buttonTextClose:Y,ref:t?Ee:void 0,buttonHtmlMarkup:se},a))},Ae=i(s["panel__btn-container"],(t(y={},s["panel__btn-container--layout3"],je),t(y,s["panel__btn-container--padding-top"],_),y));return n.createElement("div",{ref:d,"data-testid":S,className:ke,"data-analyticsid":u.Panel},n.createElement("div",{className:we,tabIndex:ne?0:void 0,onClick:function(){var e;ne&&(null===(e=Ee.current)||void 0===e||e.click())},onKeyDown:function(e){var t,a=e.key;!ne||"Enter"!==a&&" "!==a||(e.preventDefault(),null===(t=Ee.current)||void 0===t||t.click())},"aria-labelledby":ne?_e:void 0,role:ne?"button":void 0},W&&!U&&n.createElement("div",{className:s.panel__icon},W),n.createElement("div",{className:xe},n.createElement("div",{className:Ce},n.createElement(T,{status:G,statusMessage:J}),P&&n.createElement("div",{className:s["panel-content-a__title-container"]},n.createElement(c,{appearance:"title3",htmlMarkup:O},P),J&&G===N.new&&n.createElement(C,{color:"blueberry",testId:"badge-status",className:s.panel__badge},J)),E,he>=k.lg&&n.createElement(A,{date:le,time:oe})),n.createElement("div",{className:Ne},_&&n.createElement("div",{className:Ie},_),(g||R||le||oe||ie)&&n.createElement("div",{className:Ae},he<k.lg&&n.createElement(A,{date:le,time:oe}),(g||R||ie)&&n.createElement("div",{className:Be},Te(!ne,_e))))),W&&U&&n.createElement("div",{className:s["panel__icon--right"]},W)),function(){var e;if(!g)return null;if(!pe&&!be)return null;var a=i(s["panel-details"],(t(e={},s["panel-details--open"],be),t(e,s["panel-details--line"],K===I.line),t(e,s["panel-details--white"],K===I.white),t(e,s["panel-details--with-icon"],W),e));return n.createElement("div",{className:a,"data-testid":"panel-details"},n.createElement("div",null,g),$&&n.createElement("div",{className:Be},Te()))}())}));export{S as P,N as a,I as b,B as c};
2
+ //# sourceMappingURL=Panel-b210cf84.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Panel-b210cf84.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -25,14 +25,13 @@
25
25
  text-decoration: none;
26
26
  color: $blueberry600;
27
27
  padding: 0.15rem;
28
- border-bottom: 1px solid $neutral300;
28
+ border-bottom: 1px solid $neutral700;
29
29
 
30
30
  &:hover {
31
31
  @include anchorlink-hover;
32
32
  }
33
33
  &:focus {
34
34
  @include anchorlink-focus;
35
-
36
35
  }
37
36
 
38
37
  &__icon {
@@ -79,4 +78,4 @@
79
78
  &:focus > span {
80
79
  @include anchorlink-focus;
81
80
  }
82
- }
81
+ }
@@ -25,6 +25,8 @@ interface ExpanderProps {
25
25
  sticky?: boolean;
26
26
  /** Called when expander is open/closed. */
27
27
  onExpand?: (isExpanded: boolean) => void;
28
+ /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
29
+ renderChildrenWhenClosed?: boolean;
28
30
  /** Sets the data-testid attribute on the expander button. */
29
31
  testId?: string;
30
32
  }
@@ -1 +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;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,mCAAmC;IACnC,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,CA2HrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
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;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,mCAAmC;IACnC,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,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6HrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -214,6 +214,25 @@
214
214
  "name": "((isExpanded: boolean) => void)"
215
215
  }
216
216
  },
217
+ "renderChildrenWhenClosed": {
218
+ "defaultValue": null,
219
+ "description": "Whether to render children when closed (in which case they are hidden with CSS). Default: false",
220
+ "name": "renderChildrenWhenClosed",
221
+ "parent": {
222
+ "fileName": "src/components/Expander/Expander.tsx",
223
+ "name": "ExpanderProps"
224
+ },
225
+ "declarations": [
226
+ {
227
+ "fileName": "src/components/Expander/Expander.tsx",
228
+ "name": "ExpanderProps"
229
+ }
230
+ ],
231
+ "required": false,
232
+ "type": {
233
+ "name": "boolean"
234
+ }
235
+ },
217
236
  "testId": {
218
237
  "defaultValue": null,
219
238
  "description": "Sets the data-testid attribute on the expander button.",
@@ -1,2 +1,2 @@
1
- import{_ as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import t,{useState as a,useRef as r,useEffect as n}from"react";import{I as o}from"../../Icon-d69d65b3.js";import{Z as s,A as i,I as d}from"../../constants-dbdea596.js";import{u as c}from"../../useHover-18479690.js";import{u as l}from"../../usePrevious-ae293b10.js";import p from"./styles.module.scss";import{c as m}from"../../index-d1c0552c.js";import{C as _}from"../../ChevronDown-2b3daace.js";import{C as u}from"../../ChevronUp-dfafe27b.js";import{B as x}from"../../Button-0917df8e.js";import{a as f}from"../../useSticky-432642c9.js";import"../../_tslib-b219470a.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";var g;!function(e){e.small="small",e.large="large"}(g||(g={}));var v=function(v){var j=v.title,b=v.children,E=v.size,y=void 0===E?g.small:E,I=v.color,h=v.svgIcon,k=v.expanded,N=void 0!==k&&k,C=v.noNestedLine,H=void 0!==C&&C,z=v.sticky,B=void 0!==z&&z,w=v.testId,L=v.onExpand,S=a(N),W=e(S,2),X=W[0],P=W[1],T=l(X),U=r(null),A=r(null),D=r(null),O=c(A).isHovered,Z=f(U,A),q=Z.isOutsideWindow,F=Z.isLeavingWindow,G=Z.offsetHeight,J=Z.contentWidth,K=B&&X&&q;n((function(){N!==X&&P(N)}),[N]),n((function(){L&&X!==!!T&&L(X)}),[X,L]);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:O}))},Q=m(p.expander__trigger,p["expander__trigger--".concat(y)],y===g.large&&p["expander__trigger--".concat(I||"neutral")],y===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(y)],y===g.large&&p["expander__content--".concat(I||"neutral")],y===g.large&&h&&p["expander__content--icon"],X&&p["expander__content--expanded"],y===g.small&&!H&&p["expander__content--nested-line"]);return t.createElement("div",{className:p.expander,ref:U,style:{paddingTop:K&&G?"".concat(G,"px"):void 0}},y===g.large?t.createElement("button",{type:"button",className:Q,style:{zIndex:O||K?s.ExpanderTrigger:void 0,width:K&&J?"".concat(J,"px"):void 0},"aria-expanded":X,ref:A,onClick:function(){return P(!X)},"data-testid":w,"data-analyticsid":i.Expander},y===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:O})),j,y===g.large&&M("right")):t.createElement(x,{variant:"borderless",className:R,"aria-expanded":X,ref:A,onClick:function(){return P(!X)},testId:w,"data-analyticsid":i.Expander},t.createElement(o,{svgIcon:X?u:_,size:d.XSmall}),j),t.createElement("div",{className:V,ref:D},b))};export{g as ExpanderSize,v as default};
1
+ import{_ as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import t,{useState as r,useRef as a,useEffect as n}from"react";import{I as o}from"../../Icon-d69d65b3.js";import{Z as s,A as i,I as d}from"../../constants-dbdea596.js";import{u as c}from"../../useHover-18479690.js";import{u as l}from"../../usePrevious-ae293b10.js";import p from"./styles.module.scss";import{c as m}from"../../index-d1c0552c.js";import{C as u}from"../../ChevronDown-2b3daace.js";import{C as _}from"../../ChevronUp-dfafe27b.js";import{B as f}from"../../Button-0917df8e.js";import{a as x}from"../../useSticky-432642c9.js";import"../../_tslib-b219470a.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";var g;!function(e){e.small="small",e.large="large"}(g||(g={}));var v=function(v){var j=v.title,b=v.children,E=v.size,y=void 0===E?g.small:E,I=v.color,h=v.svgIcon,C=v.expanded,k=void 0!==C&&C,N=v.noNestedLine,H=void 0!==N&&N,z=v.sticky,B=void 0!==z&&z,w=v.testId,L=v.onExpand,S=v.renderChildrenWhenClosed,W=void 0!==S&&S,X=r(k),P=e(X,2),T=P[0],U=P[1],A=l(T),D=a(null),O=a(null),Z=c(O).isHovered,q=x(D,O),F=q.isOutsideWindow,G=q.isLeavingWindow,J=q.offsetHeight,K=q.contentWidth,M=B&&T&&F;n((function(){k!==T&&U(k)}),[k]),n((function(){L&&T!==!!A&&L(T)}),[T,L]);var Q=function(e){return t.createElement("span",{className:m(p.expander__icon,p["expander__icon--".concat(e)])},t.createElement(o,{svgIcon:T?_:u,size:d.XSmall,isHovered:Z}))},R=m(p.expander__trigger,p["expander__trigger--".concat(y)],y===g.large&&p["expander__trigger--".concat(I||"neutral")],y===g.large&&h&&p["expander__trigger--icon"],T&&p["expander__trigger--expanded"],M&&!G&&p["expander__trigger--sticky"],M&&G&&p["expander__trigger--absolute"]),V=m(p.expander__button,T&&p["expander__button--expanded"],M&&!G&&p["expander__button--sticky"],M&&G&&p["expander__button--absolute"]);return t.createElement("div",{className:p.expander,ref:D,style:{paddingTop:M&&J?"".concat(J,"px"):void 0}},y===g.large?t.createElement("button",{type:"button",className:R,style:{zIndex:Z||M?s.ExpanderTrigger:void 0,width:M&&K?"".concat(K,"px"):void 0},"aria-expanded":T,ref:O,onClick:function(){return U(!T)},"data-testid":w,"data-analyticsid":i.Expander},y===g.small&&Q("left"),h&&t.createElement("span",{className:m(p.expander__icon,p["expander__icon--left"])},t.createElement(o,{svgIcon:h,size:d.XSmall,isHovered:Z})),j,y===g.large&&Q("right")):t.createElement(f,{variant:"borderless",className:V,"aria-expanded":T,ref:O,onClick:function(){return U(!T)},testId:w,"data-analyticsid":i.Expander},t.createElement(o,{svgIcon:T?_:u,size:d.XSmall}),j),function(){if(!W&&!T)return null;var e=m(p.expander__content,p["expander__content--".concat(y)],y===g.large&&p["expander__content--".concat(I||"neutral")],y===g.large&&h&&p["expander__content--icon"],T&&p["expander__content--expanded"],y===g.small&&!H&&p["expander__content--nested-line"]);return t.createElement("div",{className:e},b)}())};export{g as ExpanderSize,v as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -23,6 +23,8 @@ interface ExpanderListProps {
23
23
  /** Opens the first item in the list. */
24
24
  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */
25
25
  isOpen?: boolean;
26
+ /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
27
+ renderChildrenWhenClosed?: boolean;
26
28
  /** Toggles the top border of the first child element. */
27
29
  topBorder?: boolean;
28
30
  /** Sets the data-testid attribute. */
@@ -43,7 +45,7 @@ declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
43
45
  handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
44
46
  /** Called when expander is open/closed. */
45
47
  onExpand?: (isExpanded: boolean) => void;
46
- }>;
48
+ }> & Pick<ExpanderListProps, 'renderChildrenWhenClosed'>;
47
49
  export declare const ExpanderList: ExpanderListCompound;
48
50
  export default ExpanderList;
49
51
  //# sourceMappingURL=ExpanderList.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAenD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,CAAC;AAyFF,eAAO,MAAM,YAAY,sBAyFC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAenD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,GACC,IAAI,CAAC,iBAAiB,EAAE,0BAA0B,CAAC,CAAC;AAoGtD,eAAO,MAAM,YAAY,sBA2FC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
@@ -182,6 +182,25 @@
182
182
  "name": "boolean"
183
183
  }
184
184
  },
185
+ "renderChildrenWhenClosed": {
186
+ "defaultValue": null,
187
+ "description": "Whether to render children when closed (in which case they are hidden with CSS). Default: false",
188
+ "name": "renderChildrenWhenClosed",
189
+ "parent": {
190
+ "fileName": "src/components/ExpanderList/ExpanderList.tsx",
191
+ "name": "ExpanderListProps"
192
+ },
193
+ "declarations": [
194
+ {
195
+ "fileName": "src/components/ExpanderList/ExpanderList.tsx",
196
+ "name": "ExpanderListProps"
197
+ }
198
+ ],
199
+ "required": false,
200
+ "type": {
201
+ "name": "boolean"
202
+ }
203
+ },
185
204
  "topBorder": {
186
205
  "defaultValue": null,
187
206
  "description": "Toggles the top border of the first child element.",
@@ -1,2 +1,2 @@
1
- import{_ as e,a as n,d as t}from"../../_rollupPluginBabelHelpers-0f007973.js";import i,{useState as a,useEffect as r}from"react";import{I as o}from"../../Icon-d69d65b3.js";import{A as d,I as s}from"../../constants-dbdea596.js";import{C as l}from"../../ChevronUp-dfafe27b.js";import{C as c}from"../../ChevronDown-2b3daace.js";import{u as p}from"../../useHover-18479690.js";import{u as m}from"../../usePrevious-ae293b10.js";import{u,B as f}from"../../useBreakpoint-a74f5af5.js";import{c as v}from"../../index-d1c0552c.js";import x from"./styles.module.scss";import{u as _}from"../../useUuid-3b1e73f2.js";import"../../_tslib-b219470a.js";import"../../grid-c105cad1.js";import"../../uuid-11037462.js";var g=i.forwardRef((function(_,g){var j,E,b=_.id,k=_.children,h=_.padding,C=void 0===h||h,N=_.color,w=void 0===N?"neutral":N,y=_.className,H=void 0===y?"":y,I=_.icon,O=_.large,B=void 0!==O&&O,R=_.title,L=_.expanded,P=void 0!==L&&L,S=_.testId,z=_.handleExpanderClick,U=_.onExpand,V=a(P),W=e(V,2),X=W[0],A=W[1],D=m(X),T=p(),q=T.hoverRef,F=T.isHovered,G=u(),J="object"===n(R),K=v(H,t({},x["expander-list__item--jsx"],J)),M=v(x["expander-list-link"],x["expander-list-link--".concat(w)],(t(j={},x["expander-list-link--closed"],!X),t(j,x["expander-list-link--large"],B),t(j,x["expander-list-link--jsx"],J),j)),Q=v(x["expander-list-link__main-content"],X&&x["expander-list-link__main-content--expanded"],C?x["expander-list-link__main-content--padding"]:""),Y=v(x["expander-list-link__title"],(t(E={},x["expander-list-link__title--string"],!J),t(E,x["expander-list-link__title--jsx"],J),E));return r((function(){P!==X&&A(P)}),[P]),r((function(){U&&X!==!!D&&U(X)}),[X,U]),i.createElement("li",{className:K,ref:g},i.createElement("button",{type:"button",id:b,onClick:z,"data-testid":S,"data-analyticsid":d.ExpanderListExpander,className:M,ref:q,"aria-expanded":X},I&&i.createElement("span",{className:x["expander-list-link__icon"]},i.cloneElement(I,{size:G===f.xs?s.XSmall:s.Small,isHovered:F})),i.createElement("span",{className:Y},R),i.createElement("span",{className:x["expander-list-link__chevron"]},i.createElement(o,{size:s.XSmall,svgIcon:X?l:c,isHovered:F}))),i.createElement("div",{className:Q},k))})),j=function(e){return i.isValidElement(e)&&e.type===g},E=i.forwardRef((function(n,o){var s=n.children,l=n.childPadding,c=void 0===l||l,p=n.large,m=n.isOpen,u=void 0!==m&&m,f=n.color,g=n.className,E=void 0===g?"":g,b=n.accordion,k=void 0!==b&&b,h=n.topBorder,C=void 0===h||h,N=n.bottomBorder,w=void 0===N||N,y=n.testId,H=a(),I=e(H,2),O=I[0],B=I[1],R=a(),L=e(R,2),P=L[0],S=L[1],z=_(),U=i.Children.count(s),V=v(x["expander-list"],E);var W=function(e){return"".concat(z,"-").concat(e)};return r((function(){var e,n,t,i,a;!k||!P||(e=P.getBoundingClientRect(),n=e.top,t=e.left,i=e.bottom,a=e.right,n>=0&&t>=0&&i<=(window.innerHeight||document.documentElement.clientHeight)&&a<=(window.innerWidth||document.documentElement.clientWidth))||P.scrollIntoView()}),[k,P]),r((function(){if(u){var e=W(0);B((function(n){return k?t({},e,!(null==n?void 0:n[e])):Object.assign(Object.assign({},n),t({},e,!(null==n?void 0:n[e])))}))}}),[u]),r((function(){var e;if(!u){var n=null===(e=i.Children.map(s,(function(e){if(j(e))return e})))||void 0===e?void 0:e.reduce((function(e,n,t){return void 0!==n.props.expanded&&(e[W(t)]=n.props.expanded),e}),{});B(Object.assign(Object.assign({},O),n))}}),[s]),i.createElement("ul",{className:V,ref:o,"data-testid":y,"data-analyticsid":d.ExpanderList},i.Children.map(s,(function(e,n){if(j(e)){var a=W(n),r=null==O?void 0:O[a],o=function(e){var n;return v(x["expander-list__item"],(t(n={},x["expander-list__item--top"],0===e&&C),t(n,x["expander-list__item--no-bottom"],e===U-1&&!w),n))}(n);return i.cloneElement(e,{id:a,key:n,expanded:r,padding:c,color:f,large:p,"aria-expanded":r,className:o,handleExpanderClick:function(e){return function(e,n){B((function(e){return k?t({},n,!(null==e?void 0:e[n])):Object.assign(Object.assign({},e),t({},n,!(null==e?void 0:e[n])))})),S(e.currentTarget)}(e,"".concat(z,"-").concat(n))}})}return e})))}));E.Expander=g,g.displayName="ExpanderList.Expander";export{E as ExpanderList,E as default};
1
+ import{_ as e,a as n,d as t}from"../../_rollupPluginBabelHelpers-0f007973.js";import i,{useState as r,useEffect as a}from"react";import{I as o}from"../../Icon-d69d65b3.js";import{A as d,I as l}from"../../constants-dbdea596.js";import{C as s}from"../../ChevronUp-dfafe27b.js";import{C as c}from"../../ChevronDown-2b3daace.js";import{u as p}from"../../useHover-18479690.js";import{u as m}from"../../usePrevious-ae293b10.js";import{u,B as f}from"../../useBreakpoint-a74f5af5.js";import{c as v}from"../../index-d1c0552c.js";import x from"./styles.module.scss";import{u as _}from"../../useUuid-3b1e73f2.js";import"../../_tslib-b219470a.js";import"../../grid-c105cad1.js";import"../../uuid-11037462.js";var g=i.forwardRef((function(_,g){var h,j,E=_.id,b=_.children,k=_.padding,C=void 0===k||k,N=_.color,w=void 0===N?"neutral":N,y=_.className,H=void 0===y?"":y,I=_.icon,O=_.large,B=void 0!==O&&O,W=_.title,R=_.expanded,L=void 0!==R&&R,P=_.testId,S=_.handleExpanderClick,z=_.onExpand,U=_.renderChildrenWhenClosed,V=r(L),X=e(V,2),A=X[0],D=X[1],T=m(A),q=p(),F=q.hoverRef,G=q.isHovered,J=u(),K="object"===n(W),M=v(H,t({},x["expander-list__item--jsx"],K)),Q=v(x["expander-list-link"],x["expander-list-link--".concat(w)],(t(h={},x["expander-list-link--closed"],!A),t(h,x["expander-list-link--large"],B),t(h,x["expander-list-link--jsx"],K),h)),Y=v(x["expander-list-link__title"],(t(j={},x["expander-list-link__title--string"],!K),t(j,x["expander-list-link__title--jsx"],K),j));a((function(){L!==A&&D(L)}),[L]),a((function(){z&&A!==!!T&&z(A)}),[A,z]);return i.createElement("li",{className:M,ref:g},i.createElement("button",{type:"button",id:E,onClick:S,"data-testid":P,"data-analyticsid":d.ExpanderListExpander,className:Q,ref:F,"aria-expanded":A},I&&i.createElement("span",{className:x["expander-list-link__icon"]},i.cloneElement(I,{size:J===f.xs?l.XSmall:l.Small,isHovered:G})),i.createElement("span",{className:Y},W),i.createElement("span",{className:x["expander-list-link__chevron"]},i.createElement(o,{size:l.XSmall,svgIcon:A?s:c,isHovered:G}))),function(){if(!U&&!A)return null;var e=v(x["expander-list-link__main-content"],A&&x["expander-list-link__main-content--expanded"],C?x["expander-list-link__main-content--padding"]:"");return i.createElement("div",{className:e},b)}())})),h=function(e){return i.isValidElement(e)&&e.type===g},j=i.forwardRef((function(n,o){var l=n.children,s=n.childPadding,c=void 0===s||s,p=n.large,m=n.isOpen,u=void 0!==m&&m,f=n.renderChildrenWhenClosed,g=void 0!==f&&f,j=n.color,E=n.className,b=void 0===E?"":E,k=n.accordion,C=void 0!==k&&k,N=n.topBorder,w=void 0===N||N,y=n.bottomBorder,H=void 0===y||y,I=n.testId,O=r(),B=e(O,2),W=B[0],R=B[1],L=r(),P=e(L,2),S=P[0],z=P[1],U=_(),V=i.Children.count(l),X=v(x["expander-list"],b);var A=function(e){return"".concat(U,"-").concat(e)};return a((function(){var e,n,t,i,r;!C||!S||(e=S.getBoundingClientRect(),n=e.top,t=e.left,i=e.bottom,r=e.right,n>=0&&t>=0&&i<=(window.innerHeight||document.documentElement.clientHeight)&&r<=(window.innerWidth||document.documentElement.clientWidth))||S.scrollIntoView()}),[C,S]),a((function(){if(u){var e=A(0);R((function(n){return C?t({},e,!(null==n?void 0:n[e])):Object.assign(Object.assign({},n),t({},e,!(null==n?void 0:n[e])))}))}}),[u]),a((function(){var e;if(!u){var n=null===(e=i.Children.map(l,(function(e){if(h(e))return e})))||void 0===e?void 0:e.reduce((function(e,n,t){return void 0!==n.props.expanded&&(e[A(t)]=n.props.expanded),e}),{});R(Object.assign(Object.assign({},W),n))}}),[l]),i.createElement("ul",{className:X,ref:o,"data-testid":I,"data-analyticsid":d.ExpanderList},i.Children.map(l,(function(e,n){if(h(e)){var r=A(n),a=null==W?void 0:W[r],o=function(e){var n;return v(x["expander-list__item"],(t(n={},x["expander-list__item--top"],0===e&&w),t(n,x["expander-list__item--no-bottom"],e===V-1&&!H),n))}(n);return i.cloneElement(e,{id:r,key:n,expanded:a,padding:c,color:j,large:p,"aria-expanded":a,className:o,handleExpanderClick:function(e){return function(e,n){R((function(e){return C?t({},n,!(null==e?void 0:e[n])):Object.assign(Object.assign({},e),t({},n,!(null==e?void 0:e[n])))})),z(e.currentTarget)}(e,"".concat(U,"-").concat(n))},renderChildrenWhenClosed:g})}return e})))}));j.Expander=g,g.displayName="ExpanderList.Expander";export{j as ExpanderList,j as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -73,6 +73,8 @@ export interface PanelProps {
73
73
  expanded?: boolean;
74
74
  /** Called when panel is open/closed. */
75
75
  onExpand?: (isExpanded: boolean) => void;
76
+ /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
77
+ renderChildrenWhenClosed?: boolean;
76
78
  }
77
79
  declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLHeadingElement>>;
78
80
  export default Panel;
@@ -1 +1 @@
1
- {"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAgB5D,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AA2ED,QAAA,MAAM,KAAK,uFAyMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAgB5D,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,iEAAiE;IACjE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AA2ED,QAAA,MAAM,KAAK,uFAmNT,CAAC;AAEH,eAAe,KAAK,CAAC"}
@@ -585,6 +585,25 @@
585
585
  "type": {
586
586
  "name": "((isExpanded: boolean) => void)"
587
587
  }
588
+ },
589
+ "renderChildrenWhenClosed": {
590
+ "defaultValue": null,
591
+ "description": "Whether to render children when closed (in which case they are hidden with CSS). Default: false",
592
+ "name": "renderChildrenWhenClosed",
593
+ "parent": {
594
+ "fileName": "src/components/Panel/Panel.tsx",
595
+ "name": "PanelProps"
596
+ },
597
+ "declarations": [
598
+ {
599
+ "fileName": "src/components/Panel/Panel.tsx",
600
+ "name": "PanelProps"
601
+ }
602
+ ],
603
+ "required": false,
604
+ "type": {
605
+ "name": "boolean"
606
+ }
588
607
  }
589
608
  }
590
609
  }
@@ -1,2 +1,2 @@
1
- export{c as PanelLayout,a as PanelStatus,b as PanelVariant,P as default}from"../../Panel-f52d1b19.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../constants-dbdea596.js";import"../../Button-0917df8e.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";
1
+ export{c as PanelLayout,a as PanelStatus,b as PanelVariant,P as default}from"../../Panel-b210cf84.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../constants-dbdea596.js";import"../../Button-0917df8e.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";
2
2
  //# sourceMappingURL=index.js.map
@@ -74,6 +74,10 @@
74
74
  }
75
75
  }
76
76
 
77
+ &__badge {
78
+ margin-left: getSpacer(2xs);
79
+ }
80
+
77
81
  &__content-left {
78
82
  &--flex {
79
83
  display: flex;
@@ -139,7 +143,6 @@
139
143
  }
140
144
 
141
145
  &__details-btn {
142
-
143
146
  @media (min-width: map-get($grid-breakpoints, lg)) {
144
147
  align-self: end;
145
148
  }
@@ -252,6 +255,10 @@
252
255
  display: none;
253
256
  @include panel-padding;
254
257
 
258
+ @media print {
259
+ display: flex;
260
+ flex-direction: column;
261
+ }
255
262
  &--open {
256
263
  display: flex;
257
264
  flex-direction: column;
@@ -295,13 +302,6 @@
295
302
  display: flex;
296
303
  align-items: center;
297
304
  padding-bottom: getSpacer(s);
298
-
299
- & > :last-child() {
300
- padding-left: getSpacer(xs);
301
- }
302
- & > :first-child() {
303
- padding-left: 0;
304
- }
305
305
  }
306
306
 
307
307
  &--layout3a {
@@ -2,6 +2,7 @@ export type Styles = {
2
2
  'datetime-container': string;
3
3
  'datetime-container__icon': string;
4
4
  panel: string;
5
+ panel__badge: string;
5
6
  'panel__btn-container': string;
6
7
  'panel__btn-container--layout3': string;
7
8
  'panel__btn-container--padding-top': string;
@@ -1,2 +1,2 @@
1
- import s from"react";import e from"./styles.module.scss";import{A as t}from"../../constants-dbdea596.js";import{b as r,P as o}from"../../Panel-f52d1b19.js";import{c as i}from"../../index-d1c0552c.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"../Panel/styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../Button-0917df8e.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";var a=s.forwardRef((function(a,l){var m=a.testId,p=a.children,d=a.variant,n=void 0===d?r.fill:d;return s.createElement("div",{ref:l,"data-testid":m,className:e["panel-list"],"data-analyticsid":t.PanelList},s.Children.map(p,(function(t,a){return p=t,s.isValidElement(p)&&p.type===o?(l=t,m=0===a,s.cloneElement(l,{variant:n,noTopBorder:n===r.line&&!m,className:i(l.props.className,n!==r.line&&e["panel-list__panel"])})):t;var l,m,p})))}));export{a as default};
1
+ import s from"react";import e from"./styles.module.scss";import{A as t}from"../../constants-dbdea596.js";import{b as r,P as o}from"../../Panel-b210cf84.js";import{c as i}from"../../index-d1c0552c.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"../Panel/styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../Button-0917df8e.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";var a=s.forwardRef((function(a,l){var m=a.testId,p=a.children,d=a.variant,n=void 0===d?r.fill:d;return s.createElement("div",{ref:l,"data-testid":m,className:e["panel-list"],"data-analyticsid":t.PanelList},s.Children.map(p,(function(t,a){return p=t,s.isValidElement(p)&&p.type===o?(l=t,m=0===a,s.cloneElement(l,{variant:n,noTopBorder:n===r.line&&!m,className:i(l.props.className,n!==r.line&&e["panel-list__panel"])})):t;var l,m,p})))}));export{a as default};
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@helsenorge/designsystem-react",
3
3
  "sideEffects": false,
4
- "version": "1.2.2",
4
+ "version": "1.3.0",
5
5
  "description": "The official design system for Helsenorge built with React.",
6
6
  "repository": {
7
7
  "type": "tfs",
@@ -118,7 +118,7 @@ import designsystemtypography from './scss/_typography.scss'
118
118
  text-decoration: none;
119
119
  color: $blueberry600;
120
120
  padding: 0.15rem;
121
- border-bottom: 1px solid $neutral300;
121
+ border-bottom: 1px solid $neutral700;
122
122
 
123
123
  &:hover {
124
124
  cursor: pointer;
package/Panel-f52d1b19.js DELETED
@@ -1,2 +0,0 @@
1
- import{_ as e,d as t}from"./_rollupPluginBabelHelpers-0f007973.js";import{_ as a}from"./_tslib-b219470a.js";import n,{useState as l,useRef as o,useEffect as r}from"react";import{c as i}from"./index-d1c0552c.js";import s from"./components/Panel/styles.module.scss";import{T as c}from"./Title-01820508.js";import{B as d}from"./Button-0917df8e.js";import{A as u,I as m}from"./constants-dbdea596.js";import{I as p}from"./Icon-d69d65b3.js";import{C as f}from"./ChevronDown-2b3daace.js";import{C as v}from"./ChevronUp-dfafe27b.js";import{A as b}from"./ArrowRight-43c97f7a.js";import{A as y}from"./AlertSignFill-5df5b7c7.js";import{p as E}from"./palette-f206f488.js";import{P as g}from"./Pencil-dd3fe667.js";import{C as _}from"./Calendar-a9aa98de.js";import{W as h}from"./Watch-3d5fc351.js";import{u as j,B as k}from"./useBreakpoint-a74f5af5.js";import{u as w}from"./useUuid-3b1e73f2.js";import{u as x}from"./usePrevious-ae293b10.js";import{B as C}from"./Badge-eebcb720.js";var N,I,B;!function(e){e.normal="normal",e.new="new",e.error="error",e.draft="draft"}(N||(N={})),function(e){e.fill="fill",e.white="white",e.stroke="stroke",e.line="line"}(I||(I={})),function(e){e.layout1="layout1",e.layout2="layout2",e.layout3a="layout3a",e.layout3b="layout3b",e.layout3c="layout3c"}(B||(B={}));var T=function(e){var a=e.status,l=e.statusMessage,o=i(s["status-message"],t({},s["status-message--new"],a===N.new));return a!==N.error&&a!==N.draft||!l?null:n.createElement("div",{className:o,"data-testid":"display-status"},n.createElement(p,Object.assign({},a===N.error?{color:E.cherry500,svgIcon:y}:{color:E.black,svgIcon:g},{size:m.XSmall}))," ",n.createElement("span",null,l))},A=function(e){var t=e.date,a=e.time;return t||a?n.createElement("div",{className:s["datetime-container"],"data-testid":"datetime"},t&&n.createElement("div",{className:s["datetime-container__icon"]},n.createElement(p,{svgIcon:_,size:m.XSmall}),n.createElement("span",null,t)),a&&n.createElement("div",{className:s["datetime-container__icon"]},n.createElement(p,{svgIcon:h,size:m.XSmall}),n.createElement("span",null,a))):null},M=n.forwardRef((function(e,t){var l=e.buttonText,o=e.buttonTextClose,r=e.url,i=e.target,s=e.onClick,c=e.renderAsExpander,u=e.isExpanded,m=e.buttonHtmlMarkup,y=void 0===m?"a":m,E=a(e,["buttonText","buttonTextClose","url","target","onClick","renderAsExpander","isExpanded","buttonHtmlMarkup"]);return c?n.createElement(d,Object.assign({testId:"expand",ref:t,onClick:s},E,{"aria-expanded":u}),u?o:l,n.createElement(p,{svgIcon:u?v:f})):n.createElement(d,Object.assign({testId:"url",ref:t,htmlMarkup:y,onClick:s,href:r,target:i},E),l,n.createElement(p,{svgIcon:b}))})),S=n.forwardRef((function(a,d){var m,p,f,v,b,y,E,g=a.children,_=a.contentA,h=a.contentB,S=a.className,P=a.testId,H=a.title,O=a.titleHtmlMarkup,R=void 0===O?"h2":O,z=a.url,D=a.target,X=void 0===D?"_self":D,U=a.icon,W=a.iconRight,F=void 0!==W&&W,K=a.variant,q=void 0===K?I.fill:K,G=a.status,J=void 0===G?N.normal:G,L=a.statusMessage,Q=a.buttonText,V=void 0===Q?"Se detaljer":Q,Y=a.buttonTextClose,Z=void 0===Y?"Skjul detaljer":Y,$=a.showCloseButtonInExpand,ee=void 0===$||$,te=a.layout,ae=void 0===te?B.layout2:te,ne=a.containerAsButton,le=void 0!==ne&&ne,oe=a.date,re=a.time,ie=a.noTopBorder,se=a.buttonOnClick,ce=a.buttonHtmlMarkup,de=a.expanded,ue=void 0!==de&&de,me=a.onExpand,pe=l(ue),fe=e(pe,2),ve=fe[0],be=fe[1],ye=x(ve),Ee=o(null),ge=w(),_e=j();r((function(){ue!==ve&&be(ue)}),[ue]),r((function(){me&&ve!==!!ye&&me(ve)}),[ve,me]);var he=[B.layout3a.toString(),B.layout3b.toString(),B.layout3c.toString()].includes(ae),je=i(s["panel-wrapper"],S),ke=i(s.panel,(t(m={},s["panel--fill"],q===I.fill),t(m,s["panel--stroke"],q===I.stroke),t(m,s["panel--white"],q===I.white),t(m,s["panel--line"],q===I.line),t(m,s["panel--no-top-border"],q===I.line&&ie),t(m,s["panel--selected"],ve),t(m,s["panel--new"],J===N.new),t(m,s["panel--draft"],J===N.draft),t(m,s["panel--error"],J===N.error),t(m,s["panel--status"],J&&J!==N.normal),t(m,s["panel--with-icon"],U),t(m,s["panel--button"],le),t(m,s["panel--clickable"],g||z||me||se||le),m)),we=i((t(p={},s.panel__container,ae===B.layout2&&h),t(p,s["panel__container--layout3"],he&&h),t(p,s["panel__container--grow"],U),p)),xe=i((t(f={},s["panel-content-a"],ae===B.layout2),t(f,s["panel-content-a--layout3a"],ae===B.layout3a),t(f,s["panel-content-a--layout3b"],ae===B.layout3b),t(f,s["panel-content-a--layout3c"],ae===B.layout3c),f)),Ce=i((t(v={},s["panel__content-right--layout1"],h&&ae===B.layout1),t(v,s["panel__content-right--layout2"],h&&ae===B.layout2),t(v,s["panel__content-right--layout3"],h&&he),t(v,s["panel__content-right--layout3a"],h&&ae===B.layout3a),t(v,s["panel__content-right--layout3b"],h&&ae===B.layout3b),t(v,s["panel__content-right--layout3c"],h&&ae===B.layout3c),v)),Ne=i(s["panel-details"],(t(b={},s["panel-details--open"],ve),t(b,s["panel-details--line"],q===I.line),t(b,s["panel-details--white"],q===I.white),t(b,s["panel-details--with-icon"],U),b)),Ie=i(s["panel-content-b"],(t(y={},s["panel-content-b--layout1"],ae===B.layout1),t(y,s["panel-content-b--layout3"],he),y)),Be=i(s["panel__details-btn"]),Te=function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=arguments.length>1?arguments[1]:void 0,a={id:t,tabIndex:e?void 0:-1,variant:"borderless",ellipsis:!0};return n.createElement(M,Object.assign({renderAsExpander:!!g,onClick:se||function(){return be(!ve)},isExpanded:ve,buttonText:V,url:z,target:X,buttonTextClose:Z,ref:t?Ee:void 0,buttonHtmlMarkup:ce},a))},Ae=i(s["panel__btn-container"],(t(E={},s["panel__btn-container--layout3"],he),t(E,s["panel__btn-container--padding-top"],h),E));return n.createElement("div",{ref:d,"data-testid":P,className:je,"data-analyticsid":u.Panel},n.createElement("div",{className:ke,tabIndex:le?0:void 0,onClick:function(){var e;le&&(null===(e=Ee.current)||void 0===e||e.click())},onKeyDown:function(e){var t,a=e.key;!le||"Enter"!==a&&" "!==a||(e.preventDefault(),null===(t=Ee.current)||void 0===t||t.click())},"aria-labelledby":le?ge:void 0,role:le?"button":void 0},U&&!F&&n.createElement("div",{className:s.panel__icon},U),n.createElement("div",{className:we},n.createElement("div",{className:xe},n.createElement(T,{status:J,statusMessage:L}),H&&n.createElement("div",{className:s["panel-content-a__title-container"]},n.createElement(c,{appearance:"title3",htmlMarkup:R},H),L&&J===N.new&&n.createElement("div",null,n.createElement(C,{color:"blueberry",testId:"badge-status"},L))),_,_e>=k.lg&&n.createElement(A,{date:oe,time:re})),n.createElement("div",{className:Ce},h&&n.createElement("div",{className:Ie},h),(g||z||oe||re||se)&&n.createElement("div",{className:Ae},_e<k.lg&&n.createElement(A,{date:oe,time:re}),(g||z||se)&&n.createElement("div",{className:Be},Te(!le,ge))))),U&&F&&n.createElement("div",{className:s["panel__icon--right"]},U)),g&&n.createElement("div",{className:Ne,"data-testid":"panel-details"},n.createElement("div",null,g),ee&&n.createElement("div",{className:Be},Te())))}));export{S as P,N as a,I as b,B as c};
2
- //# sourceMappingURL=Panel-f52d1b19.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Panel-f52d1b19.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}