@helsenorge/designsystem-react 2.0.0 → 2.1.0

package/HorizontalScroll.js

@@ -1,2 +1,2 @@
-import t,{useRef as l}from"react";import s from"classnames";import{useIsVisible as c}from"./hooks/useIsVisible.js";import r from"./components/HorizontalScroll/styles.module.scss";const n="3px",z=({children:a})=>{const o=l(null),e=l(null),i=l(null),m=c(e,1,{root:o==null?void 0:o.current,rootMargin:n},!0),_=c(i,1,{root:o==null?void 0:o.current,rootMargin:n},!0);return t.createElement("div",{className:r.horizontalscroll},t.createElement("div",{className:r.horizontalscroll__viewport,ref:o},t.createElement("div",{className:s(r.horizontalscroll__indicator,r["horizontalscroll__indicator--left"],!m&&r["horizontalscroll__indicator--visible"])}),t.createElement("div",{className:s(r.horizontalscroll__indicator,r["horizontalscroll__indicator--right"],!_&&r["horizontalscroll__indicator--visible"])}),t.createElement("div",{ref:e}),a,t.createElement("div",{ref:i})))};export{z as H};
+import t,{useRef as l}from"react";import e from"classnames";import{useIsVisible as n}from"./hooks/useIsVisible.js";import{useSize as v}from"./hooks/useSize.js";import o from"./components/HorizontalScroll/styles.module.scss";const c="3px",b=({children:a,childWidth:m})=>{const r=l(null),i=l(null),s=l(null),_=n(i,1,{root:r==null?void 0:r.current,rootMargin:c},!0),d=n(s,1,{root:r==null?void 0:r.current,rootMargin:c},!0),{width:h=0}=v(r)||{},f=m>h,u=e(o.horizontalscroll__viewport,f&&o["horizontalscroll__viewport--overflow"]);return t.createElement("div",{className:o.horizontalscroll},t.createElement("div",{className:u,ref:r},t.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--left"],!_&&o["horizontalscroll__indicator--visible"])}),t.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--right"],!d&&o["horizontalscroll__indicator--visible"])}),t.createElement("div",{ref:i}),a,t.createElement("div",{ref:s})))};export{b as H};
 //# sourceMappingURL=HorizontalScroll.js.map

package/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\nexport const HorizontalScroll: React.FC = ({ children }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n\n  return (\n    <div className={styles.horizontalscroll}>\n      <div className={styles.horizontalscroll__viewport} ref={viewportRef}>\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","React","styles","classNames"],"mappings":"mLAMA,MAAMA,EAAqB,MAEdC,EAA6B,CAAC,CAAE,SAAAC,KAAe,CACpD,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYH,CAAmB,EAAG,EAAI,EAC7GS,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYH,CAAmB,EAAG,EAAI,EAErH,OACGU,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,gBAAA,EACpBD,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,2BAA4B,IAAKR,CAAA,EACrDO,EAAA,cAAA,MAAA,CACC,UAAWE,EACTD,EAAO,4BACPA,EAAO,qCACP,CAACJ,GAAiBI,EAAO,uCAC3B,CAAA,CACF,EACCD,EAAA,cAAA,MAAA,CACC,UAAWE,EACTD,EAAO,4BACPA,EAAO,sCACP,CAACF,GAAkBE,EAAO,uCAC5B,CAAA,CACF,EACCD,EAAA,cAAA,MAAA,CAAI,IAAKL,CAAS,CAAA,EAClBH,EACAQ,EAAA,cAAA,MAAA,CAAI,IAAKJ,CAAU,CAAA,CACtB,CACF,CAEJ"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps> = ({ children, childWidth }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n\n  return (\n    <div className={styles.horizontalscroll}>\n      <div className={viewportClasses} ref={viewportRef}>\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","React"],"mappings":"gOAOA,MAAMA,EAAqB,MASdC,EAAoD,CAAC,CAAE,SAAAC,EAAU,WAAAC,KAAiB,CACvF,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYJ,CAAmB,EAAG,EAAI,EAC7GU,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYJ,CAAmB,EAAG,EAAI,EAC/G,CAAE,MAAOW,EAAgB,GAAMC,EAAQR,CAAW,GAAK,GAEvDS,EAAgBV,EAAaQ,EAC7BG,EAAkBC,EAAWC,EAAO,2BAA4BH,GAAiBG,EAAO,uCAAuC,EAErI,OACGC,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,gBAAA,EACpBC,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAiB,IAAKV,CAAA,EACnCa,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,qCACP,CAACR,GAAiBQ,EAAO,uCAC3B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,sCACP,CAACN,GAAkBM,EAAO,uCAC5B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CAAI,IAAKX,CAAS,CAAA,EAClBJ,EACAe,EAAA,cAAA,MAAA,CAAI,IAAKV,CAAU,CAAA,CACtB,CACF,CAEJ"}

