@bloom-housing/ui-components 14.0.1 → 14.1.0
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.
- package/dist/__tests__/forms/PasswordField.test.d.ts +1 -0
- package/dist/__tests__/forms/PasswordField.test.js +53 -0
- package/dist/__tests__/forms/PasswordField.test.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/src/forms/FieldGroup.d.ts +2 -1
- package/dist/src/forms/FieldGroup.js +10 -7
- package/dist/src/forms/FieldGroup.js.map +1 -1
- package/dist/src/forms/PasswordField.d.ts +10 -0
- package/dist/src/forms/PasswordField.js +40 -0
- package/dist/src/forms/PasswordField.js.map +1 -0
- package/dist/src/forms/PasswordField.stories.d.ts +9 -0
- package/dist/src/forms/PasswordField.stories.js +20 -0
- package/dist/src/forms/PasswordField.stories.js.map +1 -0
- package/index.ts +1 -0
- package/package.json +2 -2
- package/src/forms/FieldGroup.tsx +22 -12
- package/src/forms/PasswordField.stories.tsx +40 -0
- package/src/forms/PasswordField.tsx +48 -0
- package/src/global/forms.scss +7 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { render, cleanup, fireEvent } from "@testing-library/react";
|
|
3
|
+
import { PasswordField } from "../../src/forms/PasswordField";
|
|
4
|
+
import { useForm } from "react-hook-form";
|
|
5
|
+
afterEach(cleanup);
|
|
6
|
+
var PasswordFieldDefault = function () {
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
8
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
9
|
+
return React.createElement(PasswordField, { register: register, name: "password", label: "Password" });
|
|
10
|
+
};
|
|
11
|
+
var PasswordFieldError = function () {
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
13
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
14
|
+
return (React.createElement(PasswordField, { register: register, name: "password", label: "Password", error: true, errorMessage: "Wrong password" }));
|
|
15
|
+
};
|
|
16
|
+
var PasswordFieldCustomLabels = function () {
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/unbound-method
|
|
18
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
19
|
+
return (React.createElement(PasswordField, { register: register, name: "password", label: "Password", showPasswordLabel: "Disclose password" }));
|
|
20
|
+
};
|
|
21
|
+
describe("<PasswordField>", function () {
|
|
22
|
+
it("renders a password input with a show password checkbox", function () {
|
|
23
|
+
var getByLabelText = render(React.createElement(PasswordFieldDefault, null)).getByLabelText;
|
|
24
|
+
var input = getByLabelText("Password");
|
|
25
|
+
expect(input.type).toBe("password");
|
|
26
|
+
expect(getByLabelText("Show password")).toBeTruthy();
|
|
27
|
+
});
|
|
28
|
+
it("toggles the input type when the checkbox is clicked", function () {
|
|
29
|
+
var getByLabelText = render(React.createElement(PasswordFieldDefault, null)).getByLabelText;
|
|
30
|
+
var input = getByLabelText("Password");
|
|
31
|
+
var checkbox = getByLabelText("Show password");
|
|
32
|
+
fireEvent.click(checkbox);
|
|
33
|
+
expect(input.type).toBe("text");
|
|
34
|
+
fireEvent.click(checkbox);
|
|
35
|
+
expect(input.type).toBe("password");
|
|
36
|
+
});
|
|
37
|
+
it("preserves the typed value when toggling visibility", function () {
|
|
38
|
+
var getByLabelText = render(React.createElement(PasswordFieldDefault, null)).getByLabelText;
|
|
39
|
+
var input = getByLabelText("Password");
|
|
40
|
+
fireEvent.change(input, { target: { value: "hunter2" } });
|
|
41
|
+
fireEvent.click(getByLabelText("Show password"));
|
|
42
|
+
expect(input.value).toBe("hunter2");
|
|
43
|
+
});
|
|
44
|
+
it("renders the error message when passed through", function () {
|
|
45
|
+
var getByText = render(React.createElement(PasswordFieldError, null)).getByText;
|
|
46
|
+
expect(getByText("Wrong password")).toBeTruthy();
|
|
47
|
+
});
|
|
48
|
+
it("supports a custom show password label", function () {
|
|
49
|
+
var getByLabelText = render(React.createElement(PasswordFieldCustomLabels, null)).getByLabelText;
|
|
50
|
+
expect(getByLabelText("Disclose password")).toBeTruthy();
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=PasswordField.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PasswordField.test.js","sourceRoot":"","sources":["../../../__tests__/forms/PasswordField.test.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export * from "./src/forms/DateField";
|
|
|
26
26
|
export * from "./src/forms/DOBField";
|
|
27
27
|
export * from "./src/forms/Dropzone";
|
|
28
28
|
export * from "./src/forms/Field";
|
|
29
|
+
export * from "./src/forms/PasswordField";
|
|
29
30
|
export * from "./src/forms/PhoneField";
|
|
30
31
|
export * from "./src/forms/PhoneMask";
|
|
31
32
|
export * from "./src/forms/HouseholdMemberForm";
|
package/dist/index.js
CHANGED
|
@@ -31,6 +31,7 @@ export * from "./src/forms/DateField";
|
|
|
31
31
|
export * from "./src/forms/DOBField";
|
|
32
32
|
export * from "./src/forms/Dropzone";
|
|
33
33
|
export * from "./src/forms/Field";
|
|
34
|
+
export * from "./src/forms/PasswordField";
|
|
34
35
|
export * from "./src/forms/PhoneField";
|
|
35
36
|
export * from "./src/forms/PhoneMask";
|
|
36
37
|
export * from "./src/forms/HouseholdMemberForm";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|
|
@@ -25,6 +25,7 @@ interface FieldGroupProps {
|
|
|
25
25
|
fieldLabelClassName?: string;
|
|
26
26
|
fields?: FieldSingle[];
|
|
27
27
|
groupLabel?: string | React.ReactNode;
|
|
28
|
+
groupLabelClassName?: string;
|
|
28
29
|
groupNote?: string;
|
|
29
30
|
groupSubNote?: string;
|
|
30
31
|
name: string;
|
|
@@ -37,5 +38,5 @@ interface FieldGroupProps {
|
|
|
37
38
|
readMore?: string;
|
|
38
39
|
};
|
|
39
40
|
}
|
|
40
|
-
declare const FieldGroup: ({ name, groupLabel, fields, type, validation, error, errorMessage, groupNote, register, fieldGroupClassName, fieldClassName, fieldLabelClassName, groupSubNote, dataTestId, strings, }: FieldGroupProps) => React.JSX.Element;
|
|
41
|
+
declare const FieldGroup: ({ name, groupLabel, groupLabelClassName, fields, type, validation, error, errorMessage, groupNote, register, fieldGroupClassName, fieldClassName, fieldLabelClassName, groupSubNote, dataTestId, strings, }: FieldGroupProps) => React.JSX.Element;
|
|
41
42
|
export { FieldGroup as default, FieldGroup };
|
|
@@ -24,7 +24,7 @@ import { ErrorMessage } from "../notifications/ErrorMessage";
|
|
|
24
24
|
import { Field } from "./Field";
|
|
25
25
|
import { t } from "../helpers/translator";
|
|
26
26
|
var FieldGroup = function (_a) {
|
|
27
|
-
var name = _a.name, groupLabel = _a.groupLabel, fields = _a.fields, _b = _a.type, type = _b === void 0 ? "checkbox" : _b, _c = _a.validation, validation = _c === void 0 ? {} : _c, error = _a.error, errorMessage = _a.errorMessage, groupNote = _a.groupNote, register = _a.register, fieldGroupClassName = _a.fieldGroupClassName, fieldClassName = _a.fieldClassName, fieldLabelClassName = _a.fieldLabelClassName, groupSubNote = _a.groupSubNote, dataTestId = _a.dataTestId, strings = _a.strings;
|
|
27
|
+
var name = _a.name, groupLabel = _a.groupLabel, groupLabelClassName = _a.groupLabelClassName, fields = _a.fields, _b = _a.type, type = _b === void 0 ? "checkbox" : _b, _c = _a.validation, validation = _c === void 0 ? {} : _c, error = _a.error, errorMessage = _a.errorMessage, groupNote = _a.groupNote, register = _a.register, fieldGroupClassName = _a.fieldGroupClassName, fieldClassName = _a.fieldClassName, fieldLabelClassName = _a.fieldLabelClassName, groupSubNote = _a.groupSubNote, dataTestId = _a.dataTestId, strings = _a.strings;
|
|
28
28
|
// Always default align two-option radio groups side by side
|
|
29
29
|
if ((fields === null || fields === void 0 ? void 0 : fields.length) === 2) {
|
|
30
30
|
fieldGroupClassName = "".concat(fieldGroupClassName || "", " flex");
|
|
@@ -36,8 +36,8 @@ var FieldGroup = function (_a) {
|
|
|
36
36
|
};
|
|
37
37
|
var getIndividualInput = function (item) {
|
|
38
38
|
var _a, _b, _c;
|
|
39
|
-
return (React.createElement(
|
|
40
|
-
React.createElement("input", __assign({ "aria-describedby": "".concat(name, "-error"), "aria-invalid": !!error || false, type: type, id: item.id, defaultValue: item.value || item.id, name: subfieldsExist() || item.uniqueName ? "".concat(name, "-").concat(item.value || "") : name, onClick: function (e) {
|
|
39
|
+
return (React.createElement(React.Fragment, null,
|
|
40
|
+
React.createElement("input", __assign({ "aria-describedby": "".concat(name, "-error ").concat(item.note ? "".concat(item.id, "-note") : ""), "aria-invalid": !!error || false, type: type, id: item.id, defaultValue: item.value || item.id, name: subfieldsExist() || item.uniqueName ? "".concat(name, "-").concat(item.value || "") : name, onClick: function (e) {
|
|
41
41
|
var _a;
|
|
42
42
|
// We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
|
|
43
43
|
if (e.currentTarget.checked) {
|
|
@@ -48,7 +48,7 @@ var FieldGroup = function (_a) {
|
|
|
48
48
|
}
|
|
49
49
|
}, defaultChecked: item.defaultChecked || false, disabled: item.disabled, ref: register(validation) }, item.inputProps, { "data-testid": (_a = item.dataTestId) !== null && _a !== void 0 ? _a : dataTestId })),
|
|
50
50
|
React.createElement("label", { htmlFor: item.id, className: "font-semibold ".concat(fieldLabelClassName || "", " ").concat(item.disabled ? "text-gray-600 cursor-not-allowed" : "") }, item.label),
|
|
51
|
-
item.note && React.createElement("span", { className: "field-note font-normal" }, item.note),
|
|
51
|
+
item.note && (React.createElement("span", { id: "".concat(item.id, "-note"), className: "field-note font-normal" }, item.note)),
|
|
52
52
|
item.description && (React.createElement("div", { className: "ml-8 -mt-1 mb-5" },
|
|
53
53
|
React.createElement(ExpandableContent, { strings: {
|
|
54
54
|
readMore: (_b = strings === null || strings === void 0 ? void 0 : strings.readMore) !== null && _b !== void 0 ? _b : t("t.readMore"),
|
|
@@ -74,12 +74,15 @@ var FieldGroup = function (_a) {
|
|
|
74
74
|
}, [checkSelected, setCheckedInputs, fields]);
|
|
75
75
|
var getInputSet = function (item) {
|
|
76
76
|
var _a, _b;
|
|
77
|
-
return (React.createElement(
|
|
77
|
+
return (React.createElement(React.Fragment, null,
|
|
78
78
|
getIndividualInput(item),
|
|
79
79
|
item.additionalText && checkedInputs.indexOf(((_a = item.label) === null || _a === void 0 ? void 0 : _a.toString()) || "") >= 0 && (React.createElement(Field, { id: item.id, key: "".concat(item.value || "", "-additionalText"), name: "".concat(name, "-").concat(item.value || ""), register: register, defaultValue: item.defaultText, placeholder: (_b = strings === null || strings === void 0 ? void 0 : strings.description) !== null && _b !== void 0 ? _b : t("t.description"), className: "mb-4", disabled: item.disabled, dataTestId: item.dataTestId }))));
|
|
80
80
|
};
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
var describedBy = [groupSubNote ? "".concat(name, "-group-sub-note") : "", error ? "".concat(name, "-error") : ""]
|
|
82
|
+
.filter(Boolean)
|
|
83
|
+
.join(" ");
|
|
84
|
+
return (React.createElement("fieldset", __assign({}, (describedBy ? { "aria-describedby": describedBy } : {})),
|
|
85
|
+
groupLabel && (React.createElement("legend", { className: "text__caps-spaced ".concat(error ? "text-alert" : "", " ").concat(groupLabelClassName || "") }, groupLabel)),
|
|
83
86
|
groupNote && React.createElement("p", { className: "field-note mb-4" }, groupNote),
|
|
84
87
|
React.createElement("div", { className: "field ".concat(error ? "error" : "", " ").concat(fieldGroupClassName || "", " mb-0") }, fields === null || fields === void 0 ? void 0 : fields.map(function (item) {
|
|
85
88
|
var _a, _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/forms/FieldGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;AA0CzC,IAAM,UAAU,GAAG,UAAC,EAiBF;QAhBhB,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,mBAAmB,yBAAA,EACnB,MAAM,YAAA,EACN,YAAiB,EAAjB,IAAI,mBAAG,UAAU,KAAA,EACjB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,mBAAmB,yBAAA,EACnB,cAAc,oBAAA,EACd,mBAAmB,yBAAA,EACnB,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,OAAO,aAAA;IAEP,4DAA4D;IAC5D,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,MAAK,CAAC,EAAE;QACxB,mBAAmB,GAAG,UAAG,mBAAmB,IAAI,EAAE,UAAO,CAAA;QACzD,cAAc,GAAG,UAAG,cAAc,IAAI,EAAE,uBAAoB,CAAA;KAC7D;IAEK,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAA;IAEhE,IAAM,cAAc,GAAG;QACrB,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,EAAE,MAAM,CAAA;IAC1D,CAAC,CAAA;IAED,IAAM,kBAAkB,GAAG,UAAC,IAAiB;;QAC3C,OAAO,CACL;YACE,4DACoB,UAAG,IAAI,oBAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAG,IAAI,CAAC,EAAE,UAAO,CAAC,CAAC,CAAC,EAAE,CAAE,kBACzD,CAAC,CAAC,KAAK,IAAI,KAAK,EAC9B,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,YAAY,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,EACnC,IAAI,EAAE,cAAc,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAG,IAAI,cAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAE,CAAC,CAAC,CAAC,IAAI,EAChF,OAAO,EAAE,UAAC,CAAC;;oBACT,+HAA+H;oBAC/H,IAAI,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE;wBAC3B,gBAAgB,iCAAK,aAAa,UAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,KAAI,EAAE,UAAE,CAAA;qBACnE;yBAAM;wBACL,gBAAgB,CAAC,aAAa,CAAC,MAAM,CAAC,UAAC,MAAM,IAAK,OAAA,IAAI,CAAC,KAAK,KAAK,MAAM,EAArB,CAAqB,CAAC,CAAC,CAAA;qBAC1E;gBACH,CAAC,EACD,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,KAAK,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,QAAQ,CAAC,UAAU,CAAC,IACrB,IAAI,CAAC,UAAU,mBACN,MAAA,IAAI,CAAC,UAAU,mCAAI,UAAU,IAC1C;YACF,+BACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,SAAS,EAAE,wBAAiB,mBAAmB,IAAI,EAAE,cACnD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,CACvD,IAED,IAAI,CAAC,KAAK,CACL;YACP,IAAI,CAAC,IAAI,IAAI,CACZ,8BAAM,EAAE,EAAE,UAAG,IAAI,CAAC,EAAE,UAAO,EAAE,SAAS,EAAE,wBAAwB,IAC7D,IAAI,CAAC,IAAI,CACL,CACR;YAEA,IAAI,CAAC,WAAW,IAAI,CACnB,6BAAK,SAAS,EAAC,iBAAiB;gBAC9B,oBAAC,iBAAiB,IAChB,OAAO,EAAE;wBACP,QAAQ,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,CAAC,CAAC,YAAY,CAAC;wBAC9C,QAAQ,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,mCAAI,CAAC,CAAC,YAAY,CAAC;qBAC/C;oBAED,2BAAG,SAAS,EAAC,uBAAuB,IAAE,IAAI,CAAC,WAAW,CAAK,CACzC,CAChB,CACP,CACA,CACJ,CAAA;IACH,CAAC,CAAA;IAED,IAAM,aAAa,GAAG,WAAW,CAC/B,UAAC,UAAqC,EAAE,aAAuB;QAC7D,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC,UAAC,KAAK;;YACxB,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,aAAa,CAAC,IAAI,CAAC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC,CAAA;aAClD;YACD,IAAI,KAAK,CAAC,SAAS,EAAE;gBACnB,aAAa,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;aAC9C;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EACD,EAAE,CACH,CAAA;IAED,SAAS,CAAC;QACR,IAAM,aAAa,GAAa,EAAE,CAAA;QAClC,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;QACpC,gBAAgB,mBAAK,aAAa,QAAE,CAAA;IACtC,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC,CAAA;IAE7C,IAAM,WAAW,GAAG,UAAC,IAAiB;;QACpC,OAAO,CACL;YACG,kBAAkB,CAAC,IAAI,CAAC;YACxB,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,OAAO,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAClF,oBAAC,KAAK,IACJ,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,UAAG,IAAI,CAAC,KAAK,IAAI,EAAE,oBAAiB,EACzC,IAAI,EAAE,UAAG,IAAI,cAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAE,EACnC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,WAAW,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,CAAC,CAAC,eAAe,CAAC,EACvD,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,UAAU,GAC3B,CACH,CACA,CACJ,CAAA;IACH,CAAC,CAAA;IACD,IAAM,WAAW,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,UAAG,IAAI,oBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,UAAG,IAAI,WAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;SAC7F,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO,CACL,6CAAc,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACnE,UAAU,IAAI,CACb,gCACE,SAAS,EAAE,4BAAqB,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,cAAI,mBAAmB,IAAI,EAAE,CAAE,IAEvF,UAAU,CACJ,CACV;QACA,SAAS,IAAI,2BAAG,SAAS,EAAC,iBAAiB,IAAE,SAAS,CAAK;QAE5D,6BAAK,SAAS,EAAE,gBAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,cAAI,mBAAmB,IAAI,EAAE,UAAO,IAC9E,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,UAAC,IAAI;;YAAK,OAAA,CACrB,6BAAK,SAAS,EAAE,gBAAS,cAAc,IAAI,EAAE,UAAO,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE;gBAC/D,WAAW,CAAC,IAAI,CAAC;gBACjB,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,OAAO,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAC7E,6BAAK,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,UAAG,IAAI,CAAC,KAAK,IAAI,EAAE,eAAY,IACzD,MAAA,IAAI,CAAC,SAAS,0CAAE,GAAG,CAAC,UAAC,OAAO;oBAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,CAAA;gBAC7B,CAAC,CAAC,CACE,CACP,CACG,CACP,CAAA;SAAA,CAAC,CACE;QACL,YAAY,IAAI,CACf,2BAAG,EAAE,EAAE,UAAG,IAAI,oBAAiB,EAAE,SAAS,EAAC,gBAAgB,IACxD,YAAY,CACX,CACL;QACA,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,oBAAC,YAAY,IAAC,EAAE,EAAE,UAAG,IAAI,WAAQ,EAAE,KAAK,EAAE,KAAK,IAC5C,YAAY,CACA,CAChB,CAAC,CAAC,CAAC,CACF,8BAAM,EAAE,EAAE,UAAG,IAAI,WAAQ,GAAS,CACnC,CACQ,CACZ,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { FieldProps } from "./Field";
|
|
3
|
+
export interface PasswordFieldProps extends Omit<FieldProps, "type" | "postInputContent" | "className"> {
|
|
4
|
+
showPasswordLabel?: string;
|
|
5
|
+
checkboxDataTestId?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
fieldClassName?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const PasswordField: (props: PasswordFieldProps) => React.JSX.Element;
|
|
10
|
+
export { PasswordField as default, PasswordField };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import * as React from "react";
|
|
24
|
+
import { useState } from "react";
|
|
25
|
+
import { Field } from "./Field";
|
|
26
|
+
var PasswordField = function (props) {
|
|
27
|
+
var _a = props.showPasswordLabel, showPasswordLabel = _a === void 0 ? "Show password" : _a, checkboxDataTestId = props.checkboxDataTestId, className = props.className, fieldClassName = props.fieldClassName, fieldProps = __rest(props, ["showPasswordLabel", "checkboxDataTestId", "className", "fieldClassName"]);
|
|
28
|
+
var classes = ["password-field"];
|
|
29
|
+
if (className) {
|
|
30
|
+
classes.push(className);
|
|
31
|
+
}
|
|
32
|
+
var _b = useState(false), visible = _b[0], setVisible = _b[1];
|
|
33
|
+
var idOrName = props.id || props.name;
|
|
34
|
+
var checkboxIdOrName = "".concat(idOrName, "-show-password");
|
|
35
|
+
return (React.createElement("div", { className: classes.join(" ") },
|
|
36
|
+
React.createElement(Field, __assign({}, fieldProps, { className: fieldClassName, type: visible ? "text" : "password" })),
|
|
37
|
+
React.createElement(Field, { type: "checkbox", id: checkboxIdOrName, name: checkboxIdOrName, label: showPasswordLabel, onChange: function () { return setVisible(function (prevVisible) { return !prevVisible; }); }, dataTestId: checkboxDataTestId })));
|
|
38
|
+
};
|
|
39
|
+
export { PasswordField as default, PasswordField };
|
|
40
|
+
//# sourceMappingURL=PasswordField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../src/forms/PasswordField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAU3C,IAAM,aAAa,GAAG,UAAC,KAAyB;IAE5C,IAAA,KAKE,KAAK,kBAL4B,EAAnC,iBAAiB,mBAAG,eAAe,KAAA,EACnC,kBAAkB,GAIhB,KAAK,mBAJW,EAClB,SAAS,GAGP,KAAK,UAHE,EACT,cAAc,GAEZ,KAAK,eAFO,EACX,UAAU,UACX,KAAK,EANH,0EAML,CADc,CACN;IAET,IAAM,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAA;IAElC,IAAI,SAAS,EAAE;QACb,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;KACxB;IAEK,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,IAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,CAAA;IACvC,IAAM,gBAAgB,GAAG,UAAG,QAAQ,mBAAgB,CAAA;IAEpD,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QAC/B,oBAAC,KAAK,eAAK,UAAU,IAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,IAAI;QACzF,oBAAC,KAAK,IACJ,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,gBAAgB,EACpB,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,cAAM,OAAA,UAAU,CAAC,UAAC,WAAW,IAAK,OAAA,CAAC,WAAW,EAAZ,CAAY,CAAC,EAAzC,CAAyC,EACzD,UAAU,EAAE,kBAAkB,GAC9B,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
decorators: ((storyFn: any) => React.JSX.Element)[];
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
7
|
+
export declare const PasswordFieldDefault: () => React.JSX.Element;
|
|
8
|
+
export declare const PasswordFieldWithError: () => React.JSX.Element;
|
|
9
|
+
export declare const PasswordFieldWithNote: () => React.JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useForm } from "react-hook-form";
|
|
3
|
+
import { PasswordField } from "./PasswordField";
|
|
4
|
+
export default {
|
|
5
|
+
title: "Forms/PasswordField",
|
|
6
|
+
decorators: [function (storyFn) { return React.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
|
|
7
|
+
};
|
|
8
|
+
export var PasswordFieldDefault = function () {
|
|
9
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
10
|
+
return React.createElement(PasswordField, { id: "password-1", register: register, name: "password", label: "Password" });
|
|
11
|
+
};
|
|
12
|
+
export var PasswordFieldWithError = function () {
|
|
13
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
14
|
+
return (React.createElement(PasswordField, { id: "password2", register: register, name: "password", label: "Password", error: true, errorMessage: "Password must be at least 8 characters" }));
|
|
15
|
+
};
|
|
16
|
+
export var PasswordFieldWithNote = function () {
|
|
17
|
+
var register = useForm({ mode: "onChange" }).register;
|
|
18
|
+
return (React.createElement(PasswordField, { id: "password-3", register: register, name: "password", label: "Password", note: "Must be at least 8 characters and include a number." }));
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=PasswordField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PasswordField.stories.js","sourceRoot":"","sources":["../../../src/forms/PasswordField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,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,oBAAoB,GAAG;IAC1B,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,oBAAC,aAAa,IAAC,EAAE,EAAC,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,GAAI,CAAA;AACnG,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,sBAAsB,GAAG;IAC5B,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,aAAa,IACZ,EAAE,EAAC,WAAW,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,wCAAwC,GACtD,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG;IAC3B,IAAA,QAAQ,GAAK,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,SAAlC,CAAkC;IAClD,OAAO,CACL,oBAAC,aAAa,IACZ,EAAE,EAAC,YAAY,EACf,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,qDAAqD,GAC3D,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/index.ts
CHANGED
|
@@ -35,6 +35,7 @@ export * from "./src/forms/DateField"
|
|
|
35
35
|
export * from "./src/forms/DOBField"
|
|
36
36
|
export * from "./src/forms/Dropzone"
|
|
37
37
|
export * from "./src/forms/Field"
|
|
38
|
+
export * from "./src/forms/PasswordField"
|
|
38
39
|
export * from "./src/forms/PhoneField"
|
|
39
40
|
export * from "./src/forms/PhoneMask"
|
|
40
41
|
export * from "./src/forms/HouseholdMemberForm"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloom-housing/ui-components",
|
|
3
|
-
"version": "14.0
|
|
3
|
+
"version": "14.1.0",
|
|
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",
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
171
|
"lint-staged": {
|
|
172
|
-
"*.{js,ts,tsx}": "eslint --max-warnings 0"
|
|
172
|
+
"!(*.stories).{js,ts,tsx}": "eslint --max-warnings 0"
|
|
173
173
|
},
|
|
174
174
|
"resolutions": {
|
|
175
175
|
"react": "19.2.3",
|
package/src/forms/FieldGroup.tsx
CHANGED
|
@@ -31,6 +31,7 @@ interface FieldGroupProps {
|
|
|
31
31
|
fieldLabelClassName?: string
|
|
32
32
|
fields?: FieldSingle[]
|
|
33
33
|
groupLabel?: string | React.ReactNode
|
|
34
|
+
groupLabelClassName?: string
|
|
34
35
|
groupNote?: string
|
|
35
36
|
groupSubNote?: string
|
|
36
37
|
name: string
|
|
@@ -47,6 +48,7 @@ interface FieldGroupProps {
|
|
|
47
48
|
const FieldGroup = ({
|
|
48
49
|
name,
|
|
49
50
|
groupLabel,
|
|
51
|
+
groupLabelClassName,
|
|
50
52
|
fields,
|
|
51
53
|
type = "checkbox",
|
|
52
54
|
validation = {},
|
|
@@ -75,9 +77,9 @@ const FieldGroup = ({
|
|
|
75
77
|
|
|
76
78
|
const getIndividualInput = (item: FieldSingle): React.ReactNode => {
|
|
77
79
|
return (
|
|
78
|
-
|
|
80
|
+
<>
|
|
79
81
|
<input
|
|
80
|
-
aria-describedby={`${name}-error`}
|
|
82
|
+
aria-describedby={`${name}-error ${item.note ? `${item.id}-note` : ""}`}
|
|
81
83
|
aria-invalid={!!error || false}
|
|
82
84
|
type={type}
|
|
83
85
|
id={item.id}
|
|
@@ -105,7 +107,11 @@ const FieldGroup = ({
|
|
|
105
107
|
>
|
|
106
108
|
{item.label}
|
|
107
109
|
</label>
|
|
108
|
-
{item.note &&
|
|
110
|
+
{item.note && (
|
|
111
|
+
<span id={`${item.id}-note`} className={"field-note font-normal"}>
|
|
112
|
+
{item.note}
|
|
113
|
+
</span>
|
|
114
|
+
)}
|
|
109
115
|
|
|
110
116
|
{item.description && (
|
|
111
117
|
<div className="ml-8 -mt-1 mb-5">
|
|
@@ -119,7 +125,7 @@ const FieldGroup = ({
|
|
|
119
125
|
</ExpandableContent>
|
|
120
126
|
</div>
|
|
121
127
|
)}
|
|
122
|
-
|
|
128
|
+
</>
|
|
123
129
|
)
|
|
124
130
|
}
|
|
125
131
|
|
|
@@ -145,7 +151,7 @@ const FieldGroup = ({
|
|
|
145
151
|
|
|
146
152
|
const getInputSet = (item: FieldSingle): React.ReactNode => {
|
|
147
153
|
return (
|
|
148
|
-
|
|
154
|
+
<>
|
|
149
155
|
{getIndividualInput(item)}
|
|
150
156
|
{item.additionalText && checkedInputs.indexOf(item.label?.toString() || "") >= 0 && (
|
|
151
157
|
<Field
|
|
@@ -160,17 +166,21 @@ const FieldGroup = ({
|
|
|
160
166
|
dataTestId={item.dataTestId}
|
|
161
167
|
/>
|
|
162
168
|
)}
|
|
163
|
-
|
|
169
|
+
</>
|
|
164
170
|
)
|
|
165
171
|
}
|
|
172
|
+
const describedBy = [groupSubNote ? `${name}-group-sub-note` : "", error ? `${name}-error` : ""]
|
|
173
|
+
.filter(Boolean)
|
|
174
|
+
.join(" ")
|
|
175
|
+
|
|
166
176
|
return (
|
|
167
|
-
<fieldset
|
|
168
|
-
aria-describedby={`${groupSubNote ? `${name}-group-sub-note` : ""} ${
|
|
169
|
-
error ? `${name}-error` : ""
|
|
170
|
-
}`}
|
|
171
|
-
>
|
|
177
|
+
<fieldset {...(describedBy ? { "aria-describedby": describedBy } : {})}>
|
|
172
178
|
{groupLabel && (
|
|
173
|
-
<legend
|
|
179
|
+
<legend
|
|
180
|
+
className={`text__caps-spaced ${error ? "text-alert" : ""} ${groupLabelClassName || ""}`}
|
|
181
|
+
>
|
|
182
|
+
{groupLabel}
|
|
183
|
+
</legend>
|
|
174
184
|
)}
|
|
175
185
|
{groupNote && <p className="field-note mb-4">{groupNote}</p>}
|
|
176
186
|
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { useForm } from "react-hook-form"
|
|
3
|
+
import { PasswordField } from "./PasswordField"
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: "Forms/PasswordField",
|
|
7
|
+
decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const PasswordFieldDefault = () => {
|
|
11
|
+
const { register } = useForm({ mode: "onChange" })
|
|
12
|
+
return <PasswordField id="password-1" register={register} name={"password"} label={"Password"} />
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const PasswordFieldWithError = () => {
|
|
16
|
+
const { register } = useForm({ mode: "onChange" })
|
|
17
|
+
return (
|
|
18
|
+
<PasswordField
|
|
19
|
+
id="password2"
|
|
20
|
+
register={register}
|
|
21
|
+
name={"password"}
|
|
22
|
+
label={"Password"}
|
|
23
|
+
error={true}
|
|
24
|
+
errorMessage={"Password must be at least 8 characters"}
|
|
25
|
+
/>
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export const PasswordFieldWithNote = () => {
|
|
30
|
+
const { register } = useForm({ mode: "onChange" })
|
|
31
|
+
return (
|
|
32
|
+
<PasswordField
|
|
33
|
+
id="password-3"
|
|
34
|
+
register={register}
|
|
35
|
+
name={"password"}
|
|
36
|
+
label={"Password"}
|
|
37
|
+
note={"Must be at least 8 characters and include a number."}
|
|
38
|
+
/>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import { useState } from "react"
|
|
3
|
+
import { Field, FieldProps } from "./Field"
|
|
4
|
+
|
|
5
|
+
export interface PasswordFieldProps
|
|
6
|
+
extends Omit<FieldProps, "type" | "postInputContent" | "className"> {
|
|
7
|
+
showPasswordLabel?: string
|
|
8
|
+
checkboxDataTestId?: string
|
|
9
|
+
className?: string
|
|
10
|
+
fieldClassName?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const PasswordField = (props: PasswordFieldProps) => {
|
|
14
|
+
const {
|
|
15
|
+
showPasswordLabel = "Show password",
|
|
16
|
+
checkboxDataTestId,
|
|
17
|
+
className,
|
|
18
|
+
fieldClassName,
|
|
19
|
+
...fieldProps
|
|
20
|
+
} = props
|
|
21
|
+
|
|
22
|
+
const classes = ["password-field"]
|
|
23
|
+
|
|
24
|
+
if (className) {
|
|
25
|
+
classes.push(className)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const [visible, setVisible] = useState(false)
|
|
29
|
+
|
|
30
|
+
const idOrName = props.id || props.name
|
|
31
|
+
const checkboxIdOrName = `${idOrName}-show-password`
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div className={classes.join(" ")}>
|
|
35
|
+
<Field {...fieldProps} className={fieldClassName} type={visible ? "text" : "password"} />
|
|
36
|
+
<Field
|
|
37
|
+
type="checkbox"
|
|
38
|
+
id={checkboxIdOrName}
|
|
39
|
+
name={checkboxIdOrName}
|
|
40
|
+
label={showPasswordLabel}
|
|
41
|
+
onChange={() => setVisible((prevVisible) => !prevVisible)}
|
|
42
|
+
dataTestId={checkboxDataTestId}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export { PasswordField as default, PasswordField }
|