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

package/components/Expander/componentdata.json

@@ -0,0 +1,237 @@
+{
+  "props": {
+    "title": {
+      "defaultValue": null,
+      "description": "Sets the trigger title",
+      "name": "title",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Sets the expanded content",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        },
+        {
+          "fileName": "designsystem/node_modules/@types/react/index.d.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "size": {
+      "defaultValue": null,
+      "description": "Sets the size of the expander. Default: ExpanderSize.small",
+      "name": "size",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "ExpanderSize | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"small\""
+          },
+          {
+            "value": "\"large\""
+          }
+        ]
+      }
+    },
+    "color": {
+      "defaultValue": null,
+      "description": "Sets the background of the expander. Requires size=ExpanderSize.large.",
+      "name": "color",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "ExpanderColors | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"banana\""
+          },
+          {
+            "value": "\"blueberry\""
+          },
+          {
+            "value": "\"cherry\""
+          },
+          {
+            "value": "\"kiwi\""
+          },
+          {
+            "value": "\"neutral\""
+          },
+          {
+            "value": "\"plum\""
+          },
+          {
+            "value": "\"white\""
+          }
+        ]
+      }
+    },
+    "svgIcon": {
+      "defaultValue": null,
+      "description": "Adds an icon to the expander trigger. Requires size=ExpanderSize.large.",
+      "name": "svgIcon",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "SvgIcon"
+      }
+    },
+    "expanded": {
+      "defaultValue": null,
+      "description": "Opens or closes the expander",
+      "name": "expanded",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "noNestedLine": {
+      "defaultValue": null,
+      "description": "Removes border to the left of the content. Requires size=ExpanderSize.small.",
+      "name": "noNestedLine",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "sticky": {
+      "defaultValue": null,
+      "description": "Stick expander trigger to top of screen while scrolling down",
+      "name": "sticky",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onExpand": {
+      "defaultValue": null,
+      "description": "Called when expander is open/closed.",
+      "name": "onExpand",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((isExpanded: boolean) => void)"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute on the expander button.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Expander/Expander.tsx",
+        "name": "ExpanderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Expander/Expander.tsx",
+          "name": "ExpanderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Expander/index.d.ts

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

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

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

package/components/Expander/index.js

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

package/components/Expander/index.js.map

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

package/components/Expander/styles.module.scss

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

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

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

package/components/ExpanderList/ExpanderList.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+export declare type ExpanderListColors = PaletteNames;
+export declare type ExpanderType = React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>>;
+export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
+    Expander: ExpanderType;
+}
+interface ExpanderListProps {
+    /** Toggles accordion functionality for the expanders. */
+    accordion?: boolean;
+    /** Toggles the bottom border of the last child element. */
+    bottomBorder?: boolean;
+    /** Items in the ExpanderList */
+    children: React.ReactNode;
+    /** Toggles padding of child elements */
+    childPadding?: boolean;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the link list background color on hover. */
+    color?: ExpanderListColors;
+    /** Changes the font size. */
+    large?: boolean;
+    /** Opens the first item in the list. */
+    /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */
+    isOpen?: boolean;
+    /** Toggles the top border of the first child element. */
+    topBorder?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare type Modify<T, R> = Omit<T, keyof R> & R;
+declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
+    id?: string;
+    title: JSX.Element | string;
+    children: React.ReactNode;
+    className?: string;
+    color?: ExpanderListColors;
+    icon?: React.ReactElement;
+    padding?: boolean;
+    expanded?: boolean;
+    large?: boolean;
+    testId?: string;
+    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+}>;
+export declare const ExpanderList: ExpanderListCompound;
+export default ExpanderList;
+//# sourceMappingURL=ExpanderList.d.ts.map

package/components/ExpanderList/ExpanderList.d.ts.map

@@ -0,0 +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"}