@sats-group/ui-lib 86.0.0 → 86.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "86.0.0",
+  "version": "86.1.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/toggle/toggle.d.ts

@@ -6,6 +6,7 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<import("../types").In
     name: string;
     value: string;
     spaceBetween?: boolean;
+    showBackground?: boolean;
     testId?: string;
 } & {
     children?: React.ReactNode | undefined;

package/react/toggle/toggle.js

@@ -1,2 +1,2 @@
-"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable;var d=(e,n,o)=>n in e?w(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,p=(e,n)=>{for(var o in n||(n={}))s.call(n,o)&&d(e,o,n[o]);if(r)for(var o of r(n))m.call(n,o)&&d(e,o,n[o]);return e};var _=(e,n)=>{var o={};for(var t in e)s.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&r)for(var t of r(e))n.indexOf(t)<0&&m.call(e,t)&&(o[t]=e[t]);return o};import v from"classnames";import*as l from"react";import f from"../text";import P from"../use-input-validation";const b=l.forwardRef((k,I)=>{var i=k,{children:e,isLabelVisible:n=!0,label:o,labelPosition:t="right",name:u,value:c="",spaceBetween:h,testId:N}=i,a=_(i,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId"]);const[T,x,C]=P();return l.createElement("div",{className:v("toggle",{"toggle--error":C})},l.createElement("label",{className:v("toggle__content",{"toggle__content--space-between":h}),"data-testid":N},n&&t==="left"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e),l.createElement("div",{className:"toggle__button-wrap"},l.createElement("input",p({"aria-label":n?void 0:o,className:"toggle__input",type:"checkbox",name:u,onChange:g=>{a.onChange&&a.onChange(g),T(g)},onInvalid:g=>{a.onInvalid&&a.onInvalid(g),x(g)},ref:I,value:c},a)),l.createElement("span",{className:"toggle__slider"},l.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&l.createElement("div",{className:"toggle__label"},l.createElement(f,null,o),e)))});var q=b;export{q as default};
+"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var s=(e,n,o)=>n in e?w(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,_=(e,n)=>{for(var o in n||(n={}))m.call(n,o)&&s(e,o,n[o]);if(r)for(var o of r(n))p.call(n,o)&&s(e,o,n[o]);return e};var v=(e,n)=>{var o={};for(var t in e)m.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&r)for(var t of r(e))n.indexOf(t)<0&&p.call(e,t)&&(o[t]=e[t]);return o};import f from"classnames";import*as g from"react";import u from"../text";import k from"../use-input-validation";const P=g.forwardRef((y,T)=>{var d=y,{children:e,isLabelVisible:n=!0,label:o,labelPosition:t="right",name:c,value:h="",spaceBetween:i,testId:N,showBackground:I}=d,l=v(d,["children","isLabelVisible","label","labelPosition","name","value","spaceBetween","testId","showBackground"]);const[x,C,b]=k();return g.createElement("div",{className:f("toggle",{"toggle--error":b,"toggle--space-between":i})},g.createElement("label",{className:f("toggle__content",{"toggle__content--space-between":i,"toggle__content--background":I}),"data-testid":N},n&&t==="left"&&g.createElement("div",{className:"toggle__label"},g.createElement(u,null,o),e),g.createElement("div",{className:"toggle__button-wrap"},g.createElement("input",_({"aria-label":n?void 0:o,className:"toggle__input",type:"checkbox",name:c,onChange:a=>{l.onChange&&l.onChange(a),x(a)},onInvalid:a=>{l.onInvalid&&l.onInvalid(a),C(a)},ref:T,value:h},l)),g.createElement("span",{className:"toggle__slider"},g.createElement("div",{className:"toggle__slider-element"}))),n&&t==="right"&&g.createElement("div",{className:"toggle__label"},g.createElement(u,null,o),e)))});var z=P;export{z as default};
 //# sourceMappingURL=toggle.js.map

package/react/toggle/toggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/toggle/toggle.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
-  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAWAC,IACG,CAZH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,CAvBN,EAeIR,EASKS,EAAAC,EATLV,EASK,CARH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,WAKF,KAAM,CAACW,EAAUC,EAAWC,CAAK,EAAIjB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBoB,CACnB,CAAC,GAEDnB,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,CACpC,CAAC,EACD,cAAaC,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAoB,EAAA,CACC,aAAYZ,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUU,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKhB,EACL,MAAOO,GACHG,EACN,EACAf,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOe,EAAQnB",
-  "names": ["cn", "React", "Text", "useInputValidation", "Toggle", "_a", "ref", "_b", "children", "isLabelVisible", "label", "labelPosition", "name", "value", "spaceBetween", "testId", "rest", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "toggle_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport Text from '../text';\nimport useInputValidation from '../use-input-validation';\n\nimport { Toggle as Props } from './toggle.types';\n\nconst Toggle = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      isLabelVisible = true,\n      label,\n      labelPosition = 'right',\n      name,\n      value = '',\n      spaceBetween,\n      testId,\n      showBackground,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <div\n        className={cn('toggle', {\n          'toggle--error': error,\n          'toggle--space-between': spaceBetween,\n        })}\n      >\n        <label\n          className={cn('toggle__content', {\n            'toggle__content--space-between': spaceBetween,\n            'toggle__content--background': showBackground,\n          })}\n          data-testid={testId}\n        >\n          {isLabelVisible && labelPosition === 'left' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n\n          <div className=\"toggle__button-wrap\">\n            <input\n              aria-label={isLabelVisible ? undefined : label}\n              className=\"toggle__input\"\n              type=\"checkbox\"\n              name={name}\n              onChange={e => {\n                // NOTE: If props specify an `onChange`, we need to call that too\n                if (rest.onChange) rest.onChange(e);\n                onChange(e);\n              }}\n              onInvalid={e => {\n                // NOTE: If props specify an `onInvalid`, we need to call that too\n                if (rest.onInvalid) rest.onInvalid(e);\n                onInvalid(e);\n              }}\n              ref={ref}\n              value={value}\n              {...rest}\n            />\n            <span className=\"toggle__slider\">\n              <div className=\"toggle__slider-element\"></div>\n            </span>\n          </div>\n\n          {isLabelVisible && labelPosition === 'right' && (\n            <div className=\"toggle__label\">\n              <Text>{label}</Text>\n              {children}\n            </div>\n          )}\n        </label>\n      </div>\n    );\n  },\n);\n\nexport default Toggle;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,EAYAC,IACG,CAbH,IAAAC,EAAAF,EACE,UAAAG,EACA,eAAAC,EAAiB,GACjB,MAAAC,EACA,cAAAC,EAAgB,QAChB,KAAAC,EACA,MAAAC,EAAQ,GACR,aAAAC,EACA,OAAAC,EACA,eAAAC,CAxBN,EAeIT,EAUKU,EAAAC,EAVLX,EAUK,CATH,WACA,iBACA,QACA,gBACA,OACA,QACA,eACA,SACA,mBAKF,KAAM,CAACY,EAAUC,EAAWC,CAAK,EAAIlB,EAAmB,EAExD,OACEF,EAAA,cAAC,OACC,UAAWD,EAAG,SAAU,CACtB,gBAAiBqB,EACjB,wBAAyBP,CAC3B,CAAC,GAEDb,EAAA,cAAC,SACC,UAAWD,EAAG,kBAAmB,CAC/B,iCAAkCc,EAClC,8BAA+BE,CACjC,CAAC,EACD,cAAaD,GAEZN,GAAkBE,IAAkB,QACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,EAGFP,EAAA,cAAC,OAAI,UAAU,uBACbA,EAAA,cAAC,QAAAqB,EAAA,CACC,aAAYb,EAAiB,OAAYC,EACzC,UAAU,gBACV,KAAK,WACL,KAAME,EACN,SAAUW,GAAK,CAETN,EAAK,UAAUA,EAAK,SAASM,CAAC,EAClCJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAK,WAAWA,EAAK,UAAUM,CAAC,EACpCH,EAAUG,CAAC,CACb,EACA,IAAKjB,EACL,MAAOO,GACHI,EACN,EACAhB,EAAA,cAAC,QAAK,UAAU,kBACdA,EAAA,cAAC,OAAI,UAAU,yBAAyB,CAC1C,CACF,EAECQ,GAAkBE,IAAkB,SACnCV,EAAA,cAAC,OAAI,UAAU,iBACbA,EAAA,cAACC,EAAA,KAAMQ,CAAM,EACZF,CACH,CAEJ,CACF,CAEJ,CACF,EAEA,IAAOgB,EAAQpB",
+  "names": ["cn", "React", "Text", "useInputValidation", "Toggle", "_a", "ref", "_b", "children", "isLabelVisible", "label", "labelPosition", "name", "value", "spaceBetween", "testId", "showBackground", "rest", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "toggle_default"]
 }

package/react/toggle/toggle.scss

@@ -1,5 +1,6 @@
 @use '../../tokens/colours';
-@use '../../tokens/spacing.scss';
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
 
 .toggle {
   $block: &;
@@ -7,6 +8,12 @@
   $sizeHeight: 20px;
   box-sizing: border-box;
 
+  display: flex;
+  &--space-between {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   &__content {
     display: flex;
     align-items: center;
@@ -15,6 +22,13 @@
 
     &--space-between {
       justify-content: space-between;
+      width: 100%;
+    }
+
+    &--background {
+      background-color: var(--surface-secondary-default);
+      padding: spacing.$s;
+      border-radius: corner-radius.$circle;
     }
   }
 

package/react/toggle/toggle.types.d.ts

@@ -6,5 +6,6 @@ export type Toggle = Omit<InputHtmlProps, 'value'> & {
     name: string;
     value: string;
     spaceBetween?: boolean;
+    showBackground?: boolean;
     testId?: string;
 };

package/tokens/corner-radius.scss

@@ -3,3 +3,4 @@ $xs: 4px;
 $s: 8px;
 $m: 12px;
 $l: 24px;
+$circle: 100px;