@helsenorge/designsystem-react 1.0.0-beta110 → 1.0.0-beta113

package/components/Panel/componentdata.json

@@ -0,0 +1,440 @@
+{
+  "props": {
+    "title": {
+      "defaultValue": null,
+      "description": "Title of the panel",
+      "name": "title",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "status": {
+      "defaultValue": null,
+      "description": "Displays a status on the left side: defualt normal",
+      "name": "status",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"normal\" | \"new\" | \"error\" | \"draft\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"normal\""
+          },
+          {
+            "value": "\"new\""
+          },
+          {
+            "value": "\"error\""
+          },
+          {
+            "value": "\"draft\""
+          }
+        ]
+      }
+    },
+    "statusMessage": {
+      "defaultValue": null,
+      "description": "Displayed on top of the panel with a status icon",
+      "name": "statusMessage",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visual representation of the panel.",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"fill\" | \"white\" | \"stroke\" | \"line\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"fill\""
+          },
+          {
+            "value": "\"white\""
+          },
+          {
+            "value": "\"stroke\""
+          },
+          {
+            "value": "\"line\""
+          }
+        ]
+      }
+    },
+    "url": {
+      "defaultValue": null,
+      "description": "Url to details, renders as a button with anchor tag",
+      "name": "url",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "target": {
+      "defaultValue": null,
+      "description": "target used in the button: default is _self",
+      "name": "target",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"_self\""
+          },
+          {
+            "value": "\"_blank\""
+          },
+          {
+            "value": "\"_parent\""
+          },
+          {
+            "value": "\"_top\""
+          }
+        ]
+      }
+    },
+    "icon": {
+      "defaultValue": null,
+      "description": "Icon displayed in title",
+      "name": "icon",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "iconRight": {
+      "defaultValue": null,
+      "description": "Display icon on right",
+      "name": "iconRight",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "contentA": {
+      "defaultValue": null,
+      "description": "Panel section A content",
+      "name": "contentA",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "contentB": {
+      "defaultValue": null,
+      "description": "Panel section B content",
+      "name": "contentB",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "buttonText": {
+      "defaultValue": null,
+      "description": "Panel button text",
+      "name": "buttonText",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "buttonTextClose": {
+      "defaultValue": null,
+      "description": "Panel button close text",
+      "name": "buttonTextClose",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "showCloseButtonInExpand": {
+      "defaultValue": null,
+      "description": "Show close button in bottom of Panel Expand, default: true",
+      "name": "showCloseButtonInExpand",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "layout": {
+      "defaultValue": null,
+      "description": "Layout (see description)",
+      "name": "layout",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"layout1\" | \"layout2\" | \"layout3a\" | \"layout3b\" | \"layout3c\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"layout1\""
+          },
+          {
+            "value": "\"layout2\""
+          },
+          {
+            "value": "\"layout3a\""
+          },
+          {
+            "value": "\"layout3b\""
+          },
+          {
+            "value": "\"layout3c\""
+          }
+        ]
+      }
+    },
+    "containerAsButton": {
+      "defaultValue": null,
+      "description": "Use the panel's container as a button",
+      "name": "containerAsButton",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "time": {
+      "defaultValue": null,
+      "description": "Displays time with icon",
+      "name": "time",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "date": {
+      "defaultValue": null,
+      "description": "Displays date with icon",
+      "name": "date",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Panel/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,eAAe,KAAK,CAAC"}

package/components/Panel/index.js

@@ -0,0 +1,2 @@
+import{_ as e,d as t}from"../../_rollupPluginBabelHelpers-4f206abf.js";import a,{useState as n,useRef as l}from"react";import{c as o}from"../../index-9b84fabc.js";import r from"./styles.module.scss";import{T as s}from"../../Title-8fc7396e.js";import{B as i}from"../../Button-218a5289.js";import{A as c,I as m}from"../../constants-be4018c7.js";import{Icon as d}from"../Icons/Icon.js";import u from"../Icons/ChevronDown.js";import p from"../Icons/ChevronUp.js";import v from"../Icons/ArrowRight.js";import f from"../Icons/AlertSignFill.js";import{p as y}from"../../palette-f206f488.js";import _ from"../Icons/Pencil.js";import b from"../Icons/Calendar.js";import g from"../Icons/Watch.js";import{u as E,B as j}from"../../useBreakpoint-004c6cb2.js";import{B as h}from"../../Badge-81cefbed.js";import{u as I}from"../../uuid-fe7442b7.js";import"../Title/styles.module.scss";import"../../_tslib-51c8a283.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../grid-c105cad1.js";import"../../Loader-8a2970bd.js";import"../Loader/styles.module.scss";import"../../useHover-026f72c1.js";import"../../useWindowSize-5cc481da.js";import"../Button/styles.module.scss";import"../Badge/styles.module.scss";var w,N,k;!function(e){e.normal="normal",e.new="new",e.error="error",e.draft="draft"}(w||(w={})),function(e){e.fill="fill",e.white="white",e.stroke="stroke",e.line="line"}(N||(N={})),function(e){e.layout1="layout1",e.layout2="layout2",e.layout3a="layout3a",e.layout3b="layout3b",e.layout3c="layout3c"}(k||(k={}));var B=a.forwardRef((function(B,x){var S,C,A,T,z,D,O,P=B.children,R=B.contentA,X=B.contentB,H=B.className,L=B.testId,M=B.title,W=B.url,F=B.target,K=void 0===F?"_self":F,U=B.icon,q=B.iconRight,G=void 0!==q&&q,J=B.variant,Q=void 0===J?N.fill:J,V=B.status,Y=void 0===V?w.normal:V,Z=B.statusMessage,$=B.buttonText,ee=void 0===$?"Se detaljer":$,te=B.buttonTextClose,ae=void 0===te?"Skjul detaljer":te,ne=B.showCloseButtonInExpand,le=void 0===ne||ne,oe=B.layout,re=void 0===oe?k.layout2:oe,se=B.containerAsButton,ie=void 0!==se&&se,ce=B.date,me=B.time,de=n(!1),ue=e(de,2),pe=ue[0],ve=ue[1],fe=l(null),ye=I(),_e=E(),be=Q===N.line,ge=Q===N.white,Ee=[k.layout3a.toString(),k.layout3b.toString(),k.layout3c.toString()].includes(re),je=o(r["panel-wrapper"],H),he=o(r.panel,(t(S={},r["panel--fill"],Q===N.fill),t(S,r["panel--stroke"],Q===N.stroke),t(S,r["panel--white"],ge),t(S,r["panel--line"],be),t(S,r["panel--selected"],pe),t(S,r["panel--new"],Y===w.new),t(S,r["panel--draft"],Y===w.draft),t(S,r["panel--error"],Y===w.error),t(S,r["panel--status"],Y&&Y!==w.normal),t(S,r["panel--with-icon"],U),t(S,r["panel--button"],ie),S)),Ie=o((t(C={},r.panel__container,re===k.layout2&&X),t(C,r["panel__container--layout3ish"],Ee&&X),t(C,r["panel__container--grow"],U),C)),we=o((t(A={},r["panel-content-a"],re===k.layout2),t(A,r["panel-content-a--layout3a"],re===k.layout3a),t(A,r["panel-content-a--layout3b"],re===k.layout3b),t(A,r["panel-content-a--layout3c"],re===k.layout3c),A)),Ne=o((t(T={},r["panel__content-right--layout1"],X&&re===k.layout1),t(T,r["panel__content-right--layout2"],X&&re===k.layout2),t(T,r["panel__content-right--layout3ish"],X&&Ee),t(T,r["panel__content-right--layout3a"],X&&re===k.layout3a),t(T,r["panel__content-right--layout3b"],X&&re===k.layout3b),t(T,r["panel__content-right--layout3c"],X&&re===k.layout3c),T)),ke=o(r["panel-details"],(t(z={},r["panel-details--open"],pe),t(z,r["panel-details--line"],be),t(z,r["panel-details--white"],ge),z)),Be=o(r["panel-content-b"],t({},r["panel-content-b--layout1"],re===k.layout1)),xe=o(r["panel__details-btn"],t({},r["panel__details-btn--pull-right"],X)),Se=function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=arguments.length>1?arguments[1]:void 0,n={id:t,tabIndex:e?void 0:-1,variant:"borderless",ref:t?fe:void 0,ellipsis:!0};return P?a.createElement(i,Object.assign({testId:"expand",onClick:function(){return ve(!pe)}},n),pe?ae:ee,a.createElement(d,{svgIcon:pe?p:u})):a.createElement(i,Object.assign({testId:"url",htmlMarkup:"a",href:W,target:K},n),ee,a.createElement(d,{svgIcon:v}))},Ce=o(r["panel__btn-container"],(t(D={},r["panel__btn-container--layout3ish"],Ee),t(D,r["panel__btn-container--padding-top"],X),D)),Ae=function(){return ce||me?a.createElement("div",{className:r["datetime-container"],"data-testid":"datetime"},ce&&a.createElement("div",{className:r["datetime-container__icon"]},a.createElement(d,{svgIcon:b,size:m.XSmall}),a.createElement("span",null,ce)),me&&a.createElement("div",{className:r["datetime-container__icon"]},a.createElement(d,{svgIcon:g,size:m.XSmall}),a.createElement("span",null,me))):null};return a.createElement("div",{ref:x,"data-testid":L,className:je,"data-analyticsid":c.Panel},a.createElement("div",{className:he,tabIndex:ie?0:void 0,onClick:function(){var e;ie&&(null===(e=fe.current)||void 0===e||e.click())},onKeyDown:function(e){var t,a=e.key;!ie||"Enter"!==a&&" "!==a||(e.preventDefault(),null===(t=fe.current)||void 0===t||t.click())},"aria-labelledby":ie?ye:void 0,role:ie?"button":void 0},U&&!G&&a.createElement("div",{className:r.panel__icon},U),a.createElement("div",{className:Ie},a.createElement("div",{className:we},(O=o(r["status-message"],t({},r["status-message--new"],Y===w.new)),Y!==w.error&&Y!==w.draft||!Z?null:a.createElement("div",{className:O,"data-testid":"display-status"},a.createElement(d,Object.assign({},Y===w.error?{color:y.cherry500,svgIcon:f}:{color:y.black,svgIcon:_},{size:m.XSmall}))," ",a.createElement("span",null,Z))),M&&a.createElement("div",{className:r["panel-content-a__title-container"]},a.createElement(s,{appearance:"title3"},M),Z&&Y===w.new&&a.createElement("div",null,a.createElement(h,{color:"blueberry",testId:"badge-status"},Z))),R,void 0!==_e&&_e>=j.lg&&Ae()),a.createElement("div",{className:Ne},X&&a.createElement("div",{className:Be},X),(P||W||ce||me)&&a.createElement("div",{className:Ce},void 0!==_e&&_e<j.lg&&Ae(),(P||W)&&a.createElement("div",{className:xe},Se(!ie,ye))))),U&&G&&a.createElement("div",{className:r["panel__icon--right"]},U)),P&&a.createElement("div",{className:ke,"data-testid":"panel-details"},a.createElement("div",null,P),le&&Se()))}));export default B;export{k as PanelLayout,w as PanelStatus,N as PanelVariant};
+//# sourceMappingURL=index.js.map

package/components/Panel/index.js.map

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