docs(Combobox): add mdx docs

carbon-design-system · Aug 26, 2020 · aae5638 · aae5638
1 parent 92992ef
commit aae5638
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 17 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -7,8 +7,9 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import { boolean, select, text } from '@storybook/addon-knobs';
 import ComboBox from '../ComboBox';
+import mdx from './ComboBox.mdx';
 
 const items = [
   {
@@ -50,6 +51,28 @@ const directions = {
   'Top ': 'top',
 };
 
+export default {
+  title: 'ComboBox',
+  component: ComboBox,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const combobox = () => (
+  <div style={{ width: 300 }}>
+    <ComboBox
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      placeholder="Filter..."
+      titleText="ComboBox title"
+      helperText="Combobox helper text"
+    />
+  </div>
+);
+
 const props = () => ({
   id: text('Combobox ID (id)', 'carbon-combobox-example'),
   placeholder: text('Placeholder text (placeholder)', 'Filter...'),
@@ -64,16 +87,7 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-export default {
-  title: 'ComboBox',
-  decorators: [withKnobs],
-
-  parameters: {
-    component: ComboBox,
-  },
-};
-
-export const Default = () => (
+export const Playground = () => (
   <div style={{ width: 300 }}>
     <ComboBox
       items={items}
@@ -82,9 +96,3 @@ export const Default = () => (
     />
   </div>
 );
-
-Default.parameters = {
-  info: {
-    text: 'ComboBox',
-  },
-};
diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -0,0 +1,30 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import * as stories from './ComboBox-story.js';
+import ComboBox from '../ComboBox';
+
+# ComboBox
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+## Overview
+
+A combobox allows the user to make a selection from a predefined list of options
+and is typically used when there are a large amount of options to choose from.
+
+<Preview>
+  <Story id="combobox--combobox" />
+</Preview>
+
+## Component API
+
+<Props sort="asc" />
+
+## Feedback
+
+Help us improve these docs by
+[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/ComboBox/ComboBox.stories.mdx)