Toggle docs + preview (#181)

@stellar/design-system-website/docs/components/inputs/toggle.mdx

@@ -0,0 +1,19 @@
+---
+slug: /toggle
+---
+
+# Toggle
+
+<ComponentDescription componentName="Toggle" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Toggle">
+  <Toggle id="toggle" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Toggle" />

@stellar/design-system-website/src/componentPreview/togglePreview.tsx

@@ -0,0 +1,26 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const togglePreview: ComponentPreview = {
+  options: [
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "select",
+      prop: "checked",
+      customValue: true,
+      options: [
+        {
+          value: "",
+          label: "Off",
+        },
+        {
+          value: "on",
+          label: "On",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -25,6 +25,7 @@ import { radioButtonPreview } from "@site/src/componentPreview/radioButtonPrevie
 import { selectPreview } from "@site/src/componentPreview/selectPreview";
 import { textareaPreview } from "@site/src/componentPreview/textareaPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
+import { togglePreview } from "@site/src/componentPreview/togglePreview";
 import { tooltipPreview } from "@site/src/componentPreview/tooltipPreview";
 
 // =============================================================================
@@ -50,6 +51,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Select: selectPreview,
   Textarea: textareaPreview,
   Title: titlePreview,
+  Toggle: togglePreview,
   Tooltip: tooltipPreview,
 };
 

@stellar/design-system/src/components/Toggle/index.tsx

@@ -1,21 +1,38 @@
 import React, { cloneElement, useEffect, useState } from "react";
 import "./styles.scss";
 
-interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
+/** */
+export interface ToggleProps {
+  /** ID of the toggle should be unique */
   id: string;
+  /** If `true` the toggle state is "on" */
   checked: boolean;
+  /** Use a specific input rather than a generic HTML input (useful for Formik or otherwise controlled inputs) */
   customInput?: React.ReactElement;
+  /** Function to handle the toggle state change */
   onChange?: () => void;
+  /** Disable the toggle */
   disabled?: boolean;
 }
 
-export const Toggle: React.FC<ToggleProps> = ({
+interface Props
+  extends ToggleProps,
+    React.InputHTMLAttributes<HTMLInputElement> {
+  id: string;
+  onChange?: () => void;
+  checked: boolean;
+}
+
+/**
+ * `Toggle` component is similar to `Checkbox` component, which allows to toggle/switch between on and off states.
+ */
+export const Toggle: React.FC<Props> = ({
   id,
   checked,
   customInput,
   onChange,
   disabled,
-}: ToggleProps) => {
+}: Props) => {
   const [checkedValue, setCheckedValue] = useState(checked);
 
   useEffect(() => {