@bloom-housing/ui-components 9.0.3 → 10.0.0

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

@@ -6,7 +6,7 @@ import { AppearanceStyleType } from "../../src/global/AppearanceTypes";
 afterEach(cleanup);
 describe("<ActionBlock>", function () {
     it("can render with header & subheader", function () {
-        var getByText = render(React.createElement(ActionBlock, { header: "My Applications", subheader: "Subheader Text", icon: React.createElement("span", { className: "Action-icon" }), actions: [
+        var getByText = render(React.createElement(ActionBlock, { header: React.createElement("h1", null, "My Applications"), subheader: "Subheader Text", icon: React.createElement("span", { className: "Action-icon" }), actions: [
                 React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.primary, key: "button-1" }, "Action"),
             ] })).getByText;
         expect(getByText("My Applications")).not.toBeNull();
@@ -14,7 +14,7 @@ describe("<ActionBlock>", function () {
         expect(getByText("Action")).not.toBeNull();
     });
     it("subheader is hidden for inline layout", function () {
-        var _a = render(React.createElement(ActionBlock, { header: "My Applications", subheader: "Subheader Text", icon: React.createElement("span", { className: "Action-icon" }), layout: ActionBlockLayout.inline, actions: [
+        var _a = render(React.createElement(ActionBlock, { header: React.createElement("h1", null, "My Applications"), subheader: "Subheader Text", icon: React.createElement("span", { className: "Action-icon" }), layout: ActionBlockLayout.inline, actions: [
                 React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.primary, key: "button-1" }, "Action"),
             ] })), getByText = _a.getByText, container = _a.container;
         expect(getByText("My Applications")).not.toBeNull();

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBlock.test.js","sourceRoot":"","sources":["../../../__tests__/blocks/ActionBlock.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,SAAS,CAAC,OAAO,CAAC,CAAC;AAEnB,QAAQ,CAAC,eAAe,EAAE;IACxB,EAAE,CAAC,oCAAoC,EAAE;QAC/B,IAAA,SAAS,GAAK,MAAM,CAC1B,oBAAC,WAAW,IACV,MAAM,EAAC,iBAAiB,EACxB,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,8BAAM,SAAS,EAAC,aAAa,GAAQ,EAC3C,OAAO,EAAE;gBACP,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB,EACnC,SAAS,EAAE,mBAAmB,CAAC,OAAO,EACtC,GAAG,EAAC,UAAU,aAGP;aACV,GACD,CACH,UAfgB,CAef;QACF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACpD,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACnD,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE;QACpC,IAAA,KAA2B,MAAM,CACrC,oBAAC,WAAW,IACV,MAAM,EAAC,iBAAiB,EACxB,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,8BAAM,SAAS,EAAC,aAAa,GAAQ,EAC3C,MAAM,EAAE,iBAAiB,CAAC,MAAM,EAChC,OAAO,EAAE;gBACP,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB,EACnC,SAAS,EAAE,mBAAmB,CAAC,OAAO,EACtC,GAAG,EAAC,UAAU,aAGP;aACV,GACD,CACH,EAhBO,SAAS,eAAA,EAAE,SAAS,eAgB3B,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACpD,MAAM,CACJ,SAAS,CAAC,sBAAsB,CAAC,yBAAyB,CAAC,CAAC,MAAM,CACnE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACV,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"ActionBlock.test.js","sourceRoot":"","sources":["../../../__tests__/blocks/ActionBlock.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AAEtE,SAAS,CAAC,OAAO,CAAC,CAAA;AAElB,QAAQ,CAAC,eAAe,EAAE;IACxB,EAAE,CAAC,oCAAoC,EAAE;QAC/B,IAAA,SAAS,GAAK,MAAM,CAC1B,oBAAC,WAAW,IACV,MAAM,EAAE,kDAAwB,EAChC,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,8BAAM,SAAS,EAAC,aAAa,GAAQ,EAC3C,OAAO,EAAE;gBACP,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB,EACnC,SAAS,EAAE,mBAAmB,CAAC,OAAO,EACtC,GAAG,EAAC,UAAU,aAGP;aACV,GACD,CACH,UAfgB,CAehB;QACD,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QACnD,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QAClD,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;IAC5C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE;QACpC,IAAA,KAA2B,MAAM,CACrC,oBAAC,WAAW,IACV,MAAM,EAAE,kDAAwB,EAChC,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAE,8BAAM,SAAS,EAAC,aAAa,GAAQ,EAC3C,MAAM,EAAE,iBAAiB,CAAC,MAAM,EAChC,OAAO,EAAE;gBACP,oBAAC,MAAM,IACL,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAApB,CAAoB,EACnC,SAAS,EAAE,mBAAmB,CAAC,OAAO,EACtC,GAAG,EAAC,UAAU,aAGP;aACV,GACD,CACH,EAhBO,SAAS,eAAA,EAAE,SAAS,eAgB3B,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;QACnD,MAAM,CAAC,SAAS,CAAC,sBAAsB,CAAC,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClF,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;IAC5C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/src/actions/ExpandableContent.d.ts

@@ -1,11 +1,16 @@
 import React from "react";
+export declare enum Order {
+    above = "above",
+    below = "below"
+}
 type ExpandableContentProps = {
-    children: React.ReactChild;
+    children: React.ReactNode;
     strings: {
         readMore?: string;
         readLess?: string;
     };
     className?: string;
+    order?: Order;
 };
-declare const ExpandableContent: ({ children, strings, className }: ExpandableContentProps) => JSX.Element;
+declare const ExpandableContent: ({ children, strings, className, order, }: ExpandableContentProps) => JSX.Element;
 export { ExpandableContent as default, ExpandableContent };

package/dist/src/actions/ExpandableContent.js

@@ -1,13 +1,19 @@
 import React, { useState } from "react";
+export var Order;
+(function (Order) {
+    Order["above"] = "above";
+    Order["below"] = "below";
+})(Order || (Order = {}));
 var ExpandableContent = function (_a) {
-    var children = _a.children, strings = _a.strings, className = _a.className;
-    var _b = useState(false), isExpanded = _b[0], setExpanded = _b[1];
+    var children = _a.children, strings = _a.strings, className = _a.className, _b = _a.order, order = _b === void 0 ? Order.above : _b;
+    var _c = useState(false), isExpanded = _c[0], setExpanded = _c[1];
     var rootClassNames = className ? "".concat(className) : undefined;
     return (React.createElement("div", { className: rootClassNames },
-        isExpanded && React.createElement("div", null, children),
+        order === Order.above && React.createElement(React.Fragment, null, isExpanded && React.createElement("div", null, children)),
         React.createElement("button", { type: "button", className: "button is-unstyled m-0 no-underline has-toggle", "aria-expanded": isExpanded, onClick: function () {
                 setExpanded(!isExpanded);
-            } }, isExpanded ? strings.readLess : strings.readMore)));
+            } }, isExpanded ? strings.readLess : strings.readMore),
+        order === Order.below && React.createElement(React.Fragment, null, isExpanded && React.createElement("div", null, children))));
 };
 export { ExpandableContent as default, ExpandableContent };
 //# sourceMappingURL=ExpandableContent.js.map

package/dist/src/actions/ExpandableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAWvC,IAAM,iBAAiB,GAAG,UAAC,EAAwD;QAAtD,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,SAAS,eAAA;IACjD,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,UAAU,QAAA,EAAE,WAAW,QAAmB,CAAA;IACjD,IAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,UAAG,SAAS,CAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAE7D,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc;QAC3B,UAAU,IAAI,iCAAM,QAAQ,CAAO;QACpC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gDAAgD,mBAC3C,UAAU,EACzB,OAAO,EAAE;gBACP,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,CAAC,IAEA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAC1C,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,iBAAiB,IAAI,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"ExpandableContent.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,wBAAe,CAAA;AACjB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAYD,IAAM,iBAAiB,GAAG,UAAC,EAKF;QAJvB,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAmB,EAAnB,KAAK,mBAAG,KAAK,CAAC,KAAK,KAAA;IAEb,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,UAAU,QAAA,EAAE,WAAW,QAAmB,CAAA;IACjD,IAAM,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,UAAG,SAAS,CAAE,CAAC,CAAC,CAAC,SAAS,CAAA;IAE7D,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc;QAC3B,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,0CAAG,UAAU,IAAI,iCAAM,QAAQ,CAAO,CAAI;QACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gDAAgD,mBAC3C,UAAU,EACzB,OAAO,EAAE;gBACP,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,CAAC,IAEA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAC1C;QACR,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,0CAAG,UAAU,IAAI,iCAAM,QAAQ,CAAO,CAAI,CAChE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,iBAAiB,IAAI,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/src/actions/ExpandableContent.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: {
 };
 export default _default;
 export declare const standard: () => JSX.Element;
+export declare const below: () => JSX.Element;

package/dist/src/actions/ExpandableContent.stories.js

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { ExpandableContent } from "./ExpandableContent";
+import { ExpandableContent, Order } from "./ExpandableContent";
 export default {
     title: "Actions/Expandable Content",
 };
 var content = React.createElement("div", { className: "mb-2" }, "Sample Content");
 export var standard = function () { return (React.createElement(ExpandableContent, { strings: { readMore: "read more", readLess: "read less" } }, content)); };
+export var below = function () { return (React.createElement(ExpandableContent, { strings: { readMore: "read more", readLess: "read less" }, order: Order.below }, content)); };
 //# sourceMappingURL=ExpandableContent.stories.js.map

package/dist/src/actions/ExpandableContent.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.stories.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,4BAA4B;CACpC,CAAA;AAED,IAAM,OAAO,GAAG,6BAAK,SAAS,EAAE,MAAM,qBAAsB,CAAA;AAE5D,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,iBAAiB,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,IACzE,OAAO,CACU,CACrB,EAJ6B,CAI7B,CAAA"}
+{"version":3,"file":"ExpandableContent.stories.js","sourceRoot":"","sources":["../../../src/actions/ExpandableContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAE9D,eAAe;IACb,KAAK,EAAE,4BAA4B;CACpC,CAAA;AAED,IAAM,OAAO,GAAG,6BAAK,SAAS,EAAE,MAAM,qBAAsB,CAAA;AAE5D,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,iBAAiB,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,IACzE,OAAO,CACU,CACrB,EAJ6B,CAI7B,CAAA;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,cAAM,OAAA,CACzB,oBAAC,iBAAiB,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAC7F,OAAO,CACU,CACrB,EAJ0B,CAI1B,CAAA"}

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

@@ -13,7 +13,7 @@ interface ActionBlockProps {
     actions: React.ReactNode[];
     background?: string;
     className?: string;
-    header: string;
+    header: React.ReactNode;
     icon?: React.ReactNode;
     layout?: ActionBlockLayout;
     subheader?: string;

package/dist/src/blocks/ActionBlock.js

@@ -25,7 +25,7 @@ var ActionBlock = function (_a) {
     return (React.createElement("div", { className: actionBlockClasses.join(" ") },
         React.createElement("div", { className: "action-block__head" },
             icon && React.createElement("div", { className: "action-block__icon" }, icon),
-            React.createElement("h2", { className: "action-block__header" }, header),
+            React.createElement("div", { className: "action-block__header" }, header),
             subheader && layout === ActionBlockLayout.block && (React.createElement("p", { className: "action-block__subheader" }, subheader))),
         React.createElement("div", { className: "action-block__actions" }, actions)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBlock.js","sourceRoot":"","sources":["../../../src/blocks/ActionBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAE3B,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,oCAAe,CAAA;IACf,sCAAiB,CAAA;AACnB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,sCAAa,CAAA;IACb,2DAAkC,CAAA;IAClC,yDAAgC,CAAA;AAClC,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;AAUD,IAAM,WAAW,GAAG,UAAC,EAQF;QAPjB,OAAO,aAAA,EACP,kBAAuC,EAAvC,UAAU,mBAAG,qBAAqB,CAAC,IAAI,KAAA,EACvC,SAAS,eAAA,EACT,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,cAAgC,EAAhC,MAAM,mBAAG,iBAAiB,CAAC,KAAK,KAAA,EAChC,SAAS,eAAA;IAET,IAAM,kBAAkB,GAAG,CAAC,cAAc,EAAE,UAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,CAAC,CAAA;IAC5E,IAAI,UAAU;QAAE,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACnD,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,kBAAkB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KAC/C;SAAM;QACL,kBAAkB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;KAChD;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC;QAC1C,6BAAK,SAAS,EAAC,oBAAoB;YAChC,IAAI,IAAI,6BAAK,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAO;YACzD,4BAAI,SAAS,EAAC,sBAAsB,IAAE,MAAM,CAAM;YACjD,SAAS,IAAI,MAAM,KAAK,iBAAiB,CAAC,KAAK,IAAI,CAClD,2BAAG,SAAS,EAAC,yBAAyB,IAAE,SAAS,CAAK,CACvD,CACG;QACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAA;AACH,CAAC,CAAA;AACD,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"ActionBlock.js","sourceRoot":"","sources":["../../../src/blocks/ActionBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAE3B,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,oCAAe,CAAA;IACf,sCAAiB,CAAA;AACnB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,sCAAa,CAAA;IACb,2DAAkC,CAAA;IAClC,yDAAgC,CAAA;AAClC,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;AAUD,IAAM,WAAW,GAAG,UAAC,EAQF;QAPjB,OAAO,aAAA,EACP,kBAAuC,EAAvC,UAAU,mBAAG,qBAAqB,CAAC,IAAI,KAAA,EACvC,SAAS,eAAA,EACT,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,cAAgC,EAAhC,MAAM,mBAAG,iBAAiB,CAAC,KAAK,KAAA,EAChC,SAAS,eAAA;IAET,IAAM,kBAAkB,GAAG,CAAC,cAAc,EAAE,UAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,CAAC,CAAA;IAC5E,IAAI,UAAU;QAAE,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACnD,IAAI,MAAM,KAAK,OAAO,EAAE;QACtB,kBAAkB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KAC/C;SAAM;QACL,kBAAkB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;KAChD;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC;QAC1C,6BAAK,SAAS,EAAC,oBAAoB;YAChC,IAAI,IAAI,6BAAK,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAO;YACzD,6BAAK,SAAS,EAAE,sBAAsB,IAAG,MAAM,CAAO;YACrD,SAAS,IAAI,MAAM,KAAK,iBAAiB,CAAC,KAAK,IAAI,CAClD,2BAAG,SAAS,EAAC,yBAAyB,IAAE,SAAS,CAAK,CACvD,CACG;QACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAA;AACH,CAAC,CAAA;AACD,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,WAAW,EAAE,CAAA"}

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

@@ -3,7 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const blockWithIcon: () => JSX.Element;
-export declare const blockNoIconNoBackgroung: () => JSX.Element;
+export declare const blockNoIconNoBackground: () => JSX.Element;
 export declare const blockWithDarkerBg: () => JSX.Element;
 export declare const blockWithSubheader: () => JSX.Element;
 export declare const inlineBlock: () => JSX.Element;

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

@@ -3,28 +3,29 @@ import ActionBlock, { ActionBlockLayout } from "./ActionBlock";
 import { Button } from "../..";
 import { AppearanceStyleType } from "../global/AppearanceTypes";
 import Icon from "../icons/Icon";
+import Heading from "../text/Heading";
 export default {
     title: "Blocks/Action Block",
 };
-export var blockWithIcon = function () { return (React.createElement(ActionBlock, { header: "Action block", background: "primary-lighter", icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), actions: [
+export var blockWithIcon = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "Action Block"), background: "primary-lighter", icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), actions: [
         React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.primary }, "Action"),
     ] })); };
-export var blockNoIconNoBackgroung = function () { return (React.createElement(ActionBlock, { header: "Full length headline text that spans the block", actions: [
+export var blockNoIconNoBackground = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "Full length headline text that spans the block"), actions: [
         React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.info }, "Button"),
     ] })); };
-export var blockWithDarkerBg = function () { return (React.createElement(ActionBlock, { header: "Action block", icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), background: "primary-darker", actions: [
+export var blockWithDarkerBg = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "Action Block"), icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), background: "primary-darker", actions: [
         React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.primary }, "Action"),
         React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.info }, "Action"),
     ] })); };
