@comicrelief/component-library 7.34.0 → 7.35.0

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

@@ -0,0 +1,238 @@
+import React, {
+  useEffect, useState, useCallback
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+  CarouselProvider, Slider, Slide, ButtonBack, ButtonNext
+} from 'pure-react-carousel';
+import formatItems from './_utils';
+import 'pure-react-carousel/dist/react-carousel.es.css';
+import {
+  CarouselWrapper, ImageWrapper, AmountWrapper, CopyWrapper, Heading, PeopleHelpedText, Including
+} from './WYMDCarousel.style';
+import Text from '../../Atoms/Text/Text';
+import { sizes } from '../../../theme/shared/breakpoint';
+
+const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
+  // Defaults to mobile config:
+  const [isMobileOrTablet, setIsMobileOrTablet] = 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 < sizes.medium;
+
+    if (screenSize !== null && (isMobileOrTablet !== isCurrentlyMobile)) {
+      setIsMobileOrTablet(isCurrentlyMobile);
+      setVisibleSlides(isCurrentlyMobile ? 1 : 3);
+      setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
+    }
+  }, [isMobileOrTablet, theseItems]);
+
+  // Format our data BEFORE we use it in render:
+  useEffect(() => {
+    setTheseItems(formatItems(data));
+  }, [setTheseItems, data]);
+
+  useEffect(() => {
+    if (window !== 'undefined' && window.innerWidth >= sizes.medium) {
+      // On inital render, update carousel plugin config
+      // to suit the non-mobile layout and functionality:
+      setIsMobileOrTablet(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(isMobileOrTablet ? theseItems.length : theseItems.length + 2);
+  }
+
+  return (
+    <CarouselWrapper
+      className="CarouselWrapper"
+      id={thisID}
+      mobileHeight={data.mobileHeight}
+      desktopHeight={data.desktopHeight}
+    >
+
+      <Heading tag="p" weight="bold">
+        { data.heading}
+      </Heading>
+
+      <PeopleHelpedText tag="h1" family="Anton" uppercase weight="normal" color="red">
+        { data.peopleHelpedText}
+      </PeopleHelpedText>
+
+      <Including tag="p">
+        including...
+      </Including>
+
+      {theseItems && (
+      <CarouselProvider
+        naturalSlideWidth={50}
+        naturalSlideHeight={200}
+        totalSlides={totalSlides}
+        isPlaying={autoPlay}
+        interval={5000}
+        visibleSlides={visibleSlides}
+        infinite
+      >
+        <Slider classNameAnimation="wymd-carousel">
+
+          {/* Dummy slide for our desired non-mobile layout and functionality */}
+          {isMobileOrTablet === 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 + (isMobileOrTablet ? 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}
+              >
+
+                <ImageWrapper className="image-wrapper">
+                  <img src={theseItems[key].image.file.url} alt={theseItems[key].copy} />
+                </ImageWrapper>
+
+                <AmountWrapper>
+                  <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
+                    {theseItems[key].amount}
+                  </Text>
+                </AmountWrapper>
+
+                <CopyWrapper>
+                  <Text tag="p" size="l">
+                    {theseItems[key].copy}
+                  </Text>
+                </CopyWrapper>
+              </Slide>
+            );
+          })}
+
+          {/* Dummy slide for our desired non-mobile layout and functionality */}
+          {isMobileOrTablet === false && (
+          <Slide index={theseItems.length + 1} key="bookend-last" />
+          )}
+
+        </Slider>
+        <ButtonBack>Back</ButtonBack>
+        <ButtonNext>Next</ButtonNext>
+      </CarouselProvider>
+      )}
+
+    </CarouselWrapper>
+  );
+};
+
+WYMDCarousel.propTypes = {
+  data: PropTypes.shape({
+    // Required 'node' fields:
+    node1_Amount: PropTypes.string.isRequired,
+    node1_Copy: PropTypes.string.isRequired,
+    node1_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+    node2_Amount: PropTypes.string.isRequired,
+    node2_Copy: PropTypes.string.isRequired,
+    node2_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+    node3_Amount: PropTypes.string.isRequired,
+    node3_Copy: PropTypes.string.isRequired,
+    node3_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+    node4_Amount: PropTypes.string.isRequired,
+    node4_Copy: PropTypes.string.isRequired,
+    node4_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string.isRequired
+      }).isRequired
+    }).isRequired,
+    // Non-required 'node' fields:
+    node5_Amount: PropTypes.string,
+    node5_Copy: PropTypes.string,
+    node5_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node6_Amount: PropTypes.string,
+    node6_Copy: PropTypes.string,
+    node6_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node7_Amount: PropTypes.string,
+    node7_Copy: PropTypes.string,
+    node7_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node8_Amount: PropTypes.string,
+    node8_Copy: PropTypes.string,
+    node8_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node9_Amount: PropTypes.string,
+    node9_Copy: PropTypes.string,
+    node9_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node10_Amount: PropTypes.string,
+    node10_Copy: PropTypes.string,
+    node10_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node11_Amount: PropTypes.string,
+    node11_Copy: PropTypes.string,
+    node11_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    node12_Amount: PropTypes.string,
+    node12_Copy: PropTypes.string,
+    node12_Image: PropTypes.shape({
+      file: PropTypes.shape({
+        url: PropTypes.string
+      })
+    }),
+    autoPlay: PropTypes.bool.isRequired,
+    heading: PropTypes.string.isRequired,
+    peopleHelpedText: PropTypes.string.isRequired,
+    contentful_id: PropTypes.string.isRequired,
+    mobileHeight: PropTypes.number,
+    desktopHeight: PropTypes.number
+  }).isRequired
+};
+
+export default WYMDCarousel;

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.md