package/components/ExpanderList/styles.module.scss

@@ -119,7 +119,7 @@
 
   &--jsx {
     &:focus {
-      box-shadow: inset 0px 2px 0px 0px $neutral500, inset 0px -2px 0px 0px $neutral500;
+      box-shadow: 0px 3px 0px $neutral500, 0px -3px 0px $neutral500;
     }
   }
 

package/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
-export declare const HorizontalScroll: React.FC;
+interface HorizontalScrollProps {
+    /**
+     * Bredden på elementet som potensielt vil scrolle horisontalt i px
+     */
+    childWidth: number;
+}
+export declare const HorizontalScroll: React.FC<HorizontalScrollProps>;
 export default HorizontalScroll;
 //# sourceMappingURL=HorizontalScroll.d.ts.map

package/components/HorizontalScroll/HorizontalScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA8BpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,UAAU,qBAAqB;IAC7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkC5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/HorizontalScroll/componentdata.json

@@ -1 +1 @@
-{"props":{}}
+{"props":{"childWidth":{"defaultValue":null,"description":"Bredden på elementet som potensielt vil scrolle horisontalt i px","name":"childWidth","parent":{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"},"declarations":[{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"}],"required":true,"type":{"name":"number"}}}}

package/components/HorizontalScroll/index.js

@@ -1,2 +1,2 @@
-import"../../HorizontalScroll.js";import{H as f,H as s}from"../../HorizontalScroll.js";import"react";import"classnames";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"./styles.module.scss";export{f as HorizontalScroll,s as default};
+import"../../HorizontalScroll.js";import{H as c,H as e}from"../../HorizontalScroll.js";import"react";import"classnames";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../../debounce.js";import"./styles.module.scss";export{c as HorizontalScroll,e as default};
 //# sourceMappingURL=index.js.map

package/components/HorizontalScroll/styles.module.scss

