@bloom-housing/ui-components 9.0.4 → 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/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.4",
+  "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/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",