@strapi/design-system 1.4.0-beta.1 → 1.4.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.
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),b=require("prop-types"),m=require("styled-components"),n=require("../Typography/Typography.cjs"),h=require("./AccordionContext.cjs"),q=require("../helpers/useId.cjs"),p=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),c=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=c(v),o=c(b),y=c(m),A=({theme:r,expanded:e,variant:d,disabled:l,error:t})=>t?`1px solid ${r.colors.danger600} !important`:l?`1px solid ${r.colors.neutral150}`:e?`1px solid ${r.colors.primary600}`:d==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(n.Typography)``,j=y.default(p.Box)`
|
|
2
2
|
border: ${A};
|
|
3
3
|
|
|
4
4
|
&:hover:not([aria-disabled='true']) {
|
|
5
5
|
border: 1px solid ${({theme:r})=>r.colors.primary600};
|
|
6
6
|
|
|
7
|
-
${
|
|
8
|
-
color: ${({theme:r,expanded:
|
|
7
|
+
${f} {
|
|
8
|
+
color: ${({theme:r,expanded:e})=>e?void 0:r.colors.primary700};
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
${
|
|
12
|
-
color: ${({theme:r,expanded:
|
|
11
|
+
${n.Typography} {
|
|
12
|
+
color: ${({theme:r,expanded:e})=>e?void 0:r.colors.primary600};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
& > ${_.Flex} {
|
|
@@ -20,4 +20,4 @@
|
|
|
20
20
|
background: ${({theme:r})=>r.colors.primary200};
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
`,u=({children:r,expanded:
|
|
23
|
+
`,u=({children:r,expanded:e,id:d,size:l,variant:t,disabled:s,error:i,hasErrorMessage:g,onToggle:x,toggle:T})=>{const $=q.useId("accordion",d);return a.default.createElement(h.AccordionContext.Provider,{value:{expanded:e,onToggle:x,toggle:T,id:$,size:l,variant:t,disabled:s}},a.default.createElement(j,{"data-strapi-expanded":e,disabled:s,"aria-disabled":s,expanded:e,hasRadius:!0,variant:t,error:i},r),i&&g&&a.default.createElement(p.Box,{paddingTop:1},a.default.createElement(n.Typography,{variant:"pi",textColor:"danger600"},i)))};u.defaultProps={disabled:!1,error:void 0,expanded:!1,hasErrorMessage:!0,id:void 0,toggle:void 0,size:"M",variant:"primary",onToggle:void 0};u.propTypes={children:o.default.node.isRequired,disabled:o.default.bool,error:o.default.string,expanded:o.default.bool,hasErrorMessage:o.default.bool,id:o.default.string,onToggle:o.default.func,size:o.default.oneOf(["S","M"]),toggle:o.default.func,variant:o.default.oneOf(["primary","secondary"])};exports.Accordion=u;exports.AccordionTypography=f;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import a from "react";
|
|
2
2
|
import o from "prop-types";
|
|
3
|
-
import
|
|
4
|
-
import { Typography as
|
|
3
|
+
import l from "styled-components";
|
|
4
|
+
import { Typography as p } from "../Typography/Typography.js";
|
|
5
5
|
import { AccordionContext as $ } from "./AccordionContext.js";
|
|
6
6
|
import { useId as x } from "../helpers/useId.js";
|
|
7
7
|
import { Box as c } from "../Box/Box.js";
|
|
8
8
|
import { Flex as v } from "../Flex/Flex.js";
|
|
9
|
-
const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : e ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, T = p
|
|
9
|
+
const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : e ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, T = l(p)``, E = l(c)`
|
|
10
10
|
border: ${b};
|
|
11
11
|
|
|
12
12
|
&:hover:not([aria-disabled='true']) {
|
|
@@ -16,7 +16,7 @@ const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ?
|
|
|
16
16
|
color: ${({ theme: r, expanded: e }) => e ? void 0 : r.colors.primary700};
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
${
|
|
19
|
+
${p} {
|
|
20
20
|
color: ${({ theme: r, expanded: e }) => e ? void 0 : r.colors.primary600};
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -37,12 +37,12 @@ const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ?
|
|
|
37
37
|
disabled: n,
|
|
38
38
|
error: s,
|
|
39
39
|
hasErrorMessage: u,
|
|
40
|
-
onToggle:
|
|
41
|
-
toggle:
|
|
40
|
+
onToggle: g,
|
|
41
|
+
toggle: f
|
|
42
42
|
}) => {
|
|
43
43
|
const y = x("accordion", t);
|
|
44
44
|
return /* @__PURE__ */ a.createElement($.Provider, {
|
|
45
|
-
value: { expanded: e, onToggle:
|
|
45
|
+
value: { expanded: e, onToggle: g, toggle: f, id: y, size: d, variant: i, disabled: n }
|
|
46
46
|
}, /* @__PURE__ */ a.createElement(E, {
|
|
47
47
|
"data-strapi-expanded": e,
|
|
48
48
|
disabled: n,
|
|
@@ -53,7 +53,7 @@ const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ?
|
|
|
53
53
|
error: s
|
|
54
54
|
}, r), s && u && /* @__PURE__ */ a.createElement(c, {
|
|
55
55
|
paddingTop: 1
|
|
56
|
-
}, /* @__PURE__ */ a.createElement(
|
|
56
|
+
}, /* @__PURE__ */ a.createElement(p, {
|
|
57
57
|
variant: "pi",
|
|
58
58
|
textColor: "danger600"
|
|
59
59
|
}, s)));
|
|
@@ -64,7 +64,7 @@ m.defaultProps = {
|
|
|
64
64
|
expanded: !1,
|
|
65
65
|
hasErrorMessage: !0,
|
|
66
66
|
id: void 0,
|
|
67
|
-
toggle:
|
|
67
|
+
toggle: void 0,
|
|
68
68
|
size: "M",
|
|
69
69
|
variant: "primary",
|
|
70
70
|
onToggle: void 0
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var w=Object.defineProperty;var
|
|
1
|
+
"use strict";var w=Object.defineProperty;var d=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var g=(t,s,l)=>s in t?w(t,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[s]=l,T=(t,s)=>{for(var l in s||(s={}))v.call(s,l)&&g(t,l,s[l]);if(d)for(var l of d(s))O.call(s,l)&&g(t,l,s[l]);return t};var q=(t,s)=>{var l={};for(var r in t)v.call(t,r)&&s.indexOf(r)<0&&(l[r]=t[r]);if(t!=null&&d)for(var r of d(t))s.indexOf(r)<0&&O.call(t,r)&&(l[r]=t[r]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("react"),x=require("prop-types"),D=require("@strapi/icons/Clock"),G=require("styled-components"),H=require("../themes/sizes.cjs"),N=require("../Select/Select.cjs"),V=require("../Select/Option.cjs");require("../Select/OptGroup.cjs");require("../Select/MultiSelectNested.cjs");require("../Select/SelectList.cjs");const W=require("../helpers/useId.cjs"),f=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=f(B),e=f(x),A=f(D),F=f(G),J=F.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
svg {
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
svg path {
|
|
10
10
|
fill: ${({theme:t})=>t.colors.neutral500};
|
|
11
11
|
}
|
|
12
|
-
`,y=K=>{var b=K,{disabled:t,error:s,hint:l,id:r,onClear:S,onChange:_,value:p,clearLabel:j,label:M,selectButtonTitle:k,step:C,size:$}=b,I=
|
|
12
|
+
`,y=K=>{var b=K,{disabled:t,error:s,hint:l,id:r,onClear:S,onChange:_,value:p,clearLabel:j,label:M,selectButtonTitle:k,step:C,size:$}=b,I=q(b,["disabled","error","hint","id","onClear","onChange","value","clearLabel","label","selectButtonTitle","step","size"]);const P=W.useId("timepicker",r),z=24,a=[];let n=0;for(let u=0;u<z;u++)for(n=0;n<60;)a.push(`${u<10?`0${u}`:u}:${n<10?`0${n}`:n}`),n+=C;const E=()=>{const u=p.split(":")[0],h=p.split(":")[1],R=a.reduce((o,m)=>{const i=m.split(":")[0];return Math.abs(i-u)<Math.abs(o-u)?i:o},a[0].split(":")[0]),L=a.reduce((o,m)=>{const i=m.split(":")[1];return Math.abs(i-h)<Math.abs(o-h)?i:o},a[0].split(":")[1]);return`${R}:${L}`};return c.default.createElement(N.Select,T({id:P,label:M,placeholder:"--:--",hint:l,onClear:S,clearLabel:j,error:s,value:p?E():null,size:$,onChange:_,disabled:t,selectButtonTitle:k,startIcon:c.default.createElement(J,null,c.default.createElement(A.default,null))},I),a.map(u=>c.default.createElement(V.Option,{value:u,key:u},u)))};y.defaultProps={disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,onClear:void 0,size:"M",selectButtonTitle:void 0,step:15,value:void 0};y.propTypes={clearLabel:e.default.string.isRequired,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,onChange:e.default.func.isRequired,onClear:e.default.func,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(H.sizes.input)),step:e.default.number,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number])};exports.TimePicker=y;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/design-system",
|
|
3
|
-
"version": "1.4.0
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@storybook/addon-essentials": "^6.5.13",
|
|
32
32
|
"@storybook/addon-links": "^6.5.13",
|
|
33
33
|
"@storybook/react": "^6.5.13",
|
|
34
|
-
"@strapi/icons": "^1.4.0
|
|
34
|
+
"@strapi/icons": "^1.4.0",
|
|
35
35
|
"@swc/core": "^1.3.11",
|
|
36
36
|
"@swc/jest": "^0.2.23",
|
|
37
37
|
"@testing-library/jest-dom": "5.16.5",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
|
|
72
72
|
"test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "33ff2a3f2de80034ba2ebc3654c1b9a0e9d95c81"
|
|
75
75
|
}
|