diff --git a/CHANGELOG.md b/CHANGELOG.md index e1f3cf7ff..47472b806 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,23 +5,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## [1.6.2](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.1...v1.6.2) (2023-05-24) - ### Bug Fixes -* remove root font-size from stitches.config.ts so browser font size changes work [SRED-125] ([#390](https://github.com/washingtonpost/wpds-ui-kit/issues/390)) ([c432767](https://github.com/washingtonpost/wpds-ui-kit/commit/c4327677cdd7b7337191729cbee5ecb241d294ba)) - - - - +- remove root font-size from stitches.config.ts so browser font size changes work [SRED-125] ([#390](https://github.com/washingtonpost/wpds-ui-kit/issues/390)) ([c432767](https://github.com/washingtonpost/wpds-ui-kit/commit/c4327677cdd7b7337191729cbee5ecb241d294ba)) ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package root - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Bug Fixes diff --git a/apps/vite-project/CHANGELOG.md b/apps/vite-project/CHANGELOG.md index 290841d67..40f1e08f4 100644 --- a/apps/vite-project/CHANGELOG.md +++ b/apps/vite-project/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package vite-project - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package vite-project - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/apps/vite-v2-project/CHANGELOG.md b/apps/vite-v2-project/CHANGELOG.md index 0fc3b4cbd..92f7e4cf7 100644 --- a/apps/vite-v2-project/CHANGELOG.md +++ b/apps/vite-v2-project/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package vite-v2-project - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package vite-v2-project - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/build.washingtonpost.com/CHANGELOG.md b/build.washingtonpost.com/CHANGELOG.md index 9e0afe976..5830fe1ef 100644 --- a/build.washingtonpost.com/CHANGELOG.md +++ b/build.washingtonpost.com/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-docs - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-docs/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-docs - - - - # [1.6.0](https://github.com/washingtonpost/wpds-docs/compare/v1.5.2...v1.6.0) (2023-05-24) ### Bug Fixes diff --git a/build.washingtonpost.com/components/ComponentPage/ComingSoon.jsx b/build.washingtonpost.com/components/ComponentPage/ComingSoon.jsx index 1495a5883..d668dfd62 100644 --- a/build.washingtonpost.com/components/ComponentPage/ComingSoon.jsx +++ b/build.washingtonpost.com/components/ComponentPage/ComingSoon.jsx @@ -9,10 +9,6 @@ export const ComingSoon = () => ( css={{ marginBlockEnd: "$100", position: "relative", - backgroundImage: - "url(https://media.giphy.com/media/XIqCQx02E1U9W/giphy.gif)", - backgroundSize: "cover", - backgroundPosition: "center", minHeight: 280, paddingTop: 140, }} diff --git a/build.washingtonpost.com/docs/components/menu.mdx b/build.washingtonpost.com/docs/components/menu.mdx deleted file mode 100644 index a3eb32b0b..000000000 --- a/build.washingtonpost.com/docs/components/menu.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Menu -description: A list of navigational links opened from a trigger point -component: menu -status: Coming soon ---- diff --git a/build.washingtonpost.com/docs/components/navigation-menu.mdx b/build.washingtonpost.com/docs/components/navigation-menu.mdx new file mode 100644 index 000000000..0f7b9761a --- /dev/null +++ b/build.washingtonpost.com/docs/components/navigation-menu.mdx @@ -0,0 +1,1007 @@ +--- +title: Navigation Menu +description: A list of navigation links opened from a trigger point. +component: NavigationMenu +status: Draft +openSourceLink: https://www.radix-ui.com/docs/primitives/components/navigation-menu +--- + +--- + +## Anatomy + + + +1. Trigger +2. Container +3. Links + +--- + +## Options + +### Trigger + +Trigger a navigation menu with a call to action, such as a button, link, icon, or other control. + +```jsx withPreview + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + {`Link`} + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + +``` + +### Position + +The display position can be defined directionally based on the location of the trigger. + +```jsx withPreview demoHeight="1235" + + + {`Bottom`} + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + {`Top`} + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + + + + + + {`Left`} + + + + + + + + + + + + + Apples + + + + Bananas + + + + + Oranges + + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + + Bananas + + + + + Oranges + + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + + Bananas + + + + + Oranges + + + + Pears + + + + + + + + + + + + {`Right`} + + + + + + + + + + + + + Apples + + + + Bananas + + + + + Oranges + + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + + Bananas + + + + + Oranges + + + + Pears + + + + + + + + + + + + + + + + + + Apples + + + + Bananas + + + + + Oranges + + + + Pears + + + + + + + + + + + +``` + +--- + +## Behavior + +### Hover + +A hover action changes the link color to `$accessible`. + +```jsx withPreview + + + + + Live updates + + + Map + + + FAQ + + + + {`How to prepare`} + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + Flattening the curve + + + Newsletter + + + + +``` + +### Active + +Active state changes the link color to `$accessible`, with a bold font weight. + +```jsx withPreview + + + + + Live updates + + + Map + + + FAQ + + + + {`How to prepare`} + + + + + + + + + + {`Apples`} + + + + Bananas + + + Oranges + + + Pears + + + + + + + Flattening the curve + + + Newsletter + + + + +``` + +### Disabled + +A disabled link appears as `$disabled`. + +```jsx withPreview + + + + + Live updates + + + Map + + + FAQ + + + + {`How to prepare`} + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + Flattening the curve + + + Newsletter + + + + +``` + +### Overflow + +If only some of the content can be displayed in view, a max height can be defined and +overflow should be set to `scroll` + +```jsx withPreview + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + Grapes + + + Lemons + + + Limes + + + + + + + +``` + +--- + +## Accessibility + +### Keyboard controls + +A Navigation Menu shows/hides without delay when the trigger is in focus and space/enter is selected on the keyboard. If the Navigation Menu is open and either shift+tab, or tab, is selected on the keyboard it will move focus to the next focusable element. When esc is selected on the keyboard, it will close the Navigation Menu and move the focus to the trigger. + +--- + +## Guidance + +### Avoid non-wayfinding content + +A navigation menu is primarily reserved for links. It is not meant to communicate significant amounts of freeform or non-wayfinding content; consider a [Popover](/components/popover) or [Tooltip](/components/tooltip) instead. + +```jsx withPreview isGuide="error" demoHeight="350" + + + + + + {`See details`} + + + + + +

+ The texture of a Honeycrisp Apple is no accident: Its cells have + been bred to be bigger than cells in other apples, making the fruit + feel juicier and crunchier than its competitors. These cells explode + as your teeth tear into them. Then there's its distinct flavor — a + clean, clarified sweetness that's almost frosty. + {`Learn more`} +

