@bloom-housing/ui-components 10.0.2 → 10.0.4

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/dist/src/headers/StepHeader.d.ts

@@ -5,6 +5,7 @@ export interface StepHeaderProps {
     stepPreposition: string;
     stepLabeling: string[];
     className?: string;
+    priority?: number;
 }
-declare const StepHeader: ({ currentStep, totalSteps, stepPreposition, stepLabeling, className, }: StepHeaderProps) => JSX.Element;
+declare const StepHeader: ({ currentStep, totalSteps, stepPreposition, stepLabeling, className, priority, }: StepHeaderProps) => JSX.Element;
 export { StepHeader as default, StepHeader };

package/dist/src/headers/StepHeader.js

@@ -1,11 +1,12 @@
 import * as React from "react";
 import "./StepHeader.scss";
 var StepHeader = function (_a) {
-    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, stepPreposition = _a.stepPreposition, stepLabeling = _a.stepLabeling, className = _a.className;
-    return (React.createElement("div", { className: "step-header ".concat(className) },
-        React.createElement("div", { className: "step-header__circle-number" }, currentStep),
-        React.createElement("div", null, "".concat(stepPreposition, " ").concat(totalSteps)),
-        React.createElement("div", { className: "step-header__title" }, stepLabeling[Math.min(currentStep - 1, stepLabeling.length - 1)])));
+    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, stepPreposition = _a.stepPreposition, stepLabeling = _a.stepLabeling, className = _a.className, priority = _a.priority;
+    var Tag = "h".concat(priority || 2);
+    return (React.createElement(Tag, { className: "step-header ".concat(className || "") },
+        React.createElement("span", { className: "step-header__circle-number" }, currentStep),
+        React.createElement("span", null, "".concat(stepPreposition, " ").concat(totalSteps)),
+        React.createElement("span", { className: "step-header__title" }, stepLabeling[Math.min(currentStep - 1, stepLabeling.length - 1)])));
 };
 export { StepHeader as default, StepHeader };
 //# sourceMappingURL=StepHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepHeader.js","sourceRoot":"","sources":["../../../src/headers/StepHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAU1B,IAAM,UAAU,GAAG,UAAC,EAMF;QALhB,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,SAAS,eAAA;IAET,OAAO,CACL,6BAAK,SAAS,EAAE,sBAAe,SAAS,CAAE;QACxC,6BAAK,SAAS,EAAC,4BAA4B,IAAE,WAAW,CAAO;QAC/D,iCAAM,UAAG,eAAe,cAAI,UAAU,CAAE,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,IAChC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAC7D,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"StepHeader.js","sourceRoot":"","sources":["../../../src/headers/StepHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAW1B,IAAM,UAAU,GAAG,UAAC,EAOF;QANhB,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,QAAQ,cAAA;IAER,IAAM,GAAG,GAAG,WAAI,QAAQ,IAAI,CAAC,CAAiC,CAAA;IAE9D,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAE,sBAAe,SAAS,IAAI,EAAE,CAAE;QAC9C,8BAAM,SAAS,EAAC,4BAA4B,IAAE,WAAW,CAAQ;QACjE,kCAAO,UAAG,eAAe,cAAI,UAAU,CAAE,CAAQ;QACjD,8BAAM,SAAS,EAAC,oBAAoB,IACjC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAC5D,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/package.json

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

package/src/headers/StepHeader.scss

@@ -3,11 +3,14 @@
   --circle-color: var(--bloom-color-primary);
   --circle-desktop-size: var(--bloom-s8);
   --circle-mobile-size: var(--bloom-s6);
-  --font-desktop-size: var(--bloom-font-size-lg);
+  --font-desktop-size: 1.125rem;
   --font-mobile-size: var(--bloom-font-size-base);
   --circle-x-padding: var(--bloom-s0_5);
   --title-spacing: var(--bloom-s1_5);
   --label-font-weight: 600;
+  --font-family: var(--bloom-font-sans);
+
+  font-family: var(--font-family);
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/src/headers/StepHeader.tsx

@@ -7,6 +7,7 @@ export interface StepHeaderProps {
   stepPreposition: string
   stepLabeling: string[]
   className?: string
+  priority?: number
 }
 
 const StepHeader = ({
@@ -15,15 +16,18 @@ const StepHeader = ({
   stepPreposition,
   stepLabeling,
   className,
+  priority,
 }: StepHeaderProps) => {
+  const Tag = `h${priority || 2}` as keyof JSX.IntrinsicElements
+
   return (
-    <div className={`step-header ${className}`}>
-      <div className="step-header__circle-number">{currentStep}</div>
-      <div>{`${stepPreposition} ${totalSteps}`}</div>
-      <div className="step-header__title">
+    <Tag className={`step-header ${className || ""}`}>
+      <span className="step-header__circle-number">{currentStep}</span>
+      <span>{`${stepPreposition} ${totalSteps}`}</span>
+      <span className="step-header__title">
         {stepLabeling[Math.min(currentStep - 1, stepLabeling.length - 1)]}
-      </div>
-    </div>
+      </span>
+    </Tag>
   )
 }