[Terra-Tag] Update examples (#3863)

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Updated
+  * Updated `terra-tag` to include realistic examples.
+
 ## 1.33.0 - (August 2, 2023)
 
 * Changed

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

@@ -1,6 +1,7 @@
 import { Badge } from 'terra-tag/package.json?dev-site-package';
 
 import TagDefault from './example/TagDefault?dev-site-example';
+import TagIcon from './example/TagIcon?dev-site-example';
 import TagHref from './example/HrefTag?dev-site-example';
 import TagFallbacks from './example/TagFallbacks?dev-site-example';
 
@@ -42,9 +43,17 @@ import Tag from 'terra-tag';
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
 
 ## Examples
-<TagDefault title="Default Tag with onClick" />
-<TagHref title="Tag with href" />
-<TagFallbacks title="Tag with no onClick or href" description="These styles are provided for when this component is missing recommended elements for best practice use." />
+
+### Default Tag with associated action
+Tag in its default form is an interactive component designed to provide additional information or trigger actions when clicked. Each tag visually communicates its purpose through text and optional icons.
+<TagDefault title="Default clickable Tag" description="This tag displays a simple text label, and when clicked, it triggers a notification to provide aditional information." />
+<TagIcon title="Default Tag with Icon" description="This tag combines an icon and text label to convey additional meaning. When clicked, it also triggers a notification to inform the user about the interaction." />
+
+### Tag with clickable link
+<TagHref title="Tag with href" description="This tag provides a direct link to a specific webpage. Just click on the tag, and it will seamlessly redirect to the associated website." />
+
+### Tag with no associated action
+<TagFallbacks title="Tag with no onClick or href" description="This tag represents a simple tag without any additional actions or links associated with it. It conveys essential information but does not trigger any specific actions when clicked. These styles are provided for when this component is missing recommended elements for best practice use." />
 
 ## Tag Props
 <TagPropsTable />

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import IconTag from 'terra-icon/lib/icon/IconTag';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
 import Tag from 'terra-tag';
 
 const HrefTag = () => (
   <div>
-    <Tag href="http://google.com" text="HREF Tag" />
-    <Tag icon={<IconTag />} href="http://google.com" text="Icon &amp; Text HREF Tag" />
+    <Tag href="https://www.google.com/search?q=atrial+fibrillation" text="AF-Atrial Fibrillation" />
+    <Tag icon={<IconPerson />} href="https://www.google.com/search?q=bronchitis" text="Bronchitis" />
   </div>
 );
 

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import IconTag from 'terra-icon/lib/icon/IconTag';
 import Tag from 'terra-tag';
 
 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" />
+    <Tag text="AF-Atrial Fibrillation" onClick={() => window.alert('Patient has been diagnosed with AF-Atrial Fibrillation')} />
     {/* eslint-enable no-alert */}
   </div>
 );

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import IconTag from 'terra-icon/lib/icon/IconTag';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
 import Tag from 'terra-tag';
 
 const TagFallbacks = () => (
   <div>
-    <Tag text="No OnClick/HREF Tag" />
-    <Tag icon={<IconTag />} text="Icon &amp; Text - No OnClick/HREF Tag" />
+    <Tag text="AF-Atrial Fibrillation" />
+    <Tag icon={<IconPerson />} text="Bronchitis" />
   </div>
 );
 

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import Tag from 'terra-tag';
+
+const TagIcon = () => (
+  <div>
+    {/* eslint-disable no-alert */}
+    <Tag icon={<IconPerson />} onClick={() => window.alert('Patient has been diagnosed with Bronchitis')} text="Bronchitis" />
+    {/* eslint-enable no-alert */}
+  </div>
+);
+
+export default TagIcon;