feat: replaced dh badgecounter with utrecht badgecounter, added badge…

components/BadgeCounter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemeente-denhaag/badge-counter",
-  "version": "0.1.1-alpha.411",
+  "version": "0.3.0-alpha.411",
   "description": "A Badge component",
   "bugs": "https://github.com/nl-design-system/denhaag/issues",
   "repository": {
@@ -30,8 +30,8 @@
     "watch:components": "chokidar --silent --follow-symlinks \"src/**/*\" -c \"pnpm run build\""
   },
   "dependencies": {
-    "@gemeente-denhaag/dotindicator": "workspace:*",
-    "@utrecht/components": "6.1.0"
+    "@utrecht/component-library-react": "7.0.0",
+    "@utrecht/components": "7.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0"

components/BadgeCounter/src/index.scss

@@ -1,12 +1 @@
 @import "~@utrecht/components/dist/badge-counter/css";
-
-.denhaag-badge-counter {
-  --denhaag-dot-indicator-size: 8px;
-}
-
-.denhaag-badge-counter__counter {
-  @extend .utrecht-badge-counter;
-
-  font-family: var(--utrecht-badge-counter-font-family);
-  font-size: var(--utrecht-badge-counter-font-size);
-}

components/BadgeCounter/src/index.tsx

@@ -1,24 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-import { DotIndicator } from '@gemeente-denhaag/dotindicator';
+import { BadgeCounter, BadgeCounterProps } from '@utrecht/component-library-react';
 import './index.scss';
-import clsx from 'clsx';
-
-export type BadgeCounterProps = HTMLAttributes<HTMLDivElement>;
-
-/**
- * A counter badge notifies a user of a specific amount of updates.
- * @param props The properties of a Badge component.
- * @constructor Constructs an instance of Badge.
- */
-export const BadgeCounter: React.FC<BadgeCounterProps> = (props: BadgeCounterProps) => {
-  const rootClassNames = clsx('denhaag-badge-counter', props.className);
-  return (
-    <div id={props.id} className={rootClassNames}>
-      <DotIndicator overlap={'rectangle'}>
-        <div className={'denhaag-badge-counter__counter'}>{props.children}</div>
-      </DotIndicator>
-    </div>
-  );
-};
 
+export { BadgeCounter, BadgeCounterProps };
 export default BadgeCounter;

components/Menu/package.json

@@ -30,6 +30,7 @@
     "watch:components": "chokidar --silent --follow-symlinks \"src/**/*\" -c \"pnpm run build\""
   },
   "dependencies": {
+    "@gemeente-denhaag/badge-counter": "workspace:*",
     "@gemeente-denhaag/button": "workspace:*",
     "@gemeente-denhaag/icons": "workspace:*",
     "@gemeente-denhaag/language-switcher": "workspace:*",

components/Menu/src/index.scss

@@ -53,6 +53,13 @@
       }
     }
 
+    .denhaag-mobile-menu-list-item-link-label {
+      display: flex;
+      flex-direction: row;
+      gap: var(--denhaag-mobile-menu-list-item-button-label-gap);
+      align-items: center;
+    }
+
     .denhaag-mobile-menu-list-item-expanded-list {
       display: var(--denhaag-mobile-menu-list-item-expanded-list-display);
       list-style: var(--denhaag-mobile-menu-list-item-expanded-list-list-style);

components/Menu/src/mobile/MobileMenu.tsx

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes, useState } from 'react';
+import { BadgeCounter } from '@gemeente-denhaag/badge-counter';
 import { SheetContainer } from '@gemeente-denhaag/sheet';
 import { ArrowRightIcon, ChevronDownIcon, ArrowLeftIcon, LogOutIcon } from '@gemeente-denhaag/icons';
 import { MobileMenuList } from './MobileMenuList';
@@ -11,11 +12,13 @@ import { Button } from '@gemeente-denhaag/button';
 
 import useToggleState from './use-togglestate';
 import clsx from 'clsx';
+import MobileMenuLinkLabel from './MobileMenuLinkLabel';
 
 interface NavigationGroupProps {
   label: string;
   href?: string;
   navigation?: Array<NavigationGroupProps>;
+  badgeCounter?: number;
 }
 
 interface LogoutButtonProps {
@@ -61,7 +64,10 @@ const ExpandedListItem = ({ label, navigation, Link, scrollMenu, tabIndex }: Exp
               return (
                 <MobileMenuListItem key={key}>
                   <MobileMenuLink Link={Link} href={l3Nav.href}>
-                    <span>{l3Nav.label}</span>
+                    <MobileMenuLinkLabel>
+                      <span>{l3Nav.label}</span>
+                      {l3Nav.badgeCounter && <BadgeCounter>{l3Nav.badgeCounter}</BadgeCounter>}
+                    </MobileMenuLinkLabel>
                     <span className="denhaag-mobile-menu-list-submenu-list-item-link__icon">
                       <ArrowRightIcon />
                     </span>
@@ -91,7 +97,10 @@ const ExpandedList = ({ label, navigation, Link, scrollMenu, tabIndex }: Expande
             return (
               <MobileMenuListItem key={key}>
                 <MobileMenuLink Link={Link} href={l2Nav.href} tabIndex={tabIndex}>
-                  <span>{l2Nav.label}</span>
+                  <MobileMenuLinkLabel>
+                    <span>{l2Nav.label}</span>
+                    {l2Nav.badgeCounter && <BadgeCounter>{l2Nav.badgeCounter}</BadgeCounter>}
+                  </MobileMenuLinkLabel>
                   <span className="denhaag-mobile-menu-list-submenu-list-item-link__icon">
                     <ArrowRightIcon />
                   </span>

components/Menu/src/mobile/MobileMenuLinkLabel.tsx

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react';
+import clsx from 'clsx';
+
+export interface MobileMenuLinkLabelProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const MobileMenuLinkLabel = ({ className, children, ...props }: MobileMenuLinkLabelProps) => {
+  const classNames = clsx('denhaag-mobile-menu-list-item-link-label', className);
+
+  return (
+    <div {...props} className={classNames}>
+      {children}
+    </div>
+  );
+};
+
+export default MobileMenuLinkLabel;

packages/storybook/src/templates/util.tsx

@@ -80,6 +80,7 @@ export const headerProps: HeaderLogicProps = {
         label: 'MijnDenHaag',
         navigation: [
           { label: 'Overzicht', href: 'https://klantportaal.denhaag.nl/overzicht' },
+          { label: 'Mijn berichten', href: 'https://klantportaal.denhaag.nl/berichten', badgeCounter: 3 },
           { label: 'Lopende zaken', href: 'https://klantportaal.denhaag.nl/zaken' },
           { label: "Thema's", href: 'https://klantportaal.denhaag.nl/themas' },
           { label: 'Mijn account', href: 'https://klantportaal.denhaag.nl/account' },

proprietary/Components/src/denhaag/menu.tokens.json

@@ -57,6 +57,9 @@
             "large": {
               "font-size": { "value": "20px" },
               "font-weight": { "value": "700" }
+            },
+            "label": {
+              "gap": { "value": "8px" }
             }
           }
         },