+ + + + + +``` + +--- + +## API Reference + + +```` diff --git a/build.washingtonpost.com/pages/components/[slug].js b/build.washingtonpost.com/pages/components/[slug].js index aa5e964d9..625d785a5 100644 --- a/build.washingtonpost.com/pages/components/[slug].js +++ b/build.washingtonpost.com/pages/components/[slug].js @@ -130,7 +130,7 @@ export const getStaticProps = async ({ params }) => { `https://registry.npmjs.org/@washingtonpost/wpds-${params.slug}` ).then((res) => res.status === 200 || res.status === 304); - if (!packageExists) { + if (!packageExists && process.env.NODE_ENV !== "development") { source.scope.status = "Coming soon"; } diff --git a/build.washingtonpost.com/public/img/components/navigation-menu/anatomy.svg b/build.washingtonpost.com/public/img/components/navigation-menu/anatomy.svg new file mode 100644 index 000000000..a96909bb2 --- /dev/null +++ b/build.washingtonpost.com/public/img/components/navigation-menu/anatomy.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/build.washingtonpost.com/public/sitemap.xml b/build.washingtonpost.com/public/sitemap.xml index 5c5f678e4..5841f4ca9 100644 --- a/build.washingtonpost.com/public/sitemap.xml +++ b/build.washingtonpost.com/public/sitemap.xml @@ -73,7 +73,7 @@ - https://build.washingtonpost.com/components/menu + https://build.washingtonpost.com/components/navigation-menu diff --git a/package-lock.json b/package-lock.json index 8db3f840b..c1042acbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -902,16 +902,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "build.washingtonpost.com/node_modules/@radix-ui/react-use-previous": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "build.washingtonpost.com/node_modules/@radix-ui/react-use-size": { "version": "1.0.0", "license": "MIT", @@ -9584,6 +9574,15 @@ "dev": true, "license": "MIT" }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@radix-ui/number": { "version": "1.0.0", "license": "MIT", @@ -9854,16 +9853,6 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-focus-guards": { "version": "1.0.0", "license": "MIT", @@ -9911,28 +9900,86 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-use-callback-ref": { + "node_modules/@radix-ui/react-id": { "version": "1.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", + "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==", "dependencies": { - "@babel/runtime": "^7.13.10" + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-id": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz", - "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==", + "node_modules/@radix-ui/react-navigation-menu": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.2.tgz", + "integrity": "sha512-1fSjOAGTThYSgJ5pENG2V8we7+6KDbfbiyt66HmLTeo0W3PAmmciclm0o97VlcVZW7q5Vg2hN7Cbj4XKo5u2sw==", "dependencies": { "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.0" + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.2", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-dismissable-layer": "1.0.3", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-visually-hidden": "1.0.2" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz", + "integrity": "sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-escape-keydown": "1.0.2" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz", + "integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-visually-hidden": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz", + "integrity": "sha512-qirnJxtYn73HEk1rXL12/mXnu2rwsNHDID10th2JGtdK25T9wX+mxRmGt7iPSahw512GbZOc0syZX1nLQGoEOg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.2" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@radix-ui/react-popover": { "version": "1.0.2", "license": "MIT", @@ -10045,16 +10092,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-use-escape-keydown": { "version": "1.0.2", "license": "MIT", @@ -10485,26 +10522,6 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-previous": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-slot": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", @@ -10547,16 +10564,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-previous": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-size": { "version": "1.0.0", "license": "MIT", @@ -10647,16 +10654,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-primitive": { "version": "1.0.1", "license": "MIT", @@ -10743,16 +10740,6 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@radix-ui/react-use-escape-keydown": { "version": "1.0.0", "license": "MIT", @@ -10764,9 +10751,10 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-use-escape-keydown/node_modules/@radix-ui/react-use-callback-ref": { + "node_modules/@radix-ui/react-use-layout-effect": { "version": "1.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz", + "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==", "dependencies": { "@babel/runtime": "^7.13.10" }, @@ -10774,10 +10762,10 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, - "node_modules/@radix-ui/react-use-layout-effect": { + "node_modules/@radix-ui/react-use-previous": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz", - "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz", + "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==", "dependencies": { "@babel/runtime": "^7.13.10" }, @@ -18072,6 +18060,10 @@ "resolved": "ui/kitchen-sink", "link": true }, + "node_modules/@washingtonpost/wpds-navigation-menu": { + "resolved": "ui/navigation-menu", + "link": true + }, "node_modules/@washingtonpost/wpds-pagination-dots": { "resolved": "ui/pagination-dots", "link": true @@ -40569,6 +40561,15 @@ "node": ">=10" } }, + "node_modules/popper-max-size-modifier": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/popper-max-size-modifier/-/popper-max-size-modifier-0.2.0.tgz", + "integrity": "sha512-UerPt9pZfTFnpSpIBVJrR3ibHMuU1k5K01AyNLfMUWCr4z1MFH+dsayPlAF9ZeYExa02HPiQn5OIMqUSVtJEbg==", + "deprecated": "We recommend switching to Floating UI which supports this modifier out of the box: https://floating-ui.com/docs/size", + "peerDependencies": { + "@popperjs/core": "^2.2.0" + } + }, "node_modules/posix-character-classes": { "version": "0.1.1", "dev": true, @@ -41627,6 +41628,11 @@ "react": ">=16.13.1" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-hook-form": { "version": "7.41.0", "license": "MIT", @@ -41682,6 +41688,20 @@ "react-dom": ">=16.8" } }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "dev": true, @@ -41799,7 +41819,8 @@ }, "node_modules/react-transition-group": { "version": "4.4.5", - "license": "BSD-3-Clause", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -47219,6 +47240,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.3.1", "dev": true, @@ -48510,16 +48539,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "ui/avatar/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "ui/box": { "name": "@washingtonpost/wpds-box", "version": "1.6.2", @@ -48658,16 +48677,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "ui/checkbox/node_modules/@radix-ui/react-use-previous": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "ui/checkbox/node_modules/@radix-ui/react-use-size": { "version": "1.0.0", "license": "MIT", @@ -50028,6 +50037,7 @@ "@washingtonpost/wpds-input-shared": "1.6.2", "@washingtonpost/wpds-input-text": "1.6.2", "@washingtonpost/wpds-input-textarea": "1.6.2", + "@washingtonpost/wpds-navigation-menu": "1.6.2", "@washingtonpost/wpds-pagination-dots": "1.6.2", "@washingtonpost/wpds-popover": "1.6.2", "@washingtonpost/wpds-radio-group": "1.6.2", @@ -50066,6 +50076,7 @@ "@washingtonpost/wpds-input-shared": "*", "@washingtonpost/wpds-input-text": "*", "@washingtonpost/wpds-input-textarea": "*", + "@washingtonpost/wpds-navigation-menu": "*", "@washingtonpost/wpds-pagination-dots": "*", "@washingtonpost/wpds-popover": "*", "@washingtonpost/wpds-radio-group": "*", @@ -50110,6 +50121,27 @@ "react-dom": "^16.0.1 || ^17.0.2" } }, + "ui/navigation-menu": { + "name": "@washingtonpost/wpds-navigation-menu", + "version": "1.6.2", + "license": "MIT", + "dependencies": { + "@popperjs/core": "^2.11.7", + "@radix-ui/react-navigation-menu": "^1.1.2", + "@washingtonpost/wpds-theme": "1.6.2", + "popper-max-size-modifier": "^0.2.0", + "react-popper": "^2.3.0", + "react-transition-group": "^4.4.5" + }, + "devDependencies": { + "tsup": "5.11.13", + "typescript": "4.5.5" + }, + "peerDependencies": { + "@washingtonpost/wpds-theme": "*", + "react": "^16.8.6 || ^17.0.2" + } + }, "ui/pagination-dots": { "name": "@washingtonpost/wpds-pagination-dots", "version": "1.6.2", @@ -50238,26 +50270,6 @@ "react-dom": "^16.8 || ^17.0 || ^18.0" } }, - "ui/radio-group/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "ui/radio-group/node_modules/@radix-ui/react-use-previous": { - "version": "1.0.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "ui/radio-group/node_modules/@radix-ui/react-use-size": { "version": "1.0.0", "license": "MIT", @@ -56300,6 +56312,11 @@ "version": "1.0.0-next.21", "dev": true }, + "@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + }, "@radix-ui/number": { "version": "1.0.0", "requires": { @@ -56467,12 +56484,6 @@ "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" } - }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } } } }, @@ -56504,12 +56515,6 @@ "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" } - }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } } } }, @@ -56522,6 +56527,61 @@ "@radix-ui/react-use-layout-effect": "1.0.0" } }, + "@radix-ui/react-navigation-menu": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.2.tgz", + "integrity": "sha512-1fSjOAGTThYSgJ5pENG2V8we7+6KDbfbiyt66HmLTeo0W3PAmmciclm0o97VlcVZW7q5Vg2hN7Cbj4XKo5u2sw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-collection": "1.0.2", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-context": "1.0.0", + "@radix-ui/react-direction": "1.0.0", + "@radix-ui/react-dismissable-layer": "1.0.3", + "@radix-ui/react-id": "1.0.0", + "@radix-ui/react-presence": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-controllable-state": "1.0.0", + "@radix-ui/react-use-layout-effect": "1.0.0", + "@radix-ui/react-use-previous": "1.0.0", + "@radix-ui/react-visually-hidden": "1.0.2" + }, + "dependencies": { + "@radix-ui/react-dismissable-layer": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz", + "integrity": "sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.0", + "@radix-ui/react-compose-refs": "1.0.0", + "@radix-ui/react-primitive": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.0", + "@radix-ui/react-use-escape-keydown": "1.0.2" + } + }, + "@radix-ui/react-use-escape-keydown": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz", + "integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.0" + } + }, + "@radix-ui/react-visually-hidden": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz", + "integrity": "sha512-qirnJxtYn73HEk1rXL12/mXnu2rwsNHDID10th2JGtdK25T9wX+mxRmGt7iPSahw512GbZOc0syZX1nLQGoEOg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.2" + } + } + } + }, "@radix-ui/react-popover": { "version": "1.0.2", "requires": { @@ -56599,12 +56659,6 @@ "@radix-ui/react-slot": "1.0.1" } }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@radix-ui/react-use-escape-keydown": { "version": "1.0.2", "requires": { @@ -56866,18 +56920,6 @@ "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" } - }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, - "@radix-ui/react-use-previous": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } } } }, @@ -56910,12 +56952,6 @@ "@radix-ui/react-slot": "1.0.1" } }, - "@radix-ui/react-use-previous": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@radix-ui/react-use-size": { "version": "1.0.0", "requires": { @@ -56987,12 +57023,6 @@ "@radix-ui/react-use-callback-ref": "1.0.0", "@radix-ui/react-use-controllable-state": "1.0.0" } - }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } } } }, @@ -57043,14 +57073,6 @@ "requires": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.0" - }, - "dependencies": { - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - } } }, "@radix-ui/react-use-escape-keydown": { @@ -57058,14 +57080,6 @@ "requires": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.0" - }, - "dependencies": { - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - } } }, "@radix-ui/react-use-layout-effect": { @@ -57076,6 +57090,14 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-use-previous": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz", + "integrity": "sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, "@radix-ui/react-use-rect": { "version": "1.0.0", "requires": { @@ -62728,12 +62750,6 @@ "@radix-ui/react-use-callback-ref": "1.0.0", "@radix-ui/react-use-layout-effect": "1.0.0" } - }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } } } }, @@ -62815,12 +62831,6 @@ "@radix-ui/react-slot": "1.0.1" } }, - "@radix-ui/react-use-previous": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@radix-ui/react-use-size": { "version": "1.0.0", "requires": { @@ -63040,12 +63050,6 @@ "@radix-ui/react-slot": "1.0.1" } }, - "@radix-ui/react-use-previous": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@radix-ui/react-use-size": { "version": "1.0.0", "requires": { @@ -63462,6 +63466,19 @@ } } }, + "@washingtonpost/wpds-navigation-menu": { + "version": "file:ui/navigation-menu", + "requires": { + "@popperjs/core": "^2.11.7", + "@radix-ui/react-navigation-menu": "^1.1.2", + "@washingtonpost/wpds-theme": "1.6.2", + "popper-max-size-modifier": "^0.2.0", + "react-popper": "^2.3.0", + "react-transition-group": "^4.4.5", + "tsup": "5.11.13", + "typescript": "4.5.5" + } + }, "@washingtonpost/wpds-pagination-dots": { "version": "file:ui/pagination-dots", "requires": { @@ -63543,18 +63560,6 @@ "@radix-ui/react-use-controllable-state": "1.0.0" } }, - "@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, - "@radix-ui/react-use-previous": { - "version": "1.0.0", - "requires": { - "@babel/runtime": "^7.13.10" - } - }, "@radix-ui/react-use-size": { "version": "1.0.0", "requires": { @@ -63798,6 +63803,7 @@ "@washingtonpost/wpds-input-shared": "1.6.2", "@washingtonpost/wpds-input-text": "1.6.2", "@washingtonpost/wpds-input-textarea": "1.6.2", + "@washingtonpost/wpds-navigation-menu": "1.6.2", "@washingtonpost/wpds-pagination-dots": "1.6.2", "@washingtonpost/wpds-popover": "1.6.2", "@washingtonpost/wpds-radio-group": "1.6.2", @@ -79000,6 +79006,11 @@ "@babel/runtime": "^7.17.8" } }, + "popper-max-size-modifier": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/popper-max-size-modifier/-/popper-max-size-modifier-0.2.0.tgz", + "integrity": "sha512-UerPt9pZfTFnpSpIBVJrR3ibHMuU1k5K01AyNLfMUWCr4z1MFH+dsayPlAF9ZeYExa02HPiQn5OIMqUSVtJEbg==" + }, "posix-character-classes": { "version": "0.1.1", "dev": true @@ -79751,6 +79762,11 @@ "@babel/runtime": "^7.12.5" } }, + "react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "react-hook-form": { "version": "7.41.0" }, @@ -79780,6 +79796,15 @@ "prop-types": "^15.8.1" } }, + "react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.11.0", "dev": true @@ -79839,6 +79864,8 @@ }, "react-transition-group": { "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "requires": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -83729,6 +83756,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.3.1", "dev": true, diff --git a/ui/accordion/CHANGELOG.md b/ui/accordion/CHANGELOG.md index a3e2b3aa6..c463e89ff 100644 --- a/ui/accordion/CHANGELOG.md +++ b/ui/accordion/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-accordion - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-accordion - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/alert-banner/CHANGELOG.md b/ui/alert-banner/CHANGELOG.md index ed0b0705a..3ee4f3d59 100644 --- a/ui/alert-banner/CHANGELOG.md +++ b/ui/alert-banner/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-alert-banner - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-alert-banner - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/app-bar/CHANGELOG.md b/ui/app-bar/CHANGELOG.md index 623b305b7..1dd066f6b 100644 --- a/ui/app-bar/CHANGELOG.md +++ b/ui/app-bar/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-app-bar - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-app-bar - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/avatar/CHANGELOG.md b/ui/avatar/CHANGELOG.md index 017170eaa..fa588b87d 100644 --- a/ui/avatar/CHANGELOG.md +++ b/ui/avatar/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-avatar - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-avatar - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/box/CHANGELOG.md b/ui/box/CHANGELOG.md index 97449a913..7f2e7619b 100644 --- a/ui/box/CHANGELOG.md +++ b/ui/box/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-box - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-box - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/button/CHANGELOG.md b/ui/button/CHANGELOG.md index cd88fe74c..0582ad262 100644 --- a/ui/button/CHANGELOG.md +++ b/ui/button/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-button - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-button - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/card/CHANGELOG.md b/ui/card/CHANGELOG.md index 2a874b531..ee3ecd346 100644 --- a/ui/card/CHANGELOG.md +++ b/ui/card/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-card - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-card - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/carousel/CHANGELOG.md b/ui/carousel/CHANGELOG.md index 6a800edf8..7af651afc 100644 --- a/ui/carousel/CHANGELOG.md +++ b/ui/carousel/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-carousel - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-carousel - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/checkbox/CHANGELOG.md b/ui/checkbox/CHANGELOG.md index 0311b1a45..f9dff19db 100644 --- a/ui/checkbox/CHANGELOG.md +++ b/ui/checkbox/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-checkbox - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-checkbox - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/container/CHANGELOG.md b/ui/container/CHANGELOG.md index f754bb4cf..3ad23d3cf 100644 --- a/ui/container/CHANGELOG.md +++ b/ui/container/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-container - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-container - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/divider/CHANGELOG.md b/ui/divider/CHANGELOG.md index e25d277c5..47efd2683 100644 --- a/ui/divider/CHANGELOG.md +++ b/ui/divider/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-divider - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-divider - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/drawer/CHANGELOG.md b/ui/drawer/CHANGELOG.md index 813674bf5..a309e8cb9 100644 --- a/ui/drawer/CHANGELOG.md +++ b/ui/drawer/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-drawer - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-drawer - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/error-message/CHANGELOG.md b/ui/error-message/CHANGELOG.md index 9bf54fbd4..f1efe3f6e 100644 --- a/ui/error-message/CHANGELOG.md +++ b/ui/error-message/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-error-message - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-error-message - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/eslint-plugin/CHANGELOG.md b/ui/eslint-plugin/CHANGELOG.md index c9818f99f..bd7d217e8 100644 --- a/ui/eslint-plugin/CHANGELOG.md +++ b/ui/eslint-plugin/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/eslint-plugin-wpds - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/eslint-plugin-wpds - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/fieldset/CHANGELOG.md b/ui/fieldset/CHANGELOG.md index f9a1a27d2..38b03d312 100644 --- a/ui/fieldset/CHANGELOG.md +++ b/ui/fieldset/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-fieldset - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-fieldset - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/helper-text/CHANGELOG.md b/ui/helper-text/CHANGELOG.md index 327082d90..6b0605944 100644 --- a/ui/helper-text/CHANGELOG.md +++ b/ui/helper-text/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-helper-text - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-helper-text - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/icon/CHANGELOG.md b/ui/icon/CHANGELOG.md index 88512ce4c..9fe8fdf1c 100644 --- a/ui/icon/CHANGELOG.md +++ b/ui/icon/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-icon - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-icon - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/input-label/CHANGELOG.md b/ui/input-label/CHANGELOG.md index f0b3a88c0..cf0d61a6a 100644 --- a/ui/input-label/CHANGELOG.md +++ b/ui/input-label/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-input-label - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-input-label - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/input-password/CHANGELOG.md b/ui/input-password/CHANGELOG.md index 77076cdb3..d15a300bf 100644 --- a/ui/input-password/CHANGELOG.md +++ b/ui/input-password/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-input-password - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-input-password - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/input-shared/CHANGELOG.md b/ui/input-shared/CHANGELOG.md index 1d7294ac8..2bd23e0a8 100644 --- a/ui/input-shared/CHANGELOG.md +++ b/ui/input-shared/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-input-shared - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-input-shared - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/input-text/CHANGELOG.md b/ui/input-text/CHANGELOG.md index 55906621a..98f0a4f9a 100644 --- a/ui/input-text/CHANGELOG.md +++ b/ui/input-text/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-input-text - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-input-text - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/input-text/src/InputText.tsx b/ui/input-text/src/InputText.tsx index 5118c045e..08fa398b1 100644 --- a/ui/input-text/src/InputText.tsx +++ b/ui/input-text/src/InputText.tsx @@ -7,7 +7,7 @@ import { Icon } from "@washingtonpost/wpds-icon"; import { useFloating, unstyledInputStyles, - globalInputAutoFillTriggerAnimations + globalInputAutoFillTriggerAnimations, } from "@washingtonpost/wpds-input-shared"; import { InputLabel } from "@washingtonpost/wpds-input-label"; import { ErrorMessage } from "@washingtonpost/wpds-error-message"; @@ -18,7 +18,7 @@ import { Globe, Phone, Email, - Close + Close, } from "@washingtonpost/wpds-assets"; import { StyledContainer } from "./StyledContainer"; import type * as WPDS from "@washingtonpost/wpds-theme"; @@ -27,11 +27,11 @@ const NAME = "InputText"; const LabelInputWrapper = styled("div", { flex: 1, - position: "relative" + position: "relative", }); const UnstyledInput = styled("input", { - ...unstyledInputStyles + ...unstyledInputStyles, }); const TextInputLabel = styled(InputLabel, { @@ -42,17 +42,17 @@ const TextInputLabel = styled(InputLabel, { transform: `translateY(${theme.space["100"]})`, transition: theme.transitions.allFast, "@reducedMotion": { - transition: "none" + transition: "none", }, variants: { isFloating: { true: { fontSize: theme.fontSizes["075"], lineHeight: theme.lineHeights["100"], - transform: `translateY(${theme.space["050"]})` - } - } - } + transform: `translateY(${theme.space["050"]})`, + }, + }, + }, }); const IconContainer = styled("div", { @@ -63,15 +63,15 @@ const IconContainer = styled("div", { variants: { isDisabled: { true: { - color: "inherit" - } - } - } + color: "inherit", + }, + }, + }, }); const ButtonIcon = styled(Button, { borderRadius: theme.radii["012"], - marginInlineEnd: theme.space["050"] + marginInlineEnd: theme.space["050"], }); export interface InputTextProps @@ -321,7 +321,7 @@ export const InputText = React.forwardRef( border: "none", color: disabled ? theme.colors.onDisabled - : theme.colors.accessible + : theme.colors.accessible, }} onClick={handleButtonIconClick} > diff --git a/ui/input-textarea/CHANGELOG.md b/ui/input-textarea/CHANGELOG.md index 22bb131ab..d0fcf4199 100644 --- a/ui/input-textarea/CHANGELOG.md +++ b/ui/input-textarea/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-input-textarea - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-input-textarea - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/kit/CHANGELOG.md b/ui/kit/CHANGELOG.md index c020b9f27..2624030ad 100644 --- a/ui/kit/CHANGELOG.md +++ b/ui/kit/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-ui-kit - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-ui-kit - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/kit/package.json b/ui/kit/package.json index 16e3a0b73..e3ec686df 100644 --- a/ui/kit/package.json +++ b/ui/kit/package.json @@ -32,6 +32,7 @@ "url": "https://github.com/washingtonpost/wpds-ui-kit/issues" }, "dependencies": { + "@washingtonpost/wpds-navigation-menu": "1.6.2", "@washingtonpost/eslint-plugin-wpds": "1.6.2", "@washingtonpost/wpds-accordion": "1.6.2", "@washingtonpost/wpds-alert-banner": "1.6.2", @@ -70,6 +71,7 @@ "typescript": "4.5.5" }, "peerDependencies": { + "@washingtonpost/wpds-navigation-menu": "*", "@washingtonpost/eslint-plugin-wpds": "*", "@washingtonpost/wpds-accordion": "*", "@washingtonpost/wpds-alert-banner": "*", diff --git a/ui/kit/src/index.ts b/ui/kit/src/index.ts index 2600cabfc..e2692a905 100644 --- a/ui/kit/src/index.ts +++ b/ui/kit/src/index.ts @@ -1,4 +1,5 @@ // insert new component exports here +export * from "@washingtonpost/wpds-navigation-menu"; export * from "@washingtonpost/wpds-tabs"; export * from "@washingtonpost/wpds-switch"; export * from "@washingtonpost/wpds-card"; diff --git a/ui/kitchen-sink/CHANGELOG.md b/ui/kitchen-sink/CHANGELOG.md index 61ebd2796..8721de1f5 100644 --- a/ui/kitchen-sink/CHANGELOG.md +++ b/ui/kitchen-sink/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-kitchen-sink - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-kitchen-sink - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/kitchen-sink/src/KitchenSink.tsx b/ui/kitchen-sink/src/KitchenSink.tsx index abfc4a1ed..33e7d6866 100644 --- a/ui/kitchen-sink/src/KitchenSink.tsx +++ b/ui/kitchen-sink/src/KitchenSink.tsx @@ -25,8 +25,9 @@ import { Popover, Switch, Tabs, + NavigationMenu, } from "@washingtonpost/wpds-ui-kit"; -import { Chart, Settings, Info } from "@washingtonpost/wpds-assets"; +import { Chart, Settings, Info, Menu } from "@washingtonpost/wpds-assets"; const Headline = styled("h1", { paddingTop: "$200", @@ -438,6 +439,39 @@ export const KitchenSink = () => { Kenya is here 🇰🇪 Austira is here 🇦🇹 +

