[terra-tag] Create tag-list subcomponent

packages/terra-core-docs/src/terra-dev-site/doc/tag-list/About.1.doc.mdx

@@ -0,0 +1,43 @@
+import { Badge } from 'terra-tag/package.json?dev-site-package';
+import TagListExample from './example/TagListExample?dev-site-example';
+import TagListPropsTable from 'terra-tag-list/src/TagList?dev-site-props-table';
+
+<Badge /> 
+
+# Terra Tag List
+
+ The Terra Tag List component is a component that groups tags and allows consumers to manage the selection state of each tag in the group.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-tag-list`
+
+<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
+## Peer Dependencies
+
+This component requires the following peer dependencies be installed in your app for the component to properly function.
+
+| Peer Dependency | Version |
+|-|-|
+| react | ^16.8.5 |
+| react-dom | ^16.8.5 |
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+## Usage
+
+```jsx
+import TagList from 'terra-tag-list';
+```
+
+## Component Features
+* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
+* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
+* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
+
+## Examples
+<TagListExample />
+
+## Tag List Props
+<TagListPropsTable />

packages/terra-core-docs/src/terra-dev-site/doc/tag-list/example/TagListExample.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import TagList from '../../../../../../terra-tag-list/src/TagList';
+import Tag from '../../../../../../terra-tag-list/src/subcomponents/Tag';
+
+const TagListExample = () => {
+  return (
+    <div>
+        <h1>Tag List Example</h1>
+        <TagList ariaLabel="It is incorrect to remove the parent FilterPills">
+            <Tag text="Test Tag 1" onClick={() => window.alert('Tag1 has been clicked!')} id={"Tag1"}/>
+            <Tag text="Test Tag 2" onClick={() => window.alert('Tag2 has been clicked!')} id={"Tag2"}/>
+            <Tag text="Test Tag 3" onClick={() => window.alert('Tag3 has been clicked!')} id={"Tag3"}/>
+            <Tag text="Test Tag 4" onClick={() => window.alert('Tag4 has been clicked!')} id={"Tag4"}/>
+        </TagList>
+        <TagList ariaLabel="It is incorrect to remove the parent FilterPills">
+            <Tag text="Test Tag 1" onClick={() => window.alert('Tag1 has been clicked!')} id={"Tag1"}/>
+            <Tag text="Test Tag 2" onClick={() => window.alert('Tag2 has been clicked!')} id={"Tag2"}/>
+            <Tag text="Test Tag 3" onClick={() => window.alert('Tag3 has been clicked!')} id={"Tag3"}/>
+            <Tag text="Test Tag 4" onClick={() => window.alert('Tag4 has been clicked!')} id={"Tag4"}/>
+        </TagList>
+    </div>
+  );
+};
+
+export default TagListExample;

packages/terra-core-docs/src/terra-dev-site/doc/tag/example/HrefTag.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import IconTag from 'terra-icon/lib/icon/IconTag';
 import Tag from 'terra-tag';
+import TagList from 'terra-tag/src/subcomponent/TagList';
 
 const HrefTag = () => (
   <div>
-    <Tag href="http://google.com" text="HREF Tag" />
-    <Tag icon={<IconTag />} href="http://google.com" text="Icon &amp; Text HREF Tag" />
+    <TagList>
+      <Tag href="http://google.com" text="HREF Tag" id={"Tag1"}/>
+      <Tag icon={<IconTag />} href="http://google.com" text="Icon &amp; Text HREF Tag" id={"Tag2"}/>
+    </TagList>
   </div>
 );
 

packages/terra-core-docs/src/terra-dev-site/doc/tag/example/TagDefault.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import IconTag from 'terra-icon/lib/icon/IconTag';
 import Tag from 'terra-tag';
+import TagList from 'terra-tag/src/subcomponent/TagList';
 
 const TagDefault = () => (
   <div>
-    {/* eslint-disable no-alert */}
-    <Tag text="Default OnClick Tag" onClick={() => window.alert('Tag has been clicked!')} />
-    <Tag icon={<IconTag />} onClick={() => window.alert('Tag has been clicked!')} text="Icon &amp; Text OnClick Tag" />
-    {/* eslint-enable no-alert */}
+    <TagList>
+      {/* eslint-disable no-alert */}
+      <Tag text="Default OnClick Tag" onClick={() => window.alert('Tag1 has been clicked!')} id={"Tag1"} />
+      <Tag icon={<IconTag />} onClick={() => window.alert('Tag2 has been clicked!')} text="Icon &amp; Text OnClick Tag" id={"Tag2"} />
+      <Tag icon={<IconTag />} onClick={() => window.alert('Tag 3')} text="Icon &amp; Tag 3" id={"Tag3"} />
+      <Tag icon={<IconTag />} onClick={() => window.alert('Tag 4')} text="Icon &amp; Tag 4" id={"Tag4"} />
+      <Tag text="Tag 5" onClick={() => window.alert('Tag 5')} id={"Tag5"} />
+      {/* eslint-enable no-alert */}
+    </TagList>
   </div>
 );
 

packages/terra-core-docs/src/terra-dev-site/doc/tag/example/TagFallbacks.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import IconTag from 'terra-icon/lib/icon/IconTag';
 import Tag from 'terra-tag';
+import TagList from 'terra-tag/src/subcomponent/TagList';
 
 const TagFallbacks = () => (
   <div>
-    <Tag text="No OnClick/HREF Tag" />
-    <Tag icon={<IconTag />} text="Icon &amp; Text - No OnClick/HREF Tag" />
+    <TagList>
+      <Tag text="No OnClick/HREF Tag" id={"Tag1"}/>
+      <Tag icon={<IconTag />} text="Icon &amp; Text - No OnClick/HREF Tag" id={"Tag2"}/>
+    </TagList>
   </div>
 );
 

packages/terra-tag/src/Tag.jsx

@@ -59,6 +59,10 @@ class Tag extends React.Component {
     // Apply focus styles for keyboard navigation
     if (event.nativeEvent.keyCode === KeyCode.KEY_TAB) {
       this.setState({ focused: true });
+    }else if (event.nativeEvent.keyCode === KeyCode.KEY_RIGHT) {
+      this.setState({ focused: true });
+    }else if (event.nativeEvent.keyCode === KeyCode.KEY_LEFT) {
+      this.setState({ focused: true });
     }
 
     if (this.props.onKeyUp) {
@@ -106,6 +110,7 @@ class Tag extends React.Component {
         onClick={onClick}
         onFocus={onFocus}
         href={href}
+        data-terra-tag
       >
         {tagIcon}
         {text}

packages/terra-tag/src/subcomponent/TagList.jsx

@@ -0,0 +1,177 @@
+import React, {
+  useCallback, useLayoutEffect, useRef, useState
+} from 'react';
+import {
+  KEY_LEFT,
+  KEY_RIGHT,
+} from 'keycode-js';
+import classNames from 'classnames';
+import classNamesBind from 'classnames/bind';
+import PropTypes from 'prop-types';
+import ResizeObserver from 'resize-observer-polyfill';
+import ThemeContext from 'terra-theme-context';
+import { injectIntl } from 'react-intl';
+import styles from './TagList.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+const propTypes = {
+  /**
+   * The content to be shown in the tags container.
+   */
+  children: PropTypes.node,
+};
+
+const TagList = (props) => {
+  const {
+    children,
+    ...customProps
+  } = props;
+
+  const theme = React.useContext(ThemeContext);
+  const [containerTabindex, setContainerTabindex] = useState('-1');
+  const [updatedCount, setUpdatedCount] = useState(React.Children.count(children));
+  const currentTag = useRef(); // ID of the tag that will receive focus
+  const filterTagsRef = useRef();
+  const focusNode = useRef(0);
+
+  // Modifies the tabindex of the tag
+  const setTabIndex = (val) => {
+    const currentNode = currentTag.current ? filterTagsRef.current.querySelector(`#${currentTag.current}`) : null;
+    if (currentNode) {
+      currentNode.setAttribute('tabIndex', val);
+    }
+  };
+
+  // Sets focus to the current tag with tabindex 0
+  const focusCurrentNode = () => {
+    const currentNode = currentTag.current ? filterTagsRef.current.querySelector(`#${currentTag.current}`) : null;
+    if (currentNode) {
+      currentNode.focus();
+    }
+  };
+
+  /**
+ * Takes 'tag' element and tabindex 'val' as inputs and sets the tag elements tabindex.
+ */
+  const setTagsTabIndex = (tags, val) => {
+    for (let i = 0; i < tags.length; i += 1) {
+      tags[i].setAttribute('tabindex', val);
+    }
+  };
+
+  // resets all tag nodes tabindex to -1, except for the one tag that receives focus.
+  const resetTabIndex = useCallback(() => {
+    const tags = [...filterTagsRef.current.querySelectorAll('[data-terra-tag]')];
+
+    if (tags.length > 0 && focusNode.current < tags.length) {
+      setTagsTabIndex(tags, '-1');
+      currentTag.current = tags[focusNode.current].id;
+      setTabIndex('0');
+    }
+  }, []);
+
+  const handleResize = useCallback((entries) => {
+    if (!Array.isArray(entries)) {
+      return;
+    }
+
+    setUpdatedCount(React.Children.count(children));
+
+    resetTabIndex();
+  }, [children, resetTabIndex]);
+
+  useLayoutEffect(() => {
+    let observer = new ResizeObserver((entries) => {
+      handleResize(entries);
+    });
+    observer.observe(filterTagsRef.current.parentNode);
+
+    return () => {
+      observer.disconnect();
+      observer = null;
+    };
+  }, [children, handleResize]);
+
+  const focusNextNode = (tags) => {
+    if (focusNode.current + 1 <= tags.length) {
+      setTabIndex('-1');
+      if (focusNode.current + 1 < tags.length) { // focus the next available tag
+        focusNode.current += 1;
+        currentTag.current = children[focusNode.current].props.id;
+      }
+      setTabIndex('0');
+      focusCurrentNode();
+    }
+  };
+
+  const focusPreviousNode = () => {
+    if (focusNode.current >= 1) {
+      setTabIndex('-1');
+      focusNode.current -= 1;
+      currentTag.current = children[focusNode.current].props.id;
+      setTabIndex('0');
+      focusCurrentNode();
+    }
+  };
+
+  const handleTagListKeyDown = (event) => {
+    const tags = [...filterTagsRef.current.querySelectorAll('button, a')];
+
+    switch (event.keyCode) {
+      case KEY_RIGHT:
+        event.preventDefault();
+        focusNextNode(tags);
+        break;
+      case KEY_LEFT:
+        event.preventDefault();
+        focusPreviousNode(tags);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleTagListOnblur = () => setContainerTabindex('-1');
+
+  const filterTagsProps = {};
+  filterTagsProps.onKeyDown = handleTagListKeyDown;
+  filterTagsProps.onBlur = handleTagListOnblur;
+
+  const tagListClassNames = classNames(
+    cx([
+      'tags-group',
+      theme.className,
+    ]),
+    customProps.className,
+  );
+
+  const renderChildren = (items) => {
+    const tags = React.Children.map(items, (tag) => {
+      if (React.isValidElement(tag)) {
+        return React.cloneElement(tag);
+      }
+      return undefined;
+    });
+
+    const reducedArray = tags.splice(0, updatedCount);
+    return reducedArray;
+  };
+
+  return (
+    <div
+      {...customProps}
+      {...filterTagsProps}
+      className={tagListClassNames}
+      ref={filterTagsRef}
+      role="list"
+      tabIndex={containerTabindex}
+    >
+      {children ? renderChildren(children) : []}
+    </div>
+  );
+};
+
+TagList.propTypes = propTypes;
+
+export default injectIntl(TagList);