@helsenorge/designsystem-react 3.0.0 → 3.0.2

package/scss/_palette.scss

@@ -1,6 +1,5 @@
-$black: #000000;
-$white: #ffffff;
-
+$black: #000;
+$white: #fff;
 $banana50: #fdf8df;
 $banana100: #fcf2bf;
 $banana200: #f9ea9f;
@@ -11,7 +10,6 @@ $banana600: #c59302;
 $banana700: #ab7c00;
 $banana800: #916500;
 $banana900: #764f00;
-
 $blueberry50: #e4f7f9;
 $blueberry100: #cae7ed;
 $blueberry200: #afdae3;
@@ -22,7 +20,6 @@ $blueberry600: #126f87;
 $blueberry700: #08667c;
 $blueberry800: #06596c;
 $blueberry900: #084350;
-
 $cherry50: #fff2ea;
 $cherry100: #f7e1d2;
 $cherry200: #eec0a5;
@@ -33,7 +30,6 @@ $cherry600: #b62e1c;
 $cherry700: #a31f0e;
 $cherry800: #912112;
 $cherry900: #7e1c0e;
-
 $kiwi50: #e6f8ee;
 $kiwi100: #c2edd6;
 $kiwi200: #9de2bf;
@@ -44,7 +40,6 @@ $kiwi600: #10b172;
 $kiwi700: #0ca161;
 $kiwi800: #099150;
 $kiwi900: #078141;
-
 $neutral50: #f5f3f3;
 $neutral100: #eae7e7;
 $neutral200: #d6d4d3;
@@ -55,7 +50,6 @@ $neutral600: #7d7c79;
 $neutral700: #62625f;
 $neutral800: #474745;
 $neutral900: #2b2c2b;
-
 $plum50: #efe4fd;
 $plum100: #d7bdf9;
 $plum200: #bf98f3;
@@ -66,10 +60,8 @@ $plum600: #6a2abf;
 $plum700: #5b22a6;
 $plum800: #4c1b8c;
 $plum900: #3c1471;
-
 $inverted-hover: #ffffff0d;
-$transparentGrey: rgba(102, 102, 102, 0.75);
-
+$transparent-grey: rgb(102 102 102 / 75%);
 $palette-map: (
   'banana50': $banana50,
   'banana100': $banana100,

package/scss/_print.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import 'palette';
 @import 'breakpoints';
 
@@ -14,10 +15,11 @@
   }
 
   body {
-    min-width: map-get($grid-breakpoints, lg) !important;
+    min-width: map.get($grid-breakpoints, lg) !important;
   }
+
   .container {
-    min-width: map-get($grid-breakpoints, lg) !important;
+    min-width: map.get($grid-breakpoints, lg) !important;
   }
 
   abbr[title]::after {
@@ -60,120 +62,158 @@
   }
 
   .col-print-1 {
-    max-width: 8.33333%;
+    max-width: 8.3333%;
   }
+
   .col-print-2 {
-    max-width: 16.66667%;
+    max-width: 16.6667%;
   }
+
   .col-print-3 {
     max-width: 25%;
   }
+
   .col-print-4 {
-    max-width: 33.33333%;
+    max-width: 33.3333%;
   }
+
   .col-print-5 {
-    max-width: 41.66667%;
+    max-width: 41.6667%;
   }
+
   .col-print-6 {
     max-width: 50%;
   }
+
   .col-print-7 {
-    max-width: 58.33333%;
+    max-width: 58.3333%;
   }
+
   .col-print-8 {
-    max-width: 66.66667%;
+    max-width: 66.6667%;
   }
+
   .col-print-9 {
     max-width: 75%;
   }
+
   .col-print-10 {
-    max-width: 83.33333%;
+    max-width: 83.3333%;
   }
+
   .col-print-11 {
-    max-width: 91.66667%;
+    max-width: 91.6667%;
   }
+
   .col-print-12 {
     max-width: 100%;
   }
+
   .order-print-first {
     order: -1;
   }
+
   .order-print-last {
     order: 13;
   }
+
   .order-print-0 {
     order: 0;
   }
+
   .order-print-1 {
     order: 1;
   }
+
   .order-print-2 {
     order: 2;
   }
+
   .order-print-3 {
     order: 3;
   }
+
   .order-print-4 {
     order: 4;
   }
+
   .order-print-5 {
     order: 5;
   }