NavigationMenu

+ + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + ); }; diff --git a/ui/navigation-menu/README.md b/ui/navigation-menu/README.md new file mode 100644 index 000000000..b72e471cb --- /dev/null +++ b/ui/navigation-menu/README.md @@ -0,0 +1,9 @@ +# NavigationMenu + +```jsx +import { NavigationMenu } from "@washingtonpost/wpds-ui-kit"; + +function Component() { + return ; +} +``` diff --git a/ui/navigation-menu/package.json b/ui/navigation-menu/package.json new file mode 100644 index 000000000..6dc9d8398 --- /dev/null +++ b/ui/navigation-menu/package.json @@ -0,0 +1,50 @@ +{ + "name": "@washingtonpost/wpds-navigation-menu", + "version": "1.6.2", + "description": "WPDS NavigationMenu", + "author": "WPDS Support ", + "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme", + "license": "MIT", + "source": "src/index.ts", + "main": "dist/index.js", + "module": "dist/esm/index.js", + "types": "dist/index.d.ts", + "files": [ + "dist", + "README.md", + "src" + ], + "sideEffects": false, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/washingtonpost/wpds-ui-kit.git" + }, + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1", + "build": "tsup src/index.ts --loader .ts=tsx --minify --format esm,cjs --dts --sourcemap --legacy-output --external react,react-dom", + "dev": "tsup src/index.ts --format esm,cjs --watch --dts --legacy-output --external react,react-dom", + "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" + }, + "bugs": { + "url": "https://github.com/washingtonpost/wpds-ui-kit/issues" + }, + "devDependencies": { + "tsup": "5.11.13", + "typescript": "4.5.5" + }, + "peerDependencies": { + "@washingtonpost/wpds-theme": "*", + "react": "^16.8.6 || ^17.0.2" + }, + "dependencies": { + "@popperjs/core": "^2.11.7", + "@radix-ui/react-navigation-menu": "^1.1.2", + "@washingtonpost/wpds-theme": "1.6.2", + "popper-max-size-modifier": "^0.2.0", + "react-popper": "^2.3.0", + "react-transition-group": "^4.4.5" + } +} diff --git a/ui/navigation-menu/src/NavigationMenu.tsx b/ui/navigation-menu/src/NavigationMenu.tsx new file mode 100644 index 000000000..e837bc802 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenu.tsx @@ -0,0 +1,27 @@ +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; +import { NavigationMenuItem } from "./NavigationMenuItem"; +import { NavigationMenuLink } from "./NavigationMenuLink"; +import { NavigationMenuTrigger } from "./NavigationMenuTrigger"; +import { NavigationMenuContent } from "./NavigationMenuContent"; +import { NavigationMenuSub } from "./NavigationMenuSub"; + +export type NavigationMenuProps = { + Root: typeof NavigationMenuRoot; + List: typeof NavigationMenuList; + Item: typeof NavigationMenuItem; + Link: typeof NavigationMenuLink; + Trigger: typeof NavigationMenuTrigger; + Content: typeof NavigationMenuContent; + Sub: typeof NavigationMenuSub; +}; + +export const NavigationMenu: NavigationMenuProps = { + Root: NavigationMenuRoot, + List: NavigationMenuList, + Item: NavigationMenuItem, + Link: NavigationMenuLink, + Trigger: NavigationMenuTrigger, + Content: NavigationMenuContent, + Sub: NavigationMenuSub, +}; diff --git a/ui/navigation-menu/src/NavigationMenuContent.test.tsx b/ui/navigation-menu/src/NavigationMenuContent.test.tsx new file mode 100644 index 000000000..bd6f23cf6 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuContent.test.tsx @@ -0,0 +1,265 @@ +import * as React from "react"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; +import { NavigationMenuItem } from "./NavigationMenuItem"; +import { NavigationMenuTrigger } from "./NavigationMenuTrigger"; +import { NavigationMenuContent } from "./NavigationMenuContent"; + +describe("NavigationMenuContent", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render( + + + + {testText} + + + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); + + test("shows popper on hover", () => { + render( + + + + Trigger + + + + + ); + userEvent.hover(screen.getByRole("button")); + const content = screen.getByTestId("wpds-nav-menu-content-popper"); + expect(content).toBeVisible(); + }); + + test("accepts a ref", () => { + const testRef = { current: null }; + render( + + + + + + + + ); + expect(testRef.current).toBeInTheDocument(); + }); + + test("accepts a function ref", () => { + const funcRef = jest.fn(); + render( + + + + + + + + ); + expect(funcRef).toHaveBeenCalled(); + }); + + describe("uses the side prop", () => { + test("bottom", async () => { + const testText = "Test Text"; + render( + + + + Trigger + {testText} + + + + ); + userEvent.hover(screen.getByRole("button")); + const content = screen.getByText(testText); + expect(content).toHaveStyle("--initialposition: 0, -0.25rem"); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual( + "bottom-start" + ); + }); + }); + + test("top", async () => { + const testText = "Test Text"; + render( + + + + Trigger + + {testText} + + + + + ); + userEvent.hover(screen.getByRole("button")); + const content = screen.getByText(testText); + expect(content).toHaveStyle("--initialposition: 0, 0.25rem"); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual( + "top-start" + ); + }); + }); + + test("left", async () => { + const testText = "Test Text"; + render( + + + + Trigger + + {testText} + + + + + ); + userEvent.hover(screen.getByRole("button")); + const content = screen.getByText(testText); + expect(content).toHaveStyle("--initialposition: 0.25rem, 0"); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual( + "left-start" + ); + }); + }); + + test("right", async () => { + const testText = "Test Text"; + render( + + + + Trigger + + {testText} + + + + + ); + userEvent.hover(screen.getByRole("button")); + const content = screen.getByText(testText); + expect(content).toHaveStyle("--initialposition: -0.25rem, 0"); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual( + "right-start" + ); + }); + }); + }); + + describe("uses the align prop", () => { + test("start", async () => { + render( + + + + Trigger + + + + + ); + userEvent.hover(screen.getByRole("button")); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual( + "bottom-start" + ); + }); + }); + + test("center", async () => { + render( + + + + Trigger + + + + + ); + userEvent.hover(screen.getByRole("button")); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual("bottom"); + }); + }); + + test("end", async () => { + render( + + + + Trigger + + + + + ); + userEvent.hover(screen.getByRole("button")); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper.getAttribute("data-popper-placement")).toEqual( + "bottom-end" + ); + }); + }); + }); + + test("accepts popperOptions", async () => { + render( + + + + Trigger + + + + + ); + userEvent.hover(screen.getByRole("button")); + const popper = screen.getByTestId("wpds-nav-menu-content-popper"); + await waitFor(() => { + // eslint-disable-next-line jest-dom/prefer-to-have-attribute + expect(popper).toHaveStyle("transform: translate(0px, 16px)"); + }); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuContent.tsx b/ui/navigation-menu/src/NavigationMenuContent.tsx new file mode 100644 index 000000000..267a97ae3 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuContent.tsx @@ -0,0 +1,188 @@ +import * as React from "react"; +import { createPortal } from "react-dom"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import { CSSTransition } from "react-transition-group"; +import { usePopper } from "react-popper"; +import maxSize from "popper-max-size-modifier"; +import { styled, theme } from "@washingtonpost/wpds-theme"; + +import type * as WPDS from "@washingtonpost/wpds-theme"; +import type { Modifier } from "@popperjs/core"; + +const NAME = "NavigationMenuContent"; + +const StyledNavigationMenuContent = styled(NavigationMenuPrimitive.Content, { + background: theme.colors.secondary, + border: `solid 1px ${theme.colors.subtle}`, + borderRadius: theme.radii["012"], + boxShadow: theme.shadows["200"], + minWidth: "150px", + maxHeight: "inherit", + overflow: "auto", + padding: theme.space["050"], + visibility: "hidden", + "&.wpds-nav-menu-content-enter": { + visibility: "visible", + opacity: 0, + transform: "translate(var(--initialposition))", + }, + "&.wpds-nav-menu-content-enter-active": { + opacity: 1, + transform: "translate(0)", + transition: `all ${theme.transitions.fast} ${theme.transitions.inOut}`, + }, + "&.wpds-nav-menu-content-enter-done": { + visibility: "visible", + }, + "&.wpds-nav-menu-content-exit": { + visibility: "visible", + opacity: 1, + transform: "translate(0)", + }, + "&.wpds-nav-menu-content-exit-active": { + opacity: 0, + transform: "translate(var(--initialposition))", + transition: `all ${theme.transitions.fast} ${theme.transitions.inOut}`, + }, + "&.wpds-nav-menu-content-exit-done": { + visibility: "hidden", + }, +}); + +const applyMaxSize: Modifier<"applyMaxSize", Record> = { + name: "applyMaxSize", + enabled: true, + phase: "beforeWrite", + requires: ["maxSize"], + fn: ({ state }) => { + const { height } = state.modifiersData.maxSize; + state.styles.popper = { + ...state.styles.popper, + maxHeight: `${height}px`, + }; + }, +}; + +export type NavigationMenuContentProps = { + /** Any React node may be used as a child to allow for formatting */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; + /** Trigger dom element used for positioning */ + referenceElement?: HTMLButtonElement; + /** The preferred side of the trigger to render against when open. */ + side?: "bottom" | "left" | "right" | "top"; + /** The preferred alignment against the anchor. */ + align?: "center" | "end" | "start"; + /** Popper options object to pass to internal popper */ + popperOptions?: Parameters[2]; +} & React.ComponentPropsWithRef; + +export const NavigationMenuContent = React.forwardRef< + HTMLDivElement, + NavigationMenuContentProps +>( + ( + { + children, + referenceElement, + side = "bottom", + align = "start", + popperOptions, + ...props + }, + ref + ) => { + const [transitionIn, setTransitionIn] = React.useState(false); + const nodeRef = React.useRef(null); + const datasetRef = React.useCallback((node) => { + if (node !== null) { + nodeRef.current = node; + if (ref) { + typeof ref === "function" ? ref(node) : (ref.current = node); + } + setTransitionIn(node.dataset.state === "open"); + } + }, []); + + const [popperElement, setPopperElement] = + React.useState(null); + + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: align === "center" ? side : `${side}-${align}`, + modifiers: [ + { + name: "offset", + options: { + offset: [0, 8], + }, + }, + maxSize, + applyMaxSize, + ...(popperOptions && popperOptions.modifiers + ? popperOptions.modifiers + : []), + ], + strategy: popperOptions?.strategy, + onFirstUpdate: popperOptions?.onFirstUpdate, + }); + + const offset = theme.sizes["025"].value; + let initialPosition = `0, 0`; + + switch (side) { + case "top": + initialPosition = `0, ${offset}`; + break; + case "right": + initialPosition = `-${offset}, 0`; + break; + case "bottom": + initialPosition = `0, -${offset}`; + break; + case "left": + initialPosition = `${offset}, 0`; + break; + } + + const [mounted, setMounted] = React.useState(false); + + React.useEffect(() => { + setMounted(true); + }, []); + + return mounted + ? createPortal( +
+ + + {children} + + +
, + document.body + ) + : null; + } +); + +NavigationMenuContent.displayName = NAME; diff --git a/ui/navigation-menu/src/NavigationMenuItem.test.tsx b/ui/navigation-menu/src/NavigationMenuItem.test.tsx new file mode 100644 index 000000000..11a2dc70b --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuItem.test.tsx @@ -0,0 +1,48 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; +import { NavigationMenuItem } from "./NavigationMenuItem"; +import { NavigationMenuTrigger } from "./NavigationMenuTrigger"; +import { NavigationMenuContent } from "./NavigationMenuContent"; + +describe("NavigationMenuItem", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render( + + + {testText} + + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); + + test("renders a trigger as a child", () => { + render( + + + + + + + + ); + expect(screen.getByRole("button")).toBeVisible(); + }); + + test("renders content as a child", () => { + const testText = "Test Text"; + render( + + + + {testText} + + + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuItem.tsx b/ui/navigation-menu/src/NavigationMenuItem.tsx new file mode 100644 index 000000000..4b0a89dfc --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuItem.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import { NavigationMenuTrigger } from "./NavigationMenuTrigger"; +import { NavigationMenuContent } from "./NavigationMenuContent"; + +import type * as WPDS from "@washingtonpost/wpds-theme"; + +const NAME = "NavigationMenuItem"; + +export type NavigationMenuItemProps = { + /** Any React node may be used as a child to allow for formatting */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; +} & React.ComponentPropsWithRef; + +export const NavigationMenuItem = React.forwardRef< + HTMLLIElement, + NavigationMenuItemProps +>(({ children, ...props }, ref) => { + const [referenceElement, setReferenceElement] = + React.useState(null); + + return ( + + {React.Children.map(children, (child) => { + if (React.isValidElement(child)) { + if (child.type === NavigationMenuTrigger) { + return React.cloneElement(child, { + ref: setReferenceElement, + }); + } else if (child.type === NavigationMenuContent) { + return React.cloneElement(child, { + referenceElement: referenceElement, + }); + } + return child; + } + return child; + })} + + ); +}); + +NavigationMenuItem.displayName = NAME; diff --git a/ui/navigation-menu/src/NavigationMenuLink.test.tsx b/ui/navigation-menu/src/NavigationMenuLink.test.tsx new file mode 100644 index 000000000..ea2d1fe3b --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuLink.test.tsx @@ -0,0 +1,38 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; +import { NavigationMenuItem } from "./NavigationMenuItem"; +import { NavigationMenuLink } from "./NavigationMenuLink"; + +describe("NavigationMenuLink", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render( + + + + {testText} + + + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); + + test("renders asChild unstyled", () => { + const testText = "Test Text"; + render( + + + + + {testText} + + + + + ); + expect(screen.getByText(testText)).not.toHaveClass(); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuLink.tsx b/ui/navigation-menu/src/NavigationMenuLink.tsx new file mode 100644 index 000000000..1ae5b54b1 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuLink.tsx @@ -0,0 +1,56 @@ +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import { styled, theme } from "@washingtonpost/wpds-theme"; + +import type * as WPDS from "@washingtonpost/wpds-theme"; + +const NAME = "NavigationMenuLink"; + +const StyledNavigationMenuLink = styled(NavigationMenuPrimitive.Link, { + color: theme.colors.disabled, + display: "block", + fontFamily: theme.fonts.meta, + fontSize: theme.fontSizes["100"], + padding: theme.space["050"], + pointerEvents: "none", + textDecoration: "none", + "&:link, &:visited": { + color: theme.colors.primary, + pointerEvents: "auto", + }, + "&:hover": { + color: theme.colors.accessible, + }, + "&[data-active]": { + color: theme.colors.accessible, + fontWeight: theme.fontWeights.bold, + }, +}); + +export type NavigationMenuLinkProps = { + /** Any React node may be used as a child to allow for formatting */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; +} & React.ComponentPropsWithRef; + +export const NavigationMenuLink = React.forwardRef< + HTMLAnchorElement, + NavigationMenuLinkProps +>(({ children, ...props }, ref) => { + return ( + <> + {props.asChild ? ( + + {children} + + ) : ( + + {children} + + )} + + ); +}); + +NavigationMenuLink.displayName = NAME; diff --git a/ui/navigation-menu/src/NavigationMenuList.test.tsx b/ui/navigation-menu/src/NavigationMenuList.test.tsx new file mode 100644 index 000000000..e4bb8bcef --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuList.test.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; + +describe("NavigationMenuList", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render( + + {testText} + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuList.tsx b/ui/navigation-menu/src/NavigationMenuList.tsx new file mode 100644 index 000000000..4ba122f3e --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuList.tsx @@ -0,0 +1,37 @@ +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import { styled } from "@washingtonpost/wpds-theme"; + +import type * as WPDS from "@washingtonpost/wpds-theme"; + +const NAME = "NavigationMenuList"; + +const StyledNavigationMenuList = styled(NavigationMenuPrimitive.List, { + display: "flex", + listStyle: "none", + marginBlock: 0, + paddingInlineStart: 0, + "&[data-orientation='vertical']": { + flexDirection: "column", + }, +}); + +export type NavigationMenuListProps = { + /** Any React node may be used as a child to allow for formatting */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; +} & React.ComponentPropsWithRef; + +export const NavigationMenuList = React.forwardRef< + HTMLUListElement, + NavigationMenuListProps +>(({ children, ...props }, ref) => { + return ( + + {children} + + ); +}); + +NavigationMenuList.displayName = NAME; diff --git a/ui/navigation-menu/src/NavigationMenuRoot.test.tsx b/ui/navigation-menu/src/NavigationMenuRoot.test.tsx new file mode 100644 index 000000000..4bed7bb69 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuRoot.test.tsx @@ -0,0 +1,11 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; + +describe("NavigationMenu Root", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render({testText}); + expect(screen.getByText(testText)).toBeVisible(); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuRoot.tsx b/ui/navigation-menu/src/NavigationMenuRoot.tsx new file mode 100644 index 000000000..674b0a836 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuRoot.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import type * as WPDS from "@washingtonpost/wpds-theme"; + +const NAME = "NavigationMenuRoot"; + +export type NavigationMenuRootProps = { + /** Any React node may be used as a child to allow for formatting */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; +} & React.ComponentPropsWithRef; + +export const NavigationMenuRoot = React.forwardRef< + HTMLDivElement, + NavigationMenuRootProps +>(({ children, ...props }, ref) => { + return ( + + {children} + + ); +}); + +NavigationMenuRoot.displayName = NAME; diff --git a/ui/navigation-menu/src/NavigationMenuSub.test.tsx b/ui/navigation-menu/src/NavigationMenuSub.test.tsx new file mode 100644 index 000000000..c6295cb57 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuSub.test.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; +import { NavigationMenuItem } from "./NavigationMenuItem"; +import { NavigationMenuSub } from "./NavigationMenuSub"; + +describe("NavigationMenuSub", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render( + + + + {testText} + + + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuSub.tsx b/ui/navigation-menu/src/NavigationMenuSub.tsx new file mode 100644 index 000000000..7ed763e00 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuSub.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import type * as WPDS from "@washingtonpost/wpds-theme"; + +const NAME = "NavigationMenuSub"; + +export type NavigationMenuSubProps = { + /** Any React node may be used as a child to allow for formatting */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; +} & React.ComponentPropsWithRef; + +export const NavigationMenuSub = React.forwardRef< + HTMLDivElement, + NavigationMenuSubProps +>(({ children, ...props }, ref) => { + return ( + + {children} + + ); +}); + +NavigationMenuSub.displayName = NAME; diff --git a/ui/navigation-menu/src/NavigationMenuTrigger.test.tsx b/ui/navigation-menu/src/NavigationMenuTrigger.test.tsx new file mode 100644 index 000000000..d3c6c6368 --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuTrigger.test.tsx @@ -0,0 +1,38 @@ +import * as React from "react"; +import { render, screen } from "@testing-library/react"; +import { NavigationMenuRoot } from "./NavigationMenuRoot"; +import { NavigationMenuList } from "./NavigationMenuList"; +import { NavigationMenuItem } from "./NavigationMenuItem"; +import { NavigationMenuTrigger } from "./NavigationMenuTrigger"; + +describe("NavigationMenuTrigger", () => { + test("renders visibly into the document", () => { + const testText = "Test Text"; + render( + + + + {testText} + + + + ); + expect(screen.getByText(testText)).toBeVisible(); + }); + + test("renders asChild unstyled", () => { + const testText = "Test Text"; + render( + + + + + {testText} + + + + + ); + expect(screen.getByText(testText)).not.toHaveClass(); + }); +}); diff --git a/ui/navigation-menu/src/NavigationMenuTrigger.tsx b/ui/navigation-menu/src/NavigationMenuTrigger.tsx new file mode 100644 index 000000000..1713d662e --- /dev/null +++ b/ui/navigation-menu/src/NavigationMenuTrigger.tsx @@ -0,0 +1,50 @@ +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import { styled, theme } from "@washingtonpost/wpds-theme"; + +import type * as WPDS from "@washingtonpost/wpds-theme"; + +const NAME = "NavigationMenuTrigger"; + +const StyledNavigationMenuTrigger = styled(NavigationMenuPrimitive.Trigger, { + appearance: "none", + background: "transparent", + border: "none", + color: theme.colors.primary, + cursor: "pointer", + display: "inline-flex", + alignItems: "center", + gap: theme.space["025"], + fontFamily: theme.fonts.meta, + fontSize: theme.fontSizes["100"], + lineHeight: theme.lineHeights.meta, + padding: theme.space["050"], +}); + +export type NavigationMenuTriggerProps = { + /** Any React node may be used as a child */ + children?: React.ReactNode; + /** Override CSS */ + css?: WPDS.CSS; +} & React.ComponentPropsWithRef; + +export const NavigationMenuTrigger = React.forwardRef< + HTMLButtonElement, + NavigationMenuTriggerProps +>(({ children, ...props }, ref) => { + return ( + <> + {props.asChild ? ( + + {children} + + ) : ( + + {children} + + )} + + ); +}); + +NavigationMenuTrigger.displayName = NAME; diff --git a/ui/navigation-menu/src/index.ts b/ui/navigation-menu/src/index.ts new file mode 100644 index 000000000..d2a220ef6 --- /dev/null +++ b/ui/navigation-menu/src/index.ts @@ -0,0 +1,8 @@ +export * from "./NavigationMenu"; +export * from "./NavigationMenuRoot"; +export * from "./NavigationMenuList"; +export * from "./NavigationMenuItem"; +export * from "./NavigationMenuLink"; +export * from "./NavigationMenuTrigger"; +export * from "./NavigationMenuContent"; +export * from "./NavigationMenuSub"; diff --git a/ui/navigation-menu/src/play.stories.tsx b/ui/navigation-menu/src/play.stories.tsx new file mode 100644 index 000000000..c092ab59c --- /dev/null +++ b/ui/navigation-menu/src/play.stories.tsx @@ -0,0 +1,322 @@ +import * as React from "react"; +import { userEvent, screen } from "@storybook/testing-library"; +import { expect } from "@storybook/jest"; +import { NavigationMenu } from "./"; +import { Button } from "@washingtonpost/wpds-button"; +import { Icon } from "@washingtonpost/wpds-icon"; +import { theme } from "@washingtonpost/wpds-theme"; +import { ChevronRight, ChevronDown, Menu } from "@washingtonpost/wpds-assets"; +import NextLink from "next/link"; + +import type { ComponentMeta, ComponentStory } from "@storybook/react"; + +import states from "./states.json"; + +export default { + title: "NavigationMenu", + component: NavigationMenu.Root, + subcomponents: { + List: NavigationMenu.List, + Item: NavigationMenu.Item, + Link: NavigationMenu.Link, + Trigger: NavigationMenu.Trigger, + Content: NavigationMenu.Content, + Sub: NavigationMenu.Sub, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + console.log(args); + return ( + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + ); +}; + +export const Default = Template.bind({}); + +const UseNextLinkTemplate: ComponentStory = ( + args +) => { + console.log(args); + return ( + + + + + Next Link + + + + + ); +}; + +export const UseNextLink = UseNextLinkTemplate.bind({}); + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const SideAlignTemplate: ComponentStory = (args) => { + console.log("args", args); + return ( + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + + ); +}; + +export const SideAlign = SideAlignTemplate.bind({}); + +SideAlign.argTypes = { + side: { + options: ["top", "bottom", "left", "right"], + control: { type: "select" }, + }, + align: { + options: ["start", "center", "end"], + control: { type: "select" }, + }, +}; + +SideAlign.args = { + side: "bottom", + align: "start", +}; + +const HorizontalTemplate: ComponentStory = ( + args +) => { + return ( + + + + + House + + + + + Governors + + + + + Results By State + &": { + transform: "rotate(-180deg)", + }, + }} + > + + + + + + + {states.map((state, i) => ( + + + {state} + + + ))} + + + + + + + ); +}; + +export const Horizontal = HorizontalTemplate.bind({}); + +const VerticalTemplate: ComponentStory = (args) => { + const subsections = [ + { + text: "The Post's View", + link: "https://www.washingtonpost.com/opinions/the-posts-view/?itid=nb_opinions_the-post%27s-view", + }, + { + text: "Columns", + link: "https://www.washingtonpost.com/opinions/columns/", + }, + { + text: "Editorial Cartoons", + link: "https://www.washingtonpost.com/opinions/cartoons/", + }, + ]; + + return ( + + + + + Home Page + + + + + Politics + + + + + + Opinions + + + + + + + + + {subsections.map((sub) => ( + + + {sub.text} + + + ))} + + + + + + + ); +}; + +export const Vertical = VerticalTemplate.bind({}); + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const InteractionsTemplate: ComponentStory = () => ( + + + + + + + + + + + Apples + + + Bananas + + + Oranges + + + Pears + + + + + + + +); + +export const Interactions = InteractionsTemplate.bind({}); +Interactions.parameters = { + chromatic: { disableSnapshot: true }, +}; + +// Function to emulate pausing between interactions +function sleep(ms) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + +Interactions.play = async () => { + userEvent.tab(); + userEvent.keyboard("{Enter}"); + await sleep(350); + const content = screen.getByText("Apples"); + await expect(content).toBeVisible(); + userEvent.keyboard("{Escape}"); + await sleep(350); + await expect(content).not.toBeVisible(); +}; diff --git a/ui/navigation-menu/src/states.json b/ui/navigation-menu/src/states.json new file mode 100644 index 000000000..96fd9a9ea --- /dev/null +++ b/ui/navigation-menu/src/states.json @@ -0,0 +1,52 @@ +[ + "Alabama", + "Alaska", + "Arizona", + "Arkansas", + "California", + "Colorado", + "Connecticut", + "Delaware", + "Florida", + "Georgia", + "Hawaii", + "Idaho", + "Illinois", + "Indiana", + "Iowa", + "Kansas", + "Kentucky", + "Louisiana", + "Maine", + "Maryland", + "Massachusetts", + "Michigan", + "Minnesota", + "Mississippi", + "Missouri", + "Montana", + "Nebraska", + "Nevada", + "New Hampshire", + "New Jersey", + "New Mexico", + "New York", + "North Carolina", + "North Dakota", + "Ohio", + "Oklahoma", + "Oregon", + "Pennsylvania", + "Rhode Island", + "South Carolina", + "South Dakota", + "Tennessee", + "Texas", + "Utah", + "Vermont", + "Virginia", + "Washington", + "West Virginia", + "Wisconsin", + "Wyoming" +] diff --git a/ui/pagination-dots/CHANGELOG.md b/ui/pagination-dots/CHANGELOG.md index 0e1b80f76..8c834e489 100644 --- a/ui/pagination-dots/CHANGELOG.md +++ b/ui/pagination-dots/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-pagination-dots - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-pagination-dots - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/popover/CHANGELOG.md b/ui/popover/CHANGELOG.md index f2631252d..a5a295caa 100644 --- a/ui/popover/CHANGELOG.md +++ b/ui/popover/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-popover - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-popover - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/radio-group/CHANGELOG.md b/ui/radio-group/CHANGELOG.md index 5b4495242..0e4ff9c30 100644 --- a/ui/radio-group/CHANGELOG.md +++ b/ui/radio-group/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-radio-group - - - - ## [1.6.1](https://github.com/WPMedia/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-radio-group - - - - # [1.6.0](https://github.com/WPMedia/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/scrim/CHANGELOG.md b/ui/scrim/CHANGELOG.md index 38298401c..0028a4418 100644 --- a/ui/scrim/CHANGELOG.md +++ b/ui/scrim/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-scrim - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-scrim - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/select/CHANGELOG.md b/ui/select/CHANGELOG.md index f7d8e0134..e600b57a6 100644 --- a/ui/select/CHANGELOG.md +++ b/ui/select/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-select - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-select - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Bug Fixes diff --git a/ui/switch/CHANGELOG.md b/ui/switch/CHANGELOG.md index a6dd57378..e34f5ce39 100644 --- a/ui/switch/CHANGELOG.md +++ b/ui/switch/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-switch - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-switch - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/tabs/CHANGELOG.md b/ui/tabs/CHANGELOG.md index ad2431a49..08d609dfd 100644 --- a/ui/tabs/CHANGELOG.md +++ b/ui/tabs/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-tabs - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-tabs - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Bug Fixes diff --git a/ui/theme/CHANGELOG.md b/ui/theme/CHANGELOG.md index 2f8f74691..11b4c0561 100644 --- a/ui/theme/CHANGELOG.md +++ b/ui/theme/CHANGELOG.md @@ -5,23 +5,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## [1.6.2](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.1...v1.6.2) (2023-05-24) - ### Bug Fixes -* remove root font-size from stitches.config.ts so browser font size changes work [SRED-125] ([#390](https://github.com/washingtonpost/wpds-ui-kit/issues/390)) ([c432767](https://github.com/washingtonpost/wpds-ui-kit/commit/c4327677cdd7b7337191729cbee5ecb241d294ba)) - - - - +- remove root font-size from stitches.config.ts so browser font size changes work [SRED-125] ([#390](https://github.com/washingtonpost/wpds-ui-kit/issues/390)) ([c432767](https://github.com/washingtonpost/wpds-ui-kit/commit/c4327677cdd7b7337191729cbee5ecb241d294ba)) ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-theme - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/tooltip/CHANGELOG.md b/ui/tooltip/CHANGELOG.md index f7486350e..99a45386c 100644 --- a/ui/tooltip/CHANGELOG.md +++ b/ui/tooltip/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-tooltip - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-tooltip - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features diff --git a/ui/visually-hidden/CHANGELOG.md b/ui/visually-hidden/CHANGELOG.md index 2d59c4bdc..887f3ab94 100644 --- a/ui/visually-hidden/CHANGELOG.md +++ b/ui/visually-hidden/CHANGELOG.md @@ -7,18 +7,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @washingtonpost/wpds-visually-hidden - - - - ## [1.6.1](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.0...v1.6.1) (2023-05-24) **Note:** Version bump only for package @washingtonpost/wpds-visually-hidden - - - - # [1.6.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.5.2...v1.6.0) (2023-05-24) ### Features