@bloom-housing/ui-components 10.0.5 → 10.0.7

package/dist/src/navigation/LanguageNav.stories.d.ts

@@ -1,6 +1,10 @@
+import { BADGES } from "../../.storybook/constants";
 declare const _default: {
     title: string;
     decorators: ((...args: any) => any)[];
+    parameters: {
+        badges: BADGES[];
+    };
 };
 export default _default;
 export declare const Default: () => JSX.Element;

package/dist/src/navigation/LanguageNav.stories.js

@@ -1,9 +1,13 @@
 import React from "react";
+import { BADGES } from "../../.storybook/constants";
 import { LanguageNav } from "./LanguageNav";
 import { text, withKnobs } from "@storybook/addon-knobs";
 export default {
-    title: "Navigation/LanguageNav",
+    title: "Navigation/LanguageNav 🚩",
     decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }, withKnobs],
+    parameters: {
+        badges: [BADGES.GEN2],
+    },
 };
 export var Default = function () { return (React.createElement(LanguageNav, { ariaLabel: text("ariaLabel", ""), languages: [
         {

package/dist/src/navigation/LanguageNav.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageNav.stories.js","sourceRoot":"","sources":["../../../src/navigation/LanguageNav.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAExD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,EAAE,SAAS,CAAC;CAC9F,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,oBAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAChC,SAAS,EAAE;QACT;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,cAAO,CAAC;SAClB;QACD;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,cAAO,CAAC;SAClB;KACF,GACD,CACH,EAhB4B,CAgB5B,CAAA"}
+{"version":3,"file":"LanguageNav.stories.js","sourceRoot":"","sources":["../../../src/navigation/LanguageNav.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAExD,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,EAAE,SAAS,CAAC;IAC7F,UAAU,EAAE;QACV,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,oBAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAChC,SAAS,EAAE;QACT;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,cAAO,CAAC;SAClB;QACD;YACE,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,cAAO,CAAC;SAClB;KACF,GACD,CACH,EAhB4B,CAgB5B,CAAA"}

package/dist/src/navigation/ProgressNav.d.ts

@@ -3,6 +3,7 @@ type ProgressNavStyle = "bar" | "dot";
 declare const ProgressNav: (props: {
     currentPageSection: number;
     completedSections: number;
+    removeSrHeader?: boolean;
     labels: string[];
     mounted: boolean;
     style?: ProgressNavStyle;

package/dist/src/navigation/ProgressNav.js

@@ -35,7 +35,7 @@ var ProgressNav = function (props) {
     if (props.style === "bar")
         navClasses += " progress-nav__bar";
     return (React.createElement("div", { "aria-label": "progress" },
-        React.createElement("h2", { className: "sr-only" }, (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.screenReaderHeading) !== null && _b !== void 0 ? _b : t("progressNav.srHeading")),
+        !props.removeSrHeader && (React.createElement("h2", { className: "sr-only" }, (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.screenReaderHeading) !== null && _b !== void 0 ? _b : t("progressNav.srHeading"))),
         React.createElement("ol", { className: !props.mounted ? "invisible" : navClasses }, props.labels.map(function (label, i) {
             var _a;
             return (React.createElement(ProgressNavItem, { key: label, section: i + 1, currentPageSection: props.currentPageSection, completedSections: props.completedSections, label: label, mounted: props.mounted, style: (_a = props.style) !== null && _a !== void 0 ? _a : "dot" }));

package/dist/src/navigation/ProgressNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressNav.js","sourceRoot":"","sources":["../../../src/navigation/ProgressNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;AAIzC,IAAM,eAAe,GAAG,UAAC,KAYxB;IACC,IAAI,OAAO,GAAG,aAAa,CAAA;IAC3B,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,kBAAkB,EAAE;YAC9C,OAAO,GAAG,WAAW,CAAA;SACtB;aAAM,IAAI,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,OAAO,EAAE;YACnD,OAAO,GAAG,EAAE,CAAA;SACb;KACF;IAED,IAAM,aAAa,GAAG;;QACpB,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,kBAAkB,EAAE;YAC5C,OAAO,CACL,8BAAM,SAAS,EAAC,SAAS,IACtB,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,qBAAqB,mCAAI,CAAC,CAAC,uBAAuB,CAAC,CAC9D,CACR,CAAA;SACF;aAAM,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,kBAAkB,EAAE;YACnD,OAAO,CACL,8BAAM,SAAS,EAAC,SAAS,IACtB,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,wBAAwB,mCAAI,CAAC,CAAC,0BAA0B,CAAC,CACpE,CACR,CAAA;SACF;aAAM;YACL,OAAO,EAAE,CAAA;SACV;IACH,CAAC,CAAA;IAED,OAAO,CACL,4BAAI,SAAS,EAAE,wBAAiB,KAAK,CAAC,KAAK,mBAAS,OAAO,CAAE;QAC3D,+CACiB,OAAO,KAAK,aAAa,kBAC1B,OAAO,KAAK,WAAW,EACrC,SAAS,EAAE,8BAA8B;YAExC,KAAK,CAAC,KAAK;;YAAG,aAAa,EAAE,CACzB,CACJ,CACN,CAAA;AACH,CAAC,CAAA;AAED,IAAM,WAAW,GAAG,UAAC,KASpB;;IACC,IAAI,UAAU,GAAG,cAAc,CAAA;IAC/B,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK;QAAE,UAAU,IAAI,oBAAoB,CAAA;IAC7D,OAAO,CACL,2CAAgB,UAAU;QACxB,4BAAI,SAAS,EAAC,SAAS,IACpB,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,mBAAmB,mCAAI,CAAC,CAAC,uBAAuB,CAAC,CAC9D;QACL,4BAAI,SAAS,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,IACrD,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,CAAC;;YAAK,OAAA,CAC9B,oBAAC,eAAe,IACd,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,CAAC,GAAG,CAAC,EACd,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,GAC3B,CACH,CAAA;SAAA,CAAC,CACC,CACD,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"ProgressNav.js","sourceRoot":"","sources":["../../../src/navigation/ProgressNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;AAIzC,IAAM,eAAe,GAAG,UAAC,KAYxB;IACC,IAAI,OAAO,GAAG,aAAa,CAAA;IAC3B,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,kBAAkB,EAAE;YAC9C,OAAO,GAAG,WAAW,CAAA;SACtB;aAAM,IAAI,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,OAAO,EAAE;YACnD,OAAO,GAAG,EAAE,CAAA;SACb;KACF;IAED,IAAM,aAAa,GAAG;;QACpB,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,kBAAkB,EAAE;YAC5C,OAAO,CACL,8BAAM,SAAS,EAAC,SAAS,IACtB,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,qBAAqB,mCAAI,CAAC,CAAC,uBAAuB,CAAC,CAC9D,CACR,CAAA;SACF;aAAM,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,kBAAkB,EAAE;YACnD,OAAO,CACL,8BAAM,SAAS,EAAC,SAAS,IACtB,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,wBAAwB,mCAAI,CAAC,CAAC,0BAA0B,CAAC,CACpE,CACR,CAAA;SACF;aAAM;YACL,OAAO,EAAE,CAAA;SACV;IACH,CAAC,CAAA;IAED,OAAO,CACL,4BAAI,SAAS,EAAE,wBAAiB,KAAK,CAAC,KAAK,mBAAS,OAAO,CAAE;QAC3D,+CACiB,OAAO,KAAK,aAAa,kBAC1B,OAAO,KAAK,WAAW,EACrC,SAAS,EAAE,8BAA8B;YAExC,KAAK,CAAC,KAAK;;YAAG,aAAa,EAAE,CACzB,CACJ,CACN,CAAA;AACH,CAAC,CAAA;AAED,IAAM,WAAW,GAAG,UAAC,KAUpB;;IACC,IAAI,UAAU,GAAG,cAAc,CAAA;IAC/B,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK;QAAE,UAAU,IAAI,oBAAoB,CAAA;IAC7D,OAAO,CACL,2CAAiB,UAAU;QACxB,CAAC,KAAK,CAAC,cAAc,IAAI,CACxB,4BAAI,SAAS,EAAC,SAAS,IACpB,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,mBAAmB,mCAAI,CAAC,CAAC,uBAAuB,CAAC,CAC9D,CACN;QACD,4BAAI,SAAS,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,IACrD,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,CAAC;;YAAK,OAAA,CAC9B,oBAAC,eAAe,IACd,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,CAAC,GAAG,CAAC,EACd,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,GAC3B,CACH,CAAA;SAAA,CAAC,CACC,CACD,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "10.0.5",
+  "version": "10.0.7",
   "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/navigation/LanguageNav.scss

@@ -1,32 +1,43 @@
 .language-bar {
-  @apply bg-gray-800;
+  --inner-max-width: var(--bloom-width-5xl);
+  --inner-width: inherit;
+  --inner-desktop-padding: inherit;
+  --inner-mobile-padding: inherit;
+
+  background-color: var(--bloom-color-gray-800);
 }
 
 .language-bar__inner {
-  @apply max-w-5xl;
-  @apply flex;
-  @apply justify-end;
+  max-width: var(--inner-max-width);
+  width: var(--inner-width);
+  display: flex;
+  justify-content: end;
   margin: auto;
+  padding: var(--inner-mobile-padding);
+
+  @media (min-width: $screen-md) {
+    padding: 0 var(--bloom-s3);
+    padding: var(--inner-desktop-padding);
+  }
 }
 
 .language-nav__list {
-  @apply flex;
+  display: flex;
 }
 
 .language-nav__list-button {
-  @apply py-2;
-  @apply px-3;
-  @apply text-gray-500;
-  @apply font-semibold;
-  @apply cursor-pointer;
-  @apply bg-none;
+  padding: var(--bloom-s2) var(--bloom-s3);
+  color: var(--bloom-color-gray-500);
+  font-weight: 600;
+  cursor: pointer;
+  background-color: transparent;
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
   }
 
   &.is-active {
-    @apply text-white;
+    color: var(--bloom-color-white);
   }
 }

package/src/navigation/LanguageNav.stories.tsx

@@ -1,11 +1,14 @@
 import React from "react"
-
+import { BADGES } from "../../.storybook/constants"
 import { LanguageNav } from "./LanguageNav"
 import { text, withKnobs } from "@storybook/addon-knobs"
 
 export default {
-  title: "Navigation/LanguageNav",
+  title: "Navigation/LanguageNav 🚩",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+  parameters: {
+    badges: [BADGES.GEN2],
+  },
 }
 
 export const Default = () => (

package/src/navigation/ProgressNav.tsx

@@ -60,6 +60,7 @@ const ProgressNavItem = (props: {
 const ProgressNav = (props: {
   currentPageSection: number
   completedSections: number
+  removeSrHeader?: boolean
   labels: string[]
   mounted: boolean
   style?: ProgressNavStyle
@@ -70,10 +71,12 @@ const ProgressNav = (props: {
   let navClasses = "progress-nav"
   if (props.style === "bar") navClasses += " progress-nav__bar"
   return (
-    <div aria-label="progress">
-      <h2 className="sr-only">
-        {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")}
-      </h2>
+    <div aria-label={"progress"}>
+      {!props.removeSrHeader && (
+        <h2 className="sr-only">
+          {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")}
+        </h2>
+      )}
       <ol className={!props.mounted ? "invisible" : navClasses}>
         {props.labels.map((label, i) => (
           <ProgressNavItem