@@ -6,10 +6,10 @@ $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
   transform: translateZ(0); // Gjør at position: fixed på child-elementer er relativ til denne parenten
   &__viewport {
     display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    // overflow-settingene har en tendens til å klippe 1px av innholdet
-    padding: 1px;
+    &--overflow {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
   }
   &__indicator {
     position: fixed;

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

@@ -5,6 +5,7 @@ export type Styles = {
   'horizontalscroll__indicator--right': string;
   'horizontalscroll__indicator--visible': string;
   horizontalscroll__viewport: string;
+  'horizontalscroll__viewport--overflow': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Progressbar/Dot.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DotProps {
+    index: number;
+    completed: boolean;
+    distanceBetweenDots: number;
+}
+declare const Dot: React.FC<DotProps>;
+export default Dot;
+//# sourceMappingURL=Dot.d.ts.map

package/components/Progressbar/Dot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/Dot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAM7C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAK3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/Progressbar/DotList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DotListProps {
+    allowedValues: number[];
+    currentValue: number;
+    distanceBetweenDots: number;
+}
+declare const Dots: React.FC<DotListProps>;
+export default Dots;
+//# sourceMappingURL=DotList.d.ts.map

package/components/Progressbar/DotList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotList.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/DotList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,YAAY;IACpB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Progressbar/Progressbar.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ProgressbarProps {
+    /**
+     * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!
+     */
+    ariaLabel?: string;
+    /**
+     * Sets aria-labelledby of the progressbar. ariaLabel or ariaLabelledById MUST be set!
+     */
+    ariaLabelledById?: string;
+    /**
+     * Current value. Must be between min and max
+     */
+    value?: number;
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Progressbar: React.FC<ProgressbarProps>;
+export default Progressbar;
+//# sourceMappingURL=Progressbar.d.ts.map

package/components/Progressbar/Progressbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progressbar.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwC3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/Progressbar/componentdata.json

@@ -0,0 +1 @@
+{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabel","parent":{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"},"declarations":[{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"}],"required":false,"type":{"name":"string"}},"ariaLabelledById":{"defaultValue":null,"description":"Sets aria-labelledby of the progressbar. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabelledById","parent":{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"},"declarations":[{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"}],"required":false,"type":{"name":"string"}},"value":{"defaultValue":null,"description":"Current value. Must be between min and max","name":"value","parent":{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"},"declarations":[{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"}],"required":false,"type":{"name":"number"}},"min":{"defaultValue":{"value":"0"},"description":"Minimum value","name":"min","parent":{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"},"declarations":[{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"}],"required":false,"type":{"name":"number"}},"max":{"defaultValue":{"value":"2"},"description":"Maximum value","name":"max","parent":{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"},"declarations":[{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"},"declarations":[{"fileName":"src/components/Progressbar/Progressbar.tsx","name":"ProgressbarProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Progressbar/index.d.ts

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

package/components/Progressbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,eAAe,WAAW,CAAC"}

package/components/Progressbar/index.js

@@ -0,0 +1,2 @@
+import r,{useRef as D}from"react";import{useSize as A}from"../../hooks/useSize.js";import R from"classnames";import n from"./styles.module.scss";import{g as N}from"../../accessibility.js";import{AnalyticsId as h}from"../../constants.js";import"../../debounce.js";const x=4,E=24,v=8,k=(e,t)=>e<t?e:t-1,I=(e,t)=>t<e?e:t,X=(e,t,a)=>typeof e>"u"||e<t?t:e>a?a:e,$=e=>Math.floor(e/(E+x)),S=(e,t)=>(e-E)/(t-1),B=(e,t)=>e*t,O=(e,t)=>Array.from(Array(t-e+1),(a,s)=>s+e),T=(e,t,a)=>{const s=k(t,a),o=I(s,a);return{validatedValue:X(e,s,o),validatedMin:s,validatedMax:o}},W=({index:e,completed:t,distanceBetweenDots:a})=>{const s=R(n.progressbar__dot,t&&n["progressbar__dot--completed"]),o={left:`${e*a+v}px`};return r.createElement("span",{className:s,style:o,"data-testid":"dot"})},C=({allowedValues:e,currentValue:t,distanceBetweenDots:a})=>r.createElement(r.Fragment,null,e.map((s,o)=>r.createElement(W,{index:o,key:s,completed:s<t,distanceBetweenDots:a}))),q=({ariaLabelledById:e,ariaLabel:t,value:a,min:s=0,max:o=2,testId:d})=>{const m=D(null),p=D(null),{width:M=0}=A(m)||{},{width:u=0}=A(p)||{},{validatedValue:l,validatedMin:g,validatedMax:c}=T(a,s,o),i=O(g,c),w=i.indexOf(l),P=$(M),f=S(u,i.length),_=B(f,w),b=i.length<=P,V=l===c,y=N({label:t,id:e});return r.createElement("div",{className:n["progressbar-wrapper"],ref:m},r.createElement("span",{role:"progressbar",...y,"aria-valuenow":l,"aria-valuemin":g,"aria-valuemax":c,className:n.progressbar,style:{backgroundPositionX:`${V?u:_}px`},ref:p,"data-testid":d,"data-analyticsid":h.Progressbar},b&&r.createElement(C,{allowedValues:i,currentValue:l,distanceBetweenDots:f}),r.createElement("span",{className:n.progressbar__marker,style:{left:`${_}px`}})),!b&&r.createElement("span",{className:n.progressbar__number},`${l}/${c}`))};export{q as default};
+//# sourceMappingURL=index.js.map

package/components/Progressbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/utils.ts","../../../src/components/Progressbar/Dot.tsx","../../../src/components/Progressbar/DotList.tsx","../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på progressbar\n */\nexport const PROGRESS_BAR_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param progressbarWidth Bredde på progressbar\n * @returns Antall prikker\n */\nexport const getMaximumDots = (progressbarWidth: number): number =>\n  Math.floor(progressbarWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param progressbarWidth Bredde på progressbar\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (progressbarWidth: number, dots: number): number => (progressbarWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i progressbar\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\nimport React, { CSSProperties } from 'react';\n\nimport { PROGRESS_BAR_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index: number;\n  completed: boolean;\n  distanceBetweenDots: number;\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots }) => {\n  const classes = classNames(styles.progressbar__dot, completed && styles['progressbar__dot--completed']);\n  const style: CSSProperties = { left: `${index * distanceBetweenDots + PROGRESS_BAR_PADDING_X_PX}px` };\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport { useSize } from '../../hooks/useSize';\n\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /**\n   * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: progressbarWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(progressbarWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['progressbar-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.progressbar}\n        style={{\n          backgroundPositionX: `${isCompleted ? progressbarWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Progressbar}\n      >\n        {showDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        <span className={styles.progressbar__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showDots && <span className={styles.progressbar__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","PROGRESS_BAR_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","progressbarWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","classes","classNames","styles","style","React","Dots","allowedValues","currentValue","Progressbar","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","DotList"],"mappings":"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"}

package/components/Progressbar/styles.module.scss

@@ -0,0 +1,83 @@
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_font-settings.scss';
+
+.progressbar-wrapper {
+  display: flex;
+  align-items: center;
+  min-height: getSpacer(l);
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    min-height: getSpacer(xl);
+  }
+}
+
+$transition: 0.4s linear 0s;
+
+/**
+ * Bredde og høyde på markør
+ */
+$markerSize: 24px;
+
+/**
+ * Bredde og høyde på prikk
+ */
+$dotSize: 8px;
+
+/**
+ * Høyde på progressbar
+ */
+$progressbarHeight: 12px;
+
+/**
+ * Horisontal padding på progressbar
+ */
+$progressbarPaddingX: 8px;
+
+/**
+ * Avstand fra venstre kant av progressbar til midten av første prikk
+ */
+$dotOffset: calc($progressbarPaddingX + $dotSize / 2);
+
+.progressbar {
+  flex-grow: 1;
+  position: relative;
+  display: block;
+  height: $progressbarHeight;
+  border-radius: 4px;
+  background: linear-gradient(to right, $blueberry600, $blueberry600 $dotOffset, $blueberry50 $dotOffset, $blueberry50), $blueberry600;
+  background-repeat: no-repeat;
+  transition: background-position $transition;
+
+  &__marker {
+    position: absolute;
+    width: $markerSize;
+    height: $markerSize;
+    top: calc(($progressbarHeight - $markerSize) / 2);
+    background-color: $white;
+    border: 6px solid $blueberry600;
+    border-radius: 50%;
+    transition: left $transition;
+  }
+
+  &__number {
+    margin-left: getSpacer(xs);
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
+    font-weight: 700;
+    color: $blueberry700;
+  }
+
+  &__dot {
+    position: absolute;
+    top: calc(($progressbarHeight - $dotSize) / 2);
+    width: $dotSize;
+    height: $dotSize;
+    background-color: $blueberry600;
+    border-radius: 50%;
+    transition: background-color $transition;
+    &--completed {
+      background-color: $blueberry50;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+export type Styles = {
+  progressbar: string;
+  progressbar__dot: string;
+  'progressbar__dot--completed': string;
+  progressbar__marker: string;
+  progressbar__number: string;
+  'progressbar-wrapper': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Progressbar/utils.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Horisontal padding på progressbar
+ */
+export declare const PROGRESS_BAR_PADDING_X_PX = 8;
+/**
+ * Valider at minimum-verdi er innenfor gyldig område
+ * @param min Mimimum-verdi
+ * @param max Maksimum-verdi
+ * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi
+ */
+export declare const getValidatedMin: (min: number, max: number) => number;
+/**
+ * Valider at maksimum-verdi er innenfor gyldig område
+ * @param min Mimimum-verdi
+ * @param max Maksimum-verdi
+ * @returns Maksimum-verdi, ikke mindre enn minimum-verdi
+ */
+export declare const getValidatedMax: (min: number, max: number) => number;
+/**
+ * Valider at verdi er innenfor gyldig område
+ * @param value Nåværende verdi
+ * @param min Mimimum-verdi
+ * @param max Maksimum-verdi
+ * @returns Verdi, ikke mindre enn 0, ikke mer enn max
+ */
+export declare const getValidatedValue: (value: number | undefined, min: number, max: number) => number;
+/**
+ * Finn antall prikker det er plass til
+ * @param progressbarWidth Bredde på progressbar
+ * @returns Antall prikker
+ */
+export declare const getMaximumDots: (progressbarWidth: number) => number;
+/**
+ * Beregn riktig distance mellom prikker
+ * @param progressbarWidth Bredde på progressbar
+ * @param dots Antall prikker som skal vises
+ * @returns Distanse mellom prikker
+ */
+export declare const getDistanceBetweenDots: (progressbarWidth: number, dots: number) => number;
+/**
+ * Beregn riktig plassering av markør
+ * @param distanceBetweenDots Distanse mellom prikker
+ * @param index Nåværende verdi i progressbar
+ * @returns Plassering til markør fra venstre
+ */
+export declare const getMarkerPosition: (distanceBetweenDots: number, index: number) => number;
+/**
+ * Lag liste med tillate verdier fra min til maks
+ * @param min Mimimum-verdi
+ * @param max Maksimum-verdi
+ * @returns Liste med verdier
+ */
+export declare const getAllowedValues: (min: number, max: number) => number[];
+/**
+ * Valider props som skal brukes til beregning av posisjon m.m.
+ * @param value Nåværende verdi
+ * @param min Mimimum-verdi
+ * @param max Maksimum-verdi
+ * @returns Objekt med gyldige verdier
+ */
+export declare const getValidatedProps: (value: number | undefined, min: number, max: number) => {
+    validatedValue: number;
+    validatedMin: number;
+    validatedMax: number;
+};
+//# sourceMappingURL=utils.d.ts.map

package/components/Progressbar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/utils.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MAAqC,CAAC;AAEjG;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MAAiC,CAAC;AAE7F;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,SAAS,OAAO,MAAM,OAAO,MAAM,KAAG,MAMvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,qBAAsB,MAAM,KAAG,MACqB,CAAC;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,qBAAsB,MAAM,QAAQ,MAAM,KAAG,MAA2D,CAAC;AAE5I;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,wBAAyB,MAAM,SAAS,MAAM,KAAG,MAAqC,CAAC;AAErH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,QAAS,MAAM,OAAO,MAAM,KAAG,MAAM,EAAiE,CAAC;AAEpI;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,UACrB,MAAM,GAAG,SAAS,OACpB,MAAM,OACN,MAAM;oBACQ,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;CAMtE,CAAC"}

package/components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,gBAAgB,qBAAqB;IACrC;;OAEG;IACH,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,+DAMf,KAAK,gBAcP,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,gBAAgB,qBAAqB;IACrC;;OAEG;IACH,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,+DAMf,KAAK,gBAgBP,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import r from"react";import s from"classnames";import t from"./styles.module.scss";import{AnalyticsId as c}from"../../constants.js";import{H as b}from"../../HorizontalScroll.js";import{T as P}from"../../TableBody.js";import{T as U,a as W}from"../../TableCell.js";import{T as Y}from"../../TableExpandedRow.js";import{T as _}from"../../TableExpanderCell.js";import{H as V,T as oo}from"../../TableHead.js";import{S as to,T as ao}from"../../TableHeadCell.js";import{T as lo}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../Button.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var n=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(n||{});const L=function({id:a,testId:e,className:l,children:m,smallViewportVariant:i="horizontalscroll"}){const p=s(t.table,{[t["table--collapse2col"]]:i==="block"},l);return r.createElement(b,null,r.createElement("table",{className:p,id:a,"data-testid":e,"data-analyticsid":c.Table},m))};export{V as HeaderCategory,n as SmallViewportVariant,to as SortDirection,L as Table,P as TableBody,U as TableCell,Y as TableExpandedRow,_ as TableExpanderCell,oo as TableHead,ao as TableHeadCell,lo as TableRow,W as TextAlign,L as default};
+import r,{useRef as b}from"react";import n from"classnames";import e from"./styles.module.scss";import{AnalyticsId as f}from"../../constants.js";import{H as T}from"../../HorizontalScroll.js";import{useSize as d}from"../../hooks/useSize.js";import{T as X}from"../../TableBody.js";import{T as Z,a as _}from"../../TableCell.js";import{T as V}from"../../TableExpandedRow.js";import{T as to}from"../../TableExpanderCell.js";import{H as eo,T as ao}from"../../TableHead.js";import{S as mo,T as io}from"../../TableHeadCell.js";import{T as so}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../debounce.js";import"../../Button.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var x=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(x||{});const P=function({id:a,testId:l,className:m,children:i,smallViewportVariant:p="horizontalscroll"}){const t=b(null),{width:s=0}=d(t)||{},c=n(e.table,{[e["table--collapse2col"]]:p==="block"},m);return r.createElement(T,{childWidth:s},r.createElement("table",{className:c,id:a,"data-testid":l,"data-analyticsid":f.Table,ref:t},i))};export{eo as HeaderCategory,x as SmallViewportVariant,mo as SortDirection,P as Table,X as TableBody,Z as TableCell,V as TableExpandedRow,to as TableExpanderCell,ao as TableHead,io as TableHeadCell,so as TableRow,_ as TextAlign,P as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\n\nexport const Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"2sCAQY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACR,MAAMC,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBH,IAAyB,OAA2B,EAC5FF,CAAA,EAIA,OAAAM,EAAA,cAACC,OACED,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAL,EAAQ,cAAaC,EAAQ,mBAAkBS,EAAY,KAAA,EACtFP,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\n\nexport const Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll childWidth={tableWidth}>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableRef","useRef","tableWidth","useSize","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"4uCASY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACF,MAAAC,EAAWC,EAAyB,IAAI,EACxC,CAAE,MAAOC,EAAa,GAAMC,EAAQH,CAAQ,GAAK,GACjDI,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBP,IAAyB,OAA2B,EAC5FF,CAAA,EAGF,OACGU,EAAA,cAAAC,EAAA,CAAiB,WAAYN,CAAA,EAC3BK,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAT,EAAQ,cAAaC,EAAQ,mBAAkBa,EAAY,MAAO,IAAKT,CAAA,EAClGF,CACH,CACF,CAEJ"}

package/components/Table/styles.module.scss

@@ -178,6 +178,9 @@ table tbody tr {
 }
 
 .table__head-cell {
+  // Fix for firefox hover feil
+  background-clip: padding-box;
+
   height: 3.625rem;
   font-size: $font-size-sm;
   line-height: 1.5rem;

package/constants.d.ts

@@ -75,6 +75,7 @@ export declare enum AnalyticsId {
     Panel = "panel",
     PanelList = "panel-list",
     Portal = "portal",
+    Progressbar = "progressbar",
     RadioButton = "radio-button",
     Slider = "slider",
     Spacer = "spacer",

package/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"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"}

package/constants.js

@@ -1,2 +1,2 @@
-var o=(r=>(r[r.XXSmall=24]="XXSmall",r[r.XSmall=38]="XSmall",r[r.Small=48]="Small",r[r.Medium=64]="Medium",r[r.Large=80]="Large",r[r.XLarge=130]="XLarge",r))(o||{}),e=(r=>(r[r.Modal=13e5]="Modal",r[r.ExpanderTrigger=1e4]="ExpanderTrigger",r))(e||{}),a=(r=>(r.onwhite="onwhite",r.ongrey="ongrey",r.onblueberry="onblueberry",r.ondark="ondark",r.oninvalid="oninvalid",r))(a||{}),p=(r=>(r.normal="normal",r.bigform="bigform",r))(p||{}),l=(r=>(r.AnchorLink="anchor-link",r.Avatar="avatar",r.Badge="badge",r.Button="button",r.Checkbox="checkbox",r.Close="close",r.Dropdown="dropdown",r.Duolist="duolist",r.Expander="expander",r.ExpanderList="expander-list",r.ExpanderListExpander="expander-list-expander",r.FormGroup="form-group",r.FormLayout="form-layout",r.HelpBubble="help-bubble",r.HighlightBox="highlight-box",r.Icon="icon",r.Input="input",r.Link="link",r.LinkList="link-list",r.List="list",r.Loader="loader",r.Logo="logo",r.Modal="modal",r.NotificationPanel="notification-panel",r.Panel="panel",r.PanelList="panel-list",r.Portal="portal",r.RadioButton="radio-button",r.Slider="slider",r.Spacer="spacer",r.StatusDot="status-dot",r.Table="table",r.Tag="tag",r.TagList="tag-list",r.Textarea="textarea",r.Tile="tile",r.Title="title",r.Tooltip="tooltip",r.Validation="validation",r))(l||{}),u=(r=>(r.Enter="Enter",r.Escape="Escape",r.ArrowDown="ArrowDown",r.ArrowUp="ArrowUp",r.Home="Home",r.End="End",r))(u||{});export{l as AnalyticsId,a as FormMode,p as FormVariant,o as IconSize,u as KeyboardEventKey,e as ZIndex};
+var o=(r=>(r[r.XXSmall=24]="XXSmall",r[r.XSmall=38]="XSmall",r[r.Small=48]="Small",r[r.Medium=64]="Medium",r[r.Large=80]="Large",r[r.XLarge=130]="XLarge",r))(o||{}),e=(r=>(r[r.Modal=13e5]="Modal",r[r.ExpanderTrigger=1e4]="ExpanderTrigger",r))(e||{}),a=(r=>(r.onwhite="onwhite",r.ongrey="ongrey",r.onblueberry="onblueberry",r.ondark="ondark",r.oninvalid="oninvalid",r))(a||{}),p=(r=>(r.normal="normal",r.bigform="bigform",r))(p||{}),g=(r=>(r.AnchorLink="anchor-link",r.Avatar="avatar",r.Badge="badge",r.Button="button",r.Checkbox="checkbox",r.Close="close",r.Dropdown="dropdown",r.Duolist="duolist",r.Expander="expander",r.ExpanderList="expander-list",r.ExpanderListExpander="expander-list-expander",r.FormGroup="form-group",r.FormLayout="form-layout",r.HelpBubble="help-bubble",r.HighlightBox="highlight-box",r.Icon="icon",r.Input="input",r.Link="link",r.LinkList="link-list",r.List="list",r.Loader="loader",r.Logo="logo",r.Modal="modal",r.NotificationPanel="notification-panel",r.Panel="panel",r.PanelList="panel-list",r.Portal="portal",r.Progressbar="progressbar",r.RadioButton="radio-button",r.Slider="slider",r.Spacer="spacer",r.StatusDot="status-dot",r.Table="table",r.Tag="tag",r.TagList="tag-list",r.Textarea="textarea",r.Tile="tile",r.Title="title",r.Tooltip="tooltip",r.Validation="validation",r))(g||{}),u=(r=>(r.Enter="Enter",r.Escape="Escape",r.ArrowDown="ArrowDown",r.ArrowUp="ArrowUp",r.Home="Home",r.End="End",r))(u||{});export{g as AnalyticsId,a as FormMode,p as FormVariant,o as IconSize,u as KeyboardEventKey,e as ZIndex};
 //# sourceMappingURL=constants.js.map

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  ExpanderTrigger = 10000,\n}\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormVariant {\n  normal = 'normal',\n  bigform = 'bigform',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Close = 'close',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  Expander = 'expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Input = 'input',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  Portal = 'portal',\n  RadioButton = 'radio-button',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  Home = 'Home',\n  End = 'End',\n}\n"],"names":["IconSize","ZIndex","FormMode","FormVariant","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,GAAAA,IACVA,EAAAA,EAAA,QAAU,IAAV,UACAA,EAAAA,EAAA,OAAS,IAAT,SACAA,EAAAA,EAAA,MAAQ,IAAR,QACAA,EAAAA,EAAA,OAAS,IAAT,SACAA,EAAAA,EAAA,MAAQ,IAAR,QACAA,EAAAA,EAAA,OAAS,KAAT,SANUA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACVA,EAAAA,EAAA,MAAQ,MAAR,QACAA,EAAAA,EAAA,gBAAkB,KAAlB,kBAFUA,IAAAA,GAAA,CAAA,CAAA,EA4CAC,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,OAAS,SACTA,EAAA,UAAY,YALFA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UAFAA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,WAAa,cACbA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,aAAe,gBACfA,EAAA,qBAAuB,yBACvBA,EAAA,UAAY,aACZA,EAAA,WAAa,cACbA,EAAA,WAAa,cACbA,EAAA,aAAe,gBACfA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,SAAW,YACXA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,kBAAoB,qBACpBA,EAAA,MAAQ,QACRA,EAAA,UAAY,aACZA,EAAA,OAAS,SACTA,EAAA,YAAc,eACdA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,UAAY,aACZA,EAAA,MAAQ,QACRA,EAAA,IAAM,MACNA,EAAA,QAAU,WACVA,EAAA,SAAW,WACXA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,WAAa,aAvCHA,IAAAA,GAAA,CAAA,CAAA,EA0CAC,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,UAAY,YACZA,EAAA,QAAU,UACVA,EAAA,KAAO,OACPA,EAAA,IAAM,MANIA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  ExpanderTrigger = 10000,\n}\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormVariant {\n  normal = 'normal',\n  bigform = 'bigform',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Close = 'close',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  Expander = 'expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HighlightBox = 'highlight-box',\n  Icon = 'icon',\n  Input = 'input',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  Portal = 'portal',\n  Progressbar = 'progressbar',\n  RadioButton = 'radio-button',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  Home = 'Home',\n  End = 'End',\n}\n"],"names":["IconSize","ZIndex","FormMode","FormVariant","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,GAAAA,IACVA,EAAAA,EAAA,QAAU,IAAV,UACAA,EAAAA,EAAA,OAAS,IAAT,SACAA,EAAAA,EAAA,MAAQ,IAAR,QACAA,EAAAA,EAAA,OAAS,IAAT,SACAA,EAAAA,EAAA,MAAQ,IAAR,QACAA,EAAAA,EAAA,OAAS,KAAT,SANUA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACVA,EAAAA,EAAA,MAAQ,MAAR,QACAA,EAAAA,EAAA,gBAAkB,KAAlB,kBAFUA,IAAAA,GAAA,CAAA,CAAA,EA4CAC,GAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,OAAS,SACTA,EAAA,UAAY,YALFA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UAFAA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,WAAa,cACbA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,aAAe,gBACfA,EAAA,qBAAuB,yBACvBA,EAAA,UAAY,aACZA,EAAA,WAAa,cACbA,EAAA,WAAa,cACbA,EAAA,aAAe,gBACfA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,SAAW,YACXA,EAAA,KAAO,OACPA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,kBAAoB,qBACpBA,EAAA,MAAQ,QACRA,EAAA,UAAY,aACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,YAAc,eACdA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,UAAY,aACZA,EAAA,MAAQ,QACRA,EAAA,IAAM,MACNA,EAAA,QAAU,WACVA,EAAA,SAAW,WACXA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,WAAa,aAxCHA,IAAAA,GAAA,CAAA,CAAA,EA2CAC,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,UAAY,YACZA,EAAA,QAAU,UACVA,EAAA,KAAO,OACPA,EAAA,IAAM,MANIA,IAAAA,GAAA,CAAA,CAAA"}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {