@bloom-housing/ui-components 10.0.15 → 11.0.0

package/dist/__tests__/blocks/FormCard.test.js

@@ -1,13 +1,11 @@
 import React from "react";
 import { render, cleanup } from "@testing-library/react";
 import { FormCard } from "../../src/blocks/FormCard";
+import Heading from "../../src/text/Heading";
 afterEach(cleanup);
 describe("<FormCard>", function () {
     it("can render with a header", function () {
-        var getByText = render(React.createElement(FormCard, { header: {
-                isVisible: true,
-                title: "Header Text",
-            } }, "Children go here")).getByText;
+        var getByText = render(React.createElement(FormCard, { header: React.createElement(Heading, null, "Header Text") }, "Children go here")).getByText;
         expect(getByText("Header Text")).not.toBeNull();
     });
     it("can apply a custom class", function () {

package/dist/__tests__/blocks/FormCard.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCard.test.js","sourceRoot":"","sources":["../../../__tests__/blocks/FormCard.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAEpD,SAAS,CAAC,OAAO,CAAC,CAAA;AAElB,QAAQ,CAAC,YAAY,EAAE;IACrB,EAAE,CAAC,0BAA0B,EAAE;QACrB,IAAA,SAAS,GAAK,MAAM,CAC1B,oBAAC,QAAQ,IACP,MAAM,EAAE;gBACN,SAAS,EAAE,IAAI;gBACf,KAAK,EAAE,aAAa;aACrB,uBAGQ,CACZ,UATgB,CAShB;QACD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;IACjD,CAAC,CAAC,CAAA;IACF,EAAE,CAAC,0BAA0B,EAAE;QACrB,IAAA,SAAS,GAAK,MAAM,CAAC,oBAAC,QAAQ,IAAC,SAAS,EAAE,cAAc,uBAA6B,CAAC,UAA7E,CAA6E;QAC9F,MAAM,CAAC,SAAS,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACzE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"FormCard.test.js","sourceRoot":"","sources":["../../../__tests__/blocks/FormCard.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAE5C,SAAS,CAAC,OAAO,CAAC,CAAA;AAElB,QAAQ,CAAC,YAAY,EAAE;IACrB,EAAE,CAAC,0BAA0B,EAAE;QACrB,IAAA,SAAS,GAAK,MAAM,CAC1B,oBAAC,QAAQ,IAAC,MAAM,EAAE,oBAAC,OAAO,sBAAsB,uBAA6B,CAC9E,UAFgB,CAEhB;QACD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;IACjD,CAAC,CAAC,CAAA;IACF,EAAE,CAAC,0BAA0B,EAAE;QACrB,IAAA,SAAS,GAAK,MAAM,CAAC,oBAAC,QAAQ,IAAC,SAAS,EAAE,cAAc,uBAA6B,CAAC,UAA7E,CAA6E;QAC9F,MAAM,CAAC,SAAS,CAAC,sBAAsB,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACzE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/src/blocks/FormCard.d.ts

@@ -1,13 +1,9 @@
 import * as React from "react";
 import "./FormCard.scss";
 export interface FormCardProps {
-    header?: FormCardHeader;
+    header?: React.ReactNode;
     children: React.ReactNode;
     className?: string;
 }
-export interface FormCardHeader {
-    isVisible: boolean;
-    title: string;
-}
 declare const FormCard: (props: FormCardProps) => JSX.Element;
 export { FormCard as default, FormCard };

package/dist/src/blocks/FormCard.js

@@ -1,12 +1,11 @@
 import * as React from "react";
 import "./FormCard.scss";
 var FormCard = function (props) {
-    var _a;
-    var classNames = props.className ? "".concat(props.className, " form-card") : "form-card";
-    if ((_a = props.header) === null || _a === void 0 ? void 0 : _a.isVisible) {
+    var classNames = "form-card ".concat(props.className || "");
+    if (props.header) {
         return (React.createElement("article", { className: classNames },
             React.createElement("div", { className: "form-card__header" },
-                React.createElement("header", { className: "form-card__header_group" }, props.header.title && (React.createElement("h1", { className: "form-card__header_title" }, props.header.title))),
+                React.createElement("header", { className: "form-card__header_group form-card__header_title" }, props.header),
                 React.createElement("div", { className: "form-card__header_nav" }, props.children))));
     }
     return React.createElement("article", { className: classNames }, props.children);

package/dist/src/blocks/FormCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCard.js","sourceRoot":"","sources":["../../../src/blocks/FormCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,iBAAiB,CAAA;AAaxB,IAAM,QAAQ,GAAG,UAAC,KAAoB;;IACpC,IAAM,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,SAAS,eAAY,CAAC,CAAC,CAAC,WAAW,CAAA;IACjF,IAAI,MAAA,KAAK,CAAC,MAAM,0CAAE,SAAS,EAAE;QAC3B,OAAO,CACL,iCAAS,SAAS,EAAE,UAAU;YAC5B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,gCAAQ,SAAS,EAAC,yBAAyB,IACxC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CACrB,4BAAI,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAM,CAClE,CACM;gBAET,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACzD,CACE,CACX,CAAA;KACF;IAED,OAAO,iCAAS,SAAS,EAAE,UAAU,IAAG,KAAK,CAAC,QAAQ,CAAW,CAAA;AACnE,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"FormCard.js","sourceRoot":"","sources":["../../../src/blocks/FormCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,iBAAiB,CAAA;AAQxB,IAAM,QAAQ,GAAG,UAAC,KAAoB;IACpC,IAAM,UAAU,GAAG,oBAAa,KAAK,CAAC,SAAS,IAAI,EAAE,CAAE,CAAA;IACvD,IAAI,KAAK,CAAC,MAAM,EAAE;QAChB,OAAO,CACL,iCAAS,SAAS,EAAE,UAAU;YAC5B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,gCAAQ,SAAS,EAAC,iDAAiD,IAChE,KAAK,CAAC,MAAM,CACN;gBAET,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACzD,CACE,CACX,CAAA;KACF;IAED,OAAO,iCAAS,SAAS,EAAE,UAAU,IAAG,KAAK,CAAC,QAAQ,CAAW,CAAA;AACnE,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/blocks/FormCard.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const defaultCard: () => JSX.Element;
+export declare const noHeader: () => JSX.Element;

package/dist/src/blocks/FormCard.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import FormCard from "./FormCard";
+import Heading from "../text/Heading";
+export default {
+    title: "Blocks/Form Card",
+};
+export var defaultCard = function () { return (React.createElement(FormCard, { header: React.createElement(Heading, { priority: 1 }, "Header") }, "Children")); };
+export var noHeader = function () { return React.createElement(FormCard, null, "Children"); };
+//# sourceMappingURL=FormCard.stories.js.map

package/dist/src/blocks/FormCard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/FormCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,OAAO,MAAM,iBAAiB,CAAA;AACrC,eAAe;IACb,KAAK,EAAE,kBAAkB;CAC1B,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,QAAQ,IAAC,MAAM,EAAE,oBAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,aAAkB,eAAqB,CAC9E,EAFgC,CAEhC,CAAA;AAED,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,oBAAC,QAAQ,mBAAoB,EAA7B,CAA6B,CAAA"}

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": "11.0.0",
   "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/blocks/FormCard.scss

@@ -1,3 +1,5 @@
+@import "../global/mixins.scss";
+
 .form-card {
   @apply bg-white;
 
@@ -70,6 +72,7 @@
 
   @screen print {
     @apply py-2;
+    @apply px-0;
   }
 }
 
@@ -87,11 +90,16 @@
 }
 
 .form-card__group {
-  @apply px-8;
+  @screen md {
+    @apply px-8;
+  }
+
+  @screen print {
+    @apply px-0;
+  }
 }
 
 .form-card__header {
-  @apply text-white;
   @apply text-center;
 
   @screen md {
@@ -100,7 +108,10 @@
 }
 
 .form-card__header_group {
-  @apply flex justify-center items-center;
+  @apply text-white;
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
   @apply bg-primary;
   @apply p-4;
   @apply h-16;
@@ -112,14 +123,14 @@
   @screen print {
     @apply py-0;
   }
-}
 
-.form-card__header_title {
-  @apply text-xl;
-  @apply font-alt-sans;
-  @apply font-bold;
-  @apply uppercase;
-  @apply mb-0;
+  @include headings {
+    @apply text-xl;
+    @apply font-alt-sans;
+    @apply font-bold;
+    @apply uppercase;
+    @apply mb-0;
+  }
 }
 
 .form-card__header_nav {

package/src/blocks/FormCard.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import FormCard from "./FormCard"
+import Heading from "../text/Heading"
+export default {
+  title: "Blocks/Form Card",
+}
+
+export const defaultCard = () => (
+  <FormCard header={<Heading priority={1}>Header</Heading>}>Children</FormCard>
+)
+
+export const noHeader = () => <FormCard>Children</FormCard>

package/src/blocks/FormCard.tsx

@@ -2,26 +2,19 @@ import * as React from "react"
 import "./FormCard.scss"
 
 export interface FormCardProps {
-  header?: FormCardHeader
+  header?: React.ReactNode
   children: React.ReactNode
   className?: string
 }
 
-export interface FormCardHeader {
-  isVisible: boolean
-  title: string
-}
-
 const FormCard = (props: FormCardProps) => {
-  const classNames = props.className ? `${props.className} form-card` : "form-card"
-  if (props.header?.isVisible) {
+  const classNames = `form-card ${props.className || ""}`
+  if (props.header) {
     return (
       <article className={classNames}>
         <div className="form-card__header">
-          <header className="form-card__header_group">
-            {props.header.title && (
-              <h1 className="form-card__header_title">{props.header.title}</h1>
-            )}
+          <header className="form-card__header_group form-card__header_title">
+            {props.header}
           </header>
 
           <div className="form-card__header_nav">{props.children}</div>

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/global/mixins.scss

@@ -199,3 +199,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin headings {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @content;
+  }
+}

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;
-}