feat(CarouselItem): support tag prop on carousel item (#681)

gergely-nagy · TheSharpieOne · commit 1e70e6456236 · 2017-11-13T15:10:51.000-05:00
diff --git a/docs/lib/Components/CarouselPage.js b/docs/lib/Components/CarouselPage.js
@@ -23,7 +23,7 @@ export default class CarouselPage extends React.Component {
           </PrismCode>
         </pre>
 
-        <h3>Properties</h3>
+        <h3>Carousel Properties</h3>
         <pre>
           <PrismCode className="language-jsx">
 {`Carousel.propTypes = {
@@ -60,6 +60,59 @@ export default class CarouselPage extends React.Component {
           </PrismCode>
         </pre>
 
+        <h3>CarouselItem Properties</h3>
+        <pre>
+          <PrismCode className="language-jsx">
+{`CarouselItem.propTypes = {
+  ...Transition.propTypes,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  in: PropTypes.bool,
+  src: PropTypes.string,
+  altText: PropTypes.string,
+  cssModule: PropTypes.object,
+  children: PropTypes.shape({
+    type: PropTypes.oneOf([CarouselCaption]),
+  }),
+  slide: PropTypes.bool,
+};`}
+          </PrismCode>
+        </pre>
+
+        <h3>CarouselControl Properties</h3>
+        <pre>
+          <PrismCode className="language-jsx">
+{`CarouselControl.propTypes = {
+  direction: PropTypes.oneOf(['prev', 'next']).isRequired,
+  onClickHandler: PropTypes.func.isRequired,
+  cssModule: PropTypes.object,
+  directionText: PropTypes.string
+};`}
+          </PrismCode>
+        </pre>
+
+        <h3>CarouselIndicators Properties</h3>
+        <pre>
+          <PrismCode className="language-jsx">
+{`CarouselIndicators.propTypes = {
+  items: PropTypes.array.isRequired,
+  activeIndex: PropTypes.number.isRequired,
+  cssModule: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};`}
+          </PrismCode>
+        </pre>
+
+        <h3>CarouselCaption Properties</h3>
+        <pre>
+          <PrismCode className="language-jsx">
+{`CarouselCaption.propTypes = {
+  captionHeader: PropTypes.string,
+  captionText: PropTypes.string.isRequired,
+  cssModule: PropTypes.object
+};`}
+          </PrismCode>
+        </pre>
+
         <h3>Uncontrolled Carousel</h3>
         <p>
           For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledCarousel</code> does not require <code>previous</code>, <code>next</code> nor <code>activeIndex</code> props to work.
diff --git a/src/CarouselItem.js b/src/CarouselItem.js
@@ -50,7 +50,7 @@ class CarouselItem extends React.Component {
   }
 
   render() {
-    const { src, altText, in: isIn, children, cssModule, slide, ...transitionProps } = this.props;
+    const { src, altText, in: isIn, children, cssModule, slide, tag: Tag, ...transitionProps } = this.props;
     const imgClasses = mapToCssModules(classNames(
       'd-block',
       'img-fluid'
@@ -85,7 +85,7 @@ class CarouselItem extends React.Component {
 
           return (
             <div className={itemClasses}>
-              <img className={imgClasses} src={src} alt={altText} />
+              <Tag className={imgClasses} src={src} alt={altText} />
               {children}
             </div>
           );
@@ -97,8 +97,9 @@ class CarouselItem extends React.Component {
 
 CarouselItem.propTypes = {
   ...Transition.propTypes,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   in: PropTypes.bool,
-  src: PropTypes.string.isRequired,
+  src: PropTypes.string,
   altText: PropTypes.string,
   cssModule: PropTypes.object,
   children: PropTypes.shape({
@@ -109,6 +110,7 @@ CarouselItem.propTypes = {
 
 CarouselItem.defaultProps = {
   ...Transition.defaultProps,
+  tag: 'img',
   timeout: TransitionTimeouts.Carousel,
   slide: true,
 };
diff --git a/src/__tests__/Carousel.spec.js b/src/__tests__/Carousel.spec.js
@@ -30,11 +30,16 @@ describe('Carousel', () => {
   });
 
   describe('items', () => {
-    it('should render an img tag', () => {
+    it('should render an img tag by default', () => {
       const wrapper = mount(<CarouselItem src={items[0].src} altText={items[0].src} />);
       expect(wrapper.find('img').length).toEqual(1);
     });
 
+    it('should render custom tag', () => {
+      const wrapper = mount(<CarouselItem tag="image" />);
+      expect(wrapper.find('image').length).toBe(1);
+    });
+
     it('should render a caption if one is passed in', () => {
       const wrapper = mount(
         <CarouselItem src={items[0].src} altText={items[0].src}>
