src ImageCaption.js

100% Statements 4/4

50% Branches 1/2

100% Functions 1/1

100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27  
 
 
 
 
 
 
1x
2x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
  import cx from 'classnames'
import PropTypes from 'prop-types'
 
import AtomImage from '@s-ui/react-atom-image'
 
import {CAPTION_CLASS, CONTAINER_IMAGE, THUMBNAIL_RATIOS} from './settings.js'
 
const ImageCaption = ({captionText, ratio, ...props}) => (
  <div>
    <div className={cx(`${CONTAINER_IMAGE}`, {[`${CONTAINER_IMAGE}--${ratio}`]: ratio})}>
      <AtomImage {...props} />
    </div>
    {captionText && <figcaption className={CAPTION_CLASS}>{captionText}</figcaption>}
  </div>
)
 
ImageCaption.propTypes = {
  /** Text shown at the bottom of the component */
  captionText: PropTypes.string,
  /** Define the ratio ('1:1', '4:3', '16:9') */
  ratio: PropTypes.oneOf(Object.values(THUMBNAIL_RATIOS))
}
 
ImageCaption.displayName = 'ImageCaption'
 
export default ImageCaption