upgrade Grommet to latest

zooniverse · Oct 19, 2024 · c12de0a · c12de0a
1 parent efe06db
commit c12de0a
Show file tree

Hide file tree

Showing 15 changed files with 53 additions and 38 deletions.
diff --git a/packages/app-project/package.json b/packages/app-project/package.json
@@ -35,7 +35,7 @@
     "express": "^4.17.1",
     "graphql": "~16.9.0",
     "graphql-request": "~6.1.0",
-    "grommet": "~2.35.0",
+    "grommet": "~2.41.0",
     "grommet-icons": "~4.12.0",
     "i18next": "~23.14.0",
     "lodash": "~4.17.11",

diff --git a/packages/app-project/src/components/ProjectHeader/components/Nav/Nav.js b/packages/app-project/src/components/ProjectHeader/components/Nav/Nav.js
@@ -20,6 +20,7 @@ const StyledSpacedText = styled(SpacedText)`
 */
 const StyledAnchor = styled(Anchor)`
   border-bottom: 3px solid transparent;
+  border-top: 3px solid transparent; // to help align-items center in nav
   white-space: nowrap;
 
   &:hover {

diff --git a/packages/app-root/package.json b/packages/app-root/package.json
@@ -23,7 +23,7 @@
     "@zooniverse/user": "~0.1.0",
     "contentful": "~10.10.0",
     "express": "~4.21.0",
-    "grommet": "~2.35.0",
+    "grommet": "~2.41.0",
     "grommet-icons": "~4.12.0",
     "lodash": "~4.17.21",
     "morgan": "~1.10.0",

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
@@ -93,7 +93,7 @@
     "enzyme": "~3.11.0",
     "eslint-plugin-jsx-a11y": "~6.8.0",
     "eslint-plugin-react": "~7.34.1",
-    "grommet": "~2.35.0",
+    "grommet": "~2.41.0",
     "grommet-icons": "~4.12.0",
     "html-webpack-plugin": "~5.6.0",
     "ignore-styles": "~5.0.1",

diff --git a/packages/lib-content/src/screens/About/components/HowItWorks.js b/packages/lib-content/src/screens/About/components/HowItWorks.js
@@ -77,14 +77,15 @@ const ArrowBox = styled(Box)`
 `
 
 const StyledButton = styled(Button)`
+  display: flex;
+  justify-content: center;
   background: white;
   box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
   font-size: 0.8rem;
   padding: 5px;
   width: clamp(130px, 100%, 240px);
   border-radius: 8px;
   border: solid 1px ${props => props.theme.global.colors['neutral-2']};
-  text-align: center;
 
   &:hover {
     text-decoration: none;

diff --git a/packages/lib-content/src/screens/Donate/Donate.js b/packages/lib-content/src/screens/Donate/Donate.js
@@ -17,12 +17,13 @@ const StyledBox = styled(Box)`
 `
 
 const StyledDonate = styled(Anchor)`
+  display: flex;
+  justify-content: center;
   width: 300px;
   border-radius: 5px;
   border: solid 1px ${props => props.theme.global.colors['neutral-1']};
   font-size: 1rem;
   padding: 8px 5px;
-  text-align: center;
   font-weight: normal;
   color: white;
   background-color: ${props => props.theme.global.colors['neutral-1']};

diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Hero.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Hero.js
@@ -53,11 +53,12 @@ const StyledLogo = styled(ZooniverseLogotype)`
 `
 
 const StyledLink = styled(Anchor)`
+  display: flex;
+  justify-content: center;
   width: 300px;
   border-radius: 5px;
   font-size: 0.8rem;
   padding: 8px 5px;
-  text-align: center;
   color: black;
   background-color: ${props => props.theme.global.colors['neutral-2']};
   font-weight: normal;

diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
@@ -8,11 +8,12 @@ import SubHeading from '../../../../components/HeadingForAboutNav/SubHeading.js'
 import MaxWidthContent from '../../../../components/MaxWidthContent/MaxWidthContent.js'
 
 const StyledLink = styled(Anchor)`
+  display: flex;
+  justify-content: center;
   width: 300px;
   border-radius: 5px;
   font-size: 0.8rem;
   padding: 8px 5px;
-  text-align: center;
   color: black;
   background-color: ${props => props.theme.global.colors['neutral-2']};
   font-weight: normal;

diff --git a/packages/lib-content/src/screens/Volunteer/Volunteer.js b/packages/lib-content/src/screens/Volunteer/Volunteer.js
@@ -20,11 +20,12 @@ const StyledBox = styled(Box)`
 `
 
 const StyledRegister = styled(Anchor)`
+  display: flex;
+  justify-content: center;
   width: 300px;
   border-radius: 5px;
   font-size: 1rem;
   padding: 8px 5px;
-  text-align: center;
   color: black;
   background-color: ${props => props.theme.global.colors['neutral-2']};
   font-weight: normal;
@@ -35,12 +36,13 @@ const StyledRegister = styled(Anchor)`
 `
 
 const StyledBeta = styled(Anchor)`
+  display: flex;
+  justify-content: center;
   width: 300px;
   border-radius: 5px;
   border: solid 1px ${props => props.theme.global.colors['neutral-1']};
   font-size: 1rem;
   padding: 8px 5px;
-  text-align: center;
   color: black;
   background-color: white;
   font-weight: normal;

diff --git a/packages/lib-react-components/package.json b/packages/lib-react-components/package.json
@@ -87,7 +87,7 @@
     "dedent": "~1.5.1",
     "dirty-chai": "~2.0.1",
     "enzyme": "~3.11.0",
-    "grommet": "~2.35.0",
+    "grommet": "~2.41.0",
     "grommet-icons": "~4.12.0",
     "jsdom": "~24.0.0",
     "lodash": "~4.17.11",

diff --git a/packages/lib-react-components/src/ZooFooter/components/LogoAndTagline/LogoAndTagline.js b/packages/lib-react-components/src/ZooFooter/components/LogoAndTagline/LogoAndTagline.js
@@ -1,28 +1,24 @@
 import { Anchor, Box } from 'grommet'
 import { string } from 'prop-types'
-import styled from 'styled-components'
 
 import ZooniverseLogotype from '../../../ZooniverseLogotype'
 import SpacedText from '../../../SpacedText'
 
-export const StyledLogoAnchor = styled(Anchor)`
-  transition: color 0.2s linear;
-`
+const color = {
+  dark: 'light-3',
+  light: 'black'
+}
 
 export default function LogoAndTagline ({ className, tagLine }) {
-  const color = {
-    dark: 'light-3',
-    light: 'black'
-  }
-
   return (
     <Box className={className}>
-      <StyledLogoAnchor
+      <Anchor
         color={color}
+        margin={{ bottom: '5px' }}
         href='https://www.zooniverse.org'
       >
         <ZooniverseLogotype id='FooterZooniverseLogo' />
-      </StyledLogoAnchor>
+      </Anchor>
       <SpacedText
         color={color}
         size='medium'

diff --git a/packages/lib-react-components/src/ZooHeader/ZooHeader.js b/packages/lib-react-components/src/ZooHeader/ZooHeader.js
@@ -24,6 +24,7 @@ export const StyledHeader = styled(Box)`
 
 export const StyledLogoAnchor = styled(Anchor)`
   border-bottom: 2px solid transparent;
+  border-top: 2px solid transparent; // to help align-items center in nav
   color: #b2b2b2;
   margin-right: 30px;
 
@@ -115,6 +116,7 @@ export default function ZooHeader({
         aria-label={t('ZooHeader.SignedInUserNavigation.ariaLabel')}
         as='nav'
         direction='row'
+        align='center'
       >
         {hasMounted && (
           <UserNavigation

diff --git a/packages/lib-react-components/src/ZooHeader/components/NavListItem/NavListItem.js b/packages/lib-react-components/src/ZooHeader/components/NavListItem/NavListItem.js
@@ -6,14 +6,11 @@ import SpacedText from '../../../SpacedText'
 
 export const StyledNavListItem = styled(Anchor)`
   border-bottom: 2px solid transparent;
+  border-top: 2px solid transparent; // to help align-items center in nav
   ${props => css`color: ${props.color};`}
   text-decoration: none !important;
   white-space: nowrap;
 
-  &:visited {
-    ${props => css`color: ${props.color};`}
-  }
-
   &:hover, &:focus {
     ${props => css`border-bottom-color: ${props.theme.global.colors.brand};`}
   }

diff --git a/packages/lib-react-components/src/ZooHeader/components/UserNavigation/UserNavigation.js b/packages/lib-react-components/src/ZooHeader/components/UserNavigation/UserNavigation.js
@@ -11,7 +11,7 @@ import ThemeModeToggle from '../ThemeModeToggle/ThemeModeToggle.js'
 import { getHost } from '../../helpers'
 
 const StyledBlank = styled(Blank)`
-  vertical-align: -0.125em;
+  vertical-align: -3px; // to help align-items center in nav
 `
 
 const StyledNotificationIcon = styled(Notification)`

diff --git a/yarn.lock b/yarn.lock
@@ -1609,11 +1609,23 @@
   dependencies:
     "@emotion/memoize" "^0.8.0"
 
+"@emotion/is-prop-valid@^1.2.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
 "@emotion/memoize@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz"
   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
 
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
@@ -10676,19 +10688,20 @@ graphql@~16.9.0:
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.9.0.tgz#1c310e63f16a49ce1fbb230bd0a000e99f6f115f"
   integrity sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==
 
-grommet-icons@^4.10.0, grommet-icons@~4.12.0:
+grommet-icons@^4.12.1, grommet-icons@~4.12.0:
   version "4.12.1"
   resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.12.1.tgz#780aa7cd59c5586f642f221bdb5c6becd04ad000"
   integrity sha512-LhOP6BkDAGiSNcUOfsGGRo+AKD6zWOXeNeusY1WYvKplAR6mKCAQfH7Nig2Buc/v5zadKSko2NDtCQqwJaME0Q==
 
-grommet@~2.35.0:
-  version "2.35.0"
-  resolved "https://registry.yarnpkg.com/grommet/-/grommet-2.35.0.tgz#c735a5cf6fc6d4a814d952b431fdad9ab9902432"
-  integrity sha512-5NoYnLGhRXTGa48v+BRohu6oRUr86ZXg+z4QDSpIhXPaqUuCjZ72oSa6/3JBnwqKODuwos9LSovKxt3U/qgSAw==
+grommet@~2.41.0:
+  version "2.41.0"
+  resolved "https://registry.yarnpkg.com/grommet/-/grommet-2.41.0.tgz#00d7dff502ee155719034fca5d49ef8a9b5ae290"
+  integrity sha512-PNLfkQ8/Wcqc7GSMOllVmUpiNP7NfwtaX97gKpPasl663PNhvnkzmx6ofpbN3GY/JWOpN5CbgiGN/PodafnrFQ==
   dependencies:
-    grommet-icons "^4.10.0"
+    "@emotion/is-prop-valid" "^1.2.1"
+    grommet-icons "^4.12.1"
     hoist-non-react-statics "^3.2.0"
-    markdown-to-jsx "^7.2.0"
+    markdown-to-jsx "7.4.4"
     prop-types "^15.8.1"
 
 gunzip-maybe@^1.4.2:
@@ -13045,16 +13058,16 @@ markdown-it@~14.0.0:
     punycode.js "^2.3.1"
     uc.micro "^2.0.0"
 
+[email protected]:
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.4.tgz#90eccba7b74e8bd8a2831efeb281cb3ac88fadec"
+  integrity sha512-R9SGyfV2zsQx25YIYImACpiQ8dQe617CNyoE1wLst4wFHtiBGG3SEtJDlI1bt9SeotIcbITbVy9+ieQFWfEoQw==
+
 markdown-to-jsx@^7.1.8:
   version "7.4.7"
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.7.tgz#740ee7ec933865ef5cc683a0992797685a75e2ee"
   integrity sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==
 
-markdown-to-jsx@^7.2.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.1.tgz#1ed6a60f8f9cd944bec39d9923fbbc8d3d60dcb9"
-  integrity sha512-GbrbkTnHp9u6+HqbPRFJbObi369AgJNXi/sGqq5HRsoZW063xR1XDCaConqq+whfEIAlzB1YPnOgsPc7B7bc/A==
-
 markdownz@~9.1.3:
   version "9.1.7"
   resolved "https://registry.yarnpkg.com/markdownz/-/markdownz-9.1.7.tgz#99396279603d0f0ee0983dd110574f7f17af1861"