Carousel item href (#971)

* Add href attribute to carousel items * Add test for carousel item href
facultyai · Sep 4, 2023 · 34b033f · 34b033f
1 parent 696f5fb
commit 34b033f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js
@@ -28,8 +28,14 @@ const Carousel = props => {
         ? item.imgClassName
         : 'd-block w-100';
 
+    const additionalProps = item.href ? {href: item.href} : {};
+
     return (
-      <RBCarousel.Item key={item.key}>
+      <RBCarousel.Item
+        key={item.key}
+        as={item.href ? 'a' : 'div'}
+        {...additionalProps}
+      >
         <img
           src={item.src}
           className={item.img_class_name || item.imgClassName}
@@ -148,7 +154,11 @@ Carousel.propTypes = {
        *
        * The class name for the header and caption container
        */
-      captionClassName: PropTypes.string
+      captionClassName: PropTypes.string,
+      /**
+       * Optional hyperlink to add to the item.
+       */
+      href: PropTypes.string
     })
   ).isRequired,
 

diff --git a/src/components/carousel/__tests__/Carousel.test.js b/src/components/carousel/__tests__/Carousel.test.js
@@ -48,7 +48,7 @@ describe('Carousel', () => {
 
   test('tracks most recently clicked slide with "active_index" prop', () => {
     const mockSetProps = jest.fn();
-    const {container, getByText, rerender} = render(
+    const {container} = render(
       <Carousel items={slides} setProps={mockSetProps} active_index={0} />
     );
 
@@ -63,4 +63,18 @@ describe('Carousel', () => {
     expect(mockSetProps.mock.calls).toHaveLength(1);
     expect(mockSetProps.mock.calls[0][0].active_index).toBe(1);
   });
+
+  test('carousel item accepts href', () => {
+    const linkedSlides = [
+      {key: '0', src: '', alt: 'z', href: '/test'},
+      ...slides
+    ];
+
+    const carousel = render(<Carousel items={linkedSlides} />);
+    const {firstChild: carouselItem} = carousel.container.querySelector(
+      '.carousel-inner'
+    );
+    expect(carouselItem).toHaveAttribute('href', '/test');
+    expect(carouselItem.tagName.toLowerCase()).toEqual('a');
+  });
 });