@bloom-housing/ui-components 10.0.14 → 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/dist/src/text/Description.d.ts

@@ -1,8 +1,9 @@
+import * as React from "react";
 import "./Description.scss";
 import { MarkdownToJSX } from "markdown-to-jsx";
 export interface DescriptionProps {
     term: string;
-    description: any;
+    description: string | React.ReactNode;
     dtClassName?: string;
     markdown?: boolean;
     markdownProps?: MarkdownToJSX.Options;

package/dist/src/text/Description.js.map

@@ -1 +1 @@
-{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../../src/text/Description.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,QAA2B,MAAM,iBAAiB,CAAA;AAUzD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;IACjD,IAAM,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,IAAI,KAAK,CAAC,WAAW;QAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAExD,OAAO,CACL;QACE,4BAAI,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAC,IAAI,CAAM;QACnD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,4BAAI,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,oBAAC,QAAQ,IACP,OAAO,aAAI,qBAAqB,EAAE,IAAI,IAAK,KAAK,CAAC,aAAa,GAC9D,QAAQ,EAAE,KAAK,CAAC,WAAW,GAC3B,CACC,CACN,CAAC,CAAC,CAAC,CACF,4BAAI,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,KAAK,CAAC,WAAW,CAAM,CAC7D,CACA,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Description.js","sourceRoot":"","sources":["../../../src/text/Description.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,QAA2B,MAAM,iBAAiB,CAAA;AAUzD,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;IACjD,IAAM,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAA;IACvC,IAAI,KAAK,CAAC,WAAW;QAAE,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAExD,OAAO,CACL;QACE,4BAAI,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAC,IAAI,CAAM;QACnD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,4BAAI,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YAChC,oBAAC,QAAQ,IACP,OAAO,aAAI,qBAAqB,EAAE,IAAI,IAAK,KAAK,CAAC,aAAa,GAC9D,QAAQ,EAAE,KAAK,CAAC,WAAqB,GACrC,CACC,CACN,CAAC,CAAC,CAAC,CACF,4BAAI,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,KAAK,CAAC,WAAW,CAAM,CAC7D,CACA,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/src/text/Description.stories.d.ts

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

package/dist/src/text/Description.stories.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Description } from "./Description";
+import { BADGES } from "../../.storybook/constants";
+export default {
+    title: "Text/Description 🚩",
+    decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+    parameters: {
+        badges: [BADGES.GEN2],
+    },
+};
+export var Default = function () { return (React.createElement("dl", { className: "column-definition-list" },
+    React.createElement(Description, { term: "Title", description: "Description" }),
+    React.createElement(Description, { term: "Title", description: "Description" }),
+    React.createElement(Description, { term: "Title", description: "Description" }),
+    React.createElement(Description, { term: "Title", description: "This last description takes up the full width" }))); };
+export var LongStrings = function () { return (React.createElement("dl", { className: "column-definition-list" },
+    React.createElement(Description, { term: "Natoque penatibus", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu. Porttitor lacus luctus accumsan tortor. Viverra mauris in aliquam sem fringilla. At augue eget arcu dictum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Aliquam vestibulum morbi blandit cursus risus. Tellus at urna condimentum mattis pellentesque id nibh. Interdum consectetur libero id faucibus." }),
+    React.createElement(Description, { term: "Sed vulputate", description: "Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Tristique senectus et netus et malesuada." }),
+    React.createElement(Description, { term: "Quam lacus suspendisse faucibus interdum", description: "Ultrices neque ornare aenean euismod elementum. Tellus elementum sagittis vitae et leo duis. In egestas erat imperdiet sed euismod nisi porta. Nisl purus in mollis nunc sed id semper risus. Ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper auctor. Risus pretium quam vulputate dignissim suspendisse in est ante. Cursus vitae congue mauris rhoncus aenean vel." }),
+    React.createElement(Description, { term: "Auctor", description: "Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim." }))); };
+//# sourceMappingURL=Description.stories.js.map

package/dist/src/text/Description.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Description.stories.js","sourceRoot":"","sources":["../../../src/text/Description.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEnD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;IAClF,UAAU,EAAE;QACV,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,4BAAI,SAAS,EAAC,wBAAwB;IACpC,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,GAAI;IAC1D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,GAAI;IAC1D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,GAAI;IAC1D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,+CAA+C,GAAI,CACzF,CACN,EAP4B,CAO5B,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,4BAAI,SAAS,EAAC,wBAAwB;IACpC,oBAAC,WAAW,IACV,IAAI,EAAE,mBAAmB,EACzB,WAAW,EACT,+iBAA+iB,GAEjjB;IACF,oBAAC,WAAW,IACV,IAAI,EAAE,eAAe,EACrB,WAAW,EACT,iHAAiH,GAEnH;IACF,oBAAC,WAAW,IACV,IAAI,EAAE,0CAA0C,EAChD,WAAW,EACT,qhBAAqhB,GAEvhB;IACF,oBAAC,WAAW,IACV,IAAI,EAAE,QAAQ,EACd,WAAW,EAAE,yEAAyE,GACtF,CACC,CACN,EAzBgC,CAyBhC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "10.0.14",
+  "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/text/Description.scss

@@ -1,61 +1,54 @@
 @import "../global/mixins.scss";
 
-// Description
-.description__title {
-  @apply font-serif;
-  @apply text-xl;
-}
-
-.description__body {
-  @apply mb-4;
-
-  @screen md {
-    padding-top: 0.4em;
-  }
-}
-
-// Data lists
 .column-definition-list {
   @include clearfix;
 
-  @screen md {
-    @apply grid;
+  --title-font-family: var(--bloom-font-serif);
+  --title-font-size-desktop: var(--bloom-font-size-xl);
+  --title-font-size-mobile: var(--bloom-font-size-lg);
+  --title-text-color: var(--bloom-color-gray-800);
+  --body-font-size: var(--bloom-font-size-sm);
+  --border-color: var(--bloom-color-gray-450);
+  --last-row-grid: span 2 / span 2;
+
+  @media (min-width: $screen-md) {
+    display: grid;
     grid-template-columns: 1fr 1fr;
-    @apply gap-x-4;
+    column-gap: var(--bloom-s4);
     grid-row-gap: 0.15rem;
   }
-  
+
   .description__title {
-    @apply text-xl;
-    @apply text-gray-800;
-    @apply mb-3;
+    font-family: var(--title-font-family);
+    font-size: var(--title-font-size-mobile);
+    color: var(--title-text-color);
+    margin-bottom: var(--bloom-s1);
     clear: left;
-    height: max-content;
-    @apply w-full;
-
-    @screen md {
-      @apply pl-4;
-      @apply border-l-2;
-      @apply border-gray-450;
-      @apply float-left;
+    height: auto;
+    width: 100%;
+
+    @media (min-width: $screen-md) {
+      padding-left: var(--bloom-s4);
+      border-left: 2px solid var(--border-color);
+      float: left;
+      margin-bottom: var(--bloom-s3);
+      font-size: var(--title-font-size-desktop);
     }
   }
 
   .description__body {
-    @apply text-sm;
-    @apply mb-5;
-    @apply w-full;
+    font-size: var(--body-font-size);
+    margin-bottom: var(--bloom-s5);
+    width: 100%;
+
+    @media (min-width: $screen-md) {
+      margin-bottom: 0;
+      float: left;
+      padding-top: 0.4em;
 
-    @screen md {
-      @apply mb-0;
-      @apply float-left;
       &:last-of-type {
-        @apply col-span-2;
+        grid-column: var(--last-row-grid);
       }
     }
-
-    &:last-of-type {
-      @apply w-full
-    }
   }
 }

package/src/text/Description.stories.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Description } from "./Description"
+import { BADGES } from "../../.storybook/constants"
+
+export default {
+  title: "Text/Description 🚩",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Default = () => (
+  <dl className="column-definition-list">
+    <Description term={"Title"} description={"Description"} />
+    <Description term={"Title"} description={"Description"} />
+    <Description term={"Title"} description={"Description"} />
+    <Description term={"Title"} description={"This last description takes up the full width"} />
+  </dl>
+)
+
+export const LongStrings = () => (
+  <dl className="column-definition-list">
+    <Description
+      term={"Natoque penatibus"}
+      description={
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo a diam sollicitudin tempor id eu. Porttitor lacus luctus accumsan tortor. Viverra mauris in aliquam sem fringilla. At augue eget arcu dictum. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Aliquam vestibulum morbi blandit cursus risus. Tellus at urna condimentum mattis pellentesque id nibh. Interdum consectetur libero id faucibus."
+      }
+    />
+    <Description
+      term={"Sed vulputate"}
+      description={
+        "Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Tristique senectus et netus et malesuada."
+      }
+    />
+    <Description
+      term={"Quam lacus suspendisse faucibus interdum"}
+      description={
+        "Ultrices neque ornare aenean euismod elementum. Tellus elementum sagittis vitae et leo duis. In egestas erat imperdiet sed euismod nisi porta. Nisl purus in mollis nunc sed id semper risus. Ac turpis egestas sed tempus urna et pharetra pharetra. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper auctor. Risus pretium quam vulputate dignissim suspendisse in est ante. Cursus vitae congue mauris rhoncus aenean vel."
+      }
+    />
+    <Description
+      term={"Auctor"}
+      description={"Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim."}
+    />
+  </dl>
+)

package/src/text/Description.tsx

@@ -4,7 +4,7 @@ import Markdown, { MarkdownToJSX } from "markdown-to-jsx"
 
 export interface DescriptionProps {
   term: string
-  description: any
+  description: string | React.ReactNode
   dtClassName?: string
   markdown?: boolean
   markdownProps?: MarkdownToJSX.Options
@@ -21,7 +21,7 @@ export const Description = (props: DescriptionProps) => {
         <dd className={dtClasses.join(" ")}>
           <Markdown
             options={{ disableParsingRawHTML: true, ...props.markdownProps }}
-            children={props.description}
+            children={props.description as string}
           />
         </dd>
       ) : (

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