@comicrelief/component-library 8.45.0 → 8.47.0

package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -36,7 +36,6 @@ exports[`renders Column view correctly 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -52,6 +51,16 @@ exports[`renders Column view correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-weight: 700;
   background-color: #E52630;
   color: #FFFFFF;
 }
@@ -127,6 +136,20 @@ exports[`renders Column view correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c7 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c7 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c7 {
     width: auto;
@@ -294,7 +317,6 @@ exports[`renders correctly 1`] = `
   padding: 0.5rem 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: 700;
   font-size: 1rem;
   border-radius: 2rem;
   -webkit-transition: all 0.3s;
@@ -310,6 +332,16 @@ exports[`renders correctly 1`] = `
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-weight: 700;
   background-color: #E52630;
   color: #FFFFFF;
 }
@@ -385,6 +417,20 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+  .c7 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c7 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 @media (min-width:740px) {
   .c7 {
     width: auto;

package/src/components/Molecules/HeroBanner/HeroBanner.js

@@ -1,58 +1,154 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-
+import Picture from '../../Atoms/Picture/Picture';
 import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import variants from './_variants';
+import { CtaArrow } from '../../Atoms/Icons/index';
+import altCtaUnderline from './assets/alt_cta_underline.svg';
+import './local-preview-layout-fixes.css';
+
+import {
+  Container, CopyOuterWrapper, Copy, MediaWrapper,
+  CopyInnerWrapper, OuterWrapper, CTAWrapper, HeroBannerLink,
+  CtaIconWrapper, CtaText, CtaTextUnderline
+} from './HeroBanner.style';
+
+const HeroBanner = ({
+  // All variants:
+  copyColour = 'black',
+  pageBackgroundColour = 'grey_light',
+  variant = variants.FULL_HEIGHT,
+  copyLeft = true,
+  imageAltText = '',
+  ctaNewTab = false,
+  paddingTop = '0rem',
+  paddingBottom = '2rem',
+  // Text Banner variant
+  textBannerCopyBackgroundColour = 'deep_violet',
+  textBannerCtaColour = 'white',
+  // 'Media' variants (fallbacks to be provided in the CRcom integration, just in case):
+  imageSet = null,
+  imageLow = null,
+  image = null,
+  // All variants:
+  children = null,
+  ctaUrl = null,
+  ctaText = null
+}) => {
+  const hasImage = Boolean(imageSet && variant !== variants.TEXT_BANNER);
+  const hasCTA = Boolean(ctaUrl) && Boolean(ctaText);
+
+  const copySection = (
+    <Copy
+      variant={variant}
+      copyColour={copyColour}
+      textBannerCopyBackgroundColour={textBannerCopyBackgroundColour}
+    >
+      {children}
+
+      {(hasCTA) && (
+        <CTAWrapper variant={variant}>
+          {(variant !== variants.TEXT_BANNER) ? (
+            <>
+              <CtaText className="cta">
+                {ctaText}
+                <CtaTextUnderline
+                  src={altCtaUnderline}
+                  alt={ctaText}
+                  className="cta-text-underline"
+                />
+              </CtaText>
+
+              <CtaIconWrapper>
+                <CtaArrow />
+              </CtaIconWrapper>
+            </>
 
-const Container = styled.section`
-  min-height: 200px;
-  position: relative;
-  background: ${props => (props.background ? props.background : 'transparent')};
-  color: ${props => props.theme.color('red')};
-`;
-
-const Image = styled.img.attrs(() => ({
-  alt: ''
-}))`
-  object-fit: cover;
-  width: 100%;
-  display: block;
-  height: 100%;
-  opacity: 0.5;
-`;
-
-const Title = styled.h1`
-  position: absolute;
-  margin: 0 auto;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 0;
-  right: 0;
-  text-align: center;
-`;
-
-/**
- * Hero Banner to be used as Header of landing pages.
- */
-
-const HeroBanner = ({ url, title, background }) => (
-  <Container background={background}>
-    <Image src={url} />
-    <Title>
-      <Text size="xxl" color="white">
-        {title}
-      </Text>
-    </Title>
-  </Container>
-);
+          ) : (
+            <Text>
+              <Link
+                href={ctaUrl}
+                type="button"
+                color={textBannerCtaColour}
+                target={ctaNewTab ? 'blank' : 'self'}
+              >
+                {ctaText}
+              </Link>
+            </Text>
+          )
+        }
+        </CTAWrapper>
+      )}
+    </Copy>
+  );
+
+  return (
+    <Container
+      pageBackgroundColour={pageBackgroundColour}
+      paddingTop={paddingTop}
+      paddingBottom={paddingBottom}
+    >
+
+      <OuterWrapper
+        variant={variant}
+        textBannerCopyBackgroundColour={textBannerCopyBackgroundColour}
+      >
+
+        {(hasImage) && (
+          <MediaWrapper imageRight={copyLeft} variant={variant}>
+            <Picture
+              alt={imageAltText}
+              imageLow={imageLow}
+              images={imageSet}
+              image={image}
+              objectFit="cover"
+              width="100%"
+              height="100%"
+            />
+          </MediaWrapper>
+        )}
+
+        <CopyOuterWrapper copyLeft={copyLeft} variant={variant}>
+          <CopyInnerWrapper copyLeft={copyLeft} variant={variant}>
+            {/* Wraps the 'cards' in a link for non-Text Banners (which use CTA buttons) */}
+            {hasCTA && variant !== variants.TEXT_BANNER ? (
+              <HeroBannerLink href={ctaUrl} target={ctaNewTab ? '_blank' : '_self'}>
+                { copySection }
+              </HeroBannerLink>
+            ) : (
+              <>
+                { copySection }
+              </>
+            )}
+          </CopyInnerWrapper>
+        </CopyOuterWrapper>
+      </OuterWrapper>
+    </Container>
+  );
+};
 
 HeroBanner.propTypes = {
-  /** Image url */
-  url: PropTypes.string.isRequired,
-  /** Header Title */
-  title: PropTypes.string.isRequired,
-  /** Background Color */
-  background: PropTypes.string.isRequired
+  pageBackgroundColour: PropTypes.string,
+  textBannerCopyBackgroundColour: PropTypes.string,
+  textBannerCtaColour: PropTypes.string,
+  copyColour: PropTypes.string,
+  copyLeft: PropTypes.bool,
+  imageLow: PropTypes.string,
+  imageSet: PropTypes.string,
+  image: PropTypes.string,
+  imageAltText: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  ctaUrl: PropTypes.string,
+  ctaText: PropTypes.string,
+  ctaNewTab: PropTypes.bool,
+  paddingTop: PropTypes.string,
+  paddingBottom: PropTypes.string,
+  variant: PropTypes.oneOf([
+    variants.FULL_HEIGHT,
+    variants.HALF_HEIGHT,
+    variants.TEXT_BANNER
+  ])
 };
 
 export default HeroBanner;

package/src/components/Molecules/HeroBanner/HeroBanner.md

@@ -1,9 +1,179 @@
-Hero Banner Example:
+HeroBanner
 
 ```js
-<HeroBanner
-  url="https://images.ctfassets.net/as2n6w3kqeta/01qmTki8GM1SvgR0NFzIoz/3b7c1e8a86c3d16a7ef3e5f24b8c0aab/changeplease_image_2_2048x1029.jpg"
-  title="Change Please"
-  background="red"
-/>
+const defaultData = require('../../../styleguide/data/data').defaultData;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import variants from './_variants';
+
+<div style={{ display: 'flex', flexDirection: 'column', gap: '4rem' }}>
+
+  <HeroBanner
+    pageBackgroundColour="teal_light"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.FULL_HEIGHT}
+    copyLeft
+  >
+    <Text tag="h1">
+      Full Height: Copy Left
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="teal_light"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.FULL_HEIGHT}
+    copyLeft={false}
+    ctaText="Register to fundraise"
+    ctaUrl="http://www.comicrelief.com/register"
+    paddingTop="2rem"
+  >
+    <Text tag="h1">
+      Full Height:  Additional Top Padding, Copy Right w/CTA, Same Tab
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="teal_light"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.FULL_HEIGHT}
+    ctaText="Register to fundraise but longer"
+    ctaUrl="http://www.comicrelief.com/register"
+    ctaNewTab
+    copyLeft
+  >
+    <Text tag="h1">
+      Full Height: Copy Left w/CTA, New Tab
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="blue_dark"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    copyLeft={false}
+  >
+    <Text tag="h1">
+      Full Height: Copy Right (default variant prop value)
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="orange"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.HALF_HEIGHT}
+  >
+    <Text tag="h1">
+      Half Height: min height
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="teal"
+    imageSet={defaultData.heroBannerImage}
+    image={defaultData.heroBannerImage}
+    imageLow={defaultData.heroBannerImage}
+    imageAltText="Image alt text"
+    variant={variants.HALF_HEIGHT}
+    paddingBottom="0"
+    copyLeft={false}
+  >
+    <Text tag="h1">
+      Half Height: adapting to content,  no bottom paddding
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+    </Text>
+
+    <Text tag="p">
+      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="grey_light"
+    textBannerCopyBackgroundColour="deep_violet"
+    variant={variants.TEXT_BANNER}
+    copyColour="white"
+  >
+    <Text tag="h1">
+      Responsive Text Banner
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="grey_light"
+    textBannerCopyBackgroundColour="deep_violet"
+    variant={variants.TEXT_BANNER}
+    ctaUrl="http://www.comicrelief.com/register"
+    ctaText="Register"
+    copyColour="white"
+    paddingBottom="0"
+    ctaNewTab
+  >
+    <Text tag="h1">
+      Responsive Text Banner w/CTA, New Tab, no top and bottom padding
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    </Text>
+  </HeroBanner>
+
+  <HeroBanner
+    pageBackgroundColour="grey_light"
+    textBannerCopyBackgroundColour="blue_light"
+    variant={variants.TEXT_BANNER}
+    textBannerCtaColour="red"
+    ctaText="Register"
+    ctaUrl="http://www.comicrelief.com/register"
+  >
+    <Text tag="h1">
+      Responsive Text w/CTA, Same Tab
+    </Text>
+    <Text tag="p">
+      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+    </Text>
+
+    <Text tag="p">
+      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+    </Text>
+
+    <Text tag="p">
+      Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+    </Text>
+  </HeroBanner>
+
+</div>
 ```