@helsenorge/designsystem-react 1.0.0-beta104 → 1.0.0-beta108

package/components/RadioButton/styles.module.scss

@@ -1,236 +1,236 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
-
-.radio-button-errors {
-  font-size: $font-size-sm;
-  font-weight: 600;
-  color: $cherry500;
-  margin-top: 0;
-}
-
-.radio-button-wrapper {
-  cursor: pointer;
-  margin: getSpacer(s) 0;
-
-  &--with-error {
-    padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
-    background-color: $cherry100;
-    margin-left: -0.75rem;
-    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;
-  }
-}
-
-.radio-button-wrapper:first-of-type {
-  margin-top: 0;
-}
-
-.radio-button-wrapper:last-of-type {
-  margin-bottom: 0;
-}
-
-.radio-button-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);
-    }
-  }
-}
-
-.radio-button {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -o-appearance: none;
-
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10rem;
-  margin: 0 getSpacer(s) 0 0;
-  height: 1.5rem;
-  width: 1.5rem;
-  min-width: auto !important;
-  min-height: auto !important;
-  color: $neutral700;
-  box-shadow: 0 0 0 getSpacer(4xs);
-
-  &:checked {
-    color: $blueberry500;
-
-    &:hover {
-      background-color: $blueberry50;
-    }
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 getSpacer(3xs);
-    color: $black;
-  }
-
-  &:hover {
-    box-shadow: 0 0 0 getSpacer(3xs);
-    background-color: $neutral100;
-  }
-
-  :active > & {
-    box-shadow: 0 0 0 getSpacer(3xs);
-    color: $black;
-  }
-
-  &--on-blueberry {
-    color: $blueberry500;
-
-    :hover > & {
-      background-color: $blueberry100;
-    }
-  }
-
-  &--on-dark {
-    color: $neutral200;
-
-    &:hover {
-      background-color: $inverted-hover;
-      box-shadow: 0 0 0 getSpacer(3xs);
-    }
-
-    &:checked {
-      color: $blueberry200;
-
-      &:hover {
-        background-color: $inverted-hover;
-      }
-    }
-
-    :active > & {
-      box-shadow: 0 0 0 getSpacer(3xs);
-      color: $white;
-    }
-
-    &:focus {
-      color: $white;
-    }
-  }
-
-  &--invalid {
-    color: $cherry500;
-
-    &:hover {
-      background-color: $cherry100;
-    }
-
-    &:checked {
-      color: $cherry500;
-
-      &:hover {
-        background-color: $cherry100;
-      }
-    }
-
-    &:active {
-      color: $black;
-    }
-
-    &:focus {
-      color: $black;
-    }
-  }
-
-  &--disabled {
-    cursor: default;
-
-    color: $neutral400;
-    &:checked {
-      color: $neutral400;
-
-      &:hover {
-        box-shadow: 0 0 0 getSpacer(4xs);
-        background-color: transparent;
-      }
-    }
-    &:hover {
-      box-shadow: 0 0 0 getSpacer(4xs);
-      background-color: transparent;
-    }
-
-    &:active {
-      color: $neutral400;
-    }
-  }
-
-  // :before er dot i RadioButton
-  &:checked::before {
-    content: '';
-    display: flex;
-    background-color: $blueberry500;
-    width: 0.75rem;
-    height: 0.75rem;
-    border-radius: 10rem;
-  }
-
-  &--on-dark:checked::before {
-    background-color: $blueberry200;
-  }
-
-  &--disabled:checked::before {
-    box-shadow: 0 0 0 0;
-    background-color: $neutral400;
-    color: $neutral400;
-  }
-
-  &--invalid:checked::before {
-    background-color: $cherry500;
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.radio-button-errors {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  color: $cherry500;
+  margin-top: 0;
+}
+
+.radio-button-wrapper {
+  cursor: pointer;
+  margin: getSpacer(s) 0;
+
+  &--with-error {
+    padding: getSpacer(s) getSpacer(2xs) getSpacer(m);
+    background-color: $cherry100;
+    margin-left: -0.75rem;
+    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;
+  }
+}
+
+.radio-button-wrapper:first-of-type {
+  margin-top: 0;
+}
+
+.radio-button-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+
+.radio-button-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);
+    }
+  }
+}
+
+.radio-button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10rem;
+  margin: 0 getSpacer(s) 0 0;
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: auto !important;
+  min-height: auto !important;
+  color: $neutral700;
+  box-shadow: 0 0 0 getSpacer(4xs);
+
+  &:checked {
+    color: $blueberry500;
+
+    &:hover {
+      background-color: $blueberry50;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 getSpacer(3xs);
+    color: $black;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 getSpacer(3xs);
+    background-color: $neutral100;
+  }
+
+  :active > & {
+    box-shadow: 0 0 0 getSpacer(3xs);
+    color: $black;
+  }
+
+  &--on-blueberry {
+    color: $blueberry500;
+
+    :hover > & {
+      background-color: $blueberry100;
+    }
+  }
+
+  &--on-dark {
+    color: $neutral200;
+
+    &:hover {
+      background-color: $inverted-hover;
+      box-shadow: 0 0 0 getSpacer(3xs);
+    }
+
+    &:checked {
+      color: $blueberry200;
+
+      &:hover {
+        background-color: $inverted-hover;
+      }
+    }
+
+    :active > & {
+      box-shadow: 0 0 0 getSpacer(3xs);
+      color: $white;
+    }
+
+    &:focus {
+      color: $white;
+    }
+  }
+
+  &--invalid {
+    color: $cherry500;
+
+    &:hover {
+      background-color: $cherry100;
+    }
+
+    &:checked {
+      color: $cherry500;
+
+      &:hover {
+        background-color: $cherry100;
+      }
+    }
+
+    &:active {
+      color: $black;
+    }
+
+    &:focus {
+      color: $black;
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+
+    color: $neutral400;
+    &:checked {
+      color: $neutral400;
+
+      &:hover {
+        box-shadow: 0 0 0 getSpacer(4xs);
+        background-color: transparent;
+      }
+    }
+    &:hover {
+      box-shadow: 0 0 0 getSpacer(4xs);
+      background-color: transparent;
+    }
+
+    &:active {
+      color: $neutral400;
+    }
+  }
+
+  // :before er dot i RadioButton
+  &:checked::before {
+    content: '';
+    display: flex;
+    background-color: $blueberry500;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 10rem;
+  }
+
+  &--on-dark:checked::before {
+    background-color: $blueberry200;
+  }
+
+  &--disabled:checked::before {
+    box-shadow: 0 0 0 0;
+    background-color: $neutral400;
+    color: $neutral400;
+  }
+
+  &--invalid:checked::before {
+    background-color: $cherry500;
+  }
+}

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

@@ -1,23 +1,23 @@
-export type Styles = {
-  'radio-button': string;
-  'radio-button--disabled': string;
-  'radio-button--invalid': string;
-  'radio-button--on-blueberry': string;
-  'radio-button--on-dark': string;
-  'radio-button-errors': string;
-  'radio-button-label': string;
-  'radio-button-label--bigform': string;
-  'radio-button-label--disabled': string;
-  'radio-button-label--invalid': string;
-  'radio-button-label--on-blueberry': string;
-  'radio-button-label--on-dark': string;
-  'radio-button-wrapper': string;
-  'radio-button-wrapper--bigform': string;
-  'radio-button-wrapper--with-error': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  'radio-button': string;
+  'radio-button--disabled': string;
+  'radio-button--invalid': string;
+  'radio-button--on-blueberry': string;
+  'radio-button--on-dark': string;
+  'radio-button-errors': string;
+  'radio-button-label': string;
+  'radio-button-label--bigform': string;
+  'radio-button-label--disabled': string;
+  'radio-button-label--invalid': string;
+  'radio-button-label--on-blueberry': string;
+  'radio-button-label--on-dark': string;
+  'radio-button-wrapper': string;
+  'radio-button-wrapper--bigform': string;
+  'radio-button-wrapper--with-error': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Slider/Slider.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
-interface SliderProps {
-    /**	Sets the title of the slider. */
-    title?: string;
-    /** Adds the left hand label to the element. */
-    labelLeft?: string;
-    /** Adds the right hand label to the element. */
-    labelRight?: string;
-    /**	Decides the number of steps for each movement of the slider. */
-    step?: number;
-    /** Disables the slider element. */
-    disabled?: boolean;
-    /** Function to be called when the value state has changed. */
-    onChange?: (value: number) => void;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLElement>>;
-export default Slider;
+import React from 'react';
+interface SliderProps {
+    /**	Sets the title of the slider. */
+    title?: string;
+    /** Adds the left hand label to the element. */
+    labelLeft?: string;
+    /** Adds the right hand label to the element. */
+    labelRight?: string;
+    /**	Decides the number of steps for each movement of the slider. */
+    step?: number;
+    /** Disables the slider element. */
+    disabled?: boolean;
+    /** Function to be called when the value state has changed. */
+    onChange?: (value: number) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLElement>>;
+export default Slider;
 //# sourceMappingURL=Slider.d.ts.map

package/components/Slider/SliderUtils.d.ts

@@ -1,41 +1,41 @@
-/// <reference types="react" />
-/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/
-export declare const stopEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
-/** Henter ut x posisjon til MouseEvent eller TouchEvent e */
-export declare const getMousePosition: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => number;
-/** Henter ut width basert på viewport posisjon til parameter elementet el som sendes inn */
-export declare const getElementWidth: (el: HTMLDivElement | null) => number;
-/** Returnerer en boolean på om innsendte event e er en TouchEvent */
-export declare const isTouchEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
-/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,
- *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
- *  og min og max verdier som er satt på slider komponentet. */
-export declare const calculateSliderPositionBasedOnValue: (value: number, trackerWidth: number, sliderWidth: number, min: number, max: number) => number;
-/** Kalkulerer verdi basert på sliderPosition som sendes inn,
- *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
- *  og min og max verdier som er satt på slider komponentet. */
-export declare const calculateValueBasedOnSliderPosition: (sliderPosition: number, trackerWidth: number, sliderWidth: number, step: number, min: number, max: number) => number;
-/** Kalkulerer modifisert value basert på step parameteret,
- * med hensyn til max verdi til slideren.
- * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */
-export declare const alignValue: (value: number, step: number, max: number) => number;
-/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,
- *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til
- *  slider - sliderWidth. */
-export declare const calculateChangeOfPosition: (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number) => number;
-/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og
- *  bredden til slider - sliderWidth */
-export declare const calculateSliderTranslate: (xPos: number, sliderElement: HTMLDivElement | null, sliderWidth: number, cb: (a: number) => void) => void;
-/** Legger til mousemove og mouseup event listeners,
- *  basert på moveMouseEvent og mouseUpEvent eventene */
-export declare const addMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
-/** Fjerner mousemove og mouseup event listeners,
- *  basert på moveMouseEvent og mouseUpEvent eventene */
-export declare const removeMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
-/** Legger til touchmove og touchend event listeners,
- *  basert på moveTouchEvent og touchUpEvent eventene */
-export declare const addTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
-/** Fjerner touchmove og touchup event listeners,
- *  basert på moveTouchEvent og touchUpEvent eventene */
-export declare const removeTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
+/// <reference types="react" />
+/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/
+export declare const stopEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
+/** Henter ut x posisjon til MouseEvent eller TouchEvent e */
+export declare const getMousePosition: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => number;
+/** Henter ut width basert på viewport posisjon til parameter elementet el som sendes inn */
+export declare const getElementWidth: (el: HTMLDivElement | null) => number;
+/** Returnerer en boolean på om innsendte event e er en TouchEvent */
+export declare const isTouchEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
+/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,
+ *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
+ *  og min og max verdier som er satt på slider komponentet. */
+export declare const calculateSliderPositionBasedOnValue: (value: number, trackerWidth: number, sliderWidth: number, min: number, max: number) => number;
+/** Kalkulerer verdi basert på sliderPosition som sendes inn,
+ *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
+ *  og min og max verdier som er satt på slider komponentet. */
+export declare const calculateValueBasedOnSliderPosition: (sliderPosition: number, trackerWidth: number, sliderWidth: number, step: number, min: number, max: number) => number;
+/** Kalkulerer modifisert value basert på step parameteret,
+ * med hensyn til max verdi til slideren.
+ * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */
+export declare const alignValue: (value: number, step: number, max: number) => number;
+/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,
+ *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til
+ *  slider - sliderWidth. */
+export declare const calculateChangeOfPosition: (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number) => number;
+/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og
+ *  bredden til slider - sliderWidth */
+export declare const calculateSliderTranslate: (xPos: number, sliderElement: HTMLDivElement | null, sliderWidth: number, cb: (a: number) => void) => void;
+/** Legger til mousemove og mouseup event listeners,
+ *  basert på moveMouseEvent og mouseUpEvent eventene */
+export declare const addMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
+/** Fjerner mousemove og mouseup event listeners,
+ *  basert på moveMouseEvent og mouseUpEvent eventene */
+export declare const removeMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
+/** Legger til touchmove og touchend event listeners,
+ *  basert på moveTouchEvent og touchUpEvent eventene */
+export declare const addTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
+/** Fjerner touchmove og touchup event listeners,
+ *  basert på moveTouchEvent og touchUpEvent eventene */
+export declare const removeTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
 //# sourceMappingURL=SliderUtils.d.ts.map

package/components/Slider/index.d.ts

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