From 8b8f053525766db2e7e07cb550b40d3d579ad1f8 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Thu, 22 Apr 2021 16:26:23 -0400
Subject: [PATCH] feat: add basis of toggle atom

---
 .../atoms/toggle/Toggle.stories.tsx           | 23 +++++++++++++++++++
 .../atoms/toggle/Toggle.styled.tsx            |  0
 .../design-system/atoms/toggle/Toggle.tsx     | 15 ++++++++++++
 packages/design-system/atoms/toggle/index.ts  |  1 +
 4 files changed, 39 insertions(+)
 create mode 100644 packages/design-system/atoms/toggle/Toggle.stories.tsx
 create mode 100644 packages/design-system/atoms/toggle/Toggle.styled.tsx
 create mode 100644 packages/design-system/atoms/toggle/Toggle.tsx
 create mode 100644 packages/design-system/atoms/toggle/index.ts

diff --git a/packages/design-system/atoms/toggle/Toggle.stories.tsx b/packages/design-system/atoms/toggle/Toggle.stories.tsx
new file mode 100644
index 0000000..4a5fe1c
--- /dev/null
+++ b/packages/design-system/atoms/toggle/Toggle.stories.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Toggle } from './Toggle';
+export default {
+  title: 'Atoms/Toggle',
+  component: Toggle,
+};
+
+export const toggle = (args) => <Toggle {...args}>Turn a cool thing on</Toggle>;
+export const interactive = (args) => {
+  const [state, setState] = React.useState(true);
+  return (
+    <Toggle
+      {...args}
+      state={state}
+      onChange={(val) => {
+        setState(val);
+        args.onChange(val);
+      }}
+    >
+      Turn a cool thing on
+    </Toggle>
+  );
+};
diff --git a/packages/design-system/atoms/toggle/Toggle.styled.tsx b/packages/design-system/atoms/toggle/Toggle.styled.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/packages/design-system/atoms/toggle/Toggle.tsx b/packages/design-system/atoms/toggle/Toggle.tsx
new file mode 100644
index 0000000..1d3b028
--- /dev/null
+++ b/packages/design-system/atoms/toggle/Toggle.tsx
@@ -0,0 +1,15 @@
+type ToggleProps = {
+  onChange?: (newState: boolean) => void;
+  children: React.ReactNode;
+  state: boolean;
+};
+
+export const Toggle = (props: ToggleProps) => (
+  <div
+    onClick={() => {
+      props.onChange?.(!props.state);
+    }}
+  >
+    {props.children}:<div>{props.state ? 'on' : 'off'}!</div>
+  </div>
+);
diff --git a/packages/design-system/atoms/toggle/index.ts b/packages/design-system/atoms/toggle/index.ts
new file mode 100644
index 0000000..7aaab1d
--- /dev/null
+++ b/packages/design-system/atoms/toggle/index.ts
@@ -0,0 +1 @@
+export * from './Toggle';