@bloom-housing/ui-components 10.0.16 → 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/package.json

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

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