Converted EuiFlex* docs to typescript

src-docs/src/views/flex/component_span.js → src-docs/src/views/flex/component_span.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <button onClick={() => { window.alert('click'); }}>

src-docs/src/views/flex/direction.js → src-docs/src/views/flex/direction.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup direction="column">

src-docs/src/views/flex/flex_grid.js → src-docs/src/views/flex/flex_grid.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
 
 const ITEM_STYLE = { width: '300px' };
 

src-docs/src/views/flex/flex_grid_columns.js → src-docs/src/views/flex/flex_grid_columns.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGrid,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_group.js → src-docs/src/views/flex/flex_group.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <EuiFlexGroup>

src-docs/src/views/flex/flex_group_wrap.js → src-docs/src/views/flex/flex_group_wrap.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup wrap>

src-docs/src/views/flex/flex_grow_numeric.js → src-docs/src/views/flex/flex_grow_numeric.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_grow_zero.js → src-docs/src/views/flex/flex_grow_zero.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_gutter.js → src-docs/src/views/flex/flex_gutter.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_items.js → src-docs/src/views/flex/flex_items.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
 
 export default () => (
   <EuiFlexGroup>

src-docs/src/views/flex/flex_nest.js → src-docs/src/views/flex/flex_nest.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlexGrid,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>

src-docs/src/views/flex/flex_responsive.js → src-docs/src/views/flex/flex_responsive.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiIcon } from '../../../../src/components/icon';
 
 export default () => (
   <div>

src/components/description_list/__snapshots__/description_list.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDescriptionList is rendered 1`] = `
+<dl
+  aria-label="aria-label"
+  class="euiDescriptionList euiDescriptionList--row testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Content
+</dl>
+`;
+
+exports[`EuiDescriptionList props align center is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row euiDescriptionList--center"
+/>
+`;
+
+exports[`EuiDescriptionList props align left is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row"
+/>
+`;
+
+exports[`EuiDescriptionList props compressed is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed"
+/>
+`;
+
+exports[`EuiDescriptionList props listItems is rendered as strings and elements 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row"
+>
+  <dt
+    class="euiDescriptionList__title"
+  >
+    Title 1
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    Description 1
+  </dd>
+  <dt
+    class="euiDescriptionList__title"
+  >
+    <em>
+      Title 2
+    </em>
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    <code>
+      Description 2
+    </code>
+  </dd>
+  <dt
+    class="euiDescriptionList__title"
+  >
+    Title 3
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    Description 3
+  </dd>
+</dl>
+`;
+
+exports[`EuiDescriptionList props type column is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--column"
+/>
+`;
+
+exports[`EuiDescriptionList props type inline is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--inline"
+/>
+`;
+
+exports[`EuiDescriptionList props type row is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row"
+/>
+`;

src/components/description_list/__snapshots__/description_list_description.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDescriptionListDescription is rendered 1`] = `
+<dd
+  aria-label="aria-label"
+  class="euiDescriptionList__description testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Content
+</dd>
+`;

src/components/description_list/__snapshots__/description_list_title.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDescriptionListTitle is rendered 1`] = `
+<dt
+  aria-label="aria-label"
+  class="euiDescriptionList__title testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Content
+</dt>
+`;

src/components/flex/flex_item.tsx

@@ -35,6 +35,8 @@ export const EuiFlexItem: SFC<
   component: Component = 'div',
   ...rest
 }) => {
+  validateGrowValue(grow);
+
   const classes = classNames(
     'euiFlexItem',
     {
@@ -54,6 +56,20 @@ export const EuiFlexItem: SFC<
   );
 };
 
+function validateGrowValue(value: EuiFlexItemProps['grow']) {
+  const validValues = [
+    null, undefined,
+    true, false,
+    ...GROW_SIZES,
+  ];
+
+  if (validValues.indexOf(value) === -1) {
+    throw new Error(
+      `Prop \`grow\` passed to \`EuiFlexItem\` must be a boolean or an integer between 1 and 10, received \`${value}\``
+    );
+  }
+}
+
 EuiFlexItem.defaultProps = {
   grow: true,
   component: 'div',