@progressiveui/react 1.22.0

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "@progressiveui/react",
+  "version": "1.22.0",
+  "description": "WFP UI Kit",
+  "license": "Apache-2",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "main:scss": "source/globals/styles.scss",
+  "types": "es/dist/index.d.ts",
+  "scripts": {
+    "build": "yarn rollup -c && yarn build:demos && yarn generate:types",
+    "clean": "rimraf es lib umd storybook-static build react-docgen.json",
+    "build:rollup": "rollup -c --bundleConfigAsCjs",
+    "build:demos": "rollup -c rollupDemos.config.js --bundleConfigAsCjs",
+    "build:storybook": "rm -r -f docs && storybook build -o docs",
+    "generate:types": "rollup --config scripts/rollup-generateTypeDefinitions.config.js --bundleConfigAsCjs && node .temp/generateTypeDefinitions.js && rm -rf .temp",
+    "dev": "npm run storybook",
+    "storybook": "STORYBOOK_ASSETS=https://cdn.wfp.org/guides/ui/assets/v0.0.1/ STORYBOOK_NPM_VERSION=10.10.3 storybook dev -p 9000",
+    "test": "jest",
+    "jest-w": "jest --watch"
+  },
+  "sass": {
+    "includePaths": [
+      "./node_modules"
+    ]
+  },
+  "keywords": [
+    "WFP",
+    "World Food Programme",
+    "UN",
+    "United Nations",
+    "react",
+    "ui-kit",
+    "components"
+  ],
+  "files": [
+    ".storybook",
+    "build",
+    "config",
+    "es",
+    "lib",
+    "src",
+    "umd",
+    "rollup.config.ts",
+    "react-docgen.json"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@babel/preset-typescript": "^7.18.6",
+    "@carbon/feature-flags": "^0.6.0",
+    "classnames": "2.2.6",
+    "invariant": "^2.2.4",
+    "react-datepicker": "^4.6.0",
+    "react-frame-component": "^5.2.6",
+    "react-popper-tooltip": "^4.1.0",
+    "react-transition-state": "^2.1.0",
+    "warning": "^4.0.3",
+    "whatwg-fetch": "^3.6.19",
+    "window-or-global": "^1.0.1",
+    "ws": "^8.12.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/traverse": "^7.23.2",
+    "@fontsource-variable/open-sans": "^5.0.13",
+    "@progressiveui/icons-react": "^10.38.0",
+    "@progressiveui/pictograms-react": "^11.18.0",
+    "@progressiveui/styles": "^10.30.0",
+    "@progressiveui/themes-core": "^0.4.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-docs": "^8.0.0-beta.4",
+    "@storybook/addon-essentials": "^8.0.0-beta.4",
+    "@storybook/addon-links": "^8.0.0-beta.4",
+    "@storybook/addon-mdx-gfm": "^8.0.0-beta.4",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^8.0.0-beta.4",
+    "@storybook/react": "^8.0.0-beta.4",
+    "@storybook/react-vite": "^8.0.0-beta.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/mdx": "^2.0.3",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "all-contributors-cli": "^6.17.0",
+    "autoprefixer": "^9.8.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-dev-expression": "^0.2.2",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "browserslist-config-carbon": "^10.6.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^5.2.4",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.5.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "gzip-size": "^5.1.1",
+    "handlebars": "^4.7.7",
+    "iframe-resizer": "^4.3.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lodash.isequal": "^4.5.0",
+    "moment": "^2.27.0",
+    "object-assign": "^4.1.1",
+    "postcss": "^8.2.14",
+    "postcss-cli": "^8.3.1",
+    "postcss-custom-properties": "^11.0.0",
+    "postcss-loader": "4",
+    "prettier": "^2.8.7",
+    "pretty": "^2.0.0",
+    "prismjs": "^1.20.0",
+    "promise": "^8.1.0",
+    "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.1",
+    "react": "18.2.0",
+    "react-dates": "^21.8.0",
+    "react-docgen": "^7.0.0",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "18.2.0",
+    "react-dropzone": "^11.0.2",
+    "react-final-form": "^6.5.1",
+    "react-hook-form": "^7.20.5",
+    "react-markdown": "^9.0.0",
+    "react-popper": "^2.2.3",
+    "react-prism": "^4.3.2",
+    "react-redux": "^7.2.1",
+    "react-select": "^3.1.0",
+    "react-table": "7.5.0",
+    "recharts": "^2.7.3",
+    "redux-form": "^8.3.10",
+    "requestanimationframe": "^0.0.23",
+    "rimraf": "^3.0.2",
+    "rollup": "4.1.4",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.2.0",
+    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-strip-banner": "^3.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.66.1",
+    "sass-loader": "13.3.2",
+    "storybook": "^8.0.0-beta.4",
+    "style-loader": "^2.0.0",
+    "ts-jest": "^29.1.1",
+    "twig": "^1.15.4",
+    "typescript": "^4.8.3",
+    "vite": "^4.4.9"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wfp/ui.git"
+  },
+  "bundleSizeThreshold": 80000,
+  "gitHead": "a5bec728bba7e239d3d00104c0e24d1b13dd554b"
+}

