feat(chips): Add new component (#117)

Add basic working component for Chips, including Chip and ChipSet. Does not include any variants.

package.json

@@ -45,6 +45,7 @@
     "@google-cloud/storage": "^1.6.0",
     "@material/button": "^0.36.0",
     "@material/card": "^0.36.0",
+    "@material/chips": "^0.36.0",
     "@material/fab": "^0.36.0",
     "@material/floating-label": "^0.36.0",
     "@material/line-ripple": "^0.35.0",

packages/chips/README.md

@@ -0,0 +1,46 @@
+# React Chips
+
+A React version of an [MDC Chips](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips).
+
+## Installation
+
+```
+npm install --save @material/react-chips
+```
+
+## Usage
+
+```js
+import React, {Component} from 'react';
+import ChipSet from '@material/react-chips';
+
+class MyApp extends Component {
+  render() {
+    return (
+      <ChipSet labels={['Chip One', 'Chip Two']} />
+    );
+  }
+}
+```
+
+## Props
+
+### Chip Set
+
+Prop Name | Type | Description
+--- | --- | ---
+className | String | Classes to be applied to the chip set element.
+labels | Array | An array of strings. Each string has a corresponding chip whose label will be set to the value of that string.
+
+### Chip
+
+Prop Name | Type | Description
+--- | --- | ---
+className | String | Classes to be applied to the chip element.
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the Components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-chips/README.md#sass-mixins)

packages/chips/chip-set/index.js

@@ -0,0 +1,51 @@
+import React, {Component} from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import {MDCChipSetFoundation} from '@material/chips';
+
+import Chip from '../chip';
+
+export default class ChipSet extends Component {
+  foundation_ = null;
+
+  componentDidMount() {
+    this.foundation_ = new MDCChipSetFoundation(this.adapter);
+    this.foundation_.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation_.destroy();
+  }
+
+  get classes() {
+    const {className} = this.props;
+    return classnames('mdc-chip-set', className);
+  }
+
+  get adapter() {
+    return {
+      hasClass: (className) => this.classes.split(' ').includes(className),
+    };
+  }
+
+  renderChip(label, index) {
+    return (
+      <Chip key={index}>
+        {label}
+      </Chip>
+    );
+  }
+
+  render() {
+    return (
+      <div className={this.classes}>
+        {this.props.labels.map(this.renderChip)}
+      </div>
+    );
+  }
+}
+
+ChipSet.propTypes = {
+  className: PropTypes.string,
+  labels: PropTypes.array.isRequired,
+};

packages/chips/chip/index.js

@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import withRipple from '@material/react-ripple';
+import {MDCChipFoundation} from '@material/chips';
+
+export class Chip extends Component {
+  foundation_ = null;
+  state = {
+    classList: new Set(),
+  };
+
+  componentDidMount() {
+    this.foundation_ = new MDCChipFoundation(this.adapter);
+    this.foundation_.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation_.destroy();
+  }
+
+  get classes() {
+    const {classList} = this.state;
+    const {className} = this.props;
+    return classnames('mdc-chip', Array.from(classList), className);
+  }
+
+  get adapter() {
+    return {
+      addClass: (className) =>
+        this.setState({classList: this.state.classList.add(className)}),
+      removeClass: (className) => {
+        const {classList} = this.state;
+        classList.delete(className);
+        this.setState({classList});
+      },
+    };
+  }
+
+  render() {
+    const {
+      className, // eslint-disable-line no-unused-vars
+      children,
+      initRipple,
+      unbounded, // eslint-disable-line no-unused-vars
+      ...otherProps
+    } = this.props;
+
+    return (
+      <div
+        className={this.classes}
+        ref={initRipple}
+        {...otherProps}
+      >
+        <div className='mdc-chip__text'>{children}</div>
+      </div>
+    );
+  }
+}
+
+Chip.propTypes = {
+  className: PropTypes.string,
+  initRipple: PropTypes.func,
+  unbounded: PropTypes.bool,
+  children: PropTypes.string,
+};
+
+export default withRipple(Chip);

packages/chips/index.js

@@ -0,0 +1,5 @@
+import Chip from './chip';
+import ChipSet from './chip-set';
+
+export {Chip};
+export default ChipSet;

packages/chips/index.scss

@@ -0,0 +1,2 @@
+@import "@material/chips/chip/mdc-chip";
+@import "@material/chips/chip-set/mdc-chip-set";

packages/chips/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@material/react-chips",
+  "version": "0.0.0",
+  "description": "Material Components React Chips",
+  "license": "Apache-2.0",
+  "keywords": [
+    "mdc web react",
+    "material components react",
+    "material design",
+    "material chip",
+    "materialchip",
+    "material chips",
+    "materialchips"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-react.git"
+  },
+  "dependencies": {
+    "@material/chips": "^0.36.0",
+    "@material/react-ripple": "^0.2.0",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/webpack.config.js

@@ -74,6 +74,7 @@ function getMaterialExternals() {
     'base',
     'button',
     'card',
+    'chips',
     'fab',
     'floating-label',
     'line-ripple',

test/screenshot/chips/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="index.css">
+    <style>
+      body {
+        font-family: 'Roboto', Arial, sans-serif;
+      }
+    </style>
+    <script src="index.js" async></script>
+  </head>
+  <body>
+    <div id="app">
+    </div>
+  </body>
+</html>

test/screenshot/chips/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.scss';
+
+import ChipSet from '../../../packages/chips';
+
+class TestChipSet extends React.Component {
+  render() {
+    const {
+      className, labels, // eslint-disable-line react/prop-types
+    } = this.props;
+
+    return <ChipSet
+      className={className}
+      labels={labels}
+    />;
+  }
+}
+
+ReactDOM.render((
+  <div>
+    <TestChipSet
+      labels={['Jane Smith', 'John Doe']}
+    />
+    <TestChipSet
+      className='demo-custom-color'
+      labels={['Custom color', 'Custom color']}
+    />
+  </div>
+), document.getElementById('app'));

test/screenshot/chips/index.scss

@@ -0,0 +1,7 @@
+@import "../../../packages/chips/index.scss";
+
+.demo-custom-color .mdc-chip {
+  @include mdc-chip-ink-color(primary);
+  @include mdc-chip-fill-color(white);
+  @include mdc-chip-outline(2px, solid, primary);
+}

test/screenshot/chips/screenshot-suite.js

@@ -0,0 +1,10 @@
+import ScreenshotSuite from '../screenshot-suite';
+import Screenshot from '../screenshot';
+
+const screenshots = [
+  new Screenshot('chips/index.html'),
+];
+
+const screenshotSuite = new ScreenshotSuite('Chips', screenshots);
+
+export default screenshotSuite;

test/screenshot/chips/webpack.config.js

@@ -0,0 +1,5 @@
+const {bundle} = require('../webpack-bundles');
+
+module.exports = [
+  bundle('chips/index.js', 'chips/index'),
+];

test/screenshot/full-suite.js

@@ -1,6 +1,7 @@
 export default [
   require('./button/screenshot-suite').default,
   require('./card/screenshot-suite').default,
+  require('./chips/screenshot-suite').default,
   require('./line-ripple/screenshot-suite').default,
   require('./fab/screenshot-suite').default,
   require('./floating-label/screenshot-suite').default,

test/screenshot/golden.json

@@ -16,5 +16,6 @@
   "text-field/icon/index.html": "8a1d1969d6e7df5ea9def6ad1eb1734d5d3486c6bdda6c7721c494d8c46d37c3",
   "text-field/helper-text/index.html": "c246d6f593fe01901d26973d7c7384232892cc44aada19e82c8709b82f1a20e1",
   "text-field/index.html": "b8cc0a1fb0044d68269d8caa055ead35ae2de2a7d568fe65ea2e164ce67c72a0",
-  "top-app-bar/fixed.html": "90534d59d40f8c050aae022e94b0afa022a00d1e00c19e3f92dcc1908efcd831"
-}
+  "top-app-bar/fixed.html": "90534d59d40f8c050aae022e94b0afa022a00d1e00c19e3f92dcc1908efcd831",
+  "chips/index.html": "82413209815ca349ea4c592d13b48ecb388f08d1ae940a6c8d97a9fd3aecafff"
+}

test/screenshot/index.html

@@ -2,6 +2,7 @@
 <html>
   <a href="button">Button</a>
   <a href='card'>Card</a>
+  <a href="chips">Chips</a>
   <a href="fab">Fab</a>
   <a href="floating-label">Floating Label</a>
   <a href="line-ripple">Line Ripple</a>

test/screenshot/webpack.config.js

@@ -1,6 +1,7 @@
 module.exports = [
   ...require('./button/webpack.config.js'),
   ...require('./card/webpack.config.js'),
+  ...require('./chips/webpack.config.js'),
   ...require('./fab/webpack.config.js'),
   ...require('./floating-label/webpack.config.js'),
   ...require('./line-ripple/webpack.config.js'),