@bloom-housing/ui-components 10.0.14 → 10.0.15

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.15",
   "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/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>
       ) : (