@bloom-housing/ui-components 9.0.1 → 9.0.3

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.
Files changed (15) hide show
  1. package/dist/src/actions/Button.d.ts +3 -0
  2. package/dist/src/actions/Button.js +2 -2
  3. package/dist/src/actions/Button.js.map +1 -1
  4. package/dist/src/blocks/ViewItem.js +1 -1
  5. package/dist/src/blocks/ViewItem.js.map +1 -1
  6. package/dist/src/icons/Icon.d.ts +3 -1
  7. package/dist/src/icons/Icon.js +3 -3
  8. package/dist/src/icons/Icon.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/actions/Button.scss +8 -4
  11. package/src/actions/Button.tsx +17 -2
  12. package/src/blocks/ViewItem.scss +38 -26
  13. package/src/blocks/ViewItem.tsx +1 -1
  14. package/src/icons/Icon.scss +5 -0
  15. package/src/icons/Icon.tsx +17 -2
package/dist/src/actions/Button.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface ButtonProps extends AppearanceProps {
12
12
  disabled?: boolean;
13
13
  fullWidth?: boolean;
14
14
  icon?: UniversalIconType;
15
+ iconClass?: string;
16
+ iconColor?: string;
15
17
  iconPlacement?: "left" | "right";
16
18
  iconSize?: IconSize;
17
19
  id?: string;
@@ -19,6 +21,7 @@ export interface ButtonProps extends AppearanceProps {
19
21
  inlineIcon?: "left" | "right";
20
22
  loading?: boolean;
21
23
  onClick?: (e: React.MouseEvent) => void;
24
+ passToIconClass?: string;
22
25
  transition?: boolean;
23
26
  type?: "button" | "submit" | "reset";
24
27
  unstyled?: boolean;
package/dist/src/actions/Button.js CHANGED
@@ -27,10 +27,10 @@ export var buttonInner = function (props) {
27
27
  var iconSize = props.inline || props.inlineIcon ? "tiny" : "small";
28
28
  if (props.icon) {
29
29
  return props.inlineIcon == "left" || props.iconPlacement == "left" ? (React.createElement(React.Fragment, null,
30
- React.createElement(Icon, { className: "button__icon", size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : iconSize, symbol: props.icon }),
30
+ React.createElement(Icon, { className: "button__icon ".concat(props.iconClass || ""), size: (_a = props.iconSize) !== null && _a !== void 0 ? _a : iconSize, symbol: props.icon, iconClass: props.passToIconClass, fill: props.iconColor }),
31
31
  React.createElement("span", { className: "button__content" }, props.children))) : (React.createElement(React.Fragment, null,
32
32
  React.createElement("span", { className: "button__content" }, props.children),
33
- React.createElement(Icon, { className: "button__icon", size: (_b = props.iconSize) !== null && _b !== void 0 ? _b : iconSize, symbol: props.icon })));
33
+ React.createElement(Icon, { className: "button__icon ".concat(props.iconClass || ""), size: (_b = props.iconSize) !== null && _b !== void 0 ? _b : iconSize, symbol: props.icon, iconClass: props.passToIconClass, fill: props.iconColor })));
34
34
  }
35
35
  else if (props.loading) {
36
36
  return (React.createElement(React.Fragment, null,
package/dist/src/actions/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/actions/Button.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/actions/Button.tsx"],"names":[],"mappings":"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"}
package/dist/src/blocks/ViewItem.js CHANGED
@@ -12,7 +12,7 @@ var ViewItem = function (props) {
12
12
  if (props.truncated)
13
13
  valueClassName += " is-truncated";
14
14
  return (React.createElement("div", { id: props.id, className: viewItemClasses.join(" "), "data-test-id": props.dataTestId },
15
- props.label && (React.createElement("span", { className: "view-item__label ".concat(props.error ? "text-alert text-sm" : "") }, props.label)),
15
+ props.label && (React.createElement("span", { className: "view-item__label ".concat(props.error ? "view-item__label-error" : "") }, props.label)),
16
16
  props.children && (React.createElement("span", { className: valueClassName, "data-test-id": props.dataTestId }, props.children)),
17
17
  props.helper && React.createElement("span", { className: "view-item__helper" }, props.helper)));
18
18
  };
package/dist/src/blocks/ViewItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ViewItem.js","sourceRoot":"","sources":["../../../src/blocks/ViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,iBAAiB,CAAA;AAcxB,IAAM,QAAQ,GAAG,UAAC,KAAoB;IACpC,IAAM,eAAe,GAAG,CAAC,WAAW,CAAC,CAAA;IACrC,IAAI,KAAK,CAAC,OAAO;QAAE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACrD,IAAI,KAAK,CAAC,SAAS;QAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAE1D,IAAI,cAAc,GAAG,kBAAkB,CAAA;IACvC,IAAI,CAAC,KAAK,CAAC,KAAK;QAAE,cAAc,IAAI,OAAO,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,cAAc,IAAI,eAAe,CAAA;IAEtD,OAAO,CACL,6BAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAgB,KAAK,CAAC,UAAU;QACpF,KAAK,CAAC,KAAK,IAAI,CACd,8BAAM,SAAS,EAAE,2BAAoB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAE,IAC3E,KAAK,CAAC,KAAK,CACP,CACR;QACA,KAAK,CAAC,QAAQ,IAAI,CACjB,8BAAM,SAAS,EAAE,cAAc,kBAAgB,KAAK,CAAC,UAAU,IAC5D,KAAK,CAAC,QAAQ,CACV,CACR;QACA,KAAK,CAAC,MAAM,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,MAAM,CAAQ,CACtE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAA"}
1
+ {"version":3,"file":"ViewItem.js","sourceRoot":"","sources":["../../../src/blocks/ViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,iBAAiB,CAAA;AAcxB,IAAM,QAAQ,GAAG,UAAC,KAAoB;IACpC,IAAM,eAAe,GAAG,CAAC,WAAW,CAAC,CAAA;IACrC,IAAI,KAAK,CAAC,OAAO;QAAE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACrD,IAAI,KAAK,CAAC,SAAS;QAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAE1D,IAAI,cAAc,GAAG,kBAAkB,CAAA;IACvC,IAAI,CAAC,KAAK,CAAC,KAAK;QAAE,cAAc,IAAI,OAAO,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,cAAc,IAAI,eAAe,CAAA;IAEtD,OAAO,CACL,6BAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAgB,KAAK,CAAC,UAAU;QACpF,KAAK,CAAC,KAAK,IAAI,CACd,8BAAM,SAAS,EAAE,2BAAoB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAE,IAC/E,KAAK,CAAC,KAAK,CACP,CACR;QACA,KAAK,CAAC,QAAQ,IAAI,CACjB,8BAAM,SAAS,EAAE,cAAc,kBAAgB,KAAK,CAAC,UAAU,IAC5D,KAAK,CAAC,QAAQ,CACV,CACR;QACA,KAAK,CAAC,MAAM,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,MAAM,CAAQ,CACtE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAA"}
package/dist/src/icons/Icon.d.ts CHANGED
@@ -72,14 +72,16 @@ export declare const IconFillColors: {
72
72
  primary: string;
73
73
  alert: string;
74
74
  };
75
- export type IconSize = "tiny" | "small" | "base" | "medium" | "large" | "xlarge" | "2xl" | "3xl";
75
+ export type IconSize = "tiny" | "small" | "base" | "medium" | "md-large" | "large" | "xlarge" | "2xl" | "3xl";
76
76
  export interface IconProps {
77
77
  size: IconSize;
78
78
  symbol: UniversalIconType;
79
79
  className?: string;
80
80
  fill?: string;
81
81
  ariaHidden?: boolean;
82
+ iconClass?: string;
82
83
  dataTestId?: string;
84
+ tabIndex?: number;
83
85
  }
84
86
  declare const Icon: (props: IconProps) => JSX.Element;
85
87
  export { Icon as default, Icon };
package/dist/src/icons/Icon.js CHANGED
@@ -72,7 +72,7 @@ export var IconFillColors = {
72
72
  alert: "#b91c1c",
73
73
  };
74
74
  var Icon = function (props) {
75
- var _a, _b;
75
+ var _a, _b, _c;
76
76
  var wrapperClasses = ["ui-icon"];
77
77
  wrapperClasses.push("ui-".concat(props.size));
78
78
  if (props.className)
@@ -80,8 +80,8 @@ var Icon = function (props) {
80
80
  if (props.symbol == "spinner")
81
81
  wrapperClasses.push("spinner-animation");
82
82
  var SpecificIcon = typeof props.symbol === "string" ? (IconMap[props.symbol]) : (React.createElement(FontAwesomeIcon, { icon: props.symbol }));
83
- return typeof props.symbol === "string" ? (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : null },
84
- React.createElement(SpecificIcon, { fill: props.fill ? props.fill : undefined }))) : (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_b = props.dataTestId) !== null && _b !== void 0 ? _b : null, style: { color: props.fill } }, SpecificIcon));
83
+ return typeof props.symbol === "string" ? (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : null, tabIndex: props.tabIndex },
84
+ React.createElement(SpecificIcon, { fill: props.fill ? props.fill : undefined, className: (_b = props.iconClass) !== null && _b !== void 0 ? _b : undefined }))) : (React.createElement("span", { className: wrapperClasses.join(" "), "aria-hidden": props.ariaHidden, "data-test-id": (_c = props.dataTestId) !== null && _c !== void 0 ? _c : null, style: { color: props.fill } }, SpecificIcon));
85
85
  };
