@justfixnyc/component-library 0.32.1 → 0.32.2
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/src/assets/index.css +34 -38
- package/dist/src/assets/index.es.css +34 -38
- package/dist/src/index.es.js +55 -27
- package/dist/src/index.js +55 -26
- package/dist/typings/icons/Facebook.d.ts +3 -0
- package/dist/typings/icons/Icons.d.ts +2 -1
- package/package.json +1 -1
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
font-weight: 500;
|
|
37
37
|
font-size: 1.13rem;
|
|
38
38
|
line-height: 120%;
|
|
39
|
-
text-align: center;
|
|
40
39
|
letter-spacing: 0.54px;
|
|
41
40
|
cursor: pointer;
|
|
42
41
|
user-select: none;
|
|
@@ -61,20 +60,10 @@
|
|
|
61
60
|
outline-width: 2px;
|
|
62
61
|
outline-color: #5188ff;
|
|
63
62
|
}
|
|
64
|
-
.jfcl-button:disabled {
|
|
65
|
-
cursor: inherit;
|
|
66
|
-
}
|
|
67
|
-
.jfcl-button:disabled.is-primary {
|
|
68
|
-
background-color: GREY_400;
|
|
69
|
-
color: #242323;
|
|
70
|
-
}
|
|
71
|
-
.jfcl-button:disabled.is-secondary {
|
|
72
|
-
background-color: #f2f2f2;
|
|
73
|
-
}
|
|
74
|
-
.jfcl-button:hover {
|
|
63
|
+
.jfcl-button:hover:not(:disabled) {
|
|
75
64
|
box-shadow: 4px 5px 0px 0px #c5ccd1;
|
|
76
65
|
}
|
|
77
|
-
.jfcl-button:active {
|
|
66
|
+
.jfcl-button:active:not(:disabled) {
|
|
78
67
|
box-shadow: 0px -4px 0px 0px #c5ccd1;
|
|
79
68
|
}
|
|
80
69
|
.jfcl-button .jfcl-button__label {
|
|
@@ -111,6 +100,7 @@
|
|
|
111
100
|
border-color: transparent;
|
|
112
101
|
}
|
|
113
102
|
.jfcl-button.jfcl-variant-primary:disabled {
|
|
103
|
+
cursor: inherit;
|
|
114
104
|
color: #242323;
|
|
115
105
|
background-color: #9a9898;
|
|
116
106
|
}
|
|
@@ -132,7 +122,8 @@
|
|
|
132
122
|
border-color: #242323;
|
|
133
123
|
}
|
|
134
124
|
.jfcl-button.jfcl-variant-secondary:disabled {
|
|
135
|
-
|
|
125
|
+
cursor: inherit;
|
|
126
|
+
background-color: #9a9898;
|
|
136
127
|
}
|
|
137
128
|
.jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
|
|
138
129
|
display: block;
|
|
@@ -156,7 +147,7 @@
|
|
|
156
147
|
.jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
|
|
157
148
|
border-bottom: none;
|
|
158
149
|
}
|
|
159
|
-
.jfcl-button.jfcl-variant-text:hover {
|
|
150
|
+
.jfcl-button.jfcl-variant-text:hover:not(:disabled) {
|
|
160
151
|
background-color: #efe9dc;
|
|
161
152
|
}
|
|
162
153
|
.jfcl-button.jfcl-variant-text.jfcl-is-loading {
|
|
@@ -171,7 +162,7 @@
|
|
|
171
162
|
border-right-color: transparent;
|
|
172
163
|
border-top-color: transparent;
|
|
173
164
|
}
|
|
174
|
-
.jfcl-button.jfcl-variant-text:active {
|
|
165
|
+
.jfcl-button.jfcl-variant-text:active(:disabled) {
|
|
175
166
|
background-color: rgba(239, 233, 220, 0.8);
|
|
176
167
|
}
|
|
177
168
|
@keyframes spin {
|
|
@@ -182,9 +173,10 @@
|
|
|
182
173
|
transform: rotate(360deg);
|
|
183
174
|
}
|
|
184
175
|
}
|
|
185
|
-
.
|
|
176
|
+
.jfcl-alert {
|
|
186
177
|
display: flex;
|
|
187
178
|
align-items: center;
|
|
179
|
+
justify-content: space-between;
|
|
188
180
|
padding: 0.75rem;
|
|
189
181
|
padding-left: calc(12px + 0.75rem);
|
|
190
182
|
position: relative;
|
|
@@ -197,19 +189,18 @@
|
|
|
197
189
|
font-weight: 500;
|
|
198
190
|
font-size: 1.13rem;
|
|
199
191
|
line-height: 120%;
|
|
200
|
-
text-align: center;
|
|
201
192
|
letter-spacing: 0.54px;
|
|
202
193
|
}
|
|
203
|
-
.
|
|
194
|
+
.jfcl-alert .jfcl-alert__content {
|
|
204
195
|
display: flex;
|
|
205
196
|
align-items: center;
|
|
206
197
|
}
|
|
207
|
-
.
|
|
198
|
+
.jfcl-alert .jfcl-alert__content .jfcl-alert__icon {
|
|
208
199
|
margin-right: 8px;
|
|
209
|
-
width:
|
|
210
|
-
height:
|
|
200
|
+
width: 1.25rem;
|
|
201
|
+
height: 1.25rem;
|
|
211
202
|
}
|
|
212
|
-
.
|
|
203
|
+
.jfcl-alert::before {
|
|
213
204
|
content: "";
|
|
214
205
|
width: 12px;
|
|
215
206
|
position: absolute;
|
|
@@ -217,39 +208,46 @@
|
|
|
217
208
|
left: 0;
|
|
218
209
|
bottom: 0;
|
|
219
210
|
}
|
|
220
|
-
.
|
|
211
|
+
.jfcl-alert .jfcl-alert__btn {
|
|
221
212
|
display: flex;
|
|
222
213
|
background: transparent;
|
|
223
214
|
padding: 0;
|
|
224
215
|
border: none;
|
|
225
|
-
margin-left:
|
|
216
|
+
margin-left: 0.5rem;
|
|
226
217
|
cursor: pointer;
|
|
218
|
+
font-size: 1em;
|
|
227
219
|
}
|
|
228
|
-
.
|
|
220
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text {
|
|
229
221
|
border-bottom: 1px solid;
|
|
230
222
|
}
|
|
231
|
-
.
|
|
223
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
224
|
+
color: #676565;
|
|
225
|
+
}
|
|
226
|
+
.jfcl-alert.jfcl-type-info::before {
|
|
232
227
|
background-color: #5188ff;
|
|
233
228
|
}
|
|
234
|
-
.
|
|
229
|
+
.jfcl-alert.jfcl-type-error::before {
|
|
235
230
|
background-color: #ff813a;
|
|
236
231
|
}
|
|
237
|
-
.
|
|
232
|
+
.jfcl-alert.jfcl-type-success::before {
|
|
238
233
|
background-color: #1aa551;
|
|
239
234
|
}
|
|
240
|
-
.
|
|
235
|
+
.jfcl-alert.jfcl-variant-primary {
|
|
241
236
|
background-color: #242323;
|
|
242
237
|
color: #faf8f4;
|
|
243
238
|
}
|
|
244
|
-
.
|
|
239
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn {
|
|
245
240
|
color: #faf8f4;
|
|
246
241
|
}
|
|
247
|
-
.
|
|
242
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
243
|
+
color: #9a9898;
|
|
244
|
+
}
|
|
245
|
+
.jfcl-alert.jfcl-variant-secondary {
|
|
248
246
|
background-color: #faf8f4;
|
|
249
247
|
border: 1px solid #676565;
|
|
250
248
|
color: #242323;
|
|
251
249
|
}
|
|
252
|
-
.
|
|
250
|
+
.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn {
|
|
253
251
|
color: #242323;
|
|
254
252
|
border-color: #242323;
|
|
255
253
|
}
|
|
@@ -267,18 +265,16 @@
|
|
|
267
265
|
font-weight: 500;
|
|
268
266
|
font-size: 1.13rem;
|
|
269
267
|
line-height: 120%;
|
|
270
|
-
text-align: center;
|
|
271
268
|
letter-spacing: 0.54px;
|
|
272
269
|
color: #242323;
|
|
273
270
|
text-underline-position: from-font;
|
|
274
|
-
display: inline-flex;
|
|
275
|
-
align-items: center;
|
|
276
271
|
}
|
|
277
272
|
.jfcl-link:hover {
|
|
278
273
|
color: #676565;
|
|
279
274
|
}
|
|
280
275
|
.jfcl-link .jfcl-link__icon {
|
|
276
|
+
display: inline;
|
|
281
277
|
margin-left: 10px;
|
|
282
|
-
width:
|
|
283
|
-
height:
|
|
278
|
+
width: 1rem;
|
|
279
|
+
height: 1rem;
|
|
284
280
|
}
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
font-weight: 500;
|
|
37
37
|
font-size: 1.13rem;
|
|
38
38
|
line-height: 120%;
|
|
39
|
-
text-align: center;
|
|
40
39
|
letter-spacing: 0.54px;
|
|
41
40
|
cursor: pointer;
|
|
42
41
|
user-select: none;
|
|
@@ -61,20 +60,10 @@
|
|
|
61
60
|
outline-width: 2px;
|
|
62
61
|
outline-color: #5188ff;
|
|
63
62
|
}
|
|
64
|
-
.jfcl-button:disabled {
|
|
65
|
-
cursor: inherit;
|
|
66
|
-
}
|
|
67
|
-
.jfcl-button:disabled.is-primary {
|
|
68
|
-
background-color: GREY_400;
|
|
69
|
-
color: #242323;
|
|
70
|
-
}
|
|
71
|
-
.jfcl-button:disabled.is-secondary {
|
|
72
|
-
background-color: #f2f2f2;
|
|
73
|
-
}
|
|
74
|
-
.jfcl-button:hover {
|
|
63
|
+
.jfcl-button:hover:not(:disabled) {
|
|
75
64
|
box-shadow: 4px 5px 0px 0px #c5ccd1;
|
|
76
65
|
}
|
|
77
|
-
.jfcl-button:active {
|
|
66
|
+
.jfcl-button:active:not(:disabled) {
|
|
78
67
|
box-shadow: 0px -4px 0px 0px #c5ccd1;
|
|
79
68
|
}
|
|
80
69
|
.jfcl-button .jfcl-button__label {
|
|
@@ -111,6 +100,7 @@
|
|
|
111
100
|
border-color: transparent;
|
|
112
101
|
}
|
|
113
102
|
.jfcl-button.jfcl-variant-primary:disabled {
|
|
103
|
+
cursor: inherit;
|
|
114
104
|
color: #242323;
|
|
115
105
|
background-color: #9a9898;
|
|
116
106
|
}
|
|
@@ -132,7 +122,8 @@
|
|
|
132
122
|
border-color: #242323;
|
|
133
123
|
}
|
|
134
124
|
.jfcl-button.jfcl-variant-secondary:disabled {
|
|
135
|
-
|
|
125
|
+
cursor: inherit;
|
|
126
|
+
background-color: #9a9898;
|
|
136
127
|
}
|
|
137
128
|
.jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
|
|
138
129
|
display: block;
|
|
@@ -156,7 +147,7 @@
|
|
|
156
147
|
.jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
|
|
157
148
|
border-bottom: none;
|
|
158
149
|
}
|
|
159
|
-
.jfcl-button.jfcl-variant-text:hover {
|
|
150
|
+
.jfcl-button.jfcl-variant-text:hover:not(:disabled) {
|
|
160
151
|
background-color: #efe9dc;
|
|
161
152
|
}
|
|
162
153
|
.jfcl-button.jfcl-variant-text.jfcl-is-loading {
|
|
@@ -171,7 +162,7 @@
|
|
|
171
162
|
border-right-color: transparent;
|
|
172
163
|
border-top-color: transparent;
|
|
173
164
|
}
|
|
174
|
-
.jfcl-button.jfcl-variant-text:active {
|
|
165
|
+
.jfcl-button.jfcl-variant-text:active(:disabled) {
|
|
175
166
|
background-color: rgba(239, 233, 220, 0.8);
|
|
176
167
|
}
|
|
177
168
|
@keyframes spin {
|
|
@@ -182,9 +173,10 @@
|
|
|
182
173
|
transform: rotate(360deg);
|
|
183
174
|
}
|
|
184
175
|
}
|
|
185
|
-
.
|
|
176
|
+
.jfcl-alert {
|
|
186
177
|
display: flex;
|
|
187
178
|
align-items: center;
|
|
179
|
+
justify-content: space-between;
|
|
188
180
|
padding: 0.75rem;
|
|
189
181
|
padding-left: calc(12px + 0.75rem);
|
|
190
182
|
position: relative;
|
|
@@ -197,19 +189,18 @@
|
|
|
197
189
|
font-weight: 500;
|
|
198
190
|
font-size: 1.13rem;
|
|
199
191
|
line-height: 120%;
|
|
200
|
-
text-align: center;
|
|
201
192
|
letter-spacing: 0.54px;
|
|
202
193
|
}
|
|
203
|
-
.
|
|
194
|
+
.jfcl-alert .jfcl-alert__content {
|
|
204
195
|
display: flex;
|
|
205
196
|
align-items: center;
|
|
206
197
|
}
|
|
207
|
-
.
|
|
198
|
+
.jfcl-alert .jfcl-alert__content .jfcl-alert__icon {
|
|
208
199
|
margin-right: 8px;
|
|
209
|
-
width:
|
|
210
|
-
height:
|
|
200
|
+
width: 1.25rem;
|
|
201
|
+
height: 1.25rem;
|
|
211
202
|
}
|
|
212
|
-
.
|
|
203
|
+
.jfcl-alert::before {
|
|
213
204
|
content: "";
|
|
214
205
|
width: 12px;
|
|
215
206
|
position: absolute;
|
|
@@ -217,39 +208,46 @@
|
|
|
217
208
|
left: 0;
|
|
218
209
|
bottom: 0;
|
|
219
210
|
}
|
|
220
|
-
.
|
|
211
|
+
.jfcl-alert .jfcl-alert__btn {
|
|
221
212
|
display: flex;
|
|
222
213
|
background: transparent;
|
|
223
214
|
padding: 0;
|
|
224
215
|
border: none;
|
|
225
|
-
margin-left:
|
|
216
|
+
margin-left: 0.5rem;
|
|
226
217
|
cursor: pointer;
|
|
218
|
+
font-size: 1em;
|
|
227
219
|
}
|
|
228
|
-
.
|
|
220
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text {
|
|
229
221
|
border-bottom: 1px solid;
|
|
230
222
|
}
|
|
231
|
-
.
|
|
223
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
224
|
+
color: #676565;
|
|
225
|
+
}
|
|
226
|
+
.jfcl-alert.jfcl-type-info::before {
|
|
232
227
|
background-color: #5188ff;
|
|
233
228
|
}
|
|
234
|
-
.
|
|
229
|
+
.jfcl-alert.jfcl-type-error::before {
|
|
235
230
|
background-color: #ff813a;
|
|
236
231
|
}
|
|
237
|
-
.
|
|
232
|
+
.jfcl-alert.jfcl-type-success::before {
|
|
238
233
|
background-color: #1aa551;
|
|
239
234
|
}
|
|
240
|
-
.
|
|
235
|
+
.jfcl-alert.jfcl-variant-primary {
|
|
241
236
|
background-color: #242323;
|
|
242
237
|
color: #faf8f4;
|
|
243
238
|
}
|
|
244
|
-
.
|
|
239
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn {
|
|
245
240
|
color: #faf8f4;
|
|
246
241
|
}
|
|
247
|
-
.
|
|
242
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
243
|
+
color: #9a9898;
|
|
244
|
+
}
|
|
245
|
+
.jfcl-alert.jfcl-variant-secondary {
|
|
248
246
|
background-color: #faf8f4;
|
|
249
247
|
border: 1px solid #676565;
|
|
250
248
|
color: #242323;
|
|
251
249
|
}
|
|
252
|
-
.
|
|
250
|
+
.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn {
|
|
253
251
|
color: #242323;
|
|
254
252
|
border-color: #242323;
|
|
255
253
|
}
|
|
@@ -267,18 +265,16 @@
|
|
|
267
265
|
font-weight: 500;
|
|
268
266
|
font-size: 1.13rem;
|
|
269
267
|
line-height: 120%;
|
|
270
|
-
text-align: center;
|
|
271
268
|
letter-spacing: 0.54px;
|
|
272
269
|
color: #242323;
|
|
273
270
|
text-underline-position: from-font;
|
|
274
|
-
display: inline-flex;
|
|
275
|
-
align-items: center;
|
|
276
271
|
}
|
|
277
272
|
.jfcl-link:hover {
|
|
278
273
|
color: #676565;
|
|
279
274
|
}
|
|
280
275
|
.jfcl-link .jfcl-link__icon {
|
|
276
|
+
display: inline;
|
|
281
277
|
margin-left: 10px;
|
|
282
|
-
width:
|
|
283
|
-
height:
|
|
278
|
+
width: 1rem;
|
|
279
|
+
height: 1rem;
|
|
284
280
|
}
|
package/dist/src/index.es.js
CHANGED
|
@@ -62,35 +62,48 @@ var IconLoading$1 = IconLoading;
|
|
|
62
62
|
const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
63
63
|
ref: ref
|
|
64
64
|
}, props, {
|
|
65
|
-
width: "
|
|
65
|
+
width: "17",
|
|
66
66
|
height: "16",
|
|
67
|
-
viewBox: "0 0
|
|
67
|
+
viewBox: "0 0 17 16",
|
|
68
68
|
fill: "none",
|
|
69
69
|
xmlns: "http://www.w3.org/2000/svg"
|
|
70
|
-
}), /*#__PURE__*/React.createElement("
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
71
|
+
clipPath: "url(#clip0_1296_533)"
|
|
72
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
73
|
+
d: "M13.3105 0.993011C14.4136 0.993011 15.3105 1.88989 15.3105 2.99301V12.993C15.3105 14.0961 14.4136 14.993 13.3105 14.993H3.31046C2.20733 14.993 1.31046 14.0961 1.31046 12.993V2.99301C1.31046 1.88989 2.20733 0.993011 3.31046 0.993011H13.3105ZM6.31046 4.49301C5.89483 4.49301 5.56046 4.82739 5.56046 5.24301C5.56046 5.65864 5.89483 5.99301 6.31046 5.99301H9.25108L5.02921 10.2118C4.73546 10.5055 4.73546 10.9805 5.02921 11.2711C5.32296 11.5618 5.79796 11.5649 6.08858 11.2711L10.3073 7.05239V10.243C10.3073 10.6586 10.6417 10.993 11.0573 10.993C11.473 10.993 11.8073 10.6586 11.8073 10.243V5.24301C11.8073 4.82739 11.473 4.49301 11.0573 4.49301H6.31046Z",
|
|
74
|
+
fill: "#242323"
|
|
75
|
+
})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
76
|
+
id: "clip0_1296_533"
|
|
77
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
78
|
+
width: "14",
|
|
79
|
+
height: "16",
|
|
80
|
+
fill: "white",
|
|
81
|
+
transform: "translate(1.31046 -0.00698853)"
|
|
82
|
+
})))));
|
|
74
83
|
IconHamburger$2.displayName = 'IconHamburger';
|
|
75
84
|
var IconLinkExternal = IconHamburger$2;
|
|
76
85
|
|
|
77
86
|
const IconLinkInternal = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
78
87
|
ref: ref
|
|
79
88
|
}, props, {
|
|
80
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
81
89
|
width: "17",
|
|
82
90
|
height: "17",
|
|
83
91
|
viewBox: "0 0 17 17",
|
|
84
|
-
fill: "none"
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
92
|
+
fill: "none",
|
|
93
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
94
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
95
|
+
clipPath: "url(#clip0_2628_44)"
|
|
96
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
97
|
+
d: "M14.9253 9.17158C15.3159 8.78095 15.3159 8.14658 14.9253 7.75595L9.92527 2.75595C9.53465 2.36533 8.90027 2.36533 8.50965 2.75595C8.11902 3.14658 8.11902 3.78095 8.50965 4.17158L11.8065 7.46533H2.21902C1.6659 7.46533 1.21902 7.9122 1.21902 8.46533C1.21902 9.01845 1.6659 9.46533 2.21902 9.46533H11.8034L8.51277 12.7591C8.12215 13.1497 8.12215 13.7841 8.51277 14.1747C8.9034 14.5653 9.53778 14.5653 9.9284 14.1747L14.9284 9.1747L14.9253 9.17158Z",
|
|
98
|
+
fill: "#242323"
|
|
99
|
+
})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
100
|
+
id: "clip0_2628_44"
|
|
101
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
102
|
+
width: "14",
|
|
103
|
+
height: "16",
|
|
104
|
+
fill: "white",
|
|
105
|
+
transform: "translate(1.21902 0.465332)"
|
|
106
|
+
})))));
|
|
94
107
|
IconLinkInternal.displayName = 'IconLinkInternal';
|
|
95
108
|
var IconLinkInternal$1 = IconLinkInternal;
|
|
96
109
|
|
|
@@ -273,6 +286,21 @@ const IconMail = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.crea
|
|
|
273
286
|
IconMail.displayName = 'IconMail';
|
|
274
287
|
var IconMail$1 = IconMail;
|
|
275
288
|
|
|
289
|
+
const IconFacebook = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
290
|
+
ref: ref
|
|
291
|
+
}, props, {
|
|
292
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
293
|
+
width: "21",
|
|
294
|
+
height: "20",
|
|
295
|
+
viewBox: "0 0 21 20",
|
|
296
|
+
fill: "none"
|
|
297
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
298
|
+
d: "M14.5765 7.66901H11.8795V5.90018C11.8795 5.2359 12.3198 5.08103 12.6299 5.08103C12.9393 5.08103 14.5331 5.08103 14.5331 5.08103V2.16074L11.912 2.15051C9.00226 2.15051 8.3401 4.32856 8.3401 5.72238V7.66901H6.65735V10.6782H8.3401C8.3401 14.54 8.3401 19.1932 8.3401 19.1932H11.8795C11.8795 19.1932 11.8795 14.4942 11.8795 10.6782H14.2678L14.5765 7.66901Z",
|
|
299
|
+
fill: "currentColor"
|
|
300
|
+
})));
|
|
301
|
+
IconFacebook.displayName = 'IconFacebook';
|
|
302
|
+
var IconFacebook$1 = IconFacebook;
|
|
303
|
+
|
|
276
304
|
const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
277
305
|
let {
|
|
278
306
|
type = 'info',
|
|
@@ -283,22 +311,22 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
283
311
|
className,
|
|
284
312
|
...props
|
|
285
313
|
} = _ref;
|
|
286
|
-
const alertClassNames = classNames('
|
|
314
|
+
const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
287
315
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
288
316
|
ref: ref,
|
|
289
|
-
"data-testid": "
|
|
317
|
+
"data-testid": "jfcl-alert",
|
|
290
318
|
className: alertClassNames
|
|
291
319
|
}, props), /*#__PURE__*/React.createElement("div", {
|
|
292
|
-
className: "
|
|
320
|
+
className: "jfcl-alert__content"
|
|
293
321
|
}, type === 'error' && /*#__PURE__*/React.createElement("div", {
|
|
294
|
-
className: "
|
|
295
|
-
"data-testid": "
|
|
322
|
+
className: "jfcl-alert__icon",
|
|
323
|
+
"data-testid": "jfcl-alert__icon"
|
|
296
324
|
}, /*#__PURE__*/React.createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React.createElement("div", {
|
|
297
|
-
className: "
|
|
298
|
-
"data-testid": "
|
|
325
|
+
className: "jfcl-alert__icon",
|
|
326
|
+
"data-testid": "jfcl-alert__icon"
|
|
299
327
|
}, /*#__PURE__*/React.createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React.createElement("button", {
|
|
300
|
-
className: actionLabel ? '
|
|
301
|
-
"data-testid": "
|
|
328
|
+
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
329
|
+
"data-testid": "jfcl-alert__btn",
|
|
302
330
|
onClick: action
|
|
303
331
|
}, actionLabel ? actionLabel : /*#__PURE__*/React.createElement(IconClose$1, {
|
|
304
332
|
"aria-label": "Dismiss"
|
|
@@ -334,4 +362,4 @@ const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
334
362
|
});
|
|
335
363
|
Link.displayName = 'Link';
|
|
336
364
|
|
|
337
|
-
export { Alert, Button, IconCheck$1 as IconCheck, IconChevron$1 as IconChevron, IconClose$1 as IconClose, IconError$1 as IconError, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconLinkExternal, IconLinkInternal$1 as IconLinkInternal, IconLoading$1 as IconLoading, IconMail$1 as IconMail, IconPerson$1 as IconPerson, IconTwitter$1 as IconTwitter, Link };
|
|
365
|
+
export { Alert, Button, IconCheck$1 as IconCheck, IconChevron$1 as IconChevron, IconClose$1 as IconClose, IconError$1 as IconError, IconFacebook$1 as IconFacebook, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconLinkExternal, IconLinkInternal$1 as IconLinkInternal, IconLoading$1 as IconLoading, IconMail$1 as IconMail, IconPerson$1 as IconPerson, IconTwitter$1 as IconTwitter, Link };
|
package/dist/src/index.js
CHANGED
|
@@ -72,35 +72,48 @@ var IconLoading$1 = IconLoading;
|
|
|
72
72
|
const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
73
73
|
ref: ref
|
|
74
74
|
}, props, {
|
|
75
|
-
width: "
|
|
75
|
+
width: "17",
|
|
76
76
|
height: "16",
|
|
77
|
-
viewBox: "0 0
|
|
77
|
+
viewBox: "0 0 17 16",
|
|
78
78
|
fill: "none",
|
|
79
79
|
xmlns: "http://www.w3.org/2000/svg"
|
|
80
|
-
}), /*#__PURE__*/React__default["default"].createElement("
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
81
|
+
clipPath: "url(#clip0_1296_533)"
|
|
82
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
83
|
+
d: "M13.3105 0.993011C14.4136 0.993011 15.3105 1.88989 15.3105 2.99301V12.993C15.3105 14.0961 14.4136 14.993 13.3105 14.993H3.31046C2.20733 14.993 1.31046 14.0961 1.31046 12.993V2.99301C1.31046 1.88989 2.20733 0.993011 3.31046 0.993011H13.3105ZM6.31046 4.49301C5.89483 4.49301 5.56046 4.82739 5.56046 5.24301C5.56046 5.65864 5.89483 5.99301 6.31046 5.99301H9.25108L5.02921 10.2118C4.73546 10.5055 4.73546 10.9805 5.02921 11.2711C5.32296 11.5618 5.79796 11.5649 6.08858 11.2711L10.3073 7.05239V10.243C10.3073 10.6586 10.6417 10.993 11.0573 10.993C11.473 10.993 11.8073 10.6586 11.8073 10.243V5.24301C11.8073 4.82739 11.473 4.49301 11.0573 4.49301H6.31046Z",
|
|
84
|
+
fill: "#242323"
|
|
85
|
+
})), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
|
|
86
|
+
id: "clip0_1296_533"
|
|
87
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
88
|
+
width: "14",
|
|
89
|
+
height: "16",
|
|
90
|
+
fill: "white",
|
|
91
|
+
transform: "translate(1.31046 -0.00698853)"
|
|
92
|
+
})))));
|
|
84
93
|
IconHamburger$2.displayName = 'IconHamburger';
|
|
85
94
|
var IconLinkExternal = IconHamburger$2;
|
|
86
95
|
|
|
87
96
|
const IconLinkInternal = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
88
97
|
ref: ref
|
|
89
98
|
}, props, {
|
|
90
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
91
99
|
width: "17",
|
|
92
100
|
height: "17",
|
|
93
101
|
viewBox: "0 0 17 17",
|
|
94
|
-
fill: "none"
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
102
|
+
fill: "none",
|
|
103
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
104
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
105
|
+
clipPath: "url(#clip0_2628_44)"
|
|
106
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
107
|
+
d: "M14.9253 9.17158C15.3159 8.78095 15.3159 8.14658 14.9253 7.75595L9.92527 2.75595C9.53465 2.36533 8.90027 2.36533 8.50965 2.75595C8.11902 3.14658 8.11902 3.78095 8.50965 4.17158L11.8065 7.46533H2.21902C1.6659 7.46533 1.21902 7.9122 1.21902 8.46533C1.21902 9.01845 1.6659 9.46533 2.21902 9.46533H11.8034L8.51277 12.7591C8.12215 13.1497 8.12215 13.7841 8.51277 14.1747C8.9034 14.5653 9.53778 14.5653 9.9284 14.1747L14.9284 9.1747L14.9253 9.17158Z",
|
|
108
|
+
fill: "#242323"
|
|
109
|
+
})), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
|
|
110
|
+
id: "clip0_2628_44"
|
|
111
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
112
|
+
width: "14",
|
|
113
|
+
height: "16",
|
|
114
|
+
fill: "white",
|
|
115
|
+
transform: "translate(1.21902 0.465332)"
|
|
116
|
+
})))));
|
|
104
117
|
IconLinkInternal.displayName = 'IconLinkInternal';
|
|
105
118
|
var IconLinkInternal$1 = IconLinkInternal;
|
|
106
119
|
|
|
@@ -283,6 +296,21 @@ const IconMail = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Reac
|
|
|
283
296
|
IconMail.displayName = 'IconMail';
|
|
284
297
|
var IconMail$1 = IconMail;
|
|
285
298
|
|
|
299
|
+
const IconFacebook = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
300
|
+
ref: ref
|
|
301
|
+
}, props, {
|
|
302
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
303
|
+
width: "21",
|
|
304
|
+
height: "20",
|
|
305
|
+
viewBox: "0 0 21 20",
|
|
306
|
+
fill: "none"
|
|
307
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
308
|
+
d: "M14.5765 7.66901H11.8795V5.90018C11.8795 5.2359 12.3198 5.08103 12.6299 5.08103C12.9393 5.08103 14.5331 5.08103 14.5331 5.08103V2.16074L11.912 2.15051C9.00226 2.15051 8.3401 4.32856 8.3401 5.72238V7.66901H6.65735V10.6782H8.3401C8.3401 14.54 8.3401 19.1932 8.3401 19.1932H11.8795C11.8795 19.1932 11.8795 14.4942 11.8795 10.6782H14.2678L14.5765 7.66901Z",
|
|
309
|
+
fill: "currentColor"
|
|
310
|
+
})));
|
|
311
|
+
IconFacebook.displayName = 'IconFacebook';
|
|
312
|
+
var IconFacebook$1 = IconFacebook;
|
|
313
|
+
|
|
286
314
|
const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
287
315
|
let {
|
|
288
316
|
type = 'info',
|
|
@@ -293,22 +321,22 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
293
321
|
className,
|
|
294
322
|
...props
|
|
295
323
|
} = _ref;
|
|
296
|
-
const alertClassNames = classNames__default["default"]('
|
|
324
|
+
const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
297
325
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
|
|
298
326
|
ref: ref,
|
|
299
|
-
"data-testid": "
|
|
327
|
+
"data-testid": "jfcl-alert",
|
|
300
328
|
className: alertClassNames
|
|
301
329
|
}, props), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
302
|
-
className: "
|
|
330
|
+
className: "jfcl-alert__content"
|
|
303
331
|
}, type === 'error' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
304
|
-
className: "
|
|
305
|
-
"data-testid": "
|
|
332
|
+
className: "jfcl-alert__icon",
|
|
333
|
+
"data-testid": "jfcl-alert__icon"
|
|
306
334
|
}, /*#__PURE__*/React__default["default"].createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
307
|
-
className: "
|
|
308
|
-
"data-testid": "
|
|
335
|
+
className: "jfcl-alert__icon",
|
|
336
|
+
"data-testid": "jfcl-alert__icon"
|
|
309
337
|
}, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React__default["default"].createElement("button", {
|
|
310
|
-
className: actionLabel ? '
|
|
311
|
-
"data-testid": "
|
|
338
|
+
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
339
|
+
"data-testid": "jfcl-alert__btn",
|
|
312
340
|
onClick: action
|
|
313
341
|
}, actionLabel ? actionLabel : /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
|
|
314
342
|
"aria-label": "Dismiss"
|
|
@@ -350,6 +378,7 @@ exports.IconCheck = IconCheck$1;
|
|
|
350
378
|
exports.IconChevron = IconChevron$1;
|
|
351
379
|
exports.IconClose = IconClose$1;
|
|
352
380
|
exports.IconError = IconError$1;
|
|
381
|
+
exports.IconFacebook = IconFacebook$1;
|
|
353
382
|
exports.IconGlobe = IconGlobe$1;
|
|
354
383
|
exports.IconHamburger = IconHamburger$1;
|
|
355
384
|
exports.IconInternet = IconInternet$1;
|
|
@@ -11,4 +11,5 @@ import IconInternet from './Internet';
|
|
|
11
11
|
import IconPerson from './Person';
|
|
12
12
|
import IconTwitter from './Twitter';
|
|
13
13
|
import IconMail from './Mail';
|
|
14
|
-
|
|
14
|
+
import IconFacebook from './Facebook';
|
|
15
|
+
export { IconLoading, IconLinkExternal, IconLinkInternal, IconCheck, IconError, IconTwitter, IconChevron, IconClose, IconGlobe, IconHamburger, IconInternet, IconPerson, IconMail, IconFacebook, };
|