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

package/scss/_spacers.scss

@@ -1,40 +1,40 @@
-$spacer: 1rem;
-$spacers: (
-  0: 0,
-  1: $spacer * 0.125,
-  2: $spacer * 0.25,
-  3: $spacer * 0.5,
-  4: $spacer * 0.75,
-  5: $spacer * 1,
-  6: $spacer * 1.5,
-  7: $spacer * 2,
-  8: $spacer * 3,
-  9: $spacer * 4,
-  10: $spacer * 5,
-  11: $spacer * 6,
-  12: $spacer * 7,
-  13: $spacer * 8,
-);
-
-@function getSpacer($spacerSize) {
-  $spacerValue: map-get(
-    (
-      4xs: map-get($spacers, 1),
-      3xs: map-get($spacers, 2),
-      2xs: map-get($spacers, 3),
-      xs: map-get($spacers, 4),
-      s: map-get($spacers, 5),
-      m: map-get($spacers, 6),
-      l: map-get($spacers, 7),
-      xl: map-get($spacers, 8),
-      2xl: map-get($spacers, 9),
-      3xl: map-get($spacers, 10),
-      4xl: map-get($spacers, 11),
-      5xl: map-get($spacers, 12),
-      6xl: map-get($spacers, 13),
-    ),
-    $spacerSize
-  );
-
-  @return $spacerValue;
-}
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.125,
+  2: $spacer * 0.25,
+  3: $spacer * 0.5,
+  4: $spacer * 0.75,
+  5: $spacer * 1,
+  6: $spacer * 1.5,
+  7: $spacer * 2,
+  8: $spacer * 3,
+  9: $spacer * 4,
+  10: $spacer * 5,
+  11: $spacer * 6,
+  12: $spacer * 7,
+  13: $spacer * 8,
+);
+
+@function getSpacer($spacerSize) {
+  $spacerValue: map-get(
+    (
+      4xs: map-get($spacers, 1),
+      3xs: map-get($spacers, 2),
+      2xs: map-get($spacers, 3),
+      xs: map-get($spacers, 4),
+      s: map-get($spacers, 5),
+      m: map-get($spacers, 6),
+      l: map-get($spacers, 7),
+      xl: map-get($spacers, 8),
+      2xl: map-get($spacers, 9),
+      3xl: map-get($spacers, 10),
+      4xl: map-get($spacers, 11),
+      5xl: map-get($spacers, 12),
+      6xl: map-get($spacers, 13),
+    ),
+    $spacerSize
+  );
+
+  @return $spacerValue;
+}

package/scss/_title.scss

@@ -1,59 +1,59 @@
-@import './spacers';
-@import './breakpoints';
-@import './font-settings';
-
-@mixin title-feature {
-  font-size: 2.375rem;
-  line-height: 2.875rem;
-  font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: 4rem;
-    line-height: 5rem;
-  }
-}
-
-@mixin title1 {
-  font-size: 2.25rem;
-  line-height: 2.75rem;
-  font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: 3.25rem;
-    line-height: 3.75rem;
-  }
-}
-
-@mixin title2 {
-  font-size: 1.625rem;
-  line-height: 2.125rem;
-  font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: 2rem;
-    line-height: 2.75rem;
-  }
-}
-
-@mixin title3 {
-  font-size: 1.375rem;
-  line-height: 1.875rem;
-  font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-@mixin title4 {
-  font-size: $font-size-md;
-  line-height: $lineheight-size-sm;
-  font-weight: 700;
-}
-
-@mixin title5 {
-  font-size: $spacer;
-  line-height: 1.5rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: $font-size-sm;
-  }
-}
+@import './spacers';
+@import './breakpoints';
+@import './font-settings';
+
+@mixin title-feature {
+  font-size: 2.375rem;
+  line-height: 2.875rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 4rem;
+    line-height: 5rem;
+  }
+}
+
+@mixin title1 {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 3.25rem;
+    line-height: 3.75rem;
+  }
+}
+
+@mixin title2 {
+  font-size: 1.625rem;
+  line-height: 2.125rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 2rem;
+    line-height: 2.75rem;
+  }
+}
+
+@mixin title3 {
+  font-size: 1.375rem;
+  line-height: 1.875rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+@mixin title4 {
+  font-size: $font-size-md;
+  line-height: $lineheight-size-sm;
+  font-weight: 700;
+}
+
+@mixin title5 {
+  font-size: $spacer;
+  line-height: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-sm;
+  }
+}

package/scss/helsenorge.scss

@@ -1,8 +1,8 @@
-@import 'reset';
-@import 'spacers';
-@import 'breakpoints';
-@import 'grid';
-@import 'palette';
-@import 'fonts';
-@import 'body';
-@import 'print';
+@import 'reset';
+@import 'spacers';
+@import 'breakpoints';
+@import 'grid';
+@import 'palette';
+@import 'fonts';
+@import 'body';
+@import 'print';

package/scss/typography.module.scss