86
86
  export { Icon as default, Icon };
87
87
  //# sourceMappingURL=Icon.js.map
package/dist/src/icons/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/icons/Icon.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/icons/Icon.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": "9.0.1",
3
+ "version": "9.0.3",
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",
package/src/actions/Button.scss CHANGED
@@ -15,6 +15,10 @@
15
15
  --big-rounded: var(--bloom-rounded);
16
16
  --big-padding: var(--bloom-s6);
17
17
  --big-font-size: var(--bloom-font-size-xs);
18
+ --secondary-text-color: var(--bloom-text-color-light);
19
+ --unstyled-inline-font-size: var(--bloom-font-size-sm);
20
+ --inline-font-size: var(--bloom-font-size-sm);
21
+ --caps-font-size: var(--bloom-font-size-sm);
18
22
 
19
23
  /* Base Styles */
20
24
  position: relative;
@@ -54,7 +58,7 @@
54
58
 
55
59
  &.is-secondary {
56
60
  border-color: var(--bloom-color-gray-700);
57
- color: var(--bloom-text-color-light);
61
+ color: var(--secondary-text-color);
58
62
 
59
63
  &:hover {
60
64
  background-color: var(--bloom-color-gray-700);
@@ -93,7 +97,7 @@
93
97
  font-weight: 400;
94
98
  text-decoration: underline;
95
99
  margin: var(--bloom-s4);
96
- font-size: var(--bloom-font-size-sm);
100
+ font-size: var(--unstyled-inline-font-size);
97
101
 
98
102
  &:hover {
99
103
  color: var(--bloom-color-primary);
@@ -104,7 +108,7 @@
104
108
  &.is-inline {
105
109
  color: var(--bloom-color-primary);
106
110
  font-weight: 600;
107
- font-size: var(--bloom-font-size-sm);
111
+ font-size: var(--inline-font-size);
108
112
  margin: 0;
109
113
  text-decoration: none;
110
114
 
@@ -140,7 +144,7 @@
140
144
  text-decoration: underline;
141
145
  margin: var(--bloom-s4);
142
146
  text-transform: uppercase;
143
- font-size: var(--bloom-font-size-sm);
147
+ font-size: var(--caps-font-size);
144
148
  display: block;
145
149
 
146
150
  &:hover {
package/src/actions/Button.tsx CHANGED
@@ -13,6 +13,8 @@ export interface ButtonProps extends AppearanceProps {
13
13
  disabled?: boolean
14
14
  fullWidth?: boolean
15
15
  icon?: UniversalIconType
16
+ iconClass?: string
17
+ iconColor?: string
16
18
  iconPlacement?: "left" | "right"
17
19
  iconSize?: IconSize
18
20
  id?: string
@@ -21,6 +23,7 @@ export interface ButtonProps extends AppearanceProps {
21
23
  inlineIcon?: "left" | "right"
22
24
  loading?: boolean
23
25
  onClick?: (e: React.MouseEvent) => void
26
+ passToIconClass?: string
24
27
  transition?: boolean
25
28
  type?: "button" | "submit" | "reset"
26
29
  unstyled?: boolean
@@ -47,13 +50,25 @@ export const buttonInner = (props: Omit<ButtonProps, "onClick">) => {
47
50
  if (props.icon) {
48
51
  return props.inlineIcon == "left" || props.iconPlacement == "left" ? (
49
52
  <>
50
- <Icon className="button__icon" size={props.iconSize ?? iconSize} symbol={props.icon} />
53
+ <Icon
54
+ className={`button__icon ${props.iconClass || ""}`}
55
+ size={props.iconSize ?? iconSize}
56
+ symbol={props.icon}
57
+ iconClass={props.passToIconClass}
58
+ fill={props.iconColor}
59
+ />
51
60
  <span className="button__content">{props.children}</span>
52
61
  </>
53
62
  ) : (
54
63
  <>
55
64
  <span className="button__content">{props.children}</span>
56
- <Icon className="button__icon" size={props.iconSize ?? iconSize} symbol={props.icon} />
65
+ <Icon
66
+ className={`button__icon ${props.iconClass || ""}`}
67
+ size={props.iconSize ?? iconSize}
68
+ symbol={props.icon}
69
+ iconClass={props.passToIconClass}
70
+ fill={props.iconColor}
71
+ />
57
72
  </>
58
73
  )
59
74
  } else if (props.loading) {
package/src/blocks/ViewItem.scss CHANGED
@@ -1,59 +1,71 @@
1
1
  @import "../global/mixins.scss";
2
2
 
3
3
  .view-item {
4
- @apply relative;
5
- @apply text-base;
6
- @apply mb-4;
4
+ --label-font-size: var(--bloom-font-size-sm);
5
+ --helper-font-size: var(--bloom-font-size-sm);
6
+ --label-error-font-size: var(--bloom-font-size-sm);
7
+ --label-text-color: var(--bloom-color-gray-800);
8
+ --helper-text-color: var(--bloom-color-gray-750);
9
+ --font-size: var(--bloom-font-size-base);
10
+ --bottom-margin: var(--bloom-s4);
11
+
12
+ font-size: var(--font-size);
13
+ margin-bottom: var(--bottom-margin);
14
+ position: relative;
7
15
 
8
16
  &:last-of-type {
9
- @apply mb-0;
17
+ margin-bottom: 0;
10
18
  }
11
19
 
12
20
  &.is-flagged {
13
- @apply bg-warn-light;
14
- @apply -my-1;
15
- @apply py-1;
16
- @apply -ml-8;
17
- @apply pl-8;
18
- box-shadow: inset 2px 0px 0px 0px $tailwind-warn;
21
+ background-color: var(--bloom-color-warn-light);
22
+ margin: calc(var(--bloom-s1) * -1) 0;
23
+ margin-left: calc(var(--bloom-s8) * -1);
24
+ padding: var(--bloom-s1) 0;
25
+ padding-left: var(--bloom-s8);
26
+ box-shadow: inset 2px 0px 0px 0px var(--bloom-color-warn);
19
27
  }
20
28
 
21
29
  .edit-link {
22
- @apply absolute;
30
+ position: absolute;
23
31
  right: 0;
24
32
  top: 0;
25
33
  }
26
34
  }
27
35
 
28
36
  .view-item__label {
29
- @apply text-gray-800;
30
- @apply font-sans;
31
- @apply text-sm;
32
- @apply block;
37
+ color: var(--label-text-color);
38
+ font-family: var(--bloom-font-sans);
39
+ font-size: var(--label-font-size);
40
+ display: block;
41
+ }
42
+
43
+ .view-item__label-error {
44
+ color: var(--bloom-color-alert);
45
+ font-size: var(--label-error-font-size);
33
46
  }
34
47
 
35
48
  .view-item__value {
36
- @apply font-alt-sans;
37
- @apply tracking-wide;
38
- @apply font-semibold;
39
- @apply block;
49
+ font-family: var(--bloom-font-alt-sans);
50
+ letter-spacing: var(--bloom-letter-spacing-wide);
51
+ font-weight: 600;
52
+ display: block;
40
53
  padding-top: 10px;
41
54
 
42
55
  &.is-truncated {
43
56
  @include ellipsis;
44
57
  }
45
58
 
46
- // do not change font-family for inputs
47
59
  .field .control .input,
48
60
  .error-message {
49
- @apply font-sans;
50
- @apply font-normal;
61
+ font-family: var(--bloom-font-sans);
62
+ font-weight: 400;
51
63
  }
52
64
  }
53
65
 
54
66
  .view-item__helper {
55
- @apply text-gray-750;
56
- @apply font-sans;
57
- @apply text-sm;
58
- @apply block;
67
+ color: var(--helper-text-color);
68
+ font-family: var(--bloom-font-sans);
69
+ font-size: var(--helper-font-size);
70
+ display: block;
59
71
  }
package/src/blocks/ViewItem.tsx CHANGED
@@ -25,7 +25,7 @@ const ViewItem = (props: ViewItemProps) => {
25
25
  return (
26
26
  <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
27
27
  {props.label && (
28
- <span className={`view-item__label ${props.error ? "text-alert text-sm" : ""}`}>
28
+ <span className={`view-item__label ${props.error ? "view-item__label-error" : ""}`}>
29
29
  {props.label}
30
30
  </span>
31
31
  )}
package/src/icons/Icon.scss CHANGED
@@ -42,6 +42,11 @@
42
42
  @apply h-4;
43
43
  }
44
44
 
45
+ .ui-md-large svg {
46
+ @apply w-6;
47
+ @apply h-6;
48
+ }
49
+
45
50
  .ui-large svg {
46
51
  @apply w-8;
47
52
  @apply h-8;
package/src/icons/Icon.tsx CHANGED
@@ -143,7 +143,16 @@ export const IconFillColors = {
143
143
  alert: "#b91c1c",
144
144
  }
145
145
 
146
- export type IconSize = "tiny" | "small" | "base" | "medium" | "large" | "xlarge" | "2xl" | "3xl"
146
+ export type IconSize =
147
+ | "tiny"
148
+ | "small"
149
+ | "base"
150
+ | "medium"
151
+ | "md-large"
152
+ | "large"
153
+ | "xlarge"
154
+ | "2xl"
155
+ | "3xl"
147
156
 
148
157
  export interface IconProps {
149
158
  size: IconSize
@@ -151,7 +160,9 @@ export interface IconProps {
151
160
  className?: string
152
161
  fill?: string
153
162
  ariaHidden?: boolean
163
+ iconClass?: string
154
164
  dataTestId?: string
165
+ tabIndex?: number
155
166
  }
156
167
 
157
168
  const Icon = (props: IconProps) => {
@@ -172,8 +183,12 @@ const Icon = (props: IconProps) => {
172
183
  className={wrapperClasses.join(" ")}
173
184
  aria-hidden={props.ariaHidden}
174
185
  data-test-id={props.dataTestId ?? null}
186
+ tabIndex={props.tabIndex}
175
187
  >
176
- <SpecificIcon fill={props.fill ? props.fill : undefined} />
188
+ <SpecificIcon
189
+ fill={props.fill ? props.fill : undefined}
190
+ className={props.iconClass ?? undefined}
191
+ />
177
192
  </span>
178
193
  ) : (
179
194
  <span