@justfixnyc/component-library 0.56.6 → 0.58.0

package/dist/src/assets/index.css

@@ -404,19 +404,21 @@
   align-items: center;
   box-sizing: border-box;
   background-clip: padding-box;
-  border: 1.5px solid;
+  border: 1px solid;
   margin-right: 8px;
   border-radius: 4px;
   background: #faf8f4;
 }
 .jfcl-checkbox .jfcl-checkbox__checkmark.jfcl-checkbox__checkmark--is-invalid {
   border-color: #ff813a;
+  border-width: 1.5px;
 }
 .jfcl-checkbox .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
   color: #ffffff;
   display: none;
 }
 .jfcl-checkbox .jfcl-checkbox__input:focus-visible + .jfcl-checkbox__label .jfcl-checkbox__checkmark {
+  border-width: 2px;
   outline: 2px solid #5188ff;
   outline-offset: 2px;
 }
@@ -540,7 +542,8 @@
   color: #676565;
 }
 .jfcl-link .jfcl-link__icon {
-  margin-left: 10px;
+  margin-left: 2px;
+  height: 0.9em;
 }
 @keyframes spin {
   from {
@@ -741,7 +744,7 @@
 }
 .jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
   border-radius: 4px;
-  border: 2px solid #242323;
+  border-width: 2px;
   padding-left: calc(var(--input-padding-left) - 1px);
   background: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);

package/dist/src/assets/index.es.css

@@ -404,19 +404,21 @@
   align-items: center;
   box-sizing: border-box;
   background-clip: padding-box;
-  border: 1.5px solid;
+  border: 1px solid;
   margin-right: 8px;
   border-radius: 4px;
   background: #faf8f4;
 }
 .jfcl-checkbox .jfcl-checkbox__checkmark.jfcl-checkbox__checkmark--is-invalid {
   border-color: #ff813a;
+  border-width: 1.5px;
 }
 .jfcl-checkbox .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
   color: #ffffff;
   display: none;
 }
 .jfcl-checkbox .jfcl-checkbox__input:focus-visible + .jfcl-checkbox__label .jfcl-checkbox__checkmark {
+  border-width: 2px;
   outline: 2px solid #5188ff;
   outline-offset: 2px;
 }
@@ -540,7 +542,8 @@
   color: #676565;
 }
 .jfcl-link .jfcl-link__icon {
-  margin-left: 10px;
+  margin-left: 2px;
+  height: 0.9em;
 }
 @keyframes spin {
   from {
@@ -741,7 +744,7 @@
 }
 .jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
   border-radius: 4px;
-  border: 2px solid #242323;
+  border-width: 2px;
   padding-left: calc(var(--input-padding-left) - 1px);
   background: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);

package/dist/src/index.es.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import React, { forwardRef, useId } from 'react';
-import { faPlus, faBan, faXmark, faDownload as faDownload$1, faBuildingColumns, faAddressCard, faBuilding, faMapLocationDot, faMemoPad, faLocationDot, faHouse, faGlobe, faUser, faSpinner, faBars, faEnvelope as faEnvelope$2, faCommentSms, faCopy, faCirclePlus, faCircleInfo, faCircleExclamation as faCircleExclamation$1, faChevronRight, faChevronLeft, faChevronDown, faChevronUp, faCheckDouble, faCheck, faCaretDown, faCaretRight, faBookmark as faBookmark$1, faSquareArrowUpRight, faArrowsRotateReverse, faArrowDownWideShort, faArrowUpShortWide, faArrowUpArrowDown, faArrowDownLong, faArrowUpLong, faArrowDown, faArrowUpRight, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-6863e5a21e/icons/classic/solid';
+import { faShieldCheck, faCalculatorSimple, faPlus, faBan, faXmark, faDownload as faDownload$1, faBuildingColumns, faAddressCard, faBuilding, faMapLocationDot, faMemoPad, faLocationDot, faHouse, faGlobe, faUser, faSpinner, faBars, faMailboxOpenLetter as faMailboxOpenLetter$1, faEnvelope as faEnvelope$2, faCommentSms, faCopy, faCirclePlus, faCircleInfo, faCircleExclamation as faCircleExclamation$1, faChevronRight, faChevronLeft, faChevronDown, faChevronUp, faCheckDouble, faCheck, faCaretDown, faCaretRight, faBookmark as faBookmark$1, faSquareArrowUpRight, faArrowsRotateReverse, faArrowDownWideShort, faArrowUpShortWide, faArrowUpArrowDown, faArrowDownLong, faArrowUpLong, faArrowDown, faArrowUpRight, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-6863e5a21e/icons/classic/solid';
 import { faMailboxOpenLetter, faPaperPlane, faEnvelopeCircleCheck, faEnvelope } from '@awesome.me/kit-6863e5a21e/icons/classic/light';
 import { faPrint, faEyeSlash, faEye, faDownload, faEnvelope as faEnvelope$1, faCircleExclamation, faBookmark } from '@awesome.me/kit-6863e5a21e/icons/classic/regular';
 import { faXTwitter, faTwitter, faFacebookF } from '@awesome.me/kit-6863e5a21e/icons/classic/brands';
@@ -131,6 +131,9 @@ const Icon = _ref => {
       faIcon = faPaperPlane;
       break;
     case 'mailboxOpenLetter':
+      faIcon = faMailboxOpenLetter$1;
+      break;
+    case 'mailboxOpenLetterLight':
       faIcon = faMailboxOpenLetter;
       break;
     case 'bars':
@@ -190,6 +193,12 @@ const Icon = _ref => {
     case 'plus':
       faIcon = faPlus;
       break;
+    case 'calculatorSimple':
+      faIcon = faCalculatorSimple;
+      break;
+    case 'shieldCheck':
+      faIcon = faShieldCheck;
+      break;
     default:
       console.warn("".concat(icon, " is not a supported icon name."));
       return /*#__PURE__*/React.createElement(React.Fragment, null);

package/dist/src/index.js

@@ -143,6 +143,9 @@ const Icon = _ref => {
       faIcon = light.faPaperPlane;
       break;
     case 'mailboxOpenLetter':
+      faIcon = solid.faMailboxOpenLetter;
+      break;
+    case 'mailboxOpenLetterLight':
       faIcon = light.faMailboxOpenLetter;
       break;
     case 'bars':
@@ -202,6 +205,12 @@ const Icon = _ref => {
     case 'plus':
       faIcon = solid.faPlus;
       break;
+    case 'calculatorSimple':
+      faIcon = solid.faCalculatorSimple;
+      break;
+    case 'shieldCheck':
+      faIcon = solid.faShieldCheck;
+      break;
     default:
       console.warn("".concat(icon, " is not a supported icon name."));
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);

package/dist/typings/Components/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import './styles.scss';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     labelText: string;
-    headerText?: string;
+    headerText?: React.ReactNode;
     helperText?: string;
     invalid?: boolean;
     invalidText?: string;

package/dist/typings/Components/Dropdown/Dropdown.d.ts

@@ -8,7 +8,7 @@ export interface DropdownProps {
         label: string;
         isDisabled?: boolean;
     }[];
-    labelText: string;
+    labelText: React.ReactNode;
     helperText?: string;
     invalidText?: string;
     invalidRole?: string;

package/dist/typings/Components/FormGroup/FormGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './styles.scss';
 export interface FormGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    legendText: string;
+    legendText: React.ReactNode;
     helperText?: string;
     helperElement?: React.ReactNode;
     invalid?: boolean;

package/dist/typings/Components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
-export type IconNames = 'addressCard' | 'arrowDown' | 'arrowDownLong' | 'arrowDownWideShort' | 'arrowLeft' | 'arrowRight' | 'arrowsRotateReverse' | 'arrowUp' | 'arrowUpArrowDown' | 'arrowUpLong' | 'arrowUpRight' | 'arrowUpShortWide' | 'ban' | 'bars' | 'bookmark' | 'bookmarkRegular' | 'building' | 'buildingColumns' | 'caretDown' | 'caretRight' | 'check' | 'checkDouble' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'circleExclamation' | 'circleExclamationRegular' | 'circleInfo' | 'circlePlus' | 'copy' | 'download' | 'downloadRegular' | 'envelope' | 'envelopeCircleCheck' | 'envelopeCircleExclamationLight' | 'envelopeLight' | 'envelopeRegular' | 'eye' | 'eyeSlash' | 'facebook' | 'globe' | 'house' | 'locationDot' | 'mailboxOpenLetter' | 'mapLocationDot' | 'memoPad' | 'paperPlaneLight' | 'plus' | 'print' | 'sms' | 'spinner' | 'squareArrowUpRight' | 'twitter' | 'user' | 'xmark' | 'xTwitter';
+export type IconNames = 'addressCard' | 'arrowDown' | 'arrowDownLong' | 'arrowDownWideShort' | 'arrowLeft' | 'arrowRight' | 'arrowsRotateReverse' | 'arrowUp' | 'arrowUpArrowDown' | 'arrowUpLong' | 'arrowUpRight' | 'arrowUpShortWide' | 'ban' | 'bars' | 'bookmark' | 'bookmarkRegular' | 'building' | 'buildingColumns' | 'calculatorSimple' | 'caretDown' | 'caretRight' | 'check' | 'checkDouble' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'circleExclamation' | 'circleExclamationRegular' | 'circleInfo' | 'circlePlus' | 'copy' | 'download' | 'downloadRegular' | 'envelope' | 'envelopeCircleCheck' | 'envelopeCircleExclamationLight' | 'envelopeLight' | 'envelopeRegular' | 'eye' | 'eyeSlash' | 'facebook' | 'globe' | 'house' | 'locationDot' | 'mailboxOpenLetter' | 'mailboxOpenLetterLight' | 'mapLocationDot' | 'memoPad' | 'paperPlaneLight' | 'plus' | 'print' | 'shieldCheck' | 'sms' | 'spinner' | 'squareArrowUpRight' | 'twitter' | 'user' | 'xmark' | 'xTwitter';
 export interface IconProps extends Omit<FontAwesomeIconProps, 'icon'> {
     className?: string;
     icon?: IconNames;

package/dist/typings/Components/InputHeader/InputHeader.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import './style.scss';
 export interface InputHeaderProps {
     className?: string;
-    headerText?: string;
+    headerText?: React.ReactNode;
     labelFor?: string;
     isLegend?: boolean;
     helperText?: string;

package/dist/typings/Components/TextInput/TextInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './styles.scss';
 export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    labelText: string;
+    labelText: React.ReactNode;
     id: string;
     size?: 'small' | 'medium' | 'large';
     helperText?: string;

package/dist/typings/stories/Button.d.ts

@@ -0,0 +1,28 @@
+import './button.css';
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/typings/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/typings/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/jfcl.scss

@@ -0,0 +1,101 @@
+// COLORS
+// ------
+
+$WHITE: #ffffff;
+$OFF_WHITE_100: #faf8f4;
+$OFF_WHITE_150: #ebece8;
+$OFF_WHITE_200: #efe9dc;
+$OFF_BLACK: #242323;
+$GREY_700: #4e4b4b;
+$GREY_600: #676565;
+$GREY_400: #9a9898;
+$GREY_50: #f2f2f2;
+$GREEN: #1aa551;
+$PINK: #ffa0c7;
+$YELLOW: #ffba33;
+$ORANGE: #ff813a;
+$BLUE: #5188ff;
+$BLUE_50: #edf3ff;
+$BLUE_100: #c6d8ff;
+$BLUE_150: #9fbdff;
+$GREY_SHADOW: #d4d5d0;
+$GREY_DISABLED: #ebece8;
+$GREY_NEW: #c5ccd1;
+
+$FOCUS_OUTLINE_COLOR: $BLUE;
+$INVALID_COLOR: $ORANGE;
+
+$ORANGE: #ff813a;
+$RED: #ba4300;
+
+$TEXT_DISABLED: $GREY_600;
+$BACKGROUND_DISABLED: $GREY_50;
+$BORDER_DISABLED: $GREY_400;
+
+// SPACING
+// -------
+
+$JF_SPACING_01: 0.125rem; // 2px
+$JF_SPACING_02: 0.25rem; // 4px
+$JF_SPACING_03: 0.5rem; // 8px
+$JF_SPACING_04: 0.75rem; // 12px
+$JF_SPACING_05: 1rem; // 16px
+$JF_SPACING_06: 1.5rem; // 24px
+$JF_SPACING_07: 2rem; // 32px
+$JF_SPACING_08: 2.5rem; // 40px
+$JF_SPACING_09: 3rem; // 48px
+$JF_SPACING_10: 4rem; // 64px
+$JF_SPACING_11: 5rem; // 80px
+$JF_SPACING_12: 6rem; // 96px
+$JF_SPACING_13: 10rem; // 160px
+
+// MIXINS
+// ------
+
+@mixin body_standard_desktop {
+  font-family: 'Degular', Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem; // 18px
+  line-height: 120%; // 21.6px
+  letter-spacing: 0.54px;
+}
+
+@mixin eyebrow_mobile {
+  font-family: "Suisse Int'l Mono";
+  font-size: 0.875rem; // 14px
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%; // 16.1px
+  letter-spacing: 0.42px;
+  text-transform: uppercase;
+}
+
+@mixin small_text_mobile {
+  font-family: 'Degular', Arial, Helvetica, sans-serif;
+  font-size: 0.875rem; // 14px
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%; // 18.2px
+  letter-spacing: 0.42px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin loading-spinner($color: $WHITE) {
+  display: block;
+  animation: spin 500ms infinite linear;
+  position: relative;
+  border: 2px solid $color;
+  border-radius: $iconWidth;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}

package/package.json

@@ -2,17 +2,15 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.56.6",
+  "version": "0.58.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [
     "dist",
-    "src/styles/colors.scss",
-    "src/styles/mixins.scss",
-    "src/styles/spacing.scss"
+    "jfcl.scss"
   ],
   "scripts": {
-    "build": "npm run build:js && npm run build:types",
+    "build": "npm run build:js && npm run build:types && npm run merge-scss",
     "build:js": "rollup -c rollup.config.js",
     "build:types": "tsc -p tsconfig.build.json",
     "test": "npm run test:ts && npm run test:jest",
@@ -22,6 +20,7 @@
     "lint:format": "prettier --check --ignore-unknown \"src/**/*\"",
     "lint:js": "eslint --no-error-on-unmatched-pattern src/**",
     "format": "prettier --write --ignore-unknown \"src/**/*\"",
+    "merge-scss": "gulp",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "storybook-to-ghpages"
@@ -77,6 +76,9 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "gulp": "^5.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-scss-combine": "^1.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "prettier": "^2.2.1",

package/src/styles/colors.scss

@@ -1,30 +0,0 @@
-$WHITE: #ffffff;
-$OFF_WHITE_100: #faf8f4;
-$OFF_WHITE_150: #ebece8;
-$OFF_WHITE_200: #efe9dc;
-$OFF_BLACK: #242323;
-$GREY_700: #4e4b4b;
-$GREY_600: #676565;
-$GREY_400: #9a9898;
-$GREY_50: #f2f2f2;
-$GREEN: #1aa551;
-$PINK: #ffa0c7;
-$YELLOW: #ffba33;
-$ORANGE: #ff813a;
-$BLUE: #5188ff;
-$BLUE_50: #edf3ff;
-$BLUE_100: #c6d8ff;
-$BLUE_150: #9fbdff;
-$GREY_SHADOW: #d4d5d0;
-$GREY_DISABLED: #ebece8;
-$GREY_NEW: #c5ccd1;
-
-$FOCUS_OUTLINE_COLOR: $BLUE;
-$INVALID_COLOR: $ORANGE;
-
-$ORANGE: #ff813a;
-$RED: #ba4300;
-
-$TEXT_DISABLED: $GREY_600;
-$BACKGROUND_DISABLED: $GREY_50;
-$BORDER_DISABLED: $GREY_400;

package/src/styles/mixins.scss

@@ -1,47 +0,0 @@
-@mixin body_standard_desktop {
-  font-family: 'Degular', Arial, Helvetica, sans-serif;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.125rem; // 18px
-  line-height: 120%; // 21.6px
-  letter-spacing: 0.54px;
-}
-
-@mixin eyebrow_mobile {
-  font-family: "Suisse Int'l Mono";
-  font-size: 0.875rem; // 14px
-  font-style: normal;
-  font-weight: 400;
-  line-height: 115%; // 16.1px
-  letter-spacing: 0.42px;
-  text-transform: uppercase;
-}
-
-@mixin small_text_mobile {
-  font-family: 'Degular', Arial, Helvetica, sans-serif;
-  font-size: 0.875rem; // 14px
-  font-style: normal;
-  font-weight: 500;
-  line-height: 130%; // 18.2px
-  letter-spacing: 0.42px;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@mixin loading-spinner($color: $WHITE) {
-  display: block;
-  animation: spin 500ms infinite linear;
-  position: relative;
-  border: 2px solid $color;
-  border-radius: $iconWidth;
-  border-right-color: transparent;
-  border-top-color: transparent;
-}

package/src/styles/spacing.scss

@@ -1,13 +0,0 @@
-$JF_SPACING_01: 0.125rem; // 2px
-$JF_SPACING_02: 0.25rem; // 4px
-$JF_SPACING_03: 0.5rem; // 8px
-$JF_SPACING_04: 0.75rem; // 12px
-$JF_SPACING_05: 1rem; // 16px
-$JF_SPACING_06: 1.5rem; // 24px
-$JF_SPACING_07: 2rem; // 32px
-$JF_SPACING_08: 2.5rem; // 40px
-$JF_SPACING_09: 3rem; // 48px
-$JF_SPACING_10: 4rem; // 64px
-$JF_SPACING_11: 5rem; // 80px
-$JF_SPACING_12: 6rem; // 96px
-$JF_SPACING_13: 10rem; // 160px