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

package/components/Loader/styles.module.scss

@@ -1,194 +1,194 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import 'bootstrap/scss/mixins/_screen-reader.scss';
-
-@mixin keyframes($name) {
-  @keyframes #{$name} {
-    @content;
-  }
-}
-
-@mixin animate($name, $animation, $duration, $times) {
-  animation: $animation $duration $times;
-  animation-name: $name;
-}
-
-@mixin loaderDotScale($name, $scale-start, $scale-end) {
-  @include keyframes($name) {
-    0% {
-      transform: scale($scale-start);
-    }
-    100% {
-      transform: scale($scale-end);
-    }
-  }
-  @include animate($name, scale, 0.6s, infinite);
-}
-
-@mixin loaderDotTranslate($name, $distance) {
-  @include keyframes($name) {
-    0% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate($distance, 0);
-    }
-  }
-  @include animate($name, translate, 0.6s, infinite);
-}
-
-.loader-wrapper {
-  &--center {
-    text-align: center;
-  }
-
-  &--inline {
-    align-self: center;
-    padding-left: getSpacer(2xs);
-  }
-
-  &--overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &--overlay-screen {
-    z-index: 9999;
-    background: $transparentGrey;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-  &--overlay-parent {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: $transparentGrey;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-.loader {
-  display: inline-block;
-  position: relative;
-  width: 8 * 5px;
-  height: 8px;
-
-  &--small {
-    width: 12 * 5px;
-    height: 12px;
-  }
-
-  &--medium {
-    width: 18 * 5px;
-    height: 18px;
-  }
-
-  &--large {
-    width: 24 * 5px;
-    height: 24px;
-  }
-
-  &__hidden-text {
-    @include sr-only();
-  }
-
-  &__dot {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    background-color: $blueberry500;
-    border-radius: 50%;
-
-    &--small {
-      width: 12px;
-      height: 12px;
-    }
-    &--medium {
-      width: 18px;
-      height: 18px;
-    }
-    &--large {
-      width: 24px;
-      height: 24px;
-    }
-
-    &--banana {
-      background-color: $banana500;
-    }
-    &--cherry {
-      background-color: $cherry500;
-    }
-    &--kiwi {
-      background-color: $kiwi500;
-    }
-    &--neutral {
-      background-color: $neutral500;
-    }
-    &--plum {
-      background-color: $plum500;
-    }
-    &--black {
-      background-color: $black;
-    }
-    &--white {
-      background-color: $white;
-    }
-
-    // Sets a form of easing animation curve
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-    // Scales up the first dot
-    &:nth-child(1) {
-      @include loaderDotScale(scale-regular, 0, 1);
-    }
-
-    // Translates the dots rightwards depending on size
-    &:nth-child(2),
-    &:nth-child(3) {
-      @include loaderDotTranslate(translate-tiny, 16px);
-    }
-    &:nth-child(3) {
-      left: 16px;
-    }
-    &--small:nth-child(2),
-    &--small:nth-child(3) {
-      @include loaderDotTranslate(translate-small, 24px);
-    }
-    &--medium:nth-child(2),
-    &--medium:nth-child(3) {
-      @include loaderDotTranslate(translate-medium, 36px);
-    }
-    &--large:nth-child(2),
-    &--large:nth-child(3) {
-      @include loaderDotTranslate(translate-large, 48px);
-    }
-    &--small:nth-child(3) {
-      left: 24px;
-    }
-    &--medium:nth-child(3) {
-      left: 36px;
-    }
-    &--large:nth-child(3) {
-      left: 48px;
-    }
-
-    // Scales down the last dot
-    &:nth-child(4) {
-      left: 32px;
-      @include loaderDotScale(scale-reverse, 1, 0);
-    }
-    &--small:nth-child(4) {
-      left: 48px;
-    }
-    &--medium:nth-child(4) {
-      left: 72px;
-    }
-    &--large:nth-child(4) {
-      left: 96px;
-    }
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import 'bootstrap/scss/mixins/_screen-reader.scss';
+
+@mixin keyframes($name) {
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+@mixin animate($name, $animation, $duration, $times) {
+  animation: $animation $duration $times;
+  animation-name: $name;
+}
+
+@mixin loaderDotScale($name, $scale-start, $scale-end) {
+  @include keyframes($name) {
+    0% {
+      transform: scale($scale-start);
+    }
+    100% {
+      transform: scale($scale-end);
+    }
+  }
+  @include animate($name, scale, 0.6s, infinite);
+}
+
+@mixin loaderDotTranslate($name, $distance) {
+  @include keyframes($name) {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate($distance, 0);
+    }
+  }
+  @include animate($name, translate, 0.6s, infinite);
+}
+
+.loader-wrapper {
+  &--center {
+    text-align: center;
+  }
+
+  &--inline {
+    align-self: center;
+    padding-left: getSpacer(2xs);
+  }
+
+  &--overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--overlay-screen {
+    z-index: 9999;
+    background: $transparentGrey;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  &--overlay-parent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: $transparentGrey;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.loader {
+  display: inline-block;
+  position: relative;
+  width: 8 * 5px;
+  height: 8px;
+
+  &--small {
+    width: 12 * 5px;
+    height: 12px;
+  }
+
+  &--medium {
+    width: 18 * 5px;
+    height: 18px;
+  }
+
+  &--large {
+    width: 24 * 5px;
+    height: 24px;
+  }
+
+  &__hidden-text {
+    @include sr-only();
+  }
+
+  &__dot {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: $blueberry500;
+    border-radius: 50%;
+
+    &--small {
+      width: 12px;
+      height: 12px;
+    }
+    &--medium {
+      width: 18px;
+      height: 18px;
+    }
+    &--large {
+      width: 24px;
+      height: 24px;
+    }
+
+    &--banana {
+      background-color: $banana500;
+    }
+    &--cherry {
+      background-color: $cherry500;
+    }
+    &--kiwi {
+      background-color: $kiwi500;
+    }
+    &--neutral {
+      background-color: $neutral500;
+    }
+    &--plum {
+      background-color: $plum500;
+    }
+    &--black {
+      background-color: $black;
+    }
+    &--white {
+      background-color: $white;
+    }
+
+    // Sets a form of easing animation curve
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    // Scales up the first dot
+    &:nth-child(1) {
+      @include loaderDotScale(scale-regular, 0, 1);
+    }
+
+    // Translates the dots rightwards depending on size
+    &:nth-child(2),
+    &:nth-child(3) {
+      @include loaderDotTranslate(translate-tiny, 16px);
+    }
+    &:nth-child(3) {
+      left: 16px;
+    }
+    &--small:nth-child(2),
+    &--small:nth-child(3) {
+      @include loaderDotTranslate(translate-small, 24px);
+    }
+    &--medium:nth-child(2),
+    &--medium:nth-child(3) {
+      @include loaderDotTranslate(translate-medium, 36px);
+    }
+    &--large:nth-child(2),
+    &--large:nth-child(3) {
+      @include loaderDotTranslate(translate-large, 48px);
+    }
+    &--small:nth-child(3) {
+      left: 24px;
+    }
+    &--medium:nth-child(3) {
+      left: 36px;
+    }
+    &--large:nth-child(3) {
+      left: 48px;
+    }
+
+    // Scales down the last dot
+    &:nth-child(4) {
+      left: 32px;
+      @include loaderDotScale(scale-reverse, 1, 0);
+    }
+    &--small:nth-child(4) {
+      left: 48px;
+    }
+    &--medium:nth-child(4) {
+      left: 72px;
+    }
+    &--large:nth-child(4) {
+      left: 96px;
+    }
+  }
+}

package/components/Logo/Logo.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-import { PaletteNames } from '../../theme/palette';
-declare type LogoColor = PaletteNames;
-interface LogoProps {
-    /** Changes the size of the logo. */
-    size?: number;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /**	Changes the color of the logo. */
-    color?: LogoColor;
-    /** Changes to the byline variant of the logo. */
-    byline?: boolean;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-declare function Logo(props: LogoProps): JSX.Element;
-export default Logo;
+/// <reference types="react" />
+import { PaletteNames } from '../../theme/palette';
+declare type LogoColor = PaletteNames;
+interface LogoProps {
+    /** Changes the size of the logo. */
+    size?: number;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /**	Changes the color of the logo. */
+    color?: LogoColor;
+    /** Changes to the byline variant of the logo. */
+    byline?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare function Logo(props: LogoProps): JSX.Element;
+export default Logo;
 //# sourceMappingURL=Logo.d.ts.map

package/components/Logo/index.d.ts

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

package/components/Modal/Modal.d.ts

@@ -1,70 +1,70 @@
-import React from 'react';
-import { ZIndex } from '../../constants';
-export declare enum ModalVariants {
-    normal = "normal",
-    warning = "warning",
-    error = "error",
-    success = "success",
-    image = "image"
-}
-export declare enum ModalSize {
-    large = "large",
-    medium = "medium"
-}
-export interface ModalProps {
-    /** Title of the modal */
-    title: string;
-    /** id of the modal title */
-    titleId?: string;
-    /** Description of the modal */
-    description?: string;
-    /** Changes the visual representation of the modal. Description will not render if children prop is provided */
-    variant?: keyof typeof ModalVariants;
-    /** Change width of the modal (default: large) */
-    size?: keyof typeof ModalSize;
-    /** Icon displayed in title */
-    icon?: React.ReactElement;
-    /** Hides the close button */
-    noCloseButton?: boolean;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-    /**Primary button text */
-    primaryButtonText?: string;
-    /**Secondary button text */
-    secondaryButtonText?: string;
-    /** Sets the aria-label of the modal */
-    ariaLabel?: string;
-    /** Sets the aria-labelledby of the modal */
-    ariaLabelledBy?: string;
-    /** Close button aria-label */
-    ariaLabelCloseBtn?: string;
-    /** Alternative component to modal */
-    children?: React.ReactNode;
-    /** Component shown after title */
-    afterTitleChildren?: React.ReactNode;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Customize the z-index of the modal */
-    zIndex?: number;
-    /** Function is called when user clicks primary button */
-    onSuccess?: () => void;
-    /** Function is called when user clicks secondary button */
-    onClose?: () => void;
-    /** When enabled the component will be rendered in the bottom of document.body */
-    printable?: boolean;
-    /** When enabled the events for closing the modal won't be added */
-    disableCloseEvents?: boolean;
-}
-declare const Modal: {
-    (props: ModalProps): JSX.Element;
-    defaultProps: {
-        variant: ModalVariants;
-        primaryButtonText: string;
-        titleId: string;
-        className: string;
-        size: ModalSize;
-        zIndex: ZIndex;
-    };
-};
-export default Modal;
+import React from 'react';
+import { ZIndex } from '../../constants';
+export declare enum ModalVariants {
+    normal = "normal",
+    warning = "warning",
+    error = "error",
+    success = "success",
+    image = "image"
+}
+export declare enum ModalSize {
+    large = "large",
+    medium = "medium"
+}
+export interface ModalProps {
+    /** Title of the modal */
+    title: string;
+    /** id of the modal title */
+    titleId?: string;
+    /** Description of the modal */
+    description?: string;
+    /** Changes the visual representation of the modal. Description will not render if children prop is provided */
+    variant?: keyof typeof ModalVariants;
+    /** Change width of the modal (default: large) */
+    size?: keyof typeof ModalSize;
+    /** Icon displayed in title */
+    icon?: React.ReactElement;
+    /** Hides the close button */
+    noCloseButton?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /**Primary button text */
+    primaryButtonText?: string;
+    /**Secondary button text */
+    secondaryButtonText?: string;
+    /** Sets the aria-label of the modal */
+    ariaLabel?: string;
+    /** Sets the aria-labelledby of the modal */
+    ariaLabelledBy?: string;
+    /** Close button aria-label */
+    ariaLabelCloseBtn?: string;
+    /** Alternative component to modal */
+    children?: React.ReactNode;
+    /** Component shown after title */
+    afterTitleChildren?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Customize the z-index of the modal */
+    zIndex?: number;
+    /** Function is called when user clicks primary button */
+    onSuccess?: () => void;
+    /** Function is called when user clicks secondary button */
+    onClose?: () => void;
+    /** When enabled the component will be rendered in the bottom of document.body */
+    printable?: boolean;
+    /** When enabled the events for closing the modal won't be added */
+    disableCloseEvents?: boolean;
+}
+declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    defaultProps: {
+        variant: ModalVariants;
+        primaryButtonText: string;
+        titleId: string;
+        className: string;
+        size: ModalSize;
+        zIndex: ZIndex;
+    };
+};
+export default Modal;
 //# sourceMappingURL=Modal.d.ts.map

package/components/Modal/__mocks__/IntersectionObserver.d.ts

@@ -1,6 +1,6 @@
-declare class IntersectionObserver {
-    observe(): void;
-    unobserve(): void;
-}
-export default IntersectionObserver;
+declare class IntersectionObserver {
+    observe(): void;
+    unobserve(): void;
+}
+export default IntersectionObserver;
 //# sourceMappingURL=IntersectionObserver.d.ts.map

package/components/Modal/index.d.ts

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

package/components/Modal/index.js

@@ -1,2 +1,2 @@
-import{M as s}from"../../Modal-3c7f9f93.js";export{b as ModalSize,a as ModalVariants,M as default}from"../../Modal-3c7f9f93.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-397ff5a8.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../grid-11a70eb7.js";import"../../Icon-537c6b21.js";import"../../Loader-bc13d060.js";import"../../uuid-fe7442b7.js";import"../Loader/styles.module.scss";import"../../useHover-9710204a.js";import"../../useWindowSize-750f9b68.js";import"../Button/styles.module.scss";import"./styles.module.scss";import"../../AlertSignFill-e607ff43.js";import"../../useIsVisible-a1f67a11.js";import"../../Title-9df559dd.js";import"../Title/styles.module.scss";import"../../Close-060173de.js";import"../Close/styles.module.scss";import"../../useBreakpoint-552af2b9.js";import"react-dom";
+import{M as s}from"../../Modal-ff546be0.js";export{b as ModalSize,a as ModalVariants,M as default}from"../../Modal-ff546be0.js";import"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-7e82091f.js";import"../../_tslib-51c8a283.js";import"../../constants-eb74321e.js";import"../../color-a10c7892.js";import"../../index-0e78dfa0.js";import"../../grid-11a70eb7.js";import"../../Loader-bc13d060.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"./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";
 //# sourceMappingURL=index.js.map