feat: #242 v5 badge component (#273)

* feat: #242 created v4 badge component * feat: #242 fixed es lint issue * [Ignore] pushing an extra line to push index.ts file * Removing an extra line to push index.ts file * [Ignore] pushing an extra line to push index.ts file * Removing an extra line to push index.ts file * [Ignore] push index.ts file * feat: #242 updated v5 badge component with the PR review * feat: #242 removed extra export from the styles * feat: #242 updated PR with the PR feedback * feat: #242 updated snapshot test * feat: #242 forced ElIcon to have a color inherit * feat: #242 wrapped icon component with span to pass the icon color also updated storie for color variant * feat: #242 updated test --------- Co-authored-by: Danish Ali <danish.ali@agentbox.com.au>
reapit · Jan 23, 2025 · 79a2199 · 79a2199
1 parent a9c71e2
commit 79a2199
Show file tree

Hide file tree

Showing 7 changed files with 596 additions and 0 deletions.
diff --git a/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap
@@ -0,0 +1,150 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Badge > should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-badge"
+    data-is-reversed="false"
+    role="status"
+  >
+    <span
+      class="mocked-styled-2 el-badge-label"
+    >
+      Label
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with icon only 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="label"
+    class="mocked-styled-1 el-badge"
+    data-is-reversed="false"
+    role="status"
+  >
+    <span
+      class="mocked-styled-0 el-badge-icon"
+    >
+      <span
+        class="mocked-styled-3 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>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with icons and label 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-badge"
+    data-is-reversed="false"
+    role="status"
+  >
+    <span
+      class="mocked-styled-0 el-badge-icon"
+    >
+      <span
+        class="mocked-styled-3 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>
+    <span
+      class="mocked-styled-2 el-badge-label"
+    >
+      Label
+    </span>
+    <span
+      class="mocked-styled-0 el-badge-icon"
+    >
+      <span
+        class="mocked-styled-3 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>
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with reversed badge 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-badge"
+    data-is-reversed="true"
+    role="status"
+  >
+    <span
+      class="mocked-styled-2 el-badge-label"
+    >
+      Label
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Badge > should match snapshot with success variant and label 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-badge"
+    data-is-reversed="false"
+    data-variant="success"
+    role="status"
+  >
+    <span
+      class="mocked-styled-2 el-badge-label"
+    >
+      Label
+    </span>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/badge/__tests__/badge.test.tsx b/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 isReversed>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()
+  })
+})
diff --git a/src/components/badge/badge.mdx b/src/components/badge/badge.mdx
@@ -0,0 +1,51 @@
+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 badge with no additional props / classes applied
+
+<Canvas of={BadgeStories.Default} />
+
+<RenderHtmlMarkup of={BadgeStories.Default} />
+
+## Badge Reversed
+
+In order to reverse a badge you will just need to provide a prop called `isReversed`. If you have icon left and icon right with the badge it will be reversed as well.
+
+<Canvas of={BadgeStories.BadgeReversed} />
+<RenderHtmlMarkup of={BadgeStories.BadgeReversed} />
+
+## Badge with Label
+
+Badge can hava a label with icons for with icons.
+
+<Canvas of={BadgeStories.BadgeWithLabel} />
+<RenderHtmlMarkup of={BadgeStories.BadgeWithLabel} />
+
+## Badge with Icon
+
+A badge can be with just an icon for accessibility you will need to add an `aria-label` with it. It should be wrapped with a tooltip component to provide more context for the icon meaning.
+
+<Canvas of={BadgeStories.BadgeWithIcon} />
+<RenderHtmlMarkup of={BadgeStories.BadgeWithIcon} />
+
+## 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` is the default variant for the badge component.
+
+<Canvas of={BadgeStories.BadgeVariant} />
+<RenderHtmlMarkup of={BadgeStories.BadgeVariant} />
diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx
@@ -0,0 +1,141 @@
+import { Meta } from '@storybook/react'
+import { Badge } from './badge'
+import { Icon, IconNames } from '../icon'
+import { DeprecatedToolTip } from './../deprecated-tool-tip' // To be updated to v5 tooltip once #235 is merged
+
+const ICON_OPTIONS: IconNames[] = ['star', 'add', 'chevronDown', 'chevronLeft', 'chevronRight']
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['neutral', 'success', 'pending', 'warning', 'danger', 'inactive', 'accent_1', 'accent_2'],
+      description: 'Defines the badge style variant.',
+    },
+    iconLeft: {
+      control: 'select',
+      options: ICON_OPTIONS,
+      description: 'The icon displayed on the left side of the badge.',
+      mapping: ICON_OPTIONS.reduce((acc, iconName) => {
+        acc[iconName] = <Icon icon={iconName} fontSize="1rem" />
+        return acc
+      }, {}),
+    },
+    iconRight: {
+      control: 'select',
+      options: ICON_OPTIONS,
+      description: 'The icon displayed on the right side of the badge.',
+      mapping: ICON_OPTIONS.reduce((acc, iconName) => {
+        acc[iconName] = <Icon icon={iconName} fontSize="1rem" />
+        return acc
+      }, {}),
+    },
+    isReversed: { control: 'boolean', description: 'Reverse the badge if set to true.' },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible label for badge',
+    },
+    className: {
+      control: 'text',
+      description: 'CSS class for additional styling',
+    },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    children: 'Badge',
+  },
+}
+
+export const BadgeReversed = {
+  args: {
+    children: 'Label',
+    isReversed: true,
+    iconLeft: <Icon icon="chevronLeft" fontSize="1rem" />,
+    iconRight: <Icon icon="chevronRight" fontSize="1rem" />,
+  },
+}
+
+export const BadgeWithLabel = {
+  args: {
+    children: 'Label',
+    iconLeft: <Icon icon="chevronLeft" fontSize="1rem" />,
+    iconRight: <Icon icon="chevronRight" fontSize="1rem" />,
+  },
+}
+
+export const BadgeWithIcon = {
+  args: {
+    'aria-label': 'Label',
+    iconLeft: <Icon icon="star" fontSize="1rem" />,
+  },
+  render: (props) => (
+    <DeprecatedToolTip tip="Star">
+      <Badge {...props}></Badge>
+    </DeprecatedToolTip>
+  ), // To be updated to v5 tooltip once #235 is merged
+}
+
+export const BadgeVariant = {
+  args: {
+    children: 'Label',
+    iconLeft: <Icon icon="add" fontSize="1rem" />,
+    iconRight: <Icon icon="chevronDown" fontSize="1rem" />,
+  },
+  // Adding decorator into the story to display multiple stories.
+  decorators: [
+    (Story: any) => (
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: (props: any) => (
+    <>
+      <Badge {...props}>{props.children}</Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'success'}>
+        {props.children}
+      </Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'pending'}>
+        {props.children}
+      </Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'warning'}>
+        {props.children}
+      </Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'danger'}>
+        {props.children}
+      </Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'inactive'}>
+        {props.children}
+      </Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'accent_1'}>
+        {props.children}
+      </Badge>
+      <Badge {...props} variant={props.variant ? props.variant : 'accent_2'}>
+        {props.children}
+      </Badge>
+    </>
+  ),
+  // Adding the parameters to display only one varient code in the source
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<Badge variant='success'>
+  Label
+</Badge>
+        `,
+      },
+    },
+  },
+}