@@ -0,0 +1,40 @@
+# 'What Your Money Does' Carousel
+
+```js
+const { carouselItemsComplete } = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            All fields supplied, autoplay on:
+        </h2>
+        <WYMDCarousel data={carouselItemsComplete}/>
+    </div>
+    
+```
+
+```js
+const { carouselItemsIncomplete } = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            All REQUIRED fields supplied (nodes 1-4), various incomplete nodes, node 11 complete, autoplay off:
+        </h2>
+        <WYMDCarousel data={carouselItemsIncomplete}/>
+    </div>
+    
+```
+
+```js
+const { carouselItemsMinimal } = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+    <div>
+        <h2 style={{textAlign: 'center'}}>
+            All REQUIRED fields supplied (nodes 1-4), autoplay off:
+        </h2>
+        <WYMDCarousel data={carouselItemsMinimal}/>
+    </div>
+    
+```

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

@@ -0,0 +1,278 @@
+import styled from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+import Text from '../../Atoms/Text/Text';
+
+// Duration in seconds
+const animationSpeed = 0.5;
+
+const ImageWrapper = styled.div`
+  width: 33%;
+  display: block;
+  padding: 7%;
+  border: 2px dashed #89888b;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    width: 200%;
+    right: calc(-200% - 8px);
+    height: 2px;
+    border-bottom: 2px dashed #89888b;
+  }
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    width: 50%;
+    padding: 9%;
+    &:after {
+      width: 100%;
+      right: calc(-100% - 8px);
+    }
+  }
+`;
+
+const AmountWrapper = styled.div`
+  padding: ${spacing('m')} 0;
+  width: 75%;
+  margin: 0 auto;
+`;
+
+const CopyWrapper = styled.div`
+  padding: ${spacing('sm')} 0;
+  width: 75%;
+  margin: 0 auto;
+`;
+
+const Heading = styled(Text)`
+  width: 75%;
+  margin: 0 auto;
+  
+  // To override pre-existing first-child rule
+  &:first-child {
+    margin-bottom: ${spacing('l')};
+    text-align: center;
+    font-size: 20px;
+    line-height: 23px;
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+      font-size: 21px;
+      line-height: 23px;
+    }
+  }
+`;
+
+const PeopleHelpedText = styled(Text)`
+  margin-bottom: ${spacing('l')};
+  text-align: center;
+  font-size: 40px;
+  line-height: 40px;
+
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    font-size: 60px;
+    line-height: 60px;
+  }
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    font-size: 75px;
+    line-height: 78px;
+  }
+`;
+
+const Including = styled(Text)`
+  margin-bottom: 0;
+  text-align: center;
+  font-size: 14px;
+  line-height: 17px;
+
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    font-size: 17px;
+    line-height: 19px;
+  }
+`;
+
+// Unfortunately having to target plugin-created markup ye olde fashioned way:
+const CarouselWrapper = styled.div`
+  height: 100%;
+  padding: ${spacing('m')};
+
+  .carousel {
+    position: relative;
+    margin: 0 auto;
+    padding-top: ${spacing('l')};
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+      padding-top: ${spacing('lg')};
+    }
+  
+    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;
+          
+      &:before {
+        content: '';
+        // Do we need some sort of icon here to show it's a button?
+        // background: transparent url(/images/payin/CR__Chevron_D--white.svg) no-repeat;
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%) rotate(90deg);
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+        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));
+      }
+
+
+      &:hover {
+        // TO-DO: accessibiity?
+        // border: 1px solid black;
+        &:after {
+          opacity: 0.5;
+        }
+      }
+
+      @media ${({ theme }) => theme.breakpoint('medium')} {
+        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: linear-gradient(270deg, rgba(255, 255, 255, 0.95),
+        rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+      }
+    }
+      
+    .wymd-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 {
+        .image-wrapper:after {
+          content: none;
+        }
+      }
+      
+      .carousel__slide {
+        padding-bottom: ${props => props.mobileHeight}px !important;
+
+        @media ${({ theme }) => theme.breakpoint('medium')} {
+          padding-bottom: ${props => props.desktopHeight}px !important;
+
+          // All slides:
+          .carousel__inner-slide {
+            // All 'ImageWrappers':
+            > div:first-child {
+              transition: transform ${animationSpeed}s ease;
+              transform: scale(0.5);
+              
+              &:after {
+                transition: transform ${animationSpeed}s ease,
+                width ${animationSpeed}s ease,
+                right ${animationSpeed}s ease;
+                right: calc(-300% - 6px);
+                transform: scale(1);
+                width: 300%;
+              }
+            }
+          }
+
+          // Our 'first' slide of the three:
+          &.carousel__slide--visible {
+            .carousel__inner-slide {
+              > div:first-child {
+                &:after {
+                  right: calc(-250% - 6px);
+                  transform: scale(1);
+                  width: 250%;
+                }
+              }
+            }
+
+
+            // 2nd and 3rd:
+            + .carousel__slide--visible {
+              .carousel__inner-slide {
+                > div:first-child {
+                  transform: scale(1);
+                  &:after {
+                    right: calc(-187% - 6px);
+                    transform: scale(0.5);
+                    width: 250%;
+                  }
+                }
+              }
+
+              // Resets the 3rd slide:
+              + .carousel__slide--visible {
+                > div > div:first-child {
+                  transform: scale(0.5);
+                  &:after {
+                    right: calc(-250% - 6px);
+                    transform: scale(1);
+                    width: 250%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      
+        .carousel__inner-slide {
+          text-align: center;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          flex-direction: column;
+        }
+      }
+    }
+  }
+`;
+
+export {
+  CarouselWrapper, ImageWrapper, AmountWrapper, CopyWrapper, Heading, PeopleHelpedText, Including
+};