@comicrelief/component-library 8.2.1 → 8.3.0

package/dist/components/Organisms/RichtextCarousel/RichtextCarousel.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _pureReactCarousel = require("pure-react-carousel");
+require("pure-react-carousel/dist/react-carousel.es.css");
+var _RichtextCarousel = require("./RichtextCarousel.style");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
+const RichtextCarousel = _ref => {
+  let {
+    data: {
+      contentful_id: thisID,
+      autoPlay,
+      nodes,
+      headingCopy,
+      // Set some defaults for good measure:
+      mobileHeight = 300,
+      tabletHeight = 350,
+      desktopHeight = 350,
+      carouselBackgroundColour = 'white',
+      nodeBackgroundColour = 'white',
+      nodeOutlineColour = 'grey'
+    }
+  } = _ref;
+  // Defaults to mobile config:
+  const [isMobile, setIsMobile] = (0, _react.useState)(true);
+  const [visibleSlides, setVisibleSlides] = (0, _react.useState)(1);
+  const [totalSlides, setTotalSlides] = (0, _react.useState)(null);
+  const [theseItems, setTheseItems] = (0, _react.useState)();
+
+  // Custom function to let us update the carousel config dynamically
+  const screenResize = (0, _react.useCallback)(() => {
+    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
+    const isCurrentlyMobile = window.innerWidth < _allBreakpoints.breakpointValues.M;
+    if (screenSize !== null && isMobile !== isCurrentlyMobile) {
+      setIsMobile(isCurrentlyMobile);
+      setVisibleSlides(isCurrentlyMobile ? 1 : 3);
+      setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
+    }
+  }, [isMobile, theseItems]);
+
+  // Cache our data source, using as a flag for render logic:
+  (0, _react.useEffect)(() => {
+    setTheseItems(nodes);
+  }, [setTheseItems, nodes]);
+  (0, _react.useEffect)(() => {
+    if (window !== 'undefined' && window.innerWidth >= _allBreakpoints.breakpointValues.M) {
+      // On inital render, update carousel plugin config
+      // to suit the non-mobile layout and functionality:
+      setIsMobile(false);
+      setVisibleSlides(3);
+    }
+
+    // Hook into browser's own onresize event to call our custom wrapper function:
+    if (typeof window !== 'undefined') window.onresize = screenResize;
+  }, [screenResize]);
+  if (theseItems && totalSlides === null) {
+    // Reflects our two dummy/bookend slides for non-mobile/tablet views:
+    setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
+  }
+  return /*#__PURE__*/_react.default.createElement(_RichtextCarousel.CarouselWrapper, {
+    className: "CarouselWrapper",
+    id: thisID,
+    mobileHeight: mobileHeight,
+    tabletHeight: tabletHeight,
+    desktopHeight: desktopHeight,
+    carouselBackgroundColour: carouselBackgroundColour
+  }, /*#__PURE__*/_react.default.createElement(_RichtextCarousel.HeadingCopyWrapper, null, headingCopy), theseItems && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.CarouselProvider, {
+    naturalSlideWidth: 50,
+    naturalSlideHeight: 200,
+    totalSlides: totalSlides,
+    isPlaying: autoPlay,
+    interval: 5000,
+    visibleSlides: visibleSlides,
+    infinite: true
+  }, /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slider, {
+    classNameAnimation: "richtext-carousel"
+  }, isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
+    index: 0,
+    key: 0
+  }), Object.keys(theseItems).map((key, index) => {
+    // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
+    const thisOffsetIndex = index + (isMobile ? 0 : 1);
+    return (
+      /*#__PURE__*/
+      // Calculate the index offset accordingly to reflect the number of slides,
+      // but use the REAL index when determining if its the last REAL slide
+      _react.default.createElement(_pureReactCarousel.Slide, {
+        index: thisOffsetIndex,
+        className: index === theseItems.length - 1 && 'last-slide',
+        key: thisOffsetIndex
+      }, /*#__PURE__*/_react.default.createElement(_RichtextCarousel.SlideCopyWrapper, {
+        className: "slide-copy-wrapper",
+        mobileHeight: mobileHeight,
+        tabletHeight: tabletHeight,
+        desktopHeight: desktopHeight,
+        nodeBackgroundColour: nodeBackgroundColour,
+        nodeOutlineColour: nodeOutlineColour
+      }, theseItems[index].copy))
+    );
+  }), isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
+    index: theseItems.length + 1,
+    key: "bookend-last"
+  })), /*#__PURE__*/_react.default.createElement(_pureReactCarousel.ButtonBack, null, "Back"), /*#__PURE__*/_react.default.createElement(_pureReactCarousel.ButtonNext, null, "Next")));
+};
+var _default = exports.default = RichtextCarousel;

