Merge branch 'steps' of https://github.com/growingio/gio-design into …

…steps

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)

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,
-}
+  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',
+};