package/src/assets/internal/branding.svg

@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="49" height="60" viewBox="0 0 49 60">
+  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+    <polygon fill="#FBC208" points="47.615 46.94 47.615 4.173 5.253 4.173 5.253 58.303 36.045 58.303 36.268 58.303 36.461 46.94"/>
+    <path fill="#FBC208" d="M47.6149 47.1603L36.4729 58.3023M47.6149 47.1601L47.6149 46.9391 47.6149 47.1601z"/>
+    <polygon fill="#FBC208" points="47.615 46.94 36.16 46.94 36.16 58.303 36.62 58.303 47.615 47.326"/>
+    <polygon fill="#FFF" points="43.237 42.767 43.237 0 .875 0 .875 54.13 31.667 54.13 31.89 54.13 32.083 42.767"/>
+    <polygon stroke="#1D1D1B" stroke-width="2" points="43.237 42.767 43.237 0 .875 0 .875 54.13 31.667 54.13 31.89 54.13 32.083 42.767"/>
+    <g transform="translate(32 42.626)">
+      <path fill="#FFF" d="M11.2374,0.3615 L0.0954,11.5035"/>
+      <path stroke="#1D1D1B" stroke-width="2" d="M11.2374,0.3615 L0.0954,11.5035"/>
+    </g>
+    <path fill="#FFF" d="M43.2373,42.9877 L43.2373,42.7677 L43.2373,42.9877 Z"/>
+    <path stroke="#1D1D1B" stroke-width="2" d="M43.2374,42.7667 L43.2374,42.9877"/>
+    <polygon fill="#FFF" points="43.237 42.767 31.782 42.767 31.782 54.13 32.242 54.13 43.237 43.153"/>
+    <polygon stroke="#1D1D1B" stroke-width="2" points="43.237 42.767 31.782 42.767 31.782 54.13 32.242 54.13 43.237 43.153"/>
+    <polygon fill="#FFF" points="5.679 48.621 14.074 48.621 14.074 5.152 5.679 5.152"/>
+    <polygon stroke="#000" stroke-width="2" points="5.679 48.621 14.074 48.621 14.074 5.152 5.679 5.152"/>
+    <polygon fill="#FFF" points="18.232 16.196 37.73 16.196 37.73 5.258 18.232 5.258"/>
+    <polygon stroke="#000" stroke-width="2" points="18.232 16.196 37.73 16.196 37.73 5.258 18.232 5.258"/>
+    <polygon fill="#FBC208" points="18.411 31.668 25.688 31.668 25.688 22.312 18.411 22.312"/>
+    <polygon stroke="#000" stroke-width="2" points="18.411 31.668 25.688 31.668 25.688 22.312 18.411 22.312"/>
+    <polygon fill="#FBC208" points="30.552 31.668 37.908 31.668 37.908 22.21 30.552 22.21"/>
+    <polygon stroke="#000" stroke-width="2" points="30.552 31.668 37.908 31.668 37.908 22.21 30.552 22.21"/>
+    <polygon fill="#056DB4" points="31.783 42.767 37.908 42.767 37.908 38.075 18.41 38.075 18.41 49.013 31.783 49.013"/>
+    <polygon stroke="#000" stroke-width="2" points="31.783 42.767 37.908 42.767 37.908 38.075 18.41 38.075 18.41 49.013 31.783 49.013"/>
+    <path stroke="#000" stroke-width="2" d="M8.9621 23.2096L10.6311 23.2096M7.5363 26.296L12.0573 26.296M7.5363 29.1046L12.0573 29.1046M7.5363 31.8849L12.0573 31.8849"/>
+    <path fill="#056DB4" d="M25.1256 10.7277C25.1256 11.4277 24.5906 11.9947 23.9316 11.9947 23.2716 11.9947 22.7376 11.4277 22.7376 10.7277 22.7376 10.0277 23.2716 9.4607 23.9316 9.4607 24.5906 9.4607 25.1256 10.0277 25.1256 10.7277M29.2604 10.7277C29.2604 11.4277 28.7264 11.9947 28.0664 11.9947 27.4074 11.9947 26.8724 11.4277 26.8724 10.7277 26.8724 10.0277 27.4074 9.4607 28.0664 9.4607 28.7264 9.4607 29.2604 10.0277 29.2604 10.7277M33.2238 10.7277C33.2238 11.4277 32.6888 11.9947 32.0298 11.9947 31.3708 11.9947 30.8358 11.4277 30.8358 10.7277 30.8358 10.0277 31.3708 9.4607 32.0298 9.4607 32.6888 9.4607 33.2238 10.0277 33.2238 10.7277"/>
+    <polygon fill="#056DB4" points="31.19 .153 31.19 12.173 35.048 8.801 39.34 12.551 39.34 .153"/>
+    <polygon stroke="#000" stroke-width="2" points="31.19 .153 31.19 12.173 35.048 8.801 39.34 12.551 39.34 .153"/>
+  </g>
+</svg>

