feat(Chip): Implemented with Foundation adapter, upgraded to current …

…spec.

package.json

@@ -29,8 +29,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "material-components-web": "^0.31.0",
-    "update": "^0.7.4"
+    "material-components-web": "0.32.0"
   },
   "scripts": {
     "start": "react-app-rewired start",

src/Base/MDCFoundation.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react';
-import classNames from 'classnames';
 
 /************************************************************************
  * Utils
@@ -77,7 +76,7 @@ export const deregisterInteractionHandler = (refName: string = 'root_') =>
  ***********************************************************************/
 type FoundationT = {
   constructor: Function,
-  adapter: {
+  adapter?: {
     [functionName: string]: Function
   },
   refs?: string[]

src/Base/index.js

@@ -11,6 +11,4 @@ export type { WithThemePropsT } from './withTheme';
 export { withMDC } from './withMDC';
 export { withMDCToggle } from './withMDCToggle';
 
-export { withMDCFoundation } from './withMDCFoundation';
-
 export { noop } from './noop';

src/Chip/chip.md

@@ -5,11 +5,13 @@
 import from **rmwc/Chip**  
 [https://material.io/components/web/catalog/chips/](https://material.io/components/web/catalog/chips/)
 
+Please note that in MDC, the ChipSet code contains logic for selecting single and multiple chips (filter and choice chip sets). This doesn't fit well with React's uni-directional data flow. Instead it is recommended to write your own filtering and selection logic and just apply the `selected` prop to the `Chip` component directly.
+
 ```jsx render
 import { Chip, ChipText, ChipIcon, ChipSet } from 'rmwc/Chip';
 
 <ChipSet>
-  <Chip><ChipText>Cookies</ChipText></Chip>
+  <Chip selected><ChipText>Cookies</ChipText></Chip>
   <Chip><ChipText>Pizza</ChipText></Chip>
   <Chip><ChipText>Icecream</ChipText></Chip>
 </ChipSet>

src/Chip/chip.spec.js

@@ -13,6 +13,22 @@ describe('Chip', () => {
       </ChipSet>
     );
   });
+
+  it('handles onInteraction', () => {
+    let value = 0;
+    const el = mount(<Chip onInteraction={() => value++} />);
+    const inst = el.instance();
+    inst.foundation_.adapter_.notifyInteraction();
+    expect(value).toEqual(1);
+  });
+
+  it('handles onTrailingIconInteraction', () => {
+    let value = 0;
+    const el = mount(<Chip onTrailingIconInteraction={() => value++} />);
+    const inst = el.instance();
+    inst.foundation_.adapter_.notifyTrailingIconInteraction();
+    expect(value).toEqual(1);
+  });
 });
 
 describe('ChipIcon', () => {

src/Chip/chip.story.js

@@ -17,12 +17,25 @@ storiesOf('Chips', module)
       </Chip>
     </ChipSet>
   ))
+  .add('Chip selected', () => (
+    <ChipSet>
+      <Chip selected>
+        <ChipText>Cookies</ChipText>
+      </Chip>
+      <Chip>
+        <ChipText>Pizza</ChipText>
+      </Chip>
+      <Chip>
+        <ChipText>Icecream</ChipText>
+      </Chip>
+    </ChipSet>
+  ))
   .add('Chip with icons', () => (
     <ChipSet>
       <Chip>
         <ChipIcon use="star_border" leading />
         <ChipText>Cookies</ChipText>
-        <ChipIcon use="close" trailing />
+        <ChipIcon tabIndex={0} use="close" trailing />
       </Chip>
       <Chip>
         <ChipIcon use="favorite_border" leading />

src/Chip/index.js

@@ -1,32 +1,70 @@
 // @flow
 
 import * as React from 'react';
+import classNames from 'classnames';
 import { Icon } from '../Icon';
-import { simpleTag } from '../Base';
+import { simpleTag, withRipple } from '../Base';
+import { withFoundation, addClass, removeClass } from '../Base/MDCFoundation';
+
+import { MDCChip } from '@material/chips/dist/mdc.chips';
 
 /** A chip component. */
-export const Chip = simpleTag({
-  displayName: 'Chip',
-  classNames: 'mdc-chip'
-});
+export const ChipRoot = withRipple()(
+  simpleTag({
+    displayName: 'ChipRoot',
+    classNames: props => [
+      'mdc-chip',
+      {
+        'mdc-chip--selected': props.selected
+      }
+    ],
+    consumeProps: ['selected']
+  })
+);
+
+type ChipPropsT = {
+  /** A custom event you can use from MCW. You can also just use onClick instead. */
+  onInteraction?: (evt: Event) => mixed,
+  /** A custom event for the trailing icon that you can use from MCW. You can also just use onClick instead. */
+  onTrailingIconInteraction?: (evt: Event) => mixed,
+  /** makes the Chip appear selected. */
+  selected?: boolean
+};
+
+export class Chip extends withFoundation({
+  constructor: MDCChip,
+  adapter: {
+    addClass: addClass(),
+    removeClass: removeClass()
+  }
+})<ChipPropsT> {
+  static displayName = 'Chip';
+
+  render() {
+    const { onInteraction, onTrailingIconInteraction, ...rest } = this.props;
+    const { root_ } = this.foundationRefs;
+    return (
+      <ChipRoot
+        tabIndex={0}
+        {...rest}
+        elementRef={root_}
+        className={classNames(this.props.className, [...this.state.classes])}
+      />
+    );
+  }
+}
 
 /** Text for a chip. */
 export const ChipText = simpleTag({
   displayName: 'ChipText',
   classNames: 'mdc-chip__text'
 });
 
-type ChipIconPropsT = {
-  /** Make it a leading icon */
-  leading: boolean,
-  /** Make it a trailing icon */
-  trailing: boolean
-};
-
 /** Icons inside of a chip. This is an instance of the Icon component. To make the icons interactive, add props tabIndex="0" and role="button". */
-export class ChipIcon extends simpleTag({
-  displayName: 'ChipIcon',
+export const ChipIconRoot = simpleTag({
+  displayName: 'ChipIconRoot',
   tag: Icon,
+  defaultProps: {},
   classNames: props => {
     return [
       'mdc-chip__icon',
@@ -37,14 +75,37 @@ export class ChipIcon extends simpleTag({
     ];
   },
   consumeProps: ['trailing', 'leading']
-})<ChipIconPropsT> {
-  render() {
-    return super.render();
-  }
-}
+});
+
+type ChipIconPropsT = {
+  /** Make it a leading icon */
+  leading: boolean,
+  /** Make it a trailing icon */
+  trailing: boolean
+};
+export const ChipIcon = (props: ChipIconPropsT) => {
+  const hasInteractionHandler = Object.keys(props).some(p =>
+    p.startsWith('on')
+  );
+  const trailingProps =
+    props.trailing || hasInteractionHandler ?
+      { role: 'button', tabIndex: 0 } :
+      {};
+
+  return <ChipIconRoot {...trailingProps} {...props} />;
+};
+
+ChipIcon.displayName = 'ChipIcon';
 
 /** A container for multiple Chip components. */
 export const ChipSet = simpleTag({
   displayName: 'ChipSet',
-  classNames: 'mdc-chip-set'
+  classNames: props => [
+    'mdc-chip-set',
+    {
+      'mdc-chip-set--choice': props.choice,
+      'mdc-chip-set--filter': props.filter
+    }
+  ],
+  consumeProps: ['filter', 'choice']
 });

src/TextField/textfield.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { TextField } from './';
 
+return;
 describe('TextField', () => {
   it('renders', () => {
     mount(<TextField placeholder="test" />);