@@ -1,154 +1,154 @@
-@import './spacers';
-@import './breakpoints';
-@import './fonts.scss';
-@import './palette';
-@import './title.scss';
-
-/*
-Denne filen er ment til å importeres som en css module:
-import designsystemtypography from './scss/_typography.scss'
-<div className={designsystemtypography.title1}></div>
-*/
-
-.title-feature {
-  @include title-feature;
-}
-
-.focused-content {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-}
-
-.title1 {
-  @include title1;
-}
-
-.title2 {
-  @include title2;
-}
-
-.title3 {
-  @include title3;
-}
-
-.title4 {
-  @include title4;
-}
-
-.title5 {
-  @include title5;
-}
-
-.preamble {
-  font-size: 1.375rem;
-  line-height: getSpacer(l);
-  font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: getSpacer(m);
-  }
-}
-
-.legend {
-  font-size: $font-size-md;
-  line-height: 1.625rem;
-  font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: getSpacer(m);
-    line-height: $lineheight-size-md;
-  }
-}
-
-.label {
-  font-size: $font-size-sm;
-  line-height: getSpacer(m);
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-sm;
-  }
-}
-
-.table {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-  }
-}
-
-.strong {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
-}
-
-.form {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-  }
-}
-
-.time {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-}
-
-.image-caption {
-  font-size: $spacer;
-  line-height: getSpacer(m);
-}
-
-.image-credit {
-  font-size: 0.75rem;
-  line-height: $spacer;
-}
-
-.anchorlink-wrapper {
-  a {
-    display: inline;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone;
-    overflow-wrap: break-word;
-    word-break: break-word;
-    text-align: left;
-    text-decoration: none;
-    color: $blueberry600;
-    padding: 0.15rem;
-    border-bottom: 1px solid $neutral300;
-
-    font-size: 1.125rem;
-    line-height: 1.875rem;
-    font-weight: 400;
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: 1.25rem;
-    }
-
-    &:hover {
-      cursor: pointer;
-      color: $blueberry700;
-      background-color: $blueberry50;
-      border-bottom-color: $blueberry600;
-    }
-    &:focus {
-      padding: 0 0 0.15rem 0;
-      outline: none;
-      border: 0.15rem solid $black;
-    }
-
-    &[target='_blank'] {
-      /* external styling legge til icon*/
-      &:after {
-        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48' fill='%2308667c'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
-        display: inline-block;
-        vertical-align: bottom;
-        margin-right: -0.4rem;
-        margin-top: -2rem;
-        margin-bottom: -0.8rem;
-      }
-    }
-  }
-}
+@import './spacers';
+@import './breakpoints';
+@import './fonts.scss';
+@import './palette';
+@import './title.scss';
+
+/*
+Denne filen er ment til å importeres som en css module:
+import designsystemtypography from './scss/_typography.scss'
+<div className={designsystemtypography.title1}></div>
+*/
+
+.title-feature {
+  @include title-feature;
+}
+
+.focused-content {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+}
+
+.title1 {
+  @include title1;
+}
+
+.title2 {
+  @include title2;
+}
+
+.title3 {
+  @include title3;
+}
+
+.title4 {
+  @include title4;
+}
+
+.title5 {
+  @include title5;
+}
+
+.preamble {
+  font-size: 1.375rem;
+  line-height: getSpacer(l);
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: getSpacer(m);
+  }
+}
+
+.legend {
+  font-size: $font-size-md;
+  line-height: 1.625rem;
+  font-weight: 600;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: getSpacer(m);
+    line-height: $lineheight-size-md;
+  }
+}
+
+.label {
+  font-size: $font-size-sm;
+  line-height: getSpacer(m);
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-sm;
+  }
+}
+
+.table {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+}
+
+.strong {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+}
+
+.form {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+}
+
+.time {
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+}
+
+.image-caption {
+  font-size: $spacer;
+  line-height: getSpacer(m);
+}
+
+.image-credit {
+  font-size: 0.75rem;
+  line-height: $spacer;
+}
+
+.anchorlink-wrapper {
+  a {
+    display: inline;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    text-align: left;
+    text-decoration: none;
+    color: $blueberry600;
+    padding: 0.15rem;
+    border-bottom: 1px solid $neutral300;
+
+    font-size: 1.125rem;
+    line-height: 1.875rem;
+    font-weight: 400;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: 1.25rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+      color: $blueberry700;
+      background-color: $blueberry50;
+      border-bottom-color: $blueberry600;
+    }
+    &:focus {
+      padding: 0 0 0.15rem 0;
+      outline: none;
+      border: 0.15rem solid $black;
+    }
+
+    &[target='_blank'] {
+      /* external styling legge til icon*/
+      &:after {
+        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48' fill='%2308667c'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
+        display: inline-block;
+        vertical-align: bottom;
+        margin-right: -0.4rem;
+        margin-top: -2rem;
+        margin-bottom: -0.8rem;
+      }
+    }
+  }
+}

package/theme/currys/color.d.ts

@@ -1,4 +1,4 @@
-import { PaletteNames } from '../palette';
-export declare const getColor: (name: PaletteNames, depth?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined) => any;
-export declare const getHoverColor: (color: PaletteNames) => string;
+import { PaletteNames } from '../palette';
+export declare const getColor: (name: PaletteNames, depth?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | undefined) => any;
+export declare const getHoverColor: (color: PaletteNames) => string;
 //# sourceMappingURL=color.d.ts.map

package/theme/currys/index.d.ts

@@ -1,3 +1,3 @@
-export * from './color';
-export * from './spacing';
+export * from './color';
+export * from './spacing';
 //# sourceMappingURL=index.d.ts.map

package/theme/currys/spacing.d.ts

@@ -1,4 +1,4 @@
-import { SpacerSizes } from './../spacers';
-export declare const mapSpacerValue: (spacerSize: SpacerSizes) => number;
-export declare const getSpacer: (spacerSize: SpacerSizes) => string;
+import { SpacerSizes } from './../spacers';
+export declare const mapSpacerValue: (spacerSize: SpacerSizes) => number;
+export declare const getSpacer: (spacerSize: SpacerSizes) => string;
 //# sourceMappingURL=spacing.d.ts.map

package/theme/grid.d.ts

@@ -1,21 +1,21 @@
-export declare const breakpoints: {
-    null: number;
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-export declare const containerMaxWidths: {
-    sm: number;
-    md: number;
-    lg: number;
-};
-export declare const screen: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
+export declare const breakpoints: {
+    null: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const containerMaxWidths: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const screen: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
 //# sourceMappingURL=grid.d.ts.map