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"
  },