@bloom-housing/ui-components 10.0.15 → 10.0.16

package/dist/src/page_components/listing/ListingDetailHeader.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import "./ListingDetailHeader.scss";
 export interface ListingDetailHeaderProps {
     imageAlt: string;
     imageSrc: string;

package/dist/src/page_components/listing/ListingDetailHeader.js

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { Icon } from "../../icons/Icon";
-var ListingDetailHeader = function (props) { return (React.createElement("header", { className: props.hideHeader ? "detail-header md:hidden" : "detail-header" },
-    React.createElement("img", { alt: props.imageAlt, className: "detail-header__image ", src: props.imageSrc }),
+import "./ListingDetailHeader.scss";
+var ListingDetailHeader = function (props) { return (React.createElement("header", { className: "detail-header ".concat(props.hideHeader ? "md:hidden" : "") },
+    React.createElement("span", { className: "detail-header__image-container" },
+        React.createElement("img", { alt: props.imageAlt, className: "detail-header__image ", src: props.imageSrc })),
     React.createElement("hgroup", { className: "detail-header__hgroup" },
         React.createElement("h2", { className: "detail-header__title" }, props.title),
         React.createElement("span", { className: "detail-header__subtitle" }, props.subtitle),

package/dist/src/page_components/listing/ListingDetailHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingDetailHeader.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetailHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAYvC,IAAM,mBAAmB,GAAG,UAAC,KAA+B,IAAK,OAAA,CAC/D,gCAAQ,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,eAAe;IAC/E,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,GAAI;IACnF,gCAAQ,SAAS,EAAC,uBAAuB;QACvC,4BAAI,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,KAAK,CAAM;QACvD,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAC,QAAQ,CAAQ;QACjE,oBAAC,IAAI,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,GAAG,CAClC,CACF,CACV,EATgE,CAShE,CAAA;AAED,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"ListingDetailHeader.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetailHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,OAAO,4BAA4B,CAAA;AAYnC,IAAM,mBAAmB,GAAG,UAAC,KAA+B,IAAK,OAAA,CAC/D,gCAAQ,SAAS,EAAE,wBAAiB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAE;IACvE,8BAAM,SAAS,EAAE,gCAAgC;QAC/C,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC9E;IACP,gCAAQ,SAAS,EAAC,uBAAuB;QACvC,4BAAI,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,KAAK,CAAM;QACvD,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAC,QAAQ,CAAQ;QACjE,oBAAC,IAAI,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,GAAG,CAClC,CACF,CACV,EAXgE,CAWhE,CAAA;AAED,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/src/page_components/listing/ListingDetailHeader.stories.d.ts

@@ -0,0 +1,9 @@
+import { BADGES } from "../../../.storybook/constants";
+declare const _default: {
+    title: string;
+    parameters: {
+        badges: BADGES[];
+    };
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/src/page_components/listing/ListingDetailHeader.stories.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { BADGES } from "../../../.storybook/constants";
+import { ListingDetailHeader } from "./ListingDetailHeader";
+export default {
+    title: "Listing/ListingDetailHeader 🚩",
+    parameters: {
+        badges: [BADGES.GEN2],
+    },
+};
+export var Default = function () {
+    return (React.createElement("div", { style: { maxWidth: "500px" } },
+        React.createElement(ListingDetailHeader, { imageAlt: "Building", imageSrc: "https://res.cloudinary.com/exygy/image/upload/w_400,c_limit,q_65/dev/listing-eligibility_advdnd.jpg", title: "Title", subtitle: "Subtitle" })));
+};
+//# sourceMappingURL=ListingDetailHeader.stories.js.map

package/dist/src/page_components/listing/ListingDetailHeader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListingDetailHeader.stories.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetailHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;QAC/B,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAC,qGAAqG,EAC9G,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,UAAU,GACpB,CACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/src/page_components/listing/ListingDetails.d.ts

@@ -1,3 +1,4 @@
 import { ListingDetailHeaderProps } from "./ListingDetailHeader";
+import "./ListingDetails.scss";
 export declare const ListingDetails: (props: any) => JSX.Element;
 export declare const ListingDetailItem: (props: ListingDetailHeaderProps) => JSX.Element;

package/dist/src/page_components/listing/ListingDetails.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { ResponsiveContentList, ResponsiveContentItem, ResponsiveContentItemHeader, ResponsiveContentItemBody, } from "../../sections/ResponsiveContentList";
 import { ListingDetailHeader } from "./ListingDetailHeader";
-export var ListingDetails = function (props) { return (React.createElement("div", { className: "w-full md:w-2/3 md:pr-8 md:pt-8" },
+import "./ListingDetails.scss";
+export var ListingDetails = function (props) { return (React.createElement("div", { className: "details" },
     React.createElement(ResponsiveContentList, null, props.children))); };
 export var ListingDetailItem = function (props) { return (React.createElement(ResponsiveContentItem, { desktopClass: props.desktopClass },
     React.createElement(ResponsiveContentItemHeader, null,

package/dist/src/page_components/listing/ListingDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingDetails.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAA4B,MAAM,uBAAuB,CAAA;AAErF,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAU,IAAK,OAAA,CAC5C,6BAAK,SAAS,EAAC,iCAAiC;IAC9C,oBAAC,qBAAqB,QAAE,KAAK,CAAC,QAAQ,CAAyB,CAC3D,CACP,EAJ6C,CAI7C,CAAA;AAED,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAA+B,IAAK,OAAA,CACpE,oBAAC,qBAAqB,IAAC,YAAY,EAAE,KAAK,CAAC,YAAY;IACrD,oBAAC,2BAA2B;QAC1B,oBAAC,mBAAmB,IAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,GAC5B,CAC0B;IAC9B,oBAAC,yBAAyB,QAAE,KAAK,CAAC,QAAQ,CAA6B,CACjD,CACzB,EAbqE,CAarE,CAAA"}
+{"version":3,"file":"ListingDetails.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAA4B,MAAM,uBAAuB,CAAA;AACrF,OAAO,uBAAuB,CAAA;AAE9B,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAU,IAAK,OAAA,CAC5C,6BAAK,SAAS,EAAC,SAAS;IACtB,oBAAC,qBAAqB,QAAE,KAAK,CAAC,QAAQ,CAAyB,CAC3D,CACP,EAJ6C,CAI7C,CAAA;AAED,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAA+B,IAAK,OAAA,CACpE,oBAAC,qBAAqB,IAAC,YAAY,EAAE,KAAK,CAAC,YAAY;IACrD,oBAAC,2BAA2B;QAC1B,oBAAC,mBAAmB,IAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,GAC5B,CAC0B;IAC9B,oBAAC,yBAAyB,QAAE,KAAK,CAAC,QAAQ,CAA6B,CACjD,CACzB,EAbqE,CAarE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "10.0.15",
+  "version": "10.0.16",
   "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/global/app-css.scss

@@ -54,7 +54,6 @@ main {
 @import "mixins.scss";
 @import "markdown.scss";
 @import "text.scss";
-@import "headers.scss";
 @import "blocks.scss";
 @import "accordion.scss";
 @import "accessibility.scss";

package/src/page_components/listing/ContentAccordion.scss

@@ -32,3 +32,9 @@
 .accordion-gray-theme__bar.accordion-open {
   border-radius: 8px 8px 0px 0px;
 }
+
+.toggle-header-content {
+  @apply font-sans;
+  @apply text-sm;
+  @apply text-gray-800;
+}

package/src/page_components/listing/ListingDetailHeader.scss

@@ -0,0 +1,97 @@
+.detail-header {
+  --text-color: var(--bloom-color-primary-darker);
+  --subtitle-desktop-font-size: var(--bloom-font-size-sm);
+  --subtitle-mobile-font-size: var(--bloom-font-size-sm);
+  --title-desktop-font-size: var(--bloom-font-size-2xl);
+  --title-mobile-font-size: var(--bloom-font-size-sm);
+  --title-desktop-font-family: var(--bloom-font-serif);
+  --title-mobile-font-family: var(--bloom-font-alt-sans);
+  position: relative;
+  padding: var(--bloom-s4) var(--bloom-s4) var(--bloom-s6) var(--bloom-s4);
+  border-bottom: 1px solid var(--bloom-color-gray-400);
+  color: var(--text-color);
+  display: flex;
+  justify-content: start;
+
+  @media (min-width: $screen-md) {
+    padding-top: 0;
+    padding-bottom: var(--bloom-s8);
+    border: none;
+    color: var(--bloom-color-gray-800);
+  }
+}
+
+.detail-header__image {
+  position: absolute;
+  width: var(--bloom-s12);
+  margin-right: var(--bloom-s2);
+  margin-left: 0;
+
+  @media (min-width: $screen-md) {
+    left: 0;
+  }
+}
+
+.detail-header__image-container {
+  width: auto;
+  [dir="rtl"] & {
+    width: var(--bloom-s14);
+  }
+}
+
+.detail-header__hgroup {
+  margin-left: var(--bloom-s12);
+  padding-left: var(--bloom-s4);
+
+  @media (min-width: $screen-md) {
+    border-left: 2px solid var(--bloom-color-primary);
+  }
+
+  [dir="rtl"] & {
+    margin-right: var(--bloom-s4);
+  }
+
+  .ui-icon {
+    position: absolute;
+    top: var(--bloom-s4);
+    right: var(--bloom-s4);
+
+    [dir="rtl"] & {
+      left: var(--bloom-s4);
+      right: auto;
+    }
+
+    @media (min-width: $screen-md) {
+      display: none;
+    }
+
+    svg {
+      width: var(--bloom-s3);
+      height: var(--bloom-s3);
+    }
+  }
+}
+
+.detail-header__title {
+  font-family: var(--title-mobile-font-family);
+  text-transform: uppercase;
+  font-size: var(--title-mobile-font-size);
+  letter-spacing: 0.1rem;
+  color: var(--text-color);
+  @media (min-width: $screen-md) {
+    font-family: var(--title-desktop-font-family);
+    font-size: var(--title-desktop-font-size);
+    text-transform: none;
+    letter-spacing: 0rem;
+    color: var(--bloom-color-gray-950);
+  }
+}
+
+.detail-header__subtitle {
+  font-size: var(--subtitle-mobile-font-size);
+
+  @media (min-width: $screen-md) {
+    color: var(--bloom-color-gray-800);
+    font-size: var(--subtitle-desktop-font-size);
+  }
+}

package/src/page_components/listing/ListingDetailHeader.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { BADGES } from "../../../.storybook/constants"
+
+import { ListingDetailHeader } from "./ListingDetailHeader"
+
+export default {
+  title: "Listing/ListingDetailHeader 🚩",
+  parameters: {
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => {
+  return (
+    <div style={{ maxWidth: "500px" }}>
+      <ListingDetailHeader
+        imageAlt={"Building"}
+        imageSrc="https://res.cloudinary.com/exygy/image/upload/w_400,c_limit,q_65/dev/listing-eligibility_advdnd.jpg"
+        title={"Title"}
+        subtitle={"Subtitle"}
+      />
+    </div>
+  )
+}

package/src/page_components/listing/ListingDetailHeader.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { Icon } from "../../icons/Icon"
+import "./ListingDetailHeader.scss"
 
 export interface ListingDetailHeaderProps {
   imageAlt: string
@@ -12,8 +13,10 @@ export interface ListingDetailHeaderProps {
 }
 
 const ListingDetailHeader = (props: ListingDetailHeaderProps) => (
-  <header className={props.hideHeader ? "detail-header md:hidden" : "detail-header"}>
-    <img alt={props.imageAlt} className="detail-header__image " src={props.imageSrc} />
+  <header className={`detail-header ${props.hideHeader ? "md:hidden" : ""}`}>
+    <span className={"detail-header__image-container"}>
+      <img alt={props.imageAlt} className="detail-header__image " src={props.imageSrc} />
+    </span>
     <hgroup className="detail-header__hgroup">
       <h2 className="detail-header__title">{props.title}</h2>
       <span className="detail-header__subtitle">{props.subtitle}</span>

package/src/page_components/listing/ListingDetails.scss

@@ -0,0 +1,11 @@
+.details {
+  --desktop-width: calc(100% * (2 / 3));
+  --mobile-width: 100%;
+
+  width: var(--mobile-width);
+  @media (min-width: $screen-md) {
+    width: var(--desktop-width);
+    padding-right: var(--bloom-s8);
+    padding-top: var(--bloom-s8);
+  }
+}

package/src/page_components/listing/ListingDetails.tsx

@@ -6,9 +6,10 @@ import {
   ResponsiveContentItemBody,
 } from "../../sections/ResponsiveContentList"
 import { ListingDetailHeader, ListingDetailHeaderProps } from "./ListingDetailHeader"
+import "./ListingDetails.scss"
 
 export const ListingDetails = (props: any) => (
-  <div className="w-full md:w-2/3 md:pr-8 md:pt-8">
+  <div className="details">
     <ResponsiveContentList>{props.children}</ResponsiveContentList>
   </div>
 )

package/src/global/headers.scss

@@ -1,93 +0,0 @@
-// Listing Detail
-.detail-header {
-  @apply relative;
-  @apply pr-4;
-  @apply pb-6;
-  @apply pl-4;
-  @apply pt-4;
-  @apply border-b;
-  @apply border-gray-400;
-  @apply text-primary-darker;
-
-  @screen md {
-    @apply pt-0;
-    @apply pb-8;
-    @apply text-xs;
-    @apply border-none;
-    @apply text-gray-800;
-  }
-}
-
-.detail-header__image {
-  @apply absolute;
-  @apply w-12;
-  @apply mr-2;
-
-  @screen md {
-    @apply left-0;
-  }
-}
-
-.detail-header__hgroup {
-  @apply ml-12;
-  @apply pl-4;
-
-  @screen md {
-    @apply border-l-2;
-    @apply border-primary;
-  }
-
-  .ui-icon {
-    @apply absolute;
-    top: 1rem;
-    right: 1rem;
-
-    @screen md {
-      @apply hidden;
-    }
-
-    svg {
-      @apply w-3;
-      @apply h-3;
-    }
-  }
-}
-
-.detail-header__title {
-  @apply font-alt-sans;
-  @apply uppercase;
-  @apply text-sm;
-  @apply tracking-widest;
-  @apply text-primary-darker;
-
-  @screen md {
-    @apply text-black;
-    @apply font-serif;
-    @apply text-2xl;
-    @apply normal-case;
-    @apply tracking-normal;
-    @apply text-gray-950;
-  }
-}
-
-.detail-header__subtitle {
-  @apply text-sm;
-
-  @screen md {
-    @apply text-gray-750;
-  }
-}
-
-.toggle-header {
-  @apply bg-primary-light;
-  @apply p-4;
-  @apply border-b;
-  @apply border-primary;
-  display: flex;
-  justify-content: space-between;
-}
-.toggle-header-content {
-  @apply font-sans;
-  @apply text-sm;
-  @apply text-gray-800;
-}