@comicrelief/component-library 8.46.0 → 8.47.0

package/dist/components/Atoms/Icons/CtaArrow.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const angle = {
+  right: '0',
+  left: '180deg',
+  down: '90deg',
+  up: '-90deg'
+};
+
+// The size the icon was rendered at, defining the path coordinates:
+const defaultSize = 32;
+const Icon = _styledComponents.default.svg.withConfig({
+  displayName: "CtaArrow__Icon",
+  componentId: "sc-4pwuvp-0"
+})(["transform:", ";rect{fill:", ";}path{fill:", ";stroke:", ";transform:scale(", ");}"], _ref => {
+  let {
+    direction
+  } = _ref;
+  return `rotate(${angle[direction]})`;
+}, _ref2 => {
+  let {
+    theme,
+    colour
+  } = _ref2;
+  return theme.color(colour);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.color('white');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.color('white');
+}, _ref5 => {
+  let {
+    width
+  } = _ref5;
+  return width / defaultSize;
+});
+const CtaArrow = _ref6 => {
+  let {
+    colour = 'red',
+    theme,
+    size = defaultSize,
+    direction = 'right',
+    ...rest
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(Icon, Object.assign({
+    width: size,
+    height: size,
+    viewBox: `0 0 ${size} ${size}`,
+    direction: direction,
+    colour: colour,
+    xmlns: "http://www.w3.org/2000/svg",
+    defaultSize: defaultSize
+  }, rest), /*#__PURE__*/_react.default.createElement("rect", {
+    width: size,
+    height: size,
+    rx: size / 2
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M22.8208 16.4626C22.8183 16.4653 22.8167 16.4686 22.814 16.4713L17.7229 21.8047C17.5987 21.9348 17.4359 22 17.273 22C17.1101 22 16.9473 21.9348 16.8229 21.8048C16.5744 21.5445 16.5744 21.1223 16.8229 20.862L20.8277 16.6666H9.63638C9.28494 16.6666 9 16.3681 9 16C9 15.6318 9.28494 15.3333 9.63638 15.3333H20.8277L16.8229 11.1381C16.5744 10.8778 16.5744 10.4556 16.8229 10.1953C17.0714 9.93492 17.4744 9.93492 17.7229 10.1953L22.814 15.5286C22.8165 15.5313 22.8183 15.5346 22.8208 15.5373C22.8474 15.566 22.8719 15.5968 22.8932 15.6301C22.9042 15.6475 22.912 15.6661 22.9212 15.6843C22.9315 15.7045 22.9432 15.7236 22.9516 15.745C22.9607 15.7678 22.9659 15.7915 22.9723 15.815C22.9774 15.8331 22.9841 15.8506 22.9877 15.8695C23.0041 15.9558 23.0041 16.0446 22.9877 16.1308C22.9841 16.1496 22.9774 16.167 22.9723 16.1853C22.9658 16.2088 22.9605 16.2325 22.9516 16.2553C22.9432 16.2766 22.9315 16.2958 22.9212 16.316C22.9118 16.3341 22.9042 16.3528 22.8932 16.3701C22.8719 16.4033 22.8474 16.434 22.8208 16.4626Z"
+  }));
+};
+var _default = exports.default = (0, _styledComponents.withTheme)(CtaArrow);

package/dist/components/Atoms/Icons/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "Chevron", {
     return _Chevron.default;
   }
 });
