feat: implement tag component

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -12,6 +12,7 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
+import { TagStyles } from '../Tag/Tag.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -26,6 +27,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    TagStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

packages/lsd-react/src/components/Tag/Tag.classes.ts

@@ -0,0 +1,7 @@
+export const tagClasses = {
+  root: `lsd-tag`,
+
+  outlined: `lsd-tag--outlined`,
+  filled: `lsd-tag--filled`,
+  disabled: 'lsd-breadcrumb--disabled',
+}

packages/lsd-react/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/react'
+import { FolderIcon } from '../Icons'
+import { Tag, TagProps } from './Tag'
+
+export default {
+  title: 'Tag',
+  component: Tag,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'filled'],
+      },
+    },
+    iconDirection: {
+      type: {
+        name: 'enum',
+        value: ['left', 'right', 'none'],
+      },
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+        value: [true, false],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<TagProps> = (args) => (
+  <Tag {...args} icon={<FolderIcon color="primary" />} />
+)
+
+Root.args = {
+  variant: 'outlined',
+  label: 'Tag',
+  iconDirection: 'left',
+  disabled: false,
+}

packages/lsd-react/src/components/Tag/Tag.styles.ts

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react'
+import { tagClasses } from './Tag.classes'
+
+export const TagStyles = css`
+  .${tagClasses.root} {
+    width: fit-content;
+    height: 28px;
+    padding: 4px 12px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    border: 1px solid rgb(var(--lsd-icon-primary));
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .${tagClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+    color: rgb(var(--lsd-text-secondary));
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${tagClasses.outlined} {
+    color: rgb(var(--lsd-text-primary));
+  }
+
+  .${tagClasses.disabled} {
+    opacity: 0.3;
+    cursor: initial;
+    pointer-events: none;
+  }
+`

packages/lsd-react/src/components/Tag/Tag.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx'
+import React from 'react'
+import { tagClasses } from './Tag.classes'
+
+export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'outlined' | 'filled'
+  label: string
+  icon?: React.ReactNode
+  iconDirection?: 'left' | 'right' | 'none'
+  disabled?: boolean
+}
+
+export const Tag: React.FC<TagProps> & {
+  classes: typeof tagClasses
+} = ({
+  label,
+  variant = 'outlined',
+  disabled = 'false',
+  icon,
+  iconDirection,
+  children,
+  ...props
+}) => {
+  const renderItems = () => {
+    switch (iconDirection) {
+      case 'left':
+        return (
+          <>
+            {icon}
+            {label}
+          </>
+        )
+      case 'right':
+        return (
+          <>
+            {label}
+            {icon}
+          </>
+        )
+      default:
+        return <>{label}</>
+    }
+  }
+
+  return (
+    <div
+      {...props}
+      aria-label={label}
+      className={clsx(
+        props.className,
+        tagClasses.root,
+        tagClasses[variant],
+        disabled && tagClasses.disabled,
+      )}
+    >
+      {renderItems()}
+    </div>
+  )
+}
+
+Tag.classes = tagClasses

packages/lsd-react/src/components/Tag/index.ts

@@ -0,0 +1 @@
+export * from './Tag'

packages/lsd-react/src/index.ts

@@ -9,3 +9,4 @@ export * from './components/Tabs'
 export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
+export * from './components/Tag'