@bloom-housing/ui-components 10.0.6 → 10.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@ type ProgressNavStyle = "bar" | "dot";
3
3
  declare const ProgressNav: (props: {
4
4
  currentPageSection: number;
5
5
  completedSections: number;
6
+ removeSrHeader?: boolean;
6
7
  labels: string[];
7
8
  mounted: boolean;
8
9
  style?: ProgressNavStyle;
@@ -35,7 +35,7 @@ var ProgressNav = function (props) {
35
35
  if (props.style === "bar")
36
36
  navClasses += " progress-nav__bar";
37
37
  return (React.createElement("div", { "aria-label": "progress" },
38
- 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")),
38
+ !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"))),
39
39
  React.createElement("ol", { className: !props.mounted ? "invisible" : navClasses }, props.labels.map(function (label, i) {
40
40
  var _a;
41
41
  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" }));
@@ -1 +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"}
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,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"}
@@ -38,7 +38,7 @@ var AlertBox = function (props) {
38
38
  (props.type || props.customIcon) && (React.createElement("span", { className: "alert-box__icon" },
39
39
  React.createElement(Icon, { size: "medium", symbol: props.type ? icons[props.type] : (_a = props.customIcon) !== null && _a !== void 0 ? _a : "warning", fill: props.inverted ? IconFillColors.white : undefined, ariaHidden: true }))),
40
40
  React.createElement("span", { className: "alert-box__body" }, typeof props.children === "string" ? React.createElement("p", null, props.children) : props.children)),
41
- closeable && (React.createElement("button", { className: "alert-box__close ".concat(props.inverted ? "text-white" : ""), onClick: onClose, "aria-label": "close alert" },
41
+ closeable && (React.createElement("button", { className: "alert-box__close ".concat(props.inverted ? "alert-box__close-inverted" : ""), onClick: onClose, "aria-label": "close alert" },
42
42
  React.createElement("span", { "aria-hidden": true }, "\u00D7"))))));
43
43
  if (props.boundToLayoutWidth) {
44
44
  innerSection = React.createElement("div", { className: "alert-box_inner" }, innerSection);
@@ -1 +1 @@
1
- {"version":3,"file":"AlertBox.js","sourceRoot":"","sources":["../../../src/notifications/AlertBox.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AlertBox.js","sourceRoot":"","sources":["../../../src/notifications/AlertBox.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "10.0.6",
3
+ "version": "10.0.8",
4
4
  "author": "Sean Albert <sean.albert@exygy.com>",
5
5
  "description": "Shared user interface components for Bloom affordable housing system",
6
6
  "homepage": "https://github.com/bloom-housing/ui-components",
@@ -60,6 +60,7 @@ const ProgressNavItem = (props: {
60
60
  const ProgressNav = (props: {
61
61
  currentPageSection: number
62
62
  completedSections: number
63
+ removeSrHeader?: boolean
63
64
  labels: string[]
64
65
  mounted: boolean
65
66
  style?: ProgressNavStyle
@@ -70,10 +71,12 @@ const ProgressNav = (props: {
70
71
  let navClasses = "progress-nav"
71
72
  if (props.style === "bar") navClasses += " progress-nav__bar"
72
73
  return (
73
- <div aria-label="progress">
74
- <h2 className="sr-only">
75
- {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")}
76
- </h2>
74
+ <div aria-label={"progress"}>
75
+ {!props.removeSrHeader && (
76
+ <h2 className="sr-only">
77
+ {props.strings?.screenReaderHeading ?? t("progressNav.srHeading")}
78
+ </h2>
79
+ )}
77
80
  <ol className={!props.mounted ? "invisible" : navClasses}>
78
81
  {props.labels.map((label, i) => (
79
82
  <ProgressNavItem
@@ -15,6 +15,9 @@
15
15
  --font-weight: 500;
16
16
  --max-width: var(--bloom-width-5xl);
17
17
  --line-height: 1.375;
18
+ --body-margin: inherit;
19
+ --body-font-size: var(--bloom-font-size-sm);
20
+ --body-close-font-size: var(--bloom-font-size-2xl);
18
21
 
19
22
  padding: var(--vertical-padding) var(--horizontal-padding);
20
23
  background-color: var(--background-color);
@@ -46,6 +49,10 @@
46
49
  color: var(--bloom-color-white);
47
50
  text-decoration: underline;
48
51
  }
52
+
53
+ svg {
54
+ fill: var(--bloom-color-white);
55
+ }
49
56
  }
50
57
 
51
58
  &.alert {
@@ -91,11 +98,12 @@
91
98
 
92
99
  .alert-box__body {
93
100
  font-weight: var(--font-weight);
94
- font-size: var(--bloom-font-size-sm);
101
+ font-size: var(--body-font-size);
102
+ margin: var(--body-margin);
95
103
  }
96
104
 
97
105
  .alert-box__close {
98
- font-size: var(--bloom-font-size-2xl);
106
+ font-size: var(--body-close-font-size);
99
107
  right: var(--horizontal-padding);
100
108
  margin-left: var(--bloom-s3);
101
109
  padding: 0;
@@ -103,6 +111,10 @@
103
111
  color: var(--close-icon-color);
104
112
  }
105
113
 
114
+ .alert-box__close-inverted {
115
+ color: white;
116
+ }
117
+
106
118
  .alert-box__icon {
107
119
  margin-right: var(--bloom-s3);
108
120
  }
@@ -68,7 +68,7 @@ const AlertBox = (props: AlertBoxProps) => {
68
68
 
69
69
  {closeable && (
70
70
  <button
71
- className={`alert-box__close ${props.inverted ? "text-white" : ""}`}
71
+ className={`alert-box__close ${props.inverted ? "alert-box__close-inverted" : ""}`}
72
72
  onClick={onClose}
73
73
  aria-label="close alert"
74
74
  >