@helsenorge/designsystem-react 1.0.0-beta103 → 1.0.0-beta107

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

@@ -1,34 +1,34 @@
-export type Styles = {
-  button: string;
-  button__content: string;
-  'button__content--borderless': string;
-  'button__content--danger': string;
-  'button__content--ellipsis': string;
-  'button__content--fill': string;
-  'button__content--fluid': string;
-  'button__content--inverted': string;
-  'button__content--large': string;
-  'button__content--large-fluid': string;
-  'button__content--warning': string;
-  'button__content--with-icon': string;
-  'button__left-fluid-content': string;
-  'button__left-fluid-content--large': string;
-  'button__left-fluid-content--with-icon': string;
-  'button--borderless': string;
-  'button--danger': string;
-  'button--ellipsis': string;
-  'button--fill': string;
-  'button--fluid': string;
-  'button--inverted': string;
-  'button--large': string;
-  'button--outline': string;
-  'button--warning': string;
-  'button--with-icon': string;
-  'content-wrapper': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  button: string;
+  button__content: string;
+  'button__content--borderless': string;
+  'button__content--danger': string;
+  'button__content--ellipsis': string;
+  'button__content--fill': string;
+  'button__content--fluid': string;
+  'button__content--inverted': string;
+  'button__content--large': string;
+  'button__content--large-fluid': string;
+  'button__content--warning': string;
+  'button__content--with-icon': string;
+  'button__left-fluid-content': string;
+  'button__left-fluid-content--large': string;
+  'button__left-fluid-content--with-icon': string;
+  'button--borderless': string;
+  'button--danger': string;
+  'button--ellipsis': string;
+  'button--fill': string;
+  'button--fluid': string;
+  'button--inverted': string;
+  'button--large': string;
+  'button--outline': string;
+  'button--warning': string;
+  'button--with-icon': string;
+  'content-wrapper': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ButtonWithModal/ButtonWithModal.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { ModalProps } from '../Modal/Modal';
-interface ModalWithButtonProps extends ModalProps {
-    /** Text of the button */
-    buttonText: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-declare const ModalWithButton: React.ForwardRefExoticComponent<ModalWithButtonProps & React.RefAttributes<HTMLElement>>;
-export default ModalWithButton;
+import React from 'react';
+import { ModalProps } from '../Modal/Modal';
+interface ModalWithButtonProps extends ModalProps {
+    /** Text of the button */
+    buttonText: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const ModalWithButton: React.ForwardRefExoticComponent<ModalWithButtonProps & React.RefAttributes<HTMLElement>>;
+export default ModalWithButton;
 //# sourceMappingURL=ButtonWithModal.d.ts.map

package/components/ButtonWithModal/index.d.ts

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

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import{_ as t}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import s,{useState as e}from"react";import{B as o}from"../../Button-d5147e38.js";import{M as r}from"../../Modal-ad02991b.js";import"../../_tslib-51c8a283.js";import"../../constants-ad6c82db.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../Icon-89da8de4.js";import"../../Loader-fa16a352.js";import"../../index-9b84fabc.js";import"../../uuid-fe7442b7.js";import"../Loader/styles.module.scss";import"../../useHover-9710204a.js";import"../../useWindowSize-750f9b68.js";import"../Button/styles.module.scss";import"../Modal/styles.module.scss";import"../../AlertSignFill-e607ff43.js";import"../../useIsVisible-a1f67a11.js";import"../../Title-af53f589.js";import"../Title/styles.module.scss";import"../../Close-35ad7d35.js";import"../Close/styles.module.scss";import"../../useBreakpoint-552af2b9.js";import"react-dom";var i=s.forwardRef((function(i,m){var a=e(!1),l=t(a,2),d=l[0],p=l[1];return s.createElement("div",{"data-testid":i.testId},s.createElement(o,{onClick:function(){return p(!0)}},i.buttonText),d&&s.createElement(r,Object.assign({},i,{onClose:function(){return p(!1)}})))}));export default i;
+import{_ as t}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import s,{useState as o}from"react";import{B as e}from"../../Button-7e82091f.js";import{M as r}from"../../Modal-ff546be0.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../Loader-bc13d060.js";import"../../index-9b84fabc.js";import"../../uuid-fe7442b7.js";import"../Loader/styles.module.scss";import"../../useHover-9710204a.js";import"../../useWindowSize-750f9b68.js";import"../Button/styles.module.scss";import"../Icons/Icon.js";import"../Modal/styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../useIsVisible-a1f67a11.js";import"../../Title-9df559dd.js";import"../Title/styles.module.scss";import"../../Close-d81081c8.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../useBreakpoint-552af2b9.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";var i=s.forwardRef((function(i,m){var l=o(!1),p=t(l,2),n=p[0],a=p[1];return s.createElement("div",{"data-testid":i.testId},s.createElement(e,{onClick:function(){return a(!0)}},i.buttonText),n&&s.createElement(r,Object.assign({},i,{onClose:function(){return a(!1)}})))}));export default i;
 //# sourceMappingURL=index.js.map

package/components/Checkbox/Checkbox.d.ts

@@ -1,31 +1,31 @@
-import React from 'react';
-import { FormMode, FormVariant } from '../../constants';
-export interface CheckboxProps {
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Sets checkbox as checked */
-    checked?: boolean;
-    /** Disables the checkbox */
-    disabled?: boolean;
-    /** The label text next to the checkbox */
-    label: string;
-    /** input id of the checkbox */
-    inputId?: string;
-    /** Changes the visuals of the checkbox */
-    mode?: keyof typeof FormMode;
-    /** Unique identifyer for the input tag */
-    name?: string;
-    /** Return value for the checkbox */
-    value?: string;
-    /** Changes the visuals of the checkbox */
-    variant?: keyof typeof FormVariant;
-    /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */
-    error?: boolean;
-    /** Error text to show above the component */
-    errorText?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;
+import React from 'react';
+import { FormMode, FormVariant } from '../../constants';
+export interface CheckboxProps {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets checkbox as checked */
+    checked?: boolean;
+    /** Disables the checkbox */
+    disabled?: boolean;
+    /** The label text next to the checkbox */
+    label: string;
+    /** input id of the checkbox */
+    inputId?: string;
+    /** Changes the visuals of the checkbox */
+    mode?: keyof typeof FormMode;
+    /** Unique identifyer for the input tag */
+    name?: string;
+    /** Return value for the checkbox */
+    value?: string;
+    /** Changes the visuals of the checkbox */
+    variant?: keyof typeof FormVariant;
+    /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

package/components/Checkbox/index.d.ts

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

package/components/Checkbox/index.js

@@ -1,2 +1,2 @@
-import{C as o}from"../../Checkbox-798282e4.js";export{C as Checkbox,C as default}from"../../Checkbox-798282e4.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-fe7442b7.js";import"../../Check-6291ad09.js";import"../../Icon-89da8de4.js";import"../../_tslib-51c8a283.js";import"../../constants-ad6c82db.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"./styles.module.scss";
+import{C as o}from"../../Checkbox-f2418dc5.js";export{C as Checkbox,C as default}from"../../Checkbox-f2418dc5.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-fe7442b7.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"./styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/Checkbox/styles.module.scss

@@ -1,204 +1,204 @@
-@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: 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);
-    }
-  }
-}
-
-.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-width: auto !important;
-    min-height: auto !important;
-    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;
-      }
-    }
-  }
-}
+@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: 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);
+    }
+  }
+}
+
+.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-width: auto !important;
+    min-height: auto !important;
+    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

@@ -1,26 +1,26 @@
-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--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;
+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--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;