feat: Create badge component in UI library

packages/pxweb2-ui/src/index.ts

@@ -1,6 +1,7 @@
 export * from './../style-dictionary/dist/js/css-variables';
 export * from './../style-dictionary/dist/js/fixed-variables';
 export * from './lib/components/ActionItem/ActionItem';
+export * from './lib/components/Badge/Badge';
 export * from './lib/components/BottomSheet/BottomSheet';
 export * from './lib/components/Breadcrumbs/Breadcrumbs';
 export * from './lib/components/Button/Button';
@@ -22,6 +23,7 @@ export * from './lib/components/Link/Link';
 export * from './lib/components/LinkCard/LinkCard';
 export * from './lib/components/List';
 export * from './lib/components/LocalAlert/LocalAlert';
+export * from './lib/components/MarkdownRenderer/MarkdownRenderer';
 export * from './lib/components/Notes/MandatoryNotes';
 export * from './lib/components/Notes/MandatoryTableNotes';
 export * from './lib/components/Notes/MandatoryVariableNotes';
@@ -51,7 +53,6 @@ export * from './lib/components/Typography/Ingress/Ingress';
 export * from './lib/components/Typography/Label/Label';
 export * from './lib/components/VariableBox/VariableBox';
 export * from './lib/components/VariableList/VariableList';
-export * from './lib/components/MarkdownRenderer/MarkdownRenderer';
 export * from './lib/shared-types/codelist';
 export * from './lib/shared-types/contact';
 export * from './lib/shared-types/contentInfo';

packages/pxweb2-ui/src/lib/components/Badge/Badge.module.scss

@@ -0,0 +1,89 @@
+@use '../../text-styles.scss';
+
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--px-color-text-default);
+  width: fit-content;
+}
+
+/* Colors and variants */
+.color-neutral {
+  &.variant-default {
+    background-color: var(--px-color-surface-moderate);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-subtle);
+  }
+}
+
+.color-info {
+  &.variant-default {
+    color: var(--px-color-text-on-inverted);
+    background-color: var(--px-color-surface-info);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-info-moderate);
+  }
+}
+
+.color-success {
+  &.variant-default {
+    color: var(--px-color-text-on-inverted);
+    background-color: var(--px-color-surface-success);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-success-moderate);
+  }
+}
+
+.color-warning {
+  &.variant-default {
+    background-color: var(--px-color-surface-warning);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-warning-moderate);
+  }
+}
+
+.color-error {
+  &.variant-default {
+    color: var(--px-color-text-on-inverted);
+    background-color: var(--px-color-surface-error);
+  }
+  &.variant-subtle {
+    background-color: var(--px-color-surface-error-moderate);
+  }
+}
+
+/* Sizes with or without label */
+.size-medium {
+  border-radius: var(--px-border-radius-small);
+  height: 24px;
+  min-width: 24px;
+  padding: 1px 8px 0 8px;
+
+  &.no-label {
+    border-radius: var(--px-border-radius-full);
+    width: 12px;
+    min-width: 0px;
+    height: 12px;
+    padding: 0;
+  }
+}
+
+.size-large {
+  border-radius: var(--px-border-radius-small);
+  height: 28px;
+  min-width: 28px;
+  padding: 1px 10px 0 10px;
+
+  &.no-label {
+    border-radius: var(--px-border-radius-full);
+    width: 14px;
+    min-width: 0px;
+    height: 14px;
+    padding: 0;
+  }
+}

packages/pxweb2-ui/src/lib/components/Badge/Badge.spec.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+import { Badge } from './Badge';
+import classes from './Badge.module.scss';
+
+describe('Badge', () => {
+  it('renders default classes when no props are provided', () => {
+    const { container } = render(<Badge />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes.badge);
+    expect(badge).toHaveClass(classes['variant-default']);
+    expect(badge).toHaveClass(classes['color-neutral']);
+    expect(badge).toHaveClass(classes['size-medium']);
+    expect(badge).toHaveClass(classes['no-label']);
+  });
+
+  it('renders a label when label prop is provided', () => {
+    render(<Badge label="9" />);
+
+    expect(screen.getByText('9')).toBeInTheDocument();
+    expect(screen.getByText('9').parentElement).not.toHaveClass(
+      classes['no-label'],
+    );
+  });
+
+  it('renders in no-label mode when label is an empty string', () => {
+    const { container } = render(<Badge label="" />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(container.querySelector(`.${classes['label-medium']}`)).toBeNull();
+    expect(badge).toHaveClass(classes['no-label']);
+  });
+
+  it('renders in no-label mode when label is whitespace only', () => {
+    const { container } = render(<Badge label="   " />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes['no-label']);
+  });
+
+  it('applies classes for selected variant, color, and size', () => {
+    const { container } = render(
+      <Badge variant="subtle" color="error" size="large" label="11" />,
+    );
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes['variant-subtle']);
+    expect(badge).toHaveClass(classes['color-error']);
+    expect(badge).toHaveClass(classes['size-large']);
+    expect(badge).not.toHaveClass(classes['no-label']);
+  });
+
+  it.each(['neutral', 'info', 'success', 'warning', 'error'] as const)(
+    'applies color class for %s',
+    (color) => {
+      const { container } = render(<Badge color={color} label="4" />);
+      const badge = container.firstElementChild as HTMLElement;
+
+      expect(badge).toHaveClass(classes[`color-${color}`]);
+    },
+  );
+
+  it.each(['default', 'subtle'] as const)(
+    'applies variant class for %s',
+    (variant) => {
+      const { container } = render(<Badge variant={variant} label="4" />);
+      const badge = container.firstElementChild as HTMLElement;
+
+      expect(badge).toHaveClass(classes[`variant-${variant}`]);
+    },
+  );
+
+  it.each(['medium', 'large'] as const)('applies size class for %s', (size) => {
+    const { container } = render(<Badge size={size} label="4" />);
+    const badge = container.firstElementChild as HTMLElement;
+
+    expect(badge).toHaveClass(classes[`size-${size}`]);
+  });
+});