package/dist/components/Organisms/RichtextCarousel/RichtextCarousel.md

@@ -0,0 +1,14 @@
+# Richtext Carousel
+
+```js
+const { RichtextCarouselItems } = require('../../../styleguide/data/data');
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            Richtext Carousel #1
+        </h2>
+        <RichtextCarousel
+            data={RichtextCarouselItems}/>
+    </div>
+    
+```

package/dist/components/Organisms/RichtextCarousel/RichtextCarousel.style.js

@@ -0,0 +1,88 @@
+"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.SlideCopyWrapper = exports.HeadingCopyWrapper = exports.CarouselWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+// import Text from '../../Atoms/Text/Text';
+// Duration in seconds
+const animationSpeed = 0.75;
+const SlideCopyWrapper = exports.SlideCopyWrapper = _styledComponents.default.div.withConfig({
+  displayName: "RichtextCarouselstyle__SlideCopyWrapper",
+  componentId: "sc-35wlbv-0"
+})(["background:", ";height:", "px;width:75%;display:flex;flex-direction:column;justify-content:center;padding:25px;border:1px dashed ", ";border-radius:20px;position:relative;overflow:visible;word-wrap:break-word;&:after{position:absolute;content:'';top:50%;width:34%;right:calc(-34% - 0px);height:2px;border-bottom:1px dashed ", ";}@media ", "{height:", "px;width:85%;}@media ", "{height:", "px;}"], _ref => {
+  let {
+    theme,
+    nodeBackgroundColour
+  } = _ref;
+  return theme.color(nodeBackgroundColour);
+}, props => props.mobileHeight, _ref2 => {
+  let {
+    theme,
+    nodeOutlineColour
+  } = _ref2;
+  return theme.color(nodeOutlineColour);
+}, _ref3 => {
+  let {
+    theme,
+    nodeOutlineColour
+  } = _ref3;
+  return theme.color(nodeOutlineColour);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.allBreakpoints('M');
+}, props => props.tabletHeight, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.allBreakpoints('L');
+}, props => props.desktopHeight);
+const HeadingCopyWrapper = exports.HeadingCopyWrapper = _styledComponents.default.div.withConfig({
+  displayName: "RichtextCarouselstyle__HeadingCopyWrapper",
+  componentId: "sc-35wlbv-1"
+})(["text-align:center;"]);
+
+// Unfortunately having to target plugin-created markup ye olde fashioned way:
+const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
+  displayName: "RichtextCarouselstyle__CarouselWrapper",
+  componentId: "sc-35wlbv-2"
+})(["height:100%;background:", ";max-width:760px;padding:2.5rem ", " 3.5rem;margin:0 auto;border-radius:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.15);.carousel{position:relative;margin:0 auto;padding-top:", ";button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:", ";}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:", ";}}.richtext-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.slide-copy-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform-origin:center;transform:scale(0.8);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;width:100%;right:calc(-100% - 6px);transform:scale(1);}}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{width:33%;right:calc(-33% - 3px);transform:scale(1);}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{width:33%;right:calc(-33% + 3px);transform:scale(0.8);}}}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.8);&:after{width:50%;right:calc(-50% - 6px);transform:scale(1);}}}}}}@media ", "{padding-bottom:", "px !important;&.carousel__slide--visible{+ .carousel__slide--visible{+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-125% - 5px);width:125%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref6 => {
+  let {
+    theme,
+    carouselBackgroundColour
+  } = _ref6;
+  return theme.color(carouselBackgroundColour);
+}, (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref7 => {
+  let {
+    theme,
+    carouselBackgroundColour
+  } = _ref7;
+  return (0, _styledComponents.css)(["linear-gradient(90deg,", ",", "7a,", "00);"], theme.color(carouselBackgroundColour), theme.color(carouselBackgroundColour), theme.color(carouselBackgroundColour));
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.allBreakpoints('M');
+}, _ref9 => {
+  let {
+    theme,
+    carouselBackgroundColour
+  } = _ref9;
+  return (0, _styledComponents.css)(["linear-gradient(90deg,", "00,", "7a,", ");"], theme.color(carouselBackgroundColour), theme.color(carouselBackgroundColour), theme.color(carouselBackgroundColour));
+}, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.allBreakpoints('M');
+}, props => props.tabletHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.allBreakpoints('L');
+}, props => props.desktopHeight);

