@xaypay/tui 0.0.54 → 0.0.55
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/.storybook/main.js +27 -20
- package/cli-command.js +3 -0
- package/dist/index.es.js +185 -45
- package/dist/index.js +186 -45
- package/package.json +7 -5
- package/src/components/button/index.js +29 -20
- package/src/components/input/index.js +134 -34
- package/src/components/input/input.module.css +17 -15
- package/src/components/typography/index.js +59 -4
- package/src/components/typography/typography.stories.js +8 -2
- package/src/stories/Introduction.stories.mdx +82 -93
- package/src/stories/changelog.stories.mdx +118 -0
- package/src/stories/configuration.stories.mdx +317 -0
- package/src/stories/documentation.stories.mdx +118 -0
- package/tui.config.js +178 -50
- package/storybook-static/favicon.ico +0 -0
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs';
|
|
2
|
+
import Code from './assets/code-brackets.svg';
|
|
3
|
+
import Colors from './assets/colors.svg';
|
|
4
|
+
import Comments from './assets/comments.svg';
|
|
5
|
+
import Direction from './assets/direction.svg';
|
|
6
|
+
import Flow from './assets/flow.svg';
|
|
7
|
+
import Plugin from './assets/plugin.svg';
|
|
8
|
+
import Repo from './assets/repo.svg';
|
|
9
|
+
import StackAlt from './assets/stackalt.svg';
|
|
10
|
+
|
|
11
|
+
<Meta title="Intro/Changelog" />
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
{`
|
|
15
|
+
.subheading {
|
|
16
|
+
--mediumdark: '#999999';
|
|
17
|
+
font-weight: 900;
|
|
18
|
+
font-size: 13px;
|
|
19
|
+
color: #999;
|
|
20
|
+
letter-spacing: 6px;
|
|
21
|
+
line-height: 24px;
|
|
22
|
+
text-transform: uppercase;
|
|
23
|
+
margin-bottom: 12px;
|
|
24
|
+
margin-top: 40px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.link-list {
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-columns: 1fr;
|
|
30
|
+
grid-template-rows: 1fr 1fr;
|
|
31
|
+
row-gap: 10px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (min-width: 620px) {
|
|
35
|
+
.link-list {
|
|
36
|
+
row-gap: 20px;
|
|
37
|
+
column-gap: 20px;
|
|
38
|
+
grid-template-columns: 1fr 1fr;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media all and (-ms-high-contrast:none) {
|
|
43
|
+
.link-list {
|
|
44
|
+
display: -ms-grid;
|
|
45
|
+
-ms-grid-columns: 1fr 1fr;
|
|
46
|
+
-ms-grid-rows: 1fr 1fr;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.link-item {
|
|
51
|
+
display: block;
|
|
52
|
+
padding: 20px 30px 20px 15px;
|
|
53
|
+
border: 1px solid #00000010;
|
|
54
|
+
border-radius: 5px;
|
|
55
|
+
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
|
56
|
+
color: #333333;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: flex-start;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.link-item:hover {
|
|
62
|
+
border-color: #1EA7FD50;
|
|
63
|
+
transform: translate3d(0, -3px, 0);
|
|
64
|
+
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.link-item:active {
|
|
68
|
+
border-color: #1EA7FD;
|
|
69
|
+
transform: translate3d(0, 0, 0);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.link-item strong {
|
|
73
|
+
font-weight: 700;
|
|
74
|
+
display: block;
|
|
75
|
+
margin-bottom: 2px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.link-item img {
|
|
79
|
+
height: 40px;
|
|
80
|
+
width: 40px;
|
|
81
|
+
margin-right: 15px;
|
|
82
|
+
flex: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.link-item span {
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
line-height: 20px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.tip {
|
|
91
|
+
display: inline-block;
|
|
92
|
+
border-radius: 1em;
|
|
93
|
+
font-size: 11px;
|
|
94
|
+
line-height: 12px;
|
|
95
|
+
font-weight: 700;
|
|
96
|
+
background: #E7FDD8;
|
|
97
|
+
color: #66BF3C;
|
|
98
|
+
padding: 4px 12px;
|
|
99
|
+
margin-right: 10px;
|
|
100
|
+
vertical-align: top;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.tip-wrapper {
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
line-height: 20px;
|
|
106
|
+
margin-top: 40px;
|
|
107
|
+
margin-bottom: 40px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.tip-wrapper code {
|
|
111
|
+
font-size: 12px;
|
|
112
|
+
display: inline-block;
|
|
113
|
+
}
|
|
114
|
+
`}
|
|
115
|
+
</style>
|
|
116
|
+
|
|
117
|
+
# Documentation
|
|
118
|
+
|
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs';
|
|
2
|
+
import Code from './assets/code-brackets.svg';
|
|
3
|
+
import Colors from './assets/colors.svg';
|
|
4
|
+
import Comments from './assets/comments.svg';
|
|
5
|
+
import Direction from './assets/direction.svg';
|
|
6
|
+
import Flow from './assets/flow.svg';
|
|
7
|
+
import Plugin from './assets/plugin.svg';
|
|
8
|
+
import Repo from './assets/repo.svg';
|
|
9
|
+
import StackAlt from './assets/stackalt.svg';
|
|
10
|
+
|
|
11
|
+
<Meta title="Intro/Configuration" />
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
{`
|
|
15
|
+
.subheading {
|
|
16
|
+
--mediumdark: '#999999';
|
|
17
|
+
font-weight: 900;
|
|
18
|
+
font-size: 13px;
|
|
19
|
+
color: #999;
|
|
20
|
+
letter-spacing: 6px;
|
|
21
|
+
line-height: 24px;
|
|
22
|
+
text-transform: uppercase;
|
|
23
|
+
margin-bottom: 12px;
|
|
24
|
+
margin-top: 40px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sbdocs-content {
|
|
28
|
+
max-width: 80% !important;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.link-list {
|
|
32
|
+
display: grid;
|
|
33
|
+
grid-template-columns: 1fr;
|
|
34
|
+
grid-template-rows: 1fr 1fr;
|
|
35
|
+
row-gap: 10px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media (min-width: 620px) {
|
|
39
|
+
.link-list {
|
|
40
|
+
row-gap: 20px;
|
|
41
|
+
column-gap: 20px;
|
|
42
|
+
grid-template-columns: 1fr 1fr;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@media all and (-ms-high-contrast:none) {
|
|
47
|
+
.link-list {
|
|
48
|
+
display: -ms-grid;
|
|
49
|
+
-ms-grid-columns: 1fr 1fr;
|
|
50
|
+
-ms-grid-rows: 1fr 1fr;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.link-item {
|
|
55
|
+
display: block;
|
|
56
|
+
padding: 20px 30px 20px 15px;
|
|
57
|
+
border: 1px solid #00000010;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
|
60
|
+
color: #333333;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: flex-start;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.link-item:hover {
|
|
66
|
+
border-color: #1EA7FD50;
|
|
67
|
+
transform: translate3d(0, -3px, 0);
|
|
68
|
+
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.link-item:active {
|
|
72
|
+
border-color: #1EA7FD;
|
|
73
|
+
transform: translate3d(0, 0, 0);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.link-item strong {
|
|
77
|
+
font-weight: 700;
|
|
78
|
+
display: block;
|
|
79
|
+
margin-bottom: 2px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.link-item img {
|
|
83
|
+
height: 40px;
|
|
84
|
+
width: 40px;
|
|
85
|
+
margin-right: 15px;
|
|
86
|
+
flex: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.link-item span {
|
|
90
|
+
font-size: 14px;
|
|
91
|
+
line-height: 20px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.tip {
|
|
95
|
+
display: inline-block;
|
|
96
|
+
border-radius: 1em;
|
|
97
|
+
font-size: 11px;
|
|
98
|
+
line-height: 12px;
|
|
99
|
+
font-weight: 700;
|
|
100
|
+
background: #E7FDD8;
|
|
101
|
+
color: #66BF3C;
|
|
102
|
+
padding: 4px 12px;
|
|
103
|
+
margin-right: 10px;
|
|
104
|
+
vertical-align: top;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.tip-wrapper {
|
|
108
|
+
font-size: 13px;
|
|
109
|
+
line-height: 20px;
|
|
110
|
+
margin-top: 40px;
|
|
111
|
+
margin-bottom: 40px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.tip-wrapper code {
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
display: inline-block;
|
|
117
|
+
}
|
|
118
|
+
`}
|
|
119
|
+
</style>
|
|
120
|
+
|
|
121
|
+
# Configuration
|
|
122
|
+
|
|
123
|
+
### Button
|
|
124
|
+
|
|
125
|
+
```
|
|
126
|
+
{
|
|
127
|
+
size: '16px', // for font size
|
|
128
|
+
font: 'Arial', // for font family
|
|
129
|
+
radius: '6px', // for border radius
|
|
130
|
+
width: '100%', // for width
|
|
131
|
+
weight: '400', // for font weight
|
|
132
|
+
type: 'button', // for type
|
|
133
|
+
height: '46px', // for height
|
|
134
|
+
color: 'white', // for color
|
|
135
|
+
border: 'none', // for border
|
|
136
|
+
disabled: false, // for disabled
|
|
137
|
+
cursor: 'pointer', // for cursor
|
|
138
|
+
contentWidth: false, // for auto width, if contentWidth prop is exsit, then button get size automatically from inner content
|
|
139
|
+
padding: '12px 20px', // for padding
|
|
140
|
+
textTransform: 'none', // for text transform
|
|
141
|
+
boxSizing: 'border-box', // for box sizing
|
|
142
|
+
bgColor: 'rgba(0, 35, 106, 1)', // for background color
|
|
143
|
+
disabledColor: 'rgba(60, 57, 62, 1)', // for color in disabled mode
|
|
144
|
+
disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
|
|
145
|
+
disabledBgColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
|
|
146
|
+
transition: 'background-color 240ms, color 240ms', // for transition
|
|
147
|
+
},
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Input
|
|
151
|
+
|
|
152
|
+
```
|
|
153
|
+
{
|
|
154
|
+
size: '16px', // for font size
|
|
155
|
+
type: 'text', // for type
|
|
156
|
+
width: '100%', // for width
|
|
157
|
+
radius: '0px', // for input and also (if there exist left or right icons) icons block border-radius
|
|
158
|
+
className: '', // for input classname (you can set custom class for your custom css)
|
|
159
|
+
height: '46px', // for height
|
|
160
|
+
tooltip: false, // for tooltip
|
|
161
|
+
required: false, // for showing required mark on label (it meens input is required)
|
|
162
|
+
disabled: false, // for disabled
|
|
163
|
+
errorLeft: '0px', // for error message position from left (work when errorPosition prop is 'absolute')
|
|
164
|
+
errorZindex: '1', // for error message z-index (work when errorPosition prop is 'absolute')
|
|
165
|
+
iconWidth: '64px', // for left or right icon block width (you can add your custom icon and you can set icon block size)
|
|
166
|
+
errorSize: '14px', // for error font size
|
|
167
|
+
labelSize: '16px', // for label font size
|
|
168
|
+
errorColor: '#e00', // for error message color
|
|
169
|
+
labelWeight: '500', // for label font weight
|
|
170
|
+
errorClassName: '', // for error message classname (you can set custom class for your custom css)
|
|
171
|
+
autoComplete: 'off', // for autocomplete fill mode (browser specific, may not work)
|
|
172
|
+
errorBottom: '-20px', // for error message position from bottom (work when errorPosition prop is 'absolute')
|
|
173
|
+
padding: '12px 15px', // for padding
|
|
174
|
+
labelColor: '#3c393e', // for label color
|
|
175
|
+
errorAnimation: false, // for error showing animation
|
|
176
|
+
labelDisplay: 'block', // for label display
|
|
177
|
+
labelLineHeight: '22px', // for label line height
|
|
178
|
+
errorLineHeight: '19px', // for error message line height
|
|
179
|
+
boxSizing: 'border-box', // for box sizing
|
|
180
|
+
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
181
|
+
color: 'rgb(60, 57, 62)', // for input color
|
|
182
|
+
labelMarginBottom: '6px', // for label margin bottom
|
|
183
|
+
errorPosition: 'absolute', // for error message position (maybe you want to show error message in custom place)
|
|
184
|
+
transform: 'scale3d(0,0,0)', // for transform (when have error message and errorAnimation prop is true)
|
|
185
|
+
boxShadow: '0 0 0 2px #d1d1d1', // for border size and color
|
|
186
|
+
errorAnimationDuration: '240ms', // for animation duration (when have error message and errorAnimation prop is true)
|
|
187
|
+
boxShadowHover: '0 0 0 2px #3c393e', // for border size and color in hover mode (set if you want to change it)
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Typography
|
|
192
|
+
|
|
193
|
+
```
|
|
194
|
+
{
|
|
195
|
+
radius: '0px', // for border radius
|
|
196
|
+
border: 'none', // for border
|
|
197
|
+
cursor: 'default', // for cursor
|
|
198
|
+
textShadow: 'none', // for text shadow
|
|
199
|
+
|
|
200
|
+
marginp: '0px', // for variant p margin
|
|
201
|
+
marginh1: '0px', // for variant h1 margin
|
|
202
|
+
marginh2: '0px', // for variant h2 margin
|
|
203
|
+
marginh3: '0px', // for variant h3 margin
|
|
204
|
+
marginh4: '0px', // for variant h4 margin
|
|
205
|
+
marginh5: '0px', // for variant h5 margin
|
|
206
|
+
marginh6: '0px', // for variant h6 margin
|
|
207
|
+
marginspan: '0px', // for variant span margin
|
|
208
|
+
|
|
209
|
+
colorp: '#3C393E', // for variant p color
|
|
210
|
+
colorh1: '#3C393E', // for variant h1 color
|
|
211
|
+
colorh2: '#3C393E', // for variant h2 color
|
|
212
|
+
colorh3: '#3C393E', // for variant h3 color
|
|
213
|
+
colorh4: '#3C393E', // for variant h4 color
|
|
214
|
+
colorh5: '#3C393E', // for variant h5 color
|
|
215
|
+
colorh6: '#3C393E', // for variant h6 color
|
|
216
|
+
colorspan: '#3C393E', // for variant span color
|
|
217
|
+
|
|
218
|
+
paddingp: '0px', // for variant p padding
|
|
219
|
+
paddingh1: '0px', // for variant h1 padding
|
|
220
|
+
paddingh2: '0px', // for variant h2 padding
|
|
221
|
+
paddingh3: '0px', // for variant h3 padding
|
|
222
|
+
paddingh4: '0px', // for variant h4 padding
|
|
223
|
+
paddingh5: '0px', // for variant h5 padding
|
|
224
|
+
paddingh6: '0px', // for variant h6 padding
|
|
225
|
+
paddingspan: '0px', // for variant span padding
|
|
226
|
+
|
|
227
|
+
sizep: '13px', // for variant p font size
|
|
228
|
+
sizeh1: '70px', // for variant h1 font size
|
|
229
|
+
sizeh2: '50px', // for variant h2 font size
|
|
230
|
+
sizeh3: '38px', // for variant h3 font size
|
|
231
|
+
sizeh4: '24px', // for variant h4 font size
|
|
232
|
+
sizeh5: '20px', // for variant h5 font size
|
|
233
|
+
sizeh6: '14px', // for variant h6 font size
|
|
234
|
+
sizespan: '12px', // for variant span font size
|
|
235
|
+
|
|
236
|
+
textAlignp: '0px', // for variant p text align
|
|
237
|
+
textAlignh1: '0px', // for variant h1 text align
|
|
238
|
+
textAlignh2: '0px', // for variant h2 text align
|
|
239
|
+
textAlignh3: '0px', // for variant h3 text align
|
|
240
|
+
textAlignh4: '0px', // for variant h4 text align
|
|
241
|
+
textAlignh5: '0px', // for variant h5 text align
|
|
242
|
+
textAlignh6: '0px', // for variant h6 text align
|
|
243
|
+
textAlignspan: '0px', // for variant span text align
|
|
244
|
+
|
|
245
|
+
weightp: '500', // for variant p font weight
|
|
246
|
+
weighth1: '400', // for variant h1 font weight
|
|
247
|
+
weighth2: '400', // for variant h2 font weight
|
|
248
|
+
weighth3: '400', // for variant h3 font weight
|
|
249
|
+
weighth4: '600', // for variant h4 font weight
|
|
250
|
+
weighth5: '600', // for variant h5 font weight
|
|
251
|
+
weighth6: '600', // for variant h6 font weight
|
|
252
|
+
weightspan: '500', // for variant span font weight
|
|
253
|
+
|
|
254
|
+
colorHoverp: '#3C393E', // for variant p color in hover mode
|
|
255
|
+
colorHoverh1: '#3C393E', // for variant h1 color in hover mode
|
|
256
|
+
colorHoverh2: '#3C393E', // for variant h2 color in hover mode
|
|
257
|
+
colorHoverh3: '#3C393E', // for variant h3 color in hover mode
|
|
258
|
+
colorHoverh4: '#3C393E', // for variant h4 color in hover mode
|
|
259
|
+
colorHoverh5: '#3C393E', // for variant h5 color in hover mode
|
|
260
|
+
colorHoverh6: '#3C393E', // for variant h6 color in hover mode
|
|
261
|
+
colorHoverspan: '#3C393E', // for variant span color in hover mode
|
|
262
|
+
|
|
263
|
+
bgColorp: 'transparent', // for variant p background color
|
|
264
|
+
bgColorh1: 'transparent', // for variant h1 background color
|
|
265
|
+
bgColorh2: 'transparent', // for variant h2 background color
|
|
266
|
+
bgColorh3: 'transparent', // for variant h3 background color
|
|
267
|
+
bgColorh4: 'transparent', // for variant h4 background color
|
|
268
|
+
bgColorh5: 'transparent', // for variant h5 background color
|
|
269
|
+
bgColorh6: 'transparent', // for variant h6 background color
|
|
270
|
+
bgColorspan: 'transparent', // for variant span background color
|
|
271
|
+
|
|
272
|
+
textDecorationp: 'none', // for variant p text decoration
|
|
273
|
+
textDecorationh1: 'none', // for variant h1 text decoration
|
|
274
|
+
textDecorationh2: 'none', // for variant h2 text decoration
|
|
275
|
+
textDecorationh3: 'none', // for variant h3 text decoration
|
|
276
|
+
textDecorationh4: 'none', // for variant h4 text decoration
|
|
277
|
+
textDecorationh5: 'none', // for variant h5 text decoration
|
|
278
|
+
textDecorationh6: 'none', // for variant h6 text decoration
|
|
279
|
+
textDecorationspan: 'none', // for variant span text decoration
|
|
280
|
+
|
|
281
|
+
fontStylep: 'normal', // for variant p font style
|
|
282
|
+
fontStyleh1: 'normal', // for variant h1 font style
|
|
283
|
+
fontStyleh2: 'normal', // for variant h2 font style
|
|
284
|
+
fontStyleh3: 'normal', // for variant h3 font style
|
|
285
|
+
fontStyleh4: 'normal', // for variant h4 font style
|
|
286
|
+
fontStyleh5: 'normal', // for variant h5 font style
|
|
287
|
+
fontStyleh6: 'normal', // for variant h6 font style
|
|
288
|
+
fontStylespan: 'normal', // for variant span font style
|
|
289
|
+
|
|
290
|
+
lineHeightp: 'normal', // for variant p line height
|
|
291
|
+
lineHeighth1: 'normal', // for variant h1 line height
|
|
292
|
+
lineHeighth2: 'normal', // for variant h2 line height
|
|
293
|
+
lineHeighth3: 'normal', // for variant h3 line height
|
|
294
|
+
lineHeighth4: 'normal', // for variant h4 line height
|
|
295
|
+
lineHeighth5: 'normal', // for variant h5 line height
|
|
296
|
+
lineHeighth6: 'normal', // for variant h6 line height
|
|
297
|
+
lineHeightspan: 'normal', // for variant span line height
|
|
298
|
+
|
|
299
|
+
textTransformp: 'none', // for variant p text transform
|
|
300
|
+
textTransformh1: 'none', // for variant h1 text transform
|
|
301
|
+
textTransformh2: 'none', // for variant h2 text transform
|
|
302
|
+
textTransformh3: 'none', // for variant h3 text transform
|
|
303
|
+
textTransformh4: 'none', // for variant h4 text transform
|
|
304
|
+
textTransformh5: 'none', // for variant h5 text transform
|
|
305
|
+
textTransformh6: 'none', // for variant h6 text transform
|
|
306
|
+
textTransformspan: 'none', // for variant span text transform
|
|
307
|
+
|
|
308
|
+
fontFamilyp: 'Arial, sans-serif', // for variant p font family
|
|
309
|
+
fontFamilyh1: 'Arial, sans-serif', // for variant h1 font family
|
|
310
|
+
fontFamilyh2: 'Arial, sans-serif', // for variant h2 font family
|
|
311
|
+
fontFamilyh3: 'Arial, sans-serif', // for variant h3 font family
|
|
312
|
+
fontFamilyh4: 'Arial, sans-serif', // for variant h4 font family
|
|
313
|
+
fontFamilyh5: 'Arial, sans-serif', // for variant h5 font family
|
|
314
|
+
fontFamilyh6: 'Arial, sans-serif', // for variant h6 font family
|
|
315
|
+
fontFamilyspan: 'Arial, sans-serif', // for variant span font family
|
|
316
|
+
}
|
|
317
|
+
```
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs';
|
|
2
|
+
import Code from './assets/code-brackets.svg';
|
|
3
|
+
import Colors from './assets/colors.svg';
|
|
4
|
+
import Comments from './assets/comments.svg';
|
|
5
|
+
import Direction from './assets/direction.svg';
|
|
6
|
+
import Flow from './assets/flow.svg';
|
|
7
|
+
import Plugin from './assets/plugin.svg';
|
|
8
|
+
import Repo from './assets/repo.svg';
|
|
9
|
+
import StackAlt from './assets/stackalt.svg';
|
|
10
|
+
|
|
11
|
+
<Meta title="Intro/Documentation" />
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
{`
|
|
15
|
+
.subheading {
|
|
16
|
+
--mediumdark: '#999999';
|
|
17
|
+
font-weight: 900;
|
|
18
|
+
font-size: 13px;
|
|
19
|
+
color: #999;
|
|
20
|
+
letter-spacing: 6px;
|
|
21
|
+
line-height: 24px;
|
|
22
|
+
text-transform: uppercase;
|
|
23
|
+
margin-bottom: 12px;
|
|
24
|
+
margin-top: 40px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.link-list {
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-columns: 1fr;
|
|
30
|
+
grid-template-rows: 1fr 1fr;
|
|
31
|
+
row-gap: 10px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (min-width: 620px) {
|
|
35
|
+
.link-list {
|
|
36
|
+
row-gap: 20px;
|
|
37
|
+
column-gap: 20px;
|
|
38
|
+
grid-template-columns: 1fr 1fr;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media all and (-ms-high-contrast:none) {
|
|
43
|
+
.link-list {
|
|
44
|
+
display: -ms-grid;
|
|
45
|
+
-ms-grid-columns: 1fr 1fr;
|
|
46
|
+
-ms-grid-rows: 1fr 1fr;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.link-item {
|
|
51
|
+
display: block;
|
|
52
|
+
padding: 20px 30px 20px 15px;
|
|
53
|
+
border: 1px solid #00000010;
|
|
54
|
+
border-radius: 5px;
|
|
55
|
+
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
|
56
|
+
color: #333333;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: flex-start;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.link-item:hover {
|
|
62
|
+
border-color: #1EA7FD50;
|
|
63
|
+
transform: translate3d(0, -3px, 0);
|
|
64
|
+
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.link-item:active {
|
|
68
|
+
border-color: #1EA7FD;
|
|
69
|
+
transform: translate3d(0, 0, 0);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.link-item strong {
|
|
73
|
+
font-weight: 700;
|
|
74
|
+
display: block;
|
|
75
|
+
margin-bottom: 2px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.link-item img {
|
|
79
|
+
height: 40px;
|
|
80
|
+
width: 40px;
|
|
81
|
+
margin-right: 15px;
|
|
82
|
+
flex: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.link-item span {
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
line-height: 20px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.tip {
|
|
91
|
+
display: inline-block;
|
|
92
|
+
border-radius: 1em;
|
|
93
|
+
font-size: 11px;
|
|
94
|
+
line-height: 12px;
|
|
95
|
+
font-weight: 700;
|
|
96
|
+
background: #E7FDD8;
|
|
97
|
+
color: #66BF3C;
|
|
98
|
+
padding: 4px 12px;
|
|
99
|
+
margin-right: 10px;
|
|
100
|
+
vertical-align: top;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.tip-wrapper {
|
|
104
|
+
font-size: 13px;
|
|
105
|
+
line-height: 20px;
|
|
106
|
+
margin-top: 40px;
|
|
107
|
+
margin-bottom: 40px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.tip-wrapper code {
|
|
111
|
+
font-size: 12px;
|
|
112
|
+
display: inline-block;
|
|
113
|
+
}
|
|
114
|
+
`}
|
|
115
|
+
</style>
|
|
116
|
+
|
|
117
|
+
# Documentation
|
|
118
|
+
|