+
   .order-print-6 {
     order: 6;
   }
+
   .order-print-7 {
     order: 7;
   }
+
   .order-print-8 {
     order: 8;
   }
+
   .order-print-9 {
     order: 9;
   }
+
   .order-print-10 {
     order: 10;
   }
+
   .order-print-11 {
     order: 11;
   }
+
   .order-print-12 {
     order: 12;
   }
+
   .offset-print-0 {
     margin-left: 0;
   }
+
   .offset-print-1 {
-    margin-left: 8.33333%;
+    margin-left: 8.3333%;
   }
+
   .offset-print-2 {
-    margin-left: 16.66667%;
+    margin-left: 16.6667%;
   }
+
   .offset-print-3 {
     margin-left: 25%;
   }
+
   .offset-print-4 {
-    margin-left: 33.33333%;
+    margin-left: 33.3333%;
   }
+
   .offset-print-5 {
-    margin-left: 41.66667%;
+    margin-left: 41.6667%;
   }
+
   .offset-print-6 {
     margin-left: 50%;
   }
+
   .offset-print-7 {
-    margin-left: 58.33333%;
+    margin-left: 58.3333%;
   }
+
   .offset-print-8 {
-    margin-left: 66.66667%;
+    margin-left: 66.6667%;
   }
+
   .offset-print-9 {
     margin-left: 75%;
   }
+
   .offset-print-10 {
-    margin-left: 83.33333%;
+    margin-left: 83.3333%;
   }
+
   .offset-print-11 {
-    margin-left: 91.66667%;
+    margin-left: 91.6667%;
   }
 }

package/scss/_screen-reader.scss

@@ -30,7 +30,6 @@
 @mixin sr-only() {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-  -webkit-clip-path: inset(50%) !important;
   clip-path: inset(50%) !important; /* 2 */
   height: 1px !important;
   margin: -1px !important;
@@ -54,7 +53,6 @@
   &:active,
   &:focus {
     clip: auto !important;
-    -webkit-clip-path: none !important;
     clip-path: none !important;
     height: auto !important;
     margin: auto !important;

package/scss/_spacers.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $spacer: 1rem;
 $spacers: (
   0: 0,
@@ -17,24 +19,24 @@ $spacers: (
 );
 
 @function getSpacer($spacerSize) {
-  $spacerValue: map-get(
+  $spacer-value: 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),
+      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;
+  @return $spacer-value;
 }

package/scss/_title.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import './spacers';
 @import './breakpoints';
 @import './font-settings';
@@ -6,7 +7,8 @@
   font-size: 2.375rem;
   line-height: 2.875rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 4rem;
     line-height: 5rem;
   }
@@ -16,7 +18,8 @@
   font-size: 2.25rem;
   line-height: 2.75rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 3.25rem;
     line-height: 3.75rem;
   }
@@ -26,7 +29,8 @@
   font-size: 1.625rem;
   line-height: 2.125rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 2rem;
     line-height: 2.75rem;
   }
@@ -36,7 +40,8 @@
   font-size: 1.375rem;
   line-height: 1.875rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: 1.5rem;
     line-height: 2rem;
   }
@@ -53,7 +58,8 @@
   line-height: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-sm;
   }
 }

package/scss/helsenorge.scss

@@ -1,7 +1,7 @@
 @import 'reset';
 @import 'spacers';
 @import 'breakpoints';
-@import 'bootstrap/scss/bootstrap-grid.scss';
+@import 'bootstrap/scss/bootstrap-grid';
 @import 'palette';
 @import 'fonts';
 @import 'body';

package/scss/typography.module.scss

@@ -1,12 +1,13 @@
+@use 'sass:map';
 @import './spacers';
 @import './breakpoints';
-@import './fonts.scss';
+@import './fonts';
 @import './palette';
-@import './title.scss';
+@import './title';
 
 /*
 Denne filen er ment til å importeres som en css module:
-import designsystemtypography from './scss/_typography.scss'
+import designsystemtypography from './scss/typography.scss'
 <div className={designsystemtypography.title1}></div>
 */
 
@@ -43,7 +44,8 @@ import designsystemtypography from './scss/_typography.scss'
   font-size: 1.375rem;
   line-height: getSpacer(l);
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: getSpacer(m);
   }
 }
