@comicrelief/component-library 8.45.0 → 8.47.0

package/dist/components/Molecules/HeroBanner/HeroBanner.style.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OuterWrapper = exports.MediaWrapper = exports.HeroBannerLink = exports.CtaTextUnderline = exports.CtaText = exports.CtaIconWrapper = exports.CopyOuterWrapper = exports.CopyInnerWrapper = exports.Copy = exports.Container = exports.CTAWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+var _variants = _interopRequireDefault(require("./_variants"));
+var _animations = require("../../../theme/shared/animations");
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+// Lil helper function to streamline things somewhat:
+const handleVariant = variant => {
+  switch (variant) {
+    case _variants.default.FULL_HEIGHT:
+      return `
+        height: 75vh;
+        min-height: 600px;
+        max-height: 750px;`;
+    case _variants.default.HALF_HEIGHT:
+      return `
+        height: auto;
+        min-height: 450px;`;
+    // No tweaks needed for the remaining 'text_banner' variant:
+    default:
+      return null;
+  }
+};
+const Container = exports.Container = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__Container",
+  componentId: "sc-2ch4eo-0"
+})(["width:100%;height:auto;display:flex;position:relative;flex-direction:column;background:", ";justify-content:center;@media ", "{", " align-items:center;}"], _ref => {
+  let {
+    theme,
+    pageBackgroundColour
+  } = _ref;
+  return theme.color(pageBackgroundColour);
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('L');
+}, _ref3 => {
+  let {
+    paddingTop,
+    paddingBottom
+  } = _ref3;
+  return (0, _styledComponents.css)(["padding:", " 2rem ", ";"], paddingTop, paddingBottom);
+});
+const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__OuterWrapper",
+  componentId: "sc-2ch4eo-1"
+})(["width:100%;max-width:none;position:relative;display:flex;flex-direction:column;align-items:center;@media ", "{width:100%;max-width:1500px;border-radius:1rem;overflow:hidden;", ""], _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('L');
+}, _ref5 => {
+  let {
+    variant
+  } = _ref5;
+  return variant && (0, _styledComponents.css)(["", ""], handleVariant(variant));
+});
+const MediaWrapper = exports.MediaWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__MediaWrapper",
+  componentId: "sc-2ch4eo-2"
+})(["width:100%;height:100%;@media ", "{position:absolute;top:0;left:0;img{object-position:top center;height:100%;transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");", ";}&:has(+ div a:hover){> div > img{transform:scale(1.04);}}}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoints2026('L');
+}, 0.4, -1.15, 2.35, _ref7 => {
+  let {
+    variant
+  } = _ref7;
+  return variant === _variants.default.HALF_HEIGHT && 'min-height: 450px;';
+});
+const CopyOuterWrapper = exports.CopyOuterWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__CopyOuterWrapper",
+  componentId: "sc-2ch4eo-3"
+})(["position:relative;height:100%;left:0;right:0;display:flex;width:calc(100% - (2 * 1rem));", " @media ", "{width:calc(100% - 4rem);}@media ", "{position:relative;top:auto;left:auto;height:100%;width:100%;", " display:flex;align-items:center;margin:0 auto;justify-content:", ";", "}"], _ref8 => {
+  let {
+    variant
+  } = _ref8;
+  return variant !== _variants.default.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 2rem 1rem;';
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoints2026('M');
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.breakpoints2026('L');
+}, _ref11 => {
+  let {
+    variant
+  } = _ref11;
+  return variant !== _variants.default.TEXT_BANNER && 'max-width: 1200px;';
+}, _ref12 => {
+  let {
+    variant,
+    copyLeft
+  } = _ref12;
+  if (variant === _variants.default.TEXT_BANNER) return 'center';
+  return copyLeft ? 'flex-start' : 'flex-end';
+}, _ref13 => {
+  let {
+    variant
+  } = _ref13;
+  return variant && (0, _styledComponents.css)(["", ""], handleVariant(variant));
+});
+const Copy = exports.Copy = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__Copy",
+  componentId: "sc-2ch4eo-4"
+})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref14 => {
+  let {
+    variant
+  } = _ref14;
+  return variant === _variants.default.TEXT_BANNER ? '3rem 1.5rem' : '1.5rem';
+}, _ref15 => {
+  let {
+    theme,
+    copyColour
+  } = _ref15;
+  return theme.color(copyColour);
+}, _ref16 => {
+  let {
+    theme,
+    variant,
+    textBannerCopyBackgroundColour
+  } = _ref16;
+  return variant === _variants.default.TEXT_BANNER ? theme.color(textBannerCopyBackgroundColour) : theme.color('white');
+}, _ref17 => {
+  let {
+    variant,
+    theme
+  } = _ref17;
+  return variant !== _variants.default.TEXT_BANNER && `
+    @media ${theme.breakpoints2026('L')} {
+      padding: 2rem 2rem 1.75rem;
+    }
+  `;
+}, _ref18 => {
+  let {
+    variant,
+    theme
+  } = _ref18;
+  return variant === _variants.default.TEXT_BANNER && `
+    text-align: center;
+    @media ${theme.breakpoints2026('M')} {
+      padding: 4rem 11%;
+    }
+  `;
+}, _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.breakpoints2026('L');
+}, _ref20 => {
+  let {
+    variant
+  } = _ref20;
+  return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
+});
+const CopyInnerWrapper = exports.CopyInnerWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__CopyInnerWrapper",
+  componentId: "sc-2ch4eo-5"
+})(["width:100%;height:100%;display:flex;align-items:center;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.breakpoints2026('L');
+}, _ref22 => {
+  let {
+    variant
+  } = _ref22;
+  return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["width:100%;"]) : (0, _styledComponents.css)(["width:50%;"]);
+}, _ref23 => {
+  let {
+    variant
+  } = _ref23;
+  return variant === _variants.default.TEXT_BANNER ? (0, _styledComponents.css)(["margin:0;"]) : (0, _styledComponents.css)(["margin:2rem 0;"]);
+}, _ref24 => {
+  let {
+    copyLeft
+  } = _ref24;
+  return copyLeft ? (0, _styledComponents.css)([" flex-end;"]) : (0, _styledComponents.css)([" flex-start;"]);
+});
+const CTAWrapper = exports.CTAWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__CTAWrapper",
+  componentId: "sc-2ch4eo-6"
+})(["width:100%;height:auto;position:relative;padding:0.5rem 0;margin-top:1.25rem;", ""], _ref25 => {
+  let {
+    variant
+  } = _ref25;
+  return variant !== _variants.default.TEXT_BANNER && (0, _styledComponents.css)(["span{font-weight:bold;color:", ";}"], _ref26 => {
+    let {
+      theme
+    } = _ref26;
+    return theme.color('red');
+  });
+});
+const CtaIconWrapper = exports.CtaIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "HeroBannerstyle__CtaIconWrapper",
+  componentId: "sc-2ch4eo-7"
+})(["height:2rem;position:absolute;top:50%;right:0;transform:translateY(-50%);content:\"\";"]);
+const CtaText = exports.CtaText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "HeroBannerstyle__CtaText",
+  componentId: "sc-2ch4eo-8"
+})(["position:relative;"]);
+const CtaTextUnderline = exports.CtaTextUnderline = _styledComponents.default.img.withConfig({
+  displayName: "HeroBannerstyle__CtaTextUnderline",
+  componentId: "sc-2ch4eo-9"
+})(["height:4px;width:100%;position:absolute;left:0;bottom:-5px;transition:opacity 0.15s 0.1s;opacity:0;"]);
+const HeroBannerLink = exports.HeroBannerLink = _styledComponents.default.a.withConfig({
+  displayName: "HeroBannerstyle__HeroBannerLink",
+  componentId: "sc-2ch4eo-10"
+})(["text-decoration:none;@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.breakpoints2026('L');
+}, (0, _animations.bounceUpAnimation)(true, 10, 2), _ref28 => {
+  let {
+    variant
+  } = _ref28;
+  return variant !== _variants.default.TEXT_BANNER ? '92%' : '100%';
+});

