feat(Carousel): Add dark prop

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,

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,

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', () => {

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;
 }