+Object.defineProperty(exports, "CtaArrow", {
+  enumerable: true,
+  get: function () {
+    return _CtaArrow.default;
+  }
+});
 Object.defineProperty(exports, "Download", {
   enumerable: true,
   get: function () {
@@ -52,4 +58,5 @@ var _Favourite = _interopRequireDefault(require("./Favourite"));
 var _Internal = _interopRequireDefault(require("./Internal"));
 var _Chevron = _interopRequireDefault(require("./Chevron"));
 var _Arrow = _interopRequireDefault(require("./Arrow"));
-var _AtSign = _interopRequireDefault(require("./AtSign"));
+var _AtSign = _interopRequireDefault(require("./AtSign"));
+var _CtaArrow = _interopRequireDefault(require("./CtaArrow"));

package/dist/components/Atoms/Link/Link.style.js

@@ -9,78 +9,84 @@ exports.default = exports.IconWrapper = exports.HelperText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", ";", ";@media ", "{width:", ";}@media ", "{", ";}"], _ref => {
+var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHelper"));
+const buttonStyle = () => (0, _styledComponents.css)(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;cursor:pointer;", " font-weight:700;", ";", ";@media ", "{width:", ";}@media ", "{", ";}"], _ref => {
   let {
     theme
   } = _ref;
   return theme.fontSize('s');
 }, _ref2 => {
   let {
-    color,
     theme
   } = _ref2;
-  return color ? theme.buttonColors(color) : theme.buttonColors('red');
+  return (0, _styledComponents.css)(["", ""], (0, _fontHelper.default)(theme, 'button'));
 }, _ref3 => {
   let {
-    mobileColour,
+    color,
     theme
   } = _ref3;
-  return mobileColour ? theme.buttonColors(mobileColour) : null;
+  return color ? theme.buttonColors(color) : theme.buttonColors('red');
 }, _ref4 => {
   let {
+    mobileColour,
     theme
   } = _ref4;
-  return theme.allBreakpoints('M');
+  return mobileColour ? theme.buttonColors(mobileColour) : null;
 }, _ref5 => {
   let {
-    fullWidth
+    theme
   } = _ref5;
-  return fullWidth ? '100%' : 'auto';
+  return theme.allBreakpoints('M');
 }, _ref6 => {
   let {
-    theme
+    fullWidth
   } = _ref6;
-  return theme.allBreakpoints('L');
+  return fullWidth ? '100%' : 'auto';
 }, _ref7 => {
   let {
-    color,
     theme
   } = _ref7;
+  return theme.allBreakpoints('L');
+}, _ref8 => {
+  let {
+    color,
+    theme
+  } = _ref8;
   return color ? theme.buttonColors(color) : theme.buttonColors('red');
 });
-const linkStyle = () => (0, _styledComponents.css)(["position:relative;display:inline;", ";"], _ref8 => {
+const linkStyle = () => (0, _styledComponents.css)(["position:relative;display:inline;", ";"], _ref9 => {
   let {
     type,
     theme
-  } = _ref8;
+  } = _ref9;
   return type ? theme.linkStyles(type) : theme.linkStyles('standard');
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.span.withConfig({
   displayName: "Linkstyle__IconWrapper",
   componentId: "sc-t360tr-0"
-})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref9 => {
+})(["display:inline-flex;margin-left:", ";align-self:center;right:", ";", ";@media ", "{width:auto;right:auto;position:relative;", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), _ref10 => {
   let {
     type
-  } = _ref9;
+  } = _ref10;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
-}, _ref10 => {
+}, _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.allBreakpoints('M');
-}, _ref11 => {
+}, _ref12 => {
   let {
     type
-  } = _ref11;
+  } = _ref12;
   return type === 'standard' && (0, _styledComponents.css)(["position:absolute;right:-2rem;top:0;bottom:0;"]);
 });
 const StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "sc-t360tr-1"
-})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref12 => {
+})(["", " ", ";"], props => props.type === 'button' ? buttonStyle : linkStyle, _ref13 => {
   let {
     iconFirst
-  } = _ref12;
+  } = _ref13;
   return iconFirst && (0, _styledComponents.css)(["flex-direction:row-reverse;span[type=\"button\"]{margin-left:0;margin-right:1rem;}"]);
 });
 const HelperText = exports.HelperText = _styledComponents.default.span.withConfig({

package/dist/components/Atoms/Link/Link.test.js

@@ -195,7 +195,6 @@ it('renders link styled as button correctly', () => {
       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;
@@ -211,6 +210,16 @@ it('renders link styled as button correctly', () => {
       -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: #FFE400;
       color: #000000;
     }
@@ -220,6 +229,20 @@ it('renders link styled as button correctly', () => {
       color: #000000;
     }
 
+    @media (min-width:740px) {
+      .c0 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     @media (min-width:740px) {
       .c0 {
         width: auto;

package/dist/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/dist/components/Molecules/HeroBanner/HeroBanner.js

@@ -6,40 +6,84 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-const Container = _styledComponents.default.section.withConfig({
-  displayName: "HeroBanner__Container",
-  componentId: "sc-c6z1hi-0"
-})(["min-height:200px;position:relative;background:", ";color:", ";"], props => props.background ? props.background : 'transparent', props => props.theme.color('red'));
-const Image = _styledComponents.default.img.attrs(() => ({
-  alt: ''
-})).withConfig({
-  displayName: "HeroBanner__Image",
-  componentId: "sc-c6z1hi-1"
-})(["object-fit:cover;width:100%;display:block;height:100%;opacity:0.5;"]);
-const Title = _styledComponents.default.h1.withConfig({
-  displayName: "HeroBanner__Title",
-  componentId: "sc-c6z1hi-2"
-})(["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.
- */
-
+var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
+var _variants = _interopRequireDefault(require("./_variants"));
+var _index = require("../../Atoms/Icons/index");
+var _alt_cta_underline = _interopRequireDefault(require("./assets/alt_cta_underline.svg"));
+require("./local-preview-layout-fixes.css");
+var _HeroBanner = require("./HeroBanner.style");
 const HeroBanner = _ref => {
   let {
-    url,
-    title,
-    background
+    // All variants:
+    copyColour = 'black',
+    pageBackgroundColour = 'grey_light',
+    variant = _variants.default.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
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(Container, {
-    background: background
-  }, /*#__PURE__*/_react.default.createElement(Image, {
-    src: url
-  }), /*#__PURE__*/_react.default.createElement(Title, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    size: "xxl",
-    color: "white"
-  }, title)));
+  const hasImage = Boolean(imageSet && variant !== _variants.default.TEXT_BANNER);
+  const hasCTA = Boolean(ctaUrl) && Boolean(ctaText);
+  const copySection = /*#__PURE__*/_react.default.createElement(_HeroBanner.Copy, {
+    variant: variant,
+    copyColour: copyColour,
+    textBannerCopyBackgroundColour: textBannerCopyBackgroundColour
+  }, children, hasCTA && /*#__PURE__*/_react.default.createElement(_HeroBanner.CTAWrapper, {
+    variant: variant
+  }, variant !== _variants.default.TEXT_BANNER ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeroBanner.CtaText, {
+    className: "cta"
+  }, ctaText, /*#__PURE__*/_react.default.createElement(_HeroBanner.CtaTextUnderline, {
+    src: _alt_cta_underline.default,
+    alt: ctaText,
+    className: "cta-text-underline"
+  })), /*#__PURE__*/_react.default.createElement(_HeroBanner.CtaIconWrapper, null, /*#__PURE__*/_react.default.createElement(_index.CtaArrow, null))) : /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    href: ctaUrl,
+    type: "button",
+    color: textBannerCtaColour,
+    target: ctaNewTab ? 'blank' : 'self'
+  }, ctaText))));
+  return /*#__PURE__*/_react.default.createElement(_HeroBanner.Container, {
+    pageBackgroundColour: pageBackgroundColour,
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom
+  }, /*#__PURE__*/_react.default.createElement(_HeroBanner.OuterWrapper, {
+    variant: variant,
+    textBannerCopyBackgroundColour: textBannerCopyBackgroundColour
+  }, hasImage && /*#__PURE__*/_react.default.createElement(_HeroBanner.MediaWrapper, {
+    imageRight: copyLeft,
+    variant: variant
+  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    alt: imageAltText,
+    imageLow: imageLow,
+    images: imageSet,
+    image: image,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%"
+  })), /*#__PURE__*/_react.default.createElement(_HeroBanner.CopyOuterWrapper, {
+    copyLeft: copyLeft,
+    variant: variant
+  }, /*#__PURE__*/_react.default.createElement(_HeroBanner.CopyInnerWrapper, {
+    copyLeft: copyLeft,
+    variant: variant
+  }, hasCTA && variant !== _variants.default.TEXT_BANNER ? /*#__PURE__*/_react.default.createElement(_HeroBanner.HeroBannerLink, {
+    href: ctaUrl,
+    target: ctaNewTab ? '_blank' : '_self'
+  }, copySection) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, copySection)))));
 };
 var _default = exports.default = HeroBanner;

package/dist/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>
 ```