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

package/components/Slider/styles.module.scss

@@ -1,85 +1,85 @@
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-
-.slider {
-  width: 100%;
-  padding: getSpacer(m) 0;
-  position: relative;
-  outline: none !important;
-
-  &__track-wrapper {
-    width: 100%;
-    cursor: pointer;
-
-    &--disabled {
-      cursor: default;
-    }
-  }
-
-  &__track {
-    height: 2px;
-    background-color: $black;
-    width: 100%;
-    position: relative;
-    top: 1rem;
-
-    &--disabled {
-      background-color: $neutral600;
-    }
-  }
-
-  &__trigger {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 2rem;
-    height: 2rem;
-    background-color: $white;
-    border: 0.15rem solid $black;
-    border-radius: 1rem;
-    position: relative;
-    top: -0.05rem;
-    z-index: 9;
-    outline: none;
-    cursor: pointer;
-
-    &--disabled {
-      border-color: $neutral500;
-      cursor: default;
-    }
-  }
-
-  &__trigger-inner {
-    width: 1.25rem;
-    height: 1.25rem;
-    border: 0.1rem solid $black;
-    border-radius: 1rem;
-    background-color: $blueberry600;
-
-    :hover > &,
-    :focus > & {
-      background-color: $blueberry800;
-    }
-
-    &--disabled {
-      border-color: $neutral500;
-      background-color: $neutral200;
-
-      :hover > &,
-      :focus > & {
-        background-color: $neutral200;
-      }
-    }
-  }
-
-  &__options {
-    display: inline-flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__text {
-    margin: 0;
-  }
-}
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+
+.slider {
+  width: 100%;
+  padding: getSpacer(m) 0;
+  position: relative;
+  outline: none !important;
+
+  &__track-wrapper {
+    width: 100%;
+    cursor: pointer;
+
+    &--disabled {
+      cursor: default;
+    }
+  }
+
+  &__track {
+    height: 2px;
+    background-color: $black;
+    width: 100%;
+    position: relative;
+    top: 1rem;
+
+    &--disabled {
+      background-color: $neutral600;
+    }
+  }
+
+  &__trigger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    background-color: $white;
+    border: 0.15rem solid $black;
+    border-radius: 1rem;
+    position: relative;
+    top: -0.05rem;
+    z-index: 9;
+    outline: none;
+    cursor: pointer;
+
+    &--disabled {
+      border-color: $neutral500;
+      cursor: default;
+    }
+  }
+
+  &__trigger-inner {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 0.1rem solid $black;
+    border-radius: 1rem;
+    background-color: $blueberry600;
+
+    :hover > &,
+    :focus > & {
+      background-color: $blueberry800;
+    }
+
+    &--disabled {
+      border-color: $neutral500;
+      background-color: $neutral200;
+
+      :hover > &,
+      :focus > & {
+        background-color: $neutral200;
+      }
+    }
+  }
+
+  &__options {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__text {
+    margin: 0;
+  }
+}

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

@@ -1,19 +1,19 @@
-export type Styles = {
-  slider: string;
-  slider__options: string;
-  slider__text: string;
-  slider__track: string;
-  'slider__track--disabled': string;
-  'slider__track-wrapper': string;
-  'slider__track-wrapper--disabled': string;
-  slider__trigger: string;
-  'slider__trigger--disabled': string;
-  'slider__trigger-inner': string;
-  'slider__trigger-inner--disabled': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  slider: string;
+  slider__options: string;
+  slider__text: string;
+  slider__track: string;
+  'slider__track--disabled': string;
+  'slider__track-wrapper': string;
+  'slider__track-wrapper--disabled': string;
+  slider__trigger: string;
+  'slider__trigger--disabled': string;
+  'slider__trigger-inner': string;
+  'slider__trigger-inner--disabled': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Spacer/Spacer.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import { SpacerSizes } from './../../theme/spacers';
-interface SpacerProps {
-    /** Sets the size of the spacer. */
-    size?: SpacerSizes;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLElement>>;
-export default Spacer;
+import React from 'react';
+import { SpacerSizes } from './../../theme/spacers';
+interface SpacerProps {
+    /** Sets the size of the spacer. */
+    size?: SpacerSizes;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLElement>>;
+export default Spacer;
 //# sourceMappingURL=Spacer.d.ts.map

package/components/Spacer/index.d.ts

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

package/components/Spacer/styles.module.scss

@@ -1,47 +1,47 @@
-@import '../../scss/spacers.scss';
-
-.spacer {
-  display: block;
-  width: 100%;
-  height: 0.125rem;
-
-  &--4xs {
-    height: getSpacer(4xs);
-  }
-  &--3xs {
-    height: getSpacer(3xs);
-  }
-  &--2xs {
-    height: getSpacer(2xs);
-  }
-  &--xs {
-    height: getSpacer(xs);
-  }
-  &--s {
-    height: getSpacer(s);
-  }
-  &--m {
-    height: getSpacer(m);
-  }
-  &--l {
-    height: getSpacer(l);
-  }
-  &--xl {
-    height: getSpacer(xl);
-  }
-  &--2xl {
-    height: getSpacer(2xl);
-  }
-  &--3xl {
-    height: getSpacer(3xl);
-  }
-  &--4xl {
-    height: getSpacer(4xl);
-  }
-  &--5xl {
-    height: getSpacer(5xl);
-  }
-  &--6xl {
-    height: getSpacer(6xl);
-  }
-}
+@import '../../scss/spacers.scss';
+
+.spacer {
+  display: block;
+  width: 100%;
+  height: 0.125rem;
+
+  &--4xs {
+    height: getSpacer(4xs);
+  }
+  &--3xs {
+    height: getSpacer(3xs);
+  }
+  &--2xs {
+    height: getSpacer(2xs);
+  }
+  &--xs {
+    height: getSpacer(xs);
+  }
+  &--s {
+    height: getSpacer(s);
+  }
+  &--m {
+    height: getSpacer(m);
+  }
+  &--l {
+    height: getSpacer(l);
+  }
+  &--xl {
+    height: getSpacer(xl);
+  }
+  &--2xl {
+    height: getSpacer(2xl);
+  }
+  &--3xl {
+    height: getSpacer(3xl);
+  }
+  &--4xl {
+    height: getSpacer(4xl);
+  }
+  &--5xl {
+    height: getSpacer(5xl);
+  }
+  &--6xl {
+    height: getSpacer(6xl);
+  }
+}

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

@@ -1,22 +1,22 @@
-export type Styles = {
-  spacer: string;
-  'spacer--2xl': string;
-  'spacer--2xs': string;
-  'spacer--3xl': string;
-  'spacer--3xs': string;
-  'spacer--4xl': string;
-  'spacer--4xs': string;
-  'spacer--5xl': string;
-  'spacer--6xl': string;
-  'spacer--l': string;
-  'spacer--m': string;
-  'spacer--s': string;
-  'spacer--xl': string;
-  'spacer--xs': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  spacer: string;
+  'spacer--2xl': string;
+  'spacer--2xs': string;
+  'spacer--3xl': string;
+  'spacer--3xs': string;
+  'spacer--4xl': string;
+  'spacer--4xs': string;
+  'spacer--5xl': string;
+  'spacer--6xl': string;
+  'spacer--l': string;
+  'spacer--m': string;
+  'spacer--s': string;
+  'spacer--xl': string;
+  'spacer--xs': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Textarea/Textarea.d.ts

@@ -1,37 +1,37 @@
-import React from 'react';
-import { HTMLTextareaProps, FormMode } from '../../constants';
-interface TextareaProps extends HTMLTextareaProps {
-    /** initial value for textarea */
-    defaultValue?: string;
-    /** max character limit in textarea  */
-    maxCharacters?: number;
-    /** The text is displayed in the end of the text-counter */
-    maxText?: string;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-    /** If true, the component will have a bottom margin. */
-    marginBottom?: boolean;
-    /** If true, the component will be transparent. */
-    transparent?: boolean;
-    /** Changes the visuals of the textarea */
-    mode?: keyof typeof FormMode;
-    /** Label of the input */
-    label?: string;
-    /** id of the textarea */
-    textareaId?: string;
-    /** max rows */
-    maxRows?: number;
-    /** min rows */
-    minRows?: number;
-    /** auto-grows until maxRows */
-    grow?: boolean;
-    /** Error text to show above the component */
-    errorText?: string;
-    /** Component shown after label */
-    afterLabelChildren?: React.ReactNode;
-    /** Component shown under label */
-    belowLabelChildren?: React.ReactNode;
-}
-declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export default Textarea;
+import React from 'react';
+import { HTMLTextareaProps, FormMode } from '../../constants';
+interface TextareaProps extends HTMLTextareaProps {
+    /** initial value for textarea */
+    defaultValue?: string;
+    /** max character limit in textarea  */
+    maxCharacters?: number;
+    /** The text is displayed in the end of the text-counter */
+    maxText?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** If true, the component will have a bottom margin. */
+    marginBottom?: boolean;
+    /** If true, the component will be transparent. */
+    transparent?: boolean;
+    /** Changes the visuals of the textarea */
+    mode?: keyof typeof FormMode;
+    /** Label of the input */
+    label?: string;
+    /** id of the textarea */
+    textareaId?: string;
+    /** max rows */
+    maxRows?: number;
+    /** min rows */
+    minRows?: number;
+    /** auto-grows until maxRows */
+    grow?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Component shown after label */
+    afterLabelChildren?: React.ReactNode;
+    /** Component shown under label */
+    belowLabelChildren?: React.ReactNode;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;
 //# sourceMappingURL=Textarea.d.ts.map

package/components/Textarea/index.d.ts

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

package/components/Textarea/styles.module.scss

@@ -1,57 +1,57 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_input.scss';
-
-.textarea {
-  @include input-wrapper;
-
-  &__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);
-  }
-
-  &__counter-wrapper {
-    display: flex;
-    justify-content: end;
-    padding-top: getSpacer(2xs);
-    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;
-    }
-
-    &--on-dark {
-      color: $white;
-    }
-    &--invalid {
-      color: $cherry500;
-      font-weight: 600;
-    }
-  }
-}
-
-.content-wrapper {
-  @include content-wrapper;
-  &__input {
-    line-height: 28px;
-    height: auto;
-    padding: 16px;
-    resize: none;
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+@import '../../scss/_input.scss';
+
+.textarea {
+  @include input-wrapper;
+
+  &__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);
+  }
+
+  &__counter-wrapper {
+    display: flex;
+    justify-content: end;
+    padding-top: getSpacer(2xs);
+    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;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+    &--invalid {
+      color: $cherry500;
+      font-weight: 600;
+    }
+  }
+}
+
+.content-wrapper {
+  @include content-wrapper;
+  &__input {
+    line-height: 28px;
+    height: auto;
+    padding: 16px;
+    resize: none;
+  }
+}

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

@@ -1,26 +1,26 @@
-export type Styles = {
-  'content-wrapper': string;
-  'content-wrapper__input': 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;
-  textarea: string;
-  'textarea__after-label-children': string;
-  'textarea__counter-wrapper': string;
-  'textarea__counter-wrapper--invalid': string;
-  'textarea__counter-wrapper--on-dark': string;
-  'textarea__error-text': string;
-  'textarea__label-wrapper': string;
-  'textarea__label-wrapper--on-dark': string;
-  'textarea--gutterBottom': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  'content-wrapper': string;
+  'content-wrapper__input': 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;
+  textarea: string;
+  'textarea__after-label-children': string;
+  'textarea__counter-wrapper': string;
+  'textarea__counter-wrapper--invalid': string;
+  'textarea__counter-wrapper--on-dark': string;
+  'textarea__error-text': string;
+  'textarea__label-wrapper': string;
+  'textarea__label-wrapper--on-dark': string;
+  'textarea--gutterBottom': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;