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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
-  "version": "1.0.0-beta106",
+  "version": "1.0.0-beta110",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "tfs",
@@ -64,6 +64,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
     "jest-watch-typeahead": "^0.4.2",
+    "jest-when": "^3.5.1",
     "node-sass": "^4.13.0",
     "normalize.css": "8.0.1",
     "npm-run-all": "^4.1.5",

package/scss/_body.scss

@@ -1,11 +1,11 @@
-body {
-  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
-  background-color: $neutral50;
-  color: $black;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  @include media-breakpoint-up(md) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
-}
+body {
+  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  background-color: $neutral50;
+  color: $black;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @include media-breakpoint-up(md) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+}

package/scss/_breakpoints.scss

@@ -1,16 +1,16 @@
-$grid-gutter-width: map-get($spacers, 5);
-
-$grid-breakpoints: (
-  null: 0,
-  xs: 360px,
-  sm: 564px,
-  md: 768px,
-  lg: 1088px,
-  xl: 1450px,
-);
-
-$container-max-widths: (
-  sm: 528px,
-  md: 612px,
-  lg: 1056px,
-);
+$grid-gutter-width: map-get($spacers, 5);
+
+$grid-breakpoints: (
+  xxs: 0,
+  xs: 360px,
+  sm: 564px,
+  md: 768px,
+  lg: 1088px,
+  xl: 1450px,
+);
+
+$container-max-widths: (
+  sm: 528px,
+  md: 612px,
+  lg: 1056px,
+);

package/scss/_font-settings.scss

@@ -1,8 +1,8 @@
-$font-size-xs: 1rem; // 16px
-$font-size-sm: 1.125rem; // 18px
-$font-size-md: 1.25rem; // 20px
-$font-size-lg: 1.5rem; // 24px
-$lineheight-size-xs: 1.5rem; // 28px
-$lineheight-size-sm: 1.75rem; // 28px
-$lineheight-size-md: 1.875rem; // 30px
-$lineheight-size-lg: 2rem; // 32px
+$font-size-xs: 1rem; // 16px
+$font-size-sm: 1.125rem; // 18px
+$font-size-md: 1.25rem; // 20px
+$font-size-lg: 1.5rem; // 24px
+$lineheight-size-xs: 1.5rem; // 28px
+$lineheight-size-sm: 1.75rem; // 28px
+$lineheight-size-md: 1.875rem; // 30px
+$lineheight-size-lg: 2rem; // 32px

package/scss/_fonts.scss

@@ -1,112 +1,112 @@
-@import './font-settings.scss';
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
-    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 200;
-  font-display: swap;
-  src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
-    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
-    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
-    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
-    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
-    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
-    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
-}
+@import './font-settings.scss';
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
+    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
+    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
+    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
+    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
+    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
+    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
+    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
+    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
+    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
+    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
+    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
+}

package/scss/_grid.scss

@@ -1 +1 @@
-@import 'bootstrap/scss/bootstrap-grid';
+@import 'bootstrap/scss/bootstrap-grid';

package/scss/_input.scss

