feat(List): Convert list to TypeScript

packages/patternfly-4/react-core/src/components/List/List.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import List from './List';
-import ListItem from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
 
 const ListItems = () => (
   <React.Fragment>

packages/patternfly-4/react-core/src/components/List/List.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styles from '@patternfly/patternfly/components/List/list.css';
+import { css, getModifier } from '@patternfly/react-styles';
+
+export enum ListVariant {
+  grid = 'grid',
+  inline = 'inline'
+}
+
+export interface ListProps extends React.HTMLProps<HTMLUListElement> {
+  /** Anything that can be rendered inside of the list */
+  children?: React.ReactNode;
+  /** Additional classes added to the list. */
+  className?: string;
+  /** Adds list variant styles */
+  variant?: ListVariant;
+}
+
+export const List: React.FunctionComponent<ListProps> = ({
+  className = '',
+  children = null,
+  variant = null,
+  ...props
+}) => (
+  <ul {...props} className={css(styles.list, variant && getModifier(styles.modifiers, variant), className)}>
+    {children}
+  </ul>
+);

packages/patternfly-4/react-core/src/components/List/ListItem.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
+  /** Anything that can be rendered inside of list item */
+  children: React.ReactNode;
+  /** Additional props are spread to the container <li> */
+}
+
+export const ListItem: React.FunctionComponent<ListItemProps> = ({ children = null, ...props }) => <li {...props}>{children}</li>;

packages/patternfly-4/react-core/src/components/List/__snapshots__/List.test.js.snap

@@ -1,115 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`list grid list 1`] = `
-<List
-  className=""
+<Component
   variant="grid"
 >
   <ul
     className="pf-c-list"
   >
     <ListItems>
-      <List
-        className=""
-        variant={null}
-      >
+      <Component>
         <ul
           className="pf-c-list"
         >
-          <ListItem>
+          <Component>
             <li>
               First
             </li>
-          </ListItem>
-          <ListItem>
+          </Component>
+          <Component>
             <li>
               Second
             </li>
-          </ListItem>
-          <ListItem>
+          </Component>
+          <Component>
             <li>
               Third
             </li>
-          </ListItem>
+          </Component>
         </ul>
-      </List>
+      </Component>
     </ListItems>
   </ul>
-</List>
+</Component>
 `;
 
 exports[`list inline list 1`] = `
-<List
-  className=""
+<Component
   variant="inline"
 >
   <ul
     className="pf-c-list pf-m-inline"
   >
     <ListItems>
-      <List
-        className=""
-        variant={null}
-      >
+      <Component>
         <ul
           className="pf-c-list"
         >
-          <ListItem>
+          <Component>
             <li>
               First
             </li>
-          </ListItem>
-          <ListItem>
+          </Component>
+          <Component>
             <li>
               Second
             </li>
-          </ListItem>
-          <ListItem>
+          </Component>
+          <Component>
             <li>
               Third
             </li>
-          </ListItem>
+          </Component>
         </ul>
-      </List>
+      </Component>
     </ListItems>
   </ul>
-</List>
+</Component>
 `;
 
 exports[`list simple list 1`] = `
-<List
-  className=""
-  variant={null}
->
+<Component>
   <ul
     className="pf-c-list"
   >
     <ListItems>
-      <List
-        className=""
-        variant={null}
-      >
+      <Component>
         <ul
           className="pf-c-list"
         >
-          <ListItem>
+          <Component>
             <li>
               First
             </li>
-          </ListItem>
-          <ListItem>
+          </Component>
+          <Component>
             <li>
               Second
             </li>
-          </ListItem>
-          <ListItem>
+          </Component>
+          <Component>
             <li>
               Third
             </li>
-          </ListItem>
+          </Component>
         </ul>
-      </List>
+      </Component>
     </ListItems>
   </ul>
-</List>
+</Component>
 `;

packages/patternfly-4/react-core/src/components/List/index.ts

@@ -0,0 +1,2 @@
+export { List } from './List';
+export { ListItem } from './ListItem';