@helsenorge/designsystem-react 1.0.0-beta132 → 1.0.0-beta135

package/components/FormGroup/FormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMrE,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,SAAS,oFA6EpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMrE,oBAAY,aAAa,GAAG,UAAU,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,uFAqFpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/components/FormGroup/componentdata.json

@@ -203,6 +203,37 @@
       "type": {
         "name": "string"
       }
+    },
+    "htmlMarkup": {
+      "defaultValue": null,
+      "description": "Sets div instead of fieldset tag",
+      "name": "htmlMarkup",
+      "parent": {
+        "fileName": "src/components/FormGroup/FormGroup.tsx",
+        "name": "FormGroupProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/FormGroup/FormGroup.tsx",
+          "name": "FormGroupProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "FormGroupTags | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"fieldset\""
+          },
+          {
+            "value": "\"div\""
+          }
+        ]
+      }
     }
   }
 }

package/components/FormGroup/index.js

@@ -1,2 +1,2 @@
-export{F as FormGroup,F as default}from"../../FormGroup-88d9b47b.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Checkbox-da15e778.js";import"../../uuid-11037462.js";import"../../Check-cc284473.js";import"../../Icon-a7d7e9bc.js";import"../../_tslib-b219470a.js";import"../../constants-088e1d4a.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../Checkbox/styles.module.scss";import"../../RadioButton-f9d660f9.js";import"../RadioButton/styles.module.scss";import"../../Input-a4c88ad6.js";import"../../useBreakpoint-a74f5af5.js";import"../Input/styles.module.scss";import"../../Title-2c8d1f64.js";import"../Title/styles.module.scss";import"../../FormLayout-eea065d7.js";import"../FormLayout/styles.module.scss";
+export{F as FormGroup,F as default}from"../../FormGroup-8968fdf3.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Checkbox-745fc390.js";import"../../uuid-11037462.js";import"../../Check-244aa62e.js";import"../../Icon-cc73a763.js";import"../../_tslib-b219470a.js";import"../../constants-1371e04f.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../Checkbox/styles.module.scss";import"../../RadioButton-3e95b8fa.js";import"../RadioButton/styles.module.scss";import"../../Input-71c95249.js";import"../../useBreakpoint-a74f5af5.js";import"../Input/styles.module.scss";import"../../Title-761aecc5.js";import"../Title/styles.module.scss";import"../../FormLayout-6563dba9.js";import"../FormLayout/styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/FormGroup/styles.module.scss

