@telia/styleguide/es/molecules/HeaderWithImage/HeaderWithImage.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../../atoms/Heading/Heading';
/**
 * Status: *finished*.
 */

const HeaderWithImage = ({
  imgSrcMobile,
  imgSrcDesktop,
  blackText,
  whiteText,
  withGradient,
  pageTitle,
  children
}) => React.createElement("header", {
  className: classNames('header header--plain header-with-image', {
    'header--black-text': blackText,
    'header--white-text': whiteText,
    'header-with-image--with-gradient': withGradient
  })
}, React.createElement("picture", {
  className: "hero__picture"
}, React.createElement("source", {
  media: "(max-width: 47.99em)",
  srcSet: imgSrcMobile
}), React.createElement("source", {
  media: "(min-width: 48em)",
  srcSet: imgSrcDesktop
}), React.createElement("img", {
  className: "hero__image",
  src: imgSrcDesktop,
  alt: "Woman taking photo with her mobile phone by a lake"
})), React.createElement("div", {
  className: "header__container container container--medium container--no-padding container--no-margin"
}, React.createElement(Heading, {
  level: 1,
  text: pageTitle
}), React.createElement("section", {
  className: "header__preamble"
}, children)));

HeaderWithImage.propTypes = process.env.NODE_ENV !== "production" ? {
  imgSrcMobile: PropTypes.string,
  imgSrcDesktop: PropTypes.string,
  blackText: PropTypes.bool,
  whiteText: PropTypes.bool,
  withGradient: PropTypes.bool,
  pageTitle: PropTypes.string.isRequired,
  children: PropTypes.node
} : {};
export default HeaderWithImage;