Feat: change CounterBadge to NumberBadge (#1027)

closes #681 --------- Signed-off-by: Adham AboHasson <[email protected]>
nl-design-system · Dec 19, 2024 · 5646634 · 5646634
1 parent dff690f
commit 5646634
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 27 deletions.
diff --git a/packages/components-react/src/BadgeCounter.test.tsx b/packages/components-react/src/BadgeCounter.test.tsx
diff --git a/packages/components-react/src/BadgeCounter.tsx b/packages/components-react/src/BadgeCounter.tsx
diff --git a/packages/components-react/src/NumberBadge.test.tsx b/packages/components-react/src/NumberBadge.test.tsx
@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+import { NumberBadge } from './NumberBadge';
+
+describe('numberBadge', () => {
+  it('renders a visible element', () => {
+    const { container } = render(<NumberBadge />);
+
+    const numberBadge = container.querySelector(':only-child');
+
+    expect(numberBadge).toBeInTheDocument();
+    expect(numberBadge).toBeVisible();
+  });
+  it('renders a visible element with a number', () => {
+    render(<NumberBadge data-testid="test-id">5</NumberBadge>);
+    expect(screen.getByTestId('test-id').textContent).toBe('5');
+  });
+  it('render value en children', () => {
+    render(
+      <NumberBadge data-testid="test-id" value={'5555'}>
+        5,555
+      </NumberBadge>,
+    );
+    expect(screen.getByTestId('test-id').textContent).toBe('5,555');
+    expect(screen.getByTestId('test-id').getAttribute('value')).toBe('5555');
+  });
+});
diff --git a/packages/components-react/src/NumberBadge.tsx b/packages/components-react/src/NumberBadge.tsx
@@ -0,0 +1,4 @@
+export {
+  BadgeCounter as NumberBadge,
+  type BadgeCounterProps as NumberBadgeProps,
+} from '@utrecht/component-library-react';
diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts
@@ -13,7 +13,6 @@ export {
 export { ActionGroup, type ActionGroupProps } from './ActionGroup';
 export { Alert, type AlertProps } from './Alert';
 export { Article } from './Article';
-export { BadgeCounter } from './BadgeCounter';
 export { Blockquote, type BlockquoteProps } from './Blockquote';
 export {
   BreadcrumbNav,
@@ -92,6 +91,7 @@ export {
 } from './NavBar';
 export { NavigationList, type NavigationListProps } from './NavigationList';
 export { NavigationListItem, type NavigationListItemProps } from './NavigationListItem';
+export { NumberBadge, type NumberBadgeProps } from './NumberBadge';
 export { OrderedList, OrderedListItem, type OrderedListItemProps, type OrderedListProps } from './OrderedList';
 export { PageContent, type PageContentProps } from './PageContent';
 export { PageHeader, type PageHeaderProps } from './PageHeader';

diff --git a/.../storybook/src/community/counter-badge.md → ...s/storybook/src/community/number-badge.md b/.../storybook/src/community/counter-badge.md → ...s/storybook/src/community/number-badge.md
@@ -1,5 +1,5 @@
 <!-- @license CC0-1.0 -->
 
-# Rijkshuisstijl Community Counter Badge component
+# Rijkshuisstijl Community Number Badge component
 
 Een counter badge is een badge die een getal toont.
diff --git a/...k/src/community/counter-badge.stories.tsx → ...ok/src/community/number-badge.stories.tsx b/...k/src/community/counter-badge.stories.tsx → ...ok/src/community/number-badge.stories.tsx
@@ -1,10 +1,10 @@
-import { BadgeCounter } from '@rijkshuisstijl-community/components-react';
+import { NumberBadge } from '@rijkshuisstijl-community/components-react';
 import { Meta, StoryObj } from '@storybook/react';
-import readme from './counter-badge.md?raw';
+import readme from './number-badge.md?raw';
 const meta = {
-  title: 'Rijkshuisstijl/Counter Badge',
+  title: 'Rijkshuisstijl/Number Badge',
   id: 'rhc-counter-badge',
-  component: BadgeCounter,
+  component: NumberBadge,
   tags: ['autodocs'],
   argTypes: {
     children: {
@@ -26,7 +26,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof BadgeCounter>;
+} satisfies Meta<typeof NumberBadge>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 

diff --git a/packages/storybook/src/community/side-nav.stories.tsx b/packages/storybook/src/community/side-nav.stories.tsx
@@ -1,5 +1,5 @@
 import {
-  BadgeCounter,
+  NumberBadge,
   Separator,
   SideNav,
   SideNavItem,
@@ -49,7 +49,7 @@ export const Default: Story = {
         <SideNavItem>
           <SideNavLink href="/#" icon="mail">
             Mijn berichten
-            <BadgeCounter>2</BadgeCounter>
+            <NumberBadge>2</NumberBadge>
           </SideNavLink>
         </SideNavItem>
         <SideNavItem>

diff --git a/packages/storybook/src/templates/mijn-omgeving/index.tsx b/packages/storybook/src/templates/mijn-omgeving/index.tsx
@@ -1,6 +1,5 @@
 import {
   AccordionProvider,
-  BadgeCounter,
   Footer,
   Heading,
   Icon,
@@ -13,6 +12,7 @@ import {
   NavBar,
   NavigationList,
   NavigationListItem,
+  NumberBadge,
   PageContent,
   PageHeader,
   Separator,
@@ -55,7 +55,7 @@ export default function MijnOmgeving() {
                 <SideNavItem>
                   <SideNavLink href="/#" icon="inbox">
                     MijnZaken
-                    <BadgeCounter>2</BadgeCounter>
+                    <NumberBadge>2</NumberBadge>
                   </SideNavLink>
                 </SideNavItem>
               </SideNavList>