diff --git a/packages/fuselage/src/components/Tag/Tag.stories.tsx b/packages/fuselage/src/components/Tag/Tag.stories.tsx index b3896ac4a8..d6851d724f 100644 --- a/packages/fuselage/src/components/Tag/Tag.stories.tsx +++ b/packages/fuselage/src/components/Tag/Tag.stories.tsx @@ -50,15 +50,6 @@ Secondary.args = { variant: 'secondary', }; -export const WithIcon = Template.bind({}); -WithIcon.args = { - children: ( - <> - 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: , + children: 'Team', +}; + export const Disabled = Template.bind({}); Disabled.args = { disabled: true, diff --git a/packages/fuselage/src/components/Tag/Tag.styles.scss b/packages/fuselage/src/components/Tag/Tag.styles.scss index bbfdb281ec..3134f035e7 100644 --- a/packages/fuselage/src/components/Tag/Tag.styles.scss +++ b/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;