Merge pull request #9 from acid-info/topic-implement-tag

Implement tag component

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

@@ -14,6 +14,7 @@ import { ListBoxStyles } from '../ListBox/ListBox.styles'
 import { QuoteStyles } from '../Quote/Quote.styles'
 import { TabItemStyles } from '../TabItem/TabItem.styles'
 import { TabsStyles } from '../Tabs/Tabs.styles'
+import { TagStyles } from '../Tag/Tag.styles'
 import { TextFieldStyles } from '../TextField/TextField.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
@@ -31,6 +32,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    TagStyles,
     TextFieldStyles,
     AutocompleteStyles,
     QuoteStyles,

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-tag--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,49 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { tagClasses } from './Tag.classes'
+
+export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'outlined' | 'filled'
+  label: string
+  icon?: React.ReactNode
+  iconDirection?: 'left' | 'right'
+  disabled?: boolean
+}
+
+export const Tag: React.FC<TagProps> & {
+  classes: typeof tagClasses
+} = ({
+  label,
+  variant = 'outlined',
+  disabled = 'false',
+  icon,
+  iconDirection = 'left',
+  children,
+  ...props
+}) => {
+  const renderItems = () => (
+    <>
+      {iconDirection === 'left' && icon}
+      <Typography className={tagClasses[variant]}>{label}</Typography>
+      {iconDirection === 'right' && icon}
+    </>
+  )
+
+  return (
+    <div
+      aria-label={label}
+      {...props}
+      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

@@ -12,4 +12,5 @@ export * from './components/ListBox'
 export * from './components/Quote'
 export * from './components/TabItem'
 export * from './components/Tabs'
+export * from './components/Tag'
 export * from './components/Theme'