feat(fuselage): Tag Featured Variant (#935)

Author: dougfabris

packages/fuselage/src/components/Tag/Tag.stories.tsx

@@ -50,15 +50,6 @@ Secondary.args = {
   variant: 'secondary',
 };
 
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  children: (
-    <>
-      <Icon size='x12' mie='x4' name='team-lock' /> Team
-    </>
-  ),
-};
-
 export const _Danger = Template.bind({});
 _Danger.args = {
   variant: 'danger',
@@ -73,6 +64,17 @@ Warning.args = {
   variant: 'warning',
 };
 
+export const Featured = Template.bind({});
+Featured.args = {
+  variant: 'featured',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  icon: <Icon size='x12' mie='x4' name='team-lock' />,
+  children: 'Team',
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

packages/fuselage/src/components/Tag/Tag.styles.scss

@@ -84,6 +84,19 @@ $tag-colors-warning-hover-background-color: theme(
   colors.button(warning-hover)
 );
 
+$tag-colors-featured-color: theme(
+  'tag-colors-featured-color',
+  colors.button(on-primary)
+);
+$tag-colors-featured-background-color: theme(
+  'tag-colors-featured-background-color',
+  colors.surface(featured)
+);
+$tag-colors-featured-hover-background-color: theme(
+  'tag-colors-featured-hover-background-color',
+  colors.surface(featured-hover)
+);
+
 $tag-colors-disabled-color: theme(
   'tag-colors-disabled-color',
   colors.font(secondary-info)
@@ -185,6 +198,18 @@ $tag-colors-disabled-background-color: theme(
     }
   }
 
+  &--featured {
+    color: $tag-colors-featured-color;
+    background-color: $tag-colors-featured-background-color;
+
+    &.rcx-tag--clickable {
+      &:hover {
+        color: $tag-colors-featured-color;
+        background-color: $tag-colors-featured-hover-background-color;
+      }
+    }
+  }
+
   &--disabled {
     cursor: not-allowed;