feature/ Dot Badge component (#743)

#744

packages/components-css/dot-badge/_mixin.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-dot-badge {
+  block-size: var(--rhc-dot-badge-size, var(--rhc-size-quarter-lint));
+  border-radius: var(--rhc-dot-badge-border-radius, var(--rhc-border-radius-circle));
+  color: var(--rhc-dot-badge-color, var(--rhc-color-rood-500));
+  display: inline-block;
+  inline-size: var(--rhc-dot-badge-inline-size, var(--rhc-size-quarter-lint));
+}

packages/components-css/dot-badge/index.scss

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@import "./mixin";
+
+.rhc-dot-badge {
+  @include rhc-dot-badge;
+}

packages/components-css/index.scss

@@ -10,6 +10,7 @@
 @import "blockquote/index";
 @import "breadcrumb-nav/index";
 @import "button/index";
+@import "dot-badge";
 @import "checkbox/index";
 @import "fieldset/index";
 @import "figure/index";

packages/components-react/src/DotBadge.test.tsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { DotBadge } from './DotBadge';
+
+describe('DotBadge', () => {
+  it('renders without crashing', () => {
+    render(<DotBadge aria-label={'test'} />);
+    const dotBadge = screen.getByRole('status');
+    expect(dotBadge).toBeInTheDocument();
+  });
+  it('applies correct aria-label', () => {
+    render(<DotBadge aria-label={'test'} />);
+    const dotBadge = screen.getByRole('status');
+    expect(dotBadge).toHaveAttribute('aria-label', 'test');
+  });
+  it('applies correct role', () => {
+    render(<DotBadge aria-label={'test'} role={'status'} />);
+    const dotBadge = screen.getByRole('status');
+    expect(dotBadge).toHaveAttribute('role', 'status');
+  });
+});

packages/components-react/src/DotBadge.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface DotBadgeProps extends HTMLAttributes<HTMLDivElement> {
+  'aria-label': string;
+}
+
+export const DotBadge = forwardRef<HTMLDivElement, DotBadgeProps>((props, ref) => {
+  return (
+    <div
+      className="rhc-dot-badge"
+      ref={ref}
+      {...props}
+      aria-label={props['aria-label']}
+      aria-live="polite"
+      role={props.role || 'status'}
+    >
+      <svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="#D52B1E" height="12" rx="6" width="12" />
+      </svg>
+    </div>
+  );
+});
+
+DotBadge.displayName = 'DotBadge';

packages/components-react/src/index.ts

@@ -47,6 +47,7 @@ export {
   DataListValue,
   type DataListValueProps,
 } from './DataList';
+export { DotBadge, type DotBadgeProps } from './DotBadge';
 export { Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps } from './Fieldset';
 export { Figure, FigureCaption, type FigureCaptionProps, type FigureProps } from './Figure';
 export { Footer } from './Footer';

packages/storybook/src/community/dot-badge.md

@@ -0,0 +1,13 @@
+<!-- @license CC0-1.0 -->
+
+# Rijkshuisstijl Community Checkbox component
+
+Nl design system - geen | [Figma](https://www.figma.com/design/Nv5EsCW9ioWBUSi9m9JqOa/Local---Rijkshuisstijl---Bibliotheek?node-id=4069-2838&node-type=canvas&t=HuDzyBW9wHdB2QVh-0) | [GitHub](https://github.com/nl-design-system/rijkshuisstijl-community/issues/744)
+
+## Usage
+
+```tsx
+import { DotBadge } from '@rijkshuisstijl-community/components-react';
+
+<DotBadge aria-label="Nieuwe Bericht" />;
+```

packages/storybook/src/community/dot-padge.stories.tsx

@@ -0,0 +1,30 @@
+import { DotBadge } from '@rijkshuisstijl-community/components-react';
+import { Meta, StoryObj } from '@storybook/react';
+import readme from './dot-badge.md?raw';
+
+const meta = {
+  title: 'Rijkshuisstijl/Dot Badge',
+  id: 'rhc-dot-badge',
+  component: DotBadge,
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+    },
+  },
+  args: {
+    'aria-label': 'Nieuw Bericht',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof DotBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

proprietary/design-tokens/figma/figma.tokens.json

@@ -2862,6 +2862,24 @@
       }
     }
   },
+  "components/dot-badge": {
+    "rhc": {
+      "dot-badge": {
+        "border-radius": {
+          "value": "{rhc.border-radius.circle}",
+          "type": "border-radius"
+        },
+        "color": {
+          "value": "{rhc.color.rood.500}",
+          "type": "color"
+        },
+        "size": {
+          "value": "{rhc.size.quarter-lint}",
+          "type": "size"
+        }
+      }
+    }
+  },
   "components/drawer": {
     "todo": {
       "drawer": {
@@ -6162,6 +6180,7 @@
       "components/checkbox",
       "components/checkbox-group",
       "components/counter-badge",
+      "components/dot-badge",
       "components/drawer",
       "components/figure",
       "components/footer",