uikit-react-public 0.24.4 → 0.24.5

package/lib/components/Badge/Badge.stories.tsx

@@ -1,5 +1,21 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/css';
 import Badge from './Badge';
+import { type BadgeVariant } from './Badge';
+
+const VARIANTS: BadgeVariant[] = [
+  'neutral',
+  'neutral-subtle',
+  'critical',
+  'critical-subtle',
+  'caution',
+  'caution-subtle',
+  'success',
+  'success-subtle',
+  'warning',
+  'warning-subtle',
+  'disabled',
+];
 
 const meta = {
   title: 'Components/Badge',
@@ -7,8 +23,25 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    variant: {
+      options: VARIANTS,
+      control: { type: 'select' },
+    },
+    size: {
+      options: ['medium', 'large'],
+      control: { type: 'radio' },
+    },
+    icon: { control: { type: 'boolean' } },
+    statusIndicator: { control: { type: 'boolean' } },
+    testId: { control: { type: 'text' } },
+    className: { control: false },
+    children: { control: { type: 'text' } },
+  },
   args: {
     children: 'Badge',
+    variant: 'neutral',
+    size: 'medium',
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Badge>;
@@ -17,3 +50,83 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const Large: Story = {
+  args: { size: 'large' },
+};
+
+export const WithIcon: Story = {
+  args: { variant: 'success', icon: true },
+};
+
+export const WithStatusIndicator: Story = {
+  args: { statusIndicator: true },
+};
+
+const rowStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+
+const labelStyle = css`
+  font-family: sans-serif;
+  font-size: 12px;
+  width: 140px;
+  flex-shrink: 0;
+`;
+
+export const AllVariants: Story = {
+  name: 'All variants',
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div>
+      {VARIANTS.map((variant) => (
+        <div
+          key={variant}
+          className={rowStyle}
+        >
+          <span className={labelStyle}>{variant}</span>
+          <Badge variant={variant}>{variant}</Badge>
+          <Badge
+            variant={variant}
+            icon
+          >
+            {variant}
+          </Badge>
+          <Badge
+            variant={variant}
+            statusIndicator
+          >
+            {variant}
+          </Badge>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: { layout: 'padded' },
+  render: () => (
+    <div className={rowStyle}>
+      <Badge size='medium'>Medium</Badge>
+      <Badge size='large'>Large</Badge>
+      <Badge
+        size='medium'
+        icon
+        variant='success'
+      >
+        Medium icon
+      </Badge>
+      <Badge
+        size='large'
+        icon
+        variant='success'
+      >
+        Large icon
+      </Badge>
+    </div>
+  ),
+};

package/lib/components/Badge/Badge.tsx

@@ -1,47 +1,206 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+import { Icon } from '../';
+import type { SpecificIconProps } from '../Icon/Icon';
+import type { ThemeType } from '../../theme';
+
+export type BadgeVariant =
+  | 'neutral'
+  | 'neutral-subtle'
+  | 'critical'
+  | 'critical-subtle'
+  | 'caution'
+  | 'caution-subtle'
+  | 'success'
+  | 'success-subtle'
+  | 'warning'
+  | 'warning-subtle'
+  | 'disabled';
+
+export const VARIANT_ICON_MAP = {
+  neutral: Icon.Info,
+  'neutral-subtle': Icon.Info,
+  critical: Icon.XCircle,
+  'critical-subtle': Icon.XCircle,
+  caution: Icon.AlertCircle,
+  'caution-subtle': Icon.AlertCircle,
+  success: Icon.CheckCircle,
+  'success-subtle': Icon.CheckCircle,
+  warning: Icon.AlertTriangle,
+  'warning-subtle': Icon.AlertTriangle,
+  disabled: null,
+} satisfies Record<BadgeVariant, React.ComponentType<SpecificIconProps> | null>;
+
+export interface BadgeVariantStyle {
+  color: string;
+  backgroundColor: string;
+  border?: string;
+}
+
+export const getBadgeVariantColours = (
+  theme: ThemeType
+): Record<BadgeVariant, BadgeVariantStyle> => ({
+  neutral: {
+    color: theme.colour.text.default,
+    backgroundColor: 'transparent',
+    border: `1px solid ${theme.colour.border.primary}`,
+  },
+  'neutral-subtle': {
+    color: theme.colour.text.default,
+    backgroundColor: theme.colour.surface.secondary,
+  },
+  critical: {
+    color: theme.colour.text.inverse,
+    backgroundColor: theme.colour.fill.critical,
+  },
+  'critical-subtle': {
+    color: theme.colour.text.critical,
+    backgroundColor: theme.primitiveColour.red['02'].$value.hex,
+  },
+  caution: {
+    color: theme.primitiveColour.yellow['14'].$value.hex,
+    backgroundColor: theme.primitiveColour.yellow['08'].$value.hex,
+  },
+  'caution-subtle': {
+    color: theme.primitiveColour.yellow['12'].$value.hex,
+    backgroundColor: theme.primitiveColour.yellow['05'].$value.hex,
+  },
+  success: {
+    color: theme.colour.text.inverse,
+    backgroundColor: theme.colour.fill.success,
+  },
+  'success-subtle': {
+    color: theme.primitiveColour.green['11'].$value.hex,
+    backgroundColor: theme.primitiveColour.green['02'].$value.hex,
+  },
+  warning: {
+    color: theme.colour.text.inverse,
+    backgroundColor: theme.primitiveColour.orange['11'].$value.hex,
+  },
+  'warning-subtle': {
+    color: theme.primitiveColour.orange['13'].$value.hex,
+    backgroundColor: theme.primitiveColour.orange['03'].$value.hex,
+  },
+  disabled: {
+    color: theme.colour.text.disabled,
+    backgroundColor: theme.colour.fill.disabled,
+  },
+});
+
+export type BadgeIndicator =
+  | { statusIndicator?: boolean; icon?: never }
+  | { icon?: boolean; statusIndicator?: never };
+
+export interface BadgeBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
   testId?: string;
   className?: string;
+  variant?: BadgeVariant;
+  size?: 'medium' | 'large';
 }
 
+export type BadgeProps = BadgeBaseProps & BadgeIndicator;
+
 const NAME = 'ucl-uikit-badge';
 
 const Badge = ({
   testId = NAME,
   className,
+  variant = 'neutral',
+  size = 'medium',
+  statusIndicator,
+  icon,
   children,
   ...props
 }: BadgeProps) => {
   const [theme] = useTheme();
 
+  const badgeTypography =
+    size === 'large' ? theme.typography.body.sm : theme.typography.body.xs;
+
+  const iconSize = size === 'large' ? 16 : 14;
+
+  const variantColours = getBadgeVariantColours(theme);
+
+  const { color, backgroundColor, border } = variantColours[variant];
+
   const baseStyle = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    height: 24px;
-    padding: ${theme.padding.p8};
-    color: ${theme.color.text.secondary};
-    background-color: #e4e4e4; // TODO: Add design token
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
-    font-weight: ${theme.font.weight.regular};
-    border-radius: ${theme.radius.r4};
+    height: ${size === 'large' ? '26px' : '22px'};
+    padding: 0 ${theme.padding.p8};
+
+    color: ${color};
+    background-color: ${backgroundColor};
+    border: ${border ?? 'none'};
+
+    font-family: ${badgeTypography.fontFamily};
+    font-feature-settings: ${badgeTypography.fontSettings};
+    font-size: ${badgeTypography.fontSize}px;
+    font-weight: ${badgeTypography.fontWeight};
+    line-height: ${badgeTypography.lineHeight}%;
+
+    border-radius: 100px;
     white-space: nowrap;
+    gap: 4px;
+    vertical-align: middle;
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const dotBaseStyle = css`
+    display: block;
+    border-radius: 50%;
+    background-color: currentColor;
+    flex-shrink: 0;
+  `;
+
+  const dotStyle = cx(
+    dotBaseStyle,
+    size === 'medium' &&
+      css`
+        width: 7px;
+        height: 7px;
+        margin: 0 3.5px;
+      `,
+    size === 'large' &&
+      css`
+        width: 8px;
+        height: 8px;
+        margin: 0 4px;
+      `
+  );
+
+  const iconStyle = css`
+    display: block;
+    flex-shrink: 0;
   `;
 
-  const style = cx(baseStyle, NAME, className);
+  const VariantIcon = VARIANT_ICON_MAP[variant];
 
   return (
-    <div
+    <span
       data-testid={testId}
       className={style}
       {...props}
     >
+      {statusIndicator && (
+        <span
+          className={dotStyle}
+          aria-hidden='true'
+        />
+      )}
+      {icon && VariantIcon && (
+        <VariantIcon
+          size={iconSize}
+          className={iconStyle}
+          aria-hidden='true'
+        />
+      )}
       {children}
-    </div>
+    </span>
   );
 };
 

package/lib/components/Badge/__tests__/Badge.test.tsx

@@ -0,0 +1,122 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Badge from '../Badge';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
+describe('Badge', () => {
+  test('snapshot: default', () => {
+    const { container } = wrap(<Badge>Default</Badge>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: size=large', () => {
+    const { container } = wrap(<Badge size='large'>Large</Badge>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=success with icon', () => {
+    const { container } = wrap(
+      <Badge
+        variant='success'
+        icon
+      >
+        Success
+      </Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=critical with icon', () => {
+    const { container } = wrap(
+      <Badge
+        variant='critical'
+        icon
+      >
+        Critical
+      </Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=warning with icon', () => {
+    const { container } = wrap(
+      <Badge
+        variant='warning'
+        icon
+      >
+        Warning
+      </Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: statusIndicator', () => {
+    const { container } = wrap(<Badge statusIndicator>Status</Badge>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=disabled', () => {
+    const { container } = wrap(<Badge variant='disabled'>Disabled</Badge>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  // Functional tests
+
+  test('renders children', () => {
+    const { getByText } = wrap(<Badge>Hello</Badge>);
+    expect(getByText('Hello')).toBeTruthy();
+  });
+
+  test('applies custom testId', () => {
+    const { getByTestId } = wrap(<Badge testId='my-badge'>Text</Badge>);
+    expect(getByTestId('my-badge')).toBeTruthy();
+  });
+
+  test('applies custom className', () => {
+    const { getByTestId } = wrap(<Badge className='custom-class'>Text</Badge>);
+    expect(getByTestId('ucl-uikit-badge').classList).toContain('custom-class');
+  });
+
+  test('renders as a span element', () => {
+    const { getByTestId } = wrap(<Badge>Text</Badge>);
+    expect(getByTestId('ucl-uikit-badge').tagName).toBe('SPAN');
+  });
+
+  test('renders status indicator element when statusIndicator=true', () => {
+    const { container } = wrap(<Badge statusIndicator>Text</Badge>);
+    const indicator = container.querySelector('[aria-hidden="true"]');
+    expect(indicator).toBeTruthy();
+  });
+
+  test('does not render icon when variant has no icon mapping', () => {
+    const { container } = wrap(
+      <Badge
+        variant='disabled'
+        icon
+      >
+        Text
+      </Badge>
+    );
+    expect(container.querySelector('svg')).toBeNull();
+  });
+
+  test('renders icon when variant has an icon mapping and icon=true', () => {
+    const { container } = wrap(
+      <Badge
+        variant='success'
+        icon
+      >
+        Text
+      </Badge>
+    );
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  test('does not render icon when icon prop is not set', () => {
+    const { container } = wrap(<Badge variant='success'>Text</Badge>);
+    expect(container.querySelector('svg')).toBeNull();
+  });
+});

package/lib/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,133 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Badge > snapshot: default 1`] = `
+<span
+  class="ucl-uikit-badge css-b76pju"
+  data-testid="ucl-uikit-badge"
+>
+  Default
+</span>
+`;
+
+exports[`Badge > snapshot: size=large 1`] = `
+<span
+  class="ucl-uikit-badge css-6n39yj"
+  data-testid="ucl-uikit-badge"
+>
+  Large
+</span>
+`;
+
+exports[`Badge > snapshot: statusIndicator 1`] = `
+<span
+  class="ucl-uikit-badge css-b76pju"
+  data-testid="ucl-uikit-badge"
+>
+  <span
+    aria-hidden="true"
+    class="css-170i9e3"
+  />
+  Status
+</span>
+`;
+
+exports[`Badge > snapshot: variant=critical with icon 1`] = `
+<span
+  class="ucl-uikit-badge css-1oxz1ke"
+  data-testid="ucl-uikit-badge"
+>
+  <svg
+    aria-hidden="true"
+    class="ucl-uikit-icon css-y1s4m2"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="14"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <path
+      d="m15 9-6 6m0-6 6 6"
+    />
+  </svg>
+  Critical
+</span>
+`;
+
+exports[`Badge > snapshot: variant=disabled 1`] = `
+<span
+  class="ucl-uikit-badge css-psg0dk"
+  data-testid="ucl-uikit-badge"
+>
+  Disabled
+</span>
+`;
+
+exports[`Badge > snapshot: variant=success with icon 1`] = `
+<span
+  class="ucl-uikit-badge css-16a4ap6"
+  data-testid="ucl-uikit-badge"
+>
+  <svg
+    aria-hidden="true"
+    class="ucl-uikit-icon css-y1s4m2"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="14"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
+    />
+    <path
+      d="M22 4 12 14.01l-3-3"
+    />
+  </svg>
+  Success
+</span>
+`;
+
+exports[`Badge > snapshot: variant=warning with icon 1`] = `
+<span
+  class="ucl-uikit-badge css-1o21lbi"
+  data-testid="ucl-uikit-badge"
+>
+  <svg
+    aria-hidden="true"
+    class="ucl-uikit-icon css-y1s4m2"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="14"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0M12 9v4m0 4h.01"
+    />
+  </svg>
+  Warning
+</span>
+`;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.24.4",
+  "version": "0.24.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",