@helsenorge/designsystem-react 1.0.0-beta89 → 1.0.0-beta94

package/components/RadioButton/styles.module.scss

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

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

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

package/components/Slider/index.d.ts

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

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

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

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import{_ as e}from"../../_rollupPluginBabelHelpers-d0752906.js";import t,{useState as n,useRef as r,useEffect as o}from"react";import{c as a}from"../../index-9b84fabc.js";import{T as i}from"../../Title-72851d51.js";import c from"./styles.module.scss";import"../Title/styles.module.scss";var u=function(e){return e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1},l=function(e){return d(e)?e.touches[0].pageX:e.pageX},s=function(e){var t=e?e.getBoundingClientRect():void 0;return t?t.right-t.left:0},d=function(e){return("touchcancel"===e.type||"touchend"===e.type||"touchenter"===e.type||"touchleave"===e.type||"touchmove"===e.type||"touchstart"===e.type)&&!(0===e.touches.length)},m=function(e,t,n){var r=e-e%t,o=Math.floor(n/t)*t;e>o&&(e>o+(n-o)/2&&(r=n));return Math.round(r)},f=t.forwardRef((function(d,f){var v=d.title,p=d.labelLeft,h=d.labelRight,_=d.disabled,g=void 0!==_&&_,E=d.step,y=void 0===E?1:E,b=d.onChange,w=d.testId,k=n(50),L=e(k,2),N=L[0],x=L[1],D=n(!1),M=e(D,2),R=M[0],A=M[1],T=n(0),j=e(T,2),B=j[0],C=j[1],P=n(0),I=e(P,2),X=I[0],H=I[1],K=n(0),S=e(K,2),U=S[0],q=S[1],z=n(0),F=e(z,2),G=F[0],J=F[1],O=f||r(null),Q=r(null),V=function(e){te(e)},W=function(e){ee(e)},Y=function(e){te(e)},Z=function(e){ee(e)};o((function(){var e=s(O.current),t=s(Q.current);q(function(e,t,n,r,o){return(t-n)/(o-r)*e}(N,e,t,0,100)),C(e),H(t)}),[]),o((function(){R&&(function(e,t){document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)}(V,W),function(e,t){document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)}(Y,Z))}),[R]),o((function(){!g&&b&&b(N)}),[N]);var $=function(e){var t;if(!g){var n=s(O.current),r=s(Q.current),o=l(e);!function(e,t,n,r){var o=t?t.getBoundingClientRect():void 0,a=o?o.left:0;r(a?e-(a+n/2):0)}(o,Q.current,r,ne),A(!0),J(o),C(n),H(r),null===(t=Q.current)||void 0===t||t.focus(),u(e)}},ee=function(e){g||(A(!1),function(e,t){document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)}(V,W),function(e,t){document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)}(Y,Z),u(e))},te=function(e){if(!g&&R){var t=l(e);ne(t-G),u(e)}},ne=function(e){if(0!==e){var t=function(e,t,n,r){var o=r+e;return o<0&&(o=0),o>t-n&&(o=t-n),o}(e,B,X,U);q(t),J(t+e),x(function(e,t,n,r,o,a){var i=(t-n)/(a-o),c=Math.round(e/i);return m(c,r,a)}(t,B,X,y,0,100))}};return t.createElement("div",{className:c.slider,"data-testid":w},v&&t.createElement(i,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},v),t.createElement("div",{ref:O,className:a(c["slider__track-wrapper"],g?c["slider__track-wrapper--disabled"]:""),onMouseDown:$,onTouchStart:$,"data-testid":"tracker"},t.createElement("div",{className:a(c.slider__track,g?c["slider__track--disabled"]:"")}),t.createElement("div",{ref:Q,className:a(c.slider__trigger,g?c["slider__trigger--disabled"]:""),style:{left:"".concat(U,"px")},onKeyDown:function(e){if(!g){var t=(B-X)/100;"ArrowRight"!==e.key&&"ArrowDown"!==e.key||ne(y*t),"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||ne(-y*t)}},role:"slider","aria-valuenow":N,"aria-valuemin":0,"aria-valuemax":100,"aria-label":"".concat(v?v+" ":"").concat(p?p+" ":"").concat(h?h+" ":""),tabIndex:g?-1:0},t.createElement("div",{className:a(c["slider__trigger-inner"],g?c["slider__trigger-inner--disabled"]:"")}))),(p||h)&&t.createElement("span",{className:c.slider__options},t.createElement("p",{className:c.slider__text,"aria-hidden":!0},p),t.createElement("p",{className:c.slider__text,"aria-hidden":!0},h)))}));export default f;
+import{_ as e}from"../../_rollupPluginBabelHelpers-d0752906.js";import t,{useState as n,useRef as r,useEffect as o}from"react";import{c as a}from"../../index-9b84fabc.js";import{T as i}from"../../Title-90910763.js";import c from"./styles.module.scss";import"../Title/styles.module.scss";var u=function(e){return e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1},l=function(e){return d(e)?e.touches[0].pageX:e.pageX},s=function(e){var t=e?e.getBoundingClientRect():void 0;return t?t.right-t.left:0},d=function(e){return("touchcancel"===e.type||"touchend"===e.type||"touchenter"===e.type||"touchleave"===e.type||"touchmove"===e.type||"touchstart"===e.type)&&!(0===e.touches.length)},m=function(e,t,n){var r=e-e%t,o=Math.floor(n/t)*t;e>o&&(e>o+(n-o)/2&&(r=n));return Math.round(r)},f=t.forwardRef((function(d,f){var v=d.title,p=d.labelLeft,h=d.labelRight,_=d.disabled,g=void 0!==_&&_,E=d.step,y=void 0===E?1:E,b=d.onChange,w=d.testId,k=n(50),L=e(k,2),x=L[0],N=L[1],D=n(!1),M=e(D,2),R=M[0],A=M[1],T=n(0),j=e(T,2),B=j[0],C=j[1],P=n(0),I=e(P,2),X=I[0],H=I[1],K=n(0),S=e(K,2),U=S[0],q=S[1],z=n(0),F=e(z,2),G=F[0],J=F[1],O=f||r(null),Q=r(null),V=function(e){te(e)},W=function(e){ee(e)},Y=function(e){te(e)},Z=function(e){ee(e)};o((function(){var e=s(O.current),t=s(Q.current);q(function(e,t,n,r,o){return(t-n)/(o-r)*e}(x,e,t,0,100)),C(e),H(t)}),[]),o((function(){R&&(function(e,t){document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)}(V,W),function(e,t){document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)}(Y,Z))}),[R]),o((function(){!g&&b&&b(x)}),[x]);var $=function(e){var t;if(!g){var n=s(O.current),r=s(Q.current),o=l(e);!function(e,t,n,r){var o=t?t.getBoundingClientRect():void 0,a=o?o.left:0;r(a?e-(a+n/2):0)}(o,Q.current,r,ne),A(!0),J(o),C(n),H(r),null===(t=Q.current)||void 0===t||t.focus(),u(e)}},ee=function(e){g||(A(!1),function(e,t){document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)}(V,W),function(e,t){document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)}(Y,Z),u(e))},te=function(e){if(!g&&R){var t=l(e);ne(t-G),u(e)}},ne=function(e){if(0!==e){var t=function(e,t,n,r){var o=r+e;return o<0&&(o=0),o>t-n&&(o=t-n),o}(e,B,X,U);q(t),J(t+e),N(function(e,t,n,r,o,a){var i=(t-n)/(a-o),c=Math.round(e/i);return m(c,r,a)}(t,B,X,y,0,100))}};return t.createElement("div",{className:c.slider,"data-testid":w},v&&t.createElement(i,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},v),t.createElement("div",{ref:O,className:a(c["slider__track-wrapper"],g?c["slider__track-wrapper--disabled"]:""),onMouseDown:$,onTouchStart:$,"data-testid":"tracker"},t.createElement("div",{className:a(c.slider__track,g?c["slider__track--disabled"]:"")}),t.createElement("div",{ref:Q,className:a(c.slider__trigger,g?c["slider__trigger--disabled"]:""),style:{left:"".concat(U,"px")},onKeyDown:function(e){if(!g){var t=(B-X)/100;"ArrowRight"!==e.key&&"ArrowDown"!==e.key||ne(y*t),"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||ne(-y*t)}},role:"slider","aria-valuenow":x,"aria-valuemin":0,"aria-valuemax":100,"aria-label":"".concat(v?v+" ":"").concat(p?p+" ":"").concat(h?h+" ":""),tabIndex:g?-1:0},t.createElement("div",{className:a(c["slider__trigger-inner"],g?c["slider__trigger-inner--disabled"]:"")}))),(p||h)&&t.createElement("span",{className:c.slider__options},t.createElement("p",{className:c.slider__text,"aria-hidden":!0},p),t.createElement("p",{className:c.slider__text,"aria-hidden":!0},h)))}));export default f;export{f as Slider};
 //# sourceMappingURL=index.js.map

package/components/Spacer/index.d.ts

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

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

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

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { HTMLTextareaProps, FormMode } from '../../constants';
+interface TextareaProps extends HTMLTextareaProps {
+    /** initial value for textarea */
+    defaultValue?: string;
+    /** max character limit in textarea  */
+    maxCharacters?: number;
+    /** The text is displayed in the end of the text-counter */
+    maxText?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** If true, the component will have a bottom margin. */
+    marginBottom?: boolean;
+    /** If true, the component will be transparent. */
+    transparent?: boolean;
+    /** Changes the visuals of the textarea */
+    mode?: keyof typeof FormMode;
+    /** Label of the input */
+    label?: string;
+    /** max rows */
+    maxRows?: number;
+    /** min rows */
+    minRows?: number;
+    /** auto-grows until maxRows */
+    grow?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;
+//# sourceMappingURL=Textarea.d.ts.map

package/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,aAAc,SAAQ,iBAAiB;IAC/C,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,2FAiHZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}