-export var blockWithSubheader = function () { return (React.createElement(ActionBlock, { header: "Full length headline text that spans the block", subheader: "Brunch leggings trust fund tattooed, flannel sustainable man braid venmo. ", icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), background: "primary-lighter", actions: [React.createElement(Button, { onClick: function () { return console.log("click"); } }, "Action")] })); };
-export var inlineBlock = function () { return (React.createElement(ActionBlock, { header: "See more listings from our community partners", icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), background: "primary-lighter", layout: ActionBlockLayout.inline, actions: [
+export var blockWithSubheader = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "Full length headline text that spans the block"), subheader: "Brunch leggings trust fund tattooed, flannel sustainable man braid venmo. ", icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), background: "primary-lighter", actions: [React.createElement(Button, { onClick: function () { return console.log("click"); } }, "Action")] })); };
+export var inlineBlock = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "See more listings from our community partners"), icon: React.createElement(Icon, { size: "3xl", symbol: "mail" }), background: "primary-lighter", layout: ActionBlockLayout.inline, actions: [
         React.createElement(Button, { onClick: function () { return console.log("click"); }, styleType: AppearanceStyleType.primary }, "Action"),
     ] })); };
-export var inlineBlockWith2actions = function () { return (React.createElement(ActionBlock, { header: "Find more listings on our website", background: "primary-darker", layout: ActionBlockLayout.inline, actions: [
+export var inlineBlockWith2actions = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "Find more listings on our website"), background: "primary-darker", layout: ActionBlockLayout.inline, actions: [
         React.createElement(Button, { onClick: function () { return console.log("click"); } }, "First Come, First Served"),
         React.createElement(Button, { onClick: function () { return console.log("click"); } }, "First Come, First Served"),
     ] })); };
