@bloom-housing/ui-components 12.7.4 → 12.7.6

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 (8) hide show
  1. package/dist/src/forms/TimeField.d.ts +2 -1
  2. package/dist/src/forms/TimeField.stories.d.ts +1 -0
  3. package/dist/src/forms/TimeField.stories.js +6 -0
  4. package/dist/src/forms/TimeField.stories.js.map +1 -1
  5. package/package.json +1 -2
  6. package/src/forms/TimeField.stories.tsx +21 -0
  7. package/src/forms/TimeField.tsx +1 -1
  8. package/src/notifications/AlertBox.scss +7 -9
package/dist/src/forms/TimeField.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import React from "react";
1
2
  import { UseFormMethods } from "react-hook-form";
2
3
  export type TimeFieldPeriod = "am" | "pm";
3
4
  export type TimeFieldValues = {
@@ -11,7 +12,7 @@ export type TimeFieldProps = {
11
12
  disabled?: boolean;
12
13
  error?: boolean;
13
14
  id?: string;
14
- label: string;
15
+ label: string | React.ReactNode;
15
16
  labelClass?: string;
16
17
  name?: string;
17
18
  readerOnly?: boolean;
package/dist/src/forms/TimeField.stories.d.ts CHANGED
@@ -4,3 +4,4 @@ declare const _default: {
4
4
  };
5
5
  export default _default;
6
6
  export declare const Default: () => JSX.Element;
7
+ export declare const FormattedLabel: () => JSX.Element;
package/dist/src/forms/TimeField.stories.js CHANGED
@@ -9,4 +9,10 @@ export var Default = function () {
9
9
  var _a = useForm({ mode: "onChange" }), register = _a.register, setValue = _a.setValue, watch = _a.watch, errors = _a.errors;
10
10
  return (React.createElement(TimeField, { id: "time", label: "Time", name: "time", required: true, register: register, setValue: setValue, watch: watch, error: !!(errors === null || errors === void 0 ? void 0 : errors.time) }));
11
11
  };
12
+ export var FormattedLabel = function () {
13
+ var _a = useForm({ mode: "onChange" }), register = _a.register, setValue = _a.setValue, watch = _a.watch, errors = _a.errors;
14
+ return (React.createElement(TimeField, { id: "time", label: React.createElement(React.Fragment, null,
15
+ "Time ",
16
+ React.createElement("strong", { className: "text-alert" }, "*")), name: "time", required: true, register: register, setValue: setValue, watch: watch, error: !!(errors === null || errors === void 0 ? void 0 : errors.time) }));
17
+ };
12
18
  //# sourceMappingURL=TimeField.stories.js.map
package/dist/src/forms/TimeField.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TimeField.stories.js","sourceRoot":"","sources":["../../../src/forms/TimeField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACf,IAAA,KAAwC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAnE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAkC,CAAA;IAE3E,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA,GACrB,CACH,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"TimeField.stories.js","sourceRoot":"","sources":["../../../src/forms/TimeField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG;IACf,IAAA,KAAwC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAnE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAkC,CAAA;IAE3E,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA,GACrB,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,cAAc,GAAG;IACtB,IAAA,KAAwC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAnE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAkC,CAAA;IAE3E,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,KAAK,EACH;;YACO,gCAAQ,SAAS,EAAE,YAAY,QAAY,CAC/C,EAEL,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAA,GACrB,CACH,CAAA;AACH,CAAC,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "12.7.4",
3
+ "version": "12.7.6",
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",
@@ -130,7 +130,6 @@
130
130
  "ag-grid-community": "^26.0.0",
131
131
  "ag-grid-react": "^26.0.0",
132
132
  "aria-autocomplete": "^1.4.0",
133
- "axios": "0.21.2",
134
133
  "dayjs": "^1.10.7",
135
134
  "jwt-decode": "^2.2.0",
136
135
  "markdown-to-jsx": "7.1.8",
package/src/forms/TimeField.stories.tsx CHANGED
@@ -23,3 +23,24 @@ export const Default = () => {
23
23
  />
24
24
  )
25
25
  }
26
+
27
+ export const FormattedLabel = () => {
28
+ const { register, setValue, watch, errors } = useForm({ mode: "onChange" })
29
+
30
+ return (
31
+ <TimeField
32
+ id="time"
33
+ label={
34
+ <>
35
+ Time <strong className={"text-alert"}>*</strong>
36
+ </>
37
+ }
38
+ name="time"
39
+ required={true}
40
+ register={register}
41
+ setValue={setValue}
42
+ watch={watch}
43
+ error={!!errors?.time}
44
+ />
45
+ )
46
+ }
package/src/forms/TimeField.tsx CHANGED
@@ -21,7 +21,7 @@ export type TimeFieldProps = {
21
21
  disabled?: boolean
22
22
  error?: boolean
23
23
  id?: string
24
- label: string
24
+ label: string | React.ReactNode
25
25
  labelClass?: string
26
26
  name?: string
27
27
  readerOnly?: boolean
package/src/notifications/AlertBox.scss CHANGED
@@ -31,16 +31,14 @@
31
31
  .alert-box_inner {
32
32
  margin: auto;
33
33
  max-width: var(--max-width);
34
- padding-right: var(--horizontal-padding);
35
- padding-left: var(--horizontal-padding);
34
+ padding-inline: var(--horizontal-padding);
36
35
  flex: 1;
37
36
  display: flex;
38
37
  align-items: center;
39
38
  }
40
39
 
41
40
  &.narrow {
42
- padding-top: var(--bloom-s1_5);
43
- padding-bottom: var(--bloom-s1_5);
41
+ padding-block: var(--bloom-s1_5);
44
42
  }
45
43
 
46
44
  &.invert {
@@ -105,7 +103,7 @@
105
103
  .alert-box__close {
106
104
  font-size: var(--body-close-font-size);
107
105
  right: var(--horizontal-padding);
108
- margin-left: var(--bloom-s3);
106
+ margin-inline-start: var(--bloom-s3);
109
107
  padding: 0;
110
108
  line-height: var(--bloom-s4);
111
109
  color: var(--close-icon-color);
@@ -116,14 +114,14 @@
116
114
  }
117
115
 
118
116
  .alert-box__icon {
119
- margin-right: var(--bloom-s3);
117
+ margin-inline-end: var(--bloom-s3);
120
118
  }
121
119
 
122
120
  .alert-box__sticky {
123
121
  position: sticky;
124
122
  top: var(--bloom-s3);
125
- margin-top: var(--bloom-s3);
126
- margin-right: var(--bloom-s3);
123
+ margin-block-start: var(--bloom-s3);
124
+ margin-inline-end: var(--bloom-s3);
127
125
  z-index: 10;
128
126
  margin-left: auto;
129
127
  width: fit-content;
@@ -131,5 +129,5 @@
131
129
 
132
130
  .alert-box__sticky + * {
133
131
  --alert-box-height: -3.6rem;
134
- margin-top: var(--alert-box-height);
132
+ margin-block-start: var(--alert-box-height);
135
133
  }