Merge branch 'develop' into feature/DES-517-vertical-grid-gap-options

package.json

@@ -19,13 +19,13 @@
     "./storybook/*"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "2.7.2",
-    "@lerna-lite/publish": "2.7.2",
-    "@lerna-lite/run": "2.7.2",
-    "@lerna-lite/version": "2.7.2",
-    "@types/node": "20.9.4",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
+    "@lerna-lite/cli": "3.0.0",
+    "@lerna-lite/publish": "3.0.0",
+    "@lerna-lite/run": "3.0.0",
+    "@lerna-lite/version": "3.0.0",
+    "@types/node": "20.10.0",
+    "@typescript-eslint/eslint-plugin": "6.13.1",
+    "@typescript-eslint/parser": "6.13.1",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
@@ -34,7 +34,7 @@
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "2.2.0",
     "eslint-plugin-react": "7.33.2",
-    "html-validate": "8.7.2",
+    "html-validate": "8.7.3",
     "husky": "8.0.3",
     "lint-staged": "15.1.0",
     "markdownlint-cli": "0.37.0",

packages/css/src/page-menu/page-menu.scss

@@ -33,6 +33,10 @@
   @include reset-list;
 }
 
+.amsterdam-page-menu--align-end {
+  justify-content: end;
+}
+
 @mixin page-menu-item {
   color: var(--amsterdam-page-menu-item-color);
   display: inline-flex;

packages/react/package.json

@@ -46,15 +46,15 @@
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/pluginutils": "5.0.5",
+    "@rollup/pluginutils": "5.1.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
     "@types/date-fns": "2.6.0",
     "@types/jest": "29.5.10",
     "@types/lodash": "4.14.202",
-    "@types/react": "18.2.38",
+    "@types/react": "18.2.39",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
@@ -63,7 +63,7 @@
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "4.5.1",
+    "rollup": "4.6.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-node-externals": "6.1.2",

packages/react/src/PageMenu/PageMenu.test.tsx

@@ -4,7 +4,7 @@ import { createRef } from 'react'
 import { PageMenu } from './PageMenu'
 import '@testing-library/jest-dom'
 
-describe('page menu', () => {
+describe('Page menu', () => {
   it('renders a page menu with children', () => {
     const { container } = render(
       <PageMenu>
@@ -15,11 +15,9 @@ describe('page menu', () => {
         <PageMenu.Button icon={MenuIcon}>Alle onderwerpen</PageMenu.Button>
       </PageMenu>,
     )
-
     const component = container.querySelector(':only-child')
     const children = container.querySelectorAll('li')
     const icons = container.querySelectorAll('svg')
-
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
     expect(children.length).toBe(3)
@@ -28,33 +26,31 @@ describe('page menu', () => {
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<PageMenu />)
-
     const component = container.querySelector(':only-child')
-
     expect(component).toHaveClass('amsterdam-page-menu')
   })
 
+  it('renders a class name for end alignment', () => {
+    const { container } = render(<PageMenu alignEnd />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-page-menu--align-end')
+  })
+
   it('is able to pass a React ref', () => {
     const ref = createRef<HTMLElement>()
-
     const { container } = render(
       <PageMenu ref={ref}>
         <PageMenu.Link href="#">English</PageMenu.Link>
       </PageMenu>,
     )
-
     const component = container.querySelector(':only-child')
-
     expect(ref.current).toBe(component)
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<PageMenu className="intro" />)
-
     const component = container.querySelector(':only-child')
-
     expect(component).toHaveClass('intro')
-
     expect(component).toHaveClass('amsterdam-page-menu')
   })
 })

packages/react/src/PageMenu/PageMenu.tsx

@@ -16,17 +16,27 @@ import {
 } from 'react'
 import { Icon } from '../Icon'
 
-type PageMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>
+type PageMenuProps = {
+  /**
+   * Whether the page menu’s items align to its end.
+   * If the menu itself aligns to the end of its container, you should set this to `true`.
+   */
+  alignEnd?: boolean
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
 interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLElement>> {
   Link: typeof PageMenuLink
   Button: typeof PageMenuButton
 }
 
 export const PageMenu = forwardRef(
-  ({ children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => {
+  ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => {
     return (
-      <ul {...restProps} className={clsx('amsterdam-page-menu', className)} ref={ref}>
+      <ul
+        {...restProps}
+        className={clsx('amsterdam-page-menu', alignEnd && `amsterdam-page-menu--align-end`, className)}
+        ref={ref}
+      >
         {children}
       </ul>
     )