@justfixnyc/component-library 0.32.1 → 0.33.0
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 +40 -43
- package/dist/src/assets/index.es.css +40 -43
- package/dist/src/index.es.js +62 -30
- package/dist/src/index.js +63 -30
- package/dist/typings/buttons/Button.d.ts +1 -1
- package/dist/typings/icons/Facebook.d.ts +3 -0
- package/dist/typings/icons/Icons.d.ts +2 -1
- package/package.json +5 -2
|
@@ -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;
|
|
@@ -143,26 +134,30 @@
|
|
|
143
134
|
border-right-color: transparent;
|
|
144
135
|
border-top-color: transparent;
|
|
145
136
|
}
|
|
146
|
-
.jfcl-button.jfcl-variant-
|
|
137
|
+
.jfcl-button.jfcl-variant-tertiary {
|
|
147
138
|
color: #242323;
|
|
148
139
|
background: none;
|
|
149
140
|
border: none;
|
|
150
141
|
box-shadow: none;
|
|
151
142
|
}
|
|
152
|
-
.jfcl-button.jfcl-variant-
|
|
143
|
+
.jfcl-button.jfcl-variant-tertiary:disabled {
|
|
153
144
|
cursor: inherit;
|
|
154
145
|
color: #676565;
|
|
155
146
|
}
|
|
156
|
-
.jfcl-button.jfcl-variant-
|
|
147
|
+
.jfcl-button.jfcl-variant-tertiary:disabled .jfcl-button__text {
|
|
157
148
|
border-bottom: none;
|
|
158
149
|
}
|
|
159
|
-
.jfcl-button.jfcl-variant-
|
|
150
|
+
.jfcl-button.jfcl-variant-tertiary:hover:not(:disabled) {
|
|
160
151
|
background-color: #efe9dc;
|
|
152
|
+
box-shadow: none;
|
|
153
|
+
}
|
|
154
|
+
.jfcl-button.jfcl-variant-tertiary:active:not(:disabled) {
|
|
155
|
+
box-shadow: none;
|
|
161
156
|
}
|
|
162
|
-
.jfcl-button.jfcl-variant-
|
|
157
|
+
.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading {
|
|
163
158
|
background-color: #efe9dc;
|
|
164
159
|
}
|
|
165
|
-
.jfcl-button.jfcl-variant-
|
|
160
|
+
.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading .jfcl-button__icon {
|
|
166
161
|
display: block;
|
|
167
162
|
animation: spin 500ms infinite linear;
|
|
168
163
|
position: relative;
|
|
@@ -171,7 +166,7 @@
|
|
|
171
166
|
border-right-color: transparent;
|
|
172
167
|
border-top-color: transparent;
|
|
173
168
|
}
|
|
174
|
-
.jfcl-button.jfcl-variant-
|
|
169
|
+
.jfcl-button.jfcl-variant-tertiary:active(:disabled) {
|
|
175
170
|
background-color: rgba(239, 233, 220, 0.8);
|
|
176
171
|
}
|
|
177
172
|
@keyframes spin {
|
|
@@ -182,9 +177,10 @@
|
|
|
182
177
|
transform: rotate(360deg);
|
|
183
178
|
}
|
|
184
179
|
}
|
|
185
|
-
.
|
|
180
|
+
.jfcl-alert {
|
|
186
181
|
display: flex;
|
|
187
182
|
align-items: center;
|
|
183
|
+
justify-content: space-between;
|
|
188
184
|
padding: 0.75rem;
|
|
189
185
|
padding-left: calc(12px + 0.75rem);
|
|
190
186
|
position: relative;
|
|
@@ -197,19 +193,18 @@
|
|
|
197
193
|
font-weight: 500;
|
|
198
194
|
font-size: 1.13rem;
|
|
199
195
|
line-height: 120%;
|
|
200
|
-
text-align: center;
|
|
201
196
|
letter-spacing: 0.54px;
|
|
202
197
|
}
|
|
203
|
-
.
|
|
198
|
+
.jfcl-alert .jfcl-alert__content {
|
|
204
199
|
display: flex;
|
|
205
200
|
align-items: center;
|
|
206
201
|
}
|
|
207
|
-
.
|
|
202
|
+
.jfcl-alert .jfcl-alert__content .jfcl-alert__icon {
|
|
208
203
|
margin-right: 8px;
|
|
209
|
-
width:
|
|
210
|
-
height:
|
|
204
|
+
width: 1.25rem;
|
|
205
|
+
height: 1.25rem;
|
|
211
206
|
}
|
|
212
|
-
.
|
|
207
|
+
.jfcl-alert::before {
|
|
213
208
|
content: "";
|
|
214
209
|
width: 12px;
|
|
215
210
|
position: absolute;
|
|
@@ -217,39 +212,46 @@
|
|
|
217
212
|
left: 0;
|
|
218
213
|
bottom: 0;
|
|
219
214
|
}
|
|
220
|
-
.
|
|
215
|
+
.jfcl-alert .jfcl-alert__btn {
|
|
221
216
|
display: flex;
|
|
222
217
|
background: transparent;
|
|
223
218
|
padding: 0;
|
|
224
219
|
border: none;
|
|
225
|
-
margin-left:
|
|
220
|
+
margin-left: 0.5rem;
|
|
226
221
|
cursor: pointer;
|
|
222
|
+
font-size: 1em;
|
|
227
223
|
}
|
|
228
|
-
.
|
|
224
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text {
|
|
229
225
|
border-bottom: 1px solid;
|
|
230
226
|
}
|
|
231
|
-
.
|
|
227
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
228
|
+
color: #676565;
|
|
229
|
+
}
|
|
230
|
+
.jfcl-alert.jfcl-type-info::before {
|
|
232
231
|
background-color: #5188ff;
|
|
233
232
|
}
|
|
234
|
-
.
|
|
233
|
+
.jfcl-alert.jfcl-type-error::before {
|
|
235
234
|
background-color: #ff813a;
|
|
236
235
|
}
|
|
237
|
-
.
|
|
236
|
+
.jfcl-alert.jfcl-type-success::before {
|
|
238
237
|
background-color: #1aa551;
|
|
239
238
|
}
|
|
240
|
-
.
|
|
239
|
+
.jfcl-alert.jfcl-variant-primary {
|
|
241
240
|
background-color: #242323;
|
|
242
241
|
color: #faf8f4;
|
|
243
242
|
}
|
|
244
|
-
.
|
|
243
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn {
|
|
245
244
|
color: #faf8f4;
|
|
246
245
|
}
|
|
247
|
-
.
|
|
246
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
247
|
+
color: #9a9898;
|
|
248
|
+
}
|
|
249
|
+
.jfcl-alert.jfcl-variant-secondary {
|
|
248
250
|
background-color: #faf8f4;
|
|
249
251
|
border: 1px solid #676565;
|
|
250
252
|
color: #242323;
|
|
251
253
|
}
|
|
252
|
-
.
|
|
254
|
+
.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn {
|
|
253
255
|
color: #242323;
|
|
254
256
|
border-color: #242323;
|
|
255
257
|
}
|
|
@@ -267,18 +269,13 @@
|
|
|
267
269
|
font-weight: 500;
|
|
268
270
|
font-size: 1.13rem;
|
|
269
271
|
line-height: 120%;
|
|
270
|
-
text-align: center;
|
|
271
272
|
letter-spacing: 0.54px;
|
|
272
273
|
color: #242323;
|
|
273
274
|
text-underline-position: from-font;
|
|
274
|
-
display: inline-flex;
|
|
275
|
-
align-items: center;
|
|
276
275
|
}
|
|
277
276
|
.jfcl-link:hover {
|
|
278
277
|
color: #676565;
|
|
279
278
|
}
|
|
280
279
|
.jfcl-link .jfcl-link__icon {
|
|
281
280
|
margin-left: 10px;
|
|
282
|
-
width: 16px;
|
|
283
|
-
height: 16px;
|
|
284
281
|
}
|
|
@@ -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;
|
|
@@ -143,26 +134,30 @@
|
|
|
143
134
|
border-right-color: transparent;
|
|
144
135
|
border-top-color: transparent;
|
|
145
136
|
}
|
|
146
|
-
.jfcl-button.jfcl-variant-
|
|
137
|
+
.jfcl-button.jfcl-variant-tertiary {
|
|
147
138
|
color: #242323;
|
|
148
139
|
background: none;
|
|
149
140
|
border: none;
|
|
150
141
|
box-shadow: none;
|
|
151
142
|
}
|
|
152
|
-
.jfcl-button.jfcl-variant-
|
|
143
|
+
.jfcl-button.jfcl-variant-tertiary:disabled {
|
|
153
144
|
cursor: inherit;
|
|
154
145
|
color: #676565;
|
|
155
146
|
}
|
|
156
|
-
.jfcl-button.jfcl-variant-
|
|
147
|
+
.jfcl-button.jfcl-variant-tertiary:disabled .jfcl-button__text {
|
|
157
148
|
border-bottom: none;
|
|
158
149
|
}
|
|
159
|
-
.jfcl-button.jfcl-variant-
|
|
150
|
+
.jfcl-button.jfcl-variant-tertiary:hover:not(:disabled) {
|
|
160
151
|
background-color: #efe9dc;
|
|
152
|
+
box-shadow: none;
|
|
153
|
+
}
|
|
154
|
+
.jfcl-button.jfcl-variant-tertiary:active:not(:disabled) {
|
|
155
|
+
box-shadow: none;
|
|
161
156
|
}
|
|
162
|
-
.jfcl-button.jfcl-variant-
|
|
157
|
+
.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading {
|
|
163
158
|
background-color: #efe9dc;
|
|
164
159
|
}
|
|
165
|
-
.jfcl-button.jfcl-variant-
|
|
160
|
+
.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading .jfcl-button__icon {
|
|
166
161
|
display: block;
|
|
167
162
|
animation: spin 500ms infinite linear;
|
|
168
163
|
position: relative;
|
|
@@ -171,7 +166,7 @@
|
|
|
171
166
|
border-right-color: transparent;
|
|
172
167
|
border-top-color: transparent;
|
|
173
168
|
}
|
|
174
|
-
.jfcl-button.jfcl-variant-
|
|
169
|
+
.jfcl-button.jfcl-variant-tertiary:active(:disabled) {
|
|
175
170
|
background-color: rgba(239, 233, 220, 0.8);
|
|
176
171
|
}
|
|
177
172
|
@keyframes spin {
|
|
@@ -182,9 +177,10 @@
|
|
|
182
177
|
transform: rotate(360deg);
|
|
183
178
|
}
|
|
184
179
|
}
|
|
185
|
-
.
|
|
180
|
+
.jfcl-alert {
|
|
186
181
|
display: flex;
|
|
187
182
|
align-items: center;
|
|
183
|
+
justify-content: space-between;
|
|
188
184
|
padding: 0.75rem;
|
|
189
185
|
padding-left: calc(12px + 0.75rem);
|
|
190
186
|
position: relative;
|
|
@@ -197,19 +193,18 @@
|
|
|
197
193
|
font-weight: 500;
|
|
198
194
|
font-size: 1.13rem;
|
|
199
195
|
line-height: 120%;
|
|
200
|
-
text-align: center;
|
|
201
196
|
letter-spacing: 0.54px;
|
|
202
197
|
}
|
|
203
|
-
.
|
|
198
|
+
.jfcl-alert .jfcl-alert__content {
|
|
204
199
|
display: flex;
|
|
205
200
|
align-items: center;
|
|
206
201
|
}
|
|
207
|
-
.
|
|
202
|
+
.jfcl-alert .jfcl-alert__content .jfcl-alert__icon {
|
|
208
203
|
margin-right: 8px;
|
|
209
|
-
width:
|
|
210
|
-
height:
|
|
204
|
+
width: 1.25rem;
|
|
205
|
+
height: 1.25rem;
|
|
211
206
|
}
|
|
212
|
-
.
|
|
207
|
+
.jfcl-alert::before {
|
|
213
208
|
content: "";
|
|
214
209
|
width: 12px;
|
|
215
210
|
position: absolute;
|
|
@@ -217,39 +212,46 @@
|
|
|
217
212
|
left: 0;
|
|
218
213
|
bottom: 0;
|
|
219
214
|
}
|
|
220
|
-
.
|
|
215
|
+
.jfcl-alert .jfcl-alert__btn {
|
|
221
216
|
display: flex;
|
|
222
217
|
background: transparent;
|
|
223
218
|
padding: 0;
|
|
224
219
|
border: none;
|
|
225
|
-
margin-left:
|
|
220
|
+
margin-left: 0.5rem;
|
|
226
221
|
cursor: pointer;
|
|
222
|
+
font-size: 1em;
|
|
227
223
|
}
|
|
228
|
-
.
|
|
224
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text {
|
|
229
225
|
border-bottom: 1px solid;
|
|
230
226
|
}
|
|
231
|
-
.
|
|
227
|
+
.jfcl-alert .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
228
|
+
color: #676565;
|
|
229
|
+
}
|
|
230
|
+
.jfcl-alert.jfcl-type-info::before {
|
|
232
231
|
background-color: #5188ff;
|
|
233
232
|
}
|
|
234
|
-
.
|
|
233
|
+
.jfcl-alert.jfcl-type-error::before {
|
|
235
234
|
background-color: #ff813a;
|
|
236
235
|
}
|
|
237
|
-
.
|
|
236
|
+
.jfcl-alert.jfcl-type-success::before {
|
|
238
237
|
background-color: #1aa551;
|
|
239
238
|
}
|
|
240
|
-
.
|
|
239
|
+
.jfcl-alert.jfcl-variant-primary {
|
|
241
240
|
background-color: #242323;
|
|
242
241
|
color: #faf8f4;
|
|
243
242
|
}
|
|
244
|
-
.
|
|
243
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn {
|
|
245
244
|
color: #faf8f4;
|
|
246
245
|
}
|
|
247
|
-
.
|
|
246
|
+
.jfcl-alert.jfcl-variant-primary .jfcl-alert__btn.jfcl-alert__btn_text:hover {
|
|
247
|
+
color: #9a9898;
|
|
248
|
+
}
|
|
249
|
+
.jfcl-alert.jfcl-variant-secondary {
|
|
248
250
|
background-color: #faf8f4;
|
|
249
251
|
border: 1px solid #676565;
|
|
250
252
|
color: #242323;
|
|
251
253
|
}
|
|
252
|
-
.
|
|
254
|
+
.jfcl-alert.jfcl-variant-secondary .jfcl-alert__btn {
|
|
253
255
|
color: #242323;
|
|
254
256
|
border-color: #242323;
|
|
255
257
|
}
|
|
@@ -267,18 +269,13 @@
|
|
|
267
269
|
font-weight: 500;
|
|
268
270
|
font-size: 1.13rem;
|
|
269
271
|
line-height: 120%;
|
|
270
|
-
text-align: center;
|
|
271
272
|
letter-spacing: 0.54px;
|
|
272
273
|
color: #242323;
|
|
273
274
|
text-underline-position: from-font;
|
|
274
|
-
display: inline-flex;
|
|
275
|
-
align-items: center;
|
|
276
275
|
}
|
|
277
276
|
.jfcl-link:hover {
|
|
278
277
|
color: #676565;
|
|
279
278
|
}
|
|
280
279
|
.jfcl-link .jfcl-link__icon {
|
|
281
280
|
margin-left: 10px;
|
|
282
|
-
width: 16px;
|
|
283
|
-
height: 16px;
|
|
284
281
|
}
|
package/dist/src/index.es.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/extends';
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
+
import { faArrowRight, faSquareArrowUpRight } from '@fortawesome/free-solid-svg-icons';
|
|
5
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
6
|
|
|
5
7
|
/**
|
|
6
8
|
* Accepts all `ButtonHTMLAttributes`
|
|
@@ -62,35 +64,48 @@ var IconLoading$1 = IconLoading;
|
|
|
62
64
|
const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
63
65
|
ref: ref
|
|
64
66
|
}, props, {
|
|
65
|
-
width: "
|
|
67
|
+
width: "17",
|
|
66
68
|
height: "16",
|
|
67
|
-
viewBox: "0 0
|
|
69
|
+
viewBox: "0 0 17 16",
|
|
68
70
|
fill: "none",
|
|
69
71
|
xmlns: "http://www.w3.org/2000/svg"
|
|
70
|
-
}), /*#__PURE__*/React.createElement("
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
73
|
+
clipPath: "url(#clip0_1296_533)"
|
|
74
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
75
|
+
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",
|
|
76
|
+
fill: "#242323"
|
|
77
|
+
})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
78
|
+
id: "clip0_1296_533"
|
|
79
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
80
|
+
width: "14",
|
|
81
|
+
height: "16",
|
|
82
|
+
fill: "white",
|
|
83
|
+
transform: "translate(1.31046 -0.00698853)"
|
|
84
|
+
})))));
|
|
74
85
|
IconHamburger$2.displayName = 'IconHamburger';
|
|
75
|
-
var
|
|
86
|
+
var IconHamburger$3 = IconHamburger$2;
|
|
76
87
|
|
|
77
88
|
const IconLinkInternal = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
78
89
|
ref: ref
|
|
79
90
|
}, props, {
|
|
80
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
81
91
|
width: "17",
|
|
82
92
|
height: "17",
|
|
83
93
|
viewBox: "0 0 17 17",
|
|
84
|
-
fill: "none"
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
+
fill: "none",
|
|
95
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
96
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
97
|
+
clipPath: "url(#clip0_2628_44)"
|
|
98
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
99
|
+
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",
|
|
100
|
+
fill: "#242323"
|
|
101
|
+
})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
102
|
+
id: "clip0_2628_44"
|
|
103
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
104
|
+
width: "14",
|
|
105
|
+
height: "16",
|
|
106
|
+
fill: "white",
|
|
107
|
+
transform: "translate(1.21902 0.465332)"
|
|
108
|
+
})))));
|
|
94
109
|
IconLinkInternal.displayName = 'IconLinkInternal';
|
|
95
110
|
var IconLinkInternal$1 = IconLinkInternal;
|
|
96
111
|
|
|
@@ -273,6 +288,21 @@ const IconMail = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.crea
|
|
|
273
288
|
IconMail.displayName = 'IconMail';
|
|
274
289
|
var IconMail$1 = IconMail;
|
|
275
290
|
|
|
291
|
+
const IconFacebook = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
292
|
+
ref: ref
|
|
293
|
+
}, props, {
|
|
294
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
295
|
+
width: "21",
|
|
296
|
+
height: "20",
|
|
297
|
+
viewBox: "0 0 21 20",
|
|
298
|
+
fill: "none"
|
|
299
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
300
|
+
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",
|
|
301
|
+
fill: "currentColor"
|
|
302
|
+
})));
|
|
303
|
+
IconFacebook.displayName = 'IconFacebook';
|
|
304
|
+
var IconFacebook$1 = IconFacebook;
|
|
305
|
+
|
|
276
306
|
const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
277
307
|
let {
|
|
278
308
|
type = 'info',
|
|
@@ -283,22 +313,22 @@ const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
283
313
|
className,
|
|
284
314
|
...props
|
|
285
315
|
} = _ref;
|
|
286
|
-
const alertClassNames = classNames('
|
|
316
|
+
const alertClassNames = classNames('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
287
317
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
288
318
|
ref: ref,
|
|
289
|
-
"data-testid": "
|
|
319
|
+
"data-testid": "jfcl-alert",
|
|
290
320
|
className: alertClassNames
|
|
291
321
|
}, props), /*#__PURE__*/React.createElement("div", {
|
|
292
|
-
className: "
|
|
322
|
+
className: "jfcl-alert__content"
|
|
293
323
|
}, type === 'error' && /*#__PURE__*/React.createElement("div", {
|
|
294
|
-
className: "
|
|
295
|
-
"data-testid": "
|
|
324
|
+
className: "jfcl-alert__icon",
|
|
325
|
+
"data-testid": "jfcl-alert__icon"
|
|
296
326
|
}, /*#__PURE__*/React.createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React.createElement("div", {
|
|
297
|
-
className: "
|
|
298
|
-
"data-testid": "
|
|
327
|
+
className: "jfcl-alert__icon",
|
|
328
|
+
"data-testid": "jfcl-alert__icon"
|
|
299
329
|
}, /*#__PURE__*/React.createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React.createElement("button", {
|
|
300
|
-
className: actionLabel ? '
|
|
301
|
-
"data-testid": "
|
|
330
|
+
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
331
|
+
"data-testid": "jfcl-alert__btn",
|
|
302
332
|
onClick: action
|
|
303
333
|
}, actionLabel ? actionLabel : /*#__PURE__*/React.createElement(IconClose$1, {
|
|
304
334
|
"aria-label": "Dismiss"
|
|
@@ -326,12 +356,14 @@ const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
326
356
|
return /*#__PURE__*/React.createElement("a", _extends({}, props, {
|
|
327
357
|
ref: ref,
|
|
328
358
|
className: linkClassNames
|
|
329
|
-
}), children, icon === 'internal' && /*#__PURE__*/React.createElement(
|
|
359
|
+
}), children, icon === 'internal' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
360
|
+
icon: faArrowRight,
|
|
330
361
|
className: "jfcl-link__icon"
|
|
331
|
-
}), icon === 'external' && /*#__PURE__*/React.createElement(
|
|
362
|
+
}), icon === 'external' && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
363
|
+
icon: faSquareArrowUpRight,
|
|
332
364
|
className: "jfcl-link__icon"
|
|
333
365
|
}));
|
|
334
366
|
});
|
|
335
367
|
Link.displayName = 'Link';
|
|
336
368
|
|
|
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 };
|
|
369
|
+
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, IconHamburger$3 as 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
|
@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var classNames = require('classnames');
|
|
8
|
+
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
|
|
9
|
+
var reactFontawesome = require('@fortawesome/react-fontawesome');
|
|
8
10
|
|
|
9
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
12
|
|
|
@@ -72,35 +74,48 @@ var IconLoading$1 = IconLoading;
|
|
|
72
74
|
const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
73
75
|
ref: ref
|
|
74
76
|
}, props, {
|
|
75
|
-
width: "
|
|
77
|
+
width: "17",
|
|
76
78
|
height: "16",
|
|
77
|
-
viewBox: "0 0
|
|
79
|
+
viewBox: "0 0 17 16",
|
|
78
80
|
fill: "none",
|
|
79
81
|
xmlns: "http://www.w3.org/2000/svg"
|
|
80
|
-
}), /*#__PURE__*/React__default["default"].createElement("
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
83
|
+
clipPath: "url(#clip0_1296_533)"
|
|
84
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
85
|
+
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",
|
|
86
|
+
fill: "#242323"
|
|
87
|
+
})), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
|
|
88
|
+
id: "clip0_1296_533"
|
|
89
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
90
|
+
width: "14",
|
|
91
|
+
height: "16",
|
|
92
|
+
fill: "white",
|
|
93
|
+
transform: "translate(1.31046 -0.00698853)"
|
|
94
|
+
})))));
|
|
84
95
|
IconHamburger$2.displayName = 'IconHamburger';
|
|
85
|
-
var
|
|
96
|
+
var IconHamburger$3 = IconHamburger$2;
|
|
86
97
|
|
|
87
98
|
const IconLinkInternal = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
88
99
|
ref: ref
|
|
89
100
|
}, props, {
|
|
90
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
91
101
|
width: "17",
|
|
92
102
|
height: "17",
|
|
93
103
|
viewBox: "0 0 17 17",
|
|
94
|
-
fill: "none"
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
+
fill: "none",
|
|
105
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
106
|
+
}), /*#__PURE__*/React__default["default"].createElement("g", {
|
|
107
|
+
clipPath: "url(#clip0_2628_44)"
|
|
108
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
109
|
+
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",
|
|
110
|
+
fill: "#242323"
|
|
111
|
+
})), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("clipPath", {
|
|
112
|
+
id: "clip0_2628_44"
|
|
113
|
+
}, /*#__PURE__*/React__default["default"].createElement("rect", {
|
|
114
|
+
width: "14",
|
|
115
|
+
height: "16",
|
|
116
|
+
fill: "white",
|
|
117
|
+
transform: "translate(1.21902 0.465332)"
|
|
118
|
+
})))));
|
|
104
119
|
IconLinkInternal.displayName = 'IconLinkInternal';
|
|
105
120
|
var IconLinkInternal$1 = IconLinkInternal;
|
|
106
121
|
|
|
@@ -283,6 +298,21 @@ const IconMail = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Reac
|
|
|
283
298
|
IconMail.displayName = 'IconMail';
|
|
284
299
|
var IconMail$1 = IconMail;
|
|
285
300
|
|
|
301
|
+
const IconFacebook = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
|
|
302
|
+
ref: ref
|
|
303
|
+
}, props, {
|
|
304
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
305
|
+
width: "21",
|
|
306
|
+
height: "20",
|
|
307
|
+
viewBox: "0 0 21 20",
|
|
308
|
+
fill: "none"
|
|
309
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
310
|
+
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",
|
|
311
|
+
fill: "currentColor"
|
|
312
|
+
})));
|
|
313
|
+
IconFacebook.displayName = 'IconFacebook';
|
|
314
|
+
var IconFacebook$1 = IconFacebook;
|
|
315
|
+
|
|
286
316
|
const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
287
317
|
let {
|
|
288
318
|
type = 'info',
|
|
@@ -293,22 +323,22 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
293
323
|
className,
|
|
294
324
|
...props
|
|
295
325
|
} = _ref;
|
|
296
|
-
const alertClassNames = classNames__default["default"]('
|
|
326
|
+
const alertClassNames = classNames__default["default"]('jfcl-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
|
|
297
327
|
return /*#__PURE__*/React__default["default"].createElement("div", _extends__default["default"]({
|
|
298
328
|
ref: ref,
|
|
299
|
-
"data-testid": "
|
|
329
|
+
"data-testid": "jfcl-alert",
|
|
300
330
|
className: alertClassNames
|
|
301
331
|
}, props), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
302
|
-
className: "
|
|
332
|
+
className: "jfcl-alert__content"
|
|
303
333
|
}, type === 'error' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
304
|
-
className: "
|
|
305
|
-
"data-testid": "
|
|
334
|
+
className: "jfcl-alert__icon",
|
|
335
|
+
"data-testid": "jfcl-alert__icon"
|
|
306
336
|
}, /*#__PURE__*/React__default["default"].createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
307
|
-
className: "
|
|
308
|
-
"data-testid": "
|
|
337
|
+
className: "jfcl-alert__icon",
|
|
338
|
+
"data-testid": "jfcl-alert__icon"
|
|
309
339
|
}, /*#__PURE__*/React__default["default"].createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React__default["default"].createElement("button", {
|
|
310
|
-
className: actionLabel ? '
|
|
311
|
-
"data-testid": "
|
|
340
|
+
className: actionLabel ? 'jfcl-alert__btn jfcl-alert__btn_text' : 'jfcl-alert__btn',
|
|
341
|
+
"data-testid": "jfcl-alert__btn",
|
|
312
342
|
onClick: action
|
|
313
343
|
}, actionLabel ? actionLabel : /*#__PURE__*/React__default["default"].createElement(IconClose$1, {
|
|
314
344
|
"aria-label": "Dismiss"
|
|
@@ -336,9 +366,11 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
336
366
|
return /*#__PURE__*/React__default["default"].createElement("a", _extends__default["default"]({}, props, {
|
|
337
367
|
ref: ref,
|
|
338
368
|
className: linkClassNames
|
|
339
|
-
}), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(
|
|
369
|
+
}), children, icon === 'internal' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
370
|
+
icon: freeSolidSvgIcons.faArrowRight,
|
|
340
371
|
className: "jfcl-link__icon"
|
|
341
|
-
}), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(
|
|
372
|
+
}), icon === 'external' && /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
373
|
+
icon: freeSolidSvgIcons.faSquareArrowUpRight,
|
|
342
374
|
className: "jfcl-link__icon"
|
|
343
375
|
}));
|
|
344
376
|
});
|
|
@@ -350,10 +382,11 @@ exports.IconCheck = IconCheck$1;
|
|
|
350
382
|
exports.IconChevron = IconChevron$1;
|
|
351
383
|
exports.IconClose = IconClose$1;
|
|
352
384
|
exports.IconError = IconError$1;
|
|
385
|
+
exports.IconFacebook = IconFacebook$1;
|
|
353
386
|
exports.IconGlobe = IconGlobe$1;
|
|
354
387
|
exports.IconHamburger = IconHamburger$1;
|
|
355
388
|
exports.IconInternet = IconInternet$1;
|
|
356
|
-
exports.IconLinkExternal =
|
|
389
|
+
exports.IconLinkExternal = IconHamburger$3;
|
|
357
390
|
exports.IconLinkInternal = IconLinkInternal$1;
|
|
358
391
|
exports.IconLoading = IconLoading$1;
|
|
359
392
|
exports.IconMail = IconMail$1;
|
|
@@ -3,7 +3,7 @@ import './styles.scss';
|
|
|
3
3
|
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
4
4
|
labelText: string;
|
|
5
5
|
labelIcon?: React.ElementType;
|
|
6
|
-
variant?: 'primary' | 'secondary' | '
|
|
6
|
+
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
7
7
|
size?: 'small' | 'large';
|
|
8
8
|
loading?: boolean;
|
|
9
9
|
iconOnRight?: boolean;
|
|
@@ -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, };
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@justfixnyc/component-library",
|
|
3
3
|
"description": "JustFix Component Library",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "0.
|
|
5
|
+
"version": "0.33.0",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
7
7
|
"module": "dist/src/index.es.js",
|
|
8
8
|
"files": [
|
|
@@ -28,7 +28,10 @@
|
|
|
28
28
|
"jackspeak": "2.1.1"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@babel/runtime": "^7.12.5"
|
|
31
|
+
"@babel/runtime": "^7.12.5",
|
|
32
|
+
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
|
33
|
+
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
|
34
|
+
"@fortawesome/react-fontawesome": "^0.2.0"
|
|
32
35
|
},
|
|
33
36
|
"peerDependencies": {
|
|
34
37
|
"@lingui/cli": ">=2.9.1",
|