package/src/assets/internal/toolkit.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="36" viewBox="0 0 72 36">
+  <g fill="none" fill-rule="evenodd" transform="translate(1 3)">
+    <polygon fill="#FFF" points="43.508 27.789 21.602 5.907 25.878 1.575 47.783 23.457"/>
+    <polygon stroke="#000" stroke-width="2" points="43.508 27.789 21.602 5.907 25.878 1.575 47.783 23.457"/>
+    <path stroke="#000" stroke-width="2" d="M25.9079 7.4665L24.4639 8.9185M40.5758 22.3659L39.0738 23.8759"/>
+    <polygon fill="#FFF" points="19.999 24.016 24.563 28.606 27.247 26.007 22.675 21.432"/>
+    <polygon stroke="#000" stroke-width="2" points="19.999 24.016 24.563 28.606 27.247 26.007 22.675 21.432"/>
+    <polygon fill="#FBC208" points="22.675 21.432 27.246 26.007 46.953 6.917 42.421 2.361"/>
+    <polygon stroke="#000" stroke-width="2" points="22.675 21.432 27.246 26.007 46.953 6.917 42.421 2.361"/>
+    <polygon fill="#FFF" points="47.783 1.558 43.253 1.558 42.421 2.361 46.953 6.917 47.783 6.113"/>
+    <polygon stroke="#000" stroke-width="2" points="47.783 1.558 43.253 1.558 42.421 2.361 46.953 6.917 47.783 6.113"/>
+    <polygon fill="#056DB4" points="15.102 .021 .414 14.709 15.32 29.616 15.253 23.074 6.985 14.818 15.102 5.357"/>
+    <polygon stroke="#000" stroke-width="2" points="15.102 .021 .414 14.709 15.32 29.616 15.253 23.074 6.985 14.818 15.102 5.357"/>
+    <polygon fill="#056DB4" points="54.584 .504 69.272 15.193 54.366 30.099 54.433 23.558 62.831 15.303 54.584 6.84"/>
+    <polygon stroke="#000" stroke-width="2" points="54.584 .504 69.272 15.193 54.366 30.099 54.433 23.558 62.831 15.303 54.584 6.84"/>
+  </g>
+</svg>

