Progress

client/coral-admin/src/containers/Configure/Configure.css

@@ -11,10 +11,6 @@
   width: calc(70% - 300px)
 }
 
-.settingOption {
-  cursor: pointer;
-}
-
 .configSetting {
   border: 1px solid #ccc;
   border-radius: 4px;

client/coral-admin/src/containers/Configure/Configure.js

@@ -6,13 +6,8 @@ import {
   saveSettingsToServer,
   updateWordlist,
 } from '../../actions/settings';
-import {
-  List,
-  ListItem,
-  ListItemContent,
-  Button,
-  Icon
-} from 'react-mdl';
+
+import {Button, Icon, List, Item} from 'coral-ui';
 import styles from './Configure.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
@@ -99,7 +94,8 @@ class Configure extends React.Component {
   }
 
   render () {
-    const section = this.getSection(this.state.activeSection);
+    const {activeSection} = this.state;
+    const section = this.getSection(activeSection);
 
     const showSave = Object.keys(this.state.errors).reduce(
       (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
@@ -107,22 +103,16 @@ class Configure extends React.Component {
     return (
         <div className={styles.container}>
           <div className={styles.leftColumn}>
-            <List>
-              <ListItem className={styles.settingOption}>
-                <ListItemContent
-                  onClick={this.changeSection('comments')}
-                  icon='settings'>{lang.t('configure.comment-settings')}</ListItemContent>
-              </ListItem>
-              <ListItem className={styles.settingOption}>
-                <ListItemContent
-                  onClick={this.changeSection('embed')}
-                  icon='code'>{lang.t('configure.embed-comment-stream')}</ListItemContent>
-              </ListItem>
-              <ListItem className={styles.settingOption}>
-                <ListItemContent
-                  onClick={this.changeSection('wordlist')}
-                  icon='settings'>{lang.t('configure.wordlist')}</ListItemContent>
-              </ListItem>
+            <List onChange={this.changeSection} activeItem={activeSection}>
+              <Item itemId='comments' icon="settings">
+                {lang.t('configure.comment-settings')}
+              </Item>
+              <Item itemId='embed' icon='code'>
+                {lang.t('configure.embed-comment-stream')}
+              </Item>
+              <Item itemId='wordlist' icon='settings'>
+                {lang.t('configure.wordlist')}
+              </Item>
             </List>
             {
               showSave ?

client/coral-admin/src/translations.json

@@ -46,13 +46,13 @@
       "include-comment-stream": "Include Comment Stream Description for Readers.",
       "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
       "include-text": "Include your text here.",
-      "comment-settings": "Comment Settings",
-      "embed-comment-stream": "Embed Comment Stream",
+      "comment-settings": "Settings",
+      "embed-comment-stream": "Embed Stream",
       "banned-word-header": "Write the banned words list",
       "suspect-word-header": "Write the suspect words list",
       "banned-word-text": "Comments which contain these words or phrases (not case-sensitive) will be automatically removed from the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
       "suspect-word-text": "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
-      "wordlist": "Banned & Suspect Words",
+      "wordlist": "Banned Words",
       "banned-words-title": "Banned words list",
       "suspect-words-title": "Suspect words list",
       "save-changes": "Save Changes",

client/coral-ui/components/Item.css

@@ -0,0 +1,23 @@
+.base {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  background: white;
+  width: 235px;
+  padding: 10px 14px;
+  font-size: 14px;
+  margin-bottom: 8px;
+  list-style: none;
+
+  &:hover {
+    cursor: pointer;
+   }
+
+  &.active {
+     background: red;
+   }
+
+  i {
+    margin-right: 13px;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+}

client/coral-ui/components/Item.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Item.css';
+import Icon from './Icon';
+
+export default ({children, itemId, active, onItemClick, className = '', icon}) => (
+  <li
+    className={`${styles.base} ${className} ${active ? styles.active : ''}`}
+    onClick={() => onItemClick(itemId)}
+  >
+    {icon && <Icon name={icon} />}
+    {children}
+  </li>
+);

client/coral-ui/components/List.css

@@ -0,0 +1,4 @@
+.base {
+  padding: 0;
+  margin: 0;
+}

client/coral-ui/components/List.js

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import styles from './List.css';
+
+export default class List extends Component {
+  constructor(props) {
+    super(props);
+    this.handleClickItem = this.handleClickItem.bind(this);
+  }
+
+  handleClickItem(itemId) {
+    if (this.props.onChange) {
+      this.props.onChange(itemId);
+    }
+  }
+
+  render() {
+    const {children, activeItem, itemId, className = ''} = this.props;
+    return (
+      <ul className={`${styles.base} ${className}`}>
+        {React.Children.toArray(children)
+          .filter(child => !child.props.restricted)
+          .map((child, i) =>
+            React.cloneElement(child, {
+              i,
+              itemId: child.props.itemId,
+              active: itemId === activeItem,
+              onItemClick: this.handleClickItem,
+            })
+          )}
+      </ul>
+    );
+  }
+}

client/coral-ui/components/TabBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './TabBar.css';
 
-export class TabBar extends React.Component {
+class TabBar extends React.Component {
   constructor(props) {
     super(props);
     this.handleClickTab = this.handleClickTab.bind(this);

client/coral-ui/index.js

@@ -10,3 +10,5 @@ export {default as Tooltip} from './components/Tooltip';
 export {default as PopupMenu} from './components/PopupMenu';
 export {default as Checkbox} from './components/Checkbox';
 export {default as Icon} from './components/Icon';
+export {default as List} from './components/List';
+export {default as Item} from './components/Item';