oddsgate-ds 1.0.136 → 1.0.138
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/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.component.tsx +6 -8
- package/src/components/atoms/FormField/FormField.stories.tsx +5 -5
- package/src/components/atoms/FormField/FormField.theme.tsx +93 -89
package/package.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
|
|
3
|
-
import { Field } from 'formik'
|
|
4
3
|
import { ICheckRadioField } from './CheckRadioField.interface'
|
|
5
4
|
import { StyledCheckRadioField } from './CheckRadioField.theme'
|
|
6
|
-
import RichText from '../../RichText'
|
|
5
|
+
import RichText from '../../RichText/RichText.component'
|
|
7
6
|
|
|
8
7
|
const CheckRadioField = ({
|
|
9
8
|
id,
|
|
@@ -14,11 +13,10 @@ const CheckRadioField = ({
|
|
|
14
13
|
}: ICheckRadioField) => {
|
|
15
14
|
return (
|
|
16
15
|
<StyledCheckRadioField>
|
|
17
|
-
|
|
18
|
-
<label
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
></label>
|
|
16
|
+
{children}
|
|
17
|
+
<label htmlFor={id}>
|
|
18
|
+
<RichText tag="p">{label}</RichText>
|
|
19
|
+
</label>
|
|
22
20
|
</StyledCheckRadioField>
|
|
23
21
|
)
|
|
24
22
|
}
|
|
@@ -142,7 +142,7 @@ export const FilterWithInputs: StoryObj<IFormField> = {
|
|
|
142
142
|
<FormField
|
|
143
143
|
id={'input-1'}
|
|
144
144
|
label={'My custom input'}
|
|
145
|
-
|
|
145
|
+
rightIcon={<Icon icon={'icon-search'} />}
|
|
146
146
|
>
|
|
147
147
|
<Field
|
|
148
148
|
label={'My custom input'}
|
|
@@ -157,7 +157,7 @@ export const FilterWithInputs: StoryObj<IFormField> = {
|
|
|
157
157
|
<FormField
|
|
158
158
|
id={'event_type'}
|
|
159
159
|
label={'My custom input'}
|
|
160
|
-
|
|
160
|
+
rightIcon={<Icon icon={'icon-search'} />}
|
|
161
161
|
>
|
|
162
162
|
<Field
|
|
163
163
|
as="select"
|
|
@@ -213,7 +213,7 @@ export const DarkStyle: StoryObj<IFormField> = {
|
|
|
213
213
|
<FormField
|
|
214
214
|
id={'input-1'}
|
|
215
215
|
label={'My custom input'}
|
|
216
|
-
|
|
216
|
+
rightIcon={<Icon icon={'icon-search'} />}
|
|
217
217
|
>
|
|
218
218
|
<Field
|
|
219
219
|
label={'My custom input'}
|
|
@@ -228,7 +228,7 @@ export const DarkStyle: StoryObj<IFormField> = {
|
|
|
228
228
|
<FormField
|
|
229
229
|
id={'event_type'}
|
|
230
230
|
label={'My custom input'}
|
|
231
|
-
|
|
231
|
+
rightIcon={<Icon icon={'icon-search'} />}
|
|
232
232
|
>
|
|
233
233
|
<Field
|
|
234
234
|
as="select"
|
|
@@ -366,7 +366,7 @@ export const All: StoryObj<IFormField> = {
|
|
|
366
366
|
<FormField
|
|
367
367
|
id={'input-1'}
|
|
368
368
|
label={'My custom input'}
|
|
369
|
-
|
|
369
|
+
rightIcon={<Icon icon={'icon-search'} />}
|
|
370
370
|
>
|
|
371
371
|
<Field
|
|
372
372
|
label={'My custom input'}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IFormField } from './FormField.interface'
|
|
2
2
|
import { colors } from '@/styles/variables'
|
|
3
3
|
import { fontSize } from '@/styles/utilities'
|
|
4
|
-
import styled from 'styled-components'
|
|
4
|
+
import styled, { css } from 'styled-components'
|
|
5
5
|
|
|
6
6
|
export const StyledField = styled.input``
|
|
7
7
|
|
|
@@ -12,105 +12,109 @@ export const StyledFieldContainer = styled.div<IFormField>`
|
|
|
12
12
|
|
|
13
13
|
${({ $isCheckRadio }) =>
|
|
14
14
|
!$isCheckRadio
|
|
15
|
-
? `
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
i {
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: 50%;
|
|
23
|
-
left: 12px;
|
|
24
|
-
margin-top: -10px;
|
|
15
|
+
? css`
|
|
16
|
+
& > div {
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
25
19
|
|
|
26
|
-
|
|
20
|
+
i {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 50%;
|
|
23
|
+
left: 12px;
|
|
24
|
+
margin-top: -10px;
|
|
27
25
|
|
|
28
|
-
|
|
29
|
-
& + select {
|
|
30
|
-
padding-left: 2.6rem;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
26
|
+
color: currentColor;
|
|
33
27
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
& + input,
|
|
29
|
+
& + select {
|
|
30
|
+
padding-left: 2.6rem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
37
33
|
|
|
38
|
-
|
|
39
|
-
& > div {
|
|
40
|
-
&::after {
|
|
41
|
-
content: '';
|
|
34
|
+
label {
|
|
42
35
|
display: block;
|
|
43
|
-
position: absolute;
|
|
44
|
-
top: 50%;
|
|
45
|
-
right: 12px;
|
|
46
|
-
width: 16px;
|
|
47
|
-
height: 16px;
|
|
48
|
-
margin: 0 4px;
|
|
49
|
-
margin-top: -8px;
|
|
50
|
-
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%233C3B39'/%3E%3C/svg%3E%0A");
|
|
51
36
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
37
|
+
|
|
38
|
+
&:has(select) {
|
|
39
|
+
& > div {
|
|
40
|
+
&::after {
|
|
41
|
+
content: '';
|
|
42
|
+
display: block;
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 50%;
|
|
45
|
+
right: 12px;
|
|
46
|
+
width: 16px;
|
|
47
|
+
height: 16px;
|
|
48
|
+
margin: 0 4px;
|
|
49
|
+
margin-top: -8px;
|
|
50
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%233C3B39'/%3E%3C/svg%3E%0A");
|
|
51
|
+
}
|
|
52
|
+
& input,
|
|
53
|
+
& select {
|
|
54
|
+
padding-right: 2.6rem;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
55
57
|
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
${fontSize('h5')};
|
|
59
|
+
input {
|
|
60
|
+
padding-right: 4rem;
|
|
61
|
+
}
|
|
63
62
|
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
input,
|
|
64
|
+
textarea,
|
|
65
|
+
select {
|
|
66
|
+
${fontSize('h5')};
|
|
66
67
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
background: ${colors.secondary50};
|
|
70
|
-
outline: none;
|
|
71
|
-
width: 100%;
|
|
68
|
+
border-radius: 50px;
|
|
69
|
+
border: 0;
|
|
72
70
|
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
padding: 1rem 2rem;
|
|
72
|
+
color: ${colors.third10};
|
|
73
|
+
background: ${colors.secondary50};
|
|
74
|
+
outline: none;
|
|
75
|
+
width: 100%;
|
|
75
76
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
color: ${colors.secondary50};
|
|
79
|
-
background-color: ${colors.primary50};
|
|
80
|
-
${fontSize('h5')};
|
|
81
|
-
padding: 0.8rem 1.6rem;
|
|
82
|
-
border-radius: 50px;
|
|
83
|
-
text-transform: uppercase;
|
|
84
|
-
|
|
85
|
-
border: 0;
|
|
86
|
-
outline: 0;
|
|
87
|
-
cursor:pointer;
|
|
88
|
-
transition: all 0.3s ease;
|
|
89
|
-
|
|
90
|
-
&:hover{
|
|
91
|
-
opacity: 0.6;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
77
|
+
border: 0;
|
|
78
|
+
}
|
|
94
79
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
80
|
+
input::file-selector-button {
|
|
81
|
+
font-family: inherit;
|
|
82
|
+
color: ${colors.secondary50};
|
|
83
|
+
background-color: ${colors.primary50};
|
|
84
|
+
${fontSize('h5')};
|
|
85
|
+
padding: 0.8rem 1.6rem;
|
|
86
|
+
border-radius: 50px;
|
|
87
|
+
text-transform: uppercase;
|
|
88
|
+
|
|
89
|
+
border: 0;
|
|
90
|
+
outline: 0;
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
transition: all 0.3s ease;
|
|
93
|
+
|
|
94
|
+
&:hover {
|
|
95
|
+
opacity: 0.6;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
99
98
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
99
|
+
textarea {
|
|
100
|
+
border-radius: 32px;
|
|
101
|
+
height: 11.5rem;
|
|
102
|
+
}
|
|
105
103
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
104
|
+
select {
|
|
105
|
+
option {
|
|
106
|
+
color: ${colors.primary50};
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
//Clear search X
|
|
111
|
+
input[type='search']::-webkit-search-decoration,
|
|
112
|
+
input[type='search']::-webkit-search-cancel-button,
|
|
113
|
+
input[type='search']::-webkit-search-results-button,
|
|
114
|
+
input[type='search']::-webkit-search-results-decoration {
|
|
115
|
+
-webkit-appearance: none;
|
|
116
|
+
}
|
|
117
|
+
`
|
|
114
118
|
: `
|
|
115
119
|
& > div{
|
|
116
120
|
display: flex;
|
|
@@ -119,14 +123,14 @@ export const StyledFieldContainer = styled.div<IFormField>`
|
|
|
119
123
|
}
|
|
120
124
|
`}
|
|
121
125
|
|
|
122
|
-
|
|
123
126
|
::placeholder {
|
|
124
127
|
color: rbga(${colors.third10}, 0.2);
|
|
125
|
-
font-weight:700;
|
|
128
|
+
font-weight: 700;
|
|
126
129
|
}
|
|
127
130
|
|
|
128
|
-
::-ms-input-placeholder {
|
|
131
|
+
::-ms-input-placeholder {
|
|
132
|
+
/* Edge 12 -18 */
|
|
129
133
|
color: rbga(${colors.third10}, 0.2);
|
|
130
|
-
font-weight:700;
|
|
134
|
+
font-weight: 700;
|
|
131
135
|
}
|
|
132
136
|
`
|