Skip to content
This repository was archived by the owner on Mar 16, 2024. It is now read-only.

Commit 61e24e3

Browse files
luangjokajluangjokaj
authored
Merge pull request #2 from cherry-design-system/feat/slide-check
Feat/slide check
2 parents 42a3757 + 71b207d commit 61e24e3

File tree

12 files changed

+223
-13
lines changed

12 files changed

+223
-13
lines changed

‎@types/cherry.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ declare class H6 extends React.Component<HeadingProps, any> {}
2424

2525
declare class Input extends React.Component<InputProps, any> {}
2626

27+
declare class ToggleInput extends React.Component<ToggleInputProps, any> {}
28+
2729
declare class Select extends React.Component<SelectProps, any> {}
2830

2931
declare class Textarea extends React.Component<TextareaProps, any> {}
@@ -164,6 +166,17 @@ interface InputProps
164166
theme?: object;
165167
}
166168

169+
interface ToggleInputProps
170+
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
171+
type?: "checkbox" | "radio";
172+
error?: boolean;
173+
success?: boolean;
174+
size?: "default" | "big";
175+
label?: string;
176+
fullWidth?: boolean;
177+
theme?: object;
178+
}
179+
167180
interface SelectProps
168181
extends Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size"> {
169182
children?: React.ReactNode;
@@ -230,6 +243,7 @@ export {
230243
H5,
231244
H6,
232245
Input,
246+
ToggleInput,
233247
Select,
234248
Textarea,
235249
Label,

‎dist/cherry.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cherry.module.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cherry-components",
3-
"version": "0.0.2",
3+
"version": "0.0.2-1",
44
"description": "Cherry React Components",
55
"main": "dist/cherry.js",
66
"module": "dist/cherry.module.js",

‎src/Layout/Input/Input.styles.js‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const inputStyles = (
8080
${(type === "checkbox") | (type === "radio") &&
8181
css`
8282
padding: 0;
83-
margin-right: 7px;
83+
cursor: pointer;
8484
8585
${size === "big"
8686
? css`
@@ -110,33 +110,62 @@ export const inputStyles = (
110110

111111
export const radioCheckWrapperStyles = (theme, type, size, fullWidth) => css`
112112
position: relative;
113-
display: inline-block;
113+
display: inline-flex;
114114
line-height: 1;
115+
vertical-align: middle;
115116
116117
${fullWidth &&
117118
css`
118-
display: block;
119+
display: flex;
119120
width: 100%;
120121
`}
121122
122123
& input {
123124
vertical-align: top;
124125
}
125126
127+
& label {
128+
padding: 0 0 0 10px;
129+
}
130+
126131
${size === "big"
127132
? css`
128133
& label {
129134
max-width: calc(100% - 40px);
130-
margin-top: 3px;
135+
min-width: calc(100% - 32px);
136+
margin-top: 4px;
131137
}
132138
`
133139
: css`
134140
& label {
135141
max-width: calc(100% - 30px);
136-
margin-top: -2px;
142+
min-width: calc(100% - 22px);
143+
margin-top: -1px;
137144
}
138145
`}
139146
147+
${type === "toggle-input" &&
148+
css`
149+
& .toggle-input-inner {
150+
margin-top: 0;
151+
vertical-align: top;
152+
}
153+
154+
${size === "big"
155+
? css`
156+
& label {
157+
max-width: calc(100% - 70px);
158+
min-width: calc(100% - 56px);
159+
}
160+
`
161+
: css`
162+
& label {
163+
max-width: calc(100% - 60px);
164+
min-width: calc(100% - 46px);
165+
}
166+
`}
167+
`}
168+
140169
${type === "checkbox" &&
141170
css`
142171
& input:checked ~ svg {

‎src/Layout/Input/ToggleInput.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import { localTheme } from "../../theme";
3+
import { Label } from "../Label";
4+
import { radioCheckWrapperStyles } from "./Input.styles";
5+
import { toggleInputStyles } from "./ToggleInput.styles";
6+
7+
function ToggleInput({
8+
className,
9+
size = "default",
10+
success,
11+
error,
12+
label,
13+
type = "checkbox",
14+
fullWidth,
15+
theme = localTheme,
16+
...props
17+
}) {
18+
return (
19+
<div
20+
css={radioCheckWrapperStyles(
21+
theme,
22+
"toggle-input",
23+
size,
24+
fullWidth,
25+
)}
26+
>
27+
<div
28+
css={toggleInputStyles(theme, size)}
29+
className="toggle-input-inner"
30+
>
31+
<input type="checkbox" className={className} {...props} />
32+
<div className="toggle-input-slider" />
33+
</div>
34+
{label && (
35+
<Label htmlFor={props.id} error={error} success={success}>
36+
{label}
37+
</Label>
38+
)}
39+
</div>
40+
);
41+
}
42+
43+
export { ToggleInput };

‎src/Layout/Input/ToggleInput.styles.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { css } from "@emotion/react";
2+
import { resetButtonStyles } from "../../helperStyles";
3+
4+
export const toggleInputStyles = (theme, size) => css`
5+
display: inline-block;
6+
margin: auto 0;
7+
position: relative;
8+
vertical-align: middle;
9+
10+
& * {
11+
vertical-align: middle;
12+
}
13+
14+
& input {
15+
${resetButtonStyles};
16+
position: absolute;
17+
left: 0;
18+
top: 0;
19+
width: 100%;
20+
height: 100%;
21+
outline: none;
22+
}
23+
24+
& input:checked ~ .toggle-input-slider {
25+
&:before {
26+
max-width: 46px;
27+
background: ${theme.colors.secondaryLight};
28+
}
29+
30+
&:after {
31+
transform: translate3d(0, 0, 0) translateX(23px);
32+
}
33+
}
34+
35+
@media (hover: hover) {
36+
& input:hover:not([disabled]) ~ .toggle-input-slider {
37+
border-color: ${theme.colors.secondary};
38+
}
39+
}
40+
41+
& input:focus:not([disabled]) ~ .toggle-input-slider {
42+
border-color: ${theme.colors.secondary};
43+
box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
44+
outline: none;
45+
}
46+
47+
& input:active:not([disabled]) ~ .toggle-input-slider {
48+
box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
49+
}
50+
51+
& input:disabled {
52+
cursor: not-allowed;
53+
}
54+
55+
& input:disabled ~ .toggle-input-slider {
56+
border-color: ${theme.colors.gray};
57+
58+
&:before {
59+
background: ${theme.colors.grayLight};
60+
}
61+
62+
&:after {
63+
background: ${theme.colors.gray};
64+
}
65+
}
66+
67+
& .toggle-input-slider {
68+
border: solid 2px ${theme.colors.grayLight};
69+
border-radius: 30px;
70+
background: ${theme.colors.light};
71+
pointer-events: none;
72+
box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
73+
transition: all 0.3s ease;
74+
75+
${size === "default"
76+
? css`
77+
height: 22px;
78+
width: 46px;
79+
`
80+
: css`
81+
height: 32px;
82+
width: 56px;
83+
`}
84+
85+
&:before,
86+
&:after {
87+
content: "";
88+
display: block;
89+
position: absolute;
90+
}
91+
92+
&:before {
93+
top: 5px;
94+
left: 5px;
95+
width: calc(100% - 10px);
96+
height: calc(100% - 10px);
97+
max-width: 0;
98+
border-radius: 30px;
99+
transition: all 0.3s ease;
100+
background: ${theme.colors.light};
101+
}
102+
103+
&:after {
104+
left: 0;
105+
top: 0;
106+
border-radius: 50%;
107+
background: ${theme.colors.secondary};
108+
transition: all 0.3s ease;
109+
transform: translate3d(0, 0, 0) translateX(0);
110+
111+
${size === "default"
112+
? css`
113+
width: 22px;
114+
height: 22px;
115+
`
116+
: css`
117+
width: 32px;
118+
height: 32px;
119+
`}
120+
}
121+
}
122+
`;

‎src/Layout/Input/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { Select } from "./Select";
22
export { Textarea } from "./Textarea";
33
export { Input } from "./Input";
4+
export { ToggleInput } from "./ToggleInput";

‎src/Layout/Label/Label.styles.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ export const labelStyles = (theme, error, success, fullWidth) => css`
55
color: ${theme.colors.gray};
66
display: inline-block;
77
vertical-align: middle;
8-
padding: 0 7px 0 0;
9-
margin: 0;
8+
padding: 0 10px 0 0;
9+
margin: auto 0;
1010
line-height: ${theme.sizes.text.lineheight.mobile};
1111
1212
${fullWidth &&

0 commit comments

Comments
 (0)