@bloom-housing/ui-components 10.0.1 → 10.0.3

package/dist/src/forms/Field.d.ts

@@ -29,6 +29,7 @@ export interface FieldProps {
     setValue?: UseFormMethods["setValue"];
     dataTestId?: string;
     hidden?: boolean;
+    labelClassName?: string;
     bordered?: boolean;
 }
 declare const Field: (props: FieldProps) => JSX.Element;

package/dist/src/forms/Field.js

@@ -63,13 +63,25 @@ var Field = function (props) {
             labelClasses.push("text-primary");
         if (props.readerOnly)
             labelClasses.push("sr-only");
+        if (props.labelClassName)
+            labelClasses.push(props.labelClassName);
         if (props.type === "radio") {
             labelClasses.push("font-semibold");
         }
         if (props.error)
             labelClasses.push("text-alert");
         return (React.createElement("label", { className: labelClasses.join(" "), htmlFor: props.id || props.name }, props.label));
-    }, [props.caps, props.primary, props.readerOnly, props.type, props.id, props.name, props.label]);
+    }, [
+        props.caps,
+        props.primary,
+        props.readerOnly,
+        props.labelClassName,
+        props.type,
+        props.id,
+        props.name,
+        props.label,
+        props.error,
+    ]);
     var idOrName = props.id || props.name;
     var note = React.createElement(React.Fragment, null);
     if (props.note) {

package/dist/src/forms/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/forms/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAe,OAAO,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAmC5D,IAAM,KAAK,GAAG,UAAC,KAAiB;IAC9B,IAAM,OAAO,GAAG,CAAC,OAAO,CAAC,CAAA;IACzB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KACtB;IAED,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;KAC9B;IAED,IAAM,cAAc,GAAG,EAAE,CAAA;IAEzB,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;QAC7B,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;KAC/B;IAED,IAAI,KAAK,CAAC,gBAAgB,EAAE;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAA;KAC5C;IAED,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC;QACzE,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IAErC,IAAM,WAAW,GAAG,UAAC,OAAe;QAAf,wBAAA,EAAA,eAAe;QAClC,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,EAAE;YACrC,IAAM,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YACjD,IAAM,aAAa,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;YAE/C,IAAI,OAAO,IAAI,aAAa,EAAE;gBAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAA;aAC1E;iBAAM,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE;gBAC/B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;aAC/B;iBAAM;gBACL,KAAK,CAAC,QAAQ,CACZ,KAAK,CAAC,IAAI,EACV,aAAa,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,qBAAqB,EAAE,CAAC,EAAE,CAAC,CACpE,CAAA;aACF;SACF;IACH,CAAC,CAAA;IAED,IAAM,aAAa,GAAG,UAAC,CAAgC;QACrD,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAA;SAC/F;IACH,CAAC,CAAA;IAED,IAAI,UAAU,gBAAQ,KAAK,CAAC,UAAU,CAAE,CAAA;IACxC,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE;QAC7B,UAAU,yBACL,UAAU,KACb,MAAM,EAAE,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,EAC3B,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB,EAChC,QAAQ,EAAE,aAAa,GACxB,CAAA;KACF;IAED,IAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,IAAI,MAAM,CAAA;IAC1E,IAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE9D,IAAM,KAAK,GAAG,OAAO,CAAC;QACpB,IAAM,YAAY,GAAG,CAAC,OAAO,CAAC,CAAA;QAC9B,IAAI,KAAK,CAAC,IAAI;YAAE,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;QACtD,IAAI,KAAK,CAAC,OAAO;YAAE,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QACpD,IAAI,KAAK,CAAC,UAAU;YAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAClD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAC1B,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;SACnC;QACD,IAAI,KAAK,CAAC,KAAK;YAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QAEhD,OAAO,CACL,+BAAO,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,IACtE,KAAK,CAAC,KAAK,CACN,CACT,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEhG,IAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,CAAA;IAEvC,IAAI,IAAI,GAAG,yCAAK,CAAA;IAChB,IAAI,KAAK,CAAC,IAAI,EAAE;QACd,IAAI,GAAG,2BAAG,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,IAAI,CAAK,CAAA;KACvD;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9B,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK;QAC5C,IAAI;QACL,6BAAK,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;YACrC,KAAK,CAAC,OAAO,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,KAAK,CAAC,OAAO,CAAQ;YAClE,4DACoB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,UAAG,QAAQ,CAAE,kBACzD,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,EACpC,SAAS,EAAC,OAAO,EACjB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,GAAG,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,EACvD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,kBACV,KAAK,CAAC,UAAU,IAC1B,UAAU,IACd,MAAM,EAAE,KAAK,CAAC,MAAM,IACpB;YACD,iBAAiB,IAAI,KAAK,CACvB;QACL,KAAK,CAAC,OAAO,IAAI,2BAAG,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAC,OAAO,CAAK;QAClE,KAAK,CAAC,YAAY,IAAI,CACrB,oBAAC,YAAY,IAAC,EAAE,EAAE,UAAG,QAAQ,WAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACtD,KAAK,CAAC,YAAY,CACN,CAChB,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/forms/Field.tsx"],"names":[],"mappings":"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"}

package/dist/src/headers/HeadingGroup.d.ts

@@ -3,7 +3,7 @@ import "./HeadingGroup.scss";
 export interface HeadingGroupProps {
     /** A string or element to display in an `h2` tag (overridable via `headingPriority`) */
     heading: React.ReactNode;
-    /** A string or element to display in an `p` tag (using `role="doc-subtitle"`) */
+    /** A string or element to display in a `p` tag */
     subheading: React.ReactNode;
     /**
      * The heading level (1 through 6)

package/dist/src/headers/HeadingGroup.js

@@ -8,7 +8,7 @@ var HeadingGroup = function (props) {
         classNames.push(props.className);
     return (React.createElement("hgroup", { className: classNames.join(" "), role: "group" },
         React.createElement(Heading, { priority: (_a = props.headingPriority) !== null && _a !== void 0 ? _a : 2 }, props.heading),
-        React.createElement("p", { role: "doc-subtitle" }, props.subheading)));
+        React.createElement("p", null, props.subheading)));
 };
 export { HeadingGroup as default, HeadingGroup };
 //# sourceMappingURL=HeadingGroup.js.map

package/dist/src/headers/HeadingGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadingGroup.js","sourceRoot":"","sources":["../../../src/headers/HeadingGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,qBAAqB,CAAA;AAgB5B,IAAM,YAAY,GAAG,UAAC,KAAwB;;IAC5C,IAAM,UAAU,GAAG,CAAC,eAAe,CAAC,CAAA;IACpC,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAErD,OAAO,CACL,gCAAQ,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAC,OAAO;QACnD,oBAAC,OAAO,IAAC,QAAQ,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,CAAC,IAAG,KAAK,CAAC,OAAO,CAAW;QACxE,2BAAG,IAAI,EAAC,cAAc,IAAE,KAAK,CAAC,UAAU,CAAK,CACtC,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,IAAI,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"HeadingGroup.js","sourceRoot":"","sources":["../../../src/headers/HeadingGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,qBAAqB,CAAA;AAgB5B,IAAM,YAAY,GAAG,UAAC,KAAwB;;IAC5C,IAAM,UAAU,GAAG,CAAC,eAAe,CAAC,CAAA;IACpC,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAErD,OAAO,CACL,gCAAQ,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAC,OAAO;QACnD,oBAAC,OAAO,IAAC,QAAQ,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,CAAC,IAAG,KAAK,CAAC,OAAO,CAAW;QACxE,+BAAI,KAAK,CAAC,UAAU,CAAK,CAClB,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,IAAI,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/src/headers/Hero.d.ts

@@ -7,10 +7,14 @@ export interface HeroProps {
     buttonTitle?: string;
     centered?: boolean;
     children?: React.ReactNode;
+    className?: string;
     extraLargeTitle?: boolean;
+    customActions?: React.ReactNode;
+    innerClassName?: string;
     secondaryButtonLink?: string;
     secondaryButtonTitle?: string;
     title: React.ReactNode;
+    titleClassName?: string;
     strings?: {
         allApplicationsClosed?: string;
     };

package/dist/src/headers/Hero.js

@@ -2,12 +2,19 @@ import * as React from "react";
 import { LinkButton } from "../actions/LinkButton";
 import { t } from "../helpers/translator";
 import "./Hero.scss";
-var HeroButton = function (props) { return (React.createElement("span", { className: props.className + " hero__button" },
+var HeroButton = function (props) { return (React.createElement("span", { className: "".concat(props.className || "", " hero__button\"") },
     React.createElement(LinkButton, { href: props.href }, props.title))); };
 var Hero = function (props) {
     var _a, _b;
     var subHeader, styles;
-    var classNames = "";
+    var heroClasses = ["hero"];
+    if (props.centered)
+        heroClasses.push("centered");
+    if (props.className)
+        heroClasses.push(props.className);
+    var innerClasses = ["hero__inner"];
+    if (props.innerClassName)
+        innerClasses.push(props.innerClassName);
     if (props.allApplicationsClosed) {
         subHeader = (React.createElement("h2", { className: "hero__subtitle" }, (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.allApplicationsClosed) !== null && _b !== void 0 ? _b : t("welcome.allApplicationClosed")));
     }
@@ -17,15 +24,13 @@ var Hero = function (props) {
     if (props.backgroundImage) {
         styles = { backgroundImage: "url(".concat(props.backgroundImage, ")") };
     }
-    if (props.centered) {
-        classNames = "centered";
-    }
-    return (React.createElement("div", { className: "hero ".concat(classNames), style: styles, "data-test-id": "hero-component" },
-        React.createElement("h1", { className: "hero__title ".concat(props.extraLargeTitle ? "lg:text-6.5xl" : "") }, props.title),
-        subHeader,
-        props.buttonTitle && props.buttonLink && (React.createElement(React.Fragment, null, props.secondaryButtonTitle && props.secondaryButtonLink ? (React.createElement("div", { className: "hero__buttons" },
-            React.createElement(HeroButton, { className: "md:col-start-2 with_secondary", href: props.buttonLink, title: props.buttonTitle }),
-            React.createElement(HeroButton, { className: "with_secondary", href: props.secondaryButtonLink, title: props.secondaryButtonTitle }))) : (React.createElement(HeroButton, { className: "px-5", href: props.buttonLink, title: props.buttonTitle }))))));
+    return (React.createElement("div", { className: heroClasses.join(" "), style: styles, "data-test-id": "hero-component" },
+        React.createElement("div", { className: innerClasses.join(" ") },
+            React.createElement("h1", { className: "hero__title \n            ".concat(props.extraLargeTitle ? "lg:text-6.5xl" : "", " \n            ").concat(props.titleClassName || "", "\n            ") }, props.title),
+            subHeader,
+            props.customActions ? (props.customActions) : (React.createElement(React.Fragment, null, props.buttonTitle && props.buttonLink && (React.createElement(React.Fragment, null, props.secondaryButtonTitle && props.secondaryButtonLink ? (React.createElement("div", { className: "hero__buttons" },
+                React.createElement(HeroButton, { className: "md:col-start-2 with_secondary", href: props.buttonLink, title: props.buttonTitle }),
+                React.createElement(HeroButton, { className: "with_secondary", href: props.secondaryButtonLink, title: props.secondaryButtonTitle }))) : (React.createElement(HeroButton, { className: "px-5", href: props.buttonLink, title: props.buttonTitle })))))))));
 };
 export { Hero as default, Hero };
 //# sourceMappingURL=Hero.js.map

package/dist/src/headers/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/headers/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;AACzC,OAAO,aAAa,CAAA;AAkBpB,IAAM,UAAU,GAAG,UAAC,KAA0D,IAAK,OAAA,CACjF,8BAAM,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,eAAe;IAChD,oBAAC,UAAU,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAG,KAAK,CAAC,KAAK,CAAc,CACnD,CACR,EAJkF,CAIlF,CAAA;AAED,IAAM,IAAI,GAAG,UAAC,KAAgB;;IAC5B,IAAI,SAAS,EAAE,MAAM,CAAA;IACrB,IAAI,UAAU,GAAG,EAAE,CAAA;IACnB,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,SAAS,GAAG,CACV,4BAAI,SAAS,EAAC,gBAAgB,IAC3B,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,qBAAqB,mCAAI,CAAC,CAAC,8BAA8B,CAAC,CACvE,CACN,CAAA;KACF;SAAM,IAAI,KAAK,CAAC,QAAQ,EAAE;QACzB,SAAS,GAAG,4BAAI,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAC,QAAQ,CAAM,CAAA;KACjE;IACD,IAAI,KAAK,CAAC,eAAe,EAAE;QACzB,MAAM,GAAG,EAAE,eAAe,EAAE,cAAO,KAAK,CAAC,eAAe,MAAG,EAAE,CAAA;KAC9D;IACD,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,UAAU,GAAG,UAAU,CAAA;KACxB;IACD,OAAO,CACL,6BAAK,SAAS,EAAE,eAAQ,UAAU,CAAE,EAAE,KAAK,EAAE,MAAM,kBAAgB,gBAAgB;QACjF,4BAAI,SAAS,EAAE,sBAAe,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAE,IACzE,KAAK,CAAC,KAAK,CACT;QACJ,SAAS;QAET,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,UAAU,IAAI,CACxC,0CACG,KAAK,CAAC,oBAAoB,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC,CACzD,6BAAK,SAAS,EAAC,eAAe;YAC5B,oBAAC,UAAU,IACT,SAAS,EAAE,+BAA+B,EAC1C,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,WAAW,GACxB;YACF,oBAAC,UAAU,IACT,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAE,KAAK,CAAC,mBAAmB,EAC/B,KAAK,EAAE,KAAK,CAAC,oBAAoB,GACjC,CACE,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,GAAI,CACpF,CACA,CACJ,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/headers/Hero.tsx"],"names":[],"mappings":"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"}

package/dist/src/headers/Hero.stories.d.ts

@@ -1,5 +1,9 @@
+import { BADGES } from "../../.storybook/constants";
 declare const _default: {
     title: string;
+    parameters: {
+        badges: BADGES[];
+    };
 };
 export default _default;
 export declare const withListings: () => JSX.Element;
@@ -7,3 +11,4 @@ export declare const withNoListings: () => JSX.Element;
 export declare const withBackground: () => JSX.Element;
 export declare const withSecondaryButton: () => JSX.Element;
 export declare const withExtraLargeTitleAndSecondaryButton: () => JSX.Element;
+export declare const withCustomActions: () => JSX.Element;

package/dist/src/headers/Hero.stories.js

@@ -1,11 +1,16 @@
 import * as React from "react";
+import { BADGES } from "../../.storybook/constants";
 import { Hero } from "./Hero";
 export default {
-    title: "Headers/Hero",
+    title: "Headers/Hero 🚩",
+    parameters: {
+        badges: [BADGES.GEN2],
+    },
 };
 export var withListings = function () { return (React.createElement(Hero, { title: React.createElement(React.Fragment, null, "Say Hello to Your Hero"), buttonTitle: "I am a Button", buttonLink: "/listings" })); };
 export var withNoListings = function () { return (React.createElement(Hero, { title: React.createElement(React.Fragment, null, "Say Hello to Your Hero"), buttonTitle: "I am a Button", buttonLink: "/listings", allApplicationsClosed: true })); };
 export var withBackground = function () { return (React.createElement(Hero, { title: React.createElement(React.Fragment, null, "Say Hello to Your Hero"), buttonTitle: "Rental Listings", buttonLink: "/listings", backgroundImage: "/images/banner.png" })); };
 export var withSecondaryButton = function () { return (React.createElement(Hero, { title: React.createElement(React.Fragment, null, "Say Hello to Your Hero"), buttonTitle: "Rent", buttonLink: "/listings", secondaryButtonTitle: "Buy", secondaryButtonLink: "/listings/for-sale", backgroundImage: "/images/banner.png" })); };
 export var withExtraLargeTitleAndSecondaryButton = function () { return (React.createElement(Hero, { backgroundImage: "/images/banner.png", buttonLink: "/listings", buttonTitle: "Rent", extraLargeTitle: true, secondaryButtonLink: "/listings/for-sale", secondaryButtonTitle: "Buy", title: "Say Hello to Your Hero" })); };
+export var withCustomActions = function () { return (React.createElement(Hero, { title: React.createElement(React.Fragment, null, "Say Hello to Your Hero"), buttonTitle: "Rental Listings", buttonLink: "/listings", backgroundImage: "/images/banner.png", customActions: React.createElement(React.Fragment, null, "Hero custom action content") })); };
 //# sourceMappingURL=Hero.stories.js.map

package/dist/src/headers/Hero.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.stories.js","sourceRoot":"","sources":["../../../src/headers/Hero.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,eAAe;IACb,KAAK,EAAE,cAAc;CACtB,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,oBAAC,IAAI,IAAC,KAAK,EAAE,mEAA2B,EAAE,WAAW,EAAC,eAAe,EAAC,UAAU,EAAC,WAAW,GAAG,CAChG,EAFiC,CAEjC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,cAAM,OAAA,CAClC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,eAAe,EAC3B,UAAU,EAAC,WAAW,EACtB,qBAAqB,EAAE,IAAI,GAC3B,CACH,EAPmC,CAOnC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,cAAM,OAAA,CAClC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,iBAAiB,EAC7B,UAAU,EAAC,WAAW,EACtB,eAAe,EAAC,oBAAoB,GACpC,CACH,EAPmC,CAOnC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,CACvC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,MAAM,EAClB,UAAU,EAAC,WAAW,EACtB,oBAAoB,EAAC,KAAK,EAC1B,mBAAmB,EAAC,oBAAoB,EACxC,eAAe,EAAC,oBAAoB,GACpC,CACH,EATwC,CASxC,CAAA;AAED,MAAM,CAAC,IAAM,qCAAqC,GAAG,cAAM,OAAA,CACzD,oBAAC,IAAI,IACH,eAAe,EAAC,oBAAoB,EACpC,UAAU,EAAC,WAAW,EACtB,WAAW,EAAC,MAAM,EAClB,eAAe,EAAE,IAAI,EACrB,mBAAmB,EAAC,oBAAoB,EACxC,oBAAoB,EAAC,KAAK,EAC1B,KAAK,EAAE,wBAAwB,GAC/B,CACH,EAV0D,CAU1D,CAAA"}
+{"version":3,"file":"Hero.stories.js","sourceRoot":"","sources":["../../../src/headers/Hero.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,oBAAC,IAAI,IAAC,KAAK,EAAE,mEAA2B,EAAE,WAAW,EAAC,eAAe,EAAC,UAAU,EAAC,WAAW,GAAG,CAChG,EAFiC,CAEjC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,cAAM,OAAA,CAClC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,eAAe,EAC3B,UAAU,EAAC,WAAW,EACtB,qBAAqB,EAAE,IAAI,GAC3B,CACH,EAPmC,CAOnC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG,cAAM,OAAA,CAClC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,iBAAiB,EAC7B,UAAU,EAAC,WAAW,EACtB,eAAe,EAAC,oBAAoB,GACpC,CACH,EAPmC,CAOnC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,CACvC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,MAAM,EAClB,UAAU,EAAC,WAAW,EACtB,oBAAoB,EAAC,KAAK,EAC1B,mBAAmB,EAAC,oBAAoB,EACxC,eAAe,EAAC,oBAAoB,GACpC,CACH,EATwC,CASxC,CAAA;AAED,MAAM,CAAC,IAAM,qCAAqC,GAAG,cAAM,OAAA,CACzD,oBAAC,IAAI,IACH,eAAe,EAAC,oBAAoB,EACpC,UAAU,EAAC,WAAW,EACtB,WAAW,EAAC,MAAM,EAClB,eAAe,EAAE,IAAI,EACrB,mBAAmB,EAAC,oBAAoB,EACxC,oBAAoB,EAAC,KAAK,EAC1B,KAAK,EAAE,wBAAwB,GAC/B,CACH,EAV0D,CAU1D,CAAA;AAED,MAAM,CAAC,IAAM,iBAAiB,GAAG,cAAM,OAAA,CACrC,oBAAC,IAAI,IACH,KAAK,EAAE,mEAA2B,EAClC,WAAW,EAAC,iBAAiB,EAC7B,UAAU,EAAC,WAAW,EACtB,eAAe,EAAC,oBAAoB,EACpC,aAAa,EAAE,uEAA+B,GAC9C,CACH,EARsC,CAQtC,CAAA"}

package/dist/src/headers/PageHeader.stories.js

@@ -18,10 +18,10 @@ export var inversed = function () { return (React.createElement(PageHeader, { ti
 export var withContent = function () { return (React.createElement(PageHeader, { title: "Hello World", subtitle: "Here is a subtitle" }, "Here is some content")); };
 export var withBackgroundImage = function () { return (React.createElement(PageHeader, { title: "Hello World", inverse: true, subtitle: "Here is a page header with a background image", backgroundImage: "/images/banner.png", className: "bg-cover bg-center" })); };
 export var styleOverrides = function () {
-    var cssVarsOverride = "\n    .page-header-overrides .page-header {\n      --background-color: darkgreen;\n      --border-color: red;\n      --text-color: yellow;\n      --title-font-size: 6rem;\n    }\n  ";
+    var cssVarsOverride = "\n    .page-header-overrides .page-header {\n      --background-color: lightgray;\n      --border-color: gray;\n      --text-color: black;\n      --title-font-size-desktop: 5rem;\n      --title-font-size-mobile: 2rem;\n    }\n  ";
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "page-header-overrides" },
-            React.createElement(PageHeader, { title: "Big Title", subtitle: "Here is a subtitle" }, "Here is some contenta"),
+            React.createElement(PageHeader, { title: "Hello World", subtitle: "Here is a subtitle" }, "Here is some content"),
             React.createElement("style", null, cssVarsOverride)),
         React.createElement("p", { className: "mt-12 font-semibold" }, "Customized using the following variable overrides:"),
         React.createElement("pre", null, cssVarsOverride.replace(".page-header-overrides ", ""))));

package/dist/src/headers/PageHeader.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.stories.js","sourceRoot":"","sources":["../../../src/headers/PageHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,uBAAuB,MAAM,uBAAuB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,EAAE,EAAE,qBAAqB;IACzB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,uBAAuB;SAC9B;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,GAAG,EAAlC,CAAkC,CAAA;AAEvE,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,GAAG,EAAhE,CAAgE,CAAA;AAElG,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,UAAU,IAAC,KAAK,EAAC,qBAAqB,EAAC,QAAQ,EAAC,oBAAoB,EAAC,OAAO,SAAG,CACjF,EAF6B,CAE7B,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,2BAEhD,CACd,EAJgC,CAIhC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,CACvC,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,QAAC,QAAQ,EAAC,+CAA+C,EAAC,eAAe,EAAC,oBAAoB,EAAC,SAAS,EAAC,oBAAoB,GAAE,CACvK,EAFwC,CAExC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,IAAM,eAAe,GAAG,uLAOvB,CAAA;IAED,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,UAAU,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAC,oBAAoB,4BAE9C;YACb,mCAAQ,eAAe,CAAS,CAC5B;QAEN,2BAAG,SAAS,EAAC,qBAAqB,yDAAuD;QAEzF,iCAAM,eAAe,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAO,CAClE,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"PageHeader.stories.js","sourceRoot":"","sources":["../../../src/headers/PageHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,uBAAuB,MAAM,uBAAuB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,EAAE,EAAE,qBAAqB;IACzB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,uBAAuB;SAC9B;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,GAAG,EAAlC,CAAkC,CAAA;AAEvE,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,GAAG,EAAhE,CAAgE,CAAA;AAElG,MAAM,CAAC,IAAM,QAAQ,GAAG,cAAM,OAAA,CAC5B,oBAAC,UAAU,IAAC,KAAK,EAAC,qBAAqB,EAAC,QAAQ,EAAC,oBAAoB,EAAC,OAAO,SAAG,CACjF,EAF6B,CAE7B,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,2BAEhD,CACd,EAJgC,CAIhC,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,CACvC,oBAAC,UAAU,IACT,KAAK,EAAC,aAAa,EACnB,OAAO,QACP,QAAQ,EAAC,+CAA+C,EACxD,eAAe,EAAC,oBAAoB,EACpC,SAAS,EAAC,oBAAoB,GAC9B,CACH,EARwC,CAQxC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,IAAM,eAAe,GAAG,sOAQvB,CAAA;IAED,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,QAAQ,EAAC,oBAAoB,2BAEhD;YACb,mCAAQ,eAAe,CAAS,CAC5B;QAEN,2BAAG,SAAS,EAAC,qBAAqB,yDAAuD;QAEzF,iCAAM,eAAe,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAO,CAClE,CACJ,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "10.0.1",
+  "version": "10.0.3",
   "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/forms/Field.tsx

@@ -31,6 +31,7 @@ export interface FieldProps {
   setValue?: UseFormMethods["setValue"]
   dataTestId?: string
   hidden?: boolean
+  labelClassName?: string
   bordered?: boolean
 }
 
@@ -99,6 +100,7 @@ const Field = (props: FieldProps) => {
     if (props.caps) labelClasses.push("text__caps-spaced")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
+    if (props.labelClassName) labelClasses.push(props.labelClassName)
     if (props.type === "radio") {
       labelClasses.push("font-semibold")
     }
@@ -109,7 +111,17 @@ const Field = (props: FieldProps) => {
         {props.label}
       </label>
     )
-  }, [props.caps, props.primary, props.readerOnly, props.type, props.id, props.name, props.label])
+  }, [
+    props.caps,
+    props.primary,
+    props.readerOnly,
+    props.labelClassName,
+    props.type,
+    props.id,
+    props.name,
+    props.label,
+    props.error,
+  ])
 
   const idOrName = props.id || props.name
 

package/src/headers/HeadingGroup.tsx

@@ -5,7 +5,7 @@ import "./HeadingGroup.scss"
 export interface HeadingGroupProps {
   /** A string or element to display in an `h2` tag (overridable via `headingPriority`) */
   heading: React.ReactNode
-  /** A string or element to display in an `p` tag (using `role="doc-subtitle"`) */
+  /** A string or element to display in a `p` tag */
   subheading: React.ReactNode
   /**
    * The heading level (1 through 6)
@@ -23,7 +23,7 @@ const HeadingGroup = (props: HeadingGroupProps) => {
   return (
     <hgroup className={classNames.join(" ")} role="group">
       <Heading priority={props.headingPriority ?? 2}>{props.heading}</Heading>
-      <p role="doc-subtitle">{props.subheading}</p>
+      <p>{props.subheading}</p>
     </hgroup>
   )
 }

package/src/headers/Hero.scss

@@ -1,13 +1,35 @@
 .hero {
-  @apply bg-primary-darker;
-  @apply py-10;
-  @apply px-5;
-  @apply text-white;
-  @apply text-center;
-  @apply bg-cover;
-
-  @screen md {
-    @apply py-20;
+  --background-color: var(--bloom-color-primary-darker);
+  --border-radius: inherit;
+  --font-weight: inherit;
+  --inner-background-color: inherit;
+  --margin-desktop: inherit;
+  --margin-mobile: inherit;
+  --max-width: 41rem;
+  --subtitle-desktop-font-size: var(--bloom-font-size-xl);
+  --subtitle-font-weight: inherit;
+  --subtitle-margin: 0 auto var(--bloom-s8) auto;
+  --subtitle-mobile-font-size: var(--bloom-font-size-base);
+  --subtitle-text-color: var(--bloom-color-gray-100);
+  --subtitle-text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
+  --text-color: var(--bloom-color-white);
+  --title-desktop-font-size: var(--bloom-font-size-5xl);
+  --title-letter-spacing: -0.04em;
+  --title-line-height: inherit;
+  --title-margin-desktop: 0 0 var(--bloom-s8) 0;
+  --title-margin-mobile: 0 auto var(--bloom-s5) auto;
+  --title-mobile-font-size: var(--bloom-font-size-3xl);
+  --title-text-color: inherit;
+
+  background-color: var(--background-color);
+  background-size: cover;
+  color: var(--text-color);
+  margin: var(--margin-desktop);
+  padding: var(--bloom-s20) var(--bloom-s5);
+
+  @media (max-width: $screen-md) {
+    padding: var(--bloom-s10) var(--bloom-s5);
+    margin: var(--margin-mobile);
   }
 
   &.centered {
@@ -21,43 +43,59 @@
 }
 
 .hero__buttons {
-  @apply grid;
-  @apply md:grid-cols-4;
-  @apply gap-5;
-  @apply max-w-screen-md;
-  @apply m-auto;
+  display: grid;
+  gap: var(--bloom-s5);
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: auto;
+  width: 100%;
+  max-width: var(--bloom-screen-md);
+
+  @media (max-width: $screen-md) {
+    grid-template-columns: auto;
+  }
 }
+
 .hero__title {
-  @apply text-3xl;
-  @apply mb-5;
-  @apply mx-auto;
-  letter-spacing: -0.04em;
-  max-width: 41rem;
-
-  @screen md {
-    @apply text-5xl;
-    @apply mb-8;
+  color: var(--title-text-color);
+  font-size: var(--title-desktop-font-size);
+  letter-spacing: var(--title-letter-spacing);
+  line-height: var(--title-line-height);
+  margin: var(--title-margin-desktop);
+  max-width: var(--max-width);
+  text-align: center;
+
+  @media (max-width: $screen-md) {
+    font-size: var(--title-mobile-font-size);
+    margin: var(--title-margin-mobile);
   }
 
   em {
-    @apply not-italic;
-    @apply underline;
-    -webkit-text-decoration-color: $tailwind-warn;
-    -moz-text-decoration-color: $tailwind-warn;
-    text-decoration-color: $tailwind-warn;
+    font-style: normal;
+    text-decoration: underline;
+    -webkit-text-decoration-color: var(--bloom-color-warn);
+    -moz-text-decoration-color: var(--bloom-color-warn);
+    text-decoration-color: var(--bloom-color-warn);
   }
 }
 
-h2.hero__subtitle {
-  @apply font-sans;
-  @apply text-base;
-  @apply text-gray-100;
-  @apply mb-8;
-  @apply mx-auto;
-  max-width: 41rem;
-  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
-
-  @screen md {
-    @apply text-xl;
+.hero__subtitle {
+  text-align: center;
+  color: var(--subtitle-text-color);
+  font-family: var(--bloom-font-sans);
+  font-size: var(--subtitle-desktop-font-size);
+  font-weight: var(--subtitle-font-weight);
+  margin: var(--subtitle-margin);
+  max-width: var(--max-width);
+  text-shadow: var(--subtitle-text-shadow);
+
+  @media (max-width: $screen-md) {
+    font-size: var(--subtitle-mobile-font-size);
   }
 }
+
+.hero__inner {
+  background-color: var(--inner-background-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

package/src/headers/Hero.stories.tsx

@@ -1,9 +1,12 @@
 import * as React from "react"
-
+import { BADGES } from "../../.storybook/constants"
 import { Hero } from "./Hero"
 
 export default {
-  title: "Headers/Hero",
+  title: "Headers/Hero 🚩",
+  parameters: {
+    badges: [BADGES.GEN2],
+  },
 }
 
 export const withListings = () => (
@@ -50,3 +53,13 @@ export const withExtraLargeTitleAndSecondaryButton = () => (
     title={"Say Hello to Your Hero"}
   />
 )
+
+export const withCustomActions = () => (
+  <Hero
+    title={<>Say Hello to Your Hero</>}
+    buttonTitle="Rental Listings"
+    buttonLink="/listings"
+    backgroundImage="/images/banner.png"
+    customActions={<>Hero custom action content</>}
+  />
+)

package/src/headers/Hero.tsx

@@ -10,24 +10,34 @@ export interface HeroProps {
   buttonTitle?: string
   centered?: boolean
   children?: React.ReactNode
+  className?: string
   extraLargeTitle?: boolean
+  customActions?: React.ReactNode
+  innerClassName?: string
   secondaryButtonLink?: string
   secondaryButtonTitle?: string
   title: React.ReactNode
+  titleClassName?: string
   strings?: {
     allApplicationsClosed?: string
   }
 }
 
 const HeroButton = (props: { title: string; href: string; className?: string }) => (
-  <span className={props.className + " hero__button"}>
+  <span className={`${props.className || ""} hero__button"`}>
     <LinkButton href={props.href}>{props.title}</LinkButton>
   </span>
 )
 
 const Hero = (props: HeroProps) => {
   let subHeader, styles
-  let classNames = ""
+  const heroClasses = ["hero"]
+  if (props.centered) heroClasses.push("centered")
+  if (props.className) heroClasses.push(props.className)
+
+  const innerClasses = ["hero__inner"]
+  if (props.innerClassName) innerClasses.push(props.innerClassName)
+
   if (props.allApplicationsClosed) {
     subHeader = (
       <h2 className="hero__subtitle">
@@ -40,36 +50,51 @@ const Hero = (props: HeroProps) => {
   if (props.backgroundImage) {
     styles = { backgroundImage: `url(${props.backgroundImage})` }
   }
-  if (props.centered) {
-    classNames = "centered"
-  }
+
   return (
-    <div className={`hero ${classNames}`} style={styles} data-test-id={"hero-component"}>
-      <h1 className={`hero__title ${props.extraLargeTitle ? "lg:text-6.5xl" : ""}`}>
-        {props.title}
-      </h1>
-      {subHeader}
+    <div className={heroClasses.join(" ")} style={styles} data-test-id="hero-component">
+      <div className={innerClasses.join(" ")}>
+        <h1
+          className={`hero__title 
+            ${props.extraLargeTitle ? "lg:text-6.5xl" : ""} 
+            ${props.titleClassName || ""}
+            `}
+        >
+          {props.title}
+        </h1>
+        {subHeader}
 
-      {props.buttonTitle && props.buttonLink && (
-        <>
-          {props.secondaryButtonTitle && props.secondaryButtonLink ? (
-            <div className="hero__buttons">
-              <HeroButton
-                className={"md:col-start-2 with_secondary"}
-                href={props.buttonLink}
-                title={props.buttonTitle}
-              />
-              <HeroButton
-                className={"with_secondary"}
-                href={props.secondaryButtonLink}
-                title={props.secondaryButtonTitle}
-              />
-            </div>
-          ) : (
-            <HeroButton className={"px-5"} href={props.buttonLink} title={props.buttonTitle} />
-          )}
-        </>
-      )}
+        {props.customActions ? (
+          props.customActions
+        ) : (
+          <>
+            {props.buttonTitle && props.buttonLink && (
+              <>
+                {props.secondaryButtonTitle && props.secondaryButtonLink ? (
+                  <div className="hero__buttons">
+                    <HeroButton
+                      className={"md:col-start-2 with_secondary"}
+                      href={props.buttonLink}
+                      title={props.buttonTitle}
+                    />
+                    <HeroButton
+                      className={"with_secondary"}
+                      href={props.secondaryButtonLink}
+                      title={props.secondaryButtonTitle}
+                    />
+                  </div>
+                ) : (
+                  <HeroButton
+                    className={`px-5`}
+                    href={props.buttonLink}
+                    title={props.buttonTitle}
+                  />
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
     </div>
   )
 }

package/src/headers/PageHeader.scss

@@ -7,16 +7,19 @@
   --inverse-background-color: var(--bloom-color-primary-darker);
   --inverse-border-color: var(--bloom-color-primary);
   --inverse-text-color: var(--bloom-color-white);
-  --title-font-size: var(--bloom-font-size-4xl);
+  --title-font-size-desktop: var(--bloom-font-size-4xl);
+  --title-font-size-mobile: var(--bloom-font-size-2xl);
+  --padding-desktop: var(--bloom-s10) 0;
+  --padding-mobile: var(--bloom-s8) 0;
 
   /* Base Styles */
-  padding: var(--bloom-s8) 0;
+  padding: var(--padding-mobile);
   background-color: var(--background-color);
   border-top: var(--bloom-border-1) solid var(--border-color);
   color: var(--text-color);
 
   @media (min-width: $screen-md) {
-    padding: var(--bloom-s10) 0;
+    padding: var(--padding-desktop);
   }
 
   /* Variants */
@@ -46,17 +49,19 @@
 }
 
 .page-header__title {
+  font-size: var(--title-font-size-mobile);
   text-align: center;
   font-family: var(--text-font-family);
-  word-break: break-all;
+  word-break: break-word;
 
   @media (min-width: $screen-md) {
-    font-size: var(--title-font-size);
+    font-size: var(--title-font-size-desktop);
     text-align: left;
   }
 }
 
 .page-header__lead {
+  text-align: center;
   font-family: var(--text-font-family);
   max-width: var(--bloom-width-5xl);
 }

package/src/headers/PageHeader.stories.tsx

@@ -29,24 +29,31 @@ export const withContent = () => (
 )
 
 export const withBackgroundImage = () => (
-  <PageHeader title="Hello World" inverse subtitle="Here is a page header with a background image" backgroundImage="/images/banner.png" className="bg-cover bg-center"/>
+  <PageHeader
+    title="Hello World"
+    inverse
+    subtitle="Here is a page header with a background image"
+    backgroundImage="/images/banner.png"
+    className="bg-cover bg-center"
+  />
 )
 
 export const styleOverrides = () => {
   const cssVarsOverride = `
     .page-header-overrides .page-header {
-      --background-color: darkgreen;
-      --border-color: red;
-      --text-color: yellow;
-      --title-font-size: 6rem;
+      --background-color: lightgray;
+      --border-color: gray;
+      --text-color: black;
+      --title-font-size-desktop: 5rem;
+      --title-font-size-mobile: 2rem;
     }
   `
 
   return (
     <>
       <div className="page-header-overrides">
-        <PageHeader title="Big Title" subtitle="Here is a subtitle">
-          Here is some contenta
+        <PageHeader title="Hello World" subtitle="Here is a subtitle">
+          Here is some content
         </PageHeader>
         <style>{cssVarsOverride}</style>
       </div>