fix(tag-group): ensuring tags can be gray (#9972)

### Related Ticket(s)
#9890

### Description
Ensured that the carbon tag can be gray when used within Tag Group.


### Changelog

**Removed**

- removed tag group condition that would change a tag color to green if gray was chosen

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/card/__stories__/card.stories.react.tsx

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,21 +27,46 @@ import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--131
 import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png';
 import { PICTOGRAM_PLACEMENT } from '../defs';
 
-export const Default = args => {
-  const { image, href, alt, defaultSrc, heading, eyebrow, tagGroup, copy, footer, cardStyles } = args?.Card ?? {};
+export const Default = (args) => {
+  const {
+    image,
+    href,
+    alt,
+    defaultSrc,
+    heading,
+    eyebrow,
+    tagGroup,
+    copy,
+    footer,
+    cardStyles,
+  } = args?.Card ?? {};
   return (
     /* eslint-disable no-nested-ternary */
     <DDSCard
-      colorScheme={cardStyles === 'Inverse card' ? 'inverse' : cardStyles === 'Outlined card' ? 'light' : ''}
+      colorScheme={
+        cardStyles === 'Inverse card'
+          ? 'inverse'
+          : cardStyles === 'Outlined card'
+          ? 'light'
+          : ''
+      }
       href={href || undefined}
       border={cardStyles === 'Outlined card'}>
-      {image ? <DDSImage slot="image" alt={alt || undefined} defaultSrc={defaultSrc || undefined} /> : ''}
+      {image ? (
+        <DDSImage
+          slot="image"
+          alt={alt || undefined}
+          defaultSrc={defaultSrc || undefined}
+        />
+      ) : (
+        ''
+      )}
       <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
       <DDSCardHeading>{heading}</DDSCardHeading>
       {copy ? <p>{copy}</p> : ''}
       {tagGroup ? (
         <DDSTagGroup>
-          <Tag>Most popular</Tag>
+          <Tag type="green">Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
         </DDSTagGroup>
       ) : (
@@ -68,7 +93,11 @@ Default.story = {
         tagGroup: boolean('Add tags:', false),
         href: 'https://example.com',
         footer: textNullable('CTA:', 'Learn more'),
-        cardStyles: select('Card style:', ['Outlined card', 'Inverse card', 'none'], 'none'),
+        cardStyles: select(
+          'Card style:',
+          ['Outlined card', 'Inverse card', 'none'],
+          'none'
+        ),
       }),
     },
   },
@@ -79,13 +108,20 @@ const pictogramPlacements = {
   [PICTOGRAM_PLACEMENT.BOTTOM]: PICTOGRAM_PLACEMENT.BOTTOM,
 };
 
-export const Pictogram = args => {
-  const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } = args?.PictogramCard ?? {};
+export const Pictogram = (args) => {
+  const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
+    args?.PictogramCard ?? {};
   return (
     <DDSCard
       pictogramPlacement={pictogramPlacement}
       href={href || undefined}
-      colorScheme={cardStyles === 'Inverse card' ? 'inverse' : cardStyles === 'Outlined card' ? 'light' : ''}
+      colorScheme={
+        cardStyles === 'Inverse card'
+          ? 'inverse'
+          : cardStyles === 'Outlined card'
+          ? 'light'
+          : ''
+      }
       border={cardStyles === 'Outlined card'}>
       <DDSCardHeading>{heading}</DDSCardHeading>
       {copy ? <p>{copy}</p> : ''}
@@ -106,7 +142,11 @@ Pictogram.story = {
   parameters: {
     knobs: {
       PictogramCard: () => {
-        const pictogramPlacement = select('Pictogram position:', pictogramPlacements, pictogramPlacements.top);
+        const pictogramPlacement = select(
+          'Pictogram position:',
+          pictogramPlacements,
+          pictogramPlacements.top
+        );
         const copy = textNullable(
           'Body copy:',
           'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'
@@ -116,24 +156,46 @@ Pictogram.story = {
           heading: textNullable('Heading:', 'Aerospace and defence'),
           copy,
           href: 'https://example.com',
-          cardStyles: select('Card style:', ['Outlined card', 'Inverse card', 'none'], 'none'),
+          cardStyles: select(
+            'Card style:',
+            ['Outlined card', 'Inverse card', 'none'],
+            'none'
+          ),
         };
       },
     },
   },
 };
 
-export const Static = args => {
-  const { image, alt, defaultSrc, outlinedCard, eyebrow, heading, copy, tagGroup, cta } = args?.StaticCard ?? {};
+export const Static = (args) => {
+  const {
+    image,
+    alt,
+    defaultSrc,
+    outlinedCard,
+    eyebrow,
+    heading,
+    copy,
+    tagGroup,
+    cta,
+  } = args?.StaticCard ?? {};
   return (
     <DDSCard colorScheme={outlinedCard ? 'light' : ''} border={outlinedCard}>
-      {image ? <DDSImage slot="image" alt={alt || undefined} defaultSrc={defaultSrc || undefined} /> : ''}
+      {image ? (
+        <DDSImage
+          slot="image"
+          alt={alt || undefined}
+          defaultSrc={defaultSrc || undefined}
+        />
+      ) : (
+        ''
+      )}
       <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
       <DDSCardHeading>{heading}</DDSCardHeading>
       {copy ? <p>{copy}</p> : ''}
       {tagGroup ? (
         <DDSTagGroup>
-          <Tag>Most popular</Tag>
+          <Tag type="green">Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
         </DDSTagGroup>
       ) : (
@@ -166,7 +228,9 @@ Static.story = {
         );
         const tagGroup = boolean('Add tags:', false);
         const cta = boolean('Add CTA:', false);
-        const ctaCopy = cta ? textNullable('CTA copy:', 'Sign up for the trial') : '';
+        const ctaCopy = cta
+          ? textNullable('CTA copy:', 'Sign up for the trial')
+          : '';
         const outlinedCard = boolean('Outlined card:', true);
         return {
           alt: 'Image alt text',
@@ -185,17 +249,21 @@ Static.story = {
   },
 };
 
-export const Logo = args => {
-  const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } = args?.Card ?? {};
+export const Logo = (args) => {
+  const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
+    args?.Card ?? {};
   return (
     <DDSCard border logo href={href || undefined}>
-      <DDSImageLogo slot="image" alt={alt} default-src={defaultSrc}></DDSImageLogo>
+      <DDSImageLogo
+        slot="image"
+        alt={alt}
+        default-src={defaultSrc}></DDSImageLogo>
       {eyebrow ? <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow> : ''}
       {heading ? <DDSCardHeading>{heading}</DDSCardHeading> : ''}
       {copy ? <p>{copy}</p> : ``}
       {tagGroup ? (
         <DDSTagGroup>
-          <Tag>Most popular</Tag>
+          <Tag type="green">Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
         </DDSTagGroup>
       ) : (
@@ -229,10 +297,12 @@ Logo.story = {
 export default {
   title: 'Components/Card',
   decorators: [
-    story => (
+    (story) => (
       <div className="bx--grid">
         <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">{story()}</div>
+          <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
+            {story()}
+          </div>
         </div>
       </div>
     ),

packages/web-components/src/components/card/__stories__/card.stories.ts

@@ -23,7 +23,7 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
 
 const tagGroupContent = html`
   <dds-tag-group>
-    <bx-tag> Most popular </bx-tag>
+    <bx-tag type="green"> Most popular </bx-tag>
     <bx-tag type="purple"> Enterprise </bx-tag>
   </dds-tag-group>
 `;

packages/web-components/src/components/tag-group/__stories__/tag-group.stories.ts

@@ -33,7 +33,7 @@ export const Default = (args) => {
           ? html`
               <dds-tag-link href="https://example.com"> ${title} </dds-tag-link>
             `
-          : html` <bx-tag> ${title} </bx-tag> `
+          : html` <bx-tag type="green"> ${title} </bx-tag> `
       )}
     </dds-tag-group>
   `;

packages/web-components/src/components/tag-group/tag-group.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,12 +43,9 @@ class DDSTagGroup extends StableSelectorMixin(LitElement) {
       )
     );
 
-    // Handle color setting differently depending on Carbon WC or Carbon React
+    // Handle default color setting differently depending on Carbon WC or Carbon React
     carbonTags.forEach((elem) => {
-      if (
-        !(elem as HTMLElement).hasAttribute('type') ||
-        (elem as HTMLElement).getAttribute('type') === 'gray'
-      ) {
+      if (!(elem as HTMLElement).hasAttribute('type')) {
         (elem as HTMLElement).setAttribute('type', 'green');
       }
     });