Skip to content

Commit 64a8f6d

Browse files
shayan-derivshayan-deriv
authored
Merge pull request #101 from deriv-com/aizad/fix-input-issue
Aizad/FEQ-1880/Update Input Component
2 parents afef170 + ab1124e commit 64a8f6d

12 files changed

+397
-112
lines changed

‎lib/components/Input/HelperMessage.scss

+8-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
$inactive_color: #999999;
2-
$success_color: #4bb4b3;
3-
$warning_color: #ffad3a;
4-
$error_field: #ec3f3f;
5-
61
.deriv-helper-message {
7-
font-size: 12px;
8-
line-height: 1;
2+
font-size: var(--du-text-size-sm, 12px);
3+
line-height: var(--du-text-lh-2xs, 8px);
94
font-style: normal;
10-
font-weight: 400;
11-
color: $inactive_color;
5+
font-weight: var(--du-text-weight-normal, 400);
6+
color: var(--du-text-primary, #999999);
127
&--general {
13-
color: $inactive_color;
8+
color: var(--du-text-less-prominent, #999999);
149
}
1510
&--success {
16-
color: $success_color;
11+
color: var(--du-text-profit-success, #4bb4b3);
1712
}
1813
&--warning {
19-
color: $warning_color;
14+
color: var(--du-text-warning, #ffad3a);
2015
}
2116
&--error {
22-
color: $error_field;
17+
color: var(--du-text-red, #ff444f);
2318
}
2419
}

‎lib/components/Input/HelperMessage.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,30 @@ const MessageVariant: Record<TMessageVariant, string> = {
1717
error: "deriv-helper-message--error",
1818
};
1919

20+
/**
21+
* HelperMessageProps interface
22+
* @interface HelperMessageProps
23+
* @property {boolean} [error] - If true, the helper message will display an error state.
24+
* @property {ReactNode} [message] - The helper message to display.
25+
* @property {InputVariants} [variant] - The variant of the helper message.
26+
* @property {boolean} [disabled] - If true, the helper message will be disabled.
27+
*/
28+
29+
/**
30+
* HelperMessage component
31+
* @component
32+
* @param {HelperMessageProps} props - The props that define the HelperMessage.
33+
* @returns {ReactNode} The React Node that represents the HelperMessage.
34+
*
35+
* @example
36+
* <HelperMessage
37+
* error={false}
38+
* message="This is a helper message"
39+
* variant="general"
40+
* disabled={false}
41+
* />
42+
*/
43+
2044
const HelperMessage = ({
2145
error,
2246
message,

‎lib/components/Input/Input.scss

+44-30
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
$disabled_color: #d6dadb;
2-
$inactive_color: #999999;
3-
$active_color: #85acb0;
4-
$success_color: #4bb4b3;
5-
$warning_color: #ffad3a;
6-
$error_field: #ec3f3f;
1+
$input-borders: (
2+
"general": var(--du-state-active, #d6dadb),
3+
"hover": var(--du-border-hover, #999999),
4+
"active": var(--du-brand-secondary, #85acb0),
5+
"success": var(--du-status-success, #4bb4b3),
6+
"error": var(--du-status-danger, #ec3f3f),
7+
);
8+
9+
$label-colors: (
10+
"general": var(--du-border-hover, #999999),
11+
"active": var(--du-brand-secondary, #85acb0),
12+
"error": var(--du-status-danger, #ec3f3f),
13+
"success": var(--du-status-success, #4bb4b3),
14+
"disabled": var(--du-state-active, #d6dadb),
15+
);
16+
717
$border: 1px solid;
18+
$input-placement: 16px;
819

920
.deriv-input__container {
1021
display: inline-block;
@@ -22,32 +33,35 @@ $border: 1px solid;
2233
.deriv-input {
2334
display: inline-flex;
2435
position: relative;
25-
border-radius: 4px;
36+
border-radius: $border-radius;
2637
width: 100%;
2738
text-align: left;
2839
padding: 10px 16px;
2940
border: $border;
41+
font-size: var(--du-text-size-default, 14px);
42+
color: var(--du-text-prominent, #333333);
3043

3144
&--general {
32-
border-color: $disabled_color;
33-
&:hover {
34-
border-color: $inactive_color;
45+
border-color: map-get($input-borders, "general");
46+
&:hover:not(:disabled):not(:focus-within) {
47+
border-color: map-get($input-borders, "hover");
3548
}
3649
&:focus-within {
37-
border-color: $active_color;
50+
border-color: map-get($input-borders, "active");
3851
}
3952
}
4053
&--error {
41-
border-color: $error_field;
54+
border-color: map-get($input-borders, "error");
4255
}
4356
&--success {
44-
border-color: $success_color;
57+
border-color: map-get($input-borders, "success");
4558
}
4659
&--active {
47-
border-color: $active_color;
60+
border-color: map-get($input-borders, "active");
4861
}
4962
&--disabled {
50-
border-color: $disabled_color;
63+
border-color: map-get($input-borders, "general");
64+
cursor: not-allowed;
5165
}
5266

5367
&__field {
@@ -59,10 +73,10 @@ $border: 1px solid;
5973
&:focus,
6074
&:not(:placeholder-shown) {
6175
& ~ label {
62-
font-size: 10px;
76+
font-size: var(--du-text-size-xs, 10px);
6377
transform: translate(0, -50%);
64-
background-color: #ffffff;
65-
padding: 0px 4px;
78+
background-color: var(--du-general-main-1, #ffffff);
79+
padding: 0 4px;
6680
height: fit-content;
6781
}
6882
}
@@ -74,51 +88,51 @@ $border: 1px solid;
7488
top: 0;
7589
bottom: 0;
7690
padding: 0;
77-
left: 16px;
91+
left: $input-placement;
7892
display: flex;
7993
align-items: center;
8094
pointer-events: none;
8195
transition: all 0.15s ease-out;
82-
font-size: 14px;
96+
font-size: var(--du-text-size-default, 14px);
8397
&--general {
84-
color: $inactive_color;
98+
color: map-get($label-colors, "general");
8599
}
86100
&--error {
87-
color: $error_field;
101+
color: map-get($label-colors, "error");
88102
}
89103
&--success {
90-
color: $success_color;
104+
color: map-get($label-colors, "success");
91105
}
92106
&--active {
93-
color: $active_color;
107+
color: map-get($label-colors, "active");
94108
}
95109

96110
&--disabled {
97-
color: $disabled_color;
111+
color: map-get($label-colors, "disabled");
98112
}
99113
}
100114

101115
&__right-content {
102-
margin-left: 16px;
116+
margin-left: $input-placement;
103117
}
104118
}
105119

106120
.deriv-input--general .deriv-input__field:disabled + .deriv-input__label,
107121
.deriv-input--error .deriv-input__field:disabled + .deriv-input__label,
108122
.deriv-input--success .deriv-input__field:disabled + .deriv-input__label {
109-
color: $disabled_color;
123+
color: map-get($label-colors, "disabled");
110124
}
111125

112126
.deriv-input--general .deriv-input__field:focus + .deriv-input__label {
113-
color: $active_color;
127+
color: map-get($label-colors, "active");
114128
}
115129

116130
.deriv-input--error .deriv-input__field:focus + .deriv-input__label {
117-
color: $error_field;
131+
color: map-get($label-colors, "error");
118132
}
119133

120134
.deriv-input--success .deriv-input__field:focus + .deriv-input__label {
121-
color: $success_color;
135+
color: map-get($label-colors, "success");
122136
}
123137

124138
.deriv-input__helper-message {

‎lib/components/Input/__test__/HelperMessage.test.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { render, screen } from "@testing-library/react";
2+
import HelperMessage from "../HelperMessage";
3+
4+
const props = { message: "This is a helper message" };
5+
6+
describe("HelperMessage", () => {
7+
it("should render correctly", () => {
8+
render(<HelperMessage {...props} />);
9+
const helperMessage = screen.getByText(props.message);
10+
expect(helperMessage).toHaveClass("deriv-helper-message");
11+
expect(helperMessage).toHaveTextContent(props.message);
12+
});
13+
14+
it("should render variants: General", () => {
15+
render(<HelperMessage {...props} />);
16+
screen.debug();
17+
const helperMessage = screen.getByText(props.message);
18+
expect(helperMessage).toHaveClass("deriv-helper-message--general");
19+
});
20+
21+
it("should render variants: Success", () => {
22+
render(<HelperMessage {...props} variant="success" />);
23+
screen.debug();
24+
const helperMessage = screen.getByText(props.message);
25+
expect(helperMessage).toHaveClass("deriv-helper-message--success");
26+
});
27+
28+
it("should render variants: Error", () => {
29+
render(<HelperMessage {...props} variant="error" />);
30+
screen.debug();
31+
const helperMessage = screen.getByText(props.message);
32+
expect(helperMessage).toHaveClass("deriv-helper-message--error");
33+
});
34+
35+
it("should render variants: Warning", () => {
36+
render(<HelperMessage {...props} variant="warning" />);
37+
screen.debug();
38+
const helperMessage = screen.getByText(props.message);
39+
expect(helperMessage).toHaveClass("deriv-helper-message--warning");
40+
});
41+
42+
it("should show disabled", () => {
43+
render(<HelperMessage {...props} disabled variant="disabled" />);
44+
screen.debug();
45+
const helperMessage = screen.getByText(props.message);
46+
expect(helperMessage).toHaveClass("deriv-helper-message--general");
47+
});
48+
49+
it("should show Error variant", () => {
50+
render(<HelperMessage {...props} error />);
51+
screen.debug();
52+
const helperMessage = screen.getByText(props.message);
53+
expect(helperMessage).toHaveClass("deriv-helper-message--error");
54+
});
55+
});

‎lib/components/Input/__test__/Input.test.tsx

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { render, screen } from "@testing-library/react";
2+
import { Input } from "..";
3+
4+
const props = { label: "Test", message: "Test message", id: "test" };
5+
6+
describe("Input", () => {
7+
it("should render correctly", () => {
8+
const { container, getByLabelText } = render(<Input {...props} />);
9+
const inputContainer = container.firstChild;
10+
const input = getByLabelText(props.label);
11+
expect(inputContainer).toHaveClass("deriv-input__container");
12+
expect(inputContainer).toHaveTextContent(props.label);
13+
expect(inputContainer).toHaveTextContent(props.message);
14+
expect(input).toBeInTheDocument();
15+
});
16+
17+
it("should show label", () => {
18+
render(<Input {...props} />);
19+
const inputLabel = screen.getByText(props.label);
20+
expect(inputLabel).toBeInTheDocument();
21+
});
22+
23+
it("container should be full width", () => {
24+
const { container } = render(<Input {...props} isFullWidth />);
25+
const inputContainer = container.firstChild;
26+
expect(inputContainer).toHaveClass("deriv-input__container--full");
27+
});
28+
29+
it("should show message", () => {
30+
render(<Input {...props} />);
31+
const helperMessage = screen.getByText(props.message);
32+
expect(helperMessage).toHaveClass("deriv-helper-message--general");
33+
expect(helperMessage).toBeInTheDocument();
34+
});
35+
36+
it("should hide message", () => {
37+
const { container } = render(<Input {...props} hideMessage />);
38+
const inputContainer = container.firstChild;
39+
const input = inputContainer?.lastChild;
40+
expect(input).not.toHaveClass("deriv-helper-message--general");
41+
});
42+
43+
it("should show different variants: General", () => {
44+
const { container } = render(<Input {...props} />);
45+
const inputContainer = container.firstChild;
46+
const input = inputContainer?.firstChild;
47+
const inputLabel = screen.getByText(props.label);
48+
const helperMessage = screen.getByText(props.message);
49+
expect(input).toHaveClass("deriv-input--general");
50+
expect(input).not.toHaveClass("deriv-input--error");
51+
expect(inputLabel).toHaveClass("deriv-input__label--general");
52+
expect(helperMessage).toHaveClass("deriv-helper-message--general");
53+
});
54+
55+
it("should show different variants: Success", () => {
56+
const { container } = render(<Input variant="success" {...props} />);
57+
const inputContainer = container.firstChild;
58+
const input = inputContainer?.firstChild;
59+
const inputLabel = screen.getByText(props.label);
60+
const helperMessage = screen.getByText(props.message);
61+
expect(input).toHaveClass("deriv-input--success");
62+
expect(input).not.toHaveClass("deriv-input--error");
63+
expect(inputLabel).toHaveClass("deriv-input__label--success");
64+
expect(helperMessage).toHaveClass("deriv-helper-message--success");
65+
});
66+
67+
it("should show different variants: Error", () => {
68+
const { container } = render(<Input variant="error" {...props} />);
69+
const inputContainer = container.firstChild;
70+
const input = inputContainer?.firstChild;
71+
const inputLabel = screen.getByText(props.label);
72+
const helperMessage = screen.getByText(props.message);
73+
expect(input).toHaveClass("deriv-input--error");
74+
expect(input).not.toHaveClass("deriv-input--success");
75+
expect(inputLabel).toHaveClass("deriv-input__label--error");
76+
expect(helperMessage).toHaveClass("deriv-helper-message--error");
77+
});
78+
79+
it("should show different variants: Warning", () => {
80+
const { container } = render(<Input variant="warning" {...props} />);
81+
const inputContainer = container.firstChild;
82+
const input = inputContainer?.firstChild;
83+
const inputLabel = screen.getByText(props.label);
84+
const helperMessage = screen.getByText(props.message);
85+
expect(input).toHaveClass("deriv-input--general");
86+
expect(input).not.toHaveClass("deriv-input--error");
87+
expect(inputLabel).toHaveClass("deriv-input__label--general");
88+
expect(helperMessage).toHaveClass("deriv-helper-message--warning");
89+
});
90+
91+
it("should show different variants: Disabled", () => {
92+
const { container } = render(<Input variant="disabled" {...props} />);
93+
const inputContainer = container.firstChild;
94+
const input = inputContainer?.firstChild;
95+
const inputLabel = screen.getByText(props.label);
96+
expect(input).toHaveClass("deriv-input--disabled");
97+
expect(input).not.toHaveClass("deriv-input--error");
98+
expect(inputLabel).toHaveClass("deriv-input__label--disabled");
99+
});
100+
101+
it("should show different variants: Disabled", () => {
102+
const { container } = render(<Input variant="disabled" {...props} />);
103+
const inputContainer = container.firstChild;
104+
const input = inputContainer?.firstChild;
105+
const inputLabel = screen.getByText(props.label);
106+
expect(input).toHaveClass("deriv-input--disabled");
107+
expect(input).not.toHaveClass("deriv-input--error");
108+
expect(inputLabel).toHaveClass("deriv-input__label--disabled");
109+
});
110+
});

0 commit comments

Comments
 (0)