Merge 59e65fc into 8583611

src/components/List/List.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bem from 'bem';
+import styles from './List.scss';
+
+const { block } = bem({
+    name: 'List',
+    classnames: styles,
+    propsToMods: ['isDividedList', 'Component']
+});
+
+const List = props => {
+    const { children, Component, isDividedList, ...rest } = props;
+    return (
+        <Component {...rest} {...block(props)}>
+            {React.Children.map(children, child => React.cloneElement(child, { isDividedList }))}
+        </Component>
+    );
+};
+
+List.displayName = 'List';
+
+List.propTypes = {
+    /** List Items */
+    children: PropTypes.node,
+    /** The HTML or React component to be used to render the list  */
+    Component: PropTypes.string,
+    /** Adds dividing lines between the list items */
+    isDividedList: PropTypes.bool
+};
+
+List.defaultProps = {
+    children: null,
+    Component: 'ul',
+    isDividedList: false
+};
+
+export default List;

src/components/List/List.scss

@@ -0,0 +1,10 @@
+.List {
+    &--Component_ul {
+        padding: 0 var(--spacing-2x);
+        list-style: none;
+    }
+
+    &--Component_menu {
+        list-style: none;
+    }
+}

src/components/List/ListActions/ListActions.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bem from 'bem';
+import styles from './ListActions.scss';
+
+const { block } = bem({
+    name: 'ListActions',
+    classnames: styles
+});
+
+const ListActions = props => {
+    const { children, ...rest } = props;
+
+    return (
+        <div {...rest} {...block(props)}>
+            {children}
+        </div>
+    );
+};
+
+ListActions.displayName = 'ListActions';
+
+ListActions.propTypes = {
+    /** Actions to be pushed to the left side of a List Item */
+    children: PropTypes.node
+};
+
+ListActions.defaultProps = {
+    children: null
+};
+
+export default ListActions;

src/components/List/ListActions/ListActions.scss

@@ -0,0 +1,3 @@
+.ListActions {
+    margin-left: auto;
+}

src/components/List/ListActions/index.js

@@ -0,0 +1 @@
+export { default } from './ListActions';

src/components/List/ListItem/ListItem.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import bem from 'bem';
+import Text from '../../Text';
+import styles from './ListItem.scss';
+
+const { block, elem } = bem({
+    name: 'ListItem',
+    classnames: styles,
+    propsToMods: ['isDivided', 'isDividedList', 'isSelected', 'onClick']
+});
+
+const ListItem = props => {
+    const { children, isDivided, isDividedList, isSelected, onClick, ...rest } = props;
+    const customBlockMod = { clickable: typeof onClick === 'function' };
+
+    return (
+        <li {...rest} {...block(props, customBlockMod)}>
+            <div onClick={onClick} role="presentation" {...elem('container', props)}>
+                {React.Children.map(
+                    children,
+                    child => (typeof child === 'string' ? <Text>{child}</Text> : child)
+                )}
+            </div>
+        </li>
+    );
+};
+
+ListItem.displayName = 'ListItem';
+
+ListItem.propTypes = {
+    /** List Items */
+    children: PropTypes.node,
+    /** Formats this item as selected  */
+    isSelected: PropTypes.bool,
+    /** Adds a dividing line below the items. Do not use on divided lists */
+    isDivided: PropTypes.bool,
+    /** For internal use: adds a dividing line below all items but the last. isDivided set to true will overwrite this param */
+    isDividedList: PropTypes.bool,
+    /** A function to be called if the item is clicked */
+    onClick: PropTypes.func
+};
+
+ListItem.defaultProps = {
+    children: null,
+    isSelected: false,
+    isDivided: false,
+    isDividedList: false,
+    onClick: null
+};
+
+export default ListItem;

src/components/List/ListItem/ListItem.scss

@@ -0,0 +1,27 @@
+.ListItem {
+    &__container {
+        display: flex;
+        align-items: baseline;
+        padding: 0 var(--spacing-3x);
+    }
+
+    &:hover {
+        background-color: var(--color-brand-10);
+    }
+
+    &--isSelected {
+        background-color: var(--color-brand-10);
+    }
+
+    &--isDividedList:not(:last-child) {
+        border-bottom: 1px solid var(--color-neutral);
+    }
+
+    &--isDivided {
+        border-bottom: 1px solid var(--color-neutral);
+    }
+
+    &--clickable {
+        cursor: pointer;
+    }
+}

src/components/List/ListItem/index.js

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

src/components/List/index.js

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

src/index.js

@@ -9,6 +9,7 @@ export { default as Header } from './components/Header';
 export { default as Heading } from './components/Heading';
 export { default as Input } from './components/Input';
 export { default as Link } from './components/Link';
+export { List, ListItem, ListActions } from './components/List';
 export { default as LoadingSpinner } from './components/LoadingSpinner';
 export { NavBar, NavItem } from './components/Navigation';
 export { default as ProgressBar } from './components/ProgressBar';

stories/List.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, select, withKnobs } from '@storybook/addon-knobs';
+import { List, ListItem, ListActions, Text, Button, Checkbox } from '@textkernel/oneui';
+
+storiesOf('List', module)
+    .addDecorator(withKnobs)
+    .add('List', () => (
+        <List
+            Component={select('List component', ['ul', 'ol', 'menu'], 'ul')}
+            isDividedList={boolean('Add dividers between items', true)}
+        >
+            <ListItem>
+                First item passed as string{' '}
+                <ListActions>
+                    <Button context="link">Action</Button>
+                </ListActions>
+            </ListItem>
+            <ListItem isDivided={boolean('Add divider to single item', false)}>
+                <Checkbox id="item 2" />
+                <div>
+                    <Text>Item passed as Text component</Text>
+                    <Text>It has multiple lines</Text>
+                    <Text>And can have its own divider</Text>
+                </div>
+            </ListItem>
+            <ListItem isSelected={boolean('Selected item', true)}>
+                <Text>Selectable item</Text>
+            </ListItem>
+            <ListItem
+                onClick={e => {
+                    e.preventDefault();
+                    alert('Item was selected'); // eslint-disable-line no-alert, no-undef
+                }}
+                isDivided={boolean('Add divider to last item', false)}
+            >
+                <Checkbox id="item 4" />
+                <Text>Clickable item. Can also have its own divider</Text>
+            </ListItem>
+        </List>
+    ));

stories/index.js

@@ -9,6 +9,7 @@ import './Heading';
 import './Icon';
 import './Input';
 import './Link';
+import './List';
 import './LoadingSpinner';
 import './Navigation';
 import './ProgressBar';