feat(fuselage): Featured Tag variant (#922)

* new: featured tag variant

* review

* fix: tweaks

Co-authored-by: juliajforesti <juliajforesti@gmail.com>

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,16 @@ 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='x2' name='team-lock' />,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

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

@@ -12,11 +12,11 @@ $tag-colors-default-hover-color: theme(
 );
 $tag-colors-default-background-color: theme(
   'tag-colors-default-background-color',
-  colors.surface(neutral)
+  colors.tag(default)
 );
 $tag-colors-default-hover-background-color: theme(
   'tag-colors-default-hover-background-color',
-  colors.button(secondary-hover)
+  colors.tag(default-hover)
 );
 
 $tag-colors-primary-color: theme(
@@ -25,11 +25,11 @@ $tag-colors-primary-color: theme(
 );
 $tag-colors-primary-background-color: theme(
   'tag-colors-primary-background-color',
-  colors.button(primary-default)
+  colors.tag(primary)
 );
 $tag-colors-primary-hover-background-color: theme(
   'tag-colors-primary-hover-background-color',
-  colors.button(primary-hover)
+  colors.tag(primary-hover)
 );
 
 $tag-colors-secondary-color: theme(
@@ -38,11 +38,11 @@ $tag-colors-secondary-color: theme(
 );
 $tag-colors-secondary-background-color: theme(
   'tag-colors-secondary-background-color',
-  colors.button(secondary-default)
+  colors.tag(secondary)
 );
 $tag-colors-secondary-hover-background-color: theme(
   'tag-colors-secondary-hover-background-color',
-  colors.button(secondary-hover)
+  colors.tag(secondary-hover)
 );
 
 $tag-colors-danger-color: theme(
@@ -51,11 +51,11 @@ $tag-colors-danger-color: theme(
 );
 $tag-colors-danger-background-color: theme(
   'tag-colors-danger-background-color',
-  colors.button(danger-default)
+  colors.tag(danger)
 );
 $tag-colors-danger-hover-background-color: theme(
   'tag-colors-danger-hover-background-color',
-  colors.button(danger-hover)
+  colors.tag(danger-hover)
 );
 
 $tag-colors-secondary-danger-color: theme(
@@ -64,11 +64,11 @@ $tag-colors-secondary-danger-color: theme(
 );
 $tag-colors-secondary-danger-background-color: theme(
   'tag-colors-secondary-danger-background-color',
-  colors.button(secondary-danger-default)
+  colors.tag(secondary)
 );
 $tag-colors-secondary-danger-hover-background-color: theme(
   'tag-colors-secondary-danger-hover-background-color',
-  colors.button(secondary-danger-hover)
+  colors.tag(secondary-hover)
 );
 
 $tag-colors-warning-color: theme(
@@ -77,11 +77,24 @@ $tag-colors-warning-color: theme(
 );
 $tag-colors-warning-background-color: theme(
   'tag-colors-warning-background-color',
-  colors.button(warning-default)
+  colors.tag(warning)
 );
 $tag-colors-warning-hover-background-color: theme(
   'tag-colors-warning-hover-background-color',
-  colors.button(warning-hover)
+  colors.tag(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.tag(featured)
+);
+$tag-colors-featured-hover-background-color: theme(
+  'tag-colors-featured-hover-background-color',
+  colors.tag(featured-hover)
 );
 
 $tag-colors-disabled-color: theme(
@@ -116,6 +129,15 @@ $tag-colors-disabled-background-color: theme(
 
   @include typography.use-font-scale(micro);
 
+  &__inner {
+    overflow: hidden;
+
+    min-width: 0;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &--primary {
     color: $tag-colors-primary-color;
     background-color: $tag-colors-primary-background-color;
@@ -176,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;
 

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

@@ -1,13 +1,20 @@
-import type { AllHTMLAttributes } from 'react';
+import type { AllHTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
 import { prependClassName } from '../../helpers/prependClassName';
 
 type TagProps = {
   medium?: boolean;
   large?: boolean;
-  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'secondary-danger';
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'warning'
+    | 'secondary-danger'
+    | 'featured';
   disabled?: boolean;
+  icon?: ReactNode;
 } & AllHTMLAttributes<HTMLSpanElement>;
 
 export const Tag = ({
@@ -17,6 +24,8 @@ export const Tag = ({
   disabled,
   onClick,
   variant,
+  children,
+  icon,
   ...props
 }: TagProps) => {
   const modifiers = [
@@ -35,6 +44,9 @@ export const Tag = ({
       className={prependClassName(className as string, `rcx-tag ${modifiers}`)}
       onClick={onClick}
       {...props}
-    />
+    >
+      {icon}
+      <span className='rcx-tag__inner'>{children}</span>
+    </span>
   );
 };

packages/fuselage/src/styles/colors.scss

@@ -312,3 +312,23 @@ $-elevation-level: (
 @function elevation($level) {
   @return map.get($-elevation-level, $level);
 }
+
+$-tag-backgrounds: (
+  default: neutral(400),
+  default-hover: neutral(500),
+  primary: primary(500),
+  primary-hover: primary(600),
+  secondary: neutral(400),
+  secondary-hover: neutral(500),
+  danger: danger(500),
+  danger-hover: danger(600),
+  warning: warning(400),
+  warning-hover: warning(500),
+  featured: service-2(700),
+  featured-hover: service-2(800),
+);
+
+@function tag($type) {
+  $color: map.get($-tag-backgrounds, $type);
+  @return var(--rcx-color-tag-background-#{$type}, $color);
+}