From 303d51dd37bef9b6b2700d89b5e1376696b7dd10 Mon Sep 17 00:00:00 2001 From: YourivHDenHaag Date: Thu, 10 Oct 2024 16:27:40 +0200 Subject: [PATCH] feat: replaced dh badgecounter with utrecht badgecounter, added badgecounter option to mobile menu --- components/BadgeCounter/package.json | 6 +-- components/BadgeCounter/src/index.scss | 11 ----- components/BadgeCounter/src/index.tsx | 23 +-------- components/Menu/package.json | 1 + components/Menu/src/index.scss | 7 +++ components/Menu/src/mobile/MobileMenu.tsx | 13 ++++- .../Menu/src/mobile/MobileMenuLinkLabel.tsx | 16 +++++++ packages/storybook/src/templates/util.tsx | 1 + pnpm-lock.yaml | 47 +++++++++++++++++-- .../Components/src/denhaag/menu.tokens.json | 3 ++ 10 files changed, 86 insertions(+), 42 deletions(-) create mode 100644 components/Menu/src/mobile/MobileMenuLinkLabel.tsx diff --git a/components/BadgeCounter/package.json b/components/BadgeCounter/package.json index 3f6585d12e..d9ad680a85 100644 --- a/components/BadgeCounter/package.json +++ b/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" diff --git a/components/BadgeCounter/src/index.scss b/components/BadgeCounter/src/index.scss index 8330bc94ce..b241aa7285 100644 --- a/components/BadgeCounter/src/index.scss +++ b/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); -} diff --git a/components/BadgeCounter/src/index.tsx b/components/BadgeCounter/src/index.tsx index bb5ab228f7..ac2066c3ea 100644 --- a/components/BadgeCounter/src/index.tsx +++ b/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; - -/** - * 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 = (props: BadgeCounterProps) => { - const rootClassNames = clsx('denhaag-badge-counter', props.className); - return ( -
- -
{props.children}
- -
- ); -}; +export { BadgeCounter, BadgeCounterProps }; export default BadgeCounter; diff --git a/components/Menu/package.json b/components/Menu/package.json index bf21e2e765..41f63ada0f 100644 --- a/components/Menu/package.json +++ b/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:*", diff --git a/components/Menu/src/index.scss b/components/Menu/src/index.scss index ebb139d32a..51281f6f58 100644 --- a/components/Menu/src/index.scss +++ b/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); diff --git a/components/Menu/src/mobile/MobileMenu.tsx b/components/Menu/src/mobile/MobileMenu.tsx index b69e9344f5..fbeb32c464 100644 --- a/components/Menu/src/mobile/MobileMenu.tsx +++ b/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; + badgeCounter?: number; } interface LogoutButtonProps { @@ -61,7 +64,10 @@ const ExpandedListItem = ({ label, navigation, Link, scrollMenu, tabIndex }: Exp return ( - {l3Nav.label} + + {l3Nav.label} + {l3Nav.badgeCounter && {l3Nav.badgeCounter}} + @@ -91,7 +97,10 @@ const ExpandedList = ({ label, navigation, Link, scrollMenu, tabIndex }: Expande return ( - {l2Nav.label} + + {l2Nav.label} + {l2Nav.badgeCounter && {l2Nav.badgeCounter}} + diff --git a/components/Menu/src/mobile/MobileMenuLinkLabel.tsx b/components/Menu/src/mobile/MobileMenuLinkLabel.tsx new file mode 100644 index 0000000000..a24884d055 --- /dev/null +++ b/components/Menu/src/mobile/MobileMenuLinkLabel.tsx @@ -0,0 +1,16 @@ +import React, { HTMLAttributes } from 'react'; +import clsx from 'clsx'; + +export interface MobileMenuLinkLabelProps extends HTMLAttributes {} + +export const MobileMenuLinkLabel = ({ className, children, ...props }: MobileMenuLinkLabelProps) => { + const classNames = clsx('denhaag-mobile-menu-list-item-link-label', className); + + return ( +
+ {children} +
+ ); +}; + +export default MobileMenuLinkLabel; diff --git a/packages/storybook/src/templates/util.tsx b/packages/storybook/src/templates/util.tsx index c8702e1c92..fb89670308 100644 --- a/packages/storybook/src/templates/util.tsx +++ b/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' }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63dca197cd..8a75b7fc6c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -216,12 +216,12 @@ importers: components/BadgeCounter: dependencies: - '@gemeente-denhaag/dotindicator': - specifier: workspace:* - version: link:../DotIndicator + '@utrecht/component-library-react': + specifier: 7.0.0 + version: 7.0.0(@babel/runtime@7.24.7)(date-fns@2.30.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@utrecht/components': - specifier: 6.1.0 - version: 6.1.0 + specifier: 7.3.0 + version: 7.3.0 react: specifier: ^18.0.0 version: 18.3.1 @@ -656,6 +656,9 @@ importers: components/Menu: dependencies: + '@gemeente-denhaag/badge-counter': + specifier: workspace:* + version: link:../BadgeCounter '@gemeente-denhaag/button': specifier: workspace:* version: link:../Button @@ -4459,6 +4462,23 @@ packages: vega: optional: true + '@utrecht/component-library-react@7.0.0': + resolution: {integrity: sha512-mPKNpPZqnRv3CIrDuwQwQtDqVvuBnJJkPK+5+vK79nalQmMnRrXMgNhM4vdF0bJ4QHyhWYGRU/WemNXIMRvfbQ==} + peerDependencies: + '@babel/runtime': ^7.23.6 + date-fns: ^2.30.0 + react: '18' + react-dom: '18' + react-vega: ^7.6.0 + vega: ^5.25.0 + peerDependenciesMeta: + date-fns: + optional: true + react-vega: + optional: true + vega: + optional: true + '@utrecht/components@1.0.0': resolution: {integrity: sha512-PGrTGpuLT0vGM2GKKoh2T7bkS9cwTsBxV+IdN8ACYNHFmbmN5OGHmoaQLGme/I89iEHUZil8HFCc+C3p8mceJA==} @@ -4471,6 +4491,9 @@ packages: '@utrecht/components@7.0.0': resolution: {integrity: sha512-5Yq9xjWQt5A6zM8Q7HqSyHnuyf/UO4l+jnNxTEtRfj46lAqN4E44Vp4oZdi+mESE+g/fAnVDUbJVhjQChG9jlA==} + '@utrecht/components@7.3.0': + resolution: {integrity: sha512-9Dbhz0AHQBnr6dsM4d3iqwjAzm1wOq9nU1aMk9M+Yf0Ka+wDRA0Bk5nCebGx6l0bYuyuoXv2g4DOkVXnIPPjUA==} + '@vitejs/plugin-react@4.3.1': resolution: {integrity: sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==} engines: {node: ^14.18.0 || >=16.0.0} @@ -14578,6 +14601,16 @@ snapshots: optionalDependencies: date-fns: 2.30.0 + '@utrecht/component-library-react@7.0.0(@babel/runtime@7.24.7)(date-fns@2.30.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.24.7 + clsx: 2.1.1 + lodash.chunk: 4.2.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + date-fns: 2.30.0 + '@utrecht/components@1.0.0': dependencies: clsx: 1.2.1 @@ -14594,6 +14627,10 @@ snapshots: dependencies: clsx: 2.1.1 + '@utrecht/components@7.3.0': + dependencies: + clsx: 2.1.1 + '@vitejs/plugin-react@4.3.1(vite@5.3.5(@types/node@20.14.12)(sass@1.77.8)(terser@5.30.4))': dependencies: '@babel/core': 7.24.9 diff --git a/proprietary/Components/src/denhaag/menu.tokens.json b/proprietary/Components/src/denhaag/menu.tokens.json index 66a5bb569c..e018b21dfd 100644 --- a/proprietary/Components/src/denhaag/menu.tokens.json +++ b/proprietary/Components/src/denhaag/menu.tokens.json @@ -57,6 +57,9 @@ "large": { "font-size": { "value": "20px" }, "font-weight": { "value": "700" } + }, + "label": { + "gap": { "value": "8px" } } } },