Add switch component

src/components/Switch/SwitchIcon/index.tsx

@@ -0,0 +1,30 @@
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export interface SwitchIconProps {
+  className?: string;
+  value?: boolean | null;
+}
+
+function SwitchIcon(props: SwitchIconProps) {
+    const {
+        className,
+        value,
+    } = props;
+
+    return (
+        <div
+            className={_cs(
+                styles.switchIcon,
+                className,
+                value ? styles.on : styles.off,
+            )}
+            aria-hidden="true"
+        >
+            <div className={styles.knob} />
+        </div>
+    );
+}
+
+export default SwitchIcon;

src/components/Switch/SwitchIcon/styles.module.css

@@ -0,0 +1,34 @@
+.switch-icon {
+    --gap: .05em;
+    --border-width: var(--go-ui-width-separator-sm);
+    --knob-diameter: calc(1em - 2 * var(--gap) - 2 * var(--border-width));
+    --background-color: var(--go-ui-color-gray-50);
+    --border-color: var(--go-ui-color-gray-30);
+    --knob-color: var(--go-ui-color-white);
+
+    display: flex;
+    align-items: center;
+    transition: var(--go-ui-duration-transition-medium) background-color ease-in-out;
+    border: var(--border-width) solid var(--border-color);
+    border-radius: .5em;
+    background-color: var(--background-color);
+    padding: var(--gap);
+    width: calc(1em + var(--knob-diameter));
+    height: 1em;
+
+    .knob {
+        transition: var(--go-ui-duration-transition-medium) transform ease-in-out, var(--go-ui-duration-transition-medium) background-color ease-in-out;
+        border-radius: calc(calc(1em - var(--gap) * 2) / 2);
+        background-color: var(--knob-color);
+        width: var(--knob-diameter);
+        height: var(--knob-diameter);
+    }
+
+    &.on {
+        background-color: var(--go-ui-color-primary-red);
+
+        .knob {
+            transform: translateX(100%);
+        }
+    }
+}

src/components/Switch/index.tsx

@@ -0,0 +1,11 @@
+import styles from './styles.module.css';
+
+function Switch() {
+    return (
+        <div
+            className={styles.container}
+        />
+    );
+}
+
+export default Switch;

src/components/Switch/styles.module.css

@@ -0,0 +1,3 @@
+.container {
+    --width: var(--go-ui-font-size-4xl);
+}