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

…counter option to mobile menu

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" }
  }
  }
  },