@@ -4,8 +4,6 @@
 @import '../../scss/font-settings.scss';
 
 .form-group-wrapper {
-  padding-bottom: getSpacer(xl);
-
   &__title {
     &--on-dark {
       color: $white;
@@ -25,13 +23,15 @@
 }
 
 .form-group {
-  padding: getSpacer(s) 0 getSpacer(m);
+  padding: 0 0 getSpacer(m);
 
   @media (min-width: map-get($grid-breakpoints, md)) {
-    padding: getSpacer(s) 0 getSpacer(l);
+    padding: 0 0 getSpacer(l);
   }
 
   &--invalid {
+    padding-top: getSpacer(s);
+    margin-top: getSpacer(s) * -1;
     margin-left: getSpacer(xs) * -1;
     margin-right: getSpacer(xs) * -1;
     padding-left: getSpacer(2xs);
@@ -57,6 +57,7 @@
     font-size: $font-size-md;
     font-weight: 600;
     margin-bottom: getSpacer(m);
+    margin-top: 0;
 
     &--on-dark {
       color: $white;

package/components/FormLayout/index.js

@@ -1,2 +1,2 @@
-export{F as FormLayout,a as FormLayoutColumns,F as default}from"../../FormLayout-eea065d7.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../constants-088e1d4a.js";
+export{F as FormLayout,a as FormLayoutColumns,F as default}from"../../FormLayout-6563dba9.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../constants-1371e04f.js";
 //# sourceMappingURL=index.js.map

package/components/HelpBubble/HelpBubble.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export declare enum HelpBubbleVariant {
+    positionautomatic = "positionautomatic",
+    positionbelow = "positionbelow",
+    positionabove = "positionabove"
+}
+export interface HelpBubbleProps {
+    /** Name to display in the avatar. Will be truncated to the first two characters. */
+    children: React.ReactNode;
+    /** Ref for the element the HelpBubble is placed upon */
+    controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Determines the placement of the helpbubble */
+    variant?: keyof typeof HelpBubbleVariant;
+    /** Visible text on the link */
+    showBubble?: boolean;
+    /** Visible text on the link */
+    linkText?: string;
+    /** Url the link leads to */
+    linkUrl?: string;
+    /** Function is called when link is clicked */
+    onLinkClick?: () => void;
+    /** Function is called when user clicks the button */
+    onClose?: () => void;
+    /** aria-label to be passed onto Close */
+    closeAriaLabel?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const HelpBubble: React.FC<HelpBubbleProps>;
+export default HelpBubble;
+//# sourceMappingURL=HelpBubble.d.ts.map

package/components/HelpBubble/HelpBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,oBAAY,iBAAiB;IAC3B,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqNzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/HelpBubble/componentdata.json

@@ -0,0 +1,232 @@
+{
+  "props": {
+    "children": {
+      "defaultValue": null,
+      "description": "Name to display in the avatar. Will be truncated to the first two characters.",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        },
+        {
+          "fileName": "designsystem/node_modules/@types/react/index.d.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "controllerRef": {
+      "defaultValue": null,
+      "description": "Ref for the element the HelpBubble is placed upon",
+      "name": "controllerRef",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "RefObject<HTMLElement | SVGSVGElement>"
+      }
+    },
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Determines the placement of the helpbubble",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"positionautomatic\" | \"positionbelow\" | \"positionabove\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"positionautomatic\""
+          },
+          {
+            "value": "\"positionbelow\""
+          },
+          {
+            "value": "\"positionabove\""
+          }
+        ]
+      }
+    },
+    "showBubble": {
+      "defaultValue": null,
+      "description": "Visible text on the link",
+      "name": "showBubble",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "linkText": {
+      "defaultValue": null,
+      "description": "Visible text on the link",
+      "name": "linkText",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "linkUrl": {
+      "defaultValue": null,
+      "description": "Url the link leads to",
+      "name": "linkUrl",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "onLinkClick": {
+      "defaultValue": null,
+      "description": "Function is called when link is clicked",
+      "name": "onLinkClick",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "(() => void)"
+      }
+    },
+    "onClose": {
+      "defaultValue": null,
+      "description": "Function is called when user clicks the button",
+      "name": "onClose",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "(() => void)"
+      }
+    },
+    "closeAriaLabel": {
+      "defaultValue": null,
+      "description": "aria-label to be passed onto Close",
+      "name": "closeAriaLabel",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+        "name": "HelpBubbleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/HelpBubble/HelpBubble.tsx",
+          "name": "HelpBubbleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/HelpBubble/index.d.ts

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

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

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

package/components/HelpBubble/index.js

@@ -0,0 +1,2 @@
+export{a as HelpBubbleVariant,H as default}from"../../HelpBubble-8ff1a72a.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../index-d1c0552c.js";import"react";import"../../constants-1371e04f.js";import"../../AnchorLink-1e690d55.js";import"../../Icon-cc73a763.js";import"../../_tslib-b219470a.js";import"../../ArrowUpRight-6d59a425.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../useHover-b995a0e6.js";import"../AnchorLink/styles.module.scss";import"../../Close-fc92b2c4.js";import"../../X-35ea9677.js";import"../Close/styles.module.scss";import"../../useBreakpoint-a74f5af5.js";import"./styles.module.scss";
+//# sourceMappingURL=index.js.map

package/components/HelpBubble/index.js.map

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

package/components/HelpBubble/styles.module.scss

@@ -0,0 +1,81 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+@import '../AnchorLink/styles.module.scss';
+
+.helpbubble {
+  display: flex;
+  position: fixed;
+  align-items: flex-start !important;
+  max-width: 373px;
+  text-align: start;
+  font-family: inherit;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  background-color: $white;
+  z-index: 3;
+  visibility: visible;
+
+  border: getSpacer(4xs) solid $plum600;
+  border-radius: 9px;
+  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.15);
+
+  &--initial-render {
+    visibility: hidden;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+
+  &__child-wrapper {
+    display: flex;
+    width: max-content;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-wrap: anywhere;
+    row-gap: getSpacer(2xs);
+    padding: getSpacer(s) 0 getSpacer(m) getSpacer(s);
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  &__link-button {
+    all: unset;
+    @include anchorlink;
+  }
+
+  &__close-wrapper {
+    padding: getSpacer(2xs) getSpacer(2xs) 0px 0px;
+  }
+}
+
+.helpbubble-arrow {
+  width: 0;
+  height: 0;
+  position: fixed;
+  border-style: solid;
+  border-color: transparent;
+  z-index: 4;
+
+  &--over {
+    border-width: 10px 10px;
+    border-bottom-color: $white;
+    -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
+    filter: drop-shadow(0px -0.185rem 0px $plum600);
+  }
+  &--under {
+    border-width: 10px 10px;
+    border-top-color: $white;
+    -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
+    filter: drop-shadow(0px 0.2rem 0px $plum600);
+  }
+
+  &--initial-render {
+    visibility: hidden;
+  }
+}

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

@@ -0,0 +1,20 @@
+export type Styles = {
+  anchorlink: string;
+  anchorlink__icon: string;
+  helpbubble: string;
+  'helpbubble__child-wrapper': string;
+  'helpbubble__close-wrapper': string;
+  'helpbubble__link-button': string;
+  'helpbubble__link-button__icon': string;
+  'helpbubble--initial-render': string;
+  'helpbubble-arrow': string;
+  'helpbubble-arrow--initial-render': string;
+  'helpbubble-arrow--over': string;
+  'helpbubble-arrow--under': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HelpBubbleExample/HelpBubbleExample.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HelpBubbleProps } from '../HelpBubble/HelpBubble';
+declare const HelpBubbleExample: React.FC<HelpBubbleProps>;
+export default HelpBubbleExample;
+//# sourceMappingURL=HelpBubbleExample.d.ts.map

package/components/HelpBubbleExample/HelpBubbleExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpBubbleExample.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAmB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEvE,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BhD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}