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

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 @@
+export{C as Checkbox,C as default}from"../../Checkbox-b0815d04.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"../../uuid-11037462.js";import"../../Check-fdf95f67.js";import"../../Icon-d69d65b3.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../useUuid-3b1e73f2.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.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,209 @@
+@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(2xs) 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(2xs) 0 getSpacer(2xs) 0;
+  }
+}
+
+.checkbox-wrapper:first-of-type {
+  margin-top: 0;
+}
+
+.checkbox-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+
+  &__text {
+    display: flex;
+  }
+
+  @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(4xs) getSpacer(s) getSpacer(4xs) getSpacer(4xs);
+    height: 1.625rem;
+    width: 1.625rem;
+    min-height: 1.625rem;
+    min-width: 1.625rem;
+    color: $neutral700;
+    box-shadow: 0 0 0 getSpacer(4xs);
+
+    :hover > & {
+      box-shadow: 0 0 0 getSpacer(3xs);
+      background-color: $neutral100;
+    }
+
+    :active > & {
+      box-shadow: 0 0 0 getSpacer(3xs);
+      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(4xs);
+        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(3xs);
+      color: $black;
+
+      &--on-dark {
+        color: $white;
+      }
+
+      &--invalid {
+        color: $black;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+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__text': 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,14 @@
+/// <reference types="react" />
+export interface CloseProps {
+    /** Keeps the icon small for all screen sizes */
+    small?: boolean;
+    /** 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":";AASA,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,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,UAAW,UAAU,KAAG,WAkBlC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Close/componentdata.json

@@ -0,0 +1,80 @@
+{
+  "props": {
+    "small": {
+      "defaultValue": null,
+      "description": "Keeps the icon small for all screen sizes",
+      "name": "small",
+      "parent": {
+        "fileName": "designsystem/src/components/Close/Close.tsx",
+        "name": "CloseProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/Close/Close.tsx",
+          "name": "CloseProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "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 @@
+export{C as default}from"../../Close-08d48540.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../palette-f206f488.js";import"../../Icon-d69d65b3.js";import"../../_tslib-b219470a.js";import"../../index-d1c0552c.js";import"../../constants-dbdea596.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../X-867957f2.js";import"./styles.module.scss";import"../../useBreakpoint-a74f5af5.js";import"../../grid-c105cad1.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,36 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_breakpoints.scss';
+.close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @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);
+  }
+  &--small {
+    height: auto;
+    width: auto;
+  }
+}

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

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