Add components examples in README.md files - Part 1

packages/components/src/autocomplete/README.md

@@ -1,5 +1,4 @@
-Autocomplete
-============
+# Autocomplete
 
 This component is used to provide autocompletion support for a child input component.
 
@@ -105,33 +104,59 @@ Whether to apply debouncing for the autocompleter. Set to true to enable debounc
 - Type: `Boolean`
 - Required: No
 
-### Examples
+## Usage
 
 The following is a contrived completer for fresh fruit.
 
 ```jsx
-const fruitCompleter = {
-	name: 'fruit',
-	// The prefix that triggers this completer
-	triggerPrefix: '~',
-	// The option data
-	options: [
-		{ visual: '🍎', name: 'Apple' },
-		{ visual: '🍊', name: 'Orange' },
-		{ visual: '🍇', name: 'Grapes' },
-	],
-	// Returns a label for an option like "🍊 Orange"
-	getOptionLabel: option => [
-		<span class="icon">{ option.visual }</span>,
-		option.name
-	],
-	// Declares that options should be matched by their name
-	getOptionKeywords: option => [ option.name ],
-	// Declares that the Grapes option is disabled
-	isOptionDisabled: option => option.name === 'Grapes',
-	// Declares completions should be inserted as abbreviations
-	getOptionCompletion: option => (
-		<abbr title={ option.name }>{ option.visual }</abbr>
-	),
+import { Autocomplete } from '@wordpress/components';
+
+function FreshFruitAutocomplete() {
+	const autocompleters = [
+		{
+			name: 'fruit',
+			// The prefix that triggers this completer
+			triggerPrefix: '~',
+			// The option data
+			options: [
+				{ visual: '🍎', name: 'Apple', id: 1 },
+				{ visual: '🍊', name: 'Orange', id: 2 },
+				{ visual: '🍇', name: 'Grapes', id: 3 },
+			],
+			// Returns a label for an option like "🍊 Orange"
+			getOptionLabel: option => (
+				<span>
+					<span className="icon" >{ option.visual }</span>{ option.name }
+				</span>
+			),
+			// Declares that options should be matched by their name
+			getOptionKeywords: option => [ option.name ],
+			// Declares that the Grapes option is disabled
+			isOptionDisabled: option => option.name === 'Grapes',
+			// Declares completions should be inserted as abbreviations
+			getOptionCompletion: option => (
+				<abbr title={ option.name }>{ option.visual }</abbr>
+			),
+		}
+	];
+
+	return (
+		<div>
+			<Autocomplete completers={ autocompleters }>
+				{ ( { isExpanded, listBoxId, activeId } ) => (
+					<div
+						contentEditable
+						suppressContentEditableWarning
+						aria-autocomplete="list"
+						aria-expanded={ isExpanded }
+						aria-owns={ listBoxId }
+						aria-activedescendant={ activeId }
+					>
+					</div>
+				) }
+			</Autocomplete>
+			<p>Type ~ for triggering the autocomplete.</p>
+		</div>
+	);
 };
 ```

packages/components/src/base-control/README.md

@@ -1,5 +1,4 @@
-BaseControl
-=======
+# BaseControl
 
 BaseControl component is used to generate labels and help text for components handling user inputs.
 
@@ -8,17 +7,21 @@ BaseControl component is used to generate labels and help text for components ha
 
 Render a BaseControl for a textarea input:
 ```jsx
-	<BaseControl
-		id="textarea-1" 
-		label="Text"
-		help="Enter some text"
-	>
-        <textarea
-            id="textarea-1"
-            onChange={ onChangeValue }
-            value={ value }
-        />
-    </BaseControl>
+import { BaseControl } from '@wordpress/components';
+
+function MyBaseControl() {
+	return (
+		<BaseControl
+			id="textarea-1"
+			label="Text"
+			help="Enter some text"
+		>
+			<textarea
+				id="textarea-1"
+			/>
+		</BaseControl>
+    );
+}
 ```
 
 ## Props

packages/components/src/button-group/README.md

@@ -0,0 +1,16 @@
+# ButtonGroup
+
+## Usage
+
+```jsx
+import { Button, ButtonGroup } from '@wordpress/components';
+
+function MyButtonGroup() {
+	return (
+		<ButtonGroup>
+			<Button isPrimary>Button 1</Button>
+			<Button isPrimary>Button 2</Button>
+		</ButtonGroup>
+	);
+}
+```

packages/components/src/button/README.md

@@ -9,12 +9,9 @@ The presence of a `href` prop determines whether an `anchor` element is rendered
 Renders a button with default style.
 
 ```jsx
-/**
- * WordPress dependencies
- */
 import { Button } from "@wordpress/components";
 
-export default function ClickMeButton() {
+function MyButton() {
 	return (
 		<Button isDefault>
 			Click me!

packages/components/src/checkbox-control/README.md

@@ -1,5 +1,4 @@
-CheckboxControl
-=======
+# CheckboxControl
 
 CheckboxControl component is used to generate a checkbox input field.
 
@@ -8,13 +7,20 @@ CheckboxControl component is used to generate a checkbox input field.
 
 Render an is author checkbox:
 ```jsx
