[EuiInlineEdit] Add Playground & Code Snippets

src-docs/src/views/inline_edit/inline_edit_example.js

@@ -11,20 +11,72 @@ import {
   EuiInlineEditTitle,
 } from '../../../../src';
 
+import { inlineEditTextConfig, inlineEditTitleConfig } from './playground';
+
 import InlineEditText from './inline_edit_text';
 const inlineEditTextSource = require('!!raw-loader!./inline_edit_text');
+const inlineEditTextSnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline"
+  defaultValue="Hello World!"
+/>`;
 
 import InlineEditTitle from './inline_edit_title';
 const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
+const inlineEditTitleSnippet = `<EuiInlineEditTitle
+  inputAriaLabel="Edit title inline"
+  defaultValue="Hello World (but as a title)!"
+  heading="h3"
+/>`;
 
 import InlineEditModeProps from './inline_edit_mode_props';
 const inlineEditModePropsSource = require('!!raw-loader!./inline_edit_mode_props');
+const inlineEditModePropsSnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline for readMode and editMode props"
+  defaultValue="This inline edit component has been customized!"
+  size="m"
+  readModeProps={{
+    color: 'primary',
+    iconSide: 'left',
+  }}
+  editModeProps={{
+    inputProps: {
+      prepend: 'Prepend example',
+    },
+    formRowProps: {
+      helpText: 'Example help text',
+    },
+    saveButtonProps: {
+      color: 'primary',
+    },
+    cancelButtonProps: {
+      display: 'empty',
+    },
+  }}
+/>`;
 
 import InlineEditSave from './inline_edit_save';
 const inlineEditSaveSource = require('!!raw-loader!././inline_edit_save');
+const inlineEditModeSaveSnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline"
+  defaultValue={defaultInlineEditValue}
+  onSave={(newInlineEditValue: string) => {
+    localStorage.setItem('inlineEditValue', newInlineEditValue);
+  }}
+/>`;
 
 import InlineEditValidation from './inline_edit_validation';
 const inlineEditValidationSource = require('!!raw-loader!././inline_edit_validation');
+const inlineEditValidationSnippet = `<EuiInlineEditText
+  inputAriaLabel="This input will validate on save"
+  defaultValue={defaultInlineEditValue}
+  editModeProps={{
+    formRowProps: { error: errors },
+    cancelButtonProps: { onClick: () => setErrors([]) },
+  }}
+  isInvalid={isInvalid}
+  isLoading={isLoading}
+  onSave={onSave}
+/>`;
 
 export const InlineEditExample = {
   title: 'Inline edit',
@@ -60,6 +112,8 @@ export const InlineEditExample = {
       ],
       demo: <InlineEditText />,
       props: { EuiInlineEditText },
+      snippet: inlineEditTextSnippet,
+      playground: inlineEditTextConfig,
     },
     {
       title: 'Display and edit headings and titles',
@@ -80,6 +134,8 @@ export const InlineEditExample = {
       ],
       demo: <InlineEditTitle />,
       props: { EuiInlineEditTitle },
+      snippet: inlineEditTitleSnippet,
+      playground: inlineEditTitleConfig,
     },
     {
       title: 'Saving edited text',
@@ -98,6 +154,7 @@ export const InlineEditExample = {
         },
       ],
       demo: <InlineEditSave />,
+      snippet: inlineEditModeSaveSnippet,
     },
     {
       title: 'Validating edited text',
@@ -129,6 +186,7 @@ export const InlineEditExample = {
         },
       ],
       demo: <InlineEditValidation />,
+      snippet: inlineEditValidationSnippet,
     },
     {
       title: 'Customizing read and edit modes',
@@ -187,6 +245,7 @@ export const InlineEditExample = {
         },
       ],
       demo: <InlineEditModeProps />,
+      snippet: inlineEditModePropsSnippet,
     },
   ],
 };

src-docs/src/views/inline_edit/playground.js

@@ -0,0 +1,105 @@
+import { PropTypes } from 'react-view';
+import {
+  EuiInlineEditText,
+  EuiInlineEditTitle,
+} from '../../../../src/components';
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+  simulateFunction,
+} from '../../services/playground';
+
+const commonPropsToUse = (propsToUse) => {
+  propsToUse.inputAriaLabel = {
+    ...propsToUse.inputAriaLabel,
+    value: 'Edit text inline',
+    type: PropTypes.String,
+  };
+
+  propsToUse.isLoading = {
+    type: PropTypes.Boolean,
+  };
+
+  propsToUse.isInvalid = {
+    type: PropTypes.Boolean,
+  };
+
+  propsToUse.startWithEditOpen = {
+    type: PropTypes.Boolean,
+  };
+
+  propsToUse.onSave = simulateFunction(propsToUse.onSave);
+
+  return propsToUse;
+};
+
+export const inlineEditTextConfig = () => {
+  const docgenInfo = Array.isArray(EuiInlineEditText.__docgenInfo)
+    ? EuiInlineEditText.__docgenInfo[0]
+    : EuiInlineEditText.__docgenInfo;
+  let propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.defaultValue = {
+    ...propsToUse.defaultValue,
+    value: 'Hello! You are editing text content!',
+    type: PropTypes.String,
+  };
+
+  propsToUse = commonPropsToUse(propsToUse);
+
+  return {
+    config: {
+      componentName: 'EuiInlineEditText',
+      props: propsToUse,
+      scope: {
+        EuiInlineEditText,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiInlineEditText'],
+        },
+      },
+      customProps: {
+        onSave: dummyFunction,
+      },
+    },
+  };
+};
+
+export const inlineEditTitleConfig = () => {
+  const docgenInfo = Array.isArray(EuiInlineEditTitle.__docgenInfo)
+    ? EuiInlineEditTitle.__docgenInfo[0]
+    : EuiInlineEditTitle.__docgenInfo;
+  let propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.defaultValue = {
+    ...propsToUse.defaultValue,
+    value: 'Hello! You are editing a title!',
+    type: PropTypes.String,
+  };
+
+  propsToUse.heading = {
+    ...propsToUse.heading,
+    value: 'h2',
+  };
+
+  propsToUse = commonPropsToUse(propsToUse);
+
+  return {
+    config: {
+      componentName: 'EuiInlineEditTitle',
+      props: propsToUse,
+      scope: {
+        EuiInlineEditTitle,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiInlineEditTitle'],
+        },
+      },
+      customProps: {
+        onSave: dummyFunction,
+      },
+    },
+  };
+};