DevDocs: Gutenberg Components - Load examples dynamically

Each example has now a specific class
Automattic · Jul 29, 2018 · f8402d4 · f8402d4
1 parent 1ec523b
commit f8402d4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/client/devdocs/design/gutenberg-component-example.jsx b/client/devdocs/design/gutenberg-component-example.jsx
@@ -10,6 +10,7 @@ import { getSettings } from '@wordpress/date';
 import { LiveError, LivePreview, LiveProvider } from 'react-live';
 import request from 'superagent';
 import codeBlocks from 'gfm-code-blocks';
+import classnames from 'classnames';
 
 class Example extends React.Component {
 	state = {
@@ -32,7 +33,7 @@ class Example extends React.Component {
 				format: 'markdown',
 			} )
 			.then( ( { text } ) => {
-				let code = codeBlocks( text )[ 0 ].code;
+				let code = codeBlocks( text ).filter( block => 'jsx' === block.lang )[ 0 ].code;
 
 				// react-live cannot resolve imports in real time, so we get rid of them
 				// (dependencies will be injected via the scope property)
@@ -49,8 +50,13 @@ class Example extends React.Component {
 			withState,
 			getSettings,
 		};
+		const className = classnames(
+			'design__gutenberg-component-example',
+			`design__gutenberg-component-example--${ this.props.readmeFilePath }`
+		);
+
 		return code ? (
-			<LiveProvider code={ code } scope={ scope } className="design__gutenberg-component-example">
+			<LiveProvider code={ code } scope={ scope } className={ className }>
 				<LiveError />
 				<LivePreview />
 			</LiveProvider>

diff --git a/client/devdocs/design/gutenberg-components.jsx b/client/devdocs/design/gutenberg-components.jsx
@@ -46,10 +46,26 @@ export default class extends React.Component {
 			'ButtonGroup',
 			'CheckboxControl',
 			'ClipboardButton',
+			'ColorIndicator',
+			'ColorPalette',
 			'Dashicon',
 			'Disabled',
 			'Draggable',
 			[ 'DateTimePicker', { readmeFilePath: 'date-time' } ],
+			'DropZone',
+			'Dropdown',
+			'DropdownMenu',
+			'ExternalLink',
+			'FocusableIframe',
+			'FontSizePicker',
+			'FormFileUpload',
+			'FormToggle',
+			'FormTokenField',
+			'IconButton',
+			'KeyboardShortcuts',
+			'MenuGroup',
+			'MenuItem',
+			'MenuItemsChoice',
 		];
 
 		return (

diff --git a/client/devdocs/design/style.scss b/client/devdocs/design/style.scss
@@ -89,9 +89,18 @@
 	}
 }
 
-.design__gutenberg-component-example {
-	// Styles the contenteditable div included in the Autocomplete example as an input
-	.components-autocomplete [contenteditable] {
-		@extend %form-field;
-	}
+// Styles the contenteditable div included in the Gutenberg Autocomplete component example as an input
+.design__gutenberg-component-example--autocomplete [contenteditable] {
+	@extend %form-field;
+}
+
+.design__gutenberg-component-example--drop-zone {
+	position: relative;
+	text-align: center;
+	padding: 50px;
+}
+
+.design__gutenberg-component-example--date-time,
+.design__gutenberg-component-example--dropdown {
+	display: inline-block;
 }