feat: New tag style and stories

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
   "src/**/*.{js,ts,tsx,scss}": [
-    "yarn run lint-fix"
+    "yarn run lint-fix --"
   ]
-}
+}

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

@@ -1,6 +1,6 @@
 import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
 
-import { Tag, Box } from '../..';
+import { Tag, Box, Icon } from '../..';
 
 <Meta title='Data Display/Tag' parameters={{ jest: ['Tag/spec'] }} />
 
@@ -24,6 +24,22 @@ Used for mentions.
   </Story>
 </Canvas>
 
+### Secondary
+
+<Canvas>
+  <Story name='Secondary'>
+    <Box display='inline-flex'><Tag variant='secondary'>john.doe</Tag></Box>
+  </Story>
+</Canvas>
+
+### With icon
+
+<Canvas>
+  <Story name='With Icon'>
+    <Box display='inline-flex'><Tag variant='secondary'><Icon size='x12' mie='x4' name='team-lock'/>john.doe</Tag></Box>
+  </Story>
+</Canvas>
+
 ### Primary
 
 <Canvas>

packages/fuselage/src/components/Tag/index.js

@@ -10,7 +10,7 @@ export function Tag({
   className,
   disabled,
   onClick,
-  variant = 'secondary',
+  variant = 'default',
   ...props
 }) {
   const modifiers = [
@@ -43,5 +43,6 @@ Tag.propTypes = {
     'danger',
     'warning',
     'ghost',
+    'default',
   ]),
 };

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

@@ -2,6 +2,15 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
+$tag-colors-default-color: theme(
+  'tag-colors-default-color',
+  colors.foreground(default)
+);
+$tag-colors-default-background-color: theme(
+  'tag-colors-default-background-color',
+  colors.neutral(400)
+);
+
 $tag-colors-secondary-color: theme(
   'tag-colors-secondary-color',
   colors.foreground(primary)
@@ -76,6 +85,11 @@ $tag-colors-disabled-background-color: theme(
 
   @include typography.use-font-scale(micro);
 
+  &--default {
+    color: $tag-colors-default-color;
+    background-color: $tag-colors-default-background-color;
+  }
+
   &--secondary {
     color: $tag-colors-secondary-color;
     background-color: $tag-colors-secondary-background-color;