@yakad/ui 1.2.73-beta → 1.2.74-beta
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/appBar/appBar.module.css +1 -0
- package/button/button.d.ts +1 -2
- package/button/button.js +10 -10
- package/button/button.js.map +1 -1
- package/button/button.tsx +12 -13
- package/declarations.d.ts +1 -0
- package/inputField/inputField.d.ts +1 -1
- package/inputField/inputField.js.map +1 -1
- package/inputField/inputField.tsx +13 -13
- package/package.json +1 -1
package/appBar/appBar.module.css
CHANGED
package/button/button.d.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
3
|
-
loading?: boolean;
|
|
4
3
|
size?: "small" | "medium" | "large";
|
|
5
4
|
variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
|
|
6
5
|
borderStyle?: "none" | "semi" | "rounded";
|
|
7
6
|
icon?: JSX.Element;
|
|
8
7
|
iconPosition?: "start" | "end";
|
|
9
8
|
loadingPosition?: "default" | "center";
|
|
10
|
-
|
|
9
|
+
loading?: false | "scaleOut" | "dots" | "spinner";
|
|
11
10
|
disabled?: boolean;
|
|
12
11
|
}
|
|
13
12
|
declare function Button(props: ButtonProps): JSX.Element;
|
package/button/button.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { joinClassNames } from "@yakad/lib";
|
|
3
|
-
import styles from "./button.module.css";
|
|
4
3
|
import SvgIcon from "../svgIcon/svgIcon";
|
|
5
4
|
import Loading from "../loading/loading";
|
|
6
|
-
|
|
5
|
+
import styles from "./button.module.css";
|
|
6
|
+
const iconSizeMaps = {
|
|
7
7
|
small: 2,
|
|
8
8
|
medium: 2.4,
|
|
9
|
-
large: 3,
|
|
9
|
+
large: 3.2,
|
|
10
10
|
};
|
|
11
11
|
function Button(props) {
|
|
12
|
-
const
|
|
12
|
+
const startWithChildren = props.iconPosition === "end";
|
|
13
13
|
const centerLoading = !props.icon || (props.loading && props.loadingPosition === "center");
|
|
14
|
-
const joinedClassNames = joinClassNames(styles.button, props.
|
|
14
|
+
const joinedClassNames = joinClassNames(styles.button, props.variant ? styles[props.variant] : styles.text, props.loading ? styles.loading : "", props.loading && centerLoading ? styles.loadingPositionCenter : "", props.size ? styles[props.size] : styles.medium, props.borderStyle ? styles[props.borderStyle] : styles.rounded, props.icon && !props.children ? styles.iconButton : "", props.className);
|
|
15
15
|
return (React.createElement("button", { ...props, className: joinedClassNames },
|
|
16
|
-
|
|
16
|
+
startWithChildren ? props.children : null,
|
|
17
17
|
props.loading ? (React.createElement("div", { className: joinClassNames(centerLoading ? styles.positionCenter : "", styles.displayOnDisabled) },
|
|
18
|
-
React.createElement(Loading, { size: props.size, variant: props.
|
|
18
|
+
React.createElement(Loading, { size: props.size, variant: props.loading }))) : null,
|
|
19
19
|
props.icon ? (React.createElement(SvgIcon, { className: styles.hideOnDisabled, size: props.size
|
|
20
|
-
?
|
|
21
|
-
:
|
|
22
|
-
!
|
|
20
|
+
? iconSizeMaps[props.size]
|
|
21
|
+
: iconSizeMaps.medium }, props.icon)) : null,
|
|
22
|
+
!startWithChildren ? props.children : null));
|
|
23
23
|
}
|
|
24
24
|
export default Button;
|
|
25
25
|
//# sourceMappingURL=button.js.map
|
package/button/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AA2BzC,MAAM,YAAY,GAAgB;IAC9B,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;CACb,CAAC;AAEF,SAAS,MAAM,CAAC,KAAkB;IAC9B,MAAM,iBAAiB,GAAG,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC;IACvD,MAAM,aAAa,GACf,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC;IAEzE,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,MAAM,EACb,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACnD,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACnC,KAAK,CAAC,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAClE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,mCAAY,KAAK,EAAE,SAAS,EAAE,gBAAgB;QACzC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;QACzC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,6BACI,SAAS,EAAE,cAAc,CACrB,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAC1C,MAAM,CAAC,iBAAiB,CAC3B;YAED,oBAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACnD,CACT,CAAC,CAAC,CAAC,IAAI;QACP,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,OAAO,IACJ,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,IAAI,EACA,KAAK,CAAC,IAAI;gBACN,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC1B,CAAC,CAAC,YAAY,CAAC,MAAM,IAG5B,KAAK,CAAC,IAAI,CACL,CACb,CAAC,CAAC,CAAC,IAAI;QACP,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACtC,CACZ,CAAC;AACN,CAAC;AAED,eAAe,MAAM,CAAC"}
|
package/button/button.tsx
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { joinClassNames } from "@yakad/lib";
|
|
3
|
-
import styles from "./button.module.css";
|
|
4
3
|
import SvgIcon from "../svgIcon/svgIcon";
|
|
5
4
|
import Loading from "../loading/loading";
|
|
5
|
+
import styles from "./button.module.css";
|
|
6
6
|
|
|
7
7
|
interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
8
|
-
loading?: boolean;
|
|
9
8
|
size?: "small" | "medium" | "large";
|
|
10
9
|
variant?:
|
|
11
10
|
| "text"
|
|
@@ -20,31 +19,31 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
|
20
19
|
icon?: JSX.Element;
|
|
21
20
|
iconPosition?: "start" | "end";
|
|
22
21
|
loadingPosition?: "default" | "center";
|
|
23
|
-
|
|
22
|
+
loading?: false | "scaleOut" | "dots" | "spinner";
|
|
24
23
|
disabled?: boolean;
|
|
25
24
|
}
|
|
26
25
|
|
|
27
|
-
interface
|
|
26
|
+
interface iconSizeMap {
|
|
28
27
|
small: number;
|
|
29
28
|
medium: number;
|
|
30
29
|
large: number;
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
const
|
|
32
|
+
const iconSizeMaps: iconSizeMap = {
|
|
34
33
|
small: 2,
|
|
35
34
|
medium: 2.4,
|
|
36
|
-
large: 3,
|
|
35
|
+
large: 3.2,
|
|
37
36
|
};
|
|
38
37
|
|
|
39
38
|
function Button(props: ButtonProps) {
|
|
40
|
-
const
|
|
39
|
+
const startWithChildren = props.iconPosition === "end";
|
|
41
40
|
const centerLoading =
|
|
42
41
|
!props.icon || (props.loading && props.loadingPosition === "center");
|
|
43
42
|
|
|
44
43
|
const joinedClassNames = joinClassNames(
|
|
45
44
|
styles.button,
|
|
46
|
-
props.loading ? styles.loading : "",
|
|
47
45
|
props.variant ? styles[props.variant] : styles.text,
|
|
46
|
+
props.loading ? styles.loading : "",
|
|
48
47
|
props.loading && centerLoading ? styles.loadingPositionCenter : "",
|
|
49
48
|
props.size ? styles[props.size] : styles.medium,
|
|
50
49
|
props.borderStyle ? styles[props.borderStyle] : styles.rounded,
|
|
@@ -54,7 +53,7 @@ function Button(props: ButtonProps) {
|
|
|
54
53
|
|
|
55
54
|
return (
|
|
56
55
|
<button {...props} className={joinedClassNames}>
|
|
57
|
-
{
|
|
56
|
+
{startWithChildren ? props.children : null}
|
|
58
57
|
{props.loading ? (
|
|
59
58
|
<div
|
|
60
59
|
className={joinClassNames(
|
|
@@ -62,7 +61,7 @@ function Button(props: ButtonProps) {
|
|
|
62
61
|
styles.displayOnDisabled
|
|
63
62
|
)}
|
|
64
63
|
>
|
|
65
|
-
<Loading size={props.size} variant={props.
|
|
64
|
+
<Loading size={props.size} variant={props.loading} />
|
|
66
65
|
</div>
|
|
67
66
|
) : null}
|
|
68
67
|
{props.icon ? (
|
|
@@ -70,14 +69,14 @@ function Button(props: ButtonProps) {
|
|
|
70
69
|
className={styles.hideOnDisabled}
|
|
71
70
|
size={
|
|
72
71
|
props.size
|
|
73
|
-
?
|
|
74
|
-
:
|
|
72
|
+
? iconSizeMaps[props.size]
|
|
73
|
+
: iconSizeMaps.medium
|
|
75
74
|
}
|
|
76
75
|
>
|
|
77
76
|
{props.icon}
|
|
78
77
|
</SvgIcon>
|
|
79
78
|
) : null}
|
|
80
|
-
{!
|
|
79
|
+
{!startWithChildren ? props.children : null}
|
|
81
80
|
</button>
|
|
82
81
|
);
|
|
83
82
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module "*.module.css";
|
|
@@ -6,7 +6,7 @@ interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
|
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
name?: string;
|
|
8
8
|
value?: string;
|
|
9
|
-
required?:
|
|
9
|
+
required?: boolean;
|
|
10
10
|
}
|
|
11
11
|
declare function InputField(props: InputFieldProps): JSX.Element;
|
|
12
12
|
export default InputField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,
|
|
1
|
+
{"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,gBAAgB,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}
|
|
@@ -9,7 +9,7 @@ interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
|
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
name?: string;
|
|
11
11
|
value?: string;
|
|
12
|
-
required?:
|
|
12
|
+
required?: boolean;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
function InputField(props: InputFieldProps) {
|
|
@@ -20,18 +20,18 @@ function InputField(props: InputFieldProps) {
|
|
|
20
20
|
);
|
|
21
21
|
|
|
22
22
|
return (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
<label className={styles.label}>
|
|
24
|
+
<input
|
|
25
|
+
{...props}
|
|
26
|
+
name={props.name}
|
|
27
|
+
disabled={props.disabled}
|
|
28
|
+
placeholder=" "
|
|
29
|
+
type={props.type}
|
|
30
|
+
value={props.value}
|
|
31
|
+
className={joinedClassNames}
|
|
32
|
+
/>
|
|
33
|
+
<span className={styles.span}>{props.placeholder}</span>
|
|
34
|
+
</label>
|
|
35
35
|
);
|
|
36
36
|
}
|
|
37
37
|
|