@clubmed/trident-ui 1.1.0-beta.3 → 1.1.0-beta.4
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
# [1.1.0-beta.4](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0-beta.3...v1.1.0-beta.4) (2024-10-11)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* **molecules:** add style for password disabled ([023dbc0](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/023dbc0165b8a1ee0b046da57a2da80b16f0ff0f))
|
|
9
|
+
|
|
3
10
|
# [1.1.0-beta.3](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0-beta.2...v1.1.0-beta.3) (2024-10-10)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -1,65 +1,73 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
1
|
+
import { jsxs as p, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useInternalStatus as M } from "../../../hooks/useInternalStatus.js";
|
|
3
|
+
import { c as f } from "../../../index-Cu0xwYjD.js";
|
|
4
|
+
import { useId as P, useState as T, useEffect as q } from "react";
|
|
5
|
+
import { useValue as F } from "../../../hooks/useValue.js";
|
|
6
|
+
import { FormControl as z } from "../FormControl.js";
|
|
7
|
+
import { Icon as c } from "../../../atoms/Icons/Icon.js";
|
|
7
8
|
import "../../../atoms/Icons/contexts/IconsContext.js";
|
|
8
|
-
import { ValidationMessage as
|
|
9
|
-
function
|
|
10
|
-
const
|
|
11
|
-
id:
|
|
12
|
-
name: o =
|
|
13
|
-
label:
|
|
9
|
+
import { ValidationMessage as E } from "./ValidationMessage.js";
|
|
10
|
+
function Q(b) {
|
|
11
|
+
const x = P(), {
|
|
12
|
+
id: l = x,
|
|
13
|
+
name: o = l,
|
|
14
|
+
label: g,
|
|
14
15
|
value: h,
|
|
15
|
-
disabled:
|
|
16
|
-
required:
|
|
17
|
-
hideRequiredStar:
|
|
16
|
+
disabled: t = !1,
|
|
17
|
+
required: u = !1,
|
|
18
|
+
hideRequiredStar: v,
|
|
18
19
|
validationStatus: e = "default",
|
|
19
|
-
errorMessage:
|
|
20
|
-
validationMessages:
|
|
20
|
+
errorMessage: w,
|
|
21
|
+
validationMessages: m = [],
|
|
21
22
|
withoutFieldValidation: s = !1,
|
|
22
|
-
className:
|
|
23
|
-
onChange:
|
|
24
|
-
dataTestId:
|
|
25
|
-
...
|
|
26
|
-
} =
|
|
23
|
+
className: y,
|
|
24
|
+
onChange: N,
|
|
25
|
+
dataTestId: C = "Password",
|
|
26
|
+
...I
|
|
27
|
+
} = b, i = M({
|
|
28
|
+
isDisabled: t,
|
|
29
|
+
validationStatus: e
|
|
30
|
+
}), { value: S, setValue: V } = F({
|
|
27
31
|
name: o,
|
|
28
32
|
initialValue: h,
|
|
29
|
-
onChange:
|
|
30
|
-
}), [
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
onChange: N
|
|
34
|
+
}), [r, n] = T("password");
|
|
35
|
+
q(() => {
|
|
36
|
+
n(t ? "password" : r);
|
|
37
|
+
}, [r, t]);
|
|
38
|
+
const k = () => n(r === "password" ? "text" : "password");
|
|
39
|
+
return /* @__PURE__ */ p(
|
|
40
|
+
z,
|
|
35
41
|
{
|
|
36
|
-
className:
|
|
37
|
-
id:
|
|
38
|
-
label:
|
|
42
|
+
className: y,
|
|
43
|
+
id: l,
|
|
44
|
+
label: g,
|
|
39
45
|
dataName: "Password",
|
|
40
|
-
dataTestId:
|
|
41
|
-
disabled:
|
|
42
|
-
required:
|
|
43
|
-
hideRequiredStar:
|
|
46
|
+
dataTestId: C,
|
|
47
|
+
disabled: t,
|
|
48
|
+
required: u,
|
|
49
|
+
hideRequiredStar: v,
|
|
44
50
|
validationStatus: s ? "default" : e,
|
|
45
|
-
errorMessage:
|
|
51
|
+
errorMessage: w,
|
|
46
52
|
children: [
|
|
47
|
-
/* @__PURE__ */
|
|
53
|
+
/* @__PURE__ */ p("div", { className: "relative", children: [
|
|
48
54
|
/* @__PURE__ */ a(
|
|
49
55
|
"input",
|
|
50
56
|
{
|
|
51
|
-
...
|
|
52
|
-
id:
|
|
57
|
+
...I,
|
|
58
|
+
id: l,
|
|
53
59
|
name: o,
|
|
54
|
-
type:
|
|
55
|
-
value:
|
|
56
|
-
disabled:
|
|
57
|
-
required:
|
|
58
|
-
onChange: (
|
|
59
|
-
className:
|
|
60
|
-
"text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none
|
|
60
|
+
type: r,
|
|
61
|
+
value: S,
|
|
62
|
+
disabled: t,
|
|
63
|
+
required: u,
|
|
64
|
+
onChange: (d) => V(d.target.value),
|
|
65
|
+
className: f(
|
|
66
|
+
"text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none",
|
|
61
67
|
{
|
|
62
|
-
"border-lightGrey focus:border-black active:border-black pe-[52px]": s || e === "default",
|
|
68
|
+
"border-lightGrey focus:border-black active:border-black pe-[52px]": (s || e === "default") && i !== "disabled",
|
|
69
|
+
"bg-white text-black": i !== "disabled",
|
|
70
|
+
"bg-pearl text-grey": i === "disabled",
|
|
63
71
|
"pe-[84px]": !s && (e === "error" || e === "success"),
|
|
64
72
|
"border-red": !s && e === "error",
|
|
65
73
|
"border-green": !s && e === "success"
|
|
@@ -71,31 +79,38 @@ function K(f) {
|
|
|
71
79
|
/* @__PURE__ */ a(
|
|
72
80
|
"div",
|
|
73
81
|
{
|
|
74
|
-
className:
|
|
82
|
+
className: f(
|
|
75
83
|
"pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12"
|
|
76
84
|
),
|
|
77
|
-
children: /* @__PURE__ */
|
|
78
|
-
!s && e === "error" && /* @__PURE__ */ a(
|
|
79
|
-
!s && e === "success" && /* @__PURE__ */ a(
|
|
80
|
-
/* @__PURE__ */ a(
|
|
85
|
+
children: /* @__PURE__ */ p("span", { className: "ms-auto flex gap-x-8", children: [
|
|
86
|
+
!s && e === "error" && /* @__PURE__ */ a(c, { name: "CrossDefault", color: "red", width: "24px" }),
|
|
87
|
+
!s && e === "success" && /* @__PURE__ */ a(c, { name: "CheckDefault", color: "green", width: "24px" }),
|
|
88
|
+
!t && /* @__PURE__ */ a(
|
|
81
89
|
"button",
|
|
82
90
|
{
|
|
83
91
|
type: "button",
|
|
84
92
|
className: "pointer-events-auto size-24 inline-flex",
|
|
85
|
-
onClick:
|
|
86
|
-
children: /* @__PURE__ */ a(
|
|
93
|
+
onClick: k,
|
|
94
|
+
children: /* @__PURE__ */ a(
|
|
95
|
+
c,
|
|
96
|
+
{
|
|
97
|
+
name: r === "password" ? "Invisible" : "Visible",
|
|
98
|
+
width: "24px",
|
|
99
|
+
type: "svg"
|
|
100
|
+
}
|
|
101
|
+
)
|
|
87
102
|
}
|
|
88
103
|
)
|
|
89
104
|
] })
|
|
90
105
|
}
|
|
91
106
|
)
|
|
92
107
|
] }),
|
|
93
|
-
|
|
108
|
+
m.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-col gap-[10px] mt-8", children: m.map(({ label: d, status: j }, D) => /* @__PURE__ */ a(E, { label: d, status: j }, D)) })
|
|
94
109
|
]
|
|
95
110
|
}
|
|
96
111
|
);
|
|
97
112
|
}
|
|
98
113
|
export {
|
|
99
|
-
|
|
114
|
+
Q as Password
|
|
100
115
|
};
|
|
101
116
|
//# sourceMappingURL=Password.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n validationMessages?: ValidationMessage[];\n withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n label,\n value: initialValue,\n disabled = false,\n required = false,\n hideRequiredStar,\n validationStatus = 'default',\n errorMessage,\n validationMessages = [],\n withoutFieldValidation = false,\n className,\n onChange,\n dataTestId = 'Password',\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n onChange,\n });\n const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n useEffect(() => setType(type), [type]);\n\n const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n return (\n <FormControl\n className={className}\n id={id}\n label={label}\n dataName=\"Password\"\n dataTestId={dataTestId}\n disabled={disabled}\n required={required}\n hideRequiredStar={hideRequiredStar}\n validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n errorMessage={errorMessage}\n >\n <div className=\"relative\">\n <input\n {...rest}\n id={id}\n name={name}\n type={type}\n value={value as any}\n disabled={disabled}\n required={required}\n onChange={(e) => setValue(e.target.value as Value)}\n className={classnames(\n 'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none
|
|
1
|
+
{"version":3,"file":"Password.js","sources":["../../../../lib/molecules/Forms/Password/Password.tsx"],"sourcesContent":["import { useInternalStatus } from '@/hooks/useInternalStatus';\nimport classnames from 'classnames';\n\nimport { HTMLInputTypeAttribute, useEffect, useId, useState } from 'react';\n\nimport { useValue } from '@/hooks/useValue';\nimport { FormControl, FormControlProps } from '../FormControl';\nimport { Icon } from '@/atoms/Icons';\nimport { ValidationMessage } from './ValidationMessage';\n\nexport interface PasswordProps<Value> extends FormControlProps<Value> {\n validationMessages?: ValidationMessage[];\n withoutFieldValidation?: boolean;\n}\n\nexport function Password<Value = string>(props: PasswordProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n label,\n value: initialValue,\n disabled = false,\n required = false,\n hideRequiredStar,\n validationStatus = 'default',\n errorMessage,\n validationMessages = [],\n withoutFieldValidation = false,\n className,\n onChange,\n dataTestId = 'Password',\n ...rest\n } = props;\n\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n onChange,\n });\n const [type, setType] = useState<HTMLInputTypeAttribute>('password');\n\n useEffect(() => {\n if (disabled) {\n setType('password');\n } else {\n setType(type);\n }\n }, [type, disabled]);\n\n const toggleType = () => setType(type === 'password' ? 'text' : 'password');\n\n return (\n <FormControl\n className={className}\n id={id}\n label={label}\n dataName=\"Password\"\n dataTestId={dataTestId}\n disabled={disabled}\n required={required}\n hideRequiredStar={hideRequiredStar}\n validationStatus={withoutFieldValidation ? 'default' : validationStatus}\n errorMessage={errorMessage}\n >\n <div className=\"relative\">\n <input\n {...rest}\n id={id}\n name={name}\n type={type}\n value={value as any}\n disabled={disabled}\n required={required}\n onChange={(e) => setValue(e.target.value as Value)}\n className={classnames(\n 'text-b3 rounded-pill w-full border ps-20 py-[11px] font-normal outline-none',\n {\n 'border-lightGrey focus:border-black active:border-black pe-[52px]':\n (withoutFieldValidation || validationStatus === 'default') &&\n internalStatus !== 'disabled',\n 'bg-white text-black': internalStatus !== 'disabled',\n 'bg-pearl text-grey': internalStatus === 'disabled',\n 'pe-[84px]':\n !withoutFieldValidation &&\n (validationStatus === 'error' || validationStatus === 'success'),\n 'border-red': !withoutFieldValidation && validationStatus === 'error',\n 'border-green': !withoutFieldValidation && validationStatus === 'success',\n },\n )}\n aria-label={name}\n />\n\n <div\n className={classnames(\n 'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n )}\n >\n <span className=\"ms-auto flex gap-x-8\">\n {!withoutFieldValidation && validationStatus === 'error' && (\n <Icon name=\"CrossDefault\" color=\"red\" width=\"24px\" />\n )}\n\n {!withoutFieldValidation && validationStatus === 'success' && (\n <Icon name=\"CheckDefault\" color=\"green\" width=\"24px\" />\n )}\n\n {!disabled && (\n <button\n type=\"button\"\n className=\"pointer-events-auto size-24 inline-flex\"\n onClick={toggleType}\n >\n <Icon\n name={type === 'password' ? 'Invisible' : 'Visible'}\n width=\"24px\"\n type=\"svg\"\n />\n </button>\n )}\n </span>\n </div>\n </div>\n\n {validationMessages.length > 0 && (\n <div className=\"flex flex-col gap-[10px] mt-8\">\n {validationMessages.map(({ label, status }, index) => (\n <ValidationMessage label={label} status={status} key={index} />\n ))}\n </div>\n )}\n </FormControl>\n );\n}\n"],"names":["Password","props","internalId","useId","id","name","label","initialValue","disabled","required","hideRequiredStar","validationStatus","errorMessage","validationMessages","withoutFieldValidation","className","onChange","dataTestId","rest","internalStatus","useInternalStatus","value","setValue","useValue","type","setType","useState","useEffect","toggleType","jsxs","FormControl","jsx","e","classnames","Icon","status","index","ValidationMessage"],"mappings":"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"}
|