@helsenorge/designsystem-react 1.0.0-beta.6 → 1.0.0-beta100

package/components/Checkbox/componentdata.json

@@ -0,0 +1,265 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "checked": {
+      "defaultValue": null,
+      "description": "Sets checkbox as checked",
+      "name": "checked",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the checkbox",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "The label text next to the checkbox",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "inputId": {
+      "defaultValue": null,
+      "description": "input id of the checkbox",
+      "name": "inputId",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "mode": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the checkbox",
+      "name": "mode",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"onwhite\""
+          },
+          {
+            "value": "\"ongrey\""
+          },
+          {
+            "value": "\"onblueberry\""
+          },
+          {
+            "value": "\"ondark\""
+          },
+          {
+            "value": "\"oninvalid\""
+          }
+        ]
+      }
+    },
+    "name": {
+      "defaultValue": null,
+      "description": "Unique identifyer for the input tag",
+      "name": "name",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "value": {
+      "defaultValue": null,
+      "description": "Return value for the checkbox",
+      "name": "value",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the checkbox",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"normal\" | \"bigform\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"normal\""
+          },
+          {
+            "value": "\"bigform\""
+          }
+        ]
+      }
+    },
+    "error": {
+      "defaultValue": null,
+      "description": "Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup",
+      "name": "error",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "errorText": {
+      "defaultValue": null,
+      "description": "Error text to show above the component",
+      "name": "errorText",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Checkbox/index.d.ts

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

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

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

package/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+import{C as o}from"../../Checkbox-9e4f3440.js";export{C as Checkbox,C as default}from"../../Checkbox-9e4f3440.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-fe7442b7.js";import"../../Check-6291ad09.js";import"../../Icon-89da8de4.js";import"../../_tslib-51c8a283.js";import"../../constants-ad6c82db.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"./styles.module.scss";
+//# sourceMappingURL=index.js.map

package/components/Checkbox/index.js.map

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

package/components/Checkbox/styles.module.scss

@@ -0,0 +1,204 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.checkbox-errors {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  color: $cherry500;
+  margin-top: 0;
+}
+
+.checkbox-wrapper {
+  margin: getSpacer(s) 0;
+
+  &--with-error {
+    padding: getSpacer(s) getSpacer(xs) getSpacer(m);
+    background-color: $cherry100;
+    border-left: 0.25rem solid $cherry500;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: getSpacer(s) getSpacer(m) getSpacer(l);
+    }
+  }
+
+  &--with-error#{&}--bigform {
+    padding: getSpacer(m) getSpacer(m);
+  }
+
+  &--bigform {
+    margin: getSpacer(xs) 0 getSpacer(xs) 0;
+  }
+}
+
+.checkbox-wrapper:first-of-type {
+  margin-top: 0;
+}
+
+.checkbox-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: $font-size-sm;
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+
+  &--on-dark {
+    color: $white;
+  }
+
+  &--invalid {
+    color: $black;
+  }
+
+  &--disabled {
+    cursor: default;
+    color: $neutral400;
+  }
+
+  &--bigform {
+    padding: getSpacer(s);
+    background-color: $neutral50;
+  }
+
+  &--bigform#{&}--on-blueberry {
+    background-color: $blueberry50;
+  }
+
+  &--bigform#{&}--on-dark {
+    background-color: $blueberry800;
+  }
+
+  &--bigform#{&}--invalid {
+    background-color: $white;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    &--bigform {
+      padding: 1.68rem getSpacer(l);
+    }
+  }
+}
+
+.checkbox {
+  width: 0px;
+  margin: 0;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+
+  &__icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) getSpacer(3xs);
+    height: 1.625rem;
+    width: 1.625rem;
+    min-width: auto !important;
+    min-height: auto !important;
+    color: $neutral700;
+    box-shadow: 0 0 0 getSpacer(3xs);
+
+    :hover > & {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      background-color: $neutral100;
+    }
+
+    :active > & {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      color: $black;
+    }
+
+    &--checked {
+      color: $blueberry500;
+
+      :hover > & {
+        background-color: $blueberry50;
+      }
+    }
+
+    &--on-blueberry {
+      color: $blueberry500;
+
+      :hover > & {
+        background-color: $blueberry100;
+      }
+    }
+
+    &--on-dark {
+      color: $neutral200;
+
+      :hover > & {
+        background-color: $inverted-hover;
+      }
+
+      &.checkbox__icon-wrapper--checked {
+        color: $blueberry200;
+      }
+
+      :active > & {
+        color: $white;
+      }
+    }
+
+    &--invalid {
+      color: $cherry500;
+
+      :hover > & {
+        background-color: $cherry100;
+      }
+
+      &.checkbox__icon-wrapper--checked {
+        color: $cherry500;
+      }
+
+      :active > & {
+        color: $black;
+      }
+    }
+
+    &--disabled {
+      color: $neutral400;
+      &.checkbox__icon-wrapper--checked {
+        color: $neutral400;
+      }
+      :hover > & {
+        box-shadow: 0 0 0 getSpacer(3xs);
+        background-color: transparent;
+      }
+
+      :active > & {
+        color: $neutral400;
+      }
+    }
+  }
+
+  &__icon {
+    position: relative;
+    top: 0.1rem;
+    right: 0.05rem;
+  }
+
+  &:focus {
+    & + .checkbox__icon-wrapper {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      color: $black;
+
+      &--on-dark {
+        color: $white;
+      }
+
+      &--invalid {
+        color: $black;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+export type Styles = {
+  checkbox: string;
+  checkbox__icon: string;
+  'checkbox__icon-wrapper': string;
+  'checkbox__icon-wrapper--checked': string;
+  'checkbox__icon-wrapper--disabled': string;
+  'checkbox__icon-wrapper--invalid': string;
+  'checkbox__icon-wrapper--on-blueberry': string;
+  'checkbox__icon-wrapper--on-dark': string;
+  'checkbox-errors': string;
+  'checkbox-label': string;
+  'checkbox-label--bigform': string;
+  'checkbox-label--disabled': string;
+  'checkbox-label--invalid': string;
+  'checkbox-label--on-blueberry': string;
+  'checkbox-label--on-dark': string;
+  'checkbox-wrapper': string;
+  'checkbox-wrapper--bigform': string;
+  'checkbox-wrapper--with-error': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Close/Close.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface CloseProps {
+    /** Function is called when user clicks the button */
+    onClick?: () => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Close: (props: CloseProps) => JSX.Element;
+export default Close;
+//# sourceMappingURL=Close.d.ts.map

package/components/Close/Close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Close.d.ts","sourceRoot":"","sources":["../../../src/components/Close/Close.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,UAAU;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,KAAK,oCAiBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Close/componentdata.json

@@ -0,0 +1,61 @@
+{
+  "props": {
+    "onClick": {
+      "defaultValue": null,
+      "description": "Function is called when user clicks the button",
+      "name": "onClick",
+      "parent": {
+        "fileName": "designsystem/src/components/Close/Close.tsx",
+        "name": "CloseProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/Close/Close.tsx",
+          "name": "CloseProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "(() => void)"
+      }
+    },
+    "ariaLabel": {
+      "defaultValue": null,
+      "description": "Sets the aria-label of the button",
+      "name": "ariaLabel",
+      "parent": {
+        "fileName": "designsystem/src/components/Close/Close.tsx",
+        "name": "CloseProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/Close/Close.tsx",
+          "name": "CloseProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "designsystem/src/components/Close/Close.tsx",
+        "name": "CloseProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/Close/Close.tsx",
+          "name": "CloseProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Close/index.d.ts

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

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

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

package/components/Close/index.js

@@ -0,0 +1,2 @@
+import{C as s}from"../../Close-007fca15.js";export{C as default}from"../../Close-007fca15.js";import"react";import"../../palette-f206f488.js";import"../../Icon-89da8de4.js";import"../../_tslib-51c8a283.js";import"../../constants-ad6c82db.js";import"./styles.module.scss";import"../../useBreakpoint-324a9b14.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"../../useWindowSize-73b47451.js";import"../../grid-11a70eb7.js";
+//# sourceMappingURL=index.js.map

package/components/Close/index.js.map

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

package/components/Close/styles.module.scss

@@ -0,0 +1,32 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_breakpoints.scss';
+
+.close {
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    height: 2.375rem;
+    width: 2.375rem;
+  }
+
+  height: 3rem;
+  width: 3rem;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:hover,
+  &:active {
+    background-color: rgba(88, 170, 187, 0.1);
+  }
+  &:focus {
+    box-shadow: 0px 0px 0px 2px $black;
+    background-color: transparent;
+    border-radius: 0;
+    border: 0;
+    outline: none;
+  }
+  &:hover#{&}:hover{
+    background-color: rgba(88, 170, 187, 0.1);
+  }
+}

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

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

package/components/Expander/Expander.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SvgIcon } from '../Icons';
+import { PaletteNames } from '../../theme/palette';
+export declare enum ExpanderSize {
+    small = "small",
+    large = "large"
+}
+export declare type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
+interface ExpanderProps {
+    /** Sets the trigger title */
+    title: string;
+    /** Sets the expanded content */
+    children?: React.ReactNode;
+    /** Sets the size of the expander. Default: ExpanderSize.small */
+    size?: ExpanderSize;
+    /** Sets the background of the expander. Requires size=ExpanderSize.large. */
+    color?: ExpanderColors;
+    /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */
+    svgIcon?: SvgIcon;
+    /** Adds an icon to the expander trigger */
+    expanded?: boolean;
+    /** Removes border to the left of the content. Requires size=ExpanderSize.small. */
+    noNestedLine?: boolean;
+    /** Stick expander trigger to top of screen while scrolling down */
+    sticky?: boolean;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const Expander: React.FC<ExpanderProps>;
+export default Expander;
+//# sourceMappingURL=Expander.d.ts.map

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

@@ -0,0 +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;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAWnD,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,2CAA2C;IAC3C,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,CA0HrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}