feat: Tags and Badges

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Tag } from '../..';
+
+export function Badge(props) {
+  return <Tag round {...props} />;
+}
+
+Badge.propTypes = {
+  variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
+  disabled: PropTypes.bool,
+};

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

@@ -0,0 +1,41 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Badge } from '../..';
+
+<Meta title='Tags & Badges|Badges' parameters={{ jest: ['Button/spec'] }} />
+
+# Badge
+
+Used for mentions.
+
+<Preview>
+  <Story name='Default'>
+    <Badge>99</Badge>
+  </Story>
+</Preview>
+
+<Props of={Badge} />
+
+### Primary
+
+<Preview>
+  <Story name='Primary'>
+    <Badge variant='primary'>99</Badge>
+  </Story>
+</Preview>
+
+### Danger
+
+<Preview>
+  <Story name='Danger'>
+    <Badge variant='danger'>99</Badge>
+  </Story>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <Story name='Disabled'>
+    <Badge disabled>99</Badge>
+  </Story>
+</Preview>

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Box } from '../..';
+
+export function Tag({
+  variant = 'secondary',
+  disabled,
+  round,
+  onClick,
+  ...props
+}) {
+  return <Box
+    is='div'
+    componentClassName='rcx-tag'
+    mod-secondary={variant === 'secondary'}
+    mod-primary={variant === 'primary'}
+    mod-danger={variant === 'danger'}
+    mod-disabled={!!disabled}
+    mod-round={!!round}
+    mod-clickable={!!onClick}
+    onClick={onClick}
+    {...props}
+  />;
+}
+
+Tag.propTypes = {
+  variant: PropTypes.oneOf(['secondary', 'primary', 'danger']),
+  round: PropTypes.bool,
+  disabled: PropTypes.bool,
+};

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

@@ -0,0 +1,49 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+
+import { Tag } from '../..';
+
+<Meta title='Tags & Badges|Tags' parameters={{ jest: ['Button/spec'] }} />
+
+# Tag
+
+Used for mentions.
+
+<Preview>
+  <Story name='Default'>
+    <Tag>john.doe</Tag>
+  </Story>
+</Preview>
+
+<Props of={Tag} />
+
+### With Pointer Cursor
+
+<Preview>
+  <Story name='Pointer'>
+    <Tag onClick={()=>{}}>john.doe</Tag>
+  </Story>
+</Preview>
+
+### Primary
+
+<Preview>
+  <Story name='Primary'>
+    <Tag variant='primary'>john.doe</Tag>
+  </Story>
+</Preview>
+
+### Danger
+
+<Preview>
+  <Story name='Danger'>
+    <Tag variant='danger'>john.doe</Tag>
+  </Story>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <Story name='Disabled'>
+    <Tag disabled>john.doe</Tag>
+  </Story>
+</Preview>

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

@@ -0,0 +1,47 @@
+.rcx-tag {
+  display: inline-block;
+
+  padding-block: $spaces-x2;
+
+  padding-inline: $spaces-x4;
+
+  text-decoration: none;
+
+  word-break: keep-all;
+
+  border-radius: $spaces-x4;
+
+  @include use-text-style(micro);
+
+  &--secondary {
+    color: $colors-b500;
+    background-color: $colors-b100;
+  }
+
+  &--primary {
+    color: $colors-white;
+    background-color: $colors-b500;
+  }
+
+  &--danger {
+    color: $colors-white;
+    background-color: $colors-r500;
+  }
+
+  &--disabled {
+    color: $colors-n600;
+    background-color: $colors-n400;
+  }
+
+  &--round {
+    overflow: hidden;
+
+    text-align: center;
+
+    border-radius: $spaces-x20;
+  }
+
+  &--clickable {
+    @include clickable();
+  }
+}

packages/fuselage/src/components/index.js

@@ -39,3 +39,5 @@ export * from './Select';
 export * from './Tooltip';
 export * from './Modal';
 export * from './Throbber';
+export * from './Tag';
+export * from './Badge';

packages/fuselage/src/components/index.scss

@@ -31,3 +31,4 @@
 @import './Tooltip/styles.scss';
 @import './Modal/styles.scss';
 @import './Throbber/styles.scss';
+@import './Tag/styles.scss';