forstok-ui-lib 1.0.11 → 1.0.12
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/package.json +1 -1
- package/src/assets/images/icons/arrow-left-blue.svg +10 -0
- package/src/assets/images/icons/check-white.svg +10 -0
- package/src/assets/images/icons/checkmark-tick-grey.svg +10 -0
- package/src/assets/images/icons/checkmark-tick.svg +10 -0
- package/src/assets/images/icons/close-white.svg +9 -0
- package/src/assets/images/icons/close.svg +9 -0
- package/src/assets/images/icons/dotted.svg +5 -0
- package/src/assets/images/icons/search.svg +4 -0
- package/src/assets/images/icons/warning-white.svg +4 -0
- package/src/assets/images/icons/warning.svg +9 -0
- package/src/components/button/button.styles.ts +238 -0
- package/src/components/button/button.tsx +44 -0
- package/src/components/index.ts +2 -1
- package/src/declarations.d.ts +54 -0
- package/tsconfig.json +2 -1
package/package.json
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
+
viewBox="0 0 309.143 309.143" style="enable-background:new 0 0 309.143 309.143;" xml:space="preserve">
|
|
6
|
+
<path style="fill:#0076FF;" d="M112.855,154.571L240.481,26.946c2.929-2.929,2.929-7.678,0-10.606L226.339,2.197
|
|
7
|
+
C224.933,0.79,223.025,0,221.036,0c-1.989,0-3.897,0.79-5.303,2.197L68.661,149.268c-2.929,2.929-2.929,7.678,0,10.606
|
|
8
|
+
l147.071,147.071c1.406,1.407,3.314,2.197,5.303,2.197c1.989,0,3.897-0.79,5.303-2.197l14.142-14.143
|
|
9
|
+
c2.929-2.929,2.929-7.678,0-10.606L112.855,154.571z"/>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
+
viewBox="0 0 700 700" enable-background="new 0 0 700 700" xml:space="preserve">
|
|
6
|
+
<path fill="#fff" d="M286.024,656.312c-0.54,0-1.079-0.009-1.618-0.019c-27.785-0.475-53.887-13.426-71.079-35.25L33.782,418.025
|
|
7
|
+
C2.15,377.867,9.06,319.666,49.191,288.043c40.15-31.641,98.36-24.723,129.992,15.428l109.41,113.988L523.214,63.886
|
|
8
|
+
c33.003-39.035,91.413-43.888,130.431-10.867c39.017,33.021,43.889,91.414,10.867,130.439l-307.83,440.088
|
|
9
|
+
C339.08,644.339,313.214,656.312,286.024,656.312z"/>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
+
viewBox="0 0 700 700" enable-background="new 0 0 700 700" xml:space="preserve">
|
|
6
|
+
<path fill="#cccccc" d="M286.024,656.312c-0.54,0-1.079-0.009-1.618-0.019c-27.785-0.475-53.887-13.426-71.079-35.25L33.782,418.025
|
|
7
|
+
C2.15,377.867,9.06,319.666,49.191,288.043c40.15-31.641,98.36-24.723,129.992,15.428l109.41,113.988L523.214,63.886
|
|
8
|
+
c33.003-39.035,91.413-43.888,130.431-10.867c39.017,33.021,43.889,91.414,10.867,130.439l-307.83,440.088
|
|
9
|
+
C339.08,644.339,313.214,656.312,286.024,656.312z"/>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
+
viewBox="0 0 700 700" enable-background="new 0 0 700 700" xml:space="preserve">
|
|
6
|
+
<path fill="#2DB84C" d="M286.024,656.312c-0.54,0-1.079-0.009-1.618-0.019c-27.785-0.475-53.887-13.426-71.079-35.25L33.782,418.025
|
|
7
|
+
C2.15,377.867,9.06,319.666,49.191,288.043c40.15-31.641,98.36-24.723,129.992,15.428l109.41,113.988L523.214,63.886
|
|
8
|
+
c33.003-39.035,91.413-43.888,130.431-10.867c39.017,33.021,43.889,91.414,10.867,130.439l-307.83,440.088
|
|
9
|
+
C339.08,644.339,313.214,656.312,286.024,656.312z"/>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982; fill: #ffffff" xml:space="preserve">
|
|
5
|
+
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
|
|
6
|
+
c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
|
|
7
|
+
l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
|
|
8
|
+
c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
|
|
9
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
+
viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982; fill: rgb(72,72,72)" xml:space="preserve">
|
|
5
|
+
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
|
|
6
|
+
c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
|
|
7
|
+
l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
|
|
8
|
+
c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
|
|
9
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
2
|
+
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.5C4.75329 0.5 0.5 4.75329 0.5 10C0.5 15.2467 4.75329 19.5 10 19.5C12.082 19.5 14.0076 18.8302 15.5731 17.6944L20.2929 22.4142C20.6834 22.8047 21.3166 22.8047 21.7071 22.4142L22.4142 21.7071C22.8047 21.3166 22.8047 20.6834 22.4142 20.2929L17.6944 15.5731C18.8302 14.0076 19.5 12.082 19.5 10C19.5 4.75329 15.2467 0.5 10 0.5ZM3.5 10C3.5 6.41015 6.41015 3.5 10 3.5C13.5899 3.5 16.5 6.41015 16.5 10C16.5 13.5899 13.5899 16.5 10 16.5C6.41015 16.5 3.5 13.5899 3.5 10Z" fill="#FC5C64"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<?xml version="1.0"?>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve" width="100%" height="100%" class=""><g><g>
|
|
3
|
+
<path d="M143.027,0C64.04,0,0,64.04,0,143.027c0,78.996,64.04,143.027,143.027,143.027 c78.996,0,143.027-64.022,143.027-143.027C286.054,64.04,222.022,0,143.027,0z M143.027,259.236 c-64.183,0-116.209-52.026-116.209-116.209S78.844,26.818,143.027,26.818s116.209,52.026,116.209,116.209 S207.21,259.236,143.027,259.236z M143.036,62.726c-10.244,0-17.995,5.346-17.995,13.981v79.201c0,8.644,7.75,13.972,17.995,13.972 c9.994,0,17.995-5.551,17.995-13.972V76.707C161.03,68.277,153.03,62.726,143.036,62.726z M143.036,187.723 c-9.842,0-17.852,8.01-17.852,17.86c0,9.833,8.01,17.843,17.852,17.843s17.843-8.01,17.843-17.843 C160.878,195.732,152.878,187.723,143.036,187.723z" data-original="#E2574C" class="active-path" data-old_color="#ffffff" fill="#ffffff"/>
|
|
4
|
+
</g></g> </svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 65 65" style="enable-background:new 0 0 65 65;" xml:space="preserve">
|
|
4
|
+
<g>
|
|
5
|
+
<path d="M32.5,65C50.42,65,65,50.421,65,32.5S50.42,0,32.5,0S0,14.579,0,32.5S14.58,65,32.5,65z M32.5,4 C48.215,4,61,16.785,61,32.5S48.215,61,32.5,61S4,48.215,4,32.5S16.785,4,32.5,4z" fill="#ff9203"/>
|
|
6
|
+
<circle cx="33.018" cy="43.655" r="3.345" fill="#ff9203"/>
|
|
7
|
+
<path d="M32.332,35.342c1.104,0,2-0.896,2-2v-17c0-1.104-0.896-2-2-2s-2,0.896-2,2v17C30.332,34.446,31.228,35.342,32.332,35.342z " fill="#ff9203"/>
|
|
8
|
+
</g>
|
|
9
|
+
</svg>
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import IconDotted from '../../assets/images/icons/dotted.svg';
|
|
3
|
+
import IconClose from '../../assets/images/icons/close.svg';
|
|
4
|
+
import IconCloseWhite from '../../assets/images/icons/close-white.svg';
|
|
5
|
+
|
|
6
|
+
const IconStyles = css`
|
|
7
|
+
display: inline-block;
|
|
8
|
+
pointer-events: none;
|
|
9
|
+
`
|
|
10
|
+
|
|
11
|
+
const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoading, $activated, $size, disabled, $iconLeft, $shadow }: { $mode?: string, $isIndicatorArrow: boolean, $isShown: boolean, $isLoading: boolean, $activated: boolean, $size?: string, disabled: boolean, $iconLeft?: string, $shadow: boolean }) => {
|
|
12
|
+
let style = ``;
|
|
13
|
+
if (!$isShown) {
|
|
14
|
+
return `display:none;`
|
|
15
|
+
}
|
|
16
|
+
if ($shadow) {
|
|
17
|
+
style += `
|
|
18
|
+
box-shadow: var(--act-shd-bx);
|
|
19
|
+
`
|
|
20
|
+
}
|
|
21
|
+
if ($size) {
|
|
22
|
+
if ($size === 'xsmall') {
|
|
23
|
+
style += `
|
|
24
|
+
font-size: 12px;
|
|
25
|
+
height: 20px;
|
|
26
|
+
padding: 0 8px;
|
|
27
|
+
`
|
|
28
|
+
} else if ($size === 'small') {
|
|
29
|
+
style += `
|
|
30
|
+
font-size: 13px;
|
|
31
|
+
height: 28px;
|
|
32
|
+
min-width: 75px;
|
|
33
|
+
`
|
|
34
|
+
} else if ($size === 'medium') {
|
|
35
|
+
style += `
|
|
36
|
+
height: 32px;
|
|
37
|
+
`
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
if ($mode === 'red') {
|
|
41
|
+
style += `
|
|
42
|
+
color: var(--act-clr);
|
|
43
|
+
background-color: var(--act-clr-bg);
|
|
44
|
+
&:hover {
|
|
45
|
+
background-color: var(--act-clr-bg__hvr);
|
|
46
|
+
}
|
|
47
|
+
& ${IndicatorsArrowIconSvg} {
|
|
48
|
+
fill: #ffffff;
|
|
49
|
+
stroke: #ffffff;
|
|
50
|
+
}
|
|
51
|
+
`
|
|
52
|
+
} else if ($mode === 'white') {
|
|
53
|
+
style += `
|
|
54
|
+
color: var(--mt-clr);
|
|
55
|
+
background-color: var(--cl-clr-bg);
|
|
56
|
+
border: 1px solid var(--sec-clr-ln);
|
|
57
|
+
&:hover {
|
|
58
|
+
background-color: var(--cl-clr-bg__hvr);
|
|
59
|
+
}
|
|
60
|
+
`
|
|
61
|
+
} else if ($mode === 'blue') {
|
|
62
|
+
style += `
|
|
63
|
+
&, &:hover {
|
|
64
|
+
background-color: var(--ck-clr-bg__act);
|
|
65
|
+
color: var(--act-clr);
|
|
66
|
+
}
|
|
67
|
+
& ${IndicatorsArrowIconSvg} {
|
|
68
|
+
fill: #ffffff;
|
|
69
|
+
stroke: #ffffff;
|
|
70
|
+
}
|
|
71
|
+
`
|
|
72
|
+
} else if ($mode === 'nude') {
|
|
73
|
+
style += `
|
|
74
|
+
&, &:hover {
|
|
75
|
+
background-color: var(--ter-clr-bg);
|
|
76
|
+
}
|
|
77
|
+
`
|
|
78
|
+
} else if ($mode === 'clearL') {
|
|
79
|
+
style +=`
|
|
80
|
+
width: auto;
|
|
81
|
+
height: auto;
|
|
82
|
+
color: var(--pri-clr-lnk__hvr);
|
|
83
|
+
text-decoration: none;
|
|
84
|
+
padding: 0;
|
|
85
|
+
margin: 0;
|
|
86
|
+
&, &:hover {
|
|
87
|
+
background-color: transparent;
|
|
88
|
+
}
|
|
89
|
+
&:hover {
|
|
90
|
+
opacity: .9;
|
|
91
|
+
}
|
|
92
|
+
`
|
|
93
|
+
} else if ($mode === 'clearB') {
|
|
94
|
+
style += `
|
|
95
|
+
background-color: var(--cl-clr-bg);
|
|
96
|
+
color: var(--pri-clr-lnk__hvr);
|
|
97
|
+
svg {
|
|
98
|
+
fill: var(--pri-clr-lnk__hvr);
|
|
99
|
+
stroke: var(--pri-clr-lnk__hvr);
|
|
100
|
+
}
|
|
101
|
+
& ${IndicatorsArrowIconSvg} {
|
|
102
|
+
width: 14px;
|
|
103
|
+
height: 14px;
|
|
104
|
+
margin-top: -7px;
|
|
105
|
+
}
|
|
106
|
+
&:disabled {
|
|
107
|
+
span {color: var(--mt-clr);}
|
|
108
|
+
}
|
|
109
|
+
`
|
|
110
|
+
} else if ($mode === 'clear') {
|
|
111
|
+
style +=`
|
|
112
|
+
box-shadow: none !important;
|
|
113
|
+
&, &:hover {
|
|
114
|
+
background-color: transparent;
|
|
115
|
+
}
|
|
116
|
+
`
|
|
117
|
+
if ($activated) {
|
|
118
|
+
style += `
|
|
119
|
+
color: var(--pri-clr) !important;
|
|
120
|
+
font-weight: 600;
|
|
121
|
+
`
|
|
122
|
+
}
|
|
123
|
+
} else if ($mode === 'more') {
|
|
124
|
+
style += `
|
|
125
|
+
padding: 8px;
|
|
126
|
+
background-color: var(--mt-clr-bg__fc);
|
|
127
|
+
&:before {
|
|
128
|
+
content: url(${IconDotted});
|
|
129
|
+
height: 14px;
|
|
130
|
+
width: 14px;
|
|
131
|
+
${IconStyles}
|
|
132
|
+
}
|
|
133
|
+
`
|
|
134
|
+
} else if ($mode === 'round-close') {
|
|
135
|
+
style += `
|
|
136
|
+
background-color: transparent;
|
|
137
|
+
&:before {
|
|
138
|
+
content: url(${IconClose});
|
|
139
|
+
width: 12px;
|
|
140
|
+
${IconStyles}
|
|
141
|
+
}
|
|
142
|
+
`
|
|
143
|
+
} else if ($mode === 'small-white-round-close') {
|
|
144
|
+
style += `
|
|
145
|
+
background-color: transparent;
|
|
146
|
+
&:before {
|
|
147
|
+
content: url(${IconCloseWhite});
|
|
148
|
+
width: 8px;
|
|
149
|
+
${IconStyles}
|
|
150
|
+
}
|
|
151
|
+
`
|
|
152
|
+
} else if ($mode === 'page-option') {
|
|
153
|
+
style += `
|
|
154
|
+
border: 1px solid var(--ck-clr-ln);
|
|
155
|
+
background-color: transparent;
|
|
156
|
+
font-weight: 600;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
border-radius: var(--ter-rd);
|
|
159
|
+
padding: 6px 12px;
|
|
160
|
+
height: 28px;
|
|
161
|
+
& ${IndicatorsArrowIconSvg} {
|
|
162
|
+
width: 14px;
|
|
163
|
+
height: 14px;
|
|
164
|
+
margin-top: -7px;
|
|
165
|
+
}
|
|
166
|
+
`
|
|
167
|
+
}
|
|
168
|
+
if (disabled) {
|
|
169
|
+
style += `
|
|
170
|
+
&, &:hover {
|
|
171
|
+
background-color: var(--mt-clr-bg__fc) !important;
|
|
172
|
+
cursor: default;
|
|
173
|
+
color: var(--mt-clr);
|
|
174
|
+
}
|
|
175
|
+
`
|
|
176
|
+
}
|
|
177
|
+
if ($iconLeft) {
|
|
178
|
+
style += ` padding-left: 35px; `
|
|
179
|
+
}
|
|
180
|
+
if ($isIndicatorArrow) {
|
|
181
|
+
style += `
|
|
182
|
+
padding-right: 25px;
|
|
183
|
+
`
|
|
184
|
+
}
|
|
185
|
+
if ($isLoading) {
|
|
186
|
+
style += `
|
|
187
|
+
padding-right: 30px !important;
|
|
188
|
+
`
|
|
189
|
+
}
|
|
190
|
+
return style;
|
|
191
|
+
}
|
|
192
|
+
const getIndicatorsArrowIconSvgModifiedStyled = ({ color }:{ color?: string }) => {
|
|
193
|
+
let style = ``;
|
|
194
|
+
if (color && color !== 'initial') {
|
|
195
|
+
style += `
|
|
196
|
+
fill: ${color};
|
|
197
|
+
stroke: ${color};
|
|
198
|
+
`
|
|
199
|
+
}
|
|
200
|
+
return style;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export const ButtonContainer = styled.button<{ $mode?: string, $isIndicatorArrow: boolean, $isShown: boolean, $isLoading: boolean, $activated: boolean, $size?: string, disabled: boolean, $iconLeft?: string, $shadow: boolean }>`
|
|
204
|
+
> span {
|
|
205
|
+
white-space: nowrap;
|
|
206
|
+
overflow: hidden;
|
|
207
|
+
text-overflow: ellipsis;
|
|
208
|
+
}
|
|
209
|
+
._refLoading {
|
|
210
|
+
position: absolute;
|
|
211
|
+
right: 10px;
|
|
212
|
+
top: 50%;
|
|
213
|
+
margin-top: -8px;
|
|
214
|
+
}
|
|
215
|
+
&._refButtonLoading._refHidden {
|
|
216
|
+
padding-right: 16px !important;
|
|
217
|
+
}
|
|
218
|
+
&._refButtonLoading {
|
|
219
|
+
padding-right: 30px !important;
|
|
220
|
+
|
|
221
|
+
}
|
|
222
|
+
${getButtonModifiedStyled}
|
|
223
|
+
|
|
224
|
+
`
|
|
225
|
+
export const IndicatorsArrowIconSvg = styled.svg`
|
|
226
|
+
display: inline-block;
|
|
227
|
+
fill: currentColor;
|
|
228
|
+
stroke: currentColor;
|
|
229
|
+
stroke-width: 0;
|
|
230
|
+
position: absolute;
|
|
231
|
+
right: 8px;
|
|
232
|
+
top: 50%;
|
|
233
|
+
margin-top: -10px;
|
|
234
|
+
width: 14px;
|
|
235
|
+
height: 14px;
|
|
236
|
+
margin-top: -7px;
|
|
237
|
+
${getIndicatorsArrowIconSvgModifiedStyled}
|
|
238
|
+
`
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode, RefObject } from 'react' ;
|
|
2
|
+
import { ButtonContainer, IndicatorsArrowIconSvg } from './button.styles';
|
|
3
|
+
|
|
4
|
+
type TButton = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
5
|
+
children?: ReactNode
|
|
6
|
+
$mode?: string
|
|
7
|
+
$isIndicatorArrow?: boolean
|
|
8
|
+
isIndicatorArrowColor?: string
|
|
9
|
+
$isShown?: boolean
|
|
10
|
+
$isLoading?: boolean
|
|
11
|
+
refContainer?: RefObject<HTMLButtonElement>
|
|
12
|
+
$activated?: boolean
|
|
13
|
+
$size?: string
|
|
14
|
+
$iconLeft?: string
|
|
15
|
+
$shadow?: boolean
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const ButtonComponent = ({ children, $mode, $isIndicatorArrow=false, isIndicatorArrowColor='initial', $isShown=true, $shadow=false, $isLoading=false, refContainer, $activated=false, $size, $iconLeft, ...props }: TButton) => {
|
|
19
|
+
const { disabled } = props;
|
|
20
|
+
const IndicatorArrowIconEl = $isIndicatorArrow ? (
|
|
21
|
+
<IndicatorsArrowIconSvg color={isIndicatorArrowColor} height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false'>
|
|
22
|
+
<path d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'></path>
|
|
23
|
+
</IndicatorsArrowIconSvg>
|
|
24
|
+
) : null;
|
|
25
|
+
return (
|
|
26
|
+
<ButtonContainer
|
|
27
|
+
$mode={$mode}
|
|
28
|
+
$isIndicatorArrow={$isIndicatorArrow ? true : false}
|
|
29
|
+
$isShown={$isShown ? true : false}
|
|
30
|
+
$shadow={$shadow ? true : false}
|
|
31
|
+
disabled={disabled || $isLoading || false}
|
|
32
|
+
$isLoading={ $isLoading ? true : false}
|
|
33
|
+
ref={refContainer}
|
|
34
|
+
$activated={$activated ? true : false}
|
|
35
|
+
$size={$size}
|
|
36
|
+
$iconLeft={$iconLeft}
|
|
37
|
+
{...props}>
|
|
38
|
+
{children}
|
|
39
|
+
{IndicatorArrowIconEl}
|
|
40
|
+
</ButtonContainer>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export default ButtonComponent;
|
package/src/components/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as TextComponent } from './text/text';
|
|
2
2
|
export { default as LinkComponent } from './link/link';
|
|
3
3
|
export { default as InputComponent } from './input/input';
|
|
4
|
-
export { default as CheckboxComponent } from './checkbox/checkbox';
|
|
4
|
+
export { default as CheckboxComponent } from './checkbox/checkbox';
|
|
5
|
+
export { default as ButtonComponent } from './button/button';
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
declare module '*.avif' {
|
|
2
|
+
const src: string;
|
|
3
|
+
export default src;
|
|
4
|
+
}
|
|
5
|
+
declare module '*.bmp' {
|
|
6
|
+
const src: string;
|
|
7
|
+
export default src;
|
|
8
|
+
}
|
|
9
|
+
declare module '*.gif' {
|
|
10
|
+
const src: string;
|
|
11
|
+
export default src;
|
|
12
|
+
}
|
|
13
|
+
declare module '*.jpg' {
|
|
14
|
+
const src: string;
|
|
15
|
+
export default src;
|
|
16
|
+
}
|
|
17
|
+
declare module '*.jpeg' {
|
|
18
|
+
const src: string;
|
|
19
|
+
export default src;
|
|
20
|
+
}
|
|
21
|
+
declare module '*.png' {
|
|
22
|
+
const src: string;
|
|
23
|
+
export default src;
|
|
24
|
+
}
|
|
25
|
+
declare module '*.webp' {
|
|
26
|
+
const src: string;
|
|
27
|
+
export default src;
|
|
28
|
+
}
|
|
29
|
+
declare module '*.svg' {
|
|
30
|
+
import type { FunctionComponent, SVGProps } from 'react'
|
|
31
|
+
export const ReactComponent: FunctionComponent & SVGProps<{ title?: string }>;
|
|
32
|
+
const src: string;
|
|
33
|
+
export default src;
|
|
34
|
+
}
|
|
35
|
+
declare module '*.mp3' {
|
|
36
|
+
const src: string;
|
|
37
|
+
export default src;
|
|
38
|
+
}
|
|
39
|
+
declare module '*.wav' {
|
|
40
|
+
const src: string;
|
|
41
|
+
export default src;
|
|
42
|
+
}
|
|
43
|
+
declare module '*.module.css' {
|
|
44
|
+
const classes: { readonly [key: string]: string };
|
|
45
|
+
export default classes;
|
|
46
|
+
}
|
|
47
|
+
declare module '*.module.scss' {
|
|
48
|
+
const classes: { readonly [key: string]: string };
|
|
49
|
+
export default classes;
|
|
50
|
+
}
|
|
51
|
+
declare module '*.module.sass' {
|
|
52
|
+
const classes: { readonly [key: string]: string };
|
|
53
|
+
export default classes;
|
|
54
|
+
}
|