[terra-tag] Create tag-list subcomponent (#3854)

Co-authored-by: MadanKumarGovindaswamy <[email protected]> Co-authored-by: MadanKumarGovindaswamy <[email protected]> Co-authored-by: Supreeth <[email protected]> Co-authored-by: SM051274 <[email protected]> Co-authored-by: Saad Adnan <[email protected]>
cerner · Nov 7, 2023 · 6726ff4 · 6726ff4
1 parent 39eb9b2
commit 6726ff4
Show file tree

Hide file tree

Showing 88 changed files with 1,930 additions and 23 deletions.
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -2,13 +2,17 @@
 
 ## Unreleased
 
+* Added
+  * Added about page for `TagList`.
+
 ## 1.49.0 - (November 3, 2023)
 
 * Updated
   * Updated accessibility guidance for `terra-arrange`.
 
 * Changed
   * Changed paginator label on custom page count example.
+
 ## 1.48.0 - (November 2, 2023)
 
 * Updated

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/tag/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/tag/About.1.doc.mdx
@@ -28,9 +28,15 @@ This component requires the following peer dependencies be installed in your app
 |-|-|
 | react | ^16.8.5 |
 | react-dom | ^16.8.5 |
+| react-intl | ^2.8.0 |
 
 <!-- AUTO-GENERATED-CONTENT:END -->
 
+## Implementation Notes:
+The Switch component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.
+
+[1]: https://engineering.cerner.com/terra-ui/application/terra-application/components/application-base
+
 ## Usage
 ```jsx
 import Tag from 'terra-tag';

diff --git a/...erra-dev-site/doc/tag/ChangeLog.3.doc.mdx → ...erra-dev-site/doc/tag/ChangeLog.4.doc.mdx b/...erra-dev-site/doc/tag/ChangeLog.3.doc.mdx → ...erra-dev-site/doc/tag/ChangeLog.4.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/tag/TagList.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/tag/TagList.2.doc.mdx
@@ -0,0 +1,55 @@
+import { Badge } from 'terra-tag/package.json?dev-site-package';
+
+import TagListCollapsed from './example/TagListCollapsed?dev-site-example';
+
+import TagListSmall from './example/TagListSmall?dev-site-example';
+
+import TagPropsTable from 'terra-tag/lib/TagList?dev-site-props-table';
+
+<Badge />
+
+# Terra Tag List
+
+The Tag List is a subcomponent of main component `tag` which is used for grouping tabs together in a list to enable keyboard navigation using arrow keys. Navigation from one list to another can be done using `tab` key and within the list, navigation can be done using arrow keys, `right key` to move to next tag and `left key` to move to previous tag.
+
+## 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 |
+| react-intl | ^2.8.0 |
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+## Implementation Notes:
+The Switch component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.
+
+[1]: https://engineering.cerner.com/terra-ui/application/terra-application/components/application-base
+
+## Usage
+```jsx
+import { TagList } from 'terra-tag';
+```
+
+## 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
+<TagListCollapsed title="Tag List Collapsed" />
+
+<TagListSmall title="Tag List Small" />
+
+## Tag Props
+<TagPropsTable />
diff --git a/...a-dev-site/doc/tag/UpgradeGuide.2.doc.mdx → ...a-dev-site/doc/tag/UpgradeGuide.3.doc.mdx b/...a-dev-site/doc/tag/UpgradeGuide.2.doc.mdx → ...a-dev-site/doc/tag/UpgradeGuide.3.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/tag/example/FilterTagsCommon.module.scss b/packages/terra-core-docs/src/terra-dev-site/doc/tag/example/FilterTagsCommon.module.scss
@@ -0,0 +1,120 @@
+// Themes
+@import '../../../theme/clinical-lowlight-theme/FilterTags.module';
+@import '../../../theme/orion-fusion-theme/FilterTags.module';
+
+:local {
+  // Terra Docs Example Reset Button
+  .terra-docs-example-reset-button {
+    margin-bottom: var(--terra-core-docs-example-reset-button-margin-bottom, -2.42857rem);
+    margin-top: 1.42857rem;
+    position: relative;
+
+    &.is-disabled {
+      cursor: default;
+      opacity: 0.3;
+      pointer-events: none;
+    }
+  }
+
+  // Applied Filters Toolbar Example
+  .terra-filter-tags-doc-example-applied-filters {
+    border: var(--terra-core-docs-filter-tags-doc-example-applied-filters-border, 1px solid #d3d4d5);
+    margin: 0;
+    padding: 0;
+
+    .applied-filters-content-panel {
+      background-color: var(--terra-core-docs-filter-tags-doc-example-applied-filters-content-panel-background-color, #f4f4f4);
+      margin: 0;
+      padding: var(--terra-core-docs-filter-tags-doc-example-applied-filters-content-panel-padding, 0);
+    }
+
+    .applied-filters-label {
+      color: var(--terra-core-docs-filter-tags-doc-example-applied-filters-label-color, #4d5153);
+      display: inline-block;
+      font-size: var(--terra-core-docs-filter-tags-doc-example-applied-filters-label-font-size, 0.92857rem);
+      font-weight: var(--terra-core-docs-filter-tags-doc-example-applied-filters-label-font-weight, 400);
+      vertical-align: top;
+    }
+  }
+
+  .terra-filter-tags-doc-example-applied-filters-toolbar {
+    padding-bottom: var(--terra-core-docs-filter-tags-doc-example-applied-filters-toolbar-padding-bottom, 0.42857rem);
+    padding-left: var(--terra-core-docs-filter-tags-doc-example-applied-filters-toolbar-padding-left, 0.71429rem);
+    padding-right: var(--terra-core-docs-filter-tags-doc-example-applied-filters-toolbar-padding-right, 0.35714rem);
+    padding-top: var(--terra-core-docs-filter-tags-doc-example-applied-filters-toolbar-padding-top, 0.42857rem);
+
+    > [class*='Toolbar-module__item___'] {
+      display: block;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+    }
+
+    .toolbar-flex-container {
+      display: flex;
+      margin: 0;
+      min-width: 100%;
+      padding: 0;
+      width: 100%;
+    }
+
+    .toolbar-flex-item-start,
+    .toolbar-flex-item-fill,
+    .toolbar-flex-item-end {
+      margin: 0;
+      padding: 0;
+    }
+
+    .toolbar-flex-item-start {
+      flex: 0 0 auto;
+      margin-right: var(--terra-core-docs-filter-tags-doc-example-applied-filters-flex-item-start-margin-right, 0.57143rem);
+      padding-top: var(--terra-core-docs-filter-tags-doc-example-applied-filters-flex-item-start-padding-top, 0.5rem);
+      vertical-align: top;
+    }
+
+    .toolbar-flex-item-fill {
+      flex: 1 1 auto;
+      min-width: 3rem;
+      vertical-align: top;
+    }
+
+    .toolbar-flex-item-end {
+      flex: 0 0 auto;
+      margin-left: var(--terra-core-docs-filter-tags-doc-example-applied-filters-flex-item-end-margin-left, 0);
+      padding-top: var(--terra-core-docs-filter-tags-doc-example-applied-filters-flex-item-end-padding-top, 0.10714rem);
+      vertical-align: top;
+    }
+  }
+
+
+
+  // Truncated Label Example
+  .terra-filter-tags-doc-example-truncated-label-container {
+    background-color: var(--terra-core-docs-filter-tags-doc-example-truncated-label-container-background-color, #f4f4f4);
+    border: var(--terra-core-docs-filter-tags-doc-example-truncated-label-container-border, 2px dashed #d1d1d1);
+    border-bottom: 0 none;
+    border-top: 0 none;
+    box-sizing: content-box;
+    max-width: 20rem;
+    min-height: var(--terra-core-docs-filter-tags-doc-example-truncated-label-container-min-height, 2.28571rem);
+    padding: var(--terra-core-docs-filter-tags-doc-example-truncated-label-container-padding, 0.71428rem 0.21428rem 0.71428rem 0.21428rem);
+    width: 100%;
+  }
+
+  // Search Terms Example (has Visible Label)
+  .terra-filter-tags-doc-example-search-terms {
+    background-color: var(--terra-core-docs-filter-tags-doc-example-search-terms-background-color, #ecf3ff);
+    box-sizing: border-box;
+    min-height: var(--terra-core-docs-filter-tags-doc-example-search-terms-min-height, 7.5rem);
+    padding: var(--terra-core-docs-filter-tags-doc-example-search-terms-padding, 0.71428rem 0.85714rem);
+
+    .search-terms-label {
+      color: var(--terra-core-docs-filter-tags-doc-example-search-terms-label-color, #1a2f4b);
+      display: block;
+      font-size: var(--terra-core-docs-filter-tags-doc-example-search-terms-label-font-size, 1.07142rem);
+      font-weight: var(--terra-core-docs-filter-tags-doc-example-search-terms-label-font-weight, 500);
+      padding-bottom: var(--terra-core-docs-filter-tags-doc-example-search-terms-label-padding-bottom, 0.21428rem);
+      padding-left: var(--terra-core-docs-filter-tags-doc-example-search-terms-label-padding-left, 0.14285rem);
+    }
+  }
+} 
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/tag/example/TagListCollapsed.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/tag/example/TagListCollapsed.jsx
@@ -0,0 +1,47 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import IconBookmark from 'terra-icon/lib/icon/IconTile';
+import Tag, { TagList } from 'terra-tag';
+import ThemeContext from 'terra-theme-context';
+import classNamesBind from 'classnames/bind';
+import Toolbar from 'terra-toolbar';
+import styles from './FilterTagsCommon.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+const text = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores ';
+
+const TagListCollapsed = () => {
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <>
+      <div className={cx(['terra-filter-tags-doc-example-applied-filters', theme.className])}>
+        <Toolbar className={cx('terra-filter-tags-doc-example-applied-filters-toolbar')}>
+          <div className={cx('toolbar-flex-container')}>
+            <div className={cx('toolbar-flex-item-start')} />
+            <div className={cx('toolbar-flex-item-fill')}>
+              <TagList isCollapsible ariaLabel="Collapsible Tag List Example with collapsed list items">
+                <Tag icon={<IconPerson />} text="Asthma" onClick={() => window.alert('Patient is diagnosed with asthma')} id="asthma" />
+                <Tag icon={<IconBookmark />} text={text} id="longTextIcon" onClick={() => window.alert('Tag has been clicked!')} />
+                <Tag id="bronchitis" text="Bronchitis" onClick={() => window.alert('Patient is diagnosed with bronchitis')} />
+                <Tag id="fibro" text="Fibro" onClick={() => window.alert('Patient is diagnosed with Fibro')} />
+                <Tag icon={<IconPerson />} text="Dust Allergy" onClick={() => window.alert('Patient is diagnosed with dust allergy')} id="allergy" />
+                <Tag icon={<IconPerson />} text="Diabetes" onClick={() => window.alert('Patient is diagnosed with Diabetes')} id="diabetes" />
+                <Tag text="Arthritis" onClick={() => window.alert('Patient is diagnosed with Arthritis')} id="arthritis" />
+                <Tag text="Hypertension" onClick={() => window.alert('Patient is diagnosed with Hypertension (High Blood Pressure)')} id="hypertension" />
+                <Tag icon={<IconPerson />} text="Multiple Sclerosis (MS)" onClick={() => window.alert('Patient is diagnosed with Multiple Sclerosis (MS)')} id="sclerosis" />
+                <Tag text="Psoriasis" onClick={() => window.alert('Patient is diagnosed with Psoriasis')} id="psoriasis" />
+                <Tag icon={<IconBookmark />} text="Epilepsy" onClick={() => window.alert('Patient is diagnosed with Epilepsy')} id="epilepsy" />
+                <Tag icon={<IconPerson />} text="Ulcerative Colitis" onClick={() => window.alert('Patient is diagnosed with Ulcerative Colitis')} id="ulcer" />
+              </TagList>
+            </div>
+          </div>
+        </Toolbar>
+      </div>
+    </>
+  );
+};
+
+export default TagListCollapsed;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/tag/example/TagListSmall.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/tag/example/TagListSmall.jsx
@@ -0,0 +1,34 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import Tag, { TagList } from 'terra-tag';
+import ThemeContext from 'terra-theme-context';
+import classNamesBind from 'classnames/bind';
+import Toolbar from 'terra-toolbar';
+import styles from './FilterTagsCommon.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+const TagListSmall = () => {
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <>
+      <div className={cx(['terra-filter-tags-doc-example-applied-filters', theme.className])}>
+        <Toolbar className={cx('terra-filter-tags-doc-example-applied-filters-toolbar')}>
+          <div className={cx('toolbar-flex-container')}>
+            <div className={cx('toolbar-flex-item-start')} />
+            <div className={cx('toolbar-flex-item-fill')}>
+              <TagList isCollapsible ariaLabel="Tag List Example with small list">
+                <Tag href="https://www.google.com/search?q=Asthma" text="Asthma" id="asthmaLink" />
+                <Tag icon={<IconPerson />} href="https://www.google.com/search?q=Bronchitis" text="Bronchitis" id="BronchitisLink" />
+              </TagList>
+            </div>
+          </div>
+        </Toolbar>
+      </div>
+    </>
+  );
+};
+
+export default TagListSmall;
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/tag/TagListCollapsedTags.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/tag/TagListCollapsedTags.test.jsx
@@ -0,0 +1,46 @@
+/* eslint-disable no-alert */
+import React from 'react';
+import { IconBookmark, IconPerson } from 'terra-icon';
+import Tag, { TagList } from 'terra-tag';
+import ThemeContext from 'terra-theme-context';
+import classNamesBind from 'classnames/bind';
+import Toolbar from 'terra-toolbar';
+import styles from '../../doc/tag/example/FilterTagsCommon.module.scss';
+
+const cx = classNamesBind.bind(styles);
+
+const text = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores ';
+
+const TagListCollapsedTags = () => {
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <>
+      <div className={cx(['terra-filter-tags-doc-example-applied-filters', theme.className])}>
+        <Toolbar className={cx('terra-filter-tags-doc-example-applied-filters-toolbar')}>
+          <div className={cx('toolbar-flex-container')}>
+            <div className={cx('toolbar-flex-item-start')} />
+            <div className={cx('toolbar-flex-item-fill')}>
+              <TagList isCollapsible ariaLabel="Collapsible Tag List Example with collapsed list items">
+                <Tag icon={<IconPerson />} text="Asthma" onClick={() => window.alert('Patient is diagnosed with asthma')} id="asthma" />
+                <Tag icon={<IconBookmark />} text={text} id="longTextIcon" onClick={() => window.alert('Tag has been clicked!')} />
+                <Tag id="bronchitis" text="Bronchitis" onClick={() => window.alert('Patient is diagnosed with bronchitis')} />
+                <Tag id="fibro" text="Fibro" onClick={() => window.alert('Patient is diagnosed with Fibro')} />
+                <Tag icon={<IconPerson />} text="Dust Allergy" onClick={() => window.alert('Patient is diagnosed with dust allergy')} id="allergy" />
+                <Tag icon={<IconPerson />} text="Diabetes" onClick={() => window.alert('Patient is diagnosed with Diabetes')} id="diabetes" />
+                <Tag text="Arthritis" onClick={() => window.alert('Patient is diagnosed with Arthritis')} id="arthritis" />
+                <Tag text="Hypertension" onClick={() => window.alert('Patient is diagnosed with Hypertension (High Blood Pressure)')} id="hypertension" />
+                <Tag icon={<IconPerson />} text="Multiple Sclerosis (MS)" onClick={() => window.alert('Patient is diagnosed with Multiple Sclerosis (MS)')} id="sclerosis" />
+                <Tag text="Psoriasis" onClick={() => window.alert('Patient is diagnosed with Psoriasis')} id="psoriasis" />
+                <Tag icon={<IconBookmark />} text="Epilepsy" onClick={() => window.alert('Patient is diagnosed with Epilepsy')} id="epilepsy" />
+                <Tag icon={<IconPerson />} text="Ulcerative Colitis" onClick={() => window.alert('Patient is diagnosed with Ulcerative Colitis')} id="ulcer" />
+              </TagList>
+            </div>
+          </div>
+        </Toolbar>
+      </div>
+    </>
+  );
+};
+
+export default TagListCollapsedTags;
diff --git a/...s/terra-core-docs/src/terra-dev-site/theme/clinical-lowlight-theme/FilterTags.module.scss b/...s/terra-core-docs/src/terra-dev-site/theme/clinical-lowlight-theme/FilterTags.module.scss
@@ -0,0 +1,42 @@
+:local {
+  .clinical-lowlight-theme {
+    /* ---------------------------------------------------------------------- *
+     * Filter Pills: Doc Examples 
+     * ---------------------------------------------------------------------- */
+
+    // Terra Docs Example Reset Button
+    --terra-core-docs-example-reset-button-margin-bottom: -2.42857rem;
+
+    // Applied Filters Toolbar Example
+    --terra-core-docs-filter-pills-doc-example-applied-filters-border: 1px solid #181b1d;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-content-panel-background-color: #1c1f21;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-content-panel-padding: 0;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-label-color: #b2b5b6;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-label-font-size: 0.92857rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-label-font-weight: 400;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-toolbar-padding-bottom: 0.42857rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-toolbar-padding-left: 0.71429rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-toolbar-padding-right: 0.35714rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-toolbar-padding-top: 0.42857rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-flex-item-start-margin-right: 0.57143rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-flex-item-start-padding-top: 0.5rem;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-flex-item-end-margin-left: 0;
+    --terra-core-docs-filter-pills-doc-example-applied-filters-flex-item-end-padding-top: 0.10714rem;
+
+    // Truncated Label Example
+    --terra-core-docs-filter-pills-doc-example-truncated-label-container-background-color: rgba(224, 215, 16, 0.1);
+    --terra-core-docs-filter-pills-doc-example-truncated-label-container-border: 2px dashed #e0d710;
+    --terra-core-docs-filter-pills-doc-example-truncated-label-container-min-height: 2.28571rem;
+    --terra-core-docs-filter-pills-doc-example-truncated-label-container-padding: 0.71428rem 0.21428rem 0.71428rem 0.21428rem;
+
+    // Search Terms Example (has Visible Label)
+    --terra-core-docs-filter-pills-doc-example-search-terms-background-color: #2d3539;
+    --terra-core-docs-filter-pills-doc-example-search-terms-min-height: 7.5rem;
+    --terra-core-docs-filter-pills-doc-example-search-terms-padding: 0.71428rem 0.85714rem;
+    --terra-core-docs-filter-pills-doc-example-search-terms-label-color: rgb(234, 236, 239);
+    --terra-core-docs-filter-pills-doc-example-search-terms-label-font-size: 1.07142rem;
+    --terra-core-docs-filter-pills-doc-example-search-terms-label-font-weight: 500;
+    --terra-core-docs-filter-pills-doc-example-search-terms-label-padding-bottom: 0.21428rem;
+    --terra-core-docs-filter-pills-doc-example-search-terms-label-padding-left: 0.14285rem;
+  }
+}