@yakad/ui 1.2.6 → 1.2.8
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/button/button.module.css +32 -1
- package/button/button.tsx +26 -2
- package/loading/loading.module.css +91 -0
- package/loading/loading.tsx +24 -0
- package/package.json +1 -1
- package/color.css +0 -34
package/button/button.module.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.button {
|
|
2
|
+
position: relative;
|
|
2
3
|
display: flex;
|
|
3
4
|
align-items: center;
|
|
4
5
|
line-height: 3rem;
|
|
@@ -88,7 +89,7 @@
|
|
|
88
89
|
}
|
|
89
90
|
.link {
|
|
90
91
|
background: transparent;
|
|
91
|
-
display:
|
|
92
|
+
display: flex;
|
|
92
93
|
position: relative;
|
|
93
94
|
transition: 0.3s;
|
|
94
95
|
}
|
|
@@ -105,9 +106,39 @@
|
|
|
105
106
|
background-color: var(--secondaryColor);
|
|
106
107
|
transition: 0.3s;
|
|
107
108
|
}
|
|
109
|
+
|
|
108
110
|
.link:hover {
|
|
109
111
|
box-shadow: none;
|
|
110
112
|
}
|
|
111
113
|
.link:hover:before {
|
|
112
114
|
width: calc(100% - var(--padding));
|
|
113
115
|
}
|
|
116
|
+
|
|
117
|
+
.loadingPositionCenter:disabled {
|
|
118
|
+
color: transparent;
|
|
119
|
+
fill: transparent;
|
|
120
|
+
}
|
|
121
|
+
.positionCenter {
|
|
122
|
+
position: absolute;
|
|
123
|
+
left: 50%;
|
|
124
|
+
transform: translate(-50%);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.button:disabled {
|
|
128
|
+
cursor: default;
|
|
129
|
+
box-shadow: none;
|
|
130
|
+
box-shadow: inset 0 0 10rem #7d7d7d20;
|
|
131
|
+
}
|
|
132
|
+
.button.link:disabled:before {
|
|
133
|
+
display: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.loading .displayOnDisabled {
|
|
137
|
+
display: none;
|
|
138
|
+
}
|
|
139
|
+
.loading:disabled .displayOnDisabled {
|
|
140
|
+
display: block;
|
|
141
|
+
}
|
|
142
|
+
.loading:disabled .hideOnDisabled {
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
package/button/button.tsx
CHANGED
|
@@ -2,12 +2,18 @@ import React from "react";
|
|
|
2
2
|
import { joinClassNames } from "@yakad/lib";
|
|
3
3
|
import styles from "./button.module.css";
|
|
4
4
|
import SvgIcon from "../svgIcon/svgIcon";
|
|
5
|
+
import Loading from "../loading/loading";
|
|
5
6
|
|
|
6
7
|
interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
7
|
-
|
|
8
|
+
loading?: boolean;
|
|
8
9
|
size?: "small" | "medium" | "large";
|
|
10
|
+
variant?: "text" | "outlined" | "filled" | "tonal" | "elevated" | "link";
|
|
9
11
|
borderStyle?: "none" | "semi" | "rounded";
|
|
10
12
|
icon?: JSX.Element;
|
|
13
|
+
iconPosition?: "start" | "end";
|
|
14
|
+
loadingPosition?: "default" | "center";
|
|
15
|
+
loadingVariant?: "scaleOut" | "dots" | "spinner";
|
|
16
|
+
disabled?: boolean;
|
|
11
17
|
}
|
|
12
18
|
|
|
13
19
|
interface svgSizeMap {
|
|
@@ -23,9 +29,15 @@ const svgSizeMaps: svgSizeMap = {
|
|
|
23
29
|
};
|
|
24
30
|
|
|
25
31
|
function Button(props: ButtonProps) {
|
|
32
|
+
const startChildren = props.iconPosition === "end";
|
|
33
|
+
const centerLoading =
|
|
34
|
+
!props.icon || (props.loading && props.loadingPosition === "center");
|
|
35
|
+
|
|
26
36
|
const joinedClassNames = joinClassNames(
|
|
27
37
|
styles.button,
|
|
38
|
+
props.loading ? styles.loading : "",
|
|
28
39
|
props.variant ? styles[props.variant] : styles.text,
|
|
40
|
+
props.loading && centerLoading ? styles.loadingPositionCenter : "",
|
|
29
41
|
props.size ? styles[props.size] : styles.medium,
|
|
30
42
|
props.borderStyle ? styles[props.borderStyle] : styles.rounded,
|
|
31
43
|
props.icon && !props.children ? styles.iconButton : "",
|
|
@@ -34,8 +46,20 @@ function Button(props: ButtonProps) {
|
|
|
34
46
|
|
|
35
47
|
return (
|
|
36
48
|
<button {...props} className={joinedClassNames}>
|
|
49
|
+
{startChildren ? props.children : null}
|
|
50
|
+
{props.loading ? (
|
|
51
|
+
<div
|
|
52
|
+
className={joinClassNames(
|
|
53
|
+
centerLoading ? styles.positionCenter : "",
|
|
54
|
+
styles.displayOnDisabled
|
|
55
|
+
)}
|
|
56
|
+
>
|
|
57
|
+
<Loading size={props.size} variant={props.loadingVariant} />
|
|
58
|
+
</div>
|
|
59
|
+
) : null}
|
|
37
60
|
{props.icon ? (
|
|
38
61
|
<SvgIcon
|
|
62
|
+
className={styles.hideOnDisabled}
|
|
39
63
|
size={
|
|
40
64
|
props.size
|
|
41
65
|
? svgSizeMaps[props.size]
|
|
@@ -45,7 +69,7 @@ function Button(props: ButtonProps) {
|
|
|
45
69
|
{props.icon}
|
|
46
70
|
</SvgIcon>
|
|
47
71
|
) : null}
|
|
48
|
-
{props.children}
|
|
72
|
+
{!startChildren ? props.children : null}
|
|
49
73
|
</button>
|
|
50
74
|
);
|
|
51
75
|
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
.small {
|
|
2
|
+
--size: 2rem;
|
|
3
|
+
}
|
|
4
|
+
.medium {
|
|
5
|
+
--size: 2.4rem;
|
|
6
|
+
}
|
|
7
|
+
.large {
|
|
8
|
+
--size: 3rem;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.loading {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
width: var(--size);
|
|
16
|
+
height: var(--size);
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
--color: #7d7d7d;
|
|
19
|
+
}
|
|
20
|
+
.spinner div {
|
|
21
|
+
display: flex;
|
|
22
|
+
width: 75%;
|
|
23
|
+
height: 75%;
|
|
24
|
+
--spinner-border: calc(var(--size) / 8);
|
|
25
|
+
border-top: var(--spinner-border) solid var(--color);
|
|
26
|
+
border-right: var(--spinner-border) solid transparent;
|
|
27
|
+
border-bottom: none;
|
|
28
|
+
border-left: none;
|
|
29
|
+
border-radius: 50%;
|
|
30
|
+
animation: spinner 1000ms linear infinite;
|
|
31
|
+
}
|
|
32
|
+
@keyframes spinner {
|
|
33
|
+
to {
|
|
34
|
+
transform: rotate(360deg);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.dots div {
|
|
39
|
+
width: 20%;
|
|
40
|
+
height: 20%;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
background-color: var(--color);
|
|
43
|
+
--dots-space: calc(var(--size) / 3);
|
|
44
|
+
--dots-space-negative: calc(0rem - (var(--size) / 3));
|
|
45
|
+
box-shadow: var(--dots-space) 0 var(--color),
|
|
46
|
+
var(--dots-space-negative) 0 var(--color);
|
|
47
|
+
position: relative;
|
|
48
|
+
animation: flash 0.6s ease-out infinite alternate;
|
|
49
|
+
}
|
|
50
|
+
@keyframes flash {
|
|
51
|
+
0% {
|
|
52
|
+
background-color: var(--color);
|
|
53
|
+
box-shadow: var(--dots-space) 0 var(--color),
|
|
54
|
+
var(--dots-space-negative) 0 transparent;
|
|
55
|
+
}
|
|
56
|
+
50% {
|
|
57
|
+
background-color: transparent;
|
|
58
|
+
box-shadow: var(--dots-space) 0 var(--color),
|
|
59
|
+
var(--dots-space-negative) 0 var(--color);
|
|
60
|
+
}
|
|
61
|
+
100% {
|
|
62
|
+
background-color: var(--color);
|
|
63
|
+
box-shadow: var(--dots-space) 0 transparent,
|
|
64
|
+
var(--dots-space-negative) 0 var(--color);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.scaleOut div {
|
|
69
|
+
width: 90%;
|
|
70
|
+
height: 90%;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
background-color: var(--color);
|
|
73
|
+
animation: sk-scaleout 1s infinite ease-in-out;
|
|
74
|
+
}
|
|
75
|
+
@keyframes sk-scaleout {
|
|
76
|
+
0% {
|
|
77
|
+
transform: scale(0);
|
|
78
|
+
opacity: 1;
|
|
79
|
+
}
|
|
80
|
+
5% {
|
|
81
|
+
transform: scale(0);
|
|
82
|
+
opacity: 1;
|
|
83
|
+
}
|
|
84
|
+
50% {
|
|
85
|
+
opacity: 0.9;
|
|
86
|
+
}
|
|
87
|
+
100% {
|
|
88
|
+
transform: scale(1);
|
|
89
|
+
opacity: 0;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import styles from "./loading.module.css";
|
|
2
|
+
import { joinClassNames } from "@yakad/lib";
|
|
3
|
+
|
|
4
|
+
interface LoadingProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
size?: "small" | "medium" | "large";
|
|
6
|
+
variant?: "scaleOut" | "dots" | "spinner";
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
function Loading(props: LoadingProps) {
|
|
10
|
+
const joinedClassNames = joinClassNames(
|
|
11
|
+
styles.loading,
|
|
12
|
+
props.size ? styles[props.size] : styles.medium,
|
|
13
|
+
props.variant ? styles[props.variant] : styles.spinner,
|
|
14
|
+
props.className!
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<div className={joinedClassNames}>
|
|
19
|
+
<div></div>
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default Loading;
|
package/package.json
CHANGED
package/color.css
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
html {
|
|
2
|
-
--primaryColor: #222222;
|
|
3
|
-
--primaryVariantColor: #303030;
|
|
4
|
-
--secondaryColor: #aa8a59;
|
|
5
|
-
--secondaryVariantColor: #aa8a59;
|
|
6
|
-
--backgroundColor: #ffffff;
|
|
7
|
-
--headerColor: #222222;
|
|
8
|
-
--surfaceColor: #ffffff;
|
|
9
|
-
--errorColor: #b00020;
|
|
10
|
-
--onPrimaryColor: #ffffff;
|
|
11
|
-
--onSecondaryColor: #000000;
|
|
12
|
-
--onBackgroundColor: #000000;
|
|
13
|
-
--onHeaderColor: #e9e9e9;
|
|
14
|
-
--onSurfaceColor: #000000;
|
|
15
|
-
--onErrorColor: #ffffff;
|
|
16
|
-
}
|
|
17
|
-
@media (prefers-color-scheme: dark) {
|
|
18
|
-
html {
|
|
19
|
-
--primaryColor: #8955ff;
|
|
20
|
-
--primaryVariantColor: #bb86fc;
|
|
21
|
-
--secondaryColor: #03dac6;
|
|
22
|
-
--secondaryVariantColor: #00d6c2;
|
|
23
|
-
--backgroundColor: #121212;
|
|
24
|
-
--headerColor: #222222;
|
|
25
|
-
--surfaceColor: #1d1d1d;
|
|
26
|
-
--errorColor: #cf6679;
|
|
27
|
-
--onPrimaryColor: #000000;
|
|
28
|
-
--onSecondaryColor: #000000;
|
|
29
|
-
--onBackgroundColor: #ffffff;
|
|
30
|
-
--onHeaderColor: #e9e9e9;
|
|
31
|
-
--onSurfaceColor: #ffffff;
|
|
32
|
-
--onErrorColor: #000000;
|
|
33
|
-
}
|
|
34
|
-
}
|