feat(chip): add the chip component

docs/components/chip.md

@@ -0,0 +1,12 @@
+---
+label: Component
+title: Chip
+---
+
+<page-intro>Filter chips use tags or descriptive words to filter content. Filter chips clearly delineate and display options in a compact area.</page-intro>
+
+<component
+    component="chip"
+    variation="chip"
+    >
+</component>

docs/html/chip/chip.html

@@ -0,0 +1 @@
+<div class="ray-chip">Neighborhoods</div>

packages/core/src/components/chip/_chip.scss

@@ -0,0 +1,46 @@
+@import '../../global/variables';
+
+$ray-chip-border-width: 1px;
+$ray-chip-height: $ray-spacing-xs * 2 + 1rem;
+
+.#{$ray-class-prefix}chip {
+  @include no-select;
+  border: $ray-chip-border-width solid $ray-color-blue-50;
+  background-color: $ray-color-white;
+  padding: $ray-spacing-xs $ray-spacing-md;
+  border-radius: $ray-chip-height;
+  color: $ray-color-blue-50;
+  display: inline-block;
+  cursor: pointer;
+
+  &:not(:last-child) {
+    margin-right: $ray-spacing-xs;
+  }
+
+  &:hover {
+    background-color: $ray-color-blue-10;
+    color: $ray-color-blue-50;
+  }
+
+  &:focus {
+    box-shadow: $ray-box-shadow-focus-state;
+  }
+
+  &:active {
+    background-color: $ray-color-blue-20;
+  }
+}
+
+.#{$ray-class-prefix}chip--active {
+  background-color: $ray-color-blue-50;
+  color: $ray-color-white;
+
+  &:hover {
+    background-color: $ray-color-blue-50;
+    color: $ray-color-white;
+  }
+}
+
+.#{$ray-class-prefix}chip--micro {
+  padding: 0 0.75rem;
+}

packages/core/src/components/chip/index.js

@@ -0,0 +1,78 @@
+class Chip {
+  static instances = new WeakMap();
+
+  static get cssClasses() {
+    return {
+      ACTIVE: 'ray-chip--active'
+    };
+  }
+
+  static get strings() {
+    return {
+      INIT_SELECTOR: '.ray-chip'
+    };
+  }
+
+  static create(element, options) {
+    return this.instances.get(element) || new this(element, options);
+  }
+
+  static createAll(target = document, _options = { active: false }) {
+    // Finds all instances of select on the document or within a given element and instantiates them.
+    const options = {
+      initSelector: this.strings.INIT_SELECTOR,
+      ..._options
+    };
+
+    const chips = Array.from(target.querySelectorAll(options.initSelector));
+    chips.forEach(select => this.create(select, options));
+  }
+
+  constructor(root, options) {
+    this._root = root;
+    this._options = options;
+
+    this.constructor.instances.set(this._root, this);
+
+    this.state = {
+      active:
+        options.active ||
+        this._root.classList.contains(this.constructor.cssClasses.ACTIVE)
+    };
+
+    this._bindEventListeners();
+    this.assignClasses();
+  }
+
+  _bindEventListeners() {
+    this._root.addEventListener('mousedown', this.onMousedown);
+  }
+
+  assignClasses() {
+    if (this.state.active) {
+      this._root.classList.add(this.constructor.cssClasses.ACTIVE);
+    } else {
+      this._root.classList.remove(this.constructor.cssClasses.ACTIVE);
+    }
+  }
+
+  setState(newState) {
+    this.state = Object.assign({}, this.state, newState);
+    this.assignClasses();
+  }
+
+  onMousedown = () => {
+    this.state.active = !this.state.active;
+    this.assignClasses();
+  };
+
+  destroy() {
+    // Implement this method to release any resources / deregister any listeners they have
+    // attached. An example of this might be deregistering a resize event from the window object.
+    this._root.removeEventListener('mousedown', this.onMousedown);
+
+    this.constructor.instances.delete(this._root);
+  }
+}
+
+export default Chip;

packages/core/src/components/index.js

@@ -1,4 +1,5 @@
 import Select from './select';
 import { TextField, TextArea } from './text-field';
+import Chip from './chip';
 
-export { Select, TextField, TextArea };
+export { Select, TextField, TextArea, Chip };

packages/core/src/ray-core.scss

@@ -10,6 +10,7 @@
 @import './global/material-grid/mdc-layout-grid';
 
 @import './components/card/card';
+@import './components/chip/chip';
 @import './components/button/button';
 @import './components/breadcrumb/breadcrumb';
 @import './components/radio-checkbox/radio-checkbox';

packages/core/stories/chip.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Chip from '../src/components/chip';
+
+function initChip() {
+  Chip.createAll();
+}
+
+/* eslint-disable no-script-url */
+storiesOf('Chip', module).add('default', () => {
+  setTimeout(initChip);
+  return (
+    <>
+      <div className="ray-chip">Neighborhoods</div>
+      <div className="ray-chip ray-chip--active">Offices</div>
+    </>
+  );
+});
+storiesOf('Chip', module).add('micro', () => {
+  setTimeout(initChip);
+  return (
+    <>
+      <div className="ray-chip ray-chip--micro">Offices</div>
+      <div className="ray-chip ray-chip--micro ray-chip--active">Offices</div>
+    </>
+  );
+});

packages/core/test/components/chip.test.js

@@ -0,0 +1,7 @@
+import Chip from '../../src/components/chip';
+
+describe('Chip', () => {
+  test('stufff', () => {
+    expect(Chip.create()).toBe('');
+  });
+});

packages/docs-app/src/data/navigation/navigation.json

@@ -59,6 +59,9 @@
       "card": {
         "title": "Card"
       },
+      "chip": {
+        "title": "Chip"
+      },
       "image": {
         "title": "Image"
       },