package/src/assets/internal/usability.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="60" viewBox="0 0 45 60">
+  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+    <polygon fill="#056DB4" points=".832 7.7 42.798 7.7 42.798 .676 .832 .676"/>
+    <polygon stroke="#000" stroke-width="2" points=".832 7.7 42.798 7.7 42.798 .676 .832 .676"/>
+    <polygon fill="#FBC208" points=".831 35.099 42.797 35.099 42.797 7.701 .831 7.701"/>
+    <polygon stroke="#000" stroke-width="2" points=".831 35.099 42.797 35.099 42.797 7.701 .831 7.701"/>
+    <path fill="#000" d="M5.2995 4.2819C5.2995 4.8519 4.8375 5.3139 4.2675 5.3139 3.6975 5.3139 3.2355 4.8519 3.2355 4.2819 3.2355 3.7119 3.6975 3.2499 4.2675 3.2499 4.8375 3.2499 5.2995 3.7119 5.2995 4.2819M8.8742 4.2819C8.8742 4.8519 8.4122 5.3139 7.8422 5.3139 7.2722 5.3139 6.8102 4.8519 6.8102 4.2819 6.8102 3.7119 7.2722 3.2499 7.8422 3.2499 8.4122 3.2499 8.8742 3.7119 8.8742 4.2819"/>
+    <path fill="#FFF" d="M13.4738,57.6256 L13.4858,49.7726 C13.4858,49.7726 10.4178,46.3936 10.0378,44.2086 L10.0378,31.3356 C10.0378,31.3356 10.3558,29.8796 12.0918,29.7116 C13.7678,29.5496 14.2768,31.2796 14.2768,31.2796 L14.2768,34.6296 L14.2768,29.3186 C14.2768,29.3186 14.2768,27.0786 16.4608,27.0786 C19.0938,27.0786 19.1108,29.3756 19.1108,29.3756 L19.1498,34.6966 L19.0938,27.0786 C19.0938,27.0786 19.3738,25.0006 21.8388,25.0626 C24.0788,25.1176 24.4158,27.4146 24.4158,27.4146 L24.4158,34.8086 L24.4158,18.3966 C24.4158,18.3966 24.4718,15.9306 27.1038,15.9306 C29.1208,15.9306 29.4008,18.6196 29.4008,18.6196 L29.2888,40.1306 L29.3078,36.1976 C29.3078,36.1976 33.1848,36.7766 33.5778,39.6896 C33.8688,41.8556 29.1398,49.5786 28.4988,50.5206 C27.8578,51.4616 25.6608,51.7146 25.6608,51.7146 L25.8468,57.6256 L13.4738,57.6256 Z"/>
+    <path stroke="#000" stroke-width="2" d="M13.4738,57.6256 L13.4858,49.7726 C13.4858,49.7726 10.4178,46.3936 10.0378,44.2086 L10.0378,31.3356 C10.0378,31.3356 10.3558,29.8796 12.0918,29.7116 C13.7678,29.5496 14.2768,31.2796 14.2768,31.2796 L14.2768,34.6296 L14.2768,29.3186 C14.2768,29.3186 14.2768,27.0786 16.4608,27.0786 C19.0938,27.0786 19.1108,29.3756 19.1108,29.3756 L19.1498,34.6966 L19.0938,27.0786 C19.0938,27.0786 19.3738,25.0006 21.8388,25.0626 C24.0788,25.1176 24.4158,27.4146 24.4158,27.4146 L24.4158,34.8086 L24.4158,18.3966 C24.4158,18.3966 24.4718,15.9306 27.1038,15.9306 C29.1208,15.9306 29.4008,18.6196 29.4008,18.6196 L29.2888,40.1306 L29.3078,36.1976 C29.3078,36.1976 33.1848,36.7766 33.5778,39.6896 C33.8688,41.8556 29.1398,49.5786 28.4988,50.5206 C27.8578,51.4616 25.6608,51.7146 25.6608,51.7146 L25.8468,57.6256 L13.4738,57.6256 Z"/>
+    <path stroke="#000" stroke-linecap="round" stroke-width="2" d="M21.5236,16.736 C21.5236,16.736 21.7676,11.11 26.9186,11.11 C32.0076,11.11 32.5676,16.736 32.5676,16.736"/>
+  </g>
+</svg>

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import markdown from "./README.mdx";
+import { Accordion, AccordionItem } from ".";
+
+export default {
+  title: "Components/Navigation/Accordion",
+  component: Accordion,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "experimental",
+    mdx: markdown,
+  },
+};
+
+export const AccordionDefault: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      {[
+        {
+          header: "What is Lorem Ipsum?",
+          content: "Lorem ipsum dolor sit amet, consectetur adipiscing...",
+        },
+        {
+          header: "Where does it come from?",
+          content: "Quisque eget luctus mi, vehicula mollis lorem...",
+        },
+        {
+          header: "Why do we use it?",
+          content: "Suspendisse massa risus, pretium id interdum in...",
+        },
+      ].map(({ header, content }, i) => (
+        <AccordionItem header={header} key={i}>
+          {content}
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+  args: {
+    title: "Title",
+  },
+};

package/src/components/Accordion/__tests__/components/Accordion.test.tsx.new

@@ -0,0 +1,122 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { render, getAccordion } from '../utils';
+import { Accordion, AccordionItem } from '../../';
+
+test('Accordion should forward props and ref', () => {
+  const ref = jest.fn();
+  const onKeyDown = jest.fn();
+  render(
+    getAccordion({
+      props: { 'data-testid': 'accordion', className: 'my-accordion', onKeyDown },
+      ref
+    })
+  );
+  expect(screen.getByTestId('accordion')).toHaveClass('szh-accordion my-accordion');
+  expect(ref).toHaveBeenCalled();
+  const button = screen.getByRole('button', { name: 'header 1' });
+  button.focus();
+  fireEvent.keyDown(button, { key: 'ArrowDown' });
+  expect(onKeyDown).toHaveBeenCalled();
+});
+
+test('Accordion should expand and collapse items', () => {
+  render(getAccordion());
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
+
+  fireEvent.click(screen.getByRole('button', { name: 'header 1' }));
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
+
+  fireEvent.click(screen.getByRole('button', { name: 'header 2' }));
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
+});
+
+test('Accordion should allow multiple items to expand', () => {
+  render(getAccordion({ props: { allowMultiple: true }, item1Props: { initialEntered: true } }));
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
+
+  fireEvent.click(screen.getByRole('button', { name: 'header 2' }));
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
+});
+
+test('Accordion should support keyboard interaction', () => {
+  const onKeyDown = jest.fn();
+  render(
+    <Accordion onKeyDown={onKeyDown}>
+      <AccordionItem header="header 1">item 1</AccordionItem>
+      <AccordionItem header="header 2" initialEntered>
+        <Accordion>
+          <AccordionItem header="header 2.1">item 2.1</AccordionItem>
+          <AccordionItem header="header 2.2">item 2.2</AccordionItem>
+        </Accordion>
+      </AccordionItem>
+      <AccordionItem header="disabled" disabled>
+        disabled item is excluded from keyboard navigation
+      </AccordionItem>
+      <AccordionItem header="header 3" initialEntered>
+        <Accordion>
+          <AccordionItem header="header 3.1">item 3.1</AccordionItem>
+        </Accordion>
+      </AccordionItem>
+    </Accordion>
+  );
+
+  // Top level navigation
+  let currentFocus = screen.getByRole('button', { name: 'header 1' });
+  currentFocus.focus();
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowDown' });
+  currentFocus = screen.getByRole('button', { name: 'header 2' });
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowDown' });
+  currentFocus = screen.getByRole('button', { name: 'header 3' });
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowDown' });
+  currentFocus = screen.getByRole('button', { name: 'header 1' });
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowUp' });
+  currentFocus = screen.getByRole('button', { name: 'header 3' });
+  expect(currentFocus).toHaveFocus();
+
+  // Nested level navigation
+  currentFocus = screen.getByRole('button', { name: 'header 2.1' });
+  currentFocus.focus();
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowDown' });
+  currentFocus = screen.getByRole('button', { name: 'header 2.2' });
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowDown' });
+  currentFocus = screen.getByRole('button', { name: 'header 2.1' });
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowUp' });
+  currentFocus = screen.getByRole('button', { name: 'header 2.2' });
+  expect(currentFocus).toHaveFocus();
+  // eslint-disable-next-line
+  expect(onKeyDown.mock.lastCall[0].isDefaultPrevented()).toBe(true);
+
+  // Nested level navigation through a single item
+  currentFocus = screen.getByRole('button', { name: 'header 3.1' });
+  currentFocus.focus();
+  expect(currentFocus).toHaveFocus();
+
+  fireEvent.keyDown(currentFocus, { key: 'ArrowDown' });
+  expect(currentFocus).toHaveFocus();
+  // eslint-disable-next-line
+  expect(onKeyDown.mock.lastCall[0].isDefaultPrevented()).toBe(false);
+});