@justfixnyc/component-library 0.60.1 → 0.61.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/README.md +2 -2
- package/dist/src/assets/index.css +647 -11
- package/dist/src/assets/index.es.css +647 -11
- package/dist/src/index.es.js +417 -29
- package/dist/src/index.js +425 -27
- package/dist/typings/Components/Accordion/Accordion.d.ts +11 -0
- package/dist/typings/Components/ButtonStyledLink/ButtonStyledLink.d.ts +15 -0
- package/dist/typings/Components/CalloutBox/CalloutBox.d.ts +9 -0
- package/dist/typings/Components/Dropdown/Dropdown.d.ts +15 -10
- package/dist/typings/Components/GeoSearchDropdown/GeoSearchDropdown.d.ts +53 -0
- package/dist/typings/Components/Heading/Heading.d.ts +8 -0
- package/dist/typings/Components/InfoBox/InfoBox.d.ts +10 -0
- package/dist/typings/Components/LinkStyledButton/LinkStyledButton.d.ts +12 -0
- package/dist/typings/Components/Notice/Notice.d.ts +14 -0
- package/dist/typings/Components/Pill/Pill.d.ts +9 -0
- package/dist/typings/index.d.ts +9 -0
- package/jfcl.scss +235 -2
- package/package.json +1 -1
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DropdownOption, DropdownProps } from '../Dropdown/Dropdown';
|
|
3
|
+
import './styles.scss';
|
|
4
|
+
export type GeoSearchProperties = {
|
|
5
|
+
borough?: string;
|
|
6
|
+
borough_gid?: string;
|
|
7
|
+
housenumber?: string;
|
|
8
|
+
street?: string;
|
|
9
|
+
name?: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
addendum?: {
|
|
12
|
+
pad: {
|
|
13
|
+
bbl?: string;
|
|
14
|
+
bin?: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
postalcode?: string;
|
|
18
|
+
};
|
|
19
|
+
export type GeoSearchFeature = {
|
|
20
|
+
type?: string;
|
|
21
|
+
geometry: {
|
|
22
|
+
type?: string;
|
|
23
|
+
coordinates: number[];
|
|
24
|
+
};
|
|
25
|
+
properties: GeoSearchProperties;
|
|
26
|
+
};
|
|
27
|
+
export type GeoSearchQuery = {
|
|
28
|
+
text?: string;
|
|
29
|
+
};
|
|
30
|
+
export type GeoSearchResults = {
|
|
31
|
+
bbox?: unknown;
|
|
32
|
+
query: GeoSearchQuery;
|
|
33
|
+
features: GeoSearchFeature[];
|
|
34
|
+
};
|
|
35
|
+
export type GeoSearchDropdownOption = DropdownOption & {
|
|
36
|
+
feature?: GeoSearchFeature;
|
|
37
|
+
};
|
|
38
|
+
export type GeoSearchDropdownSelection = {
|
|
39
|
+
option: GeoSearchDropdownOption;
|
|
40
|
+
feature: GeoSearchFeature;
|
|
41
|
+
response: GeoSearchResults | null;
|
|
42
|
+
fullResponse?: unknown;
|
|
43
|
+
};
|
|
44
|
+
export interface GeoSearchDropdownProps extends Omit<DropdownProps<GeoSearchDropdownOption>, 'options' | 'filterOption' | 'value'> {
|
|
45
|
+
initialAddress?: string;
|
|
46
|
+
customGeoAutocompleteUrl?: string;
|
|
47
|
+
throttleMs?: number;
|
|
48
|
+
includeFullResponse?: boolean;
|
|
49
|
+
serviceUnavailableText?: string;
|
|
50
|
+
onRequestError?: (e: Error) => void;
|
|
51
|
+
onSelect?: (selection: GeoSearchDropdownSelection | null) => void;
|
|
52
|
+
}
|
|
53
|
+
export declare const GeoSearchDropdown: React.FC<GeoSearchDropdownProps>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
type Int = number;
|
|
4
|
+
export interface HeadingProps extends HTMLAttributes<HTMLElement> {
|
|
5
|
+
level: Int;
|
|
6
|
+
}
|
|
7
|
+
export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AriaRole } from 'react';
|
|
3
|
+
import './styles.scss';
|
|
4
|
+
export interface InfoBoxProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
color?: 'white' | 'blue' | 'orange';
|
|
7
|
+
role?: AriaRole;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const InfoBox: React.FC<InfoBoxProps>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
export type LinkStyledButtonIcon = 'internal' | 'external';
|
|
4
|
+
export interface LinkStyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
icon?: LinkStyledButtonIcon;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Use for in-page actions that should look like a text link.
|
|
11
|
+
*/
|
|
12
|
+
export declare const LinkStyledButton: React.ForwardRefExoticComponent<LinkStyledButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IconNames } from '../Icon/Icon';
|
|
3
|
+
import './styles.scss';
|
|
4
|
+
type NoticeAll = {
|
|
5
|
+
icon?: IconNames;
|
|
6
|
+
color?: 'yellow' | 'green' | 'white' | 'off-white-100' | 'off-white-200';
|
|
7
|
+
header?: React.ReactNode;
|
|
8
|
+
headingLevel?: number;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
className?: string;
|
|
11
|
+
};
|
|
12
|
+
export type NoticeProps = (Required<Pick<NoticeAll, 'header' | 'headingLevel'>> & Omit<NoticeAll, 'header' | 'headingLevel'>) | (Omit<NoticeAll, 'header' | 'headingLevel'> & Partial<Record<'header' | 'headingLevel', never>>);
|
|
13
|
+
export declare const Notice: React.FC<NoticeProps>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './styles.scss';
|
|
3
|
+
export type PillColors = 'none' | 'black' | 'yellow' | 'orange' | 'grey' | 'red' | 'blue' | 'green' | 'pink';
|
|
4
|
+
export interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
color: PillColors;
|
|
7
|
+
circle?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const Pill: React.FC<PillProps>;
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import './styles/global.scss';
|
|
2
2
|
export * from './Components/Alert/Alert';
|
|
3
|
+
export * from './Components/Accordion/Accordion';
|
|
3
4
|
export * from './Components/Button/Button';
|
|
5
|
+
export * from './Components/ButtonStyledLink/ButtonStyledLink';
|
|
6
|
+
export * from './Components/CalloutBox/CalloutBox';
|
|
4
7
|
export * from './Components/Checkbox/Checkbox';
|
|
5
8
|
export * from './Components/Dropdown/Dropdown';
|
|
6
9
|
export * from './Components/FormGroup/FormGroup';
|
|
10
|
+
export * from './Components/GeoSearchDropdown/GeoSearchDropdown';
|
|
11
|
+
export * from './Components/Heading/Heading';
|
|
7
12
|
export * from './Components/Icon/Icon';
|
|
13
|
+
export * from './Components/InfoBox/InfoBox';
|
|
8
14
|
export * from './Components/Link/Link';
|
|
15
|
+
export * from './Components/LinkStyledButton/LinkStyledButton';
|
|
16
|
+
export * from './Components/Notice/Notice';
|
|
17
|
+
export * from './Components/Pill/Pill';
|
|
9
18
|
export * from './Components/RadioButton/RadioButton';
|
|
10
19
|
export * from './Components/SelectButton/SelectButton';
|
|
11
20
|
export * from './Components/TextInput/TextInput';
|
package/jfcl.scss
CHANGED
|
@@ -9,24 +9,32 @@ $OFF_BLACK: #242323;
|
|
|
9
9
|
$GREY_700: #4e4b4b;
|
|
10
10
|
$GREY_600: #676565;
|
|
11
11
|
$GREY_400: #9a9898;
|
|
12
|
+
$GREY_200: #c5ccd1;
|
|
12
13
|
$GREY_50: #f2f2f2;
|
|
13
14
|
$GREEN: #1aa551;
|
|
15
|
+
$GREEN_100: #e6fff0;
|
|
14
16
|
$PINK: #ffa0c7;
|
|
15
17
|
$YELLOW: #ffba33;
|
|
18
|
+
$YELLOW_100: #fff8e6;
|
|
19
|
+
$YELLOW_200: #ffe7b3;
|
|
16
20
|
$ORANGE: #ff813a;
|
|
17
21
|
$BLUE: #5188ff;
|
|
18
22
|
$BLUE_50: #edf3ff;
|
|
19
23
|
$BLUE_100: #c6d8ff;
|
|
20
24
|
$BLUE_150: #9fbdff;
|
|
25
|
+
$BLUE_200: #9fbdff;
|
|
26
|
+
$PURPLE: #a96bff;
|
|
27
|
+
$PURPLE_100: #e5d8f8;
|
|
28
|
+
$PURPLE_200: #bc9aff;
|
|
21
29
|
$GREY_SHADOW: #d4d5d0;
|
|
22
30
|
$GREY_DISABLED: #ebece8;
|
|
23
31
|
$GREY_NEW: #c5ccd1;
|
|
24
32
|
|
|
25
33
|
$FOCUS_OUTLINE_COLOR: $BLUE;
|
|
26
|
-
$
|
|
27
|
-
|
|
34
|
+
$ORANGE_ALPHA: rgba(255, 129, 58, 0.1);
|
|
28
35
|
$ORANGE: #ff813a;
|
|
29
36
|
$RED: #ba4300;
|
|
37
|
+
$INVALID_COLOR: $RED;
|
|
30
38
|
|
|
31
39
|
$TEXT_DISABLED: $GREY_600;
|
|
32
40
|
$BACKGROUND_DISABLED: $GREY_50;
|
|
@@ -61,6 +69,85 @@ $JF_SPACING_13: 10rem; // 160px
|
|
|
61
69
|
letter-spacing: 0.54px;
|
|
62
70
|
}
|
|
63
71
|
|
|
72
|
+
@mixin body_standard_link_desktop {
|
|
73
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
74
|
+
font-style: normal;
|
|
75
|
+
font-weight: 400;
|
|
76
|
+
font-size: 1.125rem; // 18px
|
|
77
|
+
line-height: 120%; // 21.6px
|
|
78
|
+
letter-spacing: 0;
|
|
79
|
+
text-decoration: underline;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@mixin body_large_desktop {
|
|
83
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
84
|
+
font-style: normal;
|
|
85
|
+
font-weight: 500;
|
|
86
|
+
font-size: 1.5rem; // 24px
|
|
87
|
+
line-height: 120%; // 28.8px
|
|
88
|
+
letter-spacing: 0.72px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@mixin small_text_desktop {
|
|
92
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
93
|
+
font-style: normal;
|
|
94
|
+
font-weight: 500;
|
|
95
|
+
font-size: 0.875rem; // 14px
|
|
96
|
+
line-height: 130%; // 18.2px
|
|
97
|
+
letter-spacing: 0.42px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@mixin small_text_bold_desktop {
|
|
101
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
102
|
+
font-style: normal;
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
font-size: 0.875rem; // 14px
|
|
105
|
+
line-height: 130%; // 18.2px
|
|
106
|
+
letter-spacing: 0.42px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@mixin h1_desktop {
|
|
110
|
+
font-family: 'Degular Display', Arial, Helvetica, sans-serif;
|
|
111
|
+
font-style: normal;
|
|
112
|
+
font-weight: 400;
|
|
113
|
+
font-size: 6rem; // 96px
|
|
114
|
+
line-height: 90%; // 86.4px
|
|
115
|
+
letter-spacing: 2.88px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@mixin h2_desktop {
|
|
119
|
+
font-family: 'Degular Display', Arial, Helvetica, sans-serif;
|
|
120
|
+
font-style: normal;
|
|
121
|
+
font-weight: 400;
|
|
122
|
+
font-size: 4rem; // 64px
|
|
123
|
+
line-height: 100%; // 64px
|
|
124
|
+
letter-spacing: 1.92px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@mixin h3_desktop {
|
|
128
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
129
|
+
font-style: normal;
|
|
130
|
+
font-weight: 600;
|
|
131
|
+
font-size: 2.25rem; // 36px
|
|
132
|
+
line-height: 100%; // 36px
|
|
133
|
+
letter-spacing: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@mixin h3_small_caps_desktop {
|
|
137
|
+
@include h3_desktop;
|
|
138
|
+
text-transform: uppercase;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@mixin eyebrow_large_desktop {
|
|
142
|
+
font-family: "Suisse Int'l Mono";
|
|
143
|
+
font-size: 1.125rem; // 18px
|
|
144
|
+
font-style: normal;
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
line-height: 115%; // 20.7px
|
|
147
|
+
letter-spacing: 0.54px;
|
|
148
|
+
text-transform: uppercase;
|
|
149
|
+
}
|
|
150
|
+
|
|
64
151
|
@mixin eyebrow_mobile {
|
|
65
152
|
font-family: "Suisse Int'l Mono";
|
|
66
153
|
font-size: 0.875rem; // 14px
|
|
@@ -71,6 +158,43 @@ $JF_SPACING_13: 10rem; // 160px
|
|
|
71
158
|
text-transform: uppercase;
|
|
72
159
|
}
|
|
73
160
|
|
|
161
|
+
@mixin eyebrow_small_desktop {
|
|
162
|
+
font-family: "Suisse Int'l Mono";
|
|
163
|
+
font-size: 1rem; // 16px
|
|
164
|
+
font-style: normal;
|
|
165
|
+
font-weight: 400;
|
|
166
|
+
line-height: 115%; // 18.4px
|
|
167
|
+
letter-spacing: 0.48px;
|
|
168
|
+
text-transform: uppercase;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@mixin h1_mobile {
|
|
172
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
173
|
+
font-size: 2.25rem; // 36px
|
|
174
|
+
font-style: normal;
|
|
175
|
+
font-weight: 600;
|
|
176
|
+
line-height: 100%; // 36px
|
|
177
|
+
letter-spacing: 0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@mixin h2_mobile {
|
|
181
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
182
|
+
font-size: 1.125rem; // 18px
|
|
183
|
+
font-style: normal;
|
|
184
|
+
font-weight: 600;
|
|
185
|
+
line-height: 100%; // 18px
|
|
186
|
+
letter-spacing: 0.36px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
@mixin h3_mobile {
|
|
190
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
191
|
+
font-size: 1.5rem; // 24px
|
|
192
|
+
font-style: normal;
|
|
193
|
+
font-weight: 600;
|
|
194
|
+
line-height: 120%; // 28.8px
|
|
195
|
+
letter-spacing: 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
74
198
|
@mixin small_text_mobile {
|
|
75
199
|
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
76
200
|
font-size: 0.875rem; // 14px
|
|
@@ -80,6 +204,115 @@ $JF_SPACING_13: 10rem; // 160px
|
|
|
80
204
|
letter-spacing: 0.42px;
|
|
81
205
|
}
|
|
82
206
|
|
|
207
|
+
@mixin small_text_link_mobile {
|
|
208
|
+
@include small_text_mobile;
|
|
209
|
+
text-decoration: underline;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@mixin small_text_bold_mobile {
|
|
213
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
214
|
+
font-size: 0.875rem; // 14px
|
|
215
|
+
font-style: normal;
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
line-height: 100%; // 14px
|
|
218
|
+
letter-spacing: 0.28px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@mixin body_large_mobile {
|
|
222
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
223
|
+
font-size: 1.5rem; // 24px
|
|
224
|
+
font-style: normal;
|
|
225
|
+
font-weight: 500;
|
|
226
|
+
line-height: 120%; // 28.8px
|
|
227
|
+
letter-spacing: 0.72px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
@mixin body_standard_mobile {
|
|
231
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
232
|
+
font-size: 1.125rem; // 18px
|
|
233
|
+
font-style: normal;
|
|
234
|
+
font-weight: 500;
|
|
235
|
+
line-height: 120%; // 21.6px
|
|
236
|
+
letter-spacing: 0.54px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
@mixin body_standard_link_mobile {
|
|
240
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
241
|
+
font-size: 1.125rem; // 18px
|
|
242
|
+
font-style: normal;
|
|
243
|
+
font-weight: 400;
|
|
244
|
+
line-height: 120%; // 21.6px
|
|
245
|
+
letter-spacing: 0;
|
|
246
|
+
text-decoration: underline;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
@mixin body_desktop {
|
|
250
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
251
|
+
font-size: 1.5rem; // 24px
|
|
252
|
+
font-style: normal;
|
|
253
|
+
font-weight: 400;
|
|
254
|
+
line-height: 120%; // 28.8px
|
|
255
|
+
letter-spacing: 0;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@mixin h3_pairing_desktop {
|
|
259
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
260
|
+
font-size: 1.125rem; // 18px
|
|
261
|
+
font-style: normal;
|
|
262
|
+
font-weight: 600;
|
|
263
|
+
line-height: 100%; // 18px
|
|
264
|
+
letter-spacing: 0;
|
|
265
|
+
}
|
|
266
|
+
@mixin disclaimer_mobile_underline {
|
|
267
|
+
font-family: 'Degular', Arial, Helvetica, sans-serif;
|
|
268
|
+
font-size: 0.875rem; // 14px
|
|
269
|
+
font-style: normal;
|
|
270
|
+
font-weight: 400;
|
|
271
|
+
line-height: 115%; // 16.1px
|
|
272
|
+
letter-spacing: 0;
|
|
273
|
+
text-decoration: underline;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
@mixin body_standard_desktop_degtext {
|
|
277
|
+
font-family: 'Degular Text', Arial, Helvetica, sans-serif;
|
|
278
|
+
font-style: normal;
|
|
279
|
+
font-weight: 500;
|
|
280
|
+
font-size: 1.125rem; // 18px
|
|
281
|
+
line-height: 120%; // 21.6px
|
|
282
|
+
letter-spacing: 0;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
@mixin body_standard_link_desktop_degtext {
|
|
286
|
+
@include body_standard_desktop_degtext;
|
|
287
|
+
text-decoration: underline;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
@mixin body_large_desktop_degtext {
|
|
291
|
+
font-family: 'Degular Text', Arial, Helvetica, sans-serif;
|
|
292
|
+
font-style: normal;
|
|
293
|
+
font-weight: 500;
|
|
294
|
+
font-size: 1.5rem; // 24px
|
|
295
|
+
line-height: 120%; // 28.8px
|
|
296
|
+
letter-spacing: 0;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
@mixin small_text_desktop_degtext {
|
|
300
|
+
font-family: 'Degular Text', Arial, Helvetica, sans-serif;
|
|
301
|
+
font-style: normal;
|
|
302
|
+
font-weight: 500;
|
|
303
|
+
font-size: 0.875rem; // 14px
|
|
304
|
+
line-height: 130%; // 18.2px
|
|
305
|
+
letter-spacing: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
@mixin small_text_bold_desktop_degtext {
|
|
309
|
+
font-family: 'Degular Text', Arial, Helvetica, sans-serif;
|
|
310
|
+
font-style: normal;
|
|
311
|
+
font-weight: 600;
|
|
312
|
+
font-size: 0.875rem; // 14px
|
|
313
|
+
line-height: 130%; // 18.2px
|
|
314
|
+
letter-spacing: 0;
|
|
315
|
+
}
|
|
83
316
|
@keyframes spin {
|
|
84
317
|
from {
|
|
85
318
|
transform: rotate(0deg);
|