diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js index 25b81228..39fec3c2 100644 --- a/src/components/carousel/Carousel.js +++ b/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, diff --git a/src/components/carousel/__tests__/Carousel.test.js b/src/components/carousel/__tests__/Carousel.test.js index 8b237715..a53b72a3 100644 --- a/src/components/carousel/__tests__/Carousel.test.js +++ b/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(); + 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'); + }); });