Feat/slide check

@types/cherry.d.ts

@@ -24,6 +24,8 @@ declare class H6 extends React.Component<HeadingProps, any> {}
 
 declare class Input extends React.Component<InputProps, any> {}
 
+declare class ToggleInput extends React.Component<ToggleInputProps, any> {}
+
 declare class Select extends React.Component<SelectProps, any> {}
 
 declare class Textarea extends React.Component<TextareaProps, any> {}
@@ -164,6 +166,17 @@ interface InputProps
 	theme?: object;
 }
 
+interface ToggleInputProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+	type?: "checkbox" | "radio";
+	error?: boolean;
+	success?: boolean;
+	size?: "default" | "big";
+	label?: string;
+	fullWidth?: boolean;
+	theme?: object;
+}
+
 interface SelectProps
 	extends Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size"> {
 	children?: React.ReactNode;
@@ -230,6 +243,7 @@ export {
 	H5,
 	H6,
 	Input,
+	ToggleInput,
 	Select,
 	Textarea,
 	Label,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.2",
+	"version": "0.0.2-1",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

src/Layout/Input/Input.styles.js

@@ -80,7 +80,7 @@ export const inputStyles = (
 	${(type === "checkbox") | (type === "radio") &&
 	css`
 		padding: 0;
-		margin-right: 7px;
+		cursor: pointer;
 
 		${size === "big"
 			? css`
@@ -110,33 +110,62 @@ export const inputStyles = (
 
 export const radioCheckWrapperStyles = (theme, type, size, fullWidth) => css`
 	position: relative;
-	display: inline-block;
+	display: inline-flex;
 	line-height: 1;
+	vertical-align: middle;
 
 	${fullWidth &&
 	css`
-		display: block;
+		display: flex;
 		width: 100%;
 	`}
 
 	& input {
 		vertical-align: top;
 	}
 
+	& label {
+		padding: 0 0 0 10px;
+	}
+
 	${size === "big"
 		? css`
 				& label {
 					max-width: calc(100% - 40px);
-					margin-top: 3px;
+					min-width: calc(100% - 32px);
+					margin-top: 4px;
 				}
 		  `
 		: css`
 				& label {
 					max-width: calc(100% - 30px);
-					margin-top: -2px;
+					min-width: calc(100% - 22px);
+					margin-top: -1px;
 				}
 		  `}
 
+	${type === "toggle-input" &&
+	css`
+		& .toggle-input-inner {
+			margin-top: 0;
+			vertical-align: top;
+		}
+
+		${size === "big"
+			? css`
+					& label {
+						max-width: calc(100% - 70px);
+						min-width: calc(100% - 56px);
+					}
+			  `
+			: css`
+					& label {
+						max-width: calc(100% - 60px);
+						min-width: calc(100% - 46px);
+					}
+			  `}
+	`}
+
 	${type === "checkbox" &&
 	css`
 		& input:checked ~ svg {

src/Layout/Input/ToggleInput.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { localTheme } from "../../theme";
+import { Label } from "../Label";
+import { radioCheckWrapperStyles } from "./Input.styles";
+import { toggleInputStyles } from "./ToggleInput.styles";
+
+function ToggleInput({
+	className,
+	size = "default",
+	success,
+	error,
+	label,
+	type = "checkbox",
+	fullWidth,
+	theme = localTheme,
+	...props
+}) {
+	return (
+		<div
+			css={radioCheckWrapperStyles(
+				theme,
+				"toggle-input",
+				size,
+				fullWidth,
+			)}
+		>
+			<div
+				css={toggleInputStyles(theme, size)}
+				className="toggle-input-inner"
+			>
+				<input type="checkbox" className={className} {...props} />
+				<div className="toggle-input-slider" />
+			</div>
+			{label && (
+				<Label htmlFor={props.id} error={error} success={success}>
+					{label}
+				</Label>
+			)}
+		</div>
+	);
+}
+
+export { ToggleInput };

src/Layout/Input/ToggleInput.styles.js

@@ -0,0 +1,122 @@
+import { css } from "@emotion/react";
+import { resetButtonStyles } from "../../helperStyles";
+
+export const toggleInputStyles = (theme, size) => css`
+	display: inline-block;
+	margin: auto 0;
+	position: relative;
+	vertical-align: middle;
+
+	& * {
+		vertical-align: middle;
+	}
+
+	& input {
+		${resetButtonStyles};
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		outline: none;
+	}
+
+	& input:checked ~ .toggle-input-slider {
+		&:before {
+			max-width: 46px;
+			background: ${theme.colors.secondaryLight};
+		}
+
+		&:after {
+			transform: translate3d(0, 0, 0) translateX(23px);
+		}
+	}
+
+	@media (hover: hover) {
+		& input:hover:not([disabled]) ~ .toggle-input-slider {
+			border-color: ${theme.colors.secondary};
+		}
+	}
+
+	& input:focus:not([disabled]) ~ .toggle-input-slider {
+		border-color: ${theme.colors.secondary};
+		box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
+		outline: none;
+	}
+
+	& input:active:not([disabled]) ~ .toggle-input-slider {
+		box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
+	}
+
+	& input:disabled {
+		cursor: not-allowed;
+	}
+
+	& input:disabled ~ .toggle-input-slider {
+		border-color: ${theme.colors.gray};
+
+		&:before {
+			background: ${theme.colors.grayLight};
+		}
+
+		&:after {
+			background: ${theme.colors.gray};
+		}
+	}
+
+	& .toggle-input-slider {
+		border: solid 2px ${theme.colors.grayLight};
+		border-radius: 30px;
+		background: ${theme.colors.light};
+		pointer-events: none;
+		box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
+		transition: all 0.3s ease;
+
+		${size === "default"
+			? css`
+					height: 22px;
+					width: 46px;
+			  `
+			: css`
+					height: 32px;
+					width: 56px;
+			  `}
+
+		&:before,
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+		}
+
+		&:before {
+			top: 5px;
+			left: 5px;
+			width: calc(100% - 10px);
+			height: calc(100% - 10px);
+			max-width: 0;
+			border-radius: 30px;
+			transition: all 0.3s ease;
+			background: ${theme.colors.light};
+		}
+
+		&:after {
+			left: 0;
+			top: 0;
+			border-radius: 50%;
+			background: ${theme.colors.secondary};
+			transition: all 0.3s ease;
+			transform: translate3d(0, 0, 0) translateX(0);
+
+			${size === "default"
+				? css`
+						width: 22px;
+						height: 22px;
+				  `
+				: css`
+						width: 32px;
+						height: 32px;
+				  `}
+		}
+	}
+`;

src/Layout/Input/index.js

@@ -1,3 +1,4 @@
 export { Select } from "./Select";
 export { Textarea } from "./Textarea";
 export { Input } from "./Input";
+export { ToggleInput } from "./ToggleInput";

src/Layout/Label/Label.styles.js

@@ -5,8 +5,8 @@ export const labelStyles = (theme, error, success, fullWidth) => css`
 	color: ${theme.colors.gray};
 	display: inline-block;
 	vertical-align: middle;
-	padding: 0 7px 0 0;
-	margin: 0;
+	padding: 0 10px 0 0;
+	margin: auto 0;
 	line-height: ${theme.sizes.text.lineheight.mobile};
 
 	${fullWidth &&

src/Layout/index.js

@@ -3,7 +3,7 @@ export { Container } from "./Container";
 export { FontStyle } from "./FontStyle";
 export { Row, Col } from "./Grid";
 export { H1, H2, H3, H4, H5, H6 } from "./Heading";
-export { Select, Textarea, Input } from "./Input";
+export { Select, Textarea, Input, ToggleInput } from "./Input";
 export { Label } from "./Label";
 export { MinHeight } from "./MinHeight";
 export { Space } from "./Space";

src/index.js

@@ -11,6 +11,7 @@ export {
 	H5,
 	H6,
 	Input,
+	ToggleInput,
 	Select,
 	Textarea,
 	Label,