@bloom-housing/ui-components 10.0.3 → 10.0.5

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.3",
+  "version": "10.0.5",
   "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/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>
   )
 }
 

package/src/navigation/FooterNav.scss

@@ -1,5 +1,8 @@
 .footer-sock {
-  @apply bg-gray-900;
+  --background-color: var(--bloom-color-gray-900);
+  --copyright-text-color: var(--bloom-color-gray-500);
+
+  background-color: var(--background-color);
   @apply py-8;
   @apply px-2;
 
@@ -29,9 +32,11 @@
   }
 
   .footer-copyright {
+    color: var(--copyright-text-color);
     width: auto;
     flex-shrink: 0;
     @screen lg {
+      @apply w-full;
       @apply text-left;
     }
   }