Add chip component

components/chip/Chip.jsx

@@ -0,0 +1,41 @@
+import React, {PropTypes} from 'react';
+import FontIcon from '../font_icon';
+import style from './style';
+import ClassNames from 'classnames';
+
+const Chip = ({className, deletable, avatar, label, ...other}) => {
+  const classes = ClassNames(style.chip, {
+      [style.deletable]: !!deletable,
+      [style.contactChip]: !!avatar
+  }, className);
+
+  return (
+    <div data-react-toolbox='chip' className={classes} {...other}>
+      {avatar ? avatar : null}
+      <span className={style.label}>{label}</span>
+      {
+        deletable ? (
+          <span className={style.delete}>
+            <FontIcon value="close" />
+          </span>
+        ) : null
+      }
+    </div>
+  );
+};
+
+Chip.propTypes = {
+  avatar: PropTypes.element,
+  className: PropTypes.string,
+  deletable: PropTypes.bool,
+  label: PropTypes.string
+};
+
+Chip.defaultProps = {
+  avatar: null,
+  className: '',
+  deletable: false,
+  label: ''
+};
+
+export default Chip;

components/chip/_config.scss

@@ -0,0 +1,20 @@
+$chip-height: 3.2 * $unit !default;
+$chip-padding: 1.2 * $unit !default;
+$chip-margin-right: 0.25 * $unit !default;
+$chip-font-size: 2.4 * $unit !default;
+$chip-background: $palette-grey-200 !default;
+$chip-background-hover: $palette-grey-300 !default;
+
+$chip-icon-font-size: 2.0 * $unit !default;
+$chip-icon-margin-right: 0.8 * $unit !default;
+
+$chip-label-color: $color-text-secondary !default;
+$chip-label-font-size: $font-size-small !default;
+
+$chip-remove-size: 2.4 * $unit !default;
+$chip-remove-margin: 0.4 * $unit !default;
+$chip-remove-line-height: 3.0 * $unit !default;
+$chip-remove-font-size: 1.6 * $unit !default;
+$chip-remove-background: $palette-grey-400 !default;
+$chip-remove-background-hover: $palette-grey-500 !default;
+$chip-remove-color: $color-white !default;

components/chip/index.js

@@ -0,0 +1,3 @@
+import Chip from './Chip';
+export { Chip };
+export default Chip;

components/chip/readme.md

@@ -0,0 +1,37 @@
+# Chip
+
+Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
+
+<!-- example -->
+```jsx
+import Chip from 'react-toolbox/lib/chip';
+
+const ChipTest = () => (
+  <div>
+        <Chip label="Example Chip" />
+        <Chip label="Deletable Chip" deletable />
+        <Chip
+          label="Avatar Chip"
+          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
+        />
+        <Chip
+          label="Initial chip"
+          avatar={<Avatar title="A" />}
+          deletable
+        />
+        <Chip
+          label="Image contact chip"
+          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
+        />
+  </div>
+);
+```
+
+## Properties
+
+| Name          | Type        | Default         | Description|
+|:--------------|:------------|:----------------|:-----------|
+| `avatar`      | `element`   |                 | An `Avatar` component to use in a contact chip. |
+| `className`   | `String`    | `''`            | Additional class name to provide custom styling.|
+| `deletable`   | `Boolean`   | `false`         | If true, the chip will be rendered with a delete icon.|
+| `label`       | `String`    | `''`            | label for the chip. |

components/chip/style.scss

@@ -0,0 +1,65 @@
+@import "../base";
+@import "../mixins";
+@import "./config";
+
+.chip {
+  display: inline-block;
+  background-color: $chip-background;
+  border-radius: $chip-height;
+  line-height: $chip-height;
+  padding: 0 $chip-padding;
+  margin-right: $chip-margin-right;
+}
+
+.contactChip {
+  padding-left: 0;
+
+  > [data-react-toolbox="avatar"] {
+    width: $chip-height;
+    height: $chip-height;
+    vertical-align: middle;
+    margin-right: $chip-icon-margin-right;
+
+    > span {
+      line-height: $chip-height;
+      font-size: $chip-icon-font-size;
+    }
+  }
+}
+
+.label {
+  color: $chip-label-color;
+  font-size: $chip-label-font-size;
+}
+
+.deletable {
+  padding-right: 0;
+  cursor: pointer;
+  &:hover {
+    background: $chip-background-hover;
+  }
+  &:active {
+    @include shadow-2dp();
+  }
+}
+
+.delete {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 $chip-remove-margin;
+  line-height: $chip-remove-line-height;
+  text-align: center;
+  width: $chip-remove-size;
+  height: $chip-remove-size;
+  border-radius: $chip-remove-size;
+  background: $chip-remove-background;
+  color: $chip-remove-color;
+
+  > [data-react-toolbox="font-icon"] {
+    font-size: $chip-remove-font-size;
+  }
+
+  &:hover {
+    background: $chip-remove-background-hover;
+  }
+}

spec/components/chip.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Avatar from '../../components/avatar';
+import Chip from '../../components/chip';
+
+class ChipTest extends React.Component {
+  render () {
+    return (
+      <section>
+        <h5>Chips</h5>
+        <p>Chips can be deletable and have an avatar.</p>
+
+        <Chip label="Example Chip" />
+        <Chip label="Deletable Chip" deletable />
+        <Chip
+          label="Avatar Chip"
+          avatar={<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />}
+        />
+        <Chip
+          label="Initial chip"
+          avatar={<Avatar title="A" />}
+          deletable
+        />
+        <Chip
+          label="Image contact chip"
+          avatar={<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>}
+        />
+      </section>
+    );
+  }
+}
+
+export default ChipTest;

spec/root.jsx

@@ -8,6 +8,7 @@ import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Dialog from './components/dialog';
 import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
@@ -48,6 +49,7 @@ const Root = () => (
     <Button />
     <Card />
     <Checkbox />
+    <Chip />
     <Dialog />
     <Drawer />
     <Dropdown />