-    <CheckboxControl
-        heading="User"
-        label="Is author"
-        help="Is the user a author or not?"
-        checked={ checked }
-        onChange={ onChange }
-    />
+import { CheckboxControl } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+
+withState( {
+	isChecked: true,
+} )( ( { isChecked, setState } ) => ( 
+	<CheckboxControl
+		heading="User"
+		label="Is author"
+		help="Is the user a author or not?"
+		checked={ isChecked }
+		onChange={ ( isChecked ) => { setState( { isChecked } ) } }
+	/>
+) )
 ```
 
 ## Props

packages/components/src/clipboard-button/README.md

@@ -0,0 +1,21 @@
+# ClipboardButton
+
+## Usage
+
+```jsx
+import { ClipboardButton } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+
+withState( {
+	hasCopied: false,
+} )( ( { hasCopied, setState } ) => ( 
+	<ClipboardButton
+		isPrimary
+		text="Text to be copied."
+		onCopy={ () => setState( { hasCopied: true } ) }
+		onFinishCopy={ () => setState( { hasCopied: false } ) }
+	>
+		{ hasCopied ? 'Copied!' : 'Copy Text' }
+	</ClipboardButton>
+) )
+```

packages/components/src/color-indicator/README.md

@@ -0,0 +1,13 @@
+# ColorIndicator
+
+## Usage
+
+```jsx
+import { ColorIndicator } from '@wordpress/components';
+
+function MyColorIndicator() {
+	return (
+		<ColorIndicator colorValue="#f00" />
+	);
+}
+```

packages/components/src/color-palette/README.md

@@ -0,0 +1,25 @@
+# ColorPalette
+
+## Usage
+```jsx
+import { ColorPalette } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+
+withState( {
+	color: '#f00',
+} )( ( { color, setState } ) => { 
+	const colors = [ 
+		{ name: 'red', color: '#f00' }, 
+		{ name: 'white', color: '#fff' }, 
+		{ name: 'blue', color: '#00f' }, 
+	];
+
+	return ( 
+		<ColorPalette 
+			colors={ colors } 
+			value={ color }
+			onChange={ color => setState( { color } ) } 
+		/>
+	) 
+} )
+```

packages/components/src/dashicon/README.md

@@ -0,0 +1,17 @@
+# Dashicon
+
+## Usage
+
+```jsx
+import { Dashicon } from '@wordpress/components';
+
+function MyDashicons() {
+	return (
+		<div>
+			<Dashicon icon="admin-home" />
+			<Dashicon icon="products" />
+			<Dashicon icon="wordpress" />
+		</div>
+	);
+}
+```

packages/components/src/date-time/README.md

@@ -1,5 +1,4 @@
-DateTimePicker
-=======
+# DateTimePicker
 
 DateTimePicker is a React component to render a calendar and clock for selecting a date and time. The calendar and clock components can be accessed individually using the `DatePicker` and `TimePicker` components respectively.
 

packages/components/src/disabled/README.md

@@ -1,5 +1,4 @@
-Disabled
-========
+# Disabled
 
 Disabled is a component which disables descendant tabbable elements and prevents pointer interaction.
 
@@ -8,25 +7,27 @@ Disabled is a component which disables descendant tabbable elements and prevents
 Assuming you have a form component, you can disable all form inputs by wrapping the form with `<Disabled>`.
 
 ```jsx
-const DisableToggleForm = withState( {
-	isDisabled: true,
-} )( ( { isDisabled, setState } ) => {
-	let form = <form><input /></form>;
+import { Button, Disabled, TextControl } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
 
+withState( {
+	isDisabled: true,
+} )( ( { isDisabled, setState } ) => { 
+	let input = <TextControl label="Input" onChange={ () => {} } />;
 	if ( isDisabled ) {
-		form = <Disabled>{ form }</Disabled>;
+		input = <Disabled>{ input }</Disabled>;
 	}
-
-	const toggleDisabled = setState( ( state ) => ( {
-		isDisabled: ! state.isDisabled,
-	} ) );
-
+	
+	const toggleDisabled = () => {
+		setState( ( state ) => ( { isDisabled: ! state.isDisabled } ) );
+	};
+	
 	return (
 		<div>
-			{ form }
-			<button onClick={ toggleDisabled }>
+			{ input }
+			<Button isPrimary onClick={ toggleDisabled }>
 				Toggle Disabled
-			</button>
+			</Button>
 		</div>
 	);
 } )

packages/components/src/draggable/README.md

@@ -35,3 +35,26 @@ The function called when dragging ends.
 - Type: `Function`
 - Required: No
 - Default: `noop`
+
+## Usage
+
+```jsx
+import { Dashicon, Draggable, Panel, PanelBody } from '@wordpress/components';
+
+function DraggablePanel() {
+	return (
+		<div id="draggable-panel">
+			<Panel header="Draggable panel" >
+				<PanelBody>
+					<Draggable
+						elementId="draggable-panel"
+						transferData={ { } }
+					>
+						<Dashicon icon="move" />
+					</Draggable>
+				</PanelBody>
+			</Panel>
+		</div>
+	);
+}
+```

packages/components/src/drop-zone/README.md

@@ -6,16 +6,22 @@
 
 ```jsx
 import { DropZoneProvider, DropZone } from '@wordpress/components';
-
-function MyComponent() {
-	return (
-		<DropZoneProvider>
-			<div>
-				<DropZone onDrop={ () => console.log( 'do something' ) } />
-			</div>
-		</DropZoneProvider>
-	);
-}
+import { withState } from '@wordpress/compose';
+
+withState( {
+	hasDropped: false,
+} )( ( { hasDropped, setState } ) => (
+	<DropZoneProvider>
+		<div>
+			{ hasDropped ? 'Dropped!' : 'Drop something here' }
+			<DropZone 
+				onFilesDrop={ () => setState( { hasDropped: true } ) }
+				onHTMLDrop={ () => setState( { hasDropped: true } )  }
+				onDrop={ () => setState( { hasDropped: true } ) } 
+			/>
+		</div>
+	</DropZoneProvider>
+) );
 ```
 
 ## Props