Feature/interactive chips

packages/styles/src/components/badge/badge.stories.js

@@ -0,0 +1,20 @@
+export default {
+  title: 'Patterns/Badges, Chips, and Tags',
+  argTypes: {
+    danger: {
+      name: 'Danger',
+      control: { type: 'boolean' },
+      description: 'Adds a modifier class to the component to display the danger variation (see generated HTML)'
+
+    },
+  },
+};
+
+const BadgeTemplate = ({danger}) => (`
+  <div class="cbp-badge ${danger ? 'cbp-badge--danger' : ''}">
+    5
+  </div>
+`);
+
+export const Badge = BadgeTemplate.bind({});
+Badge.args = {};

packages/styles/src/components/chip/chip.js

@@ -0,0 +1,37 @@
+class Chip {
+  constructor(chip) {
+    this.chip = chip;
+
+    this.chip.addEventListener('click', (e) => {
+      this.handleClick(e);
+    });
+  }
+
+  handleClick(e) {
+    // In case of nested elements, get the button they belong to (closest() is self-referencing)
+    const clickedButton = e.target.closest('button');
+
+    const previousState =
+      clickedButton.hasAttribute('aria-pressed') &&
+      clickedButton.getAttribute('aria-pressed') === 'true'
+        ? true
+        : false;
+
+    // Toggle active class
+    clickedButton.setAttribute('aria-pressed', (!previousState).toString());
+
+    // Emit a custom event so that the developer can listen to the group rather than individual buttons
+    const toggleEvent = new CustomEvent('chipToggle', {
+      detail: {
+        chip: this.chip,
+        label: this.chip.innerText,
+        value: this.chip.value,
+        active: !previousState,
+        nativeEvent: e,
+      },
+    });
+    this.chip.dispatchEvent(toggleEvent);
+  }
+}
+
+export default Chip;

packages/styles/src/components/chip/chip.md

@@ -0,0 +1,37 @@
+# Chip
+
+## Purpose
+
+A Chip acts like an interactive Tag and can be used to select or unselect items from a list of options.
+
+## Functional Requirements
+
+* Because the Chip is interactive, it should be semantically represented by a `button` element.
+* Chips may have visible "active" or "inactive" states or be removed from the page by application logic.
+
+
+## Technical Specifications
+
+### User Interactions
+
+* Activating the button within the chip will toggle the `active` class and emit a custom event in addition to the native button's `click` event.
+
+### Responsiveness
+
+* Chips should not contain long text and are not intended to wrap.
+
+### Accessibility
+
+* Because the Chip is interactive, it should be semantically represented by a `button` element per the provided pattern. Adding the `cbp-chip` class to any other element will result in accessibility defects.
+* The `aria-pressed` attribute on the button is set to `true` to indicate the active state of a Chip.
+* Chips/buttons without accessibile label text, such as icons, should use the `aria-label` attribute on the button to specify an accessible label.
+
+### Usage Notes and Additional Considerations
+
+* A custom event of `chipToggle` is emitted from the parent component tag. The custom event's `details` contain the following keys:
+  * `chip`: a DOM reference to the button element activated
+  * `nativeEvent`: the full native `click` event from the activated button
+  * `active`: a Boolean representing the active state of the button resulting from the user interaction
+  * `label`: the text label of the Chip/button activated, if one exists
+  * `value`: the value of the Chip/button activated, if specified
+* Applications may tie custom functionality to this event to hide or remove deactivated Chips if desired.

packages/styles/src/components/chip/chip.stories.js

@@ -0,0 +1,22 @@
+export default {
+  title: 'Patterns/Badges, Chips, and Tags',
+  argTypes: {
+    active: {
+      name: 'Active',
+      control: { type: 'boolean' },
+      description: 'Adds a modifier class indicating an active/selected chip.'
+    },
+  },
+};
+
+const ChipTemplate = ({active}) => (`
+  <button type="button" class="cbp-chip" aria-pressed="${active ? active.toString() : 'false'}">
+    <span class="cbp-chip__label">Hotlist</span>
+    <div class="cbp-chip__icon">
+      <i class="fas fa-plus"></i>
+    </div>
+  </button>
+`);
+
+export const Chip = ChipTemplate.bind({});
+Chip.args = {};

packages/styles/src/components/tag/tag.stories.js

@@ -0,0 +1,21 @@
+export default {
+  title: 'Patterns/Badges, Chips, and Tags',
+  argTypes: {
+    variant: {
+      name: 'Variant',
+      control: { type: 'select' },
+      options: ['', 'danger', 'success', 'warning'],
+      description:
+        'Adds a modifier class to the component to display different color variations (see generated HTML)',
+    },
+  },
+};
+
+const TagTemplate = ({ variant }) => `
+  <div class="cbp-tag ${variant ? 'cbp-tag--' + variant : ''}">
+    Hotlist
+  </div>
+`;
+
+export const Tag = TagTemplate.bind({});
+Tag.args = {};

packages/styles/src/index.js

@@ -2,6 +2,7 @@ import SelectorEngine from './utilities/selectorEngine';
 import Accordion from './components/accordion/accordion';
 import ApplicationHeader from './components/application-header/application-header';
 import Banner from './components/banner/banner';
+import Chip from './components/chip/chip';
 import Drawer from './components/drawer/drawer';
 import Dropdown from './components/dropdown/dropdown';
 import Expand from './components/expand/expand';
@@ -45,6 +46,13 @@ document.addEventListener('DOMContentLoaded', (event) => {
     addOrInstantiate(Banner, banner);
   });
 
+  /**
+   * Chips
+   */
+  SelectorEngine.findAll('.cbp-chip').forEach((chip) => {
+    addOrInstantiate(Chip, chip);
+  });
+
   /**
    * Drawer Components
    */