package/dist/components/Molecules/HeroBanner/HeroBanner.test.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
+var _HeroBanner = _interopRequireDefault(require("./HeroBanner"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
+var _variants = _interopRequireDefault(require("./_variants"));
+const defaultData = require('../../../styleguide/data/data').defaultData;
+it('renders "Full Height Media" Hero Banner correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_HeroBanner.default, {
+    pageBackgroundColour: "teal_light",
+    imageSet: defaultData.heroBannerImage,
+    image: defaultData.heroBannerImage,
+    imageLow: defaultData.heroBannerImage,
+    imageAltText: "Image alt text",
+    variant: _variants.default.FULL_HEIGHT,
+    ctaText: "Test CTA Label",
+    ctaLink: "http://www.google.com",
+    copyLeft: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "h1",
+    color: "black"
+  }, "Curabitur pretium tincidunt lacus"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p",
+    color: "black"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders "Half Height Media" Hero Banner correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_HeroBanner.default, {
+    pageBackgroundColour: "teal_light",
+    imageSet: defaultData.heroBannerImage,
+    image: defaultData.heroBannerImage,
+    imageLow: defaultData.heroBannerImage,
+    imageAltText: "Image alt text",
+    variant: _variants.default.HALF_HEIGHT,
+    ctaText: "Test CTA Label",
+    ctaLink: "http://www.google.com",
+    copyLeft: false
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "h1",
+    color: "black"
+  }, "Curabitur pretium tincidunt lacus"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p",
+    color: "black"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+it('renders "Text Banner" Hero Banner correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_HeroBanner.default, {
+    pageBackgroundColour: "teal_light",
+    variant: _variants.default.TEXT_BANNER,
+    ctaText: "Test CTA Label",
+    ctaLink: "http://www.google.com",
+    copyLeft: false
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "h1",
+    color: "black"
+  }, "Curabitur pretium tincidunt lacus"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p",
+    color: "black"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))).toJSON();
+  expect(tree).toMatchSnapshot();
+});