-export var inlineBlockWith2actionsAsLinks = function () { return (React.createElement(ActionBlock, { header: "Find more listings on our website:", background: "primary-darker", layout: ActionBlockLayout.inline, actions: [
+export var inlineBlockWith2actionsAsLinks = function () { return (React.createElement(ActionBlock, { header: React.createElement(Heading, { priority: 2 }, "Find more listings on our website"), background: "primary-darker", layout: ActionBlockLayout.inline, actions: [
         React.createElement("a", { className: "button", key: "action-1", href: "https://google.com" }, "First come, first served"),
         React.createElement("a", { className: "button", key: "action-2", href: "https://google.com" }, "City Second loan program"),
     ] })); };

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBlock.stories.js","sourceRoot":"","sources":["../../../src/blocks/ActionBlock.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionBlock.stories.js","sourceRoot":"","sources":["../../../src/blocks/ActionBlock.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "9.0.3",
+  "version": "10.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",
@@ -109,6 +109,7 @@
     "sass-loader": "^10.0.3",
     "semantic-release": "19.0.5",
     "style-loader": "^1.1.3",
+    "tailwindcss-rtl": "^0.9.0",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
     "typescript": "^4.9.4",

package/src/actions/ExpandableContent.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { ExpandableContent } from "./ExpandableContent"
+import { ExpandableContent, Order } from "./ExpandableContent"
 
 export default {
   title: "Actions/Expandable Content",
@@ -13,3 +13,9 @@ export const standard = () => (
     {content}
   </ExpandableContent>
 )
+
+export const below = () => (
+  <ExpandableContent strings={{ readMore: "read more", readLess: "read less" }} order={Order.below}>
+    {content}
+  </ExpandableContent>
+)

package/src/actions/ExpandableContent.tsx

@@ -1,21 +1,32 @@
 import React, { useState } from "react"
 
+export enum Order {
+  above = "above",
+  below = "below",
+}
+
 type ExpandableContentProps = {
-  children: React.ReactChild
+  children: React.ReactNode
   strings: {
     readMore?: string
     readLess?: string
   }
   className?: string
+  order?: Order
 }
 
-const ExpandableContent = ({ children, strings, className }: ExpandableContentProps) => {
+const ExpandableContent = ({
+  children,
+  strings,
+  className,
+  order = Order.above,
+}: ExpandableContentProps) => {
   const [isExpanded, setExpanded] = useState(false)
   const rootClassNames = className ? `${className}` : undefined
 
   return (
     <div className={rootClassNames}>
-      {isExpanded && <div>{children}</div>}
+      {order === Order.above && <>{isExpanded && <div>{children}</div>}</>}
       <button
         type="button"
         className="button is-unstyled m-0 no-underline has-toggle"
@@ -26,6 +37,7 @@ const ExpandableContent = ({ children, strings, className }: ExpandableContentPr
       >
         {isExpanded ? strings.readLess : strings.readMore}
       </button>
+      {order === Order.below && <>{isExpanded && <div>{children}</div>}</>}
     </div>
   )
 }

package/src/blocks/ActionBlock.scss

@@ -101,9 +101,9 @@
     }
   }
   .action-block__header {
-    @apply ml-6;
+    @apply ms-6;
     @media (max-width: 640px) {
-      @apply ml-0;
+      @apply ms-0;
     }
   }
 }

package/src/blocks/ActionBlock.stories.tsx

@@ -1,112 +1,93 @@
-import React from "react";
-import ActionBlock, { ActionBlockLayout } from "./ActionBlock";
-import HeaderBadge from "../icons/HeaderBadge";
-import { Button } from "../..";
-import { AppearanceStyleType } from "../global/AppearanceTypes";
-import Icon from "../icons/Icon";
+import React from "react"
+import ActionBlock, { ActionBlockLayout } from "./ActionBlock"
+import { Button } from "../.."
+import { AppearanceStyleType } from "../global/AppearanceTypes"
+import Icon from "../icons/Icon"
+import Heading from "../text/Heading"
 
 export default {
   title: "Blocks/Action Block",
-};
+}
 
 export const blockWithIcon = () => (
   <ActionBlock
-    header="Action block"
+    header={<Heading priority={2}>Action Block</Heading>}
     background="primary-lighter"
     icon={<Icon size="3xl" symbol="mail" />}
     actions={[
-      <Button
-        onClick={() => console.log("click")}
-        styleType={AppearanceStyleType.primary}
-      >
+      <Button onClick={() => console.log("click")} styleType={AppearanceStyleType.primary}>
         Action
       </Button>,
     ]}
   ></ActionBlock>
-);
+)
 
-export const blockNoIconNoBackgroung = () => (
+export const blockNoIconNoBackground = () => (
   <ActionBlock
-    header="Full length headline text that spans the block"
+    header={<Heading priority={2}>Full length headline text that spans the block</Heading>}
     actions={[
-      <Button
-        onClick={() => console.log("click")}
-        styleType={AppearanceStyleType.info}
-      >
+      <Button onClick={() => console.log("click")} styleType={AppearanceStyleType.info}>
         Button
       </Button>,
     ]}
   ></ActionBlock>
-);
+)
 
 export const blockWithDarkerBg = () => (
   <ActionBlock
-    header="Action block"
+    header={<Heading priority={2}>Action Block</Heading>}
     icon={<Icon size="3xl" symbol="mail" />}
     background="primary-darker"
     actions={[
-      <Button
-        onClick={() => console.log("click")}
-        styleType={AppearanceStyleType.primary}
-      >
+      <Button onClick={() => console.log("click")} styleType={AppearanceStyleType.primary}>
         Action
       </Button>,
-      <Button
-        onClick={() => console.log("click")}
-        styleType={AppearanceStyleType.info}
-      >
+      <Button onClick={() => console.log("click")} styleType={AppearanceStyleType.info}>
         Action
       </Button>,
     ]}
   ></ActionBlock>
-);
+)
 
 export const blockWithSubheader = () => (
   <ActionBlock
-    header="Full length headline text that spans the block"
+    header={<Heading priority={2}>Full length headline text that spans the block</Heading>}
     subheader="Brunch leggings trust fund tattooed, flannel sustainable man braid venmo. "
     icon={<Icon size="3xl" symbol="mail" />}
     background="primary-lighter"
     actions={[<Button onClick={() => console.log("click")}>Action</Button>]}
   ></ActionBlock>
-);
+)
 
 export const inlineBlock = () => (
   <ActionBlock
-    header="See more listings from our community partners"
+    header={<Heading priority={2}>See more listings from our community partners</Heading>}
     icon={<Icon size="3xl" symbol="mail" />}
     background="primary-lighter"
     layout={ActionBlockLayout.inline}
     actions={[
-      <Button
-        onClick={() => console.log("click")}
-        styleType={AppearanceStyleType.primary}
-      >
+      <Button onClick={() => console.log("click")} styleType={AppearanceStyleType.primary}>
         Action
       </Button>,
     ]}
   ></ActionBlock>
-);
+)
 
 export const inlineBlockWith2actions = () => (
   <ActionBlock
-    header="Find more listings on our website"
+    header={<Heading priority={2}>Find more listings on our website</Heading>}
     background="primary-darker"
     layout={ActionBlockLayout.inline}
     actions={[
-      <Button onClick={() => console.log("click")}>
-        First Come, First Served
-      </Button>,
-      <Button onClick={() => console.log("click")}>
-        First Come, First Served
-      </Button>,
+      <Button onClick={() => console.log("click")}>First Come, First Served</Button>,
+      <Button onClick={() => console.log("click")}>First Come, First Served</Button>,
     ]}
   ></ActionBlock>
-);
+)
 
 export const inlineBlockWith2actionsAsLinks = () => (
   <ActionBlock
-    header="Find more listings on our website:"
+    header={<Heading priority={2}>Find more listings on our website</Heading>}
     background="primary-darker"
     layout={ActionBlockLayout.inline}
     actions={[
@@ -118,4 +99,4 @@ export const inlineBlockWith2actionsAsLinks = () => (
       </a>,
     ]}
   ></ActionBlock>
-);
+)

package/src/blocks/ActionBlock.tsx

@@ -15,7 +15,7 @@ interface ActionBlockProps {
   actions: React.ReactNode[]
   background?: string
   className?: string
-  header: string
+  header: React.ReactNode
   icon?: React.ReactNode
   layout?: ActionBlockLayout
   subheader?: string
@@ -41,7 +41,7 @@ const ActionBlock = ({
     <div className={actionBlockClasses.join(" ")}>
       <div className="action-block__head">
         {icon && <div className="action-block__icon">{icon}</div>}
-        <h2 className="action-block__header">{header}</h2>
+        <div className={"action-block__header"}>{header}</div>
         {subheader && layout === ActionBlockLayout.block && (
           <p className="action-block__subheader">{subheader}</p>
         )}

package/tailwind.config.js

@@ -3,6 +3,7 @@
 module.exports = {
   important: true,
   purge: false,
+  plugins: [require("tailwindcss-rtl")],
   theme: {
     screens: {
       sm: "640px",