feat: #242 v5 badge component

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

@@ -0,0 +1,138 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Badge > should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-0 el-badge"
+    data-reversed="false"
+    role="status"
+  >
+    <span
+      class="mocked-styled-1 el-badge-label"
+    >
+      Label
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with icon only 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="label"
+    class="mocked-styled-0 el-badge"
+    data-reversed="false"
+    role="status"
+  >
+    <span
+      class="mocked-styled-2 el-icon"
+      style="font-size: 1rem;"
+    >
+      <svg
+        fill="none"
+        height="1em"
+        role="img"
+        style="font-size: 1rem;"
+        title="Icon image with name add"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 11H13V4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H11V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with icons and label 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-0 el-badge"
+    data-reversed="false"
+    role="status"
+  >
+    <span
+      class="mocked-styled-2 el-icon"
+      style="font-size: 1rem;"
+    >
+      <svg
+        fill="none"
+        height="1em"
+        role="img"
+        style="font-size: 1rem;"
+        title="Icon image with name add"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 11H13V4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H11V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+    <span
+      class="mocked-styled-1 el-badge-label"
+    >
+      Label
+    </span>
+    <span
+      class="mocked-styled-2 el-icon"
+      style="font-size: 1rem;"
+    >
+      <svg
+        fill="none"
+        height="1em"
+        role="img"
+        style="font-size: 1rem;"
+        title="Icon image with name chevronDown"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 16.5041C11.7343 16.5057 11.479 16.4013 11.2904 16.2141L4.29396 9.21411C4.04044 8.96046 3.94142 8.59074 4.03422 8.24424C4.12702 7.89773 4.39753 7.62708 4.74385 7.53424C5.09018 7.44139 5.45971 7.54046 5.71324 7.79411L12 14.0941L18.2868 7.79411C18.6787 7.40199 19.3141 7.40199 19.7061 7.79411C20.098 8.18624 20.098 8.82199 19.7061 9.21411L12.7096 16.2141C12.521 16.4013 12.2657 16.5057 12 16.5041Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with reversed badge 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-0 el-badge"
+    data-reversed="true"
+    role="status"
+  >
+    <span
+      class="mocked-styled-1 el-badge-label"
+    >
+      Label
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with success variant and label 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-0 el-badge"
+    data-reversed="false"
+    data-variant="success"
+    role="status"
+  >
+    <span
+      class="mocked-styled-1 el-badge-label"
+    >
+      Label
+    </span>
+  </div>
+</DocumentFragment>
+`;

src/components/badge/__tests__/badge.test.tsx

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react'
+import { Badge } from '..'
+import { Icon } from '#src/components/icon'
+
+describe('Badge', () => {
+  test('should match snapshot', () => {
+    const { asFragment } = render(<Badge>Label</Badge>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('should match snapshot with reversed badge', () => {
+    const { asFragment } = render(<Badge reversed>Label</Badge>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('should match snapshot with success variant and label', () => {
+    const { asFragment } = render(<Badge variant="success">Label</Badge>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('should match snapshot with icons and label', () => {
+    const { asFragment } = render(
+      <Badge iconLeft={<Icon icon="add" fontSize="1rem" />} iconRight={<Icon icon="chevronDown" fontSize="1rem" />}>
+        Label
+      </Badge>,
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('should match snapshot with icon only', () => {
+    const { asFragment } = render(<Badge iconLeft={<Icon icon="add" fontSize="1rem" />} aria-label="label"></Badge>)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

src/components/badge/badge.mdx

@@ -0,0 +1,47 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as BadgeStories from './badge.stories'
+
+<Meta of={BadgeStories} />
+
+# Badge
+
+<Controls />
+
+Styled badge component with multiple flavours depending on use case.
+
+## Default Usage
+
+A button with no additional props / classes applied
+
+<Canvas of={BadgeStories.Default} />
+
+<RenderHtmlMarkup of={BadgeStories.Default} />
+
+## Badge Reversed
+
+<Canvas of={BadgeStories.BadgeReversed} />
+<RenderHtmlMarkup of={BadgeStories.BadgeReversed} />
+
+## Badge with Label
+
+Badge should always hava a label for accessibility and clear comprehension.
+
+<Canvas of={BadgeStories.BadgeWithLabel} />
+<RenderHtmlMarkup of={BadgeStories.BadgeWithLabel} />
+
+## Badge without Label
+
+A badge without label can be used when not enogh space is available. It should always include a tooltip on hover to provide more context for the icon meaning.
+
+<Canvas of={BadgeStories.BadgeWithoutLabel} />
+<RenderHtmlMarkup of={BadgeStories.BadgeWithoutLabel} />
+
+## Badge Variants
+
+Different variants are supported, to enable badge to be used in different contexts. 
+
+`Badge` only support `neutral`, `success`, `pending`, `warning`, `danger`, `inactive`, `accent_1` and `accent_2`, the `neutral` being the default.
+
+<Canvas of={BadgeStories.BadgeWithVariant} />
+<RenderHtmlMarkup of={BadgeStories.BadgeWithVariant} />