@comicrelief/component-library 7.34.0 → 7.35.0

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

@@ -0,0 +1,317 @@
+import React from "react";
+import "jest-styled-components";
+
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import WYMDCarousel from "./WYMDCarousel";
+const { carouselItemsComplete } = require("../../../styleguide/data/data");
+
+it("renders correctly", () => {
+  const tree = renderWithTheme(
+    <WYMDCarousel data={carouselItemsComplete} />
+  ).toJSON();
+
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c3 {
+      color: #E52630;
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: uppercase;
+      font-weight: normal;
+      font-family: 'Anton',Impact,sans-serif;
+      -webkit-letter-spacing: 0.03rem;
+      -moz-letter-spacing: 0.03rem;
+      -ms-letter-spacing: 0.03rem;
+      letter-spacing: 0.03rem;
+    }
+
+    .c5 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c2 {
+      width: 75%;
+      margin: 0 auto;
+    }
+
+    .c2:first-child {
+      margin-bottom: 2rem;
+      text-align: center;
+      font-size: 20px;
+      line-height: 23px;
+    }
+
+    .c4 {
+      margin-bottom: 2rem;
+      text-align: center;
+      font-size: 40px;
+      line-height: 40px;
+    }
+
+    .c6 {
+      margin-bottom: 0;
+      text-align: center;
+      font-size: 14px;
+      line-height: 17px;
+    }
+
+    .c0 {
+      height: 100%;
+      padding: 1.5rem;
+    }
+
+    .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:before,
+    .c0 .carousel button.carousel__next-button:before {
+      content: '';
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      top: 50%;
+      left: 0;
+      -webkit-transform: translate(0,-50%) rotate(90deg);
+      -ms-transform: translate(0,-50%) rotate(90deg);
+      transform: translate(0,-50%) rotate(90deg);
+    }
+
+    .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,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));
+    }
+
+    .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(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));
+    }
+
+    .c0 .carousel .wymd-carousel {
+      -webkit-transition: -webkit-transform 0.5s;
+      -webkit-transition: -webkit-transform 0.5s;
+      transition: -webkit-transform 0.5s;
+      -o-transition: transform 0.5s;
+      -webkit-transition: -webkit-transform 0.5s;
+      -webkit-transition: transform 0.5s;
+      transition: transform 0.5s;
+      -webkit-transform: 0.5s;
+      will-change: transform;
+    }
+
+    .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {
+      content: none;
+    }
+
+    .c0 .carousel .wymd-carousel .carousel__slide {
+      padding-bottom: 500px !important;
+    }
+
+    .c0 .carousel .wymd-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:1024px) {
+      .c2:first-child {
+        font-size: 21px;
+        line-height: 23px;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c4 {
+        font-size: 60px;
+        line-height: 60px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c4 {
+        font-size: 75px;
+        line-height: 78px;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c6 {
+        font-size: 17px;
+        line-height: 19px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 .carousel {
+        padding-top: 3rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .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:1024px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 550px !important;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
+        -webkit-transition: -webkit-transform 0.5s ease;
+        -webkit-transition: transform 0.5s ease;
+        transition: transform 0.5s ease;
+        -webkit-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
+        -webkit-transition: -webkit-transform 0.5s ease,width 0.5s ease,right 0.5s ease;
+        -webkit-transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;
+        transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;
+        right: calc(-300% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        width: 300%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-250% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        width: 250%;
+      }
+
+      .c0 .carousel .wymd-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 .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-187% - 6px);
+        -webkit-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+        width: 250%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
+        -webkit-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
+        right: calc(-250% - 6px);
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+        width: 250%;
+      }
+    }
+
+    <div
+      className="c0 CarouselWrapper"
+      id="7zdR84QkZwrTh9NWx2H926"
+    >
+      <p
+        className="c1 c2"
+        color="inherit"
+        size="s"
+      >
+        Over the past two years, we’ve supported
+      </p>
+      <h1
+        className="c3 c4"
+        color="red"
+        size="s"
+      >
+        11.7 million people
+      </h1>
+      <p
+        className="c5 c6"
+        color="inherit"
+        size="s"
+      >
+        including...
+      </p>
+    </div>
+  `);
+});

package/src/components/Organisms/WYMDCarousel/_utils.js

@@ -0,0 +1,41 @@
+const formatItems = thisData => {
+  // Somewhere to store our formatted items:
+  const allValidNodes = [];
+
+  // Set at a Content Type field level, so doesn't need to be dynamic:
+  const possibleNumberOfNodes = 12;
+
+  // Grab ALL keys from our raw data:
+  const theseKeys = Object.keys(thisData);
+
+  // Iterate over all of the data, using a dynamic key prefix to filter
+  // what we need in order to create each object for our allValidNodes array:
+  for (let i = 1; i <= possibleNumberOfNodes; i += 1) {
+    // Create a dynamic key prefix based on the counter, obviously matching
+    // the naming convention set at the Content Type level in the CMS
+    const thisKeyPrefix = `node${i}_`;
+
+    // Make an array of objects, each object representing a specific node and its fields:
+    const thisNodeContent = theseKeys
+      .filter(key => key.includes(thisKeyPrefix))
+      .reduce((thisObj, thisKey) => {
+        const thisFilteredObj = thisObj;
+        // Only assign if we have actually have a value; only the fields for nodes 1-4 are required:
+        if (thisData[thisKey]) {
+          // Use a repeatable, generic key so rendering is a LOT easier:
+          const simplifedKey = thisKey.split('_').pop().toLowerCase();
+          thisFilteredObj[simplifedKey] = thisData[thisKey];
+        }
+        return thisFilteredObj;
+      }, {});
+
+    // Add our new object to the allValidNodes array, but only if we've got all 3 necessary fields:
+    if (Object.keys(thisNodeContent).length === 3) {
+      allValidNodes.push(thisNodeContent);
+    }
+  }
+
+  return allValidNodes;
+};
+
+export default formatItems;

package/src/styleguide/data/data.js

@@ -49,6 +49,220 @@ const testImpactSliderItems = [
   }
 ];
 
+const carouselItemsComplete = {
+  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
+  contentful_id: '7zdR84QkZwrTh9NWx2H926',
+  mobileHeight: 500,
+  desktopHeight: 550,
+  heading: 'Over the past two years, we’ve supported',
+  peopleHelpedText: '11.7 million people',
+  autoPlay: true,
+  node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
+  node1_Amount: '1,000',
+  node1_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support. This node has a load of copy to make things extra difficult',
+  node2_Amount: '2,000',
+  node2_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
+  node3_Amount: '3,000',
+  node3_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
+  node4_Amount: '4,000',
+  node4_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
+  node5_Amount: '5,000',
+  node5_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
+  node6_Amount: '6,000',
+  node6_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node7_Copy: 'NODE7: people in the UK experiencing poverty to access advice and support.',
+  node7_Amount: '7,000',
+  node7_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node8_Copy: 'NODE8: people in the UK experiencing poverty to access advice and support.',
+  node8_Amount: '8,000',
+  node8_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
+  node9_Amount: '9,000',
+  node9_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node10_Copy: 'NODE10: people in the UK experiencing poverty to access advice and support.',
+  node10_Amount: '10,000',
+  node10_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
+  node11_Amount: '11,000',
+  node11_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node12_Copy: 'NODE12: people in the UK experiencing poverty to access advice and support.750,000',
+  node12_Amount: '12,000',
+  node12_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  }
+};
+
+const carouselItemsIncomplete = {
+  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
+  contentful_id: '7zdR84QkZwrTh9NWx2H9262',
+  mobileHeight: 500,
+  desktopHeight: 550,
+  heading: 'Over the past two years, we’ve supported',
+  peopleHelpedText: '11.7 million people',
+  autoPlay: false,
+  node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
+  node1_Amount: '1,000',
+  node1_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
+  node2_Amount: '2,000',
+  node2_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
+  node3_Amount: '3,000',
+  node3_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
+  node4_Amount: '4,000',
+  node4_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
+  node5_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
+  node6_Amount: '6,000',
+  node6_Image: null,
+  node7_Copy: null,
+  node7_Amount: null,
+  node7_Image: null,
+  node8_Copy: null,
+  node8_Amount: null,
+  node8_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
+  node9_Amount: null,
+  node9_Image: null,
+  node10_Copy: null,
+  node10_Amount: '10,000',
+  node10_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
+  node11_Amount: '11,000',
+  node11_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node12_Copy: 'people in the UK experiencing poverty to access advice and support.750,000',
+  node12_Amount: null,
+  node12_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  }
+};
+
+const carouselItemsMinimal = {
+  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
+  contentful_id: '7zdR84QkZwrTh9NWx2H9263',
+  mobileHeight: 500,
+  desktopHeight: 550,
+  heading: 'Over the past two years, we’ve supported',
+  peopleHelpedText: '11.7 million people',
+  autoPlay: false,
+  node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
+  node1_Amount: '1,000',
+  node1_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
+  node2_Amount: '2,000',
+  node2_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
+  node3_Amount: '3,000',
+  node3_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  },
+  node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
+  node4_Amount: '4,000',
+  node4_Image: {
+    file: {
+      url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
+    }
+  }
+};
+
 export {
-  defaultData, mobileImages, testImpactSliderItems
+  defaultData, mobileImages, testImpactSliderItems,
+  carouselItemsComplete, carouselItemsIncomplete, carouselItemsMinimal
 };