From 01f64dfcf89a44e41754f7669d46830af942b826 Mon Sep 17 00:00:00 2001
From: Swaraj Patel <swarajpatel37@gmail.com>
Date: Fri, 30 Oct 2020 13:52:44 -0700
Subject: [PATCH] feat(Carousel): Add dark prop

---
 docs/lib/Components/CarouselPage.js |  2 ++
 src/Carousel.js                     |  7 +++++--
 src/__tests__/Carousel.spec.js      | 32 +++++++++++++++++++++++++++++
 types/lib/Carousel.d.ts             |  1 +
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/docs/lib/Components/CarouselPage.js b/docs/lib/Components/CarouselPage.js
index 9c68dadb9..2c972a1ca 100644
--- a/docs/lib/Components/CarouselPage.js
+++ b/docs/lib/Components/CarouselPage.js
@@ -57,6 +57,8 @@ export default class CarouselPage extends React.Component {
   mouseLeave: PropTypes.func,
   // controls whether the slide animation on the Carousel works or not
   slide: PropTypes.bool,
+  // make the controls, indicators and captions dark on the Carousel
+  dark: PropTypes.bool, 
   cssModule: PropTypes.object,
   // controls whether the touch gestures on the Carousel works or not (default: true)
   enableTouch: PropTypes.bool,
diff --git a/src/Carousel.js b/src/Carousel.js
index 72b1bb108..abfaca045 100644
--- a/src/Carousel.js
+++ b/src/Carousel.js
@@ -166,11 +166,12 @@ class Carousel extends React.Component {
   }
 
   render() {
-    const { cssModule, slide, className } = this.props;
+    const { cssModule, slide, className, dark } = this.props;
     const outerClasses = mapToCssModules(classNames(
       className,
       'carousel',
-      slide && 'slide'
+      slide && 'slide',
+      dark && 'carousel-dark'
     ), cssModule);
 
     const innerClasses = mapToCssModules(classNames(
@@ -260,6 +261,8 @@ Carousel.propTypes = {
   mouseLeave: PropTypes.func,
   // controls whether the slide animation on the Carousel works or not
   slide: PropTypes.bool,
+  // make the controls, indicators and captions dark on the Carousel
+  dark: PropTypes.bool,
   cssModule: PropTypes.object,
   className: PropTypes.string,
   enableTouch: PropTypes.bool,
diff --git a/src/__tests__/Carousel.spec.js b/src/__tests__/Carousel.spec.js
index 6ea8a46d6..067eb1c2a 100644
--- a/src/__tests__/Carousel.spec.js
+++ b/src/__tests__/Carousel.spec.js
@@ -259,6 +259,38 @@ describe('Carousel', () => {
       expect(wrapper.find(CarouselControl).length).toEqual(2);
       expect(wrapper.find(CarouselIndicators).length).toEqual(1);
     });
+
+    it('should not have the class "carousel-dark" by default', () => {
+      const slides = items.map((item, idx) => {
+        return (
+          <CarouselItem key={idx} />
+        );
+      });
+
+      const wrapper = mount(
+        <Carousel activeIndex={0} next={() => { }} previous={() => { }}>
+          {slides}
+        </Carousel>
+      );
+
+      expect(wrapper.find('.carousel-dark').length).toBe(0);
+    });
+
+    it('should have the class "carousel-dark" when dark prop is true', () => {
+      const slides = items.map((item, idx) => {
+        return (
+          <CarouselItem key={idx} />
+        );
+      });
+
+      const wrapper = mount(
+        <Carousel dark activeIndex={0} next={() => { }} previous={() => { }}>
+          {slides}
+        </Carousel>
+      );
+
+      expect(wrapper.find('.carousel-dark').length).toBe(1);
+    });
   });
 
   describe('carouseling', () => {
diff --git a/types/lib/Carousel.d.ts b/types/lib/Carousel.d.ts
index 67762519b..e9835bf25 100644
--- a/types/lib/Carousel.d.ts
+++ b/types/lib/Carousel.d.ts
@@ -11,6 +11,7 @@ interface CommonCarouselProps extends React.HTMLAttributes<HTMLElement> {
   mouseEnter?: () => void;
   mouseExit?: () => void;
   slide?: boolean;
+  dark?: boolean;
   cssModule?: CSSModule;
   enableTouch?: boolean;
 }