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

package/components/Input/componentdata.json

@@ -0,0 +1,444 @@
+{
+  "props": {
+    "defaultValue": {
+      "defaultValue": null,
+      "description": "initial value for input",
+      "name": "defaultValue",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "placeholder": {
+      "defaultValue": null,
+      "description": "Text for the placeholder",
+      "name": "placeholder",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "type": {
+      "defaultValue": null,
+      "description": "HMTL Input type",
+      "name": "type",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"number\" | \"text\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"number\""
+          },
+          {
+            "value": "\"text\""
+          },
+          {
+            "value": "\"email\""
+          },
+          {
+            "value": "\"password\""
+          },
+          {
+            "value": "\"search\""
+          },
+          {
+            "value": "\"tel\""
+          },
+          {
+            "value": "\"url\""
+          }
+        ]
+      }
+    },
+    "inputId": {
+      "defaultValue": null,
+      "description": "input id",
+      "name": "inputId",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "name": {
+      "defaultValue": null,
+      "description": "Unique identifyer for the input tag",
+      "name": "name",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "width": {
+      "defaultValue": null,
+      "description": "Width of input field in characters (approximate)",
+      "name": "width",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "number"
+      }
+    },
+    "transparent": {
+      "defaultValue": null,
+      "description": "If true, the component will be transparent.",
+      "name": "transparent",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "icon": {
+      "defaultValue": null,
+      "description": "Icon to be displayed next to the input field",
+      "name": "icon",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "SvgIcon"
+      }
+    },
+    "iconRight": {
+      "defaultValue": null,
+      "description": "Places the icon to the right",
+      "name": "iconRight",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "mode": {
+      "defaultValue": null,
+      "description": "Changes the color profile of the input",
+      "name": "mode",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "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\""
+          }
+        ]
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the input",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"normal\" | \"bigform\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"normal\""
+          },
+          {
+            "value": "\"bigform\""
+          }
+        ]
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "Label of the input",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "error": {
+      "defaultValue": null,
+      "description": "Activates Error style for the input",
+      "name": "error",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "errorText": {
+      "defaultValue": null,
+      "description": "Error text to show above the component",
+      "name": "errorText",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the input field",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "readOnly": {
+      "defaultValue": null,
+      "description": "Om input feltet er readOnly",
+      "name": "readOnly",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "autocomplete": {
+      "defaultValue": null,
+      "description": "attribute autocomplete,",
+      "name": "autocomplete",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "afterLabelChildren": {
+      "defaultValue": null,
+      "description": "Component shown after label",
+      "name": "afterLabelChildren",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "belowLabelChildren": {
+      "defaultValue": null,
+      "description": "Component shown under label",
+      "name": "belowLabelChildren",
+      "parent": {
+        "fileName": "src/components/Input/Input.tsx",
+        "name": "InputProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Input/Input.tsx",
+          "name": "InputProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    }
+  }
+}

package/components/Input/index.d.ts

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

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

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

package/components/Input/index.js

@@ -0,0 +1,2 @@
+export{A as AVERAGE_CHARACTER_WIDTH_PX,a as InputTypes,I as default}from"../../Input-9ccf3867.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"../../constants-dbdea596.js";import"../../uuid-11037462.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../useBreakpoint-a74f5af5.js";import"./styles.module.scss";
+//# sourceMappingURL=index.js.map

package/components/Input/index.js.map

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

package/components/Input/styles.module.scss

@@ -0,0 +1,59 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+@import '../../scss/_input.scss';
+
+.input-wrapper {
+  @include input-wrapper;
+
+  margin: getSpacer(l) 0;
+}
+
+.input-wrapper:first-of-type {
+  margin-top: 0;
+}
+
+.input-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.content-wrapper {
+  @include content-wrapper;
+
+  padding: 0.5rem 0;
+  display: flex;
+  align-items: center;
+
+  &--with-icon {
+    padding: 1px 0;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: 0.375rem 0;
+    }
+  }
+
+  &--with-icon#{&}--bigform {
+    padding: getSpacer(2xs) 0;
+  }
+
+  &__input {
+    line-height: getSpacer(m);
+    height: getSpacer(m);
+
+    &--bigform {
+      height: 2.5rem;
+    }
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: 1.625rem;
+      height: 2.125rem;
+      font-size: $font-size-md;
+
+      &--bigform {
+        line-height: 1.75rem;
+        height: 3.5rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+export type Styles = {
+  'content-wrapper': string;
+  'content-wrapper__input': string;
+  'content-wrapper__input--bigform': string;
+  'content-wrapper__input--disabled': string;
+  'content-wrapper--bigform': string;
+  'content-wrapper--disabled': string;
+  'content-wrapper--invalid': string;
+  'content-wrapper--on-blueberry': string;
+  'content-wrapper--on-dark': string;
+  'content-wrapper--transparent': string;
+  'content-wrapper--with-icon': string;
+  'input-wrapper': string;
+  'input-wrapper__after-label-children': string;
+  'input-wrapper__label-wrapper': string;
+  'input-wrapper__label-wrapper--on-dark': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/LinkList/LinkList.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+export declare type LinkListSize = 'small' | 'medium' | 'large';
+export declare type LinkAnchorTargets = '_self' | '_blank' | '_parent';
+export declare type LinkListColors = PaletteNames;
+export declare type LinkType = React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>>;
+export declare type LinkTags = 'button' | 'a';
+export interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {
+    Link: LinkType;
+}
+interface LinkListProps {
+    /** Items in the LinkList */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the link list background color on hover. */
+    color: LinkListColors;
+    /** Toggles chevron icon on or off. */
+    chevron?: boolean;
+    /** Toggles the bottom border of the last child element. */
+    bottomBorder?: boolean;
+    /** Toggles the top border of the first child element. */
+    topBorder?: boolean;
+    /** Changes size of the LinkList. */
+    size?: LinkListSize;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
+    children: React.ReactNode;
+    color?: LinkListColors;
+    size?: LinkListSize;
+    chevron?: boolean;
+    className?: string;
+    icon?: React.ReactElement;
+    href?: string;
+    target?: LinkAnchorTargets;
+    /** HTML markup for link. Default: a */
+    htmlMarkup?: LinkTags;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const LinkList: CompoundComponent;
+export default LinkList;
+//# sourceMappingURL=LinkList.d.ts.map

package/components/LinkList/LinkList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvG,oBAAY,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AACtC,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyED,eAAO,MAAM,QAAQ,mBAuBE,CAAC;AAKxB,eAAe,QAAQ,CAAC"}