packages/pxweb2-ui/src/lib/components/Badge/Badge.stories.tsx

@@ -0,0 +1,164 @@
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Badge } from './Badge';
+
+const colors = ['neutral', 'info', 'success', 'warning', 'error'] as const;
+const sizes = ['medium', 'large'] as const;
+const variants = ['default', 'subtle'] as const;
+const meta = {
+  component: Badge,
+  title: 'Components/Badge',
+  tags: ['autodocs'],
+  args: {
+    variant: 'default',
+    color: 'neutral',
+    size: 'medium',
+    label: '9',
+  },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['default', 'subtle'] },
+    color: {
+      control: 'inline-radio',
+      options: ['neutral', 'info', 'success', 'warning', 'error'],
+    },
+    size: { control: 'inline-radio', options: ['medium', 'large'] },
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof Badge>;
+const wrapperStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+} as const;
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  flexWrap: 'wrap',
+} as const;
+const labelStyle = {
+  minWidth: '120px',
+  fontWeight: 600,
+} as const;
+
+type Story = StoryObj<typeof meta>;
+type BadgeProps = ComponentProps<typeof Badge>;
+type BadgeRow = { labelText: string; badge: BadgeProps };
+
+function renderBadgeRows(args: BadgeProps, rows: BadgeRow[]) {
+  return (
+    <div style={wrapperStyle}>
+      {rows.map(({ labelText, badge }) => (
+        <div key={labelText} style={rowStyle}>
+          <span style={labelStyle}>{labelText}</span>
+          <Badge {...args} {...badge} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function renderColorRow(
+  args: BadgeProps,
+  keyPrefix: string,
+  badge: BadgeProps,
+) {
+  return (
+    <div style={rowStyle}>
+      {colors.map((color) => (
+        <Badge
+          key={`${keyPrefix}-${color}`}
+          {...args}
+          {...badge}
+          color={color}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const Playground: Story = {};
+
+export const SizeAndLabelStates: Story = {
+  render: (args) =>
+    renderBadgeRows(args, [
+      { labelText: 'Medium with label', badge: { size: 'medium', label: '9' } },
+      { labelText: 'Large with label', badge: { size: 'large', label: '99' } },
+      {
+        labelText: 'Medium without label',
+        badge: { size: 'medium', label: '' },
+      },
+      { labelText: 'Large without label', badge: { size: 'large', label: '' } },
+    ]),
+};
+
+export const ColorsByVariant: Story = {
+  args: { label: '9', size: 'medium' },
+  argTypes: {
+    variant: { control: false },
+    color: { control: false },
+  },
+  render: (args) => (
+    <div style={wrapperStyle}>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Default (with label)</span>
+        {renderColorRow(args, 'default-labeled', { variant: 'default' })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Default (without label)</span>
+        {renderColorRow(args, 'default-unlabeled', {
+          variant: 'default',
+          label: '',
+        })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Subtle (with label)</span>
+        {renderColorRow(args, 'subtle-labeled', { variant: 'subtle' })}
+      </div>
+      <div style={rowStyle}>
+        <span style={labelStyle}>Subtle (without label)</span>
+        {renderColorRow(args, 'subtle-unlabeled', {
+          variant: 'subtle',
+          label: '',
+        })}
+      </div>
+    </div>
+  ),
+};
+
+export const AllCombinations: Story = {
+  args: { label: '9' },
+  argTypes: {
+    variant: { control: false },
+    color: { control: false },
+    size: { control: false },
+    label: { control: false },
+  },
+  render: (args) => (
+    <div style={wrapperStyle}>
+      {variants.map((variant) =>
+        sizes.map((size) => (
+          <div key={`${variant}-${size}`} style={rowStyle}>
+            <span style={labelStyle}>{`${variant} / ${size}`}</span>
+
+            {/* With label */}
+            {renderColorRow(args, `${variant}-${size}-labeled`, {
+              variant,
+              size,
+            })}
+
+            {/* Without label */}
+            {renderColorRow(args, `${variant}-${size}-unlabeled`, {
+              variant,
+              size,
+              label: '',
+            })}
+          </div>
+        )),
+      )}
+    </div>
+  ),
+};
+
+export default meta;

packages/pxweb2-ui/src/lib/components/Badge/Badge.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+
+import classes from './Badge.module.scss';
+
+interface Badge {
+  readonly variant?: 'default' | 'subtle';
+  readonly color?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+  readonly size?: 'medium' | 'large';
+  readonly label?: string;
+}
+
+export function Badge({
+  variant = 'default',
+  color = 'neutral',
+  size = 'medium',
+  label,
+}: Badge) {
+  const withoutLabel = !label || label.trim() === '';
+
+  return (
+    <span
+      className={clsx(
+        classes['badge'],
+        classes[`color-${color}`],
+        classes[`size-${size}`],
+        classes[`variant-${variant}`],
+        { [classes['no-label']]: withoutLabel },
+      )}
+    >
+      {label && <span className={classes['label-medium']}>{label}</span>}
+    </span>
+  );
+}
+
+export default Badge;