support target for carousel image click (#975)

* support target for carousel image click

* add tests for carousel target property

---------

Co-authored-by: luowf <[email protected]>

Author: mapix

src/components/carousel/Carousel.js

@@ -32,7 +32,11 @@ const Carousel = props => {
 
     const useLink = item.href && true;
     const additionalProps = useLink
-      ? {href: item.href, external_link: item.external_link}
+      ? {
+          href: item.href,
+          external_link: item.external_link,
+          target: item.target || '_self'
+        }
       : {};
 
     return (
@@ -167,6 +171,10 @@ Carousel.propTypes = {
        * with the external_link argument.
        */
       href: PropTypes.string,
+      /**
+       * Optional target attribute for the link. Only applies if `href` is set, default `_self`.
+       */
+      target: PropTypes.string,
       /**
        * If true, the browser will treat this as an external link,
        * forcing a page refresh at the new location. If false,

src/components/carousel/__tests__/Carousel.test.js

@@ -77,4 +77,45 @@ describe('Carousel', () => {
     expect(carouselItem).toHaveAttribute('href', '/test');
     expect(carouselItem.tagName.toLowerCase()).toEqual('a');
   });
+
+  test('carousel item external target', () => {
+    const linkedSlides = [
+      {
+        key: '0',
+        src: '',
+        alt: 'z',
+        href: 'http://www.example.com',
+        target: '_blank'
+      },
+      {
+        key: '1',
+        src: '',
+        alt: 'z',
+        href: '/test',
+        target: '_self',
+        external_link: true
+      },
+      {
+        key: '2',
+        src: '',
+        alt: 'z',
+        href: 'http://www.example.com'
+      },
+      ...slides
+    ];
+
+    const carousel = render(<Carousel items={linkedSlides} />);
+    const carouselItems = carousel.container.querySelectorAll('.carousel-item');
+    const blankTargetItem = carouselItems[0];
+    expect(blankTargetItem).toHaveAttribute('target', '_blank');
+    expect(blankTargetItem.tagName.toLowerCase()).toEqual('a');
+
+    const selfTargetItem = carouselItems[1];
+    expect(selfTargetItem).toHaveAttribute('target', '_self');
+    expect(selfTargetItem.tagName.toLowerCase()).toEqual('a');
+
+    const defaultTargetItem = carouselItems[2];
+    expect(defaultTargetItem).toHaveAttribute('target', '_self');
+    expect(defaultTargetItem.tagName.toLowerCase()).toEqual('a');
+  });
 });