feat(pf4-list): introduce the pf4 simple list (patternfly#672)

affects: patternfly4-react-lerna-root, @patternfly/react-core

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

@@ -0,0 +1,16 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { OneOf } from '../../typeUtils';
+
+export const ListVariant: {
+  grid: 'grid';
+  inline: 'inline';
+};
+
+export interface ListProps extends HTMLProps<HTMLUListElement> {
+  children?: ReactNode;
+  variant?: OneOf<typeof ListVariant, keyof typeof ListVariant>;
+}
+
+declare const List: SFC<ListProps>;
+
+export default List;

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

@@ -0,0 +1,13 @@
+import { List, ListItem } from '@patternfly/react-core';
+import Simple from './examples/SimpleList';
+import Inline from './examples/InlineList';
+import Grid from './examples/GridList';
+
+export default {
+  title: 'List',
+  components: {
+    List,
+    ListItem
+  },
+  examples: [Simple, Inline, Grid]
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/List/styles.css';
+import { css, getModifier } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+export const ListVariant = {
+  grid: 'grid',
+  inline: 'inline'
+};
+
+const propTypes = {
+  /** Anything that can be rendered inside of the list */
+  children: PropTypes.node,
+  /** Additional classes added to the list. */
+  className: PropTypes.string,
+  /** Adds list variant styles */
+  variant: PropTypes.oneOf(Object.values(ListVariant))
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  variant: null
+};
+
+const List = ({ className, children, variant, ...props }) => (
+  <ul {...props} className={css(styles.list, getModifier(styles.modifiers, variant), className)}>
+    {children}
+  </ul>
+);
+
+List.propTypes = propTypes;
+List.defaultProps = defaultProps;
+
+export default List;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import List from './List';
+import ListItem from './ListItem';
+
+const ListItems = () => (
+  <React.Fragment>
+    <List>
+      <ListItem>First</ListItem>
+      <ListItem>Second</ListItem>
+      <ListItem>Third</ListItem>
+    </List>
+  </React.Fragment>
+);
+
+describe('list', () => {
+  test('simple list', () => {
+    const view = mount(
+      <List>
+        <ListItems />
+      </List>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('inline list', () => {
+    const view = mount(
+      <List variant="inline">
+        <ListItems />
+      </List>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('grid list', () => {
+    const view = mount(
+      <List variant="grid">
+        <ListItems />
+      </List>
+    );
+    expect(view).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface ListItemProps extends HTMLProps<HTMLLIElement> {
+  children?: ReactNode;
+}
+
+declare const ListItem: SFC<ListItemProps>;
+
+export default ListItem;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Anything that can be rendered inside of list item */
+  children: PropTypes.node
+};
+
+const defaultProps = {
+  children: null
+};
+
+const ListItem = ({ children, ...props }) => <li {...props}>{children}</li>;
+
+ListItem.propTypes = propTypes;
+ListItem.defaultProps = defaultProps;
+
+export default ListItem;

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

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`list grid list 1`] = `
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+.pf-c-list.pf-m-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
+  grid-gap: 1rem;
+}
+
+<List
+  className=""
+  variant="grid"
+>
+  <ul
+    className="pf-c-list pf-m-grid"
+  >
+    <ListItems>
+      <List
+        className=""
+        variant={null}
+      >
+        <ul
+          className="pf-c-list"
+        >
+          <ListItem>
+            <li>
+              First
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Second
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Third
+            </li>
+          </ListItem>
+        </ul>
+      </List>
+    </ListItems>
+  </ul>
+</List>
+`;
+
+exports[`list inline list 1`] = `
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+.pf-c-list.pf-m-inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+<List
+  className=""
+  variant="inline"
+>
+  <ul
+    className="pf-c-list pf-m-inline"
+  >
+    <ListItems>
+      <List
+        className=""
+        variant={null}
+      >
+        <ul
+          className="pf-c-list"
+        >
+          <ListItem>
+            <li>
+              First
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Second
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Third
+            </li>
+          </ListItem>
+        </ul>
+      </List>
+    </ListItems>
+  </ul>
+</List>
+`;
+
+exports[`list simple list 1`] = `
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+.pf-c-list {
+  display: block;
+  padding-left: 1.5rem;
+  margin: 1rem 0px 1rem 1.5rem;
+  list-style: undefined;
+}
+
+<List
+  className=""
+  variant={null}
+>
+  <ul
+    className="pf-c-list"
+  >
+    <ListItems>
+      <List
+        className=""
+        variant={null}
+      >
+        <ul
+          className="pf-c-list"
+        >
+          <ListItem>
+            <li>
+              First
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Second
+            </li>
+          </ListItem>
+          <ListItem>
+            <li>
+              Third
+            </li>
+          </ListItem>
+        </ul>
+      </List>
+    </ListItems>
+  </ul>
+</List>
+`;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+class GridList extends React.Component {
+  static title = 'Grid List';
+
+  render() {
+    return (
+      <List variant="grid">
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+        <ListItem>Fourth</ListItem>
+        <ListItem>Fifth</ListItem>
+        <ListItem>Sixth</ListItem>
+      </List>
+    );
+  }
+}
+
+export default GridList;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+class InlineList extends React.Component {
+  static title = 'Inline List';
+
+  render() {
+    return (
+      <List variant="inline">
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+      </List>
+    );
+  }
+}
+
+export default InlineList;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+class SimpleList extends React.Component {
+  static title = 'Simple List';
+
+  render() {
+    return (
+      <List>
+        <ListItem>First</ListItem>
+        <ListItem>Second</ListItem>
+        <ListItem>Third</ListItem>
+      </List>
+    );
+  }
+}
+
+export default SimpleList;

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

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

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

@@ -9,3 +9,4 @@ export * from './Title';
 export * from './Alert';
 export * from './Dropdown';
 export * from './Select';
+export * from './List';

packages/patternfly-4/react-core/src/components/index.js

@@ -12,3 +12,4 @@ export * from './Dropdown';
 export * from './Select';
 export * from './Avatar';
 export * from './Brand';
+export * from './List';