13954180014

Committed 19 Mar 2025 06:36PM UTC coverage: 75.547% (-0.03%) from 75.579%

Build # 13954180014

Build Type

push

github

Committed by

web-flow

Commit Message

use container queries for various layouts of the field guide button (#6761)

Run Details

10979 of 16758 branches covered (65.51%)

Branch coverage included in aggregate %.

6 of 7 new or added lines in 3 files covered. (85.71%)

9 existing lines in 3 files now uncovered.

17110 of 20423 relevant lines covered (83.78%)

399.89 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

73.81

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

import { useState } from 'react';
import PropTypes from 'prop-types'
import { PropTypes as MobXPropTypes } from 'mobx-react'
import { ResponsiveContext } from 'grommet'

import { usePanoptesTranslations } from '@hooks'
import FieldGuideButton from './components/FieldGuideButton'
import FieldGuide from './components/FieldGuide'

function FieldGuideWrapper ({
  fieldGuide = null,
  locale,
  ...props
}) {
  const [showModal, setModalVisibility] = useState(false)
  const translation = usePanoptesTranslations({
    translated_type: 'field_guide',
    translated_id: fieldGuide?.id,
    language: locale
  })
  const strings = translation?.strings

  return (
    <>
      <FieldGuideButton fieldGuide={fieldGuide} onClick={() => setModalVisibility(true)} />
      {showModal &&
        <ResponsiveContext.Consumer>
          {size => (
            <FieldGuide
              fieldGuide={fieldGuide}
              onClose={() => setModalVisibility(false)}
              size={size}
              strings={strings}
              {...props}
            />
          )}
        </ResponsiveContext.Consumer>
      }
    </>
  )
}

FieldGuideWrapper.propTypes = {
  fieldGuide: PropTypes.object,
  icons: MobXPropTypes.observableMap,
  locale: PropTypes.string
}

export default FieldGuideWrapper

1	import { useState } from 'react';	1✔
2	import PropTypes from 'prop-types'	1✔
3	import { PropTypes as MobXPropTypes } from 'mobx-react'	1✔
4	import { ResponsiveContext } from 'grommet'	1✔
5
6	import { usePanoptesTranslations } from '@hooks'	1✔
7	import FieldGuideButton from './components/FieldGuideButton'	1✔
8	import FieldGuide from './components/FieldGuide'	2,821!
9
10	function FieldGuideWrapper ({
11	fieldGuide = null,	128✔
12	locale,	128✔
13	...props	128✔
14	}) {	128✔
15	const [showModal, setModalVisibility] = useState(false)	128✔
16	const translation = usePanoptesTranslations({	128✔
17	translated_type: 'field_guide',
18	translated_id: fieldGuide?.id,	258✔
19	language: locale
20	})
21	const strings = translation?.strings	128!
22
23	return (	128✔
24	<>
NEW 25	<FieldGuideButton fieldGuide={fieldGuide} onClick={() => setModalVisibility(true)} />	×
26	{showModal &&	128!
27	<ResponsiveContext.Consumer>
28	{size => (	×
29	<FieldGuide
30	fieldGuide={fieldGuide}
31	onClose={() => setModalVisibility(false)}	×
32	size={size}
33	strings={strings}
34	{...props}
35	/>
36	)}
37	</ResponsiveContext.Consumer>
38	}
39	</>
40	)
41	}
42
43	FieldGuideWrapper.propTypes = {	1✔
44	fieldGuide: PropTypes.object,
45	icons: MobXPropTypes.observableMap,
46	locale: PropTypes.string
47	}	1✔
48
49	export default FieldGuideWrapper

zooniverse / front-end-monorepo / 13954180014

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous