@bloom-housing/ui-components 9.0.3 → 9.0.4

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "9.0.3",
+  "version": "9.0.4",
   "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/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>
   )
 }