fix(carousel): update carousel design (#308)

* fix(carousel): update carousel design

#287

* feat(carousel): add pauseOnHover

Author: rishichawda

doc/package-lock.json

@@ -33,6 +33,12 @@ export const componentData = {
       type: 'Boolean',
       defaultValue: 'true',
       description: 'Set boolean for showing / hiding left and right controls.',
+    },
+    {
+      prop: 'pauseOnHover',
+      type: 'Boolean',
+      defaultValue: 'true',
+      description: 'Set boolean to pause the carousel animation on mouse hover.',
     }
   ],  
   themesData: [

doc/src/components/common/componentData/Carousel/index.js

@@ -18,13 +18,25 @@ class Carousel extends React.Component {
   }
 
   setActiveItem = (active) => {
-    const { data } = this.props;
+    const { data, pauseOnHover } = this.props;
     clearInterval(this.animation);
     this.setState({
       active: (data.length + active) % data.length,
-    }, this.animate);
+    }, () => {
+      if (!pauseOnHover) {
+        this.animate();
+      }
+    });
   };
 
+  pauseAnimation = () => {
+    clearInterval(this.animation);
+  }
+
+  resumeAnimation = () => {
+    this.animate();
+  }
+
   animate = () => {
     const { data, interval } = this.props;
     this.animation = setInterval(() => {
@@ -35,10 +47,16 @@ class Carousel extends React.Component {
   }
 
   render() {
-    const { theme, data, controls } = this.props;
+    const {
+      theme, data, controls, pauseOnHover,
+    } = this.props;
     const { active } = this.state;
     return (
-      <div className={theme['carousel-container']}>
+      <div
+        className={theme['carousel-container']}
+        onMouseEnter={pauseOnHover ? this.pauseAnimation : undefined}
+        onMouseLeave={pauseOnHover ? this.resumeAnimation : undefined}
+      >
         {/* eslint-disable jsx-a11y/click-events-have-key-events */}
         {/* eslint-disable jsx-a11y/no-static-element-interactions */}
         {
@@ -78,12 +96,14 @@ Carousel.propTypes = {
   theme: PropTypes.oneOfType([PropTypes.object]),
   interval: PropTypes.number,
   controls: PropTypes.bool,
+  pauseOnHover: PropTypes.bool,
 };
 
 Carousel.defaultProps = {
   interval: 4000,
   theme: defaultTheme,
   controls: true,
+  pauseOnHover: true,
 };
 
 export default themr('CBCarousel', defaultTheme)(Carousel);

lib/carousel/index.js

@@ -8,6 +8,7 @@ A basic Carousel component.
 | `data` | `Array` |   | An array of image urls or custom children. ( `Required` ) |
 | `interval` | `Number` | `4000` | Set an interval ( in ms ) for switching between carousel items. |
 | `controls` | `Boolean` | `true` | Set boolean for showing / hiding left and right controls. |
+| `pauseOnHover` | `Boolean` | `true` | Set boolean to pause the carousel animation on mouse hover. |
 
 ### Theme
 

lib/carousel/readMe.md

@@ -65,4 +65,23 @@ describe('Carousel Render tests', () => {
       done();
     }, 4000 * data.length);
   });
+
+  it('Successfully pauses carousel animation on hover and resume after leaving the carousel area.', () => {
+    const expectedValueBeforeChange = data[0];
+    const expectedValueAfterChange = data[1];
+
+    const simulatedValue = () => wrappedComponent.find('.current').props().children.props.src;
+
+    expect(simulatedValue()).to.equal(expectedValueBeforeChange);
+    wrappedComponent.children().childAt(0).simulate('mouseEnter');
+    setTimeout(() => {
+      expect(simulatedValue()).to.equal(expectedValueBeforeChange);
+      wrappedComponent.children().childAt(0).simulate('mouseLeave');
+      setTimeout(() => {
+        expect(simulatedValue()).to.equal(expectedValueAfterChange);
+        done();
+      }, 4000);
+    }, 6000);
+  });
+
 });

lib/carousel/tests/render.test.js

@@ -1,68 +1,95 @@
 :local(.carousel-container) {
-  position: relative;
-  width: 100%;
-  height: 250px;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 250px;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    &:hover {
+        &::before,
+        &::after {
+            opacity: 1;
+        }
+    }
+    &::before,
+    &::after {
+        content: '';
+        display: block;
+        height: 100%;
+        width: 9%;
+        position: absolute;
+        transition: opacity 1s ease;
+        opacity: 0;
+    }
+    &::before {
+        left: 0;
+        background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, 70%, transparent);
+        z-index: 1;
+    }
+    &::after {
+        right: 0;
+        background-image: linear-gradient(to left, rgba(0,0,0,0.5) 0, 70%, transparent);
+    }
 }
 
 :local(.carousel-item) {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  &.active {
-    opacity: 0;
-    transition: 1.5s ease-in-out;
-    position: absolute;
-    left: 0;
-  }
-  &.current {
-    opacity: 1;
-    transition: 1.5s ease-in-out;
-  }
-  & > img {
-    height: 100%;
+    display: flex;
     width: 100%;
-  }
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    &.active {
+        opacity: 0;
+        transition: 1.5s ease-in-out;
+        position: absolute;
+        left: 0;
+    }
+    &.current {
+        opacity: 1;
+        transition: 1.5s ease-in-out;
+    }
+    &>img {
+        height: 100%;
+        width: 100%;
+    }
 }
 
 :local(.dot) {
-  position: absolute;
-  bottom: 10%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  & > span {
-    cursor: pointer;
-    height: 5px;
-    width: 5px;
-    margin: 2px;
-    border: 1px solid white;
-    border-radius: 50%;
-    background-color: transparent;
-    transition: background-color 1.5s ease-in-out;
-    &.active {
-      background-color: white;
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    &>span {
+        cursor: pointer;
+        height: 5px;
+        width: 5px;
+        margin: 2px;
+        border: 1px solid white;
+        border-radius: 50%;
+        background-color: transparent;
+        transition: background-color 1.5s ease-in-out;
+        &.active {
+            background-color: white;
+        }
     }
-  }
 }
 
 :local(.left-control),
 :local(.right-control) {
-  z-index: 1;
-  font-size: 2rem;
-  color: white;
-  position: absolute;
-  top: 45%;
-  align-self: center;
-  cursor: pointer;
+    z-index: 1;
+    font-size: 2rem;
+    color: white;
+    position: absolute;
+    top: 45%;
+    align-self: center;
+    cursor: pointer;
 }
+
 :local(.left-control) {
-  left: 2%;
+    left: 2%;
 }
+
 :local(.right-control) {
-  right: 2%;
-}
+    right: 2%;
+}