From f8402d46ac3beb7d464e6d308265072fca55d098 Mon Sep 17 00:00:00 2001
From: Miguel Torres <miguelmariatorresrojas@gmail.com>
Date: Sun, 29 Jul 2018 21:08:51 +0200
Subject: [PATCH] DevDocs: Gutenberg Components - Load examples dynamically
Each example has now a specific class
---
.../design/gutenberg-component-example.jsx | 10 ++++++++--
.../devdocs/design/gutenberg-components.jsx | 16 ++++++++++++++++
client/devdocs/design/style.scss | 19 ++++++++++++++-----
3 files changed, 38 insertions(+), 7 deletions(-)
diff --git a/client/devdocs/design/gutenberg-component-example.jsx b/client/devdocs/design/gutenberg-component-example.jsx
index 6c10ae4caa530..e77a529623587 100644
--- 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
index 5878bec3ab9c1..c2047e7a2abac 100644
--- 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
index e9fe459dcb560..6507c527a2958 100644
--- 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;
}