@bloom-housing/ui-components 8.0.1 → 8.0.3

package/dist/src/page_components/listing/listing_sidebar/Contact.d.ts

@@ -23,6 +23,8 @@ export interface ContactProps {
     contactPhoneNumberNote?: string;
     /** The contact's title */
     contactTitle?: string;
+    /** Classnames to style the contact's title */
+    contactTitleClassname?: string;
     /** The text for the section's header */
     sectionTitle: string;
     strings: {
@@ -32,5 +34,5 @@ export interface ContactProps {
     };
 }
 /** Displays information about a contact, including their address, contact information, and notes */
-declare const Contact: ({ additionalInformation, contactAddress, contactCompany, contactEmail, contactName, contactPhoneNumber, contactPhoneNumberNote, contactTitle, sectionTitle, strings, }: ContactProps) => JSX.Element;
+declare const Contact: ({ additionalInformation, contactAddress, contactCompany, contactEmail, contactName, contactPhoneNumber, contactPhoneNumberNote, contactTitle, contactTitleClassname, sectionTitle, strings, }: ContactProps) => JSX.Element;
 export { Contact as default, Contact };

package/dist/src/page_components/listing/listing_sidebar/Contact.js

@@ -4,17 +4,20 @@ import { Icon, IconFillColors } from "../../../icons/Icon";
 import { Heading } from "../../../text/Heading";
 /** Displays information about a contact, including their address, contact information, and notes */
 var Contact = function (_a) {
-    var additionalInformation = _a.additionalInformation, contactAddress = _a.contactAddress, contactCompany = _a.contactCompany, contactEmail = _a.contactEmail, contactName = _a.contactName, contactPhoneNumber = _a.contactPhoneNumber, contactPhoneNumberNote = _a.contactPhoneNumberNote, contactTitle = _a.contactTitle, sectionTitle = _a.sectionTitle, strings = _a.strings;
+    var additionalInformation = _a.additionalInformation, contactAddress = _a.contactAddress, contactCompany = _a.contactCompany, contactEmail = _a.contactEmail, contactName = _a.contactName, contactPhoneNumber = _a.contactPhoneNumber, contactPhoneNumberNote = _a.contactPhoneNumberNote, contactTitle = _a.contactTitle, contactTitleClassname = _a.contactTitleClassname, sectionTitle = _a.sectionTitle, strings = _a.strings;
     var formattedPhoneLink = contactPhoneNumber
         ? "tel:".concat(contactPhoneNumber.replace(/[-()]/g, ""))
         : undefined;
     var formattedCompanyWebsite = (contactCompany === null || contactCompany === void 0 ? void 0 : contactCompany.website) && !(contactCompany === null || contactCompany === void 0 ? void 0 : contactCompany.website.startsWith("http"))
         ? "http://".concat(contactCompany === null || contactCompany === void 0 ? void 0 : contactCompany.website)
         : contactCompany === null || contactCompany === void 0 ? void 0 : contactCompany.website;
+    var contactTitleClasses = ["text-gray-700"];
+    if (contactTitleClassname)
+        contactTitleClasses.push(contactTitleClassname);
     return (React.createElement("section", { className: "aside-block" },
         React.createElement(Heading, { priority: 4, styleType: "underlineWeighted" }, sectionTitle),
         contactName && React.createElement("p", { className: "text-xl" }, contactName),
-        contactTitle && React.createElement("p", { className: "text-gray-700" }, contactTitle),
+        contactTitle && React.createElement("p", { className: contactTitleClasses.join(" ") }, contactTitle),
         (contactCompany === null || contactCompany === void 0 ? void 0 : contactCompany.name) && React.createElement("p", { className: "text-gray-700" }, contactCompany.name),
         contactPhoneNumber && (React.createElement(React.Fragment, null,
             React.createElement("p", { className: "mt-3" },

package/dist/src/page_components/listing/listing_sidebar/Contact.js.map

@@ -1 +1 @@
-{"version":3,"file":"Contact.js","sourceRoot":"","sources":["../../../../../src/page_components/listing/listing_sidebar/Contact.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Contact.js","sourceRoot":"","sources":["../../../../../src/page_components/listing/listing_sidebar/Contact.tsx"],"names":[],"mappings":"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"}

package/dist/src/page_components/listing/listing_sidebar/Contact.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: ({ additionalInformation, contactAddress, contactCompany, contactEmail, contactName, contactPhoneNumber, contactPhoneNumberNote, contactTitle, sectionTitle, strings, }: import("./Contact").ContactProps) => JSX.Element;
+    component: ({ additionalInformation, contactAddress, contactCompany, contactEmail, contactName, contactPhoneNumber, contactPhoneNumberNote, contactTitle, contactTitleClassname, sectionTitle, strings, }: import("./Contact").ContactProps) => JSX.Element;
 };
 export default _default;
 export declare const NoAddress: () => JSX.Element;

package/dist/src/text/Description.js

@@ -17,8 +17,8 @@ export var Description = function (props) {
     if (props.dtClassName)
         dtClasses.push(props.dtClassName);
     return (React.createElement(React.Fragment, null,
-        React.createElement("dd", { className: "description__title" }, props.term),
-        props.markdown ? (React.createElement("dt", { className: dtClasses.join(" ") },
-            React.createElement(Markdown, { options: __assign({ disableParsingRawHTML: true }, props.markdownProps), children: props.description }))) : (React.createElement("dt", { className: dtClasses.join(" ") }, props.description))));
+        React.createElement("dt", { className: "description__title" }, props.term),
+        props.markdown ? (React.createElement("dd", { className: dtClasses.join(" ") },
+            React.createElement(Markdown, { options: __assign({ disableParsingRawHTML: true }, props.markdownProps), children: props.description }))) : (React.createElement("dd", { className: dtClasses.join(" ") }, props.description))));
 };
 //# sourceMappingURL=Description.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "8.0.1",
+  "version": "8.0.3",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",

package/src/navigation/ProgressNav.scss

@@ -35,7 +35,7 @@
   text-align: center;
   text-transform: var(--dot-text-transform);
   display: table-cell;
-  white-space: nowrap;
+  white-space: normal;
   float: none;
   @media (min-width: $screen-md) {
     font-size: var(--dot-font-size-desktop);
@@ -120,7 +120,7 @@
   padding-left: var(--bar-label-padding-left);
   position: relative;
   display: table-cell;
-  white-space: nowrap;
+  white-space: normal;
   float: none;
   max-width: 20%;
   border-top-width: var(--bar-height);

package/src/page_components/listing/listing_sidebar/Contact.tsx

@@ -21,6 +21,8 @@ export interface ContactProps {
   contactPhoneNumberNote?: string
   /** The contact's title */
   contactTitle?: string
+  /** Classnames to style the contact's title */
+  contactTitleClassname?: string
   /** The text for the section's header */
   sectionTitle: string
   strings: { email?: string; getDirections: string; website?: string }
@@ -36,6 +38,7 @@ const Contact = ({
   contactPhoneNumber,
   contactPhoneNumberNote,
   contactTitle,
+  contactTitleClassname,
   sectionTitle,
   strings,
 }: ContactProps) => {
@@ -46,6 +49,8 @@ const Contact = ({
     contactCompany?.website && !contactCompany?.website.startsWith("http")
       ? `http://${contactCompany?.website}`
       : contactCompany?.website
+  const contactTitleClasses = ["text-gray-700"]
+  if (contactTitleClassname) contactTitleClasses.push(contactTitleClassname)
 
   return (
     <section className="aside-block">
@@ -54,7 +59,7 @@ const Contact = ({
       </Heading>
 
       {contactName && <p className="text-xl">{contactName}</p>}
-      {contactTitle && <p className="text-gray-700">{contactTitle}</p>}
+      {contactTitle && <p className={contactTitleClasses.join(" ")}>{contactTitle}</p>}
       {contactCompany?.name && <p className="text-gray-700">{contactCompany.name}</p>}
 
       {contactPhoneNumber && (

package/src/text/Description.scss

@@ -18,35 +18,44 @@
 .column-definition-list {
   @include clearfix;
 
+  @screen md {
+    @apply grid;
+    grid-template-columns: 1fr 1fr;
+    @apply gap-x-4;
+    grid-row-gap: 0.15rem;
+  }
+  
   .description__title {
     @apply text-xl;
     @apply text-gray-800;
     @apply mb-3;
     clear: left;
+    height: max-content;
+    @apply w-full;
 
     @screen md {
       @apply pl-4;
       @apply border-l-2;
       @apply border-gray-450;
       @apply float-left;
-      @apply w-1/3;
-      @apply pr-3;
-      margin-top: 0.15rem;
     }
   }
 
   .description__body {
     @apply text-sm;
     @apply mb-5;
+    @apply w-full;
 
     @screen md {
       @apply mb-0;
       @apply float-left;
-      @apply w-2/3;
+      &:last-of-type {
+        @apply col-span-2;
+      }
     }
 
     &:last-of-type {
-      @apply w-full;
+      @apply w-full
     }
   }
 }

package/src/text/Description.tsx

@@ -16,16 +16,16 @@ export const Description = (props: DescriptionProps) => {
 
   return (
     <>
-      <dd className="description__title">{props.term}</dd>
+      <dt className="description__title">{props.term}</dt>
       {props.markdown ? (
-        <dt className={dtClasses.join(" ")}>
+        <dd className={dtClasses.join(" ")}>
           <Markdown
             options={{ disableParsingRawHTML: true, ...props.markdownProps }}
             children={props.description}
           />
-        </dt>
+        </dd>
       ) : (
-        <dt className={dtClasses.join(" ")}>{props.description}</dt>
+        <dd className={dtClasses.join(" ")}>{props.description}</dd>
       )}
     </>
   )