@@ -1,176 +1,176 @@
-@mixin input-wrapper {
-  width: 100%;
-  line-height: 0;
-
-  &__label-wrapper {
-    display: inline-flex;
-    align-items: center;
-    line-height: getSpacer(m);
-    font-size: $font-size-sm;
-    font-weight: 600;
-    padding-bottom: getSpacer(xs);
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      line-height: getSpacer(l);
-      font-size: $font-size-md;
-    }
-
-    &--on-dark {
-      color: $white;
-    }
-  }
-
-  &__after-label-children {
-    padding-left: 0.75rem;
-  }
-}
-
-@mixin content-wrapper {
-  font-size: $font-size-sm;
-  width: 100%;
-  border: $neutral700 2px solid;
-  outline: none;
-  background: $white;
-
-  svg:first-child {
-    padding-left: 0.375rem;
-  }
-
-  svg:last-child {
-    padding-right: 0.375rem;
-  }
-
-  &--bigform {
-    padding: getSpacer(2xs) 0;
-
-    svg:first-child {
-      padding-left: getSpacer(2xs);
-    }
-
-    svg:last-child {
-      padding-right: getSpacer(2xs);
-    }
-  }
-
-  &:hover {
-    background: $neutral50;
-    border-color: $neutral700;
-    box-shadow: 0px 0px 0px 1px $neutral700;
-
-    &:focus-within {
-      border-color: $black;
-      box-shadow: 0px 0px 0px 2px $black;
-    }
-  }
-  &:focus-within {
-    background: $white;
-    border-color: $neutral900;
-    box-shadow: 0px 0px 0px 2px $neutral900;
-  }
-
-  &--on-blueberry {
-    border-color: $blueberry500;
-
-    &:hover {
-      background: $blueberry50;
-      box-shadow: 0px 0px 0px 1px $blueberry500;
-      border-color: $blueberry500;
-    }
-
-    &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-  }
-  &--on-dark {
-    border-color: $blueberry900;
-    &:hover {
-      background: $blueberry50;
-      border-color: $blueberry900;
-      box-shadow: 0px 0px 0px 1px $blueberry900;
-    }
-    &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-  }
-  &--invalid {
-    border-color: $cherry500;
-
-    &:hover {
-      background: $cherry100;
-      border-color: $cherry500;
-      box-shadow: 0px 0px 0px 2px $cherry500;
-    }
-    &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-  }
-  &--transparent {
-    background: transparent;
-
-    &:hover {
-      background: $neutral100;
-    }
-
-    &:focus-within {
-      background: $white;
-    }
-  }
-  &--transparent#{&}--on-blueberry {
-    &:hover {
-      background: $blueberry100;
-    }
-
-    &:focus-within {
-      background: $white;
-    }
-  }
-
-  &--disabled {
-    background: $neutral50;
-    border-color: $neutral500;
-    color: $neutral500;
-
-    &:hover {
-      background: $neutral50;
-      border-color: $neutral500;
-      box-shadow: none;
-    }
-  }
-
-  &__input {
-    line-height: 1.625rem;
-    font-family: inherit;
-    font-size: $font-size-sm;
-    padding: 0 getSpacer(2xs);
-    border: none;
-    outline: none;
-    background-color: transparent;
-    width: 100%;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
-    }
-
-    &::placeholder {
-      color: $neutral500;
-    }
-
-    &--disabled {
-      color: $neutral500;
-    }
-
-    &:first-child {
-      padding-left: getSpacer(s);
-    }
-
-    &:last-child {
-      padding-right: getSpacer(s);
-    }
-  }
-}
+@mixin input-wrapper {
+  width: 100%;
+  line-height: 0;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+@mixin content-wrapper {
+  font-size: $font-size-sm;
+  width: 100%;
+  border: $neutral700 2px solid;
+  outline: none;
+  background: $white;
+
+  svg:first-child {
+    padding-left: 0.375rem;
+  }
+
+  svg:last-child {
+    padding-right: 0.375rem;
+  }
+
+  &--bigform {
+    padding: getSpacer(2xs) 0;
+
+    svg:first-child {
+      padding-left: getSpacer(2xs);
+    }
+
+    svg:last-child {
+      padding-right: getSpacer(2xs);
+    }
+  }
+
+  &:hover {
+    background: $neutral50;
+    border-color: $neutral700;
+    box-shadow: 0px 0px 0px 1px $neutral700;
+
+    &:focus-within {
+      border-color: $black;
+      box-shadow: 0px 0px 0px 2px $black;
+    }
+  }
+  &:focus-within {
+    background: $white;
+    border-color: $neutral900;
+    box-shadow: 0px 0px 0px 2px $neutral900;
+  }
+
+  &--on-blueberry {
+    border-color: $blueberry500;
+
+    &:hover {
+      background: $blueberry50;
+      box-shadow: 0px 0px 0px 1px $blueberry500;
+      border-color: $blueberry500;
+    }
+
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--on-dark {
+    border-color: $blueberry900;
+    &:hover {
+      background: $blueberry50;
+      border-color: $blueberry900;
+      box-shadow: 0px 0px 0px 1px $blueberry900;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--invalid {
+    border-color: $cherry500;
+
+    &:hover {
+      background: $cherry100;
+      border-color: $cherry500;
+      box-shadow: 0px 0px 0px 2px $cherry500;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--transparent {
+    background: transparent;
+
+    &:hover {
+      background: $neutral100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+  &--transparent#{&}--on-blueberry {
+    &:hover {
+      background: $blueberry100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+
+  &--disabled {
+    background: $neutral50;
+    border-color: $neutral500;
+    color: $neutral500;
+
+    &:hover {
+      background: $neutral50;
+      border-color: $neutral500;
+      box-shadow: none;
+    }
+  }
+
+  &__input {
+    line-height: 1.625rem;
+    font-family: inherit;
+    font-size: $font-size-sm;
+    padding: 0 getSpacer(2xs);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+
+    &::placeholder {
+      color: $neutral500;
+    }
+
+    &--disabled {
+      color: $neutral500;
+    }
+
+    &:first-child {
+      padding-left: getSpacer(s);
+    }
+
+    &:last-child {
+      padding-right: getSpacer(s);
+    }
+  }
+}