From 7d84d5f263f695f980acd9f592219adf0a827781 Mon Sep 17 00:00:00 2001 From: Heli Aldridge Date: Wed, 1 May 2024 15:50:44 -0400 Subject: [PATCH] =?UTF-8?q?DOP-4536:=20Breadcrumbs!=20=F0=9F=9A=82?= =?UTF-8?q?=F0=9F=8D=9E=F0=9F=A5=90=F0=9F=A5=96=F0=9F=AB=93=F0=9F=8D=9E=20?= =?UTF-8?q?(#1085)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Maya Raman Co-authored-by: Matt Meigs Co-authored-by: anabellabuckvar <41971124+anabellabuckvar@users.noreply.github.com> --- package-lock.json | 372 ++++++++-- package.json | 2 +- .../gatsby-node.js | 7 +- .../other-things-to-source.js | 4 +- .../gatsby-source-snooty-prod/gatsby-node.js | 11 +- plugins/utils/breadcrumbs.js | 32 + plugins/utils/project-parents.js | 31 - .../Breadcrumbs/BreadcrumbContainer.js | 111 +-- .../Breadcrumbs/CollapsedBreadcrumbs.js | 39 + .../Breadcrumbs/IndividualBreadcrumb.js | 121 +++ src/components/Breadcrumbs/index.js | 29 +- src/components/OpenAPI/index.js | 15 +- src/components/Sidenav/DocsHomeButton.js | 33 + src/components/Sidenav/Sidenav.js | 35 +- src/components/Sidenav/SidenavBackButton.js | 106 --- src/components/Sidenav/index.js | 10 +- src/components/Sidenav/styles/sideNavItem.js | 17 + .../StructuredData/BreadcrumbSchema.js | 41 +- src/hooks/use-breadcrumbs.js | 19 + src/hooks/use-navigation-parents.js | 20 - src/init/DocumentDatabase.js | 12 +- src/templates/document.js | 9 +- src/utils/assert-leading-slash.js | 8 + src/utils/get-complete-breadcrumb-data.js | 59 ++ src/utils/realm.js | 4 +- tests/unit/BreadcrumbContainer.test.js | 91 +-- tests/unit/Breadcrumbs.test.js | 47 +- tests/unit/Sidenav.test.js | 3 - .../BreadcrumbContainer.test.js.snap | 692 +++++++++++++----- .../__snapshots__/Breadcrumbs.test.js.snap | 436 +++++------ tests/unit/data/Breadcrumbs.test.json | 40 +- 31 files changed, 1574 insertions(+), 882 deletions(-) create mode 100644 plugins/utils/breadcrumbs.js delete mode 100644 plugins/utils/project-parents.js create mode 100644 src/components/Breadcrumbs/CollapsedBreadcrumbs.js create mode 100644 src/components/Breadcrumbs/IndividualBreadcrumb.js create mode 100644 src/components/Sidenav/DocsHomeButton.js delete mode 100644 src/components/Sidenav/SidenavBackButton.js create mode 100644 src/hooks/use-breadcrumbs.js delete mode 100644 src/hooks/use-navigation-parents.js create mode 100644 src/utils/assert-leading-slash.js create mode 100644 src/utils/get-complete-breadcrumb-data.js diff --git a/package-lock.json b/package-lock.json index 2bc23d954..6110117a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,7 @@ "@leafygreen-ui/text-area": "^6.1.0", "@leafygreen-ui/text-input": "^10.1.0", "@leafygreen-ui/toast": "^6.1.4", - "@leafygreen-ui/tooltip": "^7.1.0", + "@leafygreen-ui/tooltip": "^11.0.4", "@leafygreen-ui/typography": "^18.3.0", "@loadable/component": "^5.14.1", "@mdb/consistent-nav": "^2.0.7", @@ -4542,6 +4542,57 @@ "@leafygreen-ui/leafygreen-provider": "^2.3.5" } }, + "node_modules/@leafygreen-ui/inline-definition/node_modules/@leafygreen-ui/hooks": { + "version": "7.7.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.8.tgz", + "integrity": "sha512-8n0GjAxIxXN1e7XcZ2bobdI56XCqbtH3AZTbWTgQdILnTdxuA/9+yif1zIP4L8shoUbcosuMwU5HRu4UnX9n1g==", + "dependencies": { + "lodash": "^4.17.21" + } + }, + "node_modules/@leafygreen-ui/inline-definition/node_modules/@leafygreen-ui/tokens": { + "version": "1.4.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-1.4.1.tgz", + "integrity": "sha512-ap9IdpQy+wg8IG9rJbWZB9F9zihhixClz68UFcwJMbDqcvxcqRPBvRpkbqiJdAPwOSrbYZfrHSGEtdJk9bzZAg==", + "dependencies": { + "@leafygreen-ui/palette": "^3.4.5" + } + }, + "node_modules/@leafygreen-ui/inline-definition/node_modules/@leafygreen-ui/tooltip": { + "version": "7.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-7.1.3.tgz", + "integrity": "sha512-t6hsJSyt/vUAb1rQN9VrvCvk/vOhcf5AvAkZo0sgzZzFd58WTrCn3hXDpeUdG+zEIL7q9hZbnudYM0OPE/FJEA==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.3", + "@leafygreen-ui/hooks": "^7.3.3", + "@leafygreen-ui/icon": "^11.11.1", + "@leafygreen-ui/lib": "^9.5.1", + "@leafygreen-ui/palette": "^3.4.4", + "@leafygreen-ui/popover": "^9.1.1", + "@leafygreen-ui/tokens": "^1.3.4", + "@leafygreen-ui/typography": "^13.2.1", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^2.3.5" + } + }, + "node_modules/@leafygreen-ui/inline-definition/node_modules/@leafygreen-ui/typography": { + "version": "13.2.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-13.2.1.tgz", + "integrity": "sha512-5DABF0NkyH0JNZnv4YUgYxMxIojrylSwW8jg2nVMD96ZynH+vKYDUFRWef6GztqaiqSnXZjn65wQcg2v9C0nUg==", + "dependencies": { + "@leafygreen-ui/box": "^3.1.1", + "@leafygreen-ui/emotion": "^4.0.3", + "@leafygreen-ui/icon": "^11.11.1", + "@leafygreen-ui/lib": "^9.5.1", + "@leafygreen-ui/palette": "^3.4.4", + "@leafygreen-ui/tokens": "^1.3.4" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^2.3.5" + } + }, "node_modules/@leafygreen-ui/input-option": { "version": "1.1.3", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/input-option/-/input-option-1.1.3.tgz", @@ -5653,6 +5704,25 @@ "@leafygreen-ui/palette": "^3.4.5" } }, + "node_modules/@leafygreen-ui/side-nav/node_modules/@leafygreen-ui/tooltip": { + "version": "7.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-7.1.3.tgz", + "integrity": "sha512-t6hsJSyt/vUAb1rQN9VrvCvk/vOhcf5AvAkZo0sgzZzFd58WTrCn3hXDpeUdG+zEIL7q9hZbnudYM0OPE/FJEA==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.3", + "@leafygreen-ui/hooks": "^7.3.3", + "@leafygreen-ui/icon": "^11.11.1", + "@leafygreen-ui/lib": "^9.5.1", + "@leafygreen-ui/palette": "^3.4.4", + "@leafygreen-ui/popover": "^9.1.1", + "@leafygreen-ui/tokens": "^1.3.4", + "@leafygreen-ui/typography": "^13.2.1", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^2.3.5" + } + }, "node_modules/@leafygreen-ui/side-nav/node_modules/@leafygreen-ui/typography": { "version": "13.2.1", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-13.2.1.tgz", @@ -6127,52 +6197,123 @@ "integrity": "sha512-D0eHY+wllK0Fyj2/xiHmiLtfsklTCjQXupZN6UrhveUK4BoNC2Wf9t0cnoFCP7W2rpBItvdPs4fthj9lxUOqDg==" }, "node_modules/@leafygreen-ui/tooltip": { - "version": "7.1.3", - "license": "Apache-2.0", + "version": "11.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-11.0.4.tgz", + "integrity": "sha512-oVzkqCKqTqL/jS90+D3dCjvguRKnbI6zrEtzGj4ve0DzRfTlM6qKJj56gFjoJ0uFrkra5s2OPL+3HbUgIPL26A==", "dependencies": { - "@leafygreen-ui/emotion": "^4.0.3", - "@leafygreen-ui/hooks": "^7.3.3", - "@leafygreen-ui/icon": "^11.11.1", - "@leafygreen-ui/lib": "^9.5.1", - "@leafygreen-ui/palette": "^3.4.4", - "@leafygreen-ui/popover": "^9.1.1", - "@leafygreen-ui/tokens": "^1.3.4", - "@leafygreen-ui/typography": "^13.2.1", - "lodash": "^4.17.21" + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/icon": "^12.0.1", + "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/palette": "^4.0.9", + "@leafygreen-ui/popover": "^11.3.1", + "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/typography": "^19.0.0", + "lodash": "^4.17.21", + "polished": "^4.2.2" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^2.3.5" + "@leafygreen-ui/leafygreen-provider": "^3.1.12" } }, "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/hooks": { - "version": "7.6.0", - "license": "Apache-2.0", + "version": "8.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-8.1.3.tgz", + "integrity": "sha512-UAHii7T+g8h8sSzogqUgIid64bbKPHGihAAoBpNzbNsjqFllYVC0FpF59jQeL6tCYd32C2KatWOvhYheBf1hsA==", "dependencies": { + "@leafygreen-ui/lib": "^13.3.0", "lodash": "^4.17.21" } }, - "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/tokens": { - "version": "1.4.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-1.4.1.tgz", - "integrity": "sha512-ap9IdpQy+wg8IG9rJbWZB9F9zihhixClz68UFcwJMbDqcvxcqRPBvRpkbqiJdAPwOSrbYZfrHSGEtdJk9bzZAg==", + "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/icon": { + "version": "12.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-12.1.0.tgz", + "integrity": "sha512-P1P5k/esKQe64tkZkEzDU6/SVPfpGqhd4BoW5Pm5G+k3wyyxLivSSHm3JycVlIiOgXjIjz72W/ZxvsYiDRjgLQ==", "dependencies": { - "@leafygreen-ui/palette": "^3.4.5" + "@leafygreen-ui/emotion": "^4.0.8", + "lodash": "^4.17.21" + } + }, + "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/lib": { + "version": "13.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.4.0.tgz", + "integrity": "sha512-Ju+tHF6z3ttU9UD6EXmTtIExgj/ZXnjm48CRQ6jk65LnYuX19i3I35nkCZwb8n28WlxDH7UDoEumx/hvM05Z4w==", + "dependencies": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, + "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/palette": { + "version": "4.0.10", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.10.tgz", + "integrity": "sha512-0vhKwMfBv7eO9txSxkgxijjI8M9L8uLFge+JpbBXql37+rKJuiQl7wCb5OPIJM+aV2HaHElGMyf9nRliabk30w==" + }, + "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/popover": { + "version": "11.3.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.3.1.tgz", + "integrity": "sha512-pkEGWOHSJ0HiRRaUEFLY42EZVGVlLVAe9ufr00QWOJ1tuu3Mr/al4yNRUSJqz9mZbUo1mAun9XXvVpwP5GfrSQ==", + "dependencies": { + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/portal": "^5.1.1", + "@leafygreen-ui/tokens": "^2.5.2", + "@types/react-transition-group": "^4.4.5", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + } + }, + "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/portal": { + "version": "5.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-5.1.1.tgz", + "integrity": "sha512-8wvNdLxO3hWY7u5rf1ndYCJJ85TB6XpKp+dl7sQPoLnkq8HXd4GqnFXYwvGQp/pf3ts/Dp5FmZ/9dljkktnzQg==", + "dependencies": { + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0" + }, + "peerDependencies": { + "react-dom": "^17.0.0 || ^18.0.0" } }, "node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/typography": { - "version": "13.2.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-13.2.1.tgz", - "integrity": "sha512-5DABF0NkyH0JNZnv4YUgYxMxIojrylSwW8jg2nVMD96ZynH+vKYDUFRWef6GztqaiqSnXZjn65wQcg2v9C0nUg==", + "version": "19.0.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-19.0.0.tgz", + "integrity": "sha512-RAzZOKGOEPRWfT2+oI6f14o3NP1v5+KWbEKS87YezlapjrQRPAu2/8TX1giTU0ELZ8r0vR7QkkPsr1j26qG2cg==", "dependencies": { - "@leafygreen-ui/box": "^3.1.1", - "@leafygreen-ui/emotion": "^4.0.3", - "@leafygreen-ui/icon": "^11.11.1", - "@leafygreen-ui/lib": "^9.5.1", - "@leafygreen-ui/palette": "^3.4.4", - "@leafygreen-ui/tokens": "^1.3.4" + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/icon": "^12.1.0", + "@leafygreen-ui/lib": "^13.4.0", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/polymorphic": "^1.3.7", + "@leafygreen-ui/tokens": "^2.5.2" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^2.3.5" + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + } + }, + "node_modules/@leafygreen-ui/tooltip/node_modules/@storybook/csf": { + "version": "0.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.4.tgz", + "integrity": "sha512-B9UI/lsQMjF+oEfZCI6YXNoeuBcGZoOP5x8yKbe2tIEmsMjSztFKkpPzi5nLCnBk/MBtl6QJeI3ksJnbsWPkOw==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@leafygreen-ui/tooltip/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/@leafygreen-ui/typography": { @@ -32576,6 +32717,53 @@ "@leafygreen-ui/lib": "^9.5.1", "@leafygreen-ui/palette": "^3.4.4", "@leafygreen-ui/tooltip": "^7.1.3" + }, + "dependencies": { + "@leafygreen-ui/hooks": { + "version": "7.7.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.8.tgz", + "integrity": "sha512-8n0GjAxIxXN1e7XcZ2bobdI56XCqbtH3AZTbWTgQdILnTdxuA/9+yif1zIP4L8shoUbcosuMwU5HRu4UnX9n1g==", + "requires": { + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/tokens": { + "version": "1.4.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-1.4.1.tgz", + "integrity": "sha512-ap9IdpQy+wg8IG9rJbWZB9F9zihhixClz68UFcwJMbDqcvxcqRPBvRpkbqiJdAPwOSrbYZfrHSGEtdJk9bzZAg==", + "requires": { + "@leafygreen-ui/palette": "^3.4.5" + } + }, + "@leafygreen-ui/tooltip": { + "version": "7.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-7.1.3.tgz", + "integrity": "sha512-t6hsJSyt/vUAb1rQN9VrvCvk/vOhcf5AvAkZo0sgzZzFd58WTrCn3hXDpeUdG+zEIL7q9hZbnudYM0OPE/FJEA==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.3", + "@leafygreen-ui/hooks": "^7.3.3", + "@leafygreen-ui/icon": "^11.11.1", + "@leafygreen-ui/lib": "^9.5.1", + "@leafygreen-ui/palette": "^3.4.4", + "@leafygreen-ui/popover": "^9.1.1", + "@leafygreen-ui/tokens": "^1.3.4", + "@leafygreen-ui/typography": "^13.2.1", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/typography": { + "version": "13.2.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-13.2.1.tgz", + "integrity": "sha512-5DABF0NkyH0JNZnv4YUgYxMxIojrylSwW8jg2nVMD96ZynH+vKYDUFRWef6GztqaiqSnXZjn65wQcg2v9C0nUg==", + "requires": { + "@leafygreen-ui/box": "^3.1.1", + "@leafygreen-ui/emotion": "^4.0.3", + "@leafygreen-ui/icon": "^11.11.1", + "@leafygreen-ui/lib": "^9.5.1", + "@leafygreen-ui/palette": "^3.4.4", + "@leafygreen-ui/tokens": "^1.3.4" + } + } } }, "@leafygreen-ui/input-option": { @@ -33535,6 +33723,22 @@ "@leafygreen-ui/palette": "^3.4.5" } }, + "@leafygreen-ui/tooltip": { + "version": "7.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-7.1.3.tgz", + "integrity": "sha512-t6hsJSyt/vUAb1rQN9VrvCvk/vOhcf5AvAkZo0sgzZzFd58WTrCn3hXDpeUdG+zEIL7q9hZbnudYM0OPE/FJEA==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.3", + "@leafygreen-ui/hooks": "^7.3.3", + "@leafygreen-ui/icon": "^11.11.1", + "@leafygreen-ui/lib": "^9.5.1", + "@leafygreen-ui/palette": "^3.4.4", + "@leafygreen-ui/popover": "^9.1.1", + "@leafygreen-ui/tokens": "^1.3.4", + "@leafygreen-ui/typography": "^13.2.1", + "lodash": "^4.17.21" + } + }, "@leafygreen-ui/typography": { "version": "13.2.1", "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-13.2.1.tgz", @@ -33954,45 +34158,103 @@ } }, "@leafygreen-ui/tooltip": { - "version": "7.1.3", + "version": "11.0.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tooltip/-/tooltip-11.0.4.tgz", + "integrity": "sha512-oVzkqCKqTqL/jS90+D3dCjvguRKnbI6zrEtzGj4ve0DzRfTlM6qKJj56gFjoJ0uFrkra5s2OPL+3HbUgIPL26A==", "requires": { - "@leafygreen-ui/emotion": "^4.0.3", - "@leafygreen-ui/hooks": "^7.3.3", - "@leafygreen-ui/icon": "^11.11.1", - "@leafygreen-ui/lib": "^9.5.1", - "@leafygreen-ui/palette": "^3.4.4", - "@leafygreen-ui/popover": "^9.1.1", - "@leafygreen-ui/tokens": "^1.3.4", - "@leafygreen-ui/typography": "^13.2.1", - "lodash": "^4.17.21" + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/icon": "^12.0.1", + "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/palette": "^4.0.9", + "@leafygreen-ui/popover": "^11.3.1", + "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/typography": "^19.0.0", + "lodash": "^4.17.21", + "polished": "^4.2.2" }, "dependencies": { "@leafygreen-ui/hooks": { - "version": "7.6.0", + "version": "8.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-8.1.3.tgz", + "integrity": "sha512-UAHii7T+g8h8sSzogqUgIid64bbKPHGihAAoBpNzbNsjqFllYVC0FpF59jQeL6tCYd32C2KatWOvhYheBf1hsA==", "requires": { + "@leafygreen-ui/lib": "^13.3.0", "lodash": "^4.17.21" } }, - "@leafygreen-ui/tokens": { - "version": "1.4.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-1.4.1.tgz", - "integrity": "sha512-ap9IdpQy+wg8IG9rJbWZB9F9zihhixClz68UFcwJMbDqcvxcqRPBvRpkbqiJdAPwOSrbYZfrHSGEtdJk9bzZAg==", + "@leafygreen-ui/icon": { + "version": "12.1.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-12.1.0.tgz", + "integrity": "sha512-P1P5k/esKQe64tkZkEzDU6/SVPfpGqhd4BoW5Pm5G+k3wyyxLivSSHm3JycVlIiOgXjIjz72W/ZxvsYiDRjgLQ==", "requires": { - "@leafygreen-ui/palette": "^3.4.5" + "@leafygreen-ui/emotion": "^4.0.8", + "lodash": "^4.17.21" + } + }, + "@leafygreen-ui/lib": { + "version": "13.4.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.4.0.tgz", + "integrity": "sha512-Ju+tHF6z3ttU9UD6EXmTtIExgj/ZXnjm48CRQ6jk65LnYuX19i3I35nkCZwb8n28WlxDH7UDoEumx/hvM05Z4w==", + "requires": { + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + } + }, + "@leafygreen-ui/palette": { + "version": "4.0.10", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.10.tgz", + "integrity": "sha512-0vhKwMfBv7eO9txSxkgxijjI8M9L8uLFge+JpbBXql37+rKJuiQl7wCb5OPIJM+aV2HaHElGMyf9nRliabk30w==" + }, + "@leafygreen-ui/popover": { + "version": "11.3.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.3.1.tgz", + "integrity": "sha512-pkEGWOHSJ0HiRRaUEFLY42EZVGVlLVAe9ufr00QWOJ1tuu3Mr/al4yNRUSJqz9mZbUo1mAun9XXvVpwP5GfrSQ==", + "requires": { + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0", + "@leafygreen-ui/portal": "^5.1.1", + "@leafygreen-ui/tokens": "^2.5.2", + "@types/react-transition-group": "^4.4.5", + "react-transition-group": "^4.4.5" + } + }, + "@leafygreen-ui/portal": { + "version": "5.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/portal/-/portal-5.1.1.tgz", + "integrity": "sha512-8wvNdLxO3hWY7u5rf1ndYCJJ85TB6XpKp+dl7sQPoLnkq8HXd4GqnFXYwvGQp/pf3ts/Dp5FmZ/9dljkktnzQg==", + "requires": { + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0" } }, "@leafygreen-ui/typography": { - "version": "13.2.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-13.2.1.tgz", - "integrity": "sha512-5DABF0NkyH0JNZnv4YUgYxMxIojrylSwW8jg2nVMD96ZynH+vKYDUFRWef6GztqaiqSnXZjn65wQcg2v9C0nUg==", + "version": "19.0.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-19.0.0.tgz", + "integrity": "sha512-RAzZOKGOEPRWfT2+oI6f14o3NP1v5+KWbEKS87YezlapjrQRPAu2/8TX1giTU0ELZ8r0vR7QkkPsr1j26qG2cg==", "requires": { - "@leafygreen-ui/box": "^3.1.1", - "@leafygreen-ui/emotion": "^4.0.3", - "@leafygreen-ui/icon": "^11.11.1", - "@leafygreen-ui/lib": "^9.5.1", - "@leafygreen-ui/palette": "^3.4.4", - "@leafygreen-ui/tokens": "^1.3.4" + "@leafygreen-ui/emotion": "^4.0.8", + "@leafygreen-ui/icon": "^12.1.0", + "@leafygreen-ui/lib": "^13.4.0", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/polymorphic": "^1.3.7", + "@leafygreen-ui/tokens": "^2.5.2" } + }, + "@storybook/csf": { + "version": "0.1.4", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.4.tgz", + "integrity": "sha512-B9UI/lsQMjF+oEfZCI6YXNoeuBcGZoOP5x8yKbe2tIEmsMjSztFKkpPzi5nLCnBk/MBtl6QJeI3ksJnbsWPkOw==", + "requires": { + "type-fest": "^2.19.0" + } + }, + "type-fest": { + "version": "2.19.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==" } } }, diff --git a/package.json b/package.json index 133d5f9d8..b7cca4499 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "@leafygreen-ui/text-area": "^6.1.0", "@leafygreen-ui/text-input": "^10.1.0", "@leafygreen-ui/toast": "^6.1.4", - "@leafygreen-ui/tooltip": "^7.1.0", + "@leafygreen-ui/tooltip": "^11.0.4", "@leafygreen-ui/typography": "^18.3.0", "@loadable/component": "^5.14.1", "@mdb/consistent-nav": "^2.0.7", diff --git a/plugins/gatsby-source-snooty-preview/gatsby-node.js b/plugins/gatsby-source-snooty-preview/gatsby-node.js index c984518ca..58901f86a 100644 --- a/plugins/gatsby-source-snooty-preview/gatsby-node.js +++ b/plugins/gatsby-source-snooty-preview/gatsby-node.js @@ -63,10 +63,11 @@ exports.createSchemaCustomization = async ({ actions }) => { productName: String } - type ProjectParent implements Node @dontInfer { - parents: JSON - project: String! + type Breadcrumb implements Node @dontInfer { + breadcrumbs: JSON + propertyUrl: String } + `; createTypes(typeDefs); }; diff --git a/plugins/gatsby-source-snooty-preview/other-things-to-source.js b/plugins/gatsby-source-snooty-preview/other-things-to-source.js index c63f93c1d..d8a153e47 100644 --- a/plugins/gatsby-source-snooty-preview/other-things-to-source.js +++ b/plugins/gatsby-source-snooty-preview/other-things-to-source.js @@ -3,7 +3,7 @@ const { realmDocumentDatabase } = require('../../src/init/DocumentDatabase.js'); const { createOpenAPIChangelogNode } = require('../utils/openapi'); const { createProductNodes } = require('../utils/products'); const { createDocsetNodes } = require('../utils/docsets'); -const { createProjectParentNodes } = require('../utils/project-parents'); +const { createBreadcrumbNodes } = require('../utils/breadcrumbs'); // Sources nodes for the preview plugin that are not directly related to data // from the Snooty Data API @@ -18,7 +18,7 @@ exports.sourceNodes = async ({ await db.connect(); await createProductNodes({ db, createNode, createNodeId, createContentDigest }); await createDocsetNodes({ db, createNode, createNodeId, createContentDigest }); - await createProjectParentNodes({ db, createNode, createNodeId, createContentDigest, getNodesByType }); + await createBreadcrumbNodes({ db, createNode, createNodeId, createContentDigest }); if (hasOpenAPIChangelog) await createOpenAPIChangelogNode({ createNode, createNodeId, createContentDigest, siteMetadata, db }); }; diff --git a/plugins/gatsby-source-snooty-prod/gatsby-node.js b/plugins/gatsby-source-snooty-prod/gatsby-node.js index 873705528..0d0f6a097 100644 --- a/plugins/gatsby-source-snooty-prod/gatsby-node.js +++ b/plugins/gatsby-source-snooty-prod/gatsby-node.js @@ -20,7 +20,7 @@ const { manifestDocumentDatabase, realmDocumentDatabase } = require('../../src/i const { createOpenAPIChangelogNode } = require('../utils/openapi.js'); const { createProductNodes } = require('../utils/products.js'); const { createDocsetNodes } = require('../utils/docsets.js'); -const { createProjectParentNodes } = require('../utils/project-parents.js'); +const { createBreadcrumbNodes } = require('../utils/breadcrumbs.js'); const assets = new Map(); const projectComponents = new Set(); @@ -192,7 +192,7 @@ exports.sourceNodes = async ({ actions, createContentDigest, createNodeId, getNo await createProductNodes({ db, createNode, createNodeId, createContentDigest }); - await createProjectParentNodes({ db, createNode, createNodeId, createContentDigest, getNodesByType }); + await createBreadcrumbNodes({ db, createNode, createNodeId, createContentDigest }); const umbrellaProduct = await db.realmInterface.getMetadata( { @@ -413,9 +413,10 @@ exports.createSchemaCustomization = ({ actions }) => { productName: String } - type ProjectParent implements Node @dontInfer { - parents: JSON - project: String! + type Breadcrumb implements Node @dontInfer { + breadcrumbs: JSON + propertyUrl: String } + `); }; diff --git a/plugins/utils/breadcrumbs.js b/plugins/utils/breadcrumbs.js new file mode 100644 index 000000000..ccd49a171 --- /dev/null +++ b/plugins/utils/breadcrumbs.js @@ -0,0 +1,32 @@ +const { siteMetadata } = require('../../src/utils/site-metadata'); + +const breadcrumbType = `Breadcrumb`; + +const createBreadcrumbNodes = async ({ db, createNode, createNodeId, createContentDigest }) => { + const { database, project } = siteMetadata; + let breadcrumbData; + try { + breadcrumbData = await db.fetchBreadcrumbs(database, project); + } catch (e) { + console.error(`Error while fetching breadcrumb data from Atlas: ${e}`); + } + const [breadcrumbs, propertyUrl] = breadcrumbData + ? [breadcrumbData.breadcrumbs, breadcrumbData.propertyUrl] + : [null, '']; + + return createNode({ + children: [], + id: createNodeId(`Breadcrumbs-${project}`), + internal: { + contentDigest: createContentDigest(breadcrumbs), + type: breadcrumbType, + }, + breadcrumbs: breadcrumbs, + propertyUrl: propertyUrl, + }); +}; + +module.exports = { + createBreadcrumbNodes, + breadcrumbType, +}; diff --git a/plugins/utils/project-parents.js b/plugins/utils/project-parents.js deleted file mode 100644 index 0a892c692..000000000 --- a/plugins/utils/project-parents.js +++ /dev/null @@ -1,31 +0,0 @@ -const { siteMetadata } = require('../../src/utils/site-metadata'); - -const projectParentType = `ProjectParent`; - -const createProjectParentNodes = async ({ db, createNode, createNodeId, createContentDigest, getNodesByType }) => { - const { database, project } = siteMetadata; - const metadataNodes = getNodesByType('SnootyMetadata'); - await Promise.all( - [...metadataNodes.map((md) => md.project), project] - .filter((project) => project) - .map(async (project) => { - const projectParents = await db.fetchProjectParents(database, project); - createNode({ - children: [], - id: createNodeId(`ProjectParent-${project}`), - internal: { - contentDigest: createContentDigest(projectParents), - type: projectParentType, - }, - parent: null, - parents: projectParents, - project: project, - }); - }) - ); -}; - -module.exports = { - createProjectParentNodes, - projectParentType, -}; diff --git a/src/components/Breadcrumbs/BreadcrumbContainer.js b/src/components/Breadcrumbs/BreadcrumbContainer.js index a42e92f8c..e304337a9 100644 --- a/src/components/Breadcrumbs/BreadcrumbContainer.js +++ b/src/components/Breadcrumbs/BreadcrumbContainer.js @@ -1,73 +1,81 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { css as LeafyCss, cx } from '@leafygreen-ui/emotion'; -import { palette } from '@leafygreen-ui/palette'; -import Link from '../Link'; -import { formatText } from '../../utils/format-text'; -import { theme } from '../../theme/docsTheme'; import { reportAnalytics } from '../../utils/report-analytics'; -import { useNavigationParents } from '../../hooks/use-navigation-parents'; -import useSnootyMetadata from '../../utils/use-snooty-metadata'; - -const activeColor = css` - color: ${palette.gray.dark3}; -`; +import { theme } from '../../theme/docsTheme'; +import IndividualBreadcrumb from './IndividualBreadcrumb'; +import CollapsedBreadcrumbs from './CollapsedBreadcrumbs'; -const StyledArrow = styled('span')` +const StyledSlash = styled('span')` cursor: default; + padding-left: ${theme.size.small}; + padding-right: ${theme.size.small}; +`; - :last-of-type { - ${activeColor} - } +const Flexbox = styled('div')` + display: flex; + align-items: center; `; -const linkStyling = LeafyCss` - font-size: ${theme.fontSize.small}; - :last-of-type { - ${activeColor} - } +const MIN_BREADCRUMBS = 3; +const initialMaxCrumbs = (breadcrumbs) => breadcrumbs.length + 1; - :hover, - :focus { - text-decoration: none; +const BreadcrumbContainer = ({ breadcrumbs }) => { + const [maxCrumbs, setMaxCrumbs] = React.useState(initialMaxCrumbs(breadcrumbs)); - :not(:last-of-type) { - ${activeColor} + React.useEffect(() => { + const handleResize = () => { + setMaxCrumbs(initialMaxCrumbs(breadcrumbs)); + }; + + window.addEventListener('resize', handleResize); + + return () => window.removeEventListener('resize', handleResize); + }, [breadcrumbs]); + + // Our breadcrumbs representation is an array of crumbObjectShape || (array of crumbObjectShape) + // The latter indicates a collapsed series of breadcrumbs. + const processedBreadcrumbs = React.useMemo(() => { + const crumbsCopy = Array.from(breadcrumbs); + if (crumbsCopy.length >= maxCrumbs && crumbsCopy.length > 2) { + // A maximum of maxCrumbs breadcrumbs may be shown, so we collapse the first run of internal + // crumbs into a single "…" crumb + const collapsedCrumbs = crumbsCopy.splice(1, breadcrumbs.length - maxCrumbs + 1, []); + crumbsCopy[1] = collapsedCrumbs; } - } -`; + return crumbsCopy; + }, [maxCrumbs, breadcrumbs]); -const BreadcrumbContainer = ({ homeCrumb, lastCrumb }) => { - const { project } = useSnootyMetadata(); - const parents = useNavigationParents(project); - const breadcrumbs = React.useMemo(() => [homeCrumb, ...parents, lastCrumb], [homeCrumb, parents, lastCrumb]); + const collapseBreadcrumbs = () => { + const newMaxCrumbs = Math.max(maxCrumbs - 1, MIN_BREADCRUMBS); + setMaxCrumbs(newMaxCrumbs); + }; return ( - <> - {breadcrumbs.map(({ title, url }, index) => { + + {processedBreadcrumbs.map((crumb, index) => { const isFirst = index === 0; - const renderKey = typeof title === 'string' ? title : title[0]?.value; // could return undefined which is fine, we would still get a unique key return ( - - {!isFirst && → } - { - reportAnalytics('BreadcrumbClick', { - parentPaths: breadcrumbs, - breadcrumbClicked: url, - }); - }} - > - {formatText(title)} - + + {!isFirst && / } + {Array.isArray(crumb) ? ( + + ) : ( + + reportAnalytics('BreadcrumbClick', { + breadcrumbClicked: crumb.url, + }) + } + > + )} ); })} - + ); }; @@ -77,8 +85,7 @@ const crumbObjectShape = { }; BreadcrumbContainer.propTypes = { - homeCrumb: PropTypes.shape(crumbObjectShape).isRequired, - lastCrumb: PropTypes.shape(crumbObjectShape).isRequired, + breadcrumbs: PropTypes.shape(crumbObjectShape).isRequired, }; export default BreadcrumbContainer; diff --git a/src/components/Breadcrumbs/CollapsedBreadcrumbs.js b/src/components/Breadcrumbs/CollapsedBreadcrumbs.js new file mode 100644 index 000000000..509337031 --- /dev/null +++ b/src/components/Breadcrumbs/CollapsedBreadcrumbs.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Menu, MenuItem } from '@leafygreen-ui/menu'; +import IconButton from '@leafygreen-ui/icon-button'; +import Icon from '@leafygreen-ui/icon'; +import { formatText } from '../../utils/format-text'; + +const CollapsedBreadcrumbs = ({ crumbs }) => { + return ( + + + + + } + > + {crumbs.map((crumb, index) => ( + + {formatText(crumb.title)} + + ))} + + + ); +}; + +const crumbObjectShape = { + title: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, +}; + +CollapsedBreadcrumbs.propTypes = { + crumbs: PropTypes.arrayOf(PropTypes.shape(crumbObjectShape)).isRequired, +}; + +export default CollapsedBreadcrumbs; diff --git a/src/components/Breadcrumbs/IndividualBreadcrumb.js b/src/components/Breadcrumbs/IndividualBreadcrumb.js new file mode 100644 index 000000000..9a741b396 --- /dev/null +++ b/src/components/Breadcrumbs/IndividualBreadcrumb.js @@ -0,0 +1,121 @@ +import React, { useCallback, useState } from 'react'; +import PropTypes from 'prop-types'; +import { css as LeafyCss, cx } from '@leafygreen-ui/emotion'; +import Tooltip from '@leafygreen-ui/tooltip'; +import Link from '../Link'; +import { formatText } from '../../utils/format-text'; +import { theme } from '../../theme/docsTheme'; + +const linkStyling = LeafyCss` + font-size: ${theme.fontSize.small}; + vertical-align: middle; + + :hover, + :focus { + text-decoration: underline; + } +`; + +const ellipsisStyling = LeafyCss` + text-overflow: ellipsis; +`; + +const linkWrapperLayoutStyling = LeafyCss` + overflow: hidden; + white-space: nowrap; + + :first-child { + min-width: max-content; + } + + @media ${theme.screenSize.smallAndUp} { + :last-child { + min-width: max-content; + } + } +`; + +// On resize events, recheck if our truncation status +function subscribeToResizeEvents(callback) { + window.addEventListener('resize', callback); + return () => { + window.removeEventListener('resize', callback); + }; +} + +// For server-side generation, assume no truncation +function getServerSnapshot() { + return false; +} + +const TRUNCATION_THRESHOLD = 125; // px + +const useIsTruncated = (node) => { + const isTruncated = React.useSyncExternalStore( + subscribeToResizeEvents, + () => { + const isTruncated = (node?.scrollWidth ?? 0) > (node?.clientWidth ?? 0); + const isExcessivelyTruncated = isTruncated && node?.clientWidth <= TRUNCATION_THRESHOLD; + + // useSyncExternalStore requires types with value comparison semantics + return JSON.stringify({ isTruncated, isExcessivelyTruncated }); + }, + getServerSnapshot + ); + + return JSON.parse(isTruncated); +}; + +const IndividualBreadcrumb = ({ crumb, setIsExcessivelyTruncated, onClick }) => { + const [node, setNode] = useState(null); + const measuredRef = useCallback((node) => { + if (node !== null) { + setNode(node); + } + }, []); + + const { isTruncated, isExcessivelyTruncated } = useIsTruncated(node); + + if (isExcessivelyTruncated) { + setIsExcessivelyTruncated(); + } + + let result = ( +
21 ? ellipsisStyling : '')} ref={measuredRef}> + + {formatText(crumb.title)} + +
+ ); + + if (isTruncated) { + result = ( + + {formatText(crumb.title)} + + ); + } + + return result; +}; + +const crumbObjectShape = { + title: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.object)]), + url: PropTypes.string.isRequired, +}; + +IndividualBreadcrumb.propTypes = { + crumb: PropTypes.shape(crumbObjectShape).isRequired, + setIsExcessivelyTruncated: PropTypes.func.isRequired, + onClick: PropTypes.func, +}; + +export default IndividualBreadcrumb; diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js index 7f17a5341..f17d37591 100644 --- a/src/components/Breadcrumbs/index.js +++ b/src/components/Breadcrumbs/index.js @@ -1,10 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Body } from '@leafygreen-ui/typography'; import { css, cx } from '@leafygreen-ui/emotion'; import { palette } from '@leafygreen-ui/palette'; -import { baseUrl } from '../../utils/base-url'; import { theme } from '../../theme/docsTheme'; +import { getCompleteBreadcrumbData } from '../../utils/get-complete-breadcrumb-data.js'; +import { useBreadcrumbs } from '../../hooks/use-breadcrumbs'; +import useSnootyMetadata from '../../utils/use-snooty-metadata'; import BreadcrumbContainer from './BreadcrumbContainer'; const breadcrumbBodyStyle = css` @@ -14,21 +15,19 @@ const breadcrumbBodyStyle = css` } `; -const Breadcrumbs = ({ homeUrl = null, pageTitle = null, siteTitle, slug }) => { - const homeCrumb = { - title: 'Docs Home', - url: homeUrl || baseUrl(), - }; - // If a pageTitle prop is passed, use that as the last breadcrumb instead - const lastCrumb = { - title: pageTitle || siteTitle, - url: pageTitle ? slug : '/', - }; +const Breadcrumbs = ({ siteTitle, slug }) => { + const queriedCrumbs = useBreadcrumbs(); + + const { parentPaths } = useSnootyMetadata(); + const breadcrumbs = React.useMemo( + () => getCompleteBreadcrumbData({ siteTitle, slug, queriedCrumbs, parentPaths }), + [parentPaths, queriedCrumbs, siteTitle, slug] + ); return ( - - - +
+ +
); }; diff --git a/src/components/OpenAPI/index.js b/src/components/OpenAPI/index.js index fb7f2cf1a..02c40f514 100644 --- a/src/components/OpenAPI/index.js +++ b/src/components/OpenAPI/index.js @@ -6,7 +6,6 @@ import { Global, css } from '@emotion/react'; import styled from '@emotion/styled'; import { palette } from '@leafygreen-ui/palette'; import ComponentFactory from '../ComponentFactory'; -import { SidenavBackButton } from '../Sidenav'; import Spinner from '../Spinner'; import { useSiteMetadata } from '../../hooks/use-site-metadata'; import useStickyTopValues from '../../hooks/useStickyTopValues'; @@ -91,13 +90,6 @@ const getGlobalCss = ({ topLarge, topMedium }) => css` } `; -const Border = styled('hr')` - border: unset; - border-bottom: 1px solid ${palette.gray.light2}; - margin: ${theme.size.default} 0; - width: 100%; -`; - const LoadingContainer = styled('div')` align-items: center; display: flex; @@ -132,12 +124,9 @@ const LoadingWidget = ({ className }) => ( ); const MenuTitleContainer = ({ siteTitle, pageTitle }) => { - const docsTitle = siteTitle ? `${siteTitle} Docs` : 'Docs'; return ( <> - {/* Disable LG left arrow glyph due to bug where additional copies of the LG icon would be rendered - at the bottom of the page. */} - } enableGlyph={false} target="/" titleOverride={docsTitle} /> + {/* TODO: Add DocsHomeButton here - see comment below */} {pageTitle} ); @@ -213,6 +202,8 @@ const OpenAPI = ({ metadata, nodeData: { argument, children, options = {} }, pag sidebarEl.insertBefore(menuTitleContainerEl, searchEl); const pageTitle = page?.options?.title || ''; const siteTitle = metadata?.title; + /* TODO: The below function is deprecated with React 18, need to replace it (potentially with + createRoot() and .render() (see React documentation) */ render(, menuTitleContainerEl); } } diff --git a/src/components/Sidenav/DocsHomeButton.js b/src/components/Sidenav/DocsHomeButton.js new file mode 100644 index 000000000..d29dddcf0 --- /dev/null +++ b/src/components/Sidenav/DocsHomeButton.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { SideNavItem } from '@leafygreen-ui/side-nav'; +import Icon from '@leafygreen-ui/icon'; +import { css as LeafyCSS, cx } from '@leafygreen-ui/emotion'; +import { palette } from '@leafygreen-ui/palette'; +import Link from '../Link'; +import { baseUrl } from '../../utils/base-url'; +import { sideNavItemBasePadding } from './styles/sideNavItem'; +import { titleStyle } from './styles/sideNavItem'; + +const homeLinkStyle = LeafyCSS` + span { + color: ${palette.gray.dark1}; + font-weight: 400; + display: flex; + gap: 6px; + svg { + height: 17px; + color: ${palette.gray.dark2}; + } + } +`; + +const DocsHomeButton = () => { + return ( + + + Docs Home + + ); +}; + +export default DocsHomeButton; diff --git a/src/components/Sidenav/Sidenav.js b/src/components/Sidenav/Sidenav.js index 96f162866..debb52c7c 100644 --- a/src/components/Sidenav/Sidenav.js +++ b/src/components/Sidenav/Sidenav.js @@ -13,7 +13,6 @@ import VersionDropdown from '../VersionDropdown'; import useStickyTopValues from '../../hooks/useStickyTopValues'; import { theme } from '../../theme/docsTheme'; import { formatText } from '../../utils/format-text'; -import { baseUrl } from '../../utils/base-url'; import { TocContext } from '../../context/toc-context'; import { VersionContext } from '../../context/version-context'; import useSnootyMetadata from '../../utils/use-snooty-metadata'; @@ -23,11 +22,11 @@ import GuidesTOCTree from './GuidesTOCTree'; import IA from './IA'; import IATransition from './IATransition'; import ProductsList from './ProductsList'; -import SidenavBackButton from './SidenavBackButton'; import { SidenavContext } from './sidenav-context'; import SidenavMobileTransition from './SidenavMobileTransition'; import Toctree from './Toctree'; -import { sideNavItemBasePadding, sideNavItemFontSize } from './styles/sideNavItem'; +import { sideNavItemBasePadding, sideNavItemFontSize, titleStyle } from './styles/sideNavItem'; +import DocsHomeButton from './DocsHomeButton'; const SIDENAV_WIDTH = 268; @@ -77,21 +76,6 @@ const sideNavStyling = ({ hideMobile, isCollapsed }) => LeafyCSS` `; -const titleStyle = LeafyCSS` - color: ${palette.gray.dark3}; - font-size: ${theme.fontSize.small}; - font-weight: bold; - line-height: 20px; - text-transform: none; - :hover { - background-color: inherit; - - &:after, span:after { - display: none; - } - } -`; - // Prevent content scrolling when the side nav is open on mobile and tablet screen sizes const disableScroll = (shouldDisableScroll) => css` body { @@ -260,21 +244,8 @@ const Sidenav = ({ chapters, guides, page, pageTitle, repoBranches, siteTitle, s - - MongoDB Documentation - + - { - setBack(true); - hideMobileSidenav(); - }} - project={project} - currentSlug={slug} - target={isGuidesTemplate ? '/' : ''} - titleOverride={isGuidesTemplate ? siteTitle : ''} - eol={eol} - /> {ia && ( {formatText(pageTitle)}} diff --git a/src/components/Sidenav/SidenavBackButton.js b/src/components/Sidenav/SidenavBackButton.js deleted file mode 100644 index 6d2d0469d..000000000 --- a/src/components/Sidenav/SidenavBackButton.js +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { css, cx } from '@leafygreen-ui/emotion'; -import Icon from '@leafygreen-ui/icon'; -import { palette } from '@leafygreen-ui/palette'; -import { SideNavItem } from '@leafygreen-ui/side-nav'; -import Link from '../Link'; -import { useNavigationParents } from '../../hooks/use-navigation-parents'; -import { baseUrl } from '../../utils/base-url'; -import { theme } from '../../theme/docsTheme'; -import { formatText } from '../../utils/format-text'; -import { sideNavItemBasePadding } from './styles/sideNavItem'; - -const backButtonStyling = css` - font-size: ${theme.fontSize.small}; - margin-bottom: 16px; - font-weight: 400; - line-height: 20px; - > span { - color: ${palette.gray.dark1}; - } -`; - -const htmlBackIcon = css` - margin-right: ${theme.size.small}; -`; - -const SidenavBackButton = ({ - border, - currentSlug, - enableGlyph = true, - handleClick, - project, - target, - titleOverride, - eol, - ...props -}) => { - const parents = useNavigationParents(project); - const glyph = enableGlyph ? : null; - let title = titleOverride; - let url = target; - - // Fetch page to navigate to using parent category page(s) - if (!titleOverride) { - if (project === 'landing') { - const landingExceptions = ['/', 'search']; - - if (landingExceptions.includes(currentSlug)) { - // At homepage; nothing to link back to - return null; - } - - title = 'home'; - url = '/'; - } else if (parents.length) { - [{ title, url }] = parents.slice(-1); - } else { - title = 'docs home'; - url = baseUrl(); - } - } - - if (!title || !title.length || !url) { - return null; - } - - let textShown = 'Back to '; - if (eol) { - url = 'https://docs.mongodb.com/legacy/'; - textShown = 'Return to Documentation'; - } - - return ( - <> - - {/* - * Uses HTML/text-based arrow instead of LG icon as a workaround for a bug where the - * icon can be rendered twice (see: OpenAPI component) - */} - {!enableGlyph && ←} - {textShown} {!eol && formatText(title)} - - {border} - - ); -}; - -SidenavBackButton.propTypes = { - border: PropTypes.element, - currentSlug: PropTypes.string, - handleClick: PropTypes.func, - project: PropTypes.string, - target: PropTypes.string, - titleOverride: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.string]), - eol: PropTypes.bool, -}; - -export default SidenavBackButton; diff --git a/src/components/Sidenav/index.js b/src/components/Sidenav/index.js index 04a143bab..623a87fbf 100644 --- a/src/components/Sidenav/index.js +++ b/src/components/Sidenav/index.js @@ -1,14 +1,6 @@ import Sidenav from './Sidenav'; -import SidenavBackButton from './SidenavBackButton'; import SidenavMobileMenuButton from './SidenavMobileMenuButton'; import SidenavMobileMenuDropdown from './SidenavMobileMenuDropdown'; import { SidenavContext, SidenavContextProvider } from './sidenav-context'; -export { - Sidenav, - SidenavBackButton, - SidenavContext, - SidenavContextProvider, - SidenavMobileMenuButton, - SidenavMobileMenuDropdown, -}; +export { Sidenav, SidenavContext, SidenavContextProvider, SidenavMobileMenuButton, SidenavMobileMenuDropdown }; diff --git a/src/components/Sidenav/styles/sideNavItem.js b/src/components/Sidenav/styles/sideNavItem.js index 9b812572b..4681b14e2 100644 --- a/src/components/Sidenav/styles/sideNavItem.js +++ b/src/components/Sidenav/styles/sideNavItem.js @@ -1,4 +1,5 @@ import { css } from '@leafygreen-ui/emotion'; +import { palette } from '@leafygreen-ui/palette'; import { theme } from '../../../theme/docsTheme'; export const sideNavItemBasePadding = css` @@ -31,3 +32,19 @@ export const sideNavItemTOCStyling = ({ level = 1 }) => css` export const sideNavItemFontSize = css` font-size: ${theme.fontSize.small}; `; + +export const titleStyle = css` + color: ${palette.gray.dark3}; + font-size: ${theme.fontSize.small}; + font-weight: bold; + line-height: 20px; + text-transform: none; + :hover { + background-color: inherit; + + &:after, + span:after { + display: none; + } + } +`; diff --git a/src/components/StructuredData/BreadcrumbSchema.js b/src/components/StructuredData/BreadcrumbSchema.js index 6e0610de7..c3ab85fdf 100644 --- a/src/components/StructuredData/BreadcrumbSchema.js +++ b/src/components/StructuredData/BreadcrumbSchema.js @@ -1,39 +1,30 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withPrefix } from 'gatsby'; - -import { useSiteMetadata } from '../../hooks/use-site-metadata'; +import { getCompleteBreadcrumbData } from '../../utils/get-complete-breadcrumb-data.js'; import { assertTrailingSlash } from '../../utils/assert-trailing-slash'; -import { baseUrl } from '../../utils/base-url'; +import { useBreadcrumbs } from '../../hooks/use-breadcrumbs'; import useSnootyMetadata from '../../utils/use-snooty-metadata'; -const getBreadcrumbList = (breadcrumbs, siteUrl) => - breadcrumbs.map(({ path, plaintext }, index) => ({ +const getBreadcrumbList = (breadcrumbs) => + breadcrumbs.map(({ url, title }, index) => ({ '@type': 'ListItem', - position: index + 2, - name: plaintext, - item: assertTrailingSlash(`${siteUrl}${withPrefix(path)}`), + position: index + 1, + name: title, + item: assertTrailingSlash(url), })); const BreadcrumbSchema = ({ slug }) => { - const { siteUrl } = useSiteMetadata(); - const { project, parentPaths, title: siteTitle } = useSnootyMetadata(); - const breadcrumbs = parentPaths[slug] ?? []; - const breadcrumbList = [ - { - '@type': 'ListItem', - position: 1, - name: 'MongoDB Documentation', - item: baseUrl(), - }, - ...getBreadcrumbList( - [...(slug !== '/' && project !== 'landing' ? [{ path: '/', plaintext: siteTitle }] : []), ...breadcrumbs], - siteUrl - ), - ]; + const { parentPaths, title: siteTitle } = useSnootyMetadata(); + + const queriedCrumbs = useBreadcrumbs(); + const breadcrumbList = React.useMemo( + () => [...getBreadcrumbList([...getCompleteBreadcrumbData({ siteTitle, slug, queriedCrumbs, parentPaths })])], + [siteTitle, slug, queriedCrumbs, parentPaths] + ); + return ( <> - {Array.isArray(breadcrumbs) && ( + {Array.isArray(queriedCrumbs.breadcrumbs) && (