@justfixnyc/component-library 0.56.5 → 0.57.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.
Files changed (12) hide show
  1. package/dist/src/assets/index.css +6 -3
  2. package/dist/src/assets/index.es.css +6 -3
  3. package/dist/typings/Components/Checkbox/Checkbox.d.ts +1 -1
  4. package/dist/typings/Components/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/typings/Components/FormGroup/FormGroup.d.ts +1 -1
  6. package/dist/typings/Components/InputHeader/InputHeader.d.ts +1 -1
  7. package/dist/typings/Components/TextInput/TextInput.d.ts +1 -1
  8. package/package.json +4 -2
  9. package/src/styles/colors.scss +30 -0
  10. package/src/styles/mixins.scss +47 -0
  11. package/src/styles/spacing.scss +13 -0
  12. package/src/styles/jfcl.scss +0 -3
package/dist/src/assets/index.css CHANGED
@@ -404,19 +404,21 @@
404
404
  align-items: center;
405
405
  box-sizing: border-box;
406
406
  background-clip: padding-box;
407
- border: 1.5px solid;
407
+ border: 1px solid;
408
408
  margin-right: 8px;
409
409
  border-radius: 4px;
410
410
  background: #faf8f4;
411
411
  }
412
412
  .jfcl-checkbox .jfcl-checkbox__checkmark.jfcl-checkbox__checkmark--is-invalid {
413
413
  border-color: #ff813a;
414
+ border-width: 1.5px;
414
415
  }
415
416
  .jfcl-checkbox .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
416
417
  color: #ffffff;
417
418
  display: none;
418
419
  }
419
420
  .jfcl-checkbox .jfcl-checkbox__input:focus-visible + .jfcl-checkbox__label .jfcl-checkbox__checkmark {
421
+ border-width: 2px;
420
422
  outline: 2px solid #5188ff;
421
423
  outline-offset: 2px;
422
424
  }
@@ -540,7 +542,8 @@
540
542
  color: #676565;
541
543
  }
542
544
  .jfcl-link .jfcl-link__icon {
543
- margin-left: 10px;
545
+ margin-left: 2px;
546
+ height: 0.9em;
544
547
  }
545
548
  @keyframes spin {
546
549
  from {
@@ -741,7 +744,7 @@
741
744
  }
742
745
  .jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
743
746
  border-radius: 4px;
744
- border: 2px solid #242323;
747
+ border-width: 2px;
745
748
  padding-left: calc(var(--input-padding-left) - 1px);
746
749
  background: #ffffff;
747
750
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
package/dist/src/assets/index.es.css CHANGED
@@ -404,19 +404,21 @@
404
404
  align-items: center;
405
405
  box-sizing: border-box;
406
406
  background-clip: padding-box;
407
- border: 1.5px solid;
407
+ border: 1px solid;
408
408
  margin-right: 8px;
409
409
  border-radius: 4px;
410
410
  background: #faf8f4;
411
411
  }
412
412
  .jfcl-checkbox .jfcl-checkbox__checkmark.jfcl-checkbox__checkmark--is-invalid {
413
413
  border-color: #ff813a;
414
+ border-width: 1.5px;
414
415
  }
415
416
  .jfcl-checkbox .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
416
417
  color: #ffffff;
417
418
  display: none;
418
419
  }
419
420
  .jfcl-checkbox .jfcl-checkbox__input:focus-visible + .jfcl-checkbox__label .jfcl-checkbox__checkmark {
421
+ border-width: 2px;
420
422
  outline: 2px solid #5188ff;
421
423
  outline-offset: 2px;
422
424
  }
@@ -540,7 +542,8 @@
540
542
  color: #676565;
541
543
  }
542
544
  .jfcl-link .jfcl-link__icon {
543
- margin-left: 10px;
545
+ margin-left: 2px;
546
+ height: 0.9em;
544
547
  }
545
548
  @keyframes spin {
546
549
  from {
@@ -741,7 +744,7 @@
741
744
  }
742
745
  .jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
743
746
  border-radius: 4px;
744
- border: 2px solid #242323;
747
+ border-width: 2px;
745
748
  padding-left: calc(var(--input-padding-left) - 1px);
746
749
  background: #ffffff;
747
750
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
package/dist/typings/Components/Checkbox/Checkbox.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import './styles.scss';
3
3
  export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
4
4
  labelText: string;
5
- headerText?: string;
5
+ headerText?: React.ReactNode;
6
6
  helperText?: string;
7
7
  invalid?: boolean;
8
8
  invalidText?: string;
package/dist/typings/Components/Dropdown/Dropdown.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface DropdownProps {
8
8
  label: string;
9
9
  isDisabled?: boolean;
10
10
  }[];
11
- labelText: string;
11
+ labelText: React.ReactNode;
12
12
  helperText?: string;
13
13
  invalidText?: string;
14
14
  invalidRole?: string;
package/dist/typings/Components/FormGroup/FormGroup.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import './styles.scss';
3
3
  export interface FormGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
4
- legendText: string;
4
+ legendText: React.ReactNode;
5
5
  helperText?: string;
6
6
  helperElement?: React.ReactNode;
7
7
  invalid?: boolean;
package/dist/typings/Components/InputHeader/InputHeader.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import './style.scss';
3
3
  export interface InputHeaderProps {
4
4
  className?: string;
5
- headerText?: string;
5
+ headerText?: React.ReactNode;
6
6
  labelFor?: string;
7
7
  isLegend?: boolean;
8
8
  helperText?: string;
package/dist/typings/Components/TextInput/TextInput.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import './styles.scss';
3
3
  export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
4
- labelText: string;
4
+ labelText: React.ReactNode;
5
5
  id: string;
6
6
  size?: 'small' | 'medium' | 'large';
7
7
  helperText?: string;
package/package.json CHANGED
@@ -2,12 +2,14 @@
2
2
  "name": "@justfixnyc/component-library",
3
3
  "description": "JustFix Component Library",
4
4
  "license": "MIT",
5
- "version": "0.56.5",
5
+ "version": "0.57.0",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.es.js",
8
8
  "files": [
9
9
  "dist",
10
- "src/styles/jfcl.scss"
10
+ "src/styles/colors.scss",
11
+ "src/styles/mixins.scss",
12
+ "src/styles/spacing.scss"
11
13
  ],
12
14
  "scripts": {
13
15
  "build": "npm run build:js && npm run build:types",
package/src/styles/colors.scss ADDED
@@ -0,0 +1,30 @@
1
+ $WHITE: #ffffff;
2
+ $OFF_WHITE_100: #faf8f4;
3
+ $OFF_WHITE_150: #ebece8;
4
+ $OFF_WHITE_200: #efe9dc;
5
+ $OFF_BLACK: #242323;
6
+ $GREY_700: #4e4b4b;
7
+ $GREY_600: #676565;
8
+ $GREY_400: #9a9898;
9
+ $GREY_50: #f2f2f2;
10
+ $GREEN: #1aa551;
11
+ $PINK: #ffa0c7;
12
+ $YELLOW: #ffba33;
13
+ $ORANGE: #ff813a;
14
+ $BLUE: #5188ff;
15
+ $BLUE_50: #edf3ff;
16
+ $BLUE_100: #c6d8ff;
17
+ $BLUE_150: #9fbdff;
18
+ $GREY_SHADOW: #d4d5d0;
19
+ $GREY_DISABLED: #ebece8;
20
+ $GREY_NEW: #c5ccd1;
21
+
22
+ $FOCUS_OUTLINE_COLOR: $BLUE;
23
+ $INVALID_COLOR: $ORANGE;
24
+
25
+ $ORANGE: #ff813a;
26
+ $RED: #ba4300;
27
+
28
+ $TEXT_DISABLED: $GREY_600;
29
+ $BACKGROUND_DISABLED: $GREY_50;
30
+ $BORDER_DISABLED: $GREY_400;
package/src/styles/mixins.scss ADDED
@@ -0,0 +1,47 @@
1
+ @mixin body_standard_desktop {
2
+ font-family: 'Degular', Arial, Helvetica, sans-serif;
3
+ font-style: normal;
4
+ font-weight: 500;
5
+ font-size: 1.125rem; // 18px
6
+ line-height: 120%; // 21.6px
7
+ letter-spacing: 0.54px;
8
+ }
9
+
10
+ @mixin eyebrow_mobile {
11
+ font-family: "Suisse Int'l Mono";
12
+ font-size: 0.875rem; // 14px
13
+ font-style: normal;
14
+ font-weight: 400;
15
+ line-height: 115%; // 16.1px
16
+ letter-spacing: 0.42px;
17
+ text-transform: uppercase;
18
+ }
19
+
20
+ @mixin small_text_mobile {
21
+ font-family: 'Degular', Arial, Helvetica, sans-serif;
22
+ font-size: 0.875rem; // 14px
23
+ font-style: normal;
24
+ font-weight: 500;
25
+ line-height: 130%; // 18.2px
26
+ letter-spacing: 0.42px;
27
+ }
28
+
29
+ @keyframes spin {
30
+ from {
31
+ transform: rotate(0deg);
32
+ }
33
+
34
+ to {
35
+ transform: rotate(360deg);
36
+ }
37
+ }
38
+
39
+ @mixin loading-spinner($color: $WHITE) {
40
+ display: block;
41
+ animation: spin 500ms infinite linear;
42
+ position: relative;
43
+ border: 2px solid $color;
44
+ border-radius: $iconWidth;
45
+ border-right-color: transparent;
46
+ border-top-color: transparent;
47
+ }
package/src/styles/spacing.scss ADDED
@@ -0,0 +1,13 @@
1
+ $JF_SPACING_01: 0.125rem; // 2px
2
+ $JF_SPACING_02: 0.25rem; // 4px
3
+ $JF_SPACING_03: 0.5rem; // 8px
4
+ $JF_SPACING_04: 0.75rem; // 12px
5
+ $JF_SPACING_05: 1rem; // 16px
6
+ $JF_SPACING_06: 1.5rem; // 24px
7
+ $JF_SPACING_07: 2rem; // 32px
8
+ $JF_SPACING_08: 2.5rem; // 40px
9
+ $JF_SPACING_09: 3rem; // 48px
10
+ $JF_SPACING_10: 4rem; // 64px
11
+ $JF_SPACING_11: 5rem; // 80px
12
+ $JF_SPACING_12: 6rem; // 96px
13
+ $JF_SPACING_13: 10rem; // 160px
package/src/styles/jfcl.scss DELETED
@@ -1,3 +0,0 @@
1
- @use './colors.scss';
2
- @use './spacing.scss';
3
- @use './mixins.scss';