@helsenorge/designsystem-react 1.0.0-beta90 → 1.0.0-beta91

package/components/RadioButton/componentdata.json

@@ -0,0 +1,265 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "defaultChecked": {
+      "defaultValue": null,
+      "description": "Sets radioButton as checked by default",
+      "name": "defaultChecked",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the radioButton",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "The label text next to the radioButton",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "inputid": {
+      "defaultValue": null,
+      "description": "input id of the radioButton",
+      "name": "inputid",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "mode": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the radioButton",
+      "name": "mode",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"OnWhite\" | \"OnGrey\" | \"OnBlueberry\" | \"OnDark\" | \"OnError\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"OnWhite\""
+          },
+          {
+            "value": "\"OnGrey\""
+          },
+          {
+            "value": "\"OnBlueberry\""
+          },
+          {
+            "value": "\"OnDark\""
+          },
+          {
+            "value": "\"OnError\""
+          }
+        ]
+      }
+    },
+    "name": {
+      "defaultValue": null,
+      "description": "Unique identifyer for the input tag",
+      "name": "name",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "value": {
+      "defaultValue": null,
+      "description": "Return value for the radioButton",
+      "name": "value",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the radioButton",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "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 radioButton - This is can be true while errorText is empty, when in a FormGroup",
+      "name": "error",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "errorText": {
+      "defaultValue": null,
+      "description": "Error text to show above the component",
+      "name": "errorText",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/RadioButton/RadioButton.tsx",
+        "name": "RadioButtonProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/RadioButton.tsx",
+          "name": "RadioButtonProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/RadioButton/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,eAAe,WAAW,CAAC"}

package/components/RadioButton/index.js

@@ -0,0 +1,2 @@
+import{R as o}from"../../RadioButton-84ca988e.js";export{R as default}from"../../RadioButton-84ca988e.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-8870ab4b.js";import"./styles.module.scss";import"../../constants-a4b0b501.js";
+//# sourceMappingURL=index.js.map

package/components/RadioButton/index.js.map

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

package/components/RadioButton/styles.module.scss

@@ -0,0 +1,236 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.radio-button-errors {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  color: $cherry500;
+  margin-top: 0;
+}
+
+.radio-button-wrapper {
+  cursor: pointer;
+  margin: getSpacer(s) 0;
+
+  &--with-error {
+    padding: getSpacer(s) getSpacer(xs) getSpacer(m);
+    background-color: $cherry50;
+    margin-left: -0.75rem;
+    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;
+  }
+}
+
+.radio-button-wrapper:first-of-type {
+  margin-top: 0;
+}
+
+.radio-button-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.radio-button-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);
+    }
+  }
+}
+
+.radio-button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10rem;
+  margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) getSpacer(3xs);
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: auto !important;
+  min-height: auto !important;
+  color: $neutral700;
+  box-shadow: 0 0 0 getSpacer(3xs);
+
+  &:checked {
+    color: $blueberry500;
+
+    &:hover {
+      background-color: $blueberry50;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 getSpacer(2xs);
+    color: $black;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 getSpacer(2xs);
+    background-color: $neutral100;
+  }
+
+  :active > & {
+    box-shadow: 0 0 0 getSpacer(2xs);
+    color: $black;
+  }
+
+  &--on-blueberry {
+    color: $blueberry500;
+
+    :hover > & {
+      background-color: $blueberry100;
+    }
+  }
+
+  &--on-dark {
+    color: $neutral200;
+
+    &:hover {
+      background-color: $inverted-hover;
+      box-shadow: 0 0 0 getSpacer(2xs);
+    }
+
+    &:checked {
+      color: $blueberry200;
+
+      &:hover {
+        background-color: $inverted-hover;
+      }
+    }
+
+    :active > & {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      color: $white;
+    }
+
+    &:focus {
+      color: $white;
+    }
+  }
+
+  &--invalid {
+    color: $cherry500;
+
+    &:hover {
+      background-color: $cherry100;
+    }
+
+    &:checked {
+      color: $cherry500;
+
+      &:hover {
+        background-color: $cherry100;
+      }
+    }
+
+    &:active {
+      color: $black;
+    }
+
+    &:focus {
+      color: $black;
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+
+    color: $neutral400;
+    &:checked {
+      color: $neutral400;
+
+      &:hover {
+        box-shadow: 0 0 0 getSpacer(3xs);
+        background-color: transparent;
+      }
+    }
+    &:hover {
+      box-shadow: 0 0 0 getSpacer(3xs);
+      background-color: transparent;
+    }
+
+    &:active {
+      color: $neutral400;
+    }
+  }
+
+  // :before er dot i RadioButton
+  &:checked::before {
+    content: '';
+    display: flex;
+    background-color: $blueberry500;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 10rem;
+  }
+
+  &--on-dark:checked::before {
+    background-color: $blueberry200;
+  }
+
+  &--disabled:checked::before {
+    box-shadow: 0 0 0 0;
+    background-color: $neutral400;
+    color: $neutral400;
+  }
+
+  &--invalid:checked::before {
+    background-color: $cherry500;
+  }
+}

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

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

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { HTMLTextareaProps, FormMode } from '../../constants';
+interface TextareaProps extends HTMLTextareaProps {
+    /** initial value for textarea */
+    defaultValue?: string;
+    /** max character limit in textarea  */
+    maxCharacters?: number;
+    /** The text is displayed in the end of the text-counter */
+    maxText?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** If true, the component will have a bottom margin. */
+    marginBottom?: boolean;
+    /** If true, the component will be transparent. */
+    transparent?: boolean;
+    /** Changes the visuals of the textarea */
+    mode?: keyof typeof FormMode;
+    /** Label of the input */
+    label?: string;
+    /** max rows */
+    maxRows?: number;
+    /** min rows */
+    minRows?: number;
+    /** auto-grows until maxRows */
+    grow?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;
+//# sourceMappingURL=Textarea.d.ts.map

package/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,2FAiHZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}