@@ -52,7 +54,8 @@ import designsystemtypography from './scss/_typography.scss'
   font-size: $font-size-md;
   line-height: 1.625rem;
   font-weight: 600;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: getSpacer(m);
     line-height: $lineheight-size-md;
   }
@@ -61,7 +64,8 @@ import designsystemtypography from './scss/_typography.scss'
 .label {
   font-size: $font-size-sm;
   line-height: getSpacer(m);
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-md;
     line-height: $lineheight-size-sm;
   }
@@ -70,7 +74,8 @@ import designsystemtypography from './scss/_typography.scss'
 .table {
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-md;
   }
 }
@@ -78,7 +83,8 @@ import designsystemtypography from './scss/_typography.scss'
 .strong {
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-md;
     line-height: $lineheight-size-md;
   }
@@ -87,7 +93,8 @@ import designsystemtypography from './scss/_typography.scss'
 .form {
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     font-size: $font-size-md;
   }
 }
@@ -110,7 +117,6 @@ import designsystemtypography from './scss/_typography.scss'
 .anchorlink-wrapper {
   a {
     display: inline;
-    -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     overflow-wrap: break-word;
     word-break: break-word;
@@ -126,15 +132,16 @@ import designsystemtypography from './scss/_typography.scss'
       background-color: $blueberry50;
       border-bottom-color: $blueberry600;
     }
+
     &:focus {
-      padding: 0 0 0.15rem 0;
+      padding: 0 0 0.15rem;
       outline: none;
       border: 0.15rem solid $black;
     }
 
     &[target='_blank'] {
-      /* external styling legge til icon*/
-      &:after {
+      /* 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;

package/utils/component.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 export declare const isComponent: <T>(element: {} | null | undefined, type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>) => element is React.ReactElement<T, string | React.JSXElementConstructor<any>>;
+export declare const isComponentWithChildren: <T>(element: {} | null | undefined) => element is React.ReactElement<React.PropsWithChildren<T>, string | React.JSXElementConstructor<any>>;
 //# sourceMappingURL=component.d.ts.map

package/utils/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/utils/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,eACb,EAAE,GAAG,IAAI,GAAG,SAAS,uJAEwF,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/utils/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,eAAO,MAAM,WAAW,eACb,EAAE,GAAG,IAAI,GAAG,SAAS,uJAEwF,CAAC;AAEzH,eAAO,MAAM,uBAAuB,eAAgB,EAAE,GAAG,IAAI,GAAG,SAAS,yGACpB,CAAC"}

package/utils/component.js

@@ -1,2 +1,2 @@
-import i from"react";const e=(o,t)=>i.isValidElement(o)&&o.type===t;export{e as isComponent};
+import i from"react";const e=(t,o)=>i.isValidElement(t)&&t.type===o,s=t=>i.isValidElement(t);export{e as isComponent,s as isComponentWithChildren};
 //# sourceMappingURL=component.js.map

package/utils/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n"],"names":["isComponent","element","type","React"],"mappings":"qBAEa,MAAAA,EAAc,CACzBC,EACAC,IACqCC,EAAM,eAAkBF,CAAO,GAAMA,EAA+B,OAASC"}
+{"version":3,"file":"component.js","sources":["../../src/utils/component.ts"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\n\nexport const isComponent = <T>(\n  element: {} | null | undefined,\n  type: React.ForwardRefExoticComponent<T> | React.FunctionComponent<T>\n): element is React.ReactElement<T> => React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\nexport const isComponentWithChildren = <T>(element: {} | null | undefined): element is React.ReactElement<PropsWithChildren<T>> =>\n  React.isValidElement<PropsWithChildren<T>>(element);\n"],"names":["isComponent","element","type","React","isComponentWithChildren"],"mappings":"qBAEa,MAAAA,EAAc,CACzBC,EACAC,IACqCC,EAAM,eAAkBF,CAAO,GAAMA,EAA+B,OAASC,EAEvGE,EAA8BH,GACzCE,EAAM,eAAqCF,CAAO"}

package/utils/debounce.d.ts

@@ -2,7 +2,6 @@
  * debounce limits time a function can be executed
  * @param func function to debounce
  * @param wait wait for x time
- * @param immediate run now
  */
-export declare function debounce(func: Function, wait: number, immediate?: boolean): [() => void, () => void];
+export declare function debounce<A = unknown, R = void>(func: (args?: A) => R, wait: number): [(args?: A) => Promise<R>, () => void];
 //# sourceMappingURL=debounce.d.ts.map

package/utils/debounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,IAAI,EAAE,MAAM,IAAI,CAAC,CA0BpG"}
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,QAAQ,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAmB3H"}

package/utils/debounce.js

@@ -1,2 +1,2 @@
-function s(e,u,n){let t;return[function(){const o=this,c=arguments,l=()=>{t=null,n||e.apply(o,c)},r=n&&!t;t&&clearTimeout(t),t=setTimeout(l,u),r&&e.apply(o,c)},()=>{t&&clearTimeout(t)}]}export{s as debounce};
+function d(o,t){let e;return[n=>new Promise(u=>{e&&clearTimeout(e),e=setTimeout(()=>{u(o(n))},t)}),()=>{e&&clearTimeout(e)}]}export{d as debounce};
 //# sourceMappingURL=debounce.js.map

package/utils/debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.js","sources":["../../src/utils/debounce.ts"],"sourcesContent":["/**\n * debounce limits time a function can be executed\n * @param func function to debounce\n * @param wait wait for x time\n * @param immediate run now\n */\n\nexport function debounce(func: Function, wait: number, immediate?: boolean): [() => void, () => void] {\n  let timeout: ReturnType<typeof setTimeout> | null;\n\n  const debouncedFunc = function (this: Function): void {\n    const context: Function = this,\n      args: IArguments = arguments,\n      later: () => void = (): void => {\n        timeout = null;\n        if (!immediate) {\n          func.apply(context, args);\n        }\n      },\n      callNow = immediate && !timeout;\n\n    if (timeout) clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n    if (callNow) {\n      func.apply(context, args);\n    }\n  };\n\n  const teardown = () => {\n    timeout && clearTimeout(timeout);\n  };\n\n  return [debouncedFunc, teardown];\n}\n"],"names":["debounce","func","wait","immediate","timeout","context","args","later","callNow"],"mappings":"AAOgB,SAAAA,EAASC,EAAgBC,EAAcC,EAA+C,CAChG,IAAAC,EAwBG,MAAA,CAtBe,UAAgC,CACpD,MAAMC,EAAoB,KACxBC,EAAmB,UACnBC,EAAoB,IAAY,CACpBH,EAAA,KACLD,GACEF,EAAA,MAAMI,EAASC,CAAI,CAC1B,EAEFE,EAAUL,GAAa,CAACC,EAEtBA,GAAS,aAAaA,CAAO,EACvBA,EAAA,WAAWG,EAAOL,CAAI,EAC5BM,GACGP,EAAA,MAAMI,EAASC,CAAI,CAC1B,EAGe,IAAM,CACrBF,GAAW,aAAaA,CAAO,CAAA,CAGF,CACjC"}
+{"version":3,"file":"debounce.js","sources":["../../src/utils/debounce.ts"],"sourcesContent":["/**\n * debounce limits time a function can be executed\n * @param func function to debounce\n * @param wait wait for x time\n */\n\nexport function debounce<A = unknown, R = void>(func: (args?: A) => R, wait: number): [(args?: A) => Promise<R>, () => void] {\n  let timeout: ReturnType<typeof setTimeout> | null;\n\n  const debouncedFunc = (args?: A): Promise<R> =>\n    new Promise(resolve => {\n      if (timeout) {\n        clearTimeout(timeout);\n      }\n\n      timeout = setTimeout((): void => {\n        resolve(func(args));\n      }, wait);\n    });\n\n  const teardown = (): void => {\n    timeout && clearTimeout(timeout);\n  };\n\n  return [debouncedFunc, teardown];\n}\n"],"names":["debounce","func","wait","timeout","args","resolve"],"mappings":"AAMgB,SAAAA,EAAgCC,EAAuBC,EAAsD,CACvH,IAAAC,EAiBG,MAAA,CAfgBC,GACrB,IAAI,QAAmBC,GAAA,CACjBF,GACF,aAAaA,CAAO,EAGtBA,EAAU,WAAW,IAAY,CACvBE,EAAAJ,EAAKG,CAAI,CAAC,GACjBF,CAAI,CAAA,CACR,EAEc,IAAY,CAC3BC,GAAW,aAAaA,CAAO,CAAA,CAGF,CACjC"}