diff --git a/package-lock.json b/package-lock.json index 123781b2f..1e5014ef9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "@leafygreen-ui/search-input": "^2.1.4", "@leafygreen-ui/segmented-control": "^8.0.0", "@leafygreen-ui/select": "^7.0.0", - "@leafygreen-ui/side-nav": "^10.0.0", + "@leafygreen-ui/side-nav": "^14.1.3", "@leafygreen-ui/table": "^6.1.0", "@leafygreen-ui/tabs": "^11.2.0", "@leafygreen-ui/text-area": "^6.1.0", @@ -5761,83 +5761,97 @@ } }, "node_modules/@leafygreen-ui/side-nav": { - "version": "10.1.2", - "license": "Apache-2.0", + "version": "14.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/side-nav/-/side-nav-14.1.3.tgz", + "integrity": "sha512-XkbquP+HhKTtFO0aDpmB7iaeAwmYLLBcBFzDmu44JYkWtoEuOyoiZrMQ8gW5a/WgZaBWjzLQBsUmNx76GuGTig==", "dependencies": { - "@leafygreen-ui/a11y": "^1.3.3", - "@leafygreen-ui/box": "^3.1.1", - "@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/portal": "^4.0.6", - "@leafygreen-ui/tokens": "^1.3.4", - "@leafygreen-ui/tooltip": "^7.1.3", - "@leafygreen-ui/typography": "^13.2.1", + "@leafygreen-ui/a11y": "^1.4.13", + "@leafygreen-ui/box": "^3.1.9", + "@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/portal": "^5.1.1", + "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/tooltip": "^11.0.4", + "@leafygreen-ui/typography": "^19.0.0", + "polished": "^4.2.2", "react-transition-group": "^4.4.5" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^2.3.5" + "@leafygreen-ui/leafygreen-provider": "^3.1.12" } }, "node_modules/@leafygreen-ui/side-nav/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/side-nav/node_modules/@leafygreen-ui/icon": { - "version": "11.29.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.29.1.tgz", - "integrity": "sha512-bCfeJ3mndU5wHayMWfkVWo0NXhPpBpHIG53aox/eRterqLvWg6jWyiuF930MHbyWDNEXC9Qw1WD637kZ93mmog==", + "node_modules/@leafygreen-ui/side-nav/node_modules/@leafygreen-ui/lib": { + "version": "13.5.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.5.0.tgz", + "integrity": "sha512-wrA8Au2DzgRFdgy+P023ChSDsdzRcRjXMFx4taCEJ368aVCeGJRNXQzsarpf89A4D46gSbqP9Fzi69TKij9Ktg==", "dependencies": { - "@leafygreen-ui/emotion": "^4.0.7", - "lodash": "^4.17.21" + "@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/side-nav/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/side-nav/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/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==", + "node_modules/@leafygreen-ui/side-nav/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/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/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^2.3.5" + "react-dom": "^17.0.0 || ^18.0.0" } }, "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", - "integrity": "sha512-5DABF0NkyH0JNZnv4YUgYxMxIojrylSwW8jg2nVMD96ZynH+vKYDUFRWef6GztqaiqSnXZjn65wQcg2v9C0nUg==", + "version": "19.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-19.1.1.tgz", + "integrity": "sha512-S6JDXHvMY+Cwqy9VOWZWvcnoxXpw16AzlpcPNHzq1j9Puf4cIV2HP5rFdbV/vMt7HyqoRoWVnTQa4OXPrg4W3g==", "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.2.0", + "@leafygreen-ui/lib": "^13.4.0", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/polymorphic": "^1.3.7", + "@leafygreen-ui/tokens": "^2.7.0" }, "peerDependencies": { - "@leafygreen-ui/leafygreen-provider": "^2.3.5" + "@leafygreen-ui/leafygreen-provider": "^3.1.12" + } + }, + "node_modules/@leafygreen-ui/side-nav/node_modules/@storybook/csf": { + "version": "0.1.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.8.tgz", + "integrity": "sha512-Ntab9o7LjBCbFIao5l42itFiaSh/Qu+l16l/r/9qmV9LnYZkO+JQ7tzhdlwpgJfhs+B5xeejpdAtftDRyXNajw==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@leafygreen-ui/side-nav/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" } }, "node_modules/@leafygreen-ui/skeleton-loader": { @@ -33483,73 +33497,83 @@ } }, "@leafygreen-ui/side-nav": { - "version": "10.1.2", + "version": "14.1.3", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/side-nav/-/side-nav-14.1.3.tgz", + "integrity": "sha512-XkbquP+HhKTtFO0aDpmB7iaeAwmYLLBcBFzDmu44JYkWtoEuOyoiZrMQ8gW5a/WgZaBWjzLQBsUmNx76GuGTig==", "requires": { - "@leafygreen-ui/a11y": "^1.3.3", - "@leafygreen-ui/box": "^3.1.1", - "@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/portal": "^4.0.6", - "@leafygreen-ui/tokens": "^1.3.4", - "@leafygreen-ui/tooltip": "^7.1.3", - "@leafygreen-ui/typography": "^13.2.1", + "@leafygreen-ui/a11y": "^1.4.13", + "@leafygreen-ui/box": "^3.1.9", + "@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/portal": "^5.1.1", + "@leafygreen-ui/tokens": "^2.5.2", + "@leafygreen-ui/tooltip": "^11.0.4", + "@leafygreen-ui/typography": "^19.0.0", + "polished": "^4.2.2", "react-transition-group": "^4.4.5" }, "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/icon": { - "version": "11.29.1", - "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon/-/icon-11.29.1.tgz", - "integrity": "sha512-bCfeJ3mndU5wHayMWfkVWo0NXhPpBpHIG53aox/eRterqLvWg6jWyiuF930MHbyWDNEXC9Qw1WD637kZ93mmog==", + "@leafygreen-ui/lib": { + "version": "13.5.0", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-13.5.0.tgz", + "integrity": "sha512-wrA8Au2DzgRFdgy+P023ChSDsdzRcRjXMFx4taCEJ368aVCeGJRNXQzsarpf89A4D46gSbqP9Fzi69TKij9Ktg==", "requires": { - "@leafygreen-ui/emotion": "^4.0.7", - "lodash": "^4.17.21" + "@storybook/csf": "^0.1.0", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" } }, - "@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/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/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/palette": "^3.4.5" + "@leafygreen-ui/hooks": "^8.1.3", + "@leafygreen-ui/lib": "^13.3.0" } }, - "@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==", + "@leafygreen-ui/typography": { + "version": "19.1.1", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-19.1.1.tgz", + "integrity": "sha512-S6JDXHvMY+Cwqy9VOWZWvcnoxXpw16AzlpcPNHzq1j9Puf4cIV2HP5rFdbV/vMt7HyqoRoWVnTQa4OXPrg4W3g==", "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/icon": "^12.2.0", + "@leafygreen-ui/lib": "^13.4.0", + "@leafygreen-ui/palette": "^4.0.10", + "@leafygreen-ui/polymorphic": "^1.3.7", + "@leafygreen-ui/tokens": "^2.7.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==", + "@storybook/csf": { + "version": "0.1.8", + "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.8.tgz", + "integrity": "sha512-Ntab9o7LjBCbFIao5l42itFiaSh/Qu+l16l/r/9qmV9LnYZkO+JQ7tzhdlwpgJfhs+B5xeejpdAtftDRyXNajw==", "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" + "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 c2a27008c..16d655f1b 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "@leafygreen-ui/search-input": "^2.1.4", "@leafygreen-ui/segmented-control": "^8.0.0", "@leafygreen-ui/select": "^7.0.0", - "@leafygreen-ui/side-nav": "^10.0.0", + "@leafygreen-ui/side-nav": "^14.1.3", "@leafygreen-ui/table": "^6.1.0", "@leafygreen-ui/tabs": "^11.2.0", "@leafygreen-ui/text-area": "^6.1.0", diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 073a9f40f..dbf0ca687 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withPrefix, navigate } from 'gatsby'; +import { navigate } from 'gatsby'; import styled from '@emotion/styled'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import LeafyGreenCard from '@leafygreen-ui/card'; @@ -12,6 +12,7 @@ import ConditionalWrapper from '../ConditionalWrapper'; import Link from '../Link'; import Tag from '../Tag'; import { isRelativeUrl } from '../../utils/is-relative-url'; +import { getSuitableIcon } from '../../utils/get-suitable-icon'; const cardBaseStyles = css` display: flex; @@ -157,15 +158,7 @@ const Card = ({ isLanding && !isLargeIconStyle ? landingStyles : '', // must come after other styles to override ]; - let iconSrc; - - if (icon) { - const isPath = icon.includes('/'); - const getIcon = `${icon}${darkMode ? '_inverse' : ''}`; - const imageUrl = `https://webimages.mongodb.com/_com_assets/icons/${getIcon}.svg`; - - iconSrc = isPath ? (darkMode && iconDark ? withPrefix(iconDark) : withPrefix(icon)) : imageUrl; - } + const iconSrc = getSuitableIcon(icon, iconDark, darkMode); return ( onCardClick(url) : undefined}> diff --git a/src/components/Sidenav/DocsHomeButton.js b/src/components/Sidenav/DocsHomeButton.js index 46c2284b1..76a3ccdd5 100644 --- a/src/components/Sidenav/DocsHomeButton.js +++ b/src/components/Sidenav/DocsHomeButton.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { SideNavItem } from '@leafygreen-ui/side-nav'; import Icon from '@leafygreen-ui/icon'; import { css as LeafyCSS, cx } from '@leafygreen-ui/emotion'; @@ -10,24 +11,24 @@ import { titleStyle } from './styles/sideNavItem'; const homeLinkStyle = LeafyCSS` span { - color: ${palette.gray.dark1}; + color: var(--color); font-weight: 400; display: flex; gap: 6px; svg { height: 17px; - color: ${palette.gray.dark2}; } } `; -const DocsHomeButton = () => { +const DocsHomeButton = ({ darkMode }) => { return ( Docs Home @@ -35,4 +36,8 @@ const DocsHomeButton = () => { ); }; +DocsHomeButton.propTypes = { + darkMode: PropTypes.bool, +}; + export default DocsHomeButton; diff --git a/src/components/Sidenav/IALinkedData.js b/src/components/Sidenav/IALinkedData.js index 8cf04737e..33a7e79f9 100644 --- a/src/components/Sidenav/IALinkedData.js +++ b/src/components/Sidenav/IALinkedData.js @@ -1,10 +1,11 @@ import React from 'react'; import { css, cx } from '@leafygreen-ui/emotion'; -import { withPrefix } from 'gatsby'; +import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { palette } from '@leafygreen-ui/palette'; import { SideNavItem } from '@leafygreen-ui/side-nav'; import Link from '../Link'; import { theme } from '../../theme/docsTheme'; +import { getSuitableIcon } from '../../utils/get-suitable-icon'; const ulStyling = css` display: grid; @@ -62,12 +63,14 @@ const liStyling = css` `; const IALinkedData = ({ linkedData }) => { + const { darkMode } = useDarkMode(); return (