@yakad/ui 1.2.76-beta → 1.2.77-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.d.ts +3 -3
- package/appBar/appBar.js +8 -8
- package/appBar/appBar.module.css +15 -15
- package/appBar/appBar.tsx +15 -15
- package/button/button.d.ts +13 -13
- package/button/button.js +27 -27
- package/button/button.module.css +170 -170
- package/button/button.tsx +87 -87
- package/card/card.d.ts +3 -3
- package/card/card.js +8 -8
- package/card/card.module.css +11 -11
- package/card/card.tsx +15 -15
- package/clickAwayListener/clickAwayListener.d.ts +6 -6
- package/clickAwayListener/clickAwayListener.js +16 -16
- package/clickAwayListener/clickAwayListener.tsx +27 -27
- package/codeField/codeField.d.ts +8 -8
- package/codeField/codeField.js +9 -9
- package/codeField/codeField.module.css +23 -23
- package/codeField/codeField.tsx +32 -32
- package/container/container.d.ts +8 -8
- package/container/container.js +8 -8
- package/container/container.module.css +24 -24
- package/container/container.tsx +27 -27
- package/declarations.d.ts +1 -1
- package/footer/footer.d.ts +3 -3
- package/footer/footer.js +8 -8
- package/footer/footer.module.css +9 -9
- package/footer/footer.tsx +15 -15
- package/form/form.d.ts +3 -3
- package/form/form.js +11 -11
- package/form/form.module.css +6 -6
- package/form/form.tsx +23 -23
- package/gridContainer/gridContainer.d.ts +7 -7
- package/gridContainer/gridContainer.js +10 -10
- package/gridContainer/gridContainer.module.css +6 -5
- package/gridContainer/gridContainer.tsx +28 -28
- package/gridItem/gridItem.d.ts +10 -10
- package/gridItem/gridItem.js +9 -9
- package/gridItem/gridItem.module.css +192 -192
- package/gridItem/gridItem.tsx +31 -31
- package/hr/hr.d.ts +8 -8
- package/hr/hr.js +11 -11
- package/hr/hr.module.css +19 -19
- package/hr/hr.tsx +32 -32
- package/index.d.ts +24 -24
- package/index.js +24 -24
- package/index.tsx +48 -48
- package/inputField/inputField.d.ts +12 -12
- package/inputField/inputField.js +10 -10
- package/inputField/inputField.module.css +167 -167
- package/inputField/inputField.tsx +38 -38
- package/list/list.d.ts +7 -7
- package/list/list.js +8 -8
- package/list/list.module.css +22 -22
- package/list/list.tsx +25 -25
- package/listItem/listItem.d.ts +3 -3
- package/listItem/listItem.js +6 -6
- package/listItem/listItem.module.css +6 -6
- package/listItem/listItem.tsx +12 -12
- package/loading/loading.d.ts +7 -7
- package/loading/loading.js +9 -9
- package/loading/loading.module.css +91 -91
- package/loading/loading.tsx +25 -25
- package/main/main.d.ts +6 -6
- package/main/main.js +9 -9
- package/main/main.module.css +19 -19
- package/main/main.tsx +25 -25
- package/navigation/navigation.d.ts +7 -7
- package/navigation/navigation.js +8 -8
- package/navigation/navigation.module.css +61 -61
- package/navigation/navigation.tsx +24 -24
- package/package.json +31 -31
- package/page/page.d.ts +3 -3
- package/page/page.js +8 -8
- package/page/page.module.css +10 -10
- package/page/page.tsx +15 -15
- package/row/row.d.ts +3 -3
- package/row/row.js +8 -8
- package/row/row.module.css +7 -7
- package/row/row.tsx +15 -15
- package/spacer/spacer.d.ts +3 -3
- package/spacer/spacer.js +6 -6
- package/spacer/spacer.module.css +5 -5
- package/spacer/spacer.tsx +8 -8
- package/stack/stack.d.ts +3 -3
- package/stack/stack.js +8 -8
- package/stack/stack.module.css +6 -6
- package/stack/stack.tsx +15 -15
- package/svgIcon/svgIcon.d.ts +6 -6
- package/svgIcon/svgIcon.js +11 -11
- package/svgIcon/svgIcon.module.css +5 -5
- package/svgIcon/svgIcon.tsx +26 -26
- package/theme/theme.d.ts +9 -9
- package/theme/theme.js +11 -11
- package/theme/theme.module.css +397 -397
- package/theme/theme.tsx +29 -29
- package/theme/zoom.css +3 -3
- package/tsconfig.json +13 -13
|
@@ -1,192 +1,192 @@
|
|
|
1
|
-
.xl1 {
|
|
2
|
-
grid-column: span 1;
|
|
3
|
-
}
|
|
4
|
-
.xl2 {
|
|
5
|
-
grid-column: span 2;
|
|
6
|
-
}
|
|
7
|
-
.xl3 {
|
|
8
|
-
grid-column: span 3;
|
|
9
|
-
}
|
|
10
|
-
.xl4 {
|
|
11
|
-
grid-column: span 4;
|
|
12
|
-
}
|
|
13
|
-
.xl5 {
|
|
14
|
-
grid-column: span 5;
|
|
15
|
-
}
|
|
16
|
-
.xl6 {
|
|
17
|
-
grid-column: span 6;
|
|
18
|
-
}
|
|
19
|
-
.xl7 {
|
|
20
|
-
grid-column: span 7;
|
|
21
|
-
}
|
|
22
|
-
.xl8 {
|
|
23
|
-
grid-column: span 8;
|
|
24
|
-
}
|
|
25
|
-
.xl9 {
|
|
26
|
-
grid-column: span 9;
|
|
27
|
-
}
|
|
28
|
-
.xl10 {
|
|
29
|
-
grid-column: span 10;
|
|
30
|
-
}
|
|
31
|
-
.xl11 {
|
|
32
|
-
grid-column: span 11;
|
|
33
|
-
}
|
|
34
|
-
.xl12 {
|
|
35
|
-
grid-column: span 12;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@media screen and (max-width: 1200px) {
|
|
39
|
-
.lg1 {
|
|
40
|
-
grid-column: span 1;
|
|
41
|
-
}
|
|
42
|
-
.lg2 {
|
|
43
|
-
grid-column: span 2;
|
|
44
|
-
}
|
|
45
|
-
.lg3 {
|
|
46
|
-
grid-column: span 3;
|
|
47
|
-
}
|
|
48
|
-
.lg4 {
|
|
49
|
-
grid-column: span 4;
|
|
50
|
-
}
|
|
51
|
-
.lg5 {
|
|
52
|
-
grid-column: span 5;
|
|
53
|
-
}
|
|
54
|
-
.lg6 {
|
|
55
|
-
grid-column: span 6;
|
|
56
|
-
}
|
|
57
|
-
.lg7 {
|
|
58
|
-
grid-column: span 7;
|
|
59
|
-
}
|
|
60
|
-
.lg8 {
|
|
61
|
-
grid-column: span 8;
|
|
62
|
-
}
|
|
63
|
-
.lg9 {
|
|
64
|
-
grid-column: span 9;
|
|
65
|
-
}
|
|
66
|
-
.lg10 {
|
|
67
|
-
grid-column: span 10;
|
|
68
|
-
}
|
|
69
|
-
.lg11 {
|
|
70
|
-
grid-column: span 11;
|
|
71
|
-
}
|
|
72
|
-
.lg12 {
|
|
73
|
-
grid-column: span 12;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@media screen and (max-width: 900px) {
|
|
78
|
-
.md1 {
|
|
79
|
-
grid-column: span 1;
|
|
80
|
-
}
|
|
81
|
-
.md2 {
|
|
82
|
-
grid-column: span 2;
|
|
83
|
-
}
|
|
84
|
-
.md3 {
|
|
85
|
-
grid-column: span 3;
|
|
86
|
-
}
|
|
87
|
-
.md4 {
|
|
88
|
-
grid-column: span 4;
|
|
89
|
-
}
|
|
90
|
-
.md5 {
|
|
91
|
-
grid-column: span 5;
|
|
92
|
-
}
|
|
93
|
-
.md6 {
|
|
94
|
-
grid-column: span 6;
|
|
95
|
-
}
|
|
96
|
-
.md7 {
|
|
97
|
-
grid-column: span 7;
|
|
98
|
-
}
|
|
99
|
-
.md8 {
|
|
100
|
-
grid-column: span 8;
|
|
101
|
-
}
|
|
102
|
-
.md9 {
|
|
103
|
-
grid-column: span 9;
|
|
104
|
-
}
|
|
105
|
-
.md10 {
|
|
106
|
-
grid-column: span 10;
|
|
107
|
-
}
|
|
108
|
-
.md11 {
|
|
109
|
-
grid-column: span 11;
|
|
110
|
-
}
|
|
111
|
-
.md12 {
|
|
112
|
-
grid-column: span 12;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@media screen and (max-width: 600px) {
|
|
117
|
-
.sm1 {
|
|
118
|
-
grid-column: span 1;
|
|
119
|
-
}
|
|
120
|
-
.sm2 {
|
|
121
|
-
grid-column: span 2;
|
|
122
|
-
}
|
|
123
|
-
.sm3 {
|
|
124
|
-
grid-column: span 3;
|
|
125
|
-
}
|
|
126
|
-
.sm4 {
|
|
127
|
-
grid-column: span 4;
|
|
128
|
-
}
|
|
129
|
-
.sm5 {
|
|
130
|
-
grid-column: span 5;
|
|
131
|
-
}
|
|
132
|
-
.sm6 {
|
|
133
|
-
grid-column: span 6;
|
|
134
|
-
}
|
|
135
|
-
.sm7 {
|
|
136
|
-
grid-column: span 7;
|
|
137
|
-
}
|
|
138
|
-
.sm8 {
|
|
139
|
-
grid-column: span 8;
|
|
140
|
-
}
|
|
141
|
-
.sm9 {
|
|
142
|
-
grid-column: span 9;
|
|
143
|
-
}
|
|
144
|
-
.sm10 {
|
|
145
|
-
grid-column: span 10;
|
|
146
|
-
}
|
|
147
|
-
.sm11 {
|
|
148
|
-
grid-column: span 11;
|
|
149
|
-
}
|
|
150
|
-
.sm12 {
|
|
151
|
-
grid-column: span 12;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
@media screen and (max-width: 444px) {
|
|
156
|
-
.xs1 {
|
|
157
|
-
grid-column: span 1;
|
|
158
|
-
}
|
|
159
|
-
.xs2 {
|
|
160
|
-
grid-column: span 2;
|
|
161
|
-
}
|
|
162
|
-
.xs3 {
|
|
163
|
-
grid-column: span 3;
|
|
164
|
-
}
|
|
165
|
-
.xs4 {
|
|
166
|
-
grid-column: span 4;
|
|
167
|
-
}
|
|
168
|
-
.xs5 {
|
|
169
|
-
grid-column: span 5;
|
|
170
|
-
}
|
|
171
|
-
.xs6 {
|
|
172
|
-
grid-column: span 6;
|
|
173
|
-
}
|
|
174
|
-
.xs7 {
|
|
175
|
-
grid-column: span 7;
|
|
176
|
-
}
|
|
177
|
-
.xs8 {
|
|
178
|
-
grid-column: span 8;
|
|
179
|
-
}
|
|
180
|
-
.xs9 {
|
|
181
|
-
grid-column: span 9;
|
|
182
|
-
}
|
|
183
|
-
.xs10 {
|
|
184
|
-
grid-column: span 10;
|
|
185
|
-
}
|
|
186
|
-
.xs11 {
|
|
187
|
-
grid-column: span 11;
|
|
188
|
-
}
|
|
189
|
-
.xs12 {
|
|
190
|
-
grid-column: span 12;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
1
|
+
.xl1 {
|
|
2
|
+
grid-column: span 1;
|
|
3
|
+
}
|
|
4
|
+
.xl2 {
|
|
5
|
+
grid-column: span 2;
|
|
6
|
+
}
|
|
7
|
+
.xl3 {
|
|
8
|
+
grid-column: span 3;
|
|
9
|
+
}
|
|
10
|
+
.xl4 {
|
|
11
|
+
grid-column: span 4;
|
|
12
|
+
}
|
|
13
|
+
.xl5 {
|
|
14
|
+
grid-column: span 5;
|
|
15
|
+
}
|
|
16
|
+
.xl6 {
|
|
17
|
+
grid-column: span 6;
|
|
18
|
+
}
|
|
19
|
+
.xl7 {
|
|
20
|
+
grid-column: span 7;
|
|
21
|
+
}
|
|
22
|
+
.xl8 {
|
|
23
|
+
grid-column: span 8;
|
|
24
|
+
}
|
|
25
|
+
.xl9 {
|
|
26
|
+
grid-column: span 9;
|
|
27
|
+
}
|
|
28
|
+
.xl10 {
|
|
29
|
+
grid-column: span 10;
|
|
30
|
+
}
|
|
31
|
+
.xl11 {
|
|
32
|
+
grid-column: span 11;
|
|
33
|
+
}
|
|
34
|
+
.xl12 {
|
|
35
|
+
grid-column: span 12;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media screen and (max-width: 1200px) {
|
|
39
|
+
.lg1 {
|
|
40
|
+
grid-column: span 1;
|
|
41
|
+
}
|
|
42
|
+
.lg2 {
|
|
43
|
+
grid-column: span 2;
|
|
44
|
+
}
|
|
45
|
+
.lg3 {
|
|
46
|
+
grid-column: span 3;
|
|
47
|
+
}
|
|
48
|
+
.lg4 {
|
|
49
|
+
grid-column: span 4;
|
|
50
|
+
}
|
|
51
|
+
.lg5 {
|
|
52
|
+
grid-column: span 5;
|
|
53
|
+
}
|
|
54
|
+
.lg6 {
|
|
55
|
+
grid-column: span 6;
|
|
56
|
+
}
|
|
57
|
+
.lg7 {
|
|
58
|
+
grid-column: span 7;
|
|
59
|
+
}
|
|
60
|
+
.lg8 {
|
|
61
|
+
grid-column: span 8;
|
|
62
|
+
}
|
|
63
|
+
.lg9 {
|
|
64
|
+
grid-column: span 9;
|
|
65
|
+
}
|
|
66
|
+
.lg10 {
|
|
67
|
+
grid-column: span 10;
|
|
68
|
+
}
|
|
69
|
+
.lg11 {
|
|
70
|
+
grid-column: span 11;
|
|
71
|
+
}
|
|
72
|
+
.lg12 {
|
|
73
|
+
grid-column: span 12;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@media screen and (max-width: 900px) {
|
|
78
|
+
.md1 {
|
|
79
|
+
grid-column: span 1;
|
|
80
|
+
}
|
|
81
|
+
.md2 {
|
|
82
|
+
grid-column: span 2;
|
|
83
|
+
}
|
|
84
|
+
.md3 {
|
|
85
|
+
grid-column: span 3;
|
|
86
|
+
}
|
|
87
|
+
.md4 {
|
|
88
|
+
grid-column: span 4;
|
|
89
|
+
}
|
|
90
|
+
.md5 {
|
|
91
|
+
grid-column: span 5;
|
|
92
|
+
}
|
|
93
|
+
.md6 {
|
|
94
|
+
grid-column: span 6;
|
|
95
|
+
}
|
|
96
|
+
.md7 {
|
|
97
|
+
grid-column: span 7;
|
|
98
|
+
}
|
|
99
|
+
.md8 {
|
|
100
|
+
grid-column: span 8;
|
|
101
|
+
}
|
|
102
|
+
.md9 {
|
|
103
|
+
grid-column: span 9;
|
|
104
|
+
}
|
|
105
|
+
.md10 {
|
|
106
|
+
grid-column: span 10;
|
|
107
|
+
}
|
|
108
|
+
.md11 {
|
|
109
|
+
grid-column: span 11;
|
|
110
|
+
}
|
|
111
|
+
.md12 {
|
|
112
|
+
grid-column: span 12;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media screen and (max-width: 600px) {
|
|
117
|
+
.sm1 {
|
|
118
|
+
grid-column: span 1;
|
|
119
|
+
}
|
|
120
|
+
.sm2 {
|
|
121
|
+
grid-column: span 2;
|
|
122
|
+
}
|
|
123
|
+
.sm3 {
|
|
124
|
+
grid-column: span 3;
|
|
125
|
+
}
|
|
126
|
+
.sm4 {
|
|
127
|
+
grid-column: span 4;
|
|
128
|
+
}
|
|
129
|
+
.sm5 {
|
|
130
|
+
grid-column: span 5;
|
|
131
|
+
}
|
|
132
|
+
.sm6 {
|
|
133
|
+
grid-column: span 6;
|
|
134
|
+
}
|
|
135
|
+
.sm7 {
|
|
136
|
+
grid-column: span 7;
|
|
137
|
+
}
|
|
138
|
+
.sm8 {
|
|
139
|
+
grid-column: span 8;
|
|
140
|
+
}
|
|
141
|
+
.sm9 {
|
|
142
|
+
grid-column: span 9;
|
|
143
|
+
}
|
|
144
|
+
.sm10 {
|
|
145
|
+
grid-column: span 10;
|
|
146
|
+
}
|
|
147
|
+
.sm11 {
|
|
148
|
+
grid-column: span 11;
|
|
149
|
+
}
|
|
150
|
+
.sm12 {
|
|
151
|
+
grid-column: span 12;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@media screen and (max-width: 444px) {
|
|
156
|
+
.xs1 {
|
|
157
|
+
grid-column: span 1;
|
|
158
|
+
}
|
|
159
|
+
.xs2 {
|
|
160
|
+
grid-column: span 2;
|
|
161
|
+
}
|
|
162
|
+
.xs3 {
|
|
163
|
+
grid-column: span 3;
|
|
164
|
+
}
|
|
165
|
+
.xs4 {
|
|
166
|
+
grid-column: span 4;
|
|
167
|
+
}
|
|
168
|
+
.xs5 {
|
|
169
|
+
grid-column: span 5;
|
|
170
|
+
}
|
|
171
|
+
.xs6 {
|
|
172
|
+
grid-column: span 6;
|
|
173
|
+
}
|
|
174
|
+
.xs7 {
|
|
175
|
+
grid-column: span 7;
|
|
176
|
+
}
|
|
177
|
+
.xs8 {
|
|
178
|
+
grid-column: span 8;
|
|
179
|
+
}
|
|
180
|
+
.xs9 {
|
|
181
|
+
grid-column: span 9;
|
|
182
|
+
}
|
|
183
|
+
.xs10 {
|
|
184
|
+
grid-column: span 10;
|
|
185
|
+
}
|
|
186
|
+
.xs11 {
|
|
187
|
+
grid-column: span 11;
|
|
188
|
+
}
|
|
189
|
+
.xs12 {
|
|
190
|
+
grid-column: span 12;
|
|
191
|
+
}
|
|
192
|
+
}
|
package/gridItem/gridItem.tsx
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
-
import styles from "./gridItem.module.css";
|
|
4
|
-
|
|
5
|
-
interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
|
-
xs?: number;
|
|
7
|
-
sm?: number;
|
|
8
|
-
md?: number;
|
|
9
|
-
lg?: number;
|
|
10
|
-
xl?: number;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// Custom Button Element
|
|
14
|
-
function GridItem(props: GridItemProps) {
|
|
15
|
-
const joinedClassNames = joinClassNames(
|
|
16
|
-
props.xl ? styles["xl" + props.xl] : "",
|
|
17
|
-
props.lg ? styles["lg" + props.lg] : "",
|
|
18
|
-
props.md ? styles["md" + props.md] : "",
|
|
19
|
-
props.sm ? styles["sm" + props.sm] : "",
|
|
20
|
-
props.xs ? styles["xs" + props.xs] : "",
|
|
21
|
-
props.className!
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<div {...props} className={joinedClassNames}>
|
|
26
|
-
{props.children}
|
|
27
|
-
</div>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export default GridItem;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
+
import styles from "./gridItem.module.css";
|
|
4
|
+
|
|
5
|
+
interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
xs?: number;
|
|
7
|
+
sm?: number;
|
|
8
|
+
md?: number;
|
|
9
|
+
lg?: number;
|
|
10
|
+
xl?: number;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Custom Button Element
|
|
14
|
+
function GridItem(props: GridItemProps) {
|
|
15
|
+
const joinedClassNames = joinClassNames(
|
|
16
|
+
props.xl ? styles["xl" + props.xl] : "",
|
|
17
|
+
props.lg ? styles["lg" + props.lg] : "",
|
|
18
|
+
props.md ? styles["md" + props.md] : "",
|
|
19
|
+
props.sm ? styles["sm" + props.sm] : "",
|
|
20
|
+
props.xs ? styles["xs" + props.xs] : "",
|
|
21
|
+
props.className!
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<div {...props} className={joinedClassNames}>
|
|
26
|
+
{props.children}
|
|
27
|
+
</div>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default GridItem;
|
package/hr/hr.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface HrProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
-
variant?: "dotted" | "dashed" | "shortLine";
|
|
4
|
-
height?: number;
|
|
5
|
-
marginTopBottom?: number;
|
|
6
|
-
}
|
|
7
|
-
declare function Hr(props: HrProps): JSX.Element;
|
|
8
|
-
export default Hr;
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface HrProps extends React.HTMLAttributes<HTMLElement> {
|
|
3
|
+
variant?: "dotted" | "dashed" | "shortLine";
|
|
4
|
+
height?: number;
|
|
5
|
+
marginTopBottom?: number;
|
|
6
|
+
}
|
|
7
|
+
declare function Hr(props: HrProps): JSX.Element;
|
|
8
|
+
export default Hr;
|
package/hr/hr.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
-
import styles from "./hr.module.css";
|
|
4
|
-
function Hr(props) {
|
|
5
|
-
const joinedClassNames = joinClassNames(styles.hr, props.variant ? styles[props.variant] : "", props.className);
|
|
6
|
-
const joinedStyles = joinStyles(props.height ? { borderTopWidth: props.height + "rem" } : {}, props.marginTopBottom
|
|
7
|
-
? joinStyles({ marginTop: props.marginTopBottom + "rem" }, { marginBottom: props.marginTopBottom + "rem" })
|
|
8
|
-
: {}, props.style);
|
|
9
|
-
return React.createElement("hr", { ...props, className: joinedClassNames, style: joinedStyles });
|
|
10
|
-
}
|
|
11
|
-
export default Hr;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
+
import styles from "./hr.module.css";
|
|
4
|
+
function Hr(props) {
|
|
5
|
+
const joinedClassNames = joinClassNames(styles.hr, props.variant ? styles[props.variant] : "", props.className);
|
|
6
|
+
const joinedStyles = joinStyles(props.height ? { borderTopWidth: props.height + "rem" } : {}, props.marginTopBottom
|
|
7
|
+
? joinStyles({ marginTop: props.marginTopBottom + "rem" }, { marginBottom: props.marginTopBottom + "rem" })
|
|
8
|
+
: {}, props.style);
|
|
9
|
+
return React.createElement("hr", { ...props, className: joinedClassNames, style: joinedStyles });
|
|
10
|
+
}
|
|
11
|
+
export default Hr;
|
|
12
12
|
//# sourceMappingURL=hr.js.map
|
package/hr/hr.module.css
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
.hr {
|
|
2
|
-
width: calc(100% - 1rem);
|
|
3
|
-
height: 0;
|
|
4
|
-
padding: 0;
|
|
5
|
-
margin: 1rem auto;
|
|
6
|
-
background: none;
|
|
7
|
-
border: none;
|
|
8
|
-
border-top: 0.1rem solid rgb(var(--primaryContainerColor, 211 227 253));
|
|
9
|
-
}
|
|
10
|
-
.dotted {
|
|
11
|
-
border-top: 0.4rem dotted rgb(var(--primaryContainerColor, 211 227 253));
|
|
12
|
-
}
|
|
13
|
-
.dashed {
|
|
14
|
-
border-top: 0.2rem dashed rgb(var(--primaryContainerColor, 211 227 253));
|
|
15
|
-
}
|
|
16
|
-
.shortLine {
|
|
17
|
-
width: 30rem;
|
|
18
|
-
max-width: 80%;
|
|
19
|
-
}
|
|
1
|
+
.hr {
|
|
2
|
+
width: calc(100% - 1rem);
|
|
3
|
+
height: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
margin: 1rem auto;
|
|
6
|
+
background: none;
|
|
7
|
+
border: none;
|
|
8
|
+
border-top: 0.1rem solid rgb(var(--primaryContainerColor, 211 227 253));
|
|
9
|
+
}
|
|
10
|
+
.dotted {
|
|
11
|
+
border-top: 0.4rem dotted rgb(var(--primaryContainerColor, 211 227 253));
|
|
12
|
+
}
|
|
13
|
+
.dashed {
|
|
14
|
+
border-top: 0.2rem dashed rgb(var(--primaryContainerColor, 211 227 253));
|
|
15
|
+
}
|
|
16
|
+
.shortLine {
|
|
17
|
+
width: 30rem;
|
|
18
|
+
max-width: 80%;
|
|
19
|
+
}
|
package/hr/hr.tsx
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
-
import styles from "./hr.module.css";
|
|
4
|
-
|
|
5
|
-
interface HrProps extends React.HTMLAttributes<HTMLElement> {
|
|
6
|
-
variant?: "dotted" | "dashed" | "shortLine";
|
|
7
|
-
height?: number;
|
|
8
|
-
marginTopBottom?: number;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function Hr(props: HrProps) {
|
|
12
|
-
const joinedClassNames = joinClassNames(
|
|
13
|
-
styles.hr,
|
|
14
|
-
props.variant ? styles[props.variant] : "",
|
|
15
|
-
props.className!
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
const joinedStyles = joinStyles(
|
|
19
|
-
props.height ? { borderTopWidth: props.height + "rem" } : {},
|
|
20
|
-
props.marginTopBottom
|
|
21
|
-
? joinStyles(
|
|
22
|
-
{ marginTop: props.marginTopBottom + "rem" },
|
|
23
|
-
{ marginBottom: props.marginTopBottom + "rem" }
|
|
24
|
-
)
|
|
25
|
-
: {},
|
|
26
|
-
props.style!
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
return <hr {...props} className={joinedClassNames} style={joinedStyles}></hr>;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export default Hr;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { joinClassNames, joinStyles } from "@yakad/lib";
|
|
3
|
+
import styles from "./hr.module.css";
|
|
4
|
+
|
|
5
|
+
interface HrProps extends React.HTMLAttributes<HTMLElement> {
|
|
6
|
+
variant?: "dotted" | "dashed" | "shortLine";
|
|
7
|
+
height?: number;
|
|
8
|
+
marginTopBottom?: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function Hr(props: HrProps) {
|
|
12
|
+
const joinedClassNames = joinClassNames(
|
|
13
|
+
styles.hr,
|
|
14
|
+
props.variant ? styles[props.variant] : "",
|
|
15
|
+
props.className!
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
const joinedStyles = joinStyles(
|
|
19
|
+
props.height ? { borderTopWidth: props.height + "rem" } : {},
|
|
20
|
+
props.marginTopBottom
|
|
21
|
+
? joinStyles(
|
|
22
|
+
{ marginTop: props.marginTopBottom + "rem" },
|
|
23
|
+
{ marginBottom: props.marginTopBottom + "rem" }
|
|
24
|
+
)
|
|
25
|
+
: {},
|
|
26
|
+
props.style!
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
return <hr {...props} className={joinedClassNames} style={joinedStyles}></hr>;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default Hr;
|
package/index.d.ts
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import Button from "./button/button";
|
|
2
|
-
import AppBar from "./appBar/appBar";
|
|
3
|
-
import Card from "./card/card";
|
|
4
|
-
import Container from "./container/container";
|
|
5
|
-
import Footer from "./footer/footer";
|
|
6
|
-
import Form from "./form/form";
|
|
7
|
-
import GridContainer from "./gridContainer/gridContainer";
|
|
8
|
-
import GridItem from "./gridItem/gridItem";
|
|
9
|
-
import Hr from "./hr/hr";
|
|
10
|
-
import List from "./list/list";
|
|
11
|
-
import ListItem from "./listItem/listItem";
|
|
12
|
-
import Main from "./main/main";
|
|
13
|
-
import Navigation from "./navigation/navigation";
|
|
14
|
-
import Page from "./page/page";
|
|
15
|
-
import Row from "./row/row";
|
|
16
|
-
import Spacer from "./spacer/spacer";
|
|
17
|
-
import Stack from "./stack/stack";
|
|
18
|
-
import SvgIcon from "./svgIcon/svgIcon";
|
|
19
|
-
import Loading from "./loading/loading";
|
|
20
|
-
import CodeField from "./codeField/codeField";
|
|
21
|
-
import InputField from "./inputField/inputField";
|
|
22
|
-
import Theme from "./theme/theme";
|
|
23
|
-
import ClickAwayListener from "./clickAwayListener/clickAwayListener";
|
|
24
|
-
export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, };
|
|
1
|
+
import Button from "./button/button";
|
|
2
|
+
import AppBar from "./appBar/appBar";
|
|
3
|
+
import Card from "./card/card";
|
|
4
|
+
import Container from "./container/container";
|
|
5
|
+
import Footer from "./footer/footer";
|
|
6
|
+
import Form from "./form/form";
|
|
7
|
+
import GridContainer from "./gridContainer/gridContainer";
|
|
8
|
+
import GridItem from "./gridItem/gridItem";
|
|
9
|
+
import Hr from "./hr/hr";
|
|
10
|
+
import List from "./list/list";
|
|
11
|
+
import ListItem from "./listItem/listItem";
|
|
12
|
+
import Main from "./main/main";
|
|
13
|
+
import Navigation from "./navigation/navigation";
|
|
14
|
+
import Page from "./page/page";
|
|
15
|
+
import Row from "./row/row";
|
|
16
|
+
import Spacer from "./spacer/spacer";
|
|
17
|
+
import Stack from "./stack/stack";
|
|
18
|
+
import SvgIcon from "./svgIcon/svgIcon";
|
|
19
|
+
import Loading from "./loading/loading";
|
|
20
|
+
import CodeField from "./codeField/codeField";
|
|
21
|
+
import InputField from "./inputField/inputField";
|
|
22
|
+
import Theme from "./theme/theme";
|
|
23
|
+
import ClickAwayListener from "./clickAwayListener/clickAwayListener";
|
|
24
|
+
export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Theme, ClickAwayListener, };
|