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

package/components/Textarea/componentdata.json

@@ -0,0 +1,527 @@
+{
+  "props": {
+    "defaultValue": {
+      "defaultValue": null,
+      "description": "initial value for textarea",
+      "name": "defaultValue",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "maxCharacters": {
+      "defaultValue": null,
+      "description": "max character limit in textarea",
+      "name": "maxCharacters",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "number"
+      }
+    },
+    "maxText": {
+      "defaultValue": null,
+      "description": "The text is displayed in the end of the text-counter",
+      "name": "maxText",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "marginBottom": {
+      "defaultValue": null,
+      "description": "If true, the component will have a bottom margin.",
+      "name": "marginBottom",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "transparent": {
+      "defaultValue": null,
+      "description": "If true, the component will be transparent.",
+      "name": "transparent",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "mode": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the textarea",
+      "name": "mode",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "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\""
+          }
+        ]
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "Label of the input",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "maxRows": {
+      "defaultValue": null,
+      "description": "max rows",
+      "name": "maxRows",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "number"
+      }
+    },
+    "minRows": {
+      "defaultValue": null,
+      "description": "min rows",
+      "name": "minRows",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "number"
+      }
+    },
+    "grow": {
+      "defaultValue": null,
+      "description": "auto-grows until maxRows",
+      "name": "grow",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "errorText": {
+      "defaultValue": null,
+      "description": "Error text to show above the component",
+      "name": "errorText",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "autoFocus": {
+      "defaultValue": null,
+      "description": "",
+      "name": "autoFocus",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "",
+      "name": "disabled",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "form": {
+      "defaultValue": null,
+      "description": "",
+      "name": "form",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "formNoValidate": {
+      "defaultValue": null,
+      "description": "",
+      "name": "formNoValidate",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "formTarget": {
+      "defaultValue": null,
+      "description": "",
+      "name": "formTarget",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "name": {
+      "defaultValue": null,
+      "description": "",
+      "name": "name",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "id": {
+      "defaultValue": null,
+      "description": "",
+      "name": "id",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "autocomplete": {
+      "defaultValue": null,
+      "description": "",
+      "name": "autocomplete",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"off\" | \"on\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"off\""
+          },
+          {
+            "value": "\"on\""
+          }
+        ]
+      }
+    },
+    "placeholder": {
+      "defaultValue": null,
+      "description": "",
+      "name": "placeholder",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "readonly": {
+      "defaultValue": null,
+      "description": "",
+      "name": "readonly",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "required": {
+      "defaultValue": null,
+      "description": "",
+      "name": "required",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "spellcheck": {
+      "defaultValue": null,
+      "description": "",
+      "name": "spellcheck",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"true\" | \"default\" | \"false\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"true\""
+          },
+          {
+            "value": "\"default\""
+          },
+          {
+            "value": "\"false\""
+          }
+        ]
+      }
+    },
+    "aria-invalid": {
+      "defaultValue": null,
+      "description": "",
+      "name": "aria-invalid",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLTextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLTextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    }
+  }
+}

package/components/Textarea/index.d.ts

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

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

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

package/components/Textarea/index.js

@@ -0,0 +1,2 @@
+import{T as s}from"../../Textarea-9c91191a.js";export{T as default}from"../../Textarea-9c91191a.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"../../_tslib-51c8a283.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../constants-a4b0b501.js";import"../../uuid-8870ab4b.js";
+//# sourceMappingURL=index.js.map

package/components/Textarea/index.js.map

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

package/components/Textarea/styles.module.scss

@@ -0,0 +1,154 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+
+.textarea {
+  width: 100%;
+  line-height: 0;
+
+  &__error-text {
+    font-size: $font-size-sm;
+    line-height: $font-size-sm;
+    font-weight: 600;
+    color: $cherry500;
+    margin-top: 0;
+  }
+
+  &--gutterBottom {
+    margin-bottom: getSpacer(s);
+  }
+
+  &__label {
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(2xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--OnDark {
+      color: $white;
+    }
+  }
+
+  &__input {
+    line-height: 26px;
+    font-size: $font-size-sm;
+    width: 100%;
+    padding: 16px;
+    resize: none;
+    border: $neutral700 2px solid;
+    outline: none;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: 28px;
+      font-size: $font-size-md;
+    }
+
+    &:hover {
+      background: $neutral50;
+      border-color: $neutral700;
+      box-shadow: 0px 0px 0px 1px $neutral700;
+    }
+    &:focus {
+      background: $white;
+      border-radius: 0;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background: $neutral50;
+      border-color: $neutral500;
+      color: $neutral500;
+    }
+    &::placeholder {
+      color: $neutral500;
+    }
+
+    &--OnBlueberry {
+      border-color: $blueberry500;
+
+      &:hover {
+        background: $blueberry50;
+        box-shadow: 0px 0px 0px 1px $blueberry500;
+        border-color: $blueberry500;
+      }
+
+      &:focus {
+        background: $white;
+        border-color: $neutral900;
+        box-shadow: 0px 0px 0px 2px $neutral900;
+      }
+      &:disabled {
+        background: $neutral50;
+        border-color: $neutral500;
+        color: $neutral500;
+      }
+    }
+    &--OnDark {
+      border-color: $blueberry900;
+      &:hover {
+        background: $blueberry50;
+        border-color: $blueberry900;
+        box-shadow: 0px 0px 0px 1px $blueberry900;
+      }
+      &:focus {
+        background: $white;
+        border-color: $neutral900;
+        box-shadow: 0px 0px 0px 2px $neutral900;
+      }
+      &:disabled {
+        background: $neutral50;
+      }
+    }
+    &--invalid {
+      border-color: $cherry500;
+      &:focus {
+        border-color: $cherry500;
+        box-shadow: 0px 0px 0px 2px $cherry500;
+      }
+    }
+
+    &--transparent {
+      background: transparent;
+      &:hover {
+        background: transparent;
+      }
+      &:focus {
+        background: $white;
+      }
+    }
+  }
+
+  &__counter-wrapper {
+    display: flex;
+    justify-content: end;
+    padding-top: getSpacer(xs);
+    padding-right: 2px;
+    font-size: $font-size-sm;
+    line-height: 28px;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: 30px;
+      font-size: $font-size-md;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    &--OnDark {
+      color: $white;
+    }
+    &--invalid {
+      color: $cherry500;
+      font-weight: 600;
+    }
+  }
+}