feat: Toggle (#27)

src/components/Toggle/StyledToggle.tsx

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+export const Handle = styled.div`
+  background-color: ${({ theme }) => theme.toggle.background};
+  border-radius: 50%;
+  cursor: pointer;
+  height: 32px;
+  left: 4px;
+  position: absolute;
+  top: 4px;
+  transition: left 200ms ease-in;
+  width: 32px;
+  z-index: 1;
+`;
+
+export const Input = styled.input`
+  cursor: pointer;
+  opacity: 0;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 3;
+
+  &:checked + ${Handle} {
+    left: calc(100% - 36px);
+  }
+
+  &:focus + ${Handle} {
+    box-shadow: ${({ theme }) => theme.shadows.focus};
+  }
+`;
+
+const StyledToggle = styled.div<{ checked: boolean }>`
+  align-items: center;
+  background-color: ${({ theme, checked }) => theme.colors[checked ? "success" : "input"]};
+  border-radius: 24px;
+  box-shadow: inset 0px 2px 2px -1px rgba(74, 74, 104, 0.1);
+  cursor: pointer;
+  display: inline-flex;
+  height: 40px;
+  position: relative;
+  transition: background-color 200ms;
+  width: 72px;
+`;
+
+export default StyledToggle;

src/components/Toggle/index.stories.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from "react";
+import Toggle from "./index";
+
+export default {
+  title: "Toggle",
+  component: Toggle,
+};
+
+export const Default: React.FC = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const toggle = () => setIsChecked(!isChecked);
+
+  return <Toggle checked={isChecked} onChange={toggle} />;
+};

src/components/Toggle/index.tsx

@@ -0,0 +1,15 @@
+import React, { InputHTMLAttributes } from "react";
+import StyledToggle, { Input, Handle } from "./StyledToggle";
+
+const Toggle: React.FC<InputHTMLAttributes<HTMLInputElement>> = ({ checked, ...props }) => {
+  const isChecked = !!checked;
+
+  return (
+    <StyledToggle checked={isChecked}>
+      <Input checked={checked} {...props} type="checkbox" />
+      <Handle />
+    </StyledToggle>
+  );
+};
+
+export default Toggle;

src/components/Toggle/theme.ts

@@ -0,0 +1,9 @@
+import { ToggleTheme } from "./types";
+
+export const light: ToggleTheme = {
+  background: "#FFFFFF",
+};
+
+export const dark: ToggleTheme = {
+  background: "#2B223E",
+};

src/components/Toggle/types.ts

@@ -0,0 +1,3 @@
+export type ToggleTheme = {
+  background: string;
+};

src/index.ts

@@ -8,6 +8,7 @@ export * from "./components/Layouts";
 export { default as Tag } from "./components/Tag";
 export { default as Text } from "./components/Text";
 export { default as Link } from "./components/Link";
+export { default as Toggle } from "./components/Toggle";
 export { default as ResetCSS } from "./ResetCSS";
 
 export * from "./theme";

src/styled.d.ts

@@ -2,6 +2,7 @@ import "styled-components";
 import { ButtonTheme } from "./components/Button/types";
 import { CardTheme } from "./components/Card/types";
 import { TagTheme } from "./components/Tag/types";
+import { ToggleTheme } from "./components/Toggle/types";
 
 export type Breakpoints = string[];
 
@@ -18,6 +19,7 @@ export type Shadows = {
   active: string;
   success: string;
   warning: string;
+  focus: string;
 };
 
 export type Colors = {
@@ -44,6 +46,7 @@ declare module "styled-components" {
     button: ButtonTheme;
     card: CardTheme;
     tag: TagTheme;
+    toggle: ToggleTheme;
     scales: {
       breakpoints: Breakpoints;
       mediaQueries: MediaQueries;

src/theme/colors.ts

@@ -26,7 +26,7 @@ export const darkColors: Colors = {
   background: "#191326",
   backgroundDisabled: "#524B63",
   contrast: "#FFFFFF",
-  input: "#151021",
+  input: "#524B63",
   primaryDark: "#0098A1",
   tertiary: "#293450",
   text: "#ED4B9E",

src/theme/dark.ts

@@ -4,6 +4,7 @@ import shadows from "./shadows";
 import { dark as darkButton } from "../components/Button/theme";
 import { dark as darkCard } from "../components/Card/theme";
 import { dark as darkTag } from "../components/Tag/theme";
+import { dark as darkToggle } from "../components/Toggle/theme";
 import { darkColors } from "./colors";
 
 const darkTheme: DefaultTheme = {
@@ -20,6 +21,7 @@ const darkTheme: DefaultTheme = {
     ...shadows,
   },
   tag: darkTag,
+  toggle: darkToggle,
 };
 
 export default darkTheme;

src/theme/light.ts

@@ -4,6 +4,7 @@ import shadows from "./shadows";
 import { light as lightButton } from "../components/Button/theme";
 import { light as lightCard } from "../components/Card/theme";
 import { light as lightTag } from "../components/Tag/theme";
+import { light as lightToggle } from "../components/Toggle/theme";
 import { lightColors } from "./colors";
 
 const lightTheme: DefaultTheme = {
@@ -20,6 +21,7 @@ const lightTheme: DefaultTheme = {
     ...shadows,
   },
   tag: lightTag,
+  toggle: lightToggle,
 };
 
 export default lightTheme;

src/theme/shadows.ts

@@ -2,6 +2,7 @@ const shadows = {
   active: "0px 0px 0px 1px #0098A1, 0px 0px 4px 8px rgba(31, 199, 212, 0.4)",
   success: "0px 0px 0px 1px #31D0AA, 0px 0px 0px 4px rgba(49, 208, 170, 0.2)",
   warning: "0px 0px 0px 1px #ED4B9E, 0px 0px 0px 4px rgba(237, 75, 158, 0.2)",
+  focus: "0px 0px 0px 1px #7645D9, 0px 0px 0px 4px rgba(118, 69, 217, 0.6)",
 };
 
 export default shadows;