package/dist/components/Organisms/RichtextCarousel/RichtextCarousel.test.js

@@ -0,0 +1,16 @@
+"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 _RichtextCarousel = _interopRequireDefault(require("./RichtextCarousel"));
+const {
+  RichtextCarouselItems
+} = require("../../../styleguide/data/data");
+it("renders correctly", () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_RichtextCarousel.default, {
+    data: RichtextCarouselItems
+  })).toJSON();
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      text-align: center;\n    }\n\n    .c0 {\n      height: 100%;\n      background: #FFFFFF;\n      max-width: 760px;\n      padding: 2.5rem 2rem 3.5rem;\n      margin: 0 auto;\n      border-radius: 20px;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n    }\n\n    .c0 .carousel {\n      position: relative;\n      margin: 0 auto;\n      padding-top: 2rem;\n    }\n\n    .c0 .carousel button.carousel__back-button,\n    .c0 .carousel button.carousel__next-button {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 33% !important;\n      height: 100%;\n      padding: 0 !important;\n      box-shadow: none;\n      text-indent: -9999px;\n      background-color: transparent;\n      border: none;\n    }\n\n    .c0 .carousel button.carousel__back-button:after,\n    .c0 .carousel button.carousel__next-button:after {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      -webkit-transition: opacity 0.2s linear;\n      transition: opacity 0.2s linear;\n      background: linear-gradient(90deg,#FFFFFF,#FFFFFF7a,#FFFFFF00);\n    }\n\n    .c0 .carousel button.carousel__back-button:hover:after,\n    .c0 .carousel button.carousel__next-button:hover:after {\n      opacity: 0.5;\n    }\n\n    .c0 .carousel button.carousel__next-button {\n      left: auto;\n      right: 0;\n    }\n\n    .c0 .carousel button.carousel__next-button:before {\n      -webkit-transform: translate(0,-50%) rotate(-90deg);\n      -ms-transform: translate(0,-50%) rotate(-90deg);\n      transform: translate(0,-50%) rotate(-90deg);\n    }\n\n    .c0 .carousel button.carousel__next-button:after {\n      left: auto;\n      right: 0;\n      background: linear-gradient(90deg,#FFFFFF00,#FFFFFF7a,#FFFFFF);\n    }\n\n    .c0 .carousel .richtext-carousel {\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      transition: -webkit-transform 0.75s;\n      -o-transition: transform 0.75s;\n      -webkit-transition: -webkit-transform 0.75s;\n      -webkit-transition: transform 0.75s;\n      transition: transform 0.75s;\n      -webkit-transform: 0.75s;\n      will-change: transform;\n    }\n\n    .c0 .carousel .richtext-carousel .last-slide .slide-copy-wrapper:after {\n      content: none;\n    }\n\n    .c0 .carousel .richtext-carousel .carousel__slide {\n      padding-bottom: 300px !important;\n    }\n\n    .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide {\n      text-align: center;\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      -webkit-box-pack: start;\n      -webkit-justify-content: flex-start;\n      -ms-flex-pack: start;\n      justify-content: flex-start;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel button.carousel__back-button,\n      .c0 .carousel button.carousel__next-button {\n        width: 33.3% !important;\n      }\n\n      .c0 .carousel button.carousel__back-button:after,\n      .c0 .carousel button.carousel__next-button:after {\n        width: 100%;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c0 .carousel .richtext-carousel .carousel__slide {\n        padding-bottom: 350px !important;\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n        -webkit-transition: -webkit-transform 0.75s ease;\n        -webkit-transition: transform 0.75s ease;\n        transition: transform 0.75s ease;\n        -webkit-transform-origin: center;\n        -ms-transform-origin: center;\n        transform-origin: center;\n        -webkit-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n        width: 100%;\n        right: calc(-100% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        width: 33%;\n        right: calc(-33% - 3px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        width: 33%;\n        right: calc(-33% + 3px);\n        -webkit-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n        -webkit-transform: scale(0.8);\n        -ms-transform: scale(0.8);\n        transform: scale(0.8);\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n        width: 50%;\n        right: calc(-50% - 6px);\n        -webkit-transform: scale(1);\n        -ms-transform: scale(1);\n        transform: scale(1);\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 .carousel .richtext-carousel .carousel__slide {\n        padding-bottom: 350px !important;\n      }\n\n      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n        right: calc(-125% - 5px);\n        width: 125%;\n      }\n    }\n\n    <div\n      className=\"c0 CarouselWrapper\"\n      id=\"nqIEHjiYE8Yd2A2a5cI3O\"\n    >\n      <div\n        className=\"c1\"\n      >\n        Some heading copy that will be nicely constructed in-situ\n      </div>\n    </div>\n  ");
+});

