Hero

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/components/PageHeaders/Hero"

// @flow
import {spacing} from '../../../../utils/classnames';
import Picture from '../../Picture/Picture';
import Control from '../../Buttons/Control/Control';
import WobblyEdge from '../../WobblyEdge/WobblyEdge';
import Grid from '../../layout/Grid';
import Container from '../../layout/Container';
import type {Picture as PictureProps} from '../../../../model/picture';

type Props = {|
  images: PictureProps[],
  whiteBox: React.Node
|}

const Hero = ({ images, whiteBox }: Props) => (
  <div className='exhibition-hero'>
    <Picture
      images={images}
      extraClasses='exhibition-hero__picture'
      isFull={true} />

    <div className={`
      exhibition-hero__copy
      ${spacing({l: 10}, {margin: ['bottom']})}
    `}>
      <div className='is-hidden-l is-hidden-xl'>
        <WobblyEdge background='white' />
      </div>
      <div className={`relative ${spacing({s: 3}, { margin: ['bottom'] })}`} style={{ zIndex: 20 }}>
        <Control
          type='dark'
          extraClasses='scroll-to-info js-scroll-to-info js-work-media-control flush-container-right'
          url='#exhibition-content'
          eventTracking={`${JSON.stringify({
            category: 'component',
            action: 'scroll-to-info:click',
            label: 'scrolled-to-id:exhibition-content'
          })}`}
          icon='chevron'
          text='Scroll to info' />
      </div>
      <Container>
        <Grid sizes={{s: 12, m: 10, shiftM: 1, l: 12, xl: 12}}>
          <div className={`
            bg-white
            inline-block
            exhibition-hero__box
            rounded-diagonal
            ${spacing({s: 4}, {padding: ['top', 'bottom']})}
            ${spacing({l: 4}, {padding: ['right', 'left']})}
          `}>
            {whiteBox}
          </div>
        </Grid>
      </Container>
    </div>
  </div>
);

export default Hero;
{
  "images": [
    {
      "type": "picture",
      "contentUrl": "https://wellcomecollection.cdn.prismic.io/wellcomecollection/221ef6317dc2b0566ecd84870fae23763d9a60e4_c0074807-edit.jpg",
      "width": 3200,
      "height": 1500,
      "alt": "Photograph of the Medicine Man exhibition at Wellcome Collection showing a wall of oil paintings with two visitors standing in front.",
      "title": "Medicine Man exhibition",
      "author": "Benjamin Gilbert",
      "source": {
        "name": "Wellcome Collection",
        "link": null
      },
      "license": "CC-BY",
      "copyright": {
        "holder": null,
        "link": null
      },
      "minWidth": "600px"
    },
    {
      "type": "picture",
      "contentUrl": "https://wellcomecollection.cdn.prismic.io/wellcomecollection/0d34260cedf78b0df30e48fd9eeb4aa88426cb4c_c0074807-edit.jpg",
      "width": 3200,
      "height": 3200,
      "alt": "Photograph of the Medicine Man exhibition at Wellcome Collection showing a wall of oil paintings with two visitors standing in front.",
      "title": "Medicine Man exhibition",
      "author": "Benjamin Gilbert",
      "source": {
        "name": "Wellcome Collection",
        "link": null
      },
      "license": "CC-BY",
      "copyright": {
        "holder": null,
        "link": null
      },
      "minWidth": "0"
    }
  ],
  "whiteBox": {
    "type": "div",
    "key": null,
    "ref": null,
    "props": {
      "children": {
        "type": "h1",
        "key": null,
        "ref": null,
        "props": {
          "children": "Some content for the white box"
        },
        "_owner": null,
        "_store": {}
      }
    },
    "_owner": null,
    "_store": {}
  }
}

There are no notes for this item.