DOP-1546: Upgrade LeafyGreen dependencies (#289)

mongodb · Sep 29, 2020 · 056efeb · 056efeb
1 parent 095de04
commit 056efeb
Show file tree

Hide file tree

Showing 16 changed files with 947 additions and 1,515 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -5,6 +5,6 @@ import { theme } from './src/theme/docsTheme';
 
 export const wrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>
-    <LeafyGreenProvider>{element}</LeafyGreenProvider>
+    <LeafyGreenProvider baseFontSize={16}>{element}</LeafyGreenProvider>
   </ThemeProvider>
 );
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -12,6 +12,6 @@ export const replaceRenderer = ({ replaceBodyHTMLString, bodyComponent }) =>
 
 export const wrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>
-    <LeafyGreenProvider>{element}</LeafyGreenProvider>
+    <LeafyGreenProvider baseFontSize={16}>{element}</LeafyGreenProvider>
   </ThemeProvider>
 );
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.6.1",
   "repository": "github:mongodb/snooty",
   "devDependencies": {
-    "@babel/core": "^7.11.5",
+    "@babel/core": "^7.11.6",
     "auto-changelog": "^1.16.4",
     "babel-jest": "^24.9.0",
     "babel-plugin-emotion": "^10.0.33",
@@ -51,37 +51,36 @@
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
     "@leafygreen-ui/badge": "^3.0.2",
-    "@leafygreen-ui/box": "^1.1.1",
-    "@leafygreen-ui/button": "^4.2.5",
-    "@leafygreen-ui/callout": "^1.1.2",
-    "@leafygreen-ui/card": "^2.0.0",
-    "@leafygreen-ui/checkbox": "^4.1.1",
-    "@leafygreen-ui/code": "^3.5.0",
+    "@leafygreen-ui/box": "^2.1.5",
+    "@leafygreen-ui/button": "^7.0.1",
+    "@leafygreen-ui/callout": "^1.2.1",
+    "@leafygreen-ui/card": "^4.1.0",
+    "@leafygreen-ui/checkbox": "^5.0.0",
+    "@leafygreen-ui/code": "^5.0.0",
     "@leafygreen-ui/emotion": "^2.0.2",
-    "@leafygreen-ui/hooks": "^4.1.0",
-    "@leafygreen-ui/icon": "^4.0.0",
-    "@leafygreen-ui/icon-button": "^4.0.0",
+    "@leafygreen-ui/hooks": "^4.2.1",
+    "@leafygreen-ui/icon": "^6.6.0",
+    "@leafygreen-ui/icon-button": "^8.0.0",
     "@leafygreen-ui/leafygreen-provider": "^1.1.4",
-    "@leafygreen-ui/modal": "^3.1.5",
+    "@leafygreen-ui/modal": "^4.1.1",
     "@leafygreen-ui/palette": "^2.0.2",
     "@leafygreen-ui/text-input": "^3.0.4",
-    "@leafygreen-ui/tooltip": "^3.3.6",
+    "@leafygreen-ui/tooltip": "^5.0.1",
     "@leafygreen-ui/typography": "^4.3.0",
     "@loadable/component": "^5.13.1",
     "css-loader": "^3.6.0",
     "dotenv": "^8.2.0",
     "emotion-theming": "^10.0.27",
-    "gatsby": "^2.24.53",
-    "gatsby-plugin-emotion": "^4.3.10",
-    "gatsby-plugin-layout": "^1.3.10",
-    "gatsby-plugin-react-helmet": "^3.3.10",
-    "highlight.js": "^9.18.3",
+    "gatsby": "^2.24.63",
+    "gatsby-plugin-emotion": "^4.3.11",
+    "gatsby-plugin-layout": "^1.3.11",
+    "gatsby-plugin-react-helmet": "^3.3.11",
     "html-screen-capture-js": "^1.0.47",
     "mongodb-stitch-browser-sdk": "^4.8.0",
     "mongodb-stitch-server-sdk": "^4.8.0",
     "no-scroll": "^2.1.1",
     "prop-types": "^15.7.2",
-    "query-string": "^6.13.1",
+    "query-string": "^6.13.2",
     "rasterizehtml": "^1.3.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

diff --git a/src/components/Code.js b/src/components/Code.js
@@ -63,7 +63,6 @@ const Code = ({ nodeData: { copyable, lang = 'none', linenos, value }, uriWriter
       `}
       language={getLanguage(lang)}
       showLineNumbers={linenos}
-      variant="light"
     >
       {code}
     </CodeBlock>

diff --git a/src/components/Operation.js b/src/components/Operation.js
@@ -115,7 +115,7 @@ const Operation = ({
         <Badge variant={methodBadgeMap[method]}>{method}</Badge>
         <Path dangerouslySetInnerHTML={{ __html: formatPath(path) }} />
         <IconButton
-          ariaLabel={`${showDetails ? 'Hide' : 'Show'} operation details`}
+          aria-label={`${showDetails ? 'Hide' : 'Show'} operation details`}
           onClick={() => setShowDetails(!showDetails)}
           css={css`
             margin-left: auto;

diff --git a/src/components/SearchResults/EmptyResults.js b/src/components/SearchResults/EmptyResults.js
@@ -58,7 +58,7 @@ const EmptyResults = () => {
   }, []);
   return (
     <EmptyStateContainer>
-      <MagnifyingGlassButton ariaLabel="Search MongoDB Documentation" onClick={focusOnSearchbar}>
+      <MagnifyingGlassButton aria-label="Search MongoDB Documentation" onClick={focusOnSearchbar}>
         <MagnifyingGlass glyph="MagnifyingGlass" />
       </MagnifyingGlassButton>
       <TitleText>

diff --git a/src/components/Searchbar/CondensedSearchbar.js b/src/components/Searchbar/CondensedSearchbar.js
@@ -38,7 +38,7 @@ const ExpandButton = styled(IconButton)`
 `;
 
 const CondensedSearchbar = ({ onExpand }) => (
-  <ExpandButton ariaLabel="Open MongoDB Docs Search" onClick={onExpand}>
+  <ExpandButton aria-label="Open MongoDB Docs Search" onClick={onExpand}>
     <ExpandMagnifyingGlass glyph="MagnifyingGlass" fill={uiColors.gray.base} />
   </ExpandButton>
 );

diff --git a/src/components/Searchbar/ExpandedSearchbar.js b/src/components/Searchbar/ExpandedSearchbar.js
@@ -57,9 +57,9 @@ const GoButton = styled(IconButton)`
 `;
 
 const GoIcon = styled(Icon)`
-  /* Icon box size is 16px, 3px gives equal width and height */
-  left: 3px;
-  top: 3px;
+  /* Icon box size is 20px, 5px gives equal width and height */
+  left: 5px;
+  top: 5px;
   height: 10px;
   position: absolute;
   width: 10px;
@@ -135,17 +135,17 @@ const ExpandedSearchbar = ({ isFocused, onChange, onMobileClose }) => {
 
   return (
     <>
-      <MagnifyingGlassButton ariaLabel="Search MongoDB Documentation" onClick={onSearchFocus}>
+      <MagnifyingGlassButton aria-label="Search MongoDB Documentation" onClick={onSearchFocus}>
         <MagnifyingGlass glyph="MagnifyingGlass" />
       </MagnifyingGlassButton>
       <SearchTextInput ref={searchTextbox} isSearching={isSearching} onChange={onSearchChange} value={searchTerm} />
       {shouldShowGoButton && (
-        <GoButton ref={goButton} type="submit" ariaLabel="Go" href={searchUrl}>
+        <GoButton ref={goButton} type="submit" aria-label="Go" href={searchUrl}>
           <GoIcon glyph="ArrowRight" fill="#13AA52" />
         </GoButton>
       )}
       {isMobile && (
-        <CloseButton ariaLabel="Close Search" onClick={onMobileClose}>
+        <CloseButton aria-label="Close Search" onClick={onMobileClose}>
           <Icon glyph="X" fill={uiColors.gray.base} />
         </CloseButton>
       )}

diff --git a/src/components/Searchbar/Pagination.js b/src/components/Searchbar/Pagination.js
@@ -39,7 +39,7 @@ const Pagination = ({ currentPage, setCurrentPage, totalPages }) => {
   const canIncrementPage = useMemo(() => currentPage < totalPages, [currentPage, totalPages]);
   return (
     <PaginationContainer>
-      <PaginationButton ariaLabel="Back Page" disabled={!canDecrementPage} onClick={decrementPage} title="Back Page">
+      <PaginationButton aria-label="Back Page" disabled={!canDecrementPage} onClick={decrementPage} title="Back Page">
         <Icon glyph="ChevronLeft" fill={canDecrementPage ? ENABLED_COLOR : DISABLED_COLOR} />
       </PaginationButton>
       <PaginationText>
@@ -48,7 +48,7 @@ const Pagination = ({ currentPage, setCurrentPage, totalPages }) => {
         </strong>
       </PaginationText>
       <PaginationButton
-        ariaLabel="Forward Page"
+        aria-label="Forward Page"
         disabled={!canIncrementPage}
         onClick={incrementPage}
         title="Forward Page"

diff --git a/src/components/VersionDropdown.js b/src/components/VersionDropdown.js
@@ -132,11 +132,11 @@ VersionDropdown.propTypes = {
   publishedBranches: PropTypes.shape({
     version: PropTypes.shape({
       published: PropTypes.arrayOf(PropTypes.string).isRequired,
+      active: PropTypes.arrayOf(PropTypes.string).isRequired,
     }).isRequired,
     git: PropTypes.shape({
       branches: PropTypes.shape({
         published: PropTypes.arrayOf(PropTypes.string).isRequired,
-        active: PropTypes.arrayOf(PropTypes.string).isRequired,
       }).isRequired,
     }).isRequired,
   }).isRequired,

diff --git a/src/components/Widgets/FeedbackWidget/components/CloseButton.js b/src/components/Widgets/FeedbackWidget/components/CloseButton.js
@@ -4,7 +4,7 @@ import IconButton from '@leafygreen-ui/icon-button';
 
 export default function CloseButton({ onClick, size = 'default', ...props }) {
   return (
-    <IconButton variant="light" ariaLabel="Close Feedback Form" onClick={onClick} size={size} {...props}>
+    <IconButton aria-label="Close Feedback Form" onClick={onClick} size={size} {...props}>
       <Icon size={size} glyph="X" />
     </IconButton>
   );

diff --git a/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js b/src/components/Widgets/FeedbackWidget/components/ScreenshotButton.js
@@ -15,7 +15,6 @@ export default function ScreenshotButton({ size = 'default', ...props }) {
         align="bottom"
         justify="middle"
         triggerEvent="hover"
-        variant="dark"
         open={isHovered}
         trigger={
           <Button variant="default" label={label} onClick={takeScreenshot} {...props}>

diff --git a/src/components/Widgets/FeedbackWidget/components/StarRating.js b/src/components/Widgets/FeedbackWidget/components/StarRating.js
@@ -60,7 +60,6 @@ export function Star({ ratingValue, isHighlighted, shouldShowTooltip, size, onCl
         align="bottom"
         justify="middle"
         triggerEvent="hover"
-        variant="dark"
         open={shouldShowTooltip}
         trigger={
           <StarContainer>

diff --git a/src/utils/site-metadata.js b/src/utils/site-metadata.js
@@ -22,8 +22,7 @@ const gitBranch = execSync('git rev-parse --abbrev-ref HEAD')
   .toString('utf8')
   .replace(/[\n\r\s]+$/, '');
 
-const getPathPrefix = () => {
-  const pathPrefix = process.env.PATH_PREFIX;
+const getPathPrefix = pathPrefix => {
   if (!pathPrefix) {
     return '';
   }
@@ -42,7 +41,7 @@ const siteMetadata = {
   parserBranch: process.env.GATSBY_PARSER_BRANCH,
   parserUser: process.env.GATSBY_PARSER_USER,
   patchId: process.env.PATCH_ID || '',
-  pathPrefix: getPathPrefix(),
+  pathPrefix: getPathPrefix(process.env.PATH_PREFIX),
   project: process.env.GATSBY_SITE,
   snootyBranch: gitBranch,
   snootyEnv: process.env.SNOOTY_ENV || 'development',

diff --git a/tests/unit/__snapshots__/Pagination.test.js.snap b/tests/unit/__snapshots__/Pagination.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Pagination renders pagination correctly 1`] = `
 <PaginationContainer>
   <PaginationButton
-    ariaLabel="Back Page"
+    aria-label="Back Page"
     disabled={true}
     onClick={[Function]}
     title="Back Page"
@@ -21,7 +21,7 @@ exports[`Pagination renders pagination correctly 1`] = `
     </strong>
   </PaginationText>
   <PaginationButton
-    ariaLabel="Forward Page"
+    aria-label="Forward Page"
     disabled={false}
     onClick={[Function]}
     title="Forward Page"