diff --git a/packages/design-system/atoms/toggle/Toggle.styled.tsx b/packages/design-system/atoms/toggle/Toggle.styled.tsx index e69de29..51e2116 100644 --- a/packages/design-system/atoms/toggle/Toggle.styled.tsx +++ b/packages/design-system/atoms/toggle/Toggle.styled.tsx @@ -0,0 +1,38 @@ +import { palette } from '@roleypoly/design-system/atoms/colors'; +import styled, { css } from 'styled-components'; +import { transitions } from '../timings'; + +export const ToggleState = styled.div` + height: 1em; + width: 1em; + border-radius: 1em; + background-color: ${palette.grey600}; + position: absolute; + top: 0.15em; + left: 0.15em; + transform: translateX(0); + + @media (prefers-reduced-motion: no-preference) { + transition: transform ${transitions.actionable}s ease-in-out; + } +`; + +export const ToggleSwitch = styled.div<{ state: boolean }>` + display: inline-block; + background-color: ${(props) => (props.state ? palette.green200 : palette.taupe100)}; + height: 1.3em; + width: 2.6em; + border-radius: 1.3em; + position: relative; + border: 1px solid rgba(0, 0, 0, 0.1); + top: 0.23em; + transition: background-color ${transitions.in2in}s ease-in-out; + + ${ToggleState} { + ${(props) => + props.state === true && + css` + transform: translateX(1.3em); + `} + } +`; diff --git a/packages/design-system/atoms/toggle/Toggle.tsx b/packages/design-system/atoms/toggle/Toggle.tsx index 1d3b028..b1960c0 100644 --- a/packages/design-system/atoms/toggle/Toggle.tsx +++ b/packages/design-system/atoms/toggle/Toggle.tsx @@ -1,3 +1,5 @@ +import { ToggleState, ToggleSwitch } from './Toggle.styled'; + type ToggleProps = { onChange?: (newState: boolean) => void; children: React.ReactNode; @@ -10,6 +12,9 @@ export const Toggle = (props: ToggleProps) => ( props.onChange?.(!props.state); }} > - {props.children}: