feat: #241 init v5 new Tag component (#270)

* feat: init v5 tag component

Author: nurm717123

src/components/deprecated-tag/tag.mdx

@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
-import { Tag } from '.'
 import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
 import * as TagStories from './tag.stories'
 

src/components/deprecated-tag/tag.stories.tsx

@@ -1,7 +1,7 @@
 import { DeprecatedTag, DeprecatedTagGroup } from '.'
 
 export default {
-  title: 'Tag',
+  title: 'DeprecatedTag',
   component: DeprecatedTag,
 }
 

src/components/status-indicator/__tests__/status-indicator.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import { StatusIndicator } from '../status-indicator'
+import { StatusIndicator } from '..'
 
 describe('StatusIndicator', () => {
   it('should render as expected', () => {

src/components/tag/__tests__/__snapshots__/tag.test.tsx.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tag > should render standalone tag properly and match snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="mocked-styled-0 el-standalone-tag"
+  >
+    Tag
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Tag > should render tag group properly and match snapshot 1`] = `
+<DocumentFragment>
+  <ul
+    class="mocked-styled-2 el-tag-group"
+  >
+    <li
+      class="mocked-styled-1 el-tag"
+    >
+      Tag
+    </li>
+  </ul>
+</DocumentFragment>
+`;

src/components/tag/__tests__/tag.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react'
+import { Tag, TagGroup } from '..'
+
+describe('Tag', () => {
+  it('should render tag group properly and match snapshot', () => {
+    const { asFragment } = render(
+      <TagGroup>
+        <Tag>Tag</Tag>
+      </TagGroup>,
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it('should render standalone tag properly and match snapshot', () => {
+    const { asFragment } = render(<Tag isStandalone>Tag</Tag>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

src/components/tag/index.ts

@@ -0,0 +1,2 @@
+export * from './tag'
+export * from './styles'

src/components/tag/styles.tsx

@@ -0,0 +1,32 @@
+import { styled } from '@linaria/react'
+
+const baseTagStyle = `
+  width: fit-content;
+  padding: var(--spacing-half) var(--spacing-3);
+  border-radius: var(--corner-xl);
+  background: var(--fill-default-light);
+  color: var(--text-tertiary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-xs);
+  letter-spacing: var(--letter-spacing-xs);
+
+  display: list-item;
+  &::marker {
+    content: '';
+  }
+`
+
+export const ElStandaloneTag = styled.span`
+  ${baseTagStyle}
+`
+export const ElTag = styled.li`
+  ${baseTagStyle}
+`
+
+export const ElTagGroup = styled.ul`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+`

src/components/tag/tag.mdx

@@ -0,0 +1,25 @@
+import { Meta, Canvas, Controls, Description } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as TagStories from './tag.stories'
+
+<Meta of={TagStories} />
+
+# Tag / Tag Group
+
+<Description of={TagStories.Default} />
+
+<Controls />
+
+## Default
+
+<Canvas of={TagStories.Default} />
+
+<RenderHtmlMarkup of={TagStories.Default} />
+
+## Tag Group
+
+<Description of={TagStories.TagGroup} />
+
+<Canvas of={TagStories.TagGroup} />
+
+<RenderHtmlMarkup of={TagStories.TagGroup} />

src/components/tag/tag.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tag, TagGroup as TagGroupComponent } from './tag'
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+  args: {
+    children: 'Tag',
+    isStandalone: false,
+  },
+  argTypes: {
+    isStandalone: {
+      control: 'boolean',
+      description: 'whether the component will be rendered as `span` or `li`',
+    },
+  },
+} as Meta<typeof Tag>
+
+type Story = StoryObj<typeof Tag>
+
+/**
+ * The `Tag` component is used to label, categorise or organise items using keywords.
+ */
+export const Default: Story = {
+  args: {
+    isStandalone: true,
+  },
+}
+
+/**
+ * The `TagGroup` Component is useful to render multiple `Tag`
+ */
+export const TagGroup: Story = {
+  render: () => (
+    <TagGroupComponent>
+      <Tag>Tag</Tag>
+      <Tag>Tag</Tag>
+      <Tag>Tag</Tag>
+      <Tag>Tag</Tag>
+      <Tag>Tag</Tag>
+    </TagGroupComponent>
+  ),
+}

src/components/tag/tag.tsx

@@ -0,0 +1,11 @@
+import { ElStandaloneTag, ElTag, ElTagGroup } from './styles'
+
+export interface TagProps extends React.HTMLAttributes<HTMLLIElement | HTMLSpanElement> {
+  isStandalone?: boolean
+}
+
+export const Tag: React.FC<TagProps> = ({ children, isStandalone = false, ...props }) => {
+  return isStandalone ? <ElStandaloneTag {...props}>{children}</ElStandaloneTag> : <ElTag {...props}>{children}</ElTag>
+}
+
+export const TagGroup = ElTagGroup

src/index.ts

@@ -47,6 +47,7 @@ export * from './components/mobile-controls'
 export * from './components/drawer'
 export * from './components/accordion'
 export * from './components/deprecated-tag'
+export * from './components/tag'
 export * from './components/deprecated-badge'
 export * from './components/chip'
 export * from './components/tile'