@helsenorge/designsystem-react 1.0.0-experimental.0 → 1.1.0

package/components/Panel/styles.module.scss

@@ -0,0 +1,365 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+
+.panel-wrapper {
+  width: 100%;
+}
+
+@mixin panel-padding {
+  padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(s);
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(l);
+  }
+}
+
+@mixin panel-padding-icon {
+  padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
+  }
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(m);
+  }
+}
+
+@mixin hover-and-focus-effects($background-color, $box-shadow-color) {
+  &:hover {
+    background-color: $background-color;
+  }
+
+  &:focus {
+    box-shadow: inset 0px 0px 0px 3px $box-shadow-color;
+  }
+}
+
+.panel {
+  @include panel-padding;
+  outline: none;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__container {
+    @media (min-width: map-get($grid-breakpoints, sm)) {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+    }
+
+    &--layout3 {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+
+    &--grow {
+      flex: 1;
+    }
+  }
+
+  &--with-icon {
+    display: flex;
+    flex-direction: row;
+    @include panel-padding-icon;
+  }
+
+  &__icon {
+    padding-right: getSpacer(s);
+    &--right {
+      padding-left: getSpacer(s);
+    }
+  }
+
+  &__content-left {
+    &--flex {
+      display: flex;
+    }
+  }
+
+  &__content-right {
+    &--layout1 {
+      display: flex;
+      flex-direction: column;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        flex-direction: row;
+      }
+    }
+
+    &--layout2 {
+      display: flex;
+      flex-direction: column;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        max-width: 200px;
+      }
+    }
+
+    &--layout3 {
+      display: flex;
+      flex-direction: column;
+      padding-left: 0;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        flex-direction: row;
+        padding-left: getSpacer(m);
+      }
+    }
+
+    &--layout3a {
+      flex: 0.4;
+    }
+    &--layout3b {
+      flex: 0.55;
+    }
+    &--layout3c {
+      flex: 0.65;
+    }
+  }
+
+  &__btn-container {
+    display: flex;
+    flex-direction: column;
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      align-self: end;
+    }
+
+    &--layout3 {
+      display: flex;
+      align-self: initial;
+      flex-direction: column;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        align-self: end;
+      }
+    }
+    &--padding-top {
+      padding-top: getSpacer(s);
+    }
+  }
+
+  &__details-btn {
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      align-self: end;
+    }
+  }
+
+  // Panel variants
+
+  &--fill {
+    background-color: $neutral50;
+  }
+
+  &--fill#{&}--selected {
+    background-color: $neutral100;
+  }
+
+  &--fill#{&}--selected#{&}--clickable {
+    &:hover {
+      background-color: $neutral200;
+    }
+  }
+
+  &--white {
+    background-color: $white;
+  }
+
+  &--fill#{&}--clickable,
+  &--white#{&}--clickable {
+    @include hover-and-focus-effects($neutral100, $neutral600);
+  }
+
+  &--white#{&}--selected {
+    box-shadow: inset 0px 0px 0px 6px $neutral100;
+  }
+
+  &--stroke {
+    border: 6px solid $neutral100;
+  }
+
+  &--stroke#{&}--clickable {
+    @include hover-and-focus-effects($neutral50, $neutral100);
+    &:focus {
+      border-color: $neutral600;
+    }
+  }
+
+  &--line {
+    background-color: $white;
+    border-color: $neutral500;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+  }
+
+  &--line#{&}--clickable {
+    @include hover-and-focus-effects($neutral50, $neutral600);
+  }
+
+  &--line#{&}--selected {
+    background-color: $neutral50;
+    border-bottom: 0;
+  }
+
+  &--line#{&}--selected#{&}--clickable {
+    &:hover {
+      background-color: $neutral100;
+    }
+  }
+
+  &--no-top-border#{&}--line {
+    border-top: none;
+  }
+
+  &--button {
+    cursor: pointer;
+  }
+
+  //Panel status
+  &--status {
+    &::before {
+      content: '';
+      position: absolute;
+      border-left: 0.375rem;
+      top: 0;
+      left: 0;
+      height: 100%;
+      border-left-style: solid;
+    }
+  }
+  &--new {
+    &::before {
+      border-left-color: $blueberry600;
+    }
+  }
+
+  &--draft {
+    &::before {
+      border-left-style: dashed;
+      border-left-color: $neutral500;
+    }
+  }
+
+  &--error {
+    &::before {
+      border-left-color: $cherry500;
+    }
+  }
+}
+
+.panel-details {
+  background-color: $neutral50;
+  display: none;
+  @include panel-padding;
+
+  &--open {
+    display: flex;
+    flex-direction: column;
+  }
+  &--line {
+    background: $white;
+    border-bottom: 1px solid $neutral500;
+  }
+  &--white {
+    background: $white;
+  }
+  &--with-icon {
+    @include panel-padding-icon;
+  }
+}
+
+.status-message {
+  font-size: $font-size-sm;
+  color: $cherry500;
+  display: flex;
+  margin-bottom: getSpacer(2xs);
+  span {
+    padding-left: 5px;
+    align-self: center;
+    font-size: $font-size-sm;
+  }
+
+  &--new {
+    color: $blueberry800;
+  }
+}
+.panel-content-a {
+  flex: 1;
+  padding-right: 0;
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding-right: getSpacer(m);
+  }
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+    padding-bottom: getSpacer(s);
+
+    & > :last-child() {
+      padding-left: getSpacer(xs);
+    }
+    & > :first-child() {
+      padding-left: 0;
+    }
+  }
+
+  &--layout3a {
+    flex: 0.6;
+  }
+  &--layout3b {
+    flex: 0.45;
+  }
+  &--layout3c {
+    flex: 0.35;
+  }
+}
+
+.panel-content-b {
+  flex: 1;
+  padding-top: getSpacer(s);
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    padding-top: 0;
+  }
+
+  &--layout1 {
+    padding-top: getSpacer(s);
+    padding-left: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding-right: getSpacer(m);
+    }
+  }
+  &--layout3 {
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-right: getSpacer(m);
+    }
+  }
+}
+
+.datetime-container {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    padding-top: getSpacer(xs);
+    flex-direction: row;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    padding-bottom: getSpacer(2xs);
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-top: 0;
+      padding-right: getSpacer(m);
+      padding-bottom: 0;
+    }
+
+    span {
+      padding-left: getSpacer(2xs);
+      font-size: $font-size-sm;
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+export type Styles = {
+  'datetime-container': string;
+  'datetime-container__icon': string;
+  panel: string;
+  'panel__btn-container': string;
+  'panel__btn-container--layout3': string;
+  'panel__btn-container--padding-top': string;
+  panel__container: string;
+  'panel__container--grow': string;
+  'panel__container--layout3': string;
+  'panel__content-left--flex': string;
+  'panel__content-right--layout1': string;
+  'panel__content-right--layout2': string;
+  'panel__content-right--layout3': string;
+  'panel__content-right--layout3a': string;
+  'panel__content-right--layout3b': string;
+  'panel__content-right--layout3c': string;
+  'panel__details-btn': string;
+  panel__icon: string;
+  'panel__icon--right': string;
+  'panel--button': string;
+  'panel--clickable': string;
+  'panel--draft': string;
+  'panel--error': string;
+  'panel--fill': string;
+  'panel--line': string;
+  'panel--new': string;
+  'panel--no-top-border': string;
+  'panel--selected': string;
+  'panel--status': string;
+  'panel--stroke': string;
+  'panel--white': string;
+  'panel--with-icon': string;
+  'panel-content-a': string;
+  'panel-content-a__title-container': string;
+  'panel-content-a--layout3a': string;
+  'panel-content-a--layout3b': string;
+  'panel-content-a--layout3c': string;
+  'panel-content-b': string;
+  'panel-content-b--layout1': string;
+  'panel-content-b--layout3': string;
+  'panel-details': string;
+  'panel-details--line': string;
+  'panel-details--open': string;
+  'panel-details--white': string;
+  'panel-details--with-icon': string;
+  'panel-wrapper': string;
+  'status-message': string;
+  'status-message--new': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/PanelList/PanelList.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PanelVariant } from '../Panel';
+interface PanelListProps {
+    /** Panels to render inside the PanelList */
+    children?: React.ReactNode;
+    /** Changes the visual representation of the panel. Default: fill */
+    variant?: keyof typeof PanelVariant;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const PanelList: React.ForwardRefExoticComponent<PanelListProps & React.RefAttributes<HTMLDivElement>>;
+export default PanelList;
+//# sourceMappingURL=PanelList.d.ts.map

package/components/PanelList/PanelList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelList.d.ts","sourceRoot":"","sources":["../../../src/components/PanelList/PanelList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAc,EAAc,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,UAAU,cAAc;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,QAAA,MAAM,SAAS,uFAeb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/components/PanelList/componentdata.json

@@ -0,0 +1,79 @@
+{
+  "props": {
+    "children": {
+      "defaultValue": null,
+      "description": "Panels to render inside the PanelList",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/PanelList/PanelList.tsx",
+        "name": "PanelListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/PanelList/PanelList.tsx",
+          "name": "PanelListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visual representation of the panel. Default: fill",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/PanelList/PanelList.tsx",
+        "name": "PanelListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/PanelList/PanelList.tsx",
+          "name": "PanelListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"fill\" | \"white\" | \"stroke\" | \"line\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"fill\""
+          },
+          {
+            "value": "\"white\""
+          },
+          {
+            "value": "\"stroke\""
+          },
+          {
+            "value": "\"line\""
+          }
+        ]
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/PanelList/PanelList.tsx",
+        "name": "PanelListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/PanelList/PanelList.tsx",
+          "name": "PanelListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/PanelList/index.d.ts

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

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

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

package/components/PanelList/index.js

@@ -0,0 +1,2 @@
+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-a05f45f0.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-78f848e6.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};
+//# sourceMappingURL=index.js.map

package/components/PanelList/index.js.map

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

package/components/PanelList/styles.module.scss

@@ -0,0 +1,14 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+
+.panel-list {
+  &__panel:not(:last-child) {
+    margin-bottom: getSpacer(2xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-bottom: getSpacer(s);
+    }
+  }
+}

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

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

package/components/Portal/componentdata.json

@@ -0,0 +1,80 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Add custom class to portal, default class is portal-container",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Content to be displayed in Portal",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "parent": {
+      "defaultValue": null,
+      "description": "Default is document.body",
+      "name": "parent",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "HTMLElement"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Portal/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface PortalProps {
+    /** Add custom class to portal, default class is portal-container */
+    className?: string;
+    /** Content to be displayed in Portal */
+    children?: React.ReactNode;
+    /** Default is document.body */
+    parent?: HTMLElement;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,WAAW,CA0BtG"}

package/components/Portal/index.js

@@ -0,0 +1,2 @@
+export{P as default}from"../../index-28ed5ede.js";import"react";import"react-dom";import"../../constants-dbdea596.js";
+//# sourceMappingURL=index.js.map

package/components/Portal/index.js.map

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