@bloom-housing/ui-components 5.1.1-alpha.25 → 5.1.1-alpha.27

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.27](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.26...@bloom-housing/ui-components@5.1.1-alpha.27) (2022-09-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.25...@bloom-housing/ui-components@5.1.1-alpha.26) (2022-09-16)
+
+
+### Bug Fixes
+
+* updated css class naming ([#483](https://github.com/bloom-housing/bloom/issues/483)) ([#3073](https://github.com/bloom-housing/bloom/issues/3073)) ([bfd68de](https://github.com/bloom-housing/bloom/commit/bfd68de406b1785676e6453afd1536159096d080))
+
+
+
+
+
 ## [5.1.1-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.24...@bloom-housing/ui-components@5.1.1-alpha.25) (2022-09-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.25",
+  "version": "5.1.1-alpha.27",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "102d800f5cefa5d6e2f49108b87e8d704a9b5f1e"
+  "gitHead": "0d2c0044506b3d858bf077ce9d85b2ee400c4557"
 }

package/src/forms/Dropzone.scss

@@ -15,3 +15,10 @@
 .dropzone__progress {
   max-width: 250px;
 }
+
+.dropzone__helptext {
+  margin-block: var(--bloom-s2) var(--bloom-s4);
+  color: var(--bloom-color-gray-700);
+  font-family: var(--bloom-font-alt-sans);
+  font-size: var(--bloom-font-size-sm);
+}

package/src/forms/Dropzone.tsx

@@ -11,6 +11,7 @@ interface DropzoneProps {
   accept?: string | string[]
   progress?: number
   className?: string
+  maxFiles?: number
   strings?: {
     chooseFromFolder?: string
     dragHere?: string
@@ -24,6 +25,8 @@ const Dropzone = (props: DropzoneProps) => {
   const classNames = ["field"]
   if (props.className) classNames.push(props.className)
 
+  const maxFiles = props.maxFiles || 1
+
   const onDrop = useCallback(
     (acceptedFiles) => {
       acceptedFiles.forEach((file: File) => uploader(file))
@@ -33,7 +36,8 @@ const Dropzone = (props: DropzoneProps) => {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: props.accept,
-    maxFiles: 1,
+    maxFiles: maxFiles > 1 ? maxFiles : undefined,
+    multiple: maxFiles > 1,
   })
 
   const dropzoneClasses = ["dropzone", "control"]
@@ -48,7 +52,7 @@ const Dropzone = (props: DropzoneProps) => {
       <label htmlFor={props.id} className="label">
         {props.label}
       </label>
-      {props.helptext && <p className="view-item__label mt-2 mb-4">{props.helptext}</p>}
+      {props.helptext && <p className="dropzone__helptext">{props.helptext}</p>}
       {props.progress && props.progress === 100 ? (
         <></>
       ) : props.progress && props.progress > 0 ? (

package/src/page_components/ApplicationTimeline.scss

@@ -4,13 +4,13 @@
 }
 
 .application-timeline {
-  .progress-nav__item {
+  .progress-nav__dot-item {
     @apply pt-0;
 
     text-transform: unset;
 
     .absolute {
-      margin-top: 0.45rem;
+      margin-top: 0.25rem;
       z-index: 2;
       margin-left: -0.4rem;
     }
@@ -20,17 +20,17 @@
     }
   }
 
-  .progress-nav__item.is-active::before,
-  .progress-nav__item.is-disabled::before {
+  .progress-nav__dot-item.is-active::before,
+  .progress-nav__dot-item.is-disabled::before {
     height: 2rem;
     width: 2rem;
   }
 
-  .progress-nav__item.is-active::before {
+  .progress-nav__dot-item.is-active::before {
     @apply bg-green-700;
   }
 
-  .progress-nav__item::after {
+  .progress-nav__dot-item::after {
     top: 1rem;
   }
 }

package/src/page_components/ApplicationTimeline.tsx

@@ -16,7 +16,7 @@ const ApplicationTimeline = (props: ApplicationTimelineProps) => (
     className="progress-nav application-timeline"
     aria-label="Steps of processing your application"
   >
-    <li className="progress-nav__item is-active" aria-current="step">
+    <li className="progress-nav__dot-item is-active" aria-current="step">
       <span className="text-white absolute">
         <Icon symbol="check" size="base" />
       </span>
@@ -25,13 +25,13 @@ const ApplicationTimeline = (props: ApplicationTimelineProps) => (
           t("application.review.confirmation.applicationReceived")}
       </Markdown>
     </li>
-    <li className="progress-nav__item is-disabled">
+    <li className="progress-nav__dot-item is-disabled">
       <Markdown options={{ disableParsingRawHTML: true }}>
         {props.strings?.applicationsClosed ??
           t("application.review.confirmation.applicationsClosed")}
       </Markdown>
     </li>
-    <li className="progress-nav__item is-disabled">
+    <li className="progress-nav__dot-item is-disabled">
       <Markdown options={{ disableParsingRawHTML: true }}>
         {props.strings?.applicationsRanked ??
           t("application.review.confirmation.applicationsRanked")}