From 6f6381d260164119e95815ffc7716c7f7454c212 Mon Sep 17 00:00:00 2001
From: tongchuliu <tongchuliu@growingio.com>
Date: Thu, 4 Feb 2021 10:43:03 +0800
Subject: [PATCH] docs(toggles): add stories and document for toggles component
 (#764)

Co-authored-by: Jack <panjie@growingio.com>
---
 src/components/toggles/Toggles.mdx         | 36 ++++++++++++++++++++
 src/components/toggles/Toggles.stories.tsx | 39 +++++++++++++++++-----
 2 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 src/components/toggles/Toggles.mdx

diff --git a/src/components/toggles/Toggles.mdx b/src/components/toggles/Toggles.mdx
new file mode 100644
index 0000000000..89d587494a
--- /dev/null
+++ b/src/components/toggles/Toggles.mdx
@@ -0,0 +1,36 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import Toggles from './toggles';
+
+# Toggles 开关
+
+<Subtitle>需要表示开关状态/两种状态之间的切换时使用。</Subtitle>
+
+## 参数说明
+
+<ArgsTable of={Toggles} />
+
+## 代码演示
+
+### 默认
+
+基础用法
+
+[Example](/?path=/story/basic-components-toggles--default)
+
+### 禁用
+
+Toggles 失效状态
+
+[Example](/?path=/story/basic-components-toggles--disabled)
+
+### 文字
+
+带有文字
+
+[Example](/?path=/story/basic-components-toggles--suffix-content)
+
+### 自定义背景色
+
+可以自定义背景色
+
+[Example](/?path=/story/basic-components-toggles--custom-color)
diff --git a/src/components/toggles/Toggles.stories.tsx b/src/components/toggles/Toggles.stories.tsx
index 1c0e0c3f9a..1de0dda2d5 100644
--- a/src/components/toggles/Toggles.stories.tsx
+++ b/src/components/toggles/Toggles.stories.tsx
@@ -1,17 +1,38 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-
-import Toggles from './index'
-import { TogglesProps } from './interface'
-import './style'
+import Docs from './Toggles.mdx';
+import Toggles from './index';
+import { TogglesProps } from './interface';
+import './style';
 
 export default {
-    title: 'Components/Basic/Toggles',
-    component: Toggles,
+  title: 'Basic Components/Toggles',
+  component: Toggles,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
 } as Meta;
 
-const Template : Story<TogglesProps> = (args) => <Toggles {...args} />;
+const Template: Story<TogglesProps> = (args) => <Toggles {...args} />;
 export const Default = Template.bind({});
 Default.args = {
-    suffixContent: true,
-}
\ No newline at end of file
+  className: 'gio-toggles-default',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const suffixContent = Template.bind({});
+suffixContent.args = {
+  suffixContent: true,
+};
+
+export const CustomColor = Template.bind({});
+CustomColor.args = {
+  activeColor: '#000',
+  inactiveColor: '#fff',
+};