package/dist/index.js

@@ -232,6 +232,12 @@ Object.defineProperty(exports, "RichText", {
     return _RichText.default;
   }
 });
+Object.defineProperty(exports, "RichtextCarousel", {
+  enumerable: true,
+  get: function () {
+    return _RichtextCarousel.default;
+  }
+});
 Object.defineProperty(exports, "SchoolLookup", {
   enumerable: true,
   get: function () {
@@ -454,4 +460,5 @@ var _CookieBanner = _interopRequireDefault(require("./components/Organisms/Cooki
 var _Membership = _interopRequireDefault(require("./components/Organisms/Membership/Membership"));
 var _MarketingPreferencesDS = require("./components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS");
 var _ImpactSlider = _interopRequireDefault(require("./components/Organisms/ImpactSlider/ImpactSlider"));
-var _WYMDCarousel = _interopRequireDefault(require("./components/Organisms/WYMDCarousel/WYMDCarousel"));
+var _WYMDCarousel = _interopRequireDefault(require("./components/Organisms/WYMDCarousel/WYMDCarousel"));
+var _RichtextCarousel = _interopRequireDefault(require("./components/Organisms/RichtextCarousel/RichtextCarousel"));

package/dist/styleguide/data/data.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testImpactSliderItems = exports.mobileImages = exports.defaultData = exports.carouselItemsMinimal = exports.carouselItemsIncomplete = exports.carouselItemsComplete = void 0;
+exports.testImpactSliderItems = exports.mobileImages = exports.defaultData = exports.carouselItemsMinimal = exports.carouselItemsIncomplete = exports.carouselItemsComplete = exports.RichtextCarouselItems = void 0;
 const defaultData = exports.defaultData = {
   title: 'What your money does',
   text: 'When you donate to Comic Relief or Sport Relief, you’re supporting vulnerable people and communities in the UK and internationally.',
@@ -210,4 +210,19 @@ const carouselItemsMinimal = exports.carouselItemsMinimal = {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
     }
   }
+};
+const RichtextCarouselItems = exports.RichtextCarouselItems = {
+  contentful_id: 'nqIEHjiYE8Yd2A2a5cI3O',
+  // Ugly here, but to be provided by Richtextrender function in-situ:
+  headingCopy: 'Some heading copy that will be nicely constructed in-situ',
+  nodes: [{
+    copy: 'Some other longside but not really all that long copy, who knows, it could be this long or LESS.'
+  }, {
+    copy: '140 character count limit imposed in messages to fix the design height of each container and restrict anomalies. This is based on Twitters character limit for tweets.'
+  }, {
+    copy: 'Some other longside but not really all that long copy, who knows, it could be this long or LESS'
+  }, {
+    copy: '140 character count limit imposed in messages to fix the design height of each container and restrict anomalies. This is based on Twitters character limit for tweets. ABIGLONGLINETOFORCEONTOANEWONE'
+  }],
+  autoPlay: true
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.js

@@ -0,0 +1,160 @@
+import React, {
+  useEffect, useState, useCallback
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+  CarouselProvider, Slider, Slide, ButtonBack, ButtonNext
+} from 'pure-react-carousel';
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import {
+  CarouselWrapper, SlideCopyWrapper, HeadingCopyWrapper
+} from './RichtextCarousel.style';
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
+
+const RichtextCarousel = ({
+  data: {
+    contentful_id: thisID,
+    autoPlay,
+    nodes,
+    headingCopy,
+    // Set some defaults for good measure:
+    mobileHeight = 300,
+    tabletHeight = 350,
+    desktopHeight = 350,
+    carouselBackgroundColour = 'white',
+    nodeBackgroundColour = 'white',
+    nodeOutlineColour = 'grey'
+  }
+}) => {
+  // Defaults to mobile config:
+  const [isMobile, setIsMobile] = useState(true);
+  const [visibleSlides, setVisibleSlides] = useState(1);
+  const [totalSlides, setTotalSlides] = useState(null);
+  const [theseItems, setTheseItems] = useState();
+
+  // Custom function to let us update the carousel config dynamically
+  const screenResize = useCallback(() => {
+    const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
+    const isCurrentlyMobile = window.innerWidth < breakpointValues.M;
+
+    if (screenSize !== null && (isMobile !== isCurrentlyMobile)) {
+      setIsMobile(isCurrentlyMobile);
+      setVisibleSlides(isCurrentlyMobile ? 1 : 3);
+      setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
+    }
+  }, [isMobile, theseItems]);
+
+  // Cache our data source, using as a flag for render logic:
+  useEffect(() => {
+    setTheseItems(nodes);
+  }, [setTheseItems, nodes]);
+
+  useEffect(() => {
+    if (window !== 'undefined' && window.innerWidth >= breakpointValues.M) {
+      // On inital render, update carousel plugin config
+      // to suit the non-mobile layout and functionality:
+      setIsMobile(false);
+      setVisibleSlides(3);
+    }
+
+    // Hook into browser's own onresize event to call our custom wrapper function:
+    if (typeof window !== 'undefined') window.onresize = screenResize;
+  }, [screenResize]);
+
+  if (theseItems && totalSlides === null) {
+    // Reflects our two dummy/bookend slides for non-mobile/tablet views:
+    setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
+  }
+
+  return (
+    <CarouselWrapper
+      className="CarouselWrapper"
+      id={thisID}
+      mobileHeight={mobileHeight}
+      tabletHeight={tabletHeight}
+      desktopHeight={desktopHeight}
+      carouselBackgroundColour={carouselBackgroundColour}
+    >
+
+      <HeadingCopyWrapper>
+        {headingCopy}
+      </HeadingCopyWrapper>
+
+      {theseItems && (
+      <CarouselProvider
+        naturalSlideWidth={50}
+        naturalSlideHeight={200}
+        totalSlides={totalSlides}
+        isPlaying={autoPlay}
+        interval={5000}
+        visibleSlides={visibleSlides}
+        infinite
+      >
+        <Slider classNameAnimation="richtext-carousel">
+
+          {/* Dummy slide for our desired non-mobile layout and functionality */}
+          {isMobile === false && (
+          <Slide index={0} key={0} />
+          )}
+
+          {Object.keys(theseItems).map((key, index) => {
+            // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
+            const thisOffsetIndex = index + (isMobile ? 0 : 1);
+
+            return (
+              // Calculate the index offset accordingly to reflect the number of slides,
+              // but use the REAL index when determining if its the last REAL slide
+              <Slide
+                index={thisOffsetIndex}
+                className={index === (theseItems.length - 1) && 'last-slide'}
+                key={thisOffsetIndex}
+              >
+
+                <SlideCopyWrapper
+                  className="slide-copy-wrapper"
+                  mobileHeight={mobileHeight}
+                  tabletHeight={tabletHeight}
+                  desktopHeight={desktopHeight}
+                  nodeBackgroundColour={nodeBackgroundColour}
+                  nodeOutlineColour={nodeOutlineColour}
+                >
+                  {theseItems[index].copy}
+                </SlideCopyWrapper>
+
+              </Slide>
+            );
+          })}
+
+          {/* Dummy slide for our desired non-mobile layout and functionality */}
+          {isMobile === false && (
+          <Slide index={theseItems.length + 1} key="bookend-last" />
+          )}
+
+        </Slider>
+        <ButtonBack>Back</ButtonBack>
+        <ButtonNext>Next</ButtonNext>
+      </CarouselProvider>
+      )}
+
+    </CarouselWrapper>
+  );
+};
+
+RichtextCarousel.propTypes = {
+  data: PropTypes.shape({
+    headingCopy: PropTypes.string.isRequired,
+    nodes: PropTypes.arrayOf(PropTypes.shape({
+      copy: PropTypes.string.isRequired
+    })).isRequired,
+    autoPlay: PropTypes.bool.isRequired,
+    contentful_id: PropTypes.string.isRequired,
+    mobileHeight: PropTypes.number,
+    tabletHeight: PropTypes.number,
+    desktopHeight: PropTypes.number,
+    carouselBackgroundColour: PropTypes.string,
+    nodeBackgroundColour: PropTypes.string,
+    nodeOutlineColour: PropTypes.string
+  }).isRequired
+};
+
+export default RichtextCarousel;

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.md

@@ -0,0 +1,14 @@
+# Richtext Carousel
+
+```js
+const { RichtextCarouselItems } = require('../../../styleguide/data/data');
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            Richtext Carousel #1
+        </h2>
+        <RichtextCarousel
+            data={RichtextCarouselItems}/>
+    </div>
+    
+```

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js

@@ -0,0 +1,248 @@
+import styled, { css } from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+// import Text from '../../Atoms/Text/Text';
+
+// Duration in seconds
+const animationSpeed = 0.75;
+
+const SlideCopyWrapper = styled.div`
+  background: ${({ theme, nodeBackgroundColour }) => theme.color(nodeBackgroundColour)};
+  height: ${props => props.mobileHeight}px;
+  width: 75%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 25px;
+  border: 1px dashed ${({ theme, nodeOutlineColour }) => theme.color(nodeOutlineColour)};
+  border-radius: 20px;
+  position: relative;
+  overflow: visible;
+  word-wrap: break-word;
+
+  &:after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    width: 34%;
+    right: calc(-34% - 0px);
+    height: 2px;
+    border-bottom: 1px dashed ${({ theme, nodeOutlineColour }) => theme.color(nodeOutlineColour)};
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    height: ${props => props.tabletHeight}px;
+    width: 85%;
+  }
+
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
+    height: ${props => props.desktopHeight}px;
+  }
+`;
+
+const HeadingCopyWrapper = styled.div`
+  text-align: center;
+`;
+
+// Unfortunately having to target plugin-created markup ye olde fashioned way:
+const CarouselWrapper = styled.div`
+  height: 100%;
+  background: ${({ theme, carouselBackgroundColour }) => theme.color(carouselBackgroundColour)};
+  
+  max-width: 760px;
+  padding: 2.5rem ${spacing('l')} 3.5rem;
+  margin: 0 auto;
+
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
+
+  .carousel {
+    position: relative;
+    margin: 0 auto;
+    padding-top: ${spacing('l')};
+
+    button.carousel__back-button,
+    button.carousel__next-button {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 33% !important;
+      height: 100%;
+      padding: 0 !important;
+      box-shadow: none;
+      text-indent: -9999px;
+      background-color: transparent;
+      border: none;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+        transition: opacity 0.2s linear;
+        background: ${({ theme, carouselBackgroundColour }) => css`
+          linear-gradient(90deg, ${theme.color(carouselBackgroundColour)},
+          ${theme.color(carouselBackgroundColour)}7a, ${theme.color(carouselBackgroundColour)}00);
+        `};
+      }
+
+      &:hover {
+        &:after {
+          opacity: 0.5;
+        }
+      }
+
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
+        width: 33.3% !important;
+        &:after {
+          width: 100%;
+        }
+      }
+    }
+
+    button.carousel__next-button {
+      left: auto;
+      right: 0;
+
+      &:before {
+        transform: translate(0, -50%) rotate(-90deg);
+      }
+
+      &:after {
+        left: auto;
+        right: 0;
+
+        background: ${({ theme, carouselBackgroundColour }) => css`
+          linear-gradient(90deg, ${theme.color(carouselBackgroundColour)}00,
+          ${theme.color(carouselBackgroundColour)}7a, ${theme.color(carouselBackgroundColour)});
+        `};
+      }
+    }
+
+    .richtext-carousel {
+      // Override default animations
+      transition: -webkit-transform ${animationSpeed}s;
+      -o-transition: transform ${animationSpeed}s;
+      transition: transform ${animationSpeed}s;
+      -webkit-transform: ${animationSpeed}s;
+      will-change: transform;
+
+      .last-slide {
+        .slide-copy-wrapper:after {
+          content: none;
+        }
+      }
+
+      .carousel__slide {
+        // 'Mobile'
+        padding-bottom: ${props => props.mobileHeight}px !important;
+
+        // 'Tablet' (and up) tweaks for the 3-visible layout
+        @media ${({ theme }) => theme.allBreakpoints('M')} {
+
+          padding-bottom: ${props => props.tabletHeight}px !important;
+
+          // All slides:
+          .carousel__inner-slide {
+
+            // All 'SlideCopyWrapper's:
+            > div:first-child {
+              transition: transform ${animationSpeed}s ease;
+              transform-origin: center;
+              transform: scale(0.8);
+
+              &:after {
+                transition: transform ${animationSpeed}s ease,
+                width ${animationSpeed}s ease,
+                right ${animationSpeed}s ease;
+                width: 100%;
+                right: calc(-100% - 6px);
+                transform: scale(1);
+
+              }
+            }
+          }
+
+          // Our 'first' slide of the three:
+          &.carousel__slide--visible {
+            .carousel__inner-slide {
+              > div:first-child {
+                &:after {
+                  width: 33%;
+                  right: calc(-33% - 3px);
+                  transform: scale(1);
+                }
+              }
+            }
+
+            // 2nd and 3rd:
+            + .carousel__slide--visible {
+              .carousel__inner-slide {
+                > div:first-child {
+                  transform: scale(1);
+                  &:after {
+                    width: 33%;
+                    right: calc(-33% + 3px);
+                    transform: scale(0.8);
+                  }
+                }
+              }
+
+              // Resets the 3rd slide:
+              + .carousel__slide--visible {
+                > div > div:first-child {
+                  transform: scale(0.8);
+                  &:after {
+                    width: 50%;
+                    right: calc(-50% - 6px);
+                    transform: scale(1);
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        // 'Desktop'
+        @media ${({ theme }) => theme.allBreakpoints('L')} {
+          padding-bottom: ${props => props.desktopHeight}px !important;
+
+          // First
+          &.carousel__slide--visible {
+
+            // 2nd and 3rd
+            + .carousel__slide--visible {
+
+              // 3rd only
+              + .carousel__slide--visible {
+                .carousel__inner-slide {
+                  > div:first-child {
+                    &:after {
+                      right: calc(-125% - 5px);
+                      width: 125%;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        // END OF DESKTOP
+
+        .carousel__inner-slide {
+          text-align: center;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          flex-direction: column;
+        }
+      }
+    }
+  }
+`;
+
+export {
+  CarouselWrapper, SlideCopyWrapper,
+  HeadingCopyWrapper
+};

package/src/components/Organisms/RichtextCarousel/RichtextCarousel.test.js

@@ -0,0 +1,221 @@
+import React from "react";
+import "jest-styled-components";
+
+import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
+import RichtextCarousel from "./RichtextCarousel";
+const { RichtextCarouselItems } = require("../../../styleguide/data/data");
+
+it("renders correctly", () => {
+  const tree = renderWithTheme(
+    <RichtextCarousel data={RichtextCarouselItems} />
+  ).toJSON();
+
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      text-align: center;
+    }
+
+    .c0 {
+      height: 100%;
+      background: #FFFFFF;
+      max-width: 760px;
+      padding: 2.5rem 2rem 3.5rem;
+      margin: 0 auto;
+      border-radius: 20px;
+      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
+    }
+
+    .c0 .carousel {
+      position: relative;
+      margin: 0 auto;
+      padding-top: 2rem;
+    }
+
+    .c0 .carousel button.carousel__back-button,
+    .c0 .carousel button.carousel__next-button {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 33% !important;
+      height: 100%;
+      padding: 0 !important;
+      box-shadow: none;
+      text-indent: -9999px;
+      background-color: transparent;
+      border: none;
+    }
+
+    .c0 .carousel button.carousel__back-button:after,
+    .c0 .carousel button.carousel__next-button:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      -webkit-transition: opacity 0.2s linear;
+      transition: opacity 0.2s linear;
+      background: linear-gradient(90deg,#FFFFFF,#FFFFFF7a,#FFFFFF00);
+    }
+
+    .c0 .carousel button.carousel__back-button:hover:after,
+    .c0 .carousel button.carousel__next-button:hover:after {
+      opacity: 0.5;
+    }
+
+    .c0 .carousel button.carousel__next-button {
+      left: auto;
+      right: 0;
+    }
+
+    .c0 .carousel button.carousel__next-button:before {
+      -webkit-transform: translate(0,-50%) rotate(-90deg);
+      -ms-transform: translate(0,-50%) rotate(-90deg);
+      transform: translate(0,-50%) rotate(-90deg);
+    }
+
+    .c0 .carousel button.carousel__next-button:after {
+      left: auto;
+      right: 0;
+      background: linear-gradient(90deg,#FFFFFF00,#FFFFFF7a,#FFFFFF);
+    }
+
+    .c0 .carousel .richtext-carousel {
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      transition: -webkit-transform 0.75s;
+      -o-transition: transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: transform 0.75s;
+      transition: transform 0.75s;
+      -webkit-transform: 0.75s;
+      will-change: transform;
+    }
+
+    .c0 .carousel .richtext-carousel .last-slide .slide-copy-wrapper:after {
+      content: none;
+    }
+
+    .c0 .carousel .richtext-carousel .carousel__slide {
+      padding-bottom: 300px !important;
+    }
+
+    .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide {
+      text-align: center;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      -webkit-box-pack: start;
+      -webkit-justify-content: flex-start;
+      -ms-flex-pack: start;
+      justify-content: flex-start;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+    }
+
+    @media (min-width:740px) {
+      .c0 .carousel button.carousel__back-button,
+      .c0 .carousel button.carousel__next-button {
+        width: 33.3% !important;
+      }
+
+      .c0 .carousel button.carousel__back-button:after,
+      .c0 .carousel button.carousel__next-button:after {
+        width: 100%;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c0 .carousel .richtext-carousel .carousel__slide {
+        padding-bottom: 350px !important;
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide > div:first-child {
+        -webkit-transition: -webkit-transform 0.75s ease;
+        -webkit-transition: transform 0.75s ease;
+        transition: transform 0.75s ease;
+        -webkit-transform-origin: center;
+        -ms-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        transform: scale(0.8);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
+        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        width: 100%;
+        right: calc(-100% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        width: 33%;
+        right: calc(-33% - 3px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        width: 33%;
+        right: calc(-33% + 3px);
+        -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        transform: scale(0.8);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
+        -webkit-transform: scale(0.8);
+        -ms-transform: scale(0.8);
+        transform: scale(0.8);
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
+        width: 50%;
+        right: calc(-50% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 .carousel .richtext-carousel .carousel__slide {
+        padding-bottom: 350px !important;
+      }
+
+      .c0 .carousel .richtext-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-125% - 5px);
+        width: 125%;
+      }
+    }
+
+    <div
+      className="c0 CarouselWrapper"
+      id="nqIEHjiYE8Yd2A2a5cI3O"
+    >
+      <div
+        className="c1"
+      >
+        Some heading copy that will be nicely constructed in-situ
+      </div>
+    </div>
+  `);
+});

package/src/index.js

@@ -76,3 +76,4 @@ export {
 } from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
 export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
 export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
+export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';

package/src/styleguide/data/data.js

@@ -223,7 +223,20 @@ const carouselItemsMinimal = {
   }
 };
 
+const RichtextCarouselItems = {
+  contentful_id: 'nqIEHjiYE8Yd2A2a5cI3O',
+  // Ugly here, but to be provided by Richtextrender function in-situ:
+  headingCopy: 'Some heading copy that will be nicely constructed in-situ',
+  nodes: [
+    { copy: 'Some other longside but not really all that long copy, who knows, it could be this long or LESS.' },
+    { copy: '140 character count limit imposed in messages to fix the design height of each container and restrict anomalies. This is based on Twitters character limit for tweets.' },
+    { copy: 'Some other longside but not really all that long copy, who knows, it could be this long or LESS' },
+    { copy: '140 character count limit imposed in messages to fix the design height of each container and restrict anomalies. This is based on Twitters character limit for tweets. ABIGLONGLINETOFORCEONTOANEWONE' }
+  ],
+  autoPlay: true
+};
+
 export {
   defaultData, mobileImages, testImpactSliderItems,
-  carouselItemsComplete, carouselItemsIncomplete, carouselItemsMinimal
+  carouselItemsComplete, carouselItemsIncomplete, carouselItemsMinimal, RichtextCarouselItems
 };