@sats-group/ui-lib 86.0.0 → 86.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/react/modal/modal.scss +28 -2
- package/react/toggle/toggle.d.ts +1 -0
- package/react/toggle/toggle.js +1 -1
- package/react/toggle/toggle.js.map +3 -3
- package/react/toggle/toggle.scss +15 -1
- package/react/toggle/toggle.types.d.ts +1 -0
- package/tokens/corner-radius.scss +1 -0
package/package.json
CHANGED
package/react/modal/modal.scss
CHANGED
|
@@ -10,13 +10,18 @@
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
$max-width: 499px;
|
|
14
|
+
|
|
13
15
|
border: none;
|
|
14
16
|
display: none;
|
|
15
17
|
padding: 0;
|
|
16
18
|
overflow: hidden;
|
|
17
19
|
width: 100vw;
|
|
18
|
-
height:
|
|
19
|
-
height:
|
|
20
|
+
height: 95vh;
|
|
21
|
+
height: 95svh;
|
|
22
|
+
border-top-right-radius: spacing.$s;
|
|
23
|
+
border-top-left-radius: spacing.$s;
|
|
24
|
+
margin-bottom: 0;
|
|
20
25
|
|
|
21
26
|
@include break {
|
|
22
27
|
@include elevation.level(24);
|
|
@@ -24,6 +29,7 @@
|
|
|
24
29
|
border-radius: corner-radius.$s;
|
|
25
30
|
max-width: 640px;
|
|
26
31
|
height: fit-content;
|
|
32
|
+
margin: auto;
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
&::backdrop {
|
|
@@ -34,8 +40,28 @@
|
|
|
34
40
|
);
|
|
35
41
|
}
|
|
36
42
|
|
|
43
|
+
@function transition($timing-function) {
|
|
44
|
+
@return transform 0.3s $timing-function,
|
|
45
|
+
display 0.3s $timing-function allow-discrete,
|
|
46
|
+
overlay 0.3s $timing-function allow-discrete;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (max-width: $max-width) and (prefers-reduced-motion: no-preference) {
|
|
50
|
+
transform: translateY(100%);
|
|
51
|
+
transition: transition(ease-in);
|
|
52
|
+
}
|
|
53
|
+
|
|
37
54
|
&:popover-open {
|
|
38
55
|
display: block;
|
|
56
|
+
|
|
57
|
+
@media ((max-width: $max-width) and (prefers-reduced-motion: no-preference)) {
|
|
58
|
+
transform: translateY(0);
|
|
59
|
+
transition: transition(ease-out);
|
|
60
|
+
|
|
61
|
+
@starting-style {
|
|
62
|
+
transform: translateY(100%);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
39
65
|
}
|
|
40
66
|
|
|
41
67
|
:root:has(&:popover-open) {
|
package/react/toggle/toggle.d.ts
CHANGED
package/react/toggle/toggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var w=Object.defineProperty;var r=Object.getOwnPropertySymbols;var
|
|
1
|
+
"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};
|
|
2
2
|
//# sourceMappingURL=toggle.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/toggle/toggle.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAU,UACjB,OAAOC,MAAwB,0BAI/B,MAAMC,EAASH,EAAM,WAInB,CACEI,
|
|
6
|
-
"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"]
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
package/react/toggle/toggle.scss
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use '../../tokens/colours';
|
|
2
|
-
@use '../../tokens/spacing
|
|
2
|
+
@use '../../tokens/spacing';
|
|
3
|
+
@use '../../tokens/corner-radius';
|
|
3
4
|
|
|
4
5
|
.toggle {
|
|
5
6
|
$block: &;
|
|
@@ -7,6 +8,12 @@
|
|
|
7
8
|
$sizeHeight: 20px;
|
|
8
9
|
box-sizing: border-box;
|
|
9
10
|
|
|
11
|
+
display: flex;
|
|
12
|
+
&--space-between {
|
|
13
|
+
width: 100%;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
}
|
|
16
|
+
|
|
10
17
|
&__content {
|
|
11
18
|
display: flex;
|
|
12
19
|
align-items: center;
|
|
@@ -15,6 +22,13 @@
|
|
|
15
22
|
|
|
16
23
|
&--space-between {
|
|
17
24
|
justify-content: space-between;
|
|
25
|
+
width: 100%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&--background {
|
|
29
|
+
background-color: var(--surface-secondary-default);
|
|
30
|
+
padding: spacing.$s;
|
|
31
|
+
border-radius: corner-radius.$circle;
|
|
18
32
|
}
|
|
19
33
|
}
|
|
20
34
|
|