Merge branch 'master' into sticky-subject-viewer

zooniverse · May 29, 2024 · 328f69c · 328f69c
2 parents cd1e9fc + de180dc
commit 328f69c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 20 deletions.
diff --git a/.../FieldGuide/components/FieldGuide/components/FieldGuideItemAnchor/FieldGuideItemAnchor.js b/.../FieldGuide/components/FieldGuide/components/FieldGuideItemAnchor/FieldGuideItemAnchor.js
@@ -1,9 +1,8 @@
-import { Anchor, Box, Paragraph } from 'grommet'
+import { Anchor, Box, Text } from 'grommet'
 import { observable } from 'mobx'
-import PropTypes from 'prop-types'
+import { object, string} from 'prop-types'
 import { PropTypes as MobXPropTypes } from 'mobx-react'
 import { useCallback } from 'react'
-import { withTheme } from 'styled-components'
 import FieldGuideItemIcon from '../FieldGuideItemIcon'
 
 const defaultIcons = observable.map()
@@ -23,20 +22,17 @@ export function AnchorLabel({
         icon={icon}
         width={100}
       />
-      <Paragraph>{title}</Paragraph>
+      <Text margin={{ vertical: '15px' }}>{title}</Text>
     </Box>
   )
 }
 
-const defaultTheme = { dark: false }
-
 function FieldGuideItemAnchor({
   className = '',
   icons = defaultIcons,
   item,
   itemIndex,
   onClick,
-  theme = defaultTheme,
   title
 }) {
   const selectItem = useCallback(function (event) {
@@ -45,11 +41,10 @@ function FieldGuideItemAnchor({
   }, [itemIndex, onClick])
 
   const label = <AnchorLabel icons={icons} item={item} title={title} />
-  const anchorColor = theme.dark ? 'light-3' : 'dark-5'
   return (
     <Anchor
       className={className}
-      color={anchorColor}
+      color={{ light: 'dark-5', dark: 'light-3' }}
       href={`#field-guide-item-${itemIndex}`}
       label={label}
       onClick={selectItem}
@@ -58,14 +53,10 @@ function FieldGuideItemAnchor({
 }
 
 FieldGuideItemAnchor.propTypes = {
-  className: PropTypes.string,
+  className: string,
   icons: MobXPropTypes.observableMap,
-  item: PropTypes.object.isRequired,
-  label: PropTypes.string,
-  theme: PropTypes.shape({
-    dark: PropTypes.bool
-  })
+  item: object.isRequired,
+  label: string,
 }
 
-export default withTheme(FieldGuideItemAnchor)
-export { FieldGuideItemAnchor }
+export default FieldGuideItemAnchor
diff --git a/...dGuide/components/FieldGuide/components/FieldGuideItemAnchor/FieldGuideItemAnchor.spec.js b/...dGuide/components/FieldGuide/components/FieldGuideItemAnchor/FieldGuideItemAnchor.spec.js
@@ -1,8 +1,8 @@
 import { mount, shallow } from 'enzyme'
 import sinon from 'sinon'
 import { observable, toJS } from 'mobx'
-import { Anchor, Grommet, Paragraph } from 'grommet'
-import { FieldGuideItemAnchor, AnchorLabel } from './FieldGuideItemAnchor'
+import { Anchor, Grommet, Text } from 'grommet'
+import FieldGuideItemAnchor, { AnchorLabel } from './FieldGuideItemAnchor'
 import FieldGuideItemIcon from '../FieldGuideItemIcon'
 import { FieldGuideMediumFactory } from '@test/factories'
 import zooTheme from '@zooniverse/grommet-theme'
@@ -83,7 +83,7 @@ describe('Component > FieldGuideItemAnchor', function () {
           item={item}
           title='Cat'
         />)
-      expect(wrapper.find(Paragraph).contains(item.title)).to.be.true()
+      expect(wrapper.find(Text).contains(item.title)).to.be.true()
     })
 
     it('should render an FieldGuideItemIcon component', function () {