@justfixnyc/component-library 0.60.2 → 0.61.3

package/README.md

@@ -21,15 +21,16 @@ This package is live on both GitHub Package Registry (GPR) and NPM registry
 
 GitHub Actions triggers a publish to GPR from any branch that runs the version bump. Should probably change to allow this version bump to only happen on `main` before we fully integrate this library
 
-``` shell
+```shell
 npm run lint
 npm version [major]|[minor]|[patch]
 git push --follow-tags
 ```
 
-Publishing to NPM registry is more manual because of permission issues that couldn't be resolved in Github Actions. You will need to authenticate your account (w/ permissions to the JustFix organization) via the terminal. 
+Publishing to NPM registry is more manual because of permission issues that couldn't be resolved in Github Actions. You will need to authenticate your account (w/ permissions to the JustFix organization) via the terminal.
 
 ```shell
 npm run build
+npm login --scope=@justfixnyc --registry=https://registry.npmjs.org/ --auth-type=web
 npm publish --access public --@justfixnyc:registry=https://registry.npmjs.org/
 ```

package/dist/src/assets/index.css

@@ -130,7 +130,7 @@
   background-color: #5188ff;
 }
 .jfcl-alert.jfcl-type-error::before {
-  background-color: #ff813a;
+  background-color: #ba4300;
 }
 .jfcl-alert.jfcl-type-success::before {
   background-color: #1aa551;
@@ -165,6 +165,57 @@
     transform: rotate(360deg);
   }
 }
+.jfcl-accordion {
+  padding: 0;
+}
+.jfcl-accordion .jfcl-accordion__summary {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  cursor: pointer;
+  padding: 1.5rem 2rem;
+}
+@media (hover: hover) and (pointer: fine) {
+  .jfcl-accordion .jfcl-accordion__summary:hover {
+    background-color: #efe9dc;
+  }
+}
+.jfcl-accordion .jfcl-accordion__summary > svg {
+  align-self: flex-start;
+}
+.jfcl-accordion .jfcl-accordion__summary > svg:only-of-type {
+  align-self: unset;
+}
+.jfcl-accordion .jfcl-accordion__summary .jfcl-accordion__chevron {
+  margin-left: auto;
+  padding: 0.25rem;
+}
+.jfcl-accordion .jfcl-accordion__summary::-webkit-details-marker {
+  display: none;
+}
+.jfcl-accordion[open] > .jfcl-accordion__summary .jfcl-accordion__chevron {
+  transform: scale(-1, -1);
+}
+.jfcl-accordion .jfcl-accordion__content {
+  padding: 0.75rem 2rem 2rem;
+}
+
+@media (max-width: 767px) {
+  .jfcl-accordion .jfcl-accordion__summary {
+    padding: 1rem 1.5rem;
+  }
+  .jfcl-accordion .jfcl-accordion__content {
+    padding: 1rem 1.5rem 1.5rem;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .jfcl-button {
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -312,6 +363,222 @@
     transform: rotate(360deg);
   }
 }
+.jfcl-button {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  cursor: pointer;
+  user-select: none;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  white-space: normal;
+  word-wrap: break-word;
+  vertical-align: middle;
+  width: fit-content;
+  padding: 22px 28px;
+  border: 1px solid;
+  border-radius: 100px;
+  transition: all 0.1s linear;
+  transform: translateX(0rem);
+}
+.jfcl-button:focus-visible {
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #5188ff;
+}
+.jfcl-button:hover:not(:disabled) {
+  box-shadow: 4px 5px 0px 0px #c5ccd1;
+}
+.jfcl-button:active:not(:disabled) {
+  box-shadow: 0px -4px 0px 0px #c5ccd1;
+}
+.jfcl-button .jfcl-button__label {
+  display: flex;
+}
+.jfcl-button .jfcl-button__icon {
+  margin-right: 10px;
+  width: 1em;
+  height: 1em;
+}
+.jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
+  margin-right: 0;
+  margin-left: 10px;
+  order: 2;
+}
+.jfcl-button.jfcl-btn-icon-only {
+  width: 4.125rem;
+  height: 4.125rem;
+}
+.jfcl-button.jfcl-btn-icon-only .jfcl-button__icon {
+  margin-right: 0;
+}
+.jfcl-button.jfcl-size-small {
+  padding: 12px 28px;
+}
+.jfcl-button.jfcl-size-small.jfcl-btn-icon-only {
+  padding: 0;
+  width: 2.875rem;
+  height: 2.875rem;
+}
+.jfcl-button.jfcl-variant-primary {
+  color: #faf8f4;
+  background-color: #242323;
+  border-color: transparent;
+}
+.jfcl-button.jfcl-variant-primary:disabled {
+  cursor: inherit;
+  color: #242323;
+  background-color: #9a9898;
+}
+.jfcl-button.jfcl-variant-primary.jfcl-is-loading {
+  background-color: #676565;
+}
+.jfcl-button.jfcl-variant-primary.jfcl-is-loading .jfcl-button__icon {
+  display: block;
+  animation: spin 500ms infinite linear;
+  position: relative;
+  border: 2px solid #ffffff;
+  border-radius: 1em;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+.jfcl-button.jfcl-variant-secondary {
+  color: #242323;
+  background-color: #faf8f4;
+  border-color: #242323;
+}
+.jfcl-button.jfcl-variant-secondary:disabled {
+  cursor: inherit;
+  background-color: #9a9898;
+}
+.jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
+  display: block;
+  animation: spin 500ms infinite linear;
+  position: relative;
+  border: 2px solid #242323;
+  border-radius: 1em;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+.jfcl-button.jfcl-variant-tertiary {
+  color: #242323;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-tertiary:disabled {
+  cursor: inherit;
+  color: #676565;
+}
+.jfcl-button.jfcl-variant-tertiary:disabled .jfcl-button__text {
+  border-bottom: none;
+}
+.jfcl-button.jfcl-variant-tertiary:hover:not(:disabled) {
+  background-color: #efe9dc;
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-tertiary:active:not(:disabled) {
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading {
+  background-color: #efe9dc;
+}
+.jfcl-button.jfcl-variant-tertiary.jfcl-is-loading .jfcl-button__icon {
+  display: block;
+  animation: spin 500ms infinite linear;
+  position: relative;
+  border: 2px solid #242323;
+  border-radius: 1em;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+.jfcl-button.jfcl-variant-tertiary:active(:disabled) {
+  background-color: rgba(239, 233, 220, 0.8);
+}
+
+.jfcl-button-styled-link {
+  text-decoration: none;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-callout-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 1.5rem 0 0;
+  padding: 2rem;
+  border-radius: 4px;
+  background-color: #efe9dc;
+}
+.jfcl-callout-box .jfcl-callout-box__header {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 120%;
+  letter-spacing: 0.72px;
+  font-weight: 600;
+  margin: 0;
+}
+.jfcl-callout-box .jfcl-callout-box__content {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 120%;
+  letter-spacing: 0.72px;
+}
+.jfcl-callout-box .jfcl-callout-box__content p {
+  margin: 0 0 1.5rem;
+}
+.jfcl-callout-box .jfcl-callout-box__content p:last-child {
+  margin-bottom: 0;
+}
+.jfcl-callout-box .jfcl-callout-box__action {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 120%;
+  letter-spacing: 0.72px;
+}
+
+@media (max-width: 767px) {
+  .jfcl-callout-box {
+    padding: 1.5rem;
+  }
+  .jfcl-callout-box .jfcl-callout-box__header,
+  .jfcl-callout-box .jfcl-callout-box__content,
+  .jfcl-callout-box .jfcl-callout-box__action {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%;
+    letter-spacing: 0.54px;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .jfcl-input-header__label {
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -349,7 +616,7 @@
   color: #242323;
   display: flex;
   align-items: center;
-  color: #ff813a;
+  color: #ba4300;
   margin-bottom: 0.75rem;
 }
 .jfcl-input-header__invalid_text .jfcl-input-header__invalid_icon {
@@ -410,7 +677,7 @@
   background: #faf8f4;
 }
 .jfcl-checkbox .jfcl-checkbox__checkmark.jfcl-checkbox__checkmark--is-invalid {
-  border-color: #ff813a;
+  border-color: #ba4300;
   border-width: 1.5px;
 }
 .jfcl-checkbox .jfcl-checkbox__checkmark .jfcl-checkbox__check_icon {
@@ -457,7 +724,7 @@
   border-radius: 4px;
 }
 .jfcl-dropdown.jfcl-dropdown--is-invalid {
-  --border-color: #ff813a;
+  --border-color: #ba4300;
 }
 .jfcl-dropdown.jfcl-dropdown--is-disabled {
   --border-color: #9a9898;
@@ -520,6 +787,180 @@
   margin: 0;
   border: none;
 }
+.jfcl-geosearch-dropdown {
+  width: 100%;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-heading {
+  margin: 0;
+}
+.jfcl-heading.jfcl-heading--h1 {
+  font-family: "Degular Display", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 6rem;
+  line-height: 90%;
+  letter-spacing: 2.88px;
+}
+.jfcl-heading.jfcl-heading--h2 {
+  font-family: "Degular Display", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 4rem;
+  line-height: 100%;
+  letter-spacing: 1.92px;
+}
+.jfcl-heading.jfcl-heading--h3 {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2.25rem;
+  line-height: 100%;
+  letter-spacing: 0;
+}
+.jfcl-heading.jfcl-heading--h4 {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 120%;
+  letter-spacing: 0.72px;
+  font-weight: 600;
+}
+.jfcl-heading.jfcl-heading--h5 {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  font-weight: 600;
+}
+.jfcl-heading.jfcl-heading--h6 {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 130%;
+  letter-spacing: 0.42px;
+}
+
+@media (max-width: 767px) {
+  .jfcl-heading.jfcl-heading--h1 {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 2.25rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%;
+    letter-spacing: 0;
+  }
+  .jfcl-heading.jfcl-heading--h2 {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%;
+    letter-spacing: 0.36px;
+  }
+  .jfcl-heading.jfcl-heading--h3 {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: 0;
+  }
+  .jfcl-heading.jfcl-heading--h4, .jfcl-heading.jfcl-heading--h5 {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%;
+    letter-spacing: 0.54px;
+  }
+  .jfcl-heading.jfcl-heading--h6 {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 130%;
+    letter-spacing: 0.42px;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-info-box {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 4px;
+  color: #242323;
+}
+.jfcl-info-box.jfcl-info-box--white {
+  background-color: #ffffff;
+  border-color: #c5ccd1;
+}
+.jfcl-info-box.jfcl-info-box--white .jfcl-info-box__content-container {
+  max-width: 80%;
+}
+.jfcl-info-box.jfcl-info-box--blue {
+  background-color: #edf3ff;
+  border-color: #9fbdff;
+}
+.jfcl-info-box.jfcl-info-box--orange {
+  background-color: rgba(255, 129, 58, 0.1);
+  border-width: 2px;
+  border-color: #ff813a;
+}
+.jfcl-info-box.jfcl-info-box--orange .jfcl-info-box__icon-container svg {
+  color: #ff813a;
+}
+.jfcl-info-box .jfcl-info-box__content-container {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  flex: 1;
+}
+.jfcl-info-box .jfcl-info-box__content-container .bold {
+  font-weight: 600;
+}
+
+@media (max-width: 767px) {
+  .jfcl-info-box .jfcl-info-box__content-container {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%;
+    letter-spacing: 0.54px;
+  }
+  .jfcl-info-box .jfcl-info-box__content-container .jfcl-link {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%;
+    letter-spacing: 0.54px;
+  }
+}
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -553,6 +994,201 @@
     transform: rotate(360deg);
   }
 }
+.jfcl-link {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  color: #242323;
+  text-underline-position: from-font;
+}
+.jfcl-link:hover {
+  color: #676565;
+}
+.jfcl-link .jfcl-link__icon {
+  margin-left: 0.125em;
+  height: 0.85em;
+}
+
+.jfcl-link-styled-button {
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  background: none;
+  text-align: left;
+}
+.jfcl-link-styled-button:focus-visible {
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #5188ff;
+}
+.jfcl-link-styled-button:disabled {
+  cursor: inherit;
+  color: #676565;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-notice {
+  display: flex;
+  gap: 1.8125rem;
+  margin-bottom: 1.5rem;
+  padding: 2rem 1.5rem;
+  border-radius: 0.25rem;
+}
+.jfcl-notice.jfcl-notice--green {
+  border: 1px solid #1aa551;
+  background-color: #e6fff0;
+}
+.jfcl-notice.jfcl-notice--yellow {
+  border: 1px solid #ffba33;
+  background-color: #fff8e6;
+}
+.jfcl-notice.jfcl-notice--white {
+  border: 1px solid #c5ccd1;
+  background-color: #ffffff;
+}
+.jfcl-notice.jfcl-notice--off-white-100 {
+  border: 1px solid #c5ccd1;
+  background-color: #faf8f4;
+}
+.jfcl-notice.jfcl-notice--off-white-200 {
+  border: 1px solid #c5ccd1;
+  background-color: #efe9dc;
+}
+.jfcl-notice .jfcl-notice__header {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2.25rem;
+  line-height: 100%;
+  letter-spacing: 0;
+  margin: 0 0 1.5rem;
+}
+.jfcl-notice .jfcl-notice__body {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 120%;
+  letter-spacing: 0.72px;
+}
+.jfcl-notice .jfcl-notice__icon-container svg {
+  height: 2.625rem;
+  width: 3.375rem;
+}
+
+@media (max-width: 767px) {
+  .jfcl-notice .jfcl-notice__header {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: 0;
+  }
+  .jfcl-notice .jfcl-notice__body {
+    font-family: "Degular", Arial, Helvetica, sans-serif;
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 120%;
+    letter-spacing: 0.54px;
+  }
+  .jfcl-notice .jfcl-notice__icon-container {
+    display: none;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.jfcl-pill {
+  font-family: "Degular Text", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  border-radius: 1rem;
+  box-sizing: border-box;
+  line-height: 1;
+  padding: 0.375rem 0.75rem;
+}
+.jfcl-pill.jfcl-pill--circle {
+  font-family: "Degular Text", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0;
+  width: 1.5em;
+  height: 1.5em;
+  border: 1px solid #242323;
+  border-radius: 999px;
+  padding: 0 0 0.1em;
+  font-weight: 600;
+}
+.jfcl-pill.jfcl-pill--none {
+  background-color: transparent;
+  color: #242323;
+}
+.jfcl-pill.jfcl-pill--black {
+  background-color: #242323;
+  color: #faf8f4;
+}
+.jfcl-pill.jfcl-pill--yellow {
+  background-color: #ffba33;
+  color: #242323;
+}
+.jfcl-pill.jfcl-pill--orange {
+  background-color: #ff813a;
+  color: #242323;
+}
+.jfcl-pill.jfcl-pill--grey {
+  background-color: #c5ccd1;
+  color: #242323;
+}
+.jfcl-pill.jfcl-pill--red {
+  background-color: #ba4300;
+  color: #faf8f4;
+}
+.jfcl-pill.jfcl-pill--blue {
+  background-color: #c6d8ff;
+  color: #242323;
+}
+.jfcl-pill.jfcl-pill--green {
+  background-color: #1aa551;
+  color: #faf8f4;
+}
+.jfcl-pill.jfcl-pill--pink {
+  background-color: #ffa0c7;
+  color: #242323;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .jfcl-radio-button {
   margin-bottom: 1rem;
   color: #242323;
@@ -599,7 +1235,7 @@
   display: none;
 }
 .jfcl-radio-button .jfcl-radio-button__checkmark.jfcl-radio-button__checkmark--is-invalid {
-  border-color: #ff813a;
+  border-color: #ba4300;
 }
 .jfcl-radio-button .jfcl-radio-button__input:hover + .jfcl-radio-button__label .jfcl-radio-button__checkmark:not(.jfcl-radio-button__checkmark--is-invalid) {
   border-color: #676565;
@@ -761,6 +1397,6 @@
   color: #676565;
 }
 .jfcl-text-input.jfcl-text-input--is-invalid .jfcl-text-input__input {
-  border: 1.5px solid #ff813a;
+  border: 1.5px solid #ba4300;
   padding-left: 8.5px;
 }