[Emotion] Convert EuiDescriptionList

src-docs/src/views/description_list/description_list.js

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import {
-  EuiDescriptionList,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
-} from '../../../../src/components';
+import { EuiDescriptionList } from '../../../../src/components';
 
 const favoriteVideoGames = [
   {
@@ -16,29 +10,11 @@ const favoriteVideoGames = [
   {
     title: 'TIE Fighter',
     description:
-      'The sequel to XWING, join the dark side and fly for the Emporer.',
+      'The sequel to XWING, join the dark side and fly for the Emperor.',
   },
   {
     title: 'Quake 2',
     description: 'The game that made me drop out of college.',
   },
 ];
-export default () => (
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiDescriptionList listItems={favoriteVideoGames} />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiDescriptionList>
-        <EuiDescriptionListTitle>Dota 2</EuiDescriptionListTitle>
-        <EuiDescriptionListDescription>
-          A videogame that I have spent way too much time on over the years.
-        </EuiDescriptionListDescription>
-        <EuiDescriptionListTitle>Kings Quest VI</EuiDescriptionListTitle>
-        <EuiDescriptionListDescription>
-          The game that forced me to learn DOS.
-        </EuiDescriptionListDescription>
-      </EuiDescriptionList>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+export default () => <EuiDescriptionList listItems={favoriteVideoGames} />;

src-docs/src/views/description_list/description_list_column.js

@@ -1,10 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
-import {
-  EuiDescriptionList,
-  EuiSpacer,
-  EuiTitle,
-} from '../../../../src/components';
+import { EuiDescriptionList } from '../../../../src/components';
 
 const favoriteVideoGames = [
   {
@@ -22,27 +18,9 @@ const favoriteVideoGames = [
   },
 ];
 export default () => (
-  <Fragment>
-    <EuiDescriptionList
-      type="column"
-      listItems={favoriteVideoGames}
-      style={{ maxWidth: '400px' }}
-    />
-
-    <EuiSpacer size="xl" />
-
-    <EuiTitle size="s">
-      <h3>
-        The following list will become the typical row format on small screens
-      </h3>
-    </EuiTitle>
-
-    <EuiSpacer />
-
-    <EuiDescriptionList
-      type="responsiveColumn"
-      listItems={favoriteVideoGames}
-      style={{ maxWidth: '400px' }}
-    />
-  </Fragment>
+  <EuiDescriptionList
+    type="column"
+    listItems={favoriteVideoGames}
+    style={{ maxWidth: '400px' }}
+  />
 );

src-docs/src/views/description_list/description_list_column_responsive.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { EuiDescriptionList } from '../../../../src/components';
+
+const favoriteVideoGames = [
+  {
+    title: 'The Elder Scrolls: Morrowind',
+    description: 'The opening music alone evokes such strong memories.',
+  },
+  {
+    title: 'TIE Fighter',
+    description:
+      'The sequel to XWING, join the dark side and fly for the Emporer.',
+  },
+  {
+    title: 'Quake 2',
+    description: 'The game that made me drop out of college.',
+  },
+];
+export default () => (
+  <EuiDescriptionList
+    type="responsiveColumn"
+    listItems={favoriteVideoGames}
+    style={{ maxWidth: '400px' }}
+  />
+);

src-docs/src/views/description_list/description_list_example.js

@@ -9,6 +9,8 @@ import {
   EuiDescriptionListDescription,
 } from '../../../../src/components';
 
+import { descriptionListConfig } from './playground';
+
 import DescriptionList from './description_list';
 const descriptionListSource = require('!!raw-loader!./description_list');
 const descriptionListSnippet = [
@@ -20,26 +22,42 @@ const descriptionListSnippet = [
     },
   ]}
 />`,
+];
+
+import DescriptionListSeparate from './description_list_separate';
+const descriptionListSeparateSource = require('!!raw-loader!./description_list_separate');
+const descriptionListSeparateSnippet = [
   `<EuiDescriptionList>
-  <EuiDescriptionListTitle>Dota 2</EuiDescriptionListTitle>
+  <EuiDescriptionListTitle>
+    The Elder Scrolls: Morrowind
+  </EuiDescriptionListTitle>
   <EuiDescriptionListDescription>
-    A videogame that I have spent way too much time on over the years.
+    The opening music alone evokes such strong memories.
   </EuiDescriptionListDescription>
+  <EuiDescriptionListTitle>TIE Fighter</EuiDescriptionListTitle>
+  <EuiDescriptionListDescription>
+    The sequel to XWING, join the dark side and fly for the Emperor.
+  </EuiDescriptionListDescription>
+  <EuiDescriptionListTitle>Quake 2</EuiDescriptionListTitle>
+    <EuiDescriptionListDescription>
+      The game that made me drop out of college.
+    </EuiDescriptionListDescription>
 </EuiDescriptionList>`,
 ];
 
 import DescriptionListColumn from './description_list_column';
 const descriptionListColumnSource = require('!!raw-loader!./description_list_column');
-const descriptionListColumnSnippet = [
-  `<EuiDescriptionList
+const descriptionListColumnSnippet = `<EuiDescriptionList
   type="column"
   listItems={favoriteVideoGames}
-/>`,
-  `<EuiDescriptionList
+/>`;
+
+import DescriptionListResponsiveColumn from './description_list_column_responsive';
+const descriptionListResponsiveColumnSource = require('!!raw-loader!./description_list_column_responsive');
+const descriptionListResponsiveColumnSnippet = `<EuiDescriptionList
   type="responsiveColumn"
   listItems={favoriteVideoGames}
-/>`,
-];
+/>`;
 
 import DescriptionListStyling from './description_list_styling';
 const descriptionListStylingSource = require('!!raw-loader!./description_list_styling');
@@ -93,10 +111,7 @@ export const DescriptionListExample = {
         <p>
           <strong>EuiDescriptionList</strong> is a component for listing pairs
           of information together. You can use the component on its own, passing
-          in an object for the list, or use the{' '}
-          <strong>EuiDescriptionListTitle</strong> and{' '}
-          <strong>EuiDescriptionListDescription</strong> components separately
-          to build a list manually.
+          in an object for the list.
         </p>
       ),
       props: {
@@ -106,6 +121,30 @@ export const DescriptionListExample = {
       },
       snippet: descriptionListSnippet,
       demo: <DescriptionList />,
+      playground: descriptionListConfig,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: descriptionListSeparateSource,
+        },
+      ],
+      text: (
+        <p>
+          You can also use the <strong>EuiDescriptionListTitle</strong> and{' '}
+          <strong>EuiDescriptionListDescription</strong> components separately
+          to build a list manually.
+        </p>
+      ),
+      props: {
+        EuiDescriptionList,
+        EuiDescriptionListTitle,
+        EuiDescriptionListDescription,
+      },
+      snippet: descriptionListSeparateSnippet,
+      demo: <DescriptionListSeparate />,
+      playground: descriptionListConfig,
     },
     {
       title: 'Reverse style',
@@ -148,14 +187,29 @@ export const DescriptionListExample = {
             <EuiCode>column</EuiCode> description lists can be presented in an
             inline, column format.
           </p>
+        </Fragment>
+      ),
+      snippet: descriptionListColumnSnippet,
+      demo: <DescriptionListColumn />,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: descriptionListResponsiveColumnSource,
+        },
+      ],
+      text: (
+        <Fragment>
           <p>
             To return to the typical row format on smaller screens set{' '}
-            <EuiCode>type</EuiCode> to <EuiCode>responsiveColumn</EuiCode>.
+            <EuiCode>type</EuiCode> to <EuiCode>responsiveColumn</EuiCode>. The
+            following list will only show the column format on larger screens.
           </p>
         </Fragment>
       ),
-      snippet: descriptionListColumnSnippet,
-      demo: <DescriptionListColumn />,
+      snippet: descriptionListResponsiveColumnSnippet,
+      demo: <DescriptionListResponsiveColumn />,
     },
     {
       title: 'Inline',

src-docs/src/views/description_list/description_list_separate.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  EuiDescriptionList,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiDescriptionList>
+    <EuiDescriptionListTitle>
+      The Elder Scrolls: Morrowind
+    </EuiDescriptionListTitle>
+    <EuiDescriptionListDescription>
+      The opening music alone evokes such strong memories.
+    </EuiDescriptionListDescription>
+    <EuiDescriptionListTitle>TIE Fighter</EuiDescriptionListTitle>
+    <EuiDescriptionListDescription>
+      The sequel to XWING, join the dark side and fly for the Emperor.
+    </EuiDescriptionListDescription>
+    <EuiDescriptionListTitle>Quake 2</EuiDescriptionListTitle>
+    <EuiDescriptionListDescription>
+      The game that made me drop out of college.
+    </EuiDescriptionListDescription>
+  </EuiDescriptionList>
+);

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

@@ -0,0 +1,46 @@
+import { EuiDescriptionList } from '../../../../src/components';
+import {
+  propUtilityForPlayground,
+  generateCustomProps,
+} from '../../services/playground';
+
+export const descriptionListConfig = () => {
+  const docgenInfo = Array.isArray(EuiDescriptionList.__docgenInfo)
+    ? EuiDescriptionList.__docgenInfo[0]
+    : EuiDescriptionList.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  const listItems = `[
+    {
+      title: 'The Elder Scrolls: Morrowind',
+      description: 'The opening music alone evokes such strong memories.',
+    },
+    {
+      title: 'TIE Fighter',
+      description:
+        'The sequel to XWING, join the dark side and fly for the Emporer.',
+    },
+  ]`;
+  propsToUse.listItems = {
+    ...propsToUse.listItems,
+    value: listItems,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiSuggest',
+      props: propsToUse,
+      scope: {
+        EuiSuggest: EuiDescriptionList,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiDescriptionList'],
+        },
+      },
+      customProps: {
+        ...generateCustomProps(['listItems']),
+      },
+    },
+  };
+};