Restructure components. Scaffold tests

packages/lib-classifier/src/components/Classifier/components/FieldGuide/FieldGuideContainer.spec.js

@@ -1,14 +1,7 @@
 import { shallow, mount } from 'enzyme'
 import React from 'react'
-import FieldGuideButton from './FieldGuideButton'
+import FieldGuideContainer from './FieldGuideContainer'
 
-describe('Component > FieldGuideButton', function () {
-  it('should render without crashing', function () {
-    shallow(<FieldGuideButton />)
-  })
+describe('Component > FieldGuideContainer', function () {
 
-  it('should have an ARIA label', function () {
-    const wrapper = mount(<FieldGuideButton />)
-    expect(wrapper.find('button').prop('aria-label')).to.equal('Open Field Guide')
-  })
 })

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.js

@@ -3,8 +3,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { inject, observer } from 'mobx-react'
-import FieldGuideItems from './FieldGuideItems'
-import FieldGuideItem from './FieldGuideItem'
+import FieldGuideItems from './components/FieldGuideItems'
+import FieldGuideItem from './components/FieldGuideItem'
 
 const StyledBox = styled(Box)`
   max-height: 415px;

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuideItem.js → packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js

@@ -1,18 +1,16 @@
-import zooTheme from '@zooniverse/grommet-theme'
-import { Button, Box, Heading, Text } from 'grommet'
+import { Button, Box } from 'grommet'
 import { FormPrevious } from 'grommet-icons'
 import styled from 'styled-components'
 import React from 'react'
-import { observable } from 'mobx'
 import { Markdownz, Media } from '@zooniverse/react-components'
 import PropTypes from 'prop-types'
 import { inject, observer, PropTypes as MobXPropTypes } from 'mobx-react'
 import counterpart from 'counterpart'
 import en from './locales/en'
 
+counterpart.registerTranslations('en', en)
+
 const FieldGuideItemHeader = styled(Box)`
-  /* display: flex;
-  flex-direction: row; */
   > h3 {
     margin: 0;
   }
@@ -36,7 +34,7 @@ class FieldGuideItem extends React.Component {
       <Box>
         <FieldGuideItemHeader align='center' direction='row'>
           <Button
-            a11yTitle="Go back to Field Guide items list"
+            a11yTitle={counterpart("FieldGuideItem.ariaTitle")}
             icon={<FormPrevious />}
             onClick={() => setActiveItem()}
             plain

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/index.js

@@ -0,0 +1 @@
+export { default } from './FieldGuideItem'

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuideItemButton.js → packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemButton.js

@@ -67,7 +67,7 @@ class FieldGuideItemButton extends React.Component {
         const label = <ButtonLabel icons={icons} item={item} />
         return (
           <StyledButton
-            a11yTitle={counterpart('FieldGuideItem.ariaTitle', { title: item.title })}
+            a11yTitle={counterpart('FieldGuideItemButton.ariaTitle', { title: item.title })}
             className={className}
             key={item.title} // Is this secure?
             label={label}

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/index.js

@@ -0,0 +1 @@
+export { default } from './FieldGuideItems'

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/locales/en.json → packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/locales/en.json

@@ -1,5 +1,5 @@
 {
-  "FieldGuideItem": {
+  "FieldGuideItemButton": {
     "ariaTitle": "Select %(title)s"
   }
 }