richie-education 2.34.1-dev47 → 2.34.1-dev51

package/js/pages/DashboardCreditCardsManagement/index.spec.tsx

@@ -134,13 +134,14 @@ describe('<DashboardCreditCardsManagement/>', () => {
   });
 
   it('renders the correct label for an expiration date that will soon expire', async () => {
-    const refDate = new Date();
-    refDate.setMonth(refDate.getMonth() + 1);
-    refDate.setDate(1);
-    const futureLessThan3Months = faker.date.future({ years: 2.99 / 12, refDate });
+    const now = new Date();
+    const expirationDate = faker.date.between({
+      from: now,
+      to: new Date(now.getFullYear(), now.getMonth() + 4, 0, 23, 59, 59),
+    });
     const creditCard: CreditCard = CreditCardFactory({
-      expiration_month: futureLessThan3Months.getMonth() + 1,
-      expiration_year: futureLessThan3Months.getFullYear(),
+      expiration_month: expirationDate.getMonth() + 1,
+      expiration_year: expirationDate.getFullYear(),
     }).one();
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
@@ -151,11 +152,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
     const element = await screen.findByText(
       'Expires on ' +
-        (futureLessThan3Months.getMonth() + 1).toLocaleString(undefined, {
+        (expirationDate.getMonth() + 1).toLocaleString(undefined, {
           minimumIntegerDigits: 2,
         }) +
         '/' +
-        futureLessThan3Months.getFullYear(),
+        expirationDate.getFullYear(),
     );
     expect(element.classList).toContain('dashboard-credit-card__expiration');
     expect(element.classList).not.toContain('dashboard-credit-card__expiration--expired');

package/js/widgets/Slider/components/Slide.tsx

@@ -0,0 +1,20 @@
+import { type Slide as SlideType } from '../types';
+
+const Slide = ({ slide }: { slide: SlideType }) => (
+  <div className="slider__slide">
+    {slide.link_url ? (
+      <a
+        href={slide.link_url}
+        target={slide.link_open_blank ? '_blank' : '_self'}
+        rel="noopener noreferrer"
+        title={`Go to ${slide.link_url}`}
+      >
+        <img src={slide.image} alt={slide.title} loading="lazy" />
+      </a>
+    ) : (
+      <img src={slide.image} alt={slide.title} loading="lazy" />
+    )}
+  </div>
+);
+
+export default Slide;

package/js/widgets/Slider/components/SlidePanel.tsx

@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Slide } from '../types';
+
+const messages = defineMessages({
+  goToSlide: {
+    id: 'widgets.Slider.components.SlidePanel.goToSlide',
+    defaultMessage: 'Go to slide {slideIndex}',
+    description: 'Aria label for the bullet buttons to go to a given slide.',
+  },
+  slideAriaLabel: {
+    id: 'widgets.Slider.components.SlidePanel.slideAriaLabel',
+    defaultMessage: 'Slide {slideNumber}: {slideTitle}',
+    description: 'Aria label for the current slide.',
+  },
+});
+
+type SlidePanelProps = {
+  slides: readonly Slide[];
+  activeSlideIndex: number;
+  isTransitioning: boolean;
+  onBulletClick: (index: number) => void;
+};
+
+/**
+ * This component is used to display the panel for the slideshow.
+ * It renders the textual content of the current slide and also the bullet points.
+ */
+const SlidePanel = ({
+  slides,
+  activeSlideIndex,
+  onBulletClick,
+  isTransitioning,
+}: SlidePanelProps) => {
+  const intl = useIntl();
+  const hasSlideContent = slides.some((slide) => slide.content);
+
+  return (
+    <section className="slider__panel" aria-label="Slide information">
+      <div
+        className={classNames('slide__content', {
+          'slide__content--transitioning': isTransitioning,
+        })}
+        role="group"
+        aria-roledescription="slide"
+        aria-label={intl.formatMessage(messages.slideAriaLabel, {
+          slideNumber: activeSlideIndex + 1,
+          slideTitle: slides[activeSlideIndex].title,
+        })}
+      >
+        <strong className="slide__title">
+          <span>{slides[activeSlideIndex].title}</span>
+        </strong>
+        {hasSlideContent && (
+          <div
+            className="slide__description"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: slides[activeSlideIndex].content }}
+          />
+        )}
+      </div>
+      <div className="slider__bullet-list" role="tablist" aria-label="Slide navigation">
+        {slides.map((slide, index) => (
+          <button
+            key={slide.pk}
+            className={classNames('slider__bullet-item', {
+              'slider__bullet-item--active': activeSlideIndex === index,
+            })}
+            onClick={() => onBulletClick(index)}
+            role="tab"
+            aria-selected={activeSlideIndex === index}
+          >
+            <span className="offscreen">
+              <FormattedMessage {...messages.goToSlide} values={{ slideIndex: index + 1 }} />
+            </span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default SlidePanel;

package/js/widgets/Slider/components/Slideshow.tsx

@@ -0,0 +1,58 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { Slide as SlideType } from '../types';
+import Slide from './Slide';
+
+const messages = defineMessages({
+  nextSlide: {
+    id: 'widgets.Slider.components.Slideshow.nextSlide',
+    defaultMessage: 'Next slide',
+    description: 'Aria label to navigate to the next slide.',
+  },
+  previousSlide: {
+    id: 'widgets.Slider.components.Slideshow.previousSlide',
+    defaultMessage: 'Previous slide',
+    description: 'Aria label to navigate to the previous slide.',
+  },
+});
+type SlideshowProps = {
+  slides: readonly SlideType[];
+  onNextSlide: () => void;
+  onPreviousSlide: () => void;
+};
+
+/**
+ * This component is used to display the slideshow.
+ * It renders the slides and the navigation buttons.
+ */
+const Slideshow = ({ slides, onNextSlide, onPreviousSlide }: SlideshowProps) => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <div className="slider__slideshow">
+        {slides.map((slide) => (
+          <Slide key={slide.pk} slide={slide} />
+        ))}
+      </div>
+      <div className="slider__slideshow-overlay">
+        <button
+          className="slider__navigation-button"
+          onClick={onPreviousSlide}
+          aria-label={intl.formatMessage(messages.previousSlide)}
+        >
+          <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} aria-hidden="true" />
+        </button>
+        <button
+          className="slider__navigation-button"
+          onClick={onNextSlide}
+          aria-label={intl.formatMessage(messages.nextSlide)}
+        >
+          <Icon name={IconTypeEnum.CHEVRON_RIGHT_OUTLINE} aria-hidden="true" />
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default Slideshow;

package/js/widgets/Slider/index.spec.tsx

@@ -0,0 +1,167 @@
+import { screen, fireEvent, render, within } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Slide } from './types';
+import Slider from '.';
+
+// Mock the embla-carousel-react hook
+jest.mock('embla-carousel-react', () => {
+  const mockEmblaApi = {
+    scrollTo: jest.fn(),
+    scrollNext: jest.fn(),
+    scrollPrev: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+    selectedScrollSnap: jest.fn(),
+  };
+
+  return () => [
+    jest.fn(), // ref
+    mockEmblaApi,
+  ];
+});
+
+const mockUseEmblaCarousel = useEmblaCarousel as jest.Mocked<typeof useEmblaCarousel>;
+
+describe('<Slider />', () => {
+  const mockSlides: Slide[] = [
+    {
+      pk: '1',
+      title: 'Slide 1',
+      content: 'Content 1',
+      image: 'image1.jpg',
+      link_url: 'https://example.com/1',
+      link_open_blank: false,
+    },
+    {
+      pk: '2',
+      title: 'Slide 2',
+      content: 'Content 2',
+      image: 'image2.jpg',
+      link_url: 'https://example.com/2',
+      link_open_blank: false,
+    },
+    {
+      pk: '3',
+      title: 'Slide 3',
+      content: 'Content 3',
+      image: 'image3.jpg',
+      link_url: 'https://example.com/3',
+      link_open_blank: false,
+    },
+  ];
+
+  const defaultProps = {
+    pk: '1',
+    title: 'Test Slider',
+    slides: mockSlides,
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders the slider with all slides', () => {
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    // Check if all slides are rendered
+    mockSlides.forEach((slide) => {
+      expect(screen.getByRole('img', { name: slide.title })).toBeInTheDocument();
+      // Check if the link is rendered
+      const link = screen.queryByRole('link', { name: slide.title });
+      if (slide.link_url) {
+        expect(link).toHaveAttribute('href', slide.link_url);
+        expect(link).toBeInTheDocument();
+      } else {
+        expect(link).not.toBeInTheDocument();
+      }
+    });
+
+    // Check if navigation elements are present
+    expect(screen.getByRole('button', { name: 'Previous slide' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next slide' })).toBeInTheDocument();
+
+    // Only the active slide content should be visible
+    const activeSlide = screen.getByRole('group', { name: /Slide 1:.*/ });
+    expect(activeSlide).toBeInTheDocument();
+    within(activeSlide).getByText(mockSlides[0].title);
+    within(activeSlide).getByText(mockSlides[0].content);
+    expect(screen.queryByRole('group', { name: /Slide 2:.*/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('group', { name: /Slide 3:.*/ })).not.toBeInTheDocument();
+  });
+
+  it('handles keyboard navigation', () => {
+    const mockEmblaApi = mockUseEmblaCarousel()[1]!;
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    const slider = screen.getByRole('button', { name: /test slider/i });
+
+    // Test arrow key navigation
+    fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+    expect(mockEmblaApi.scrollPrev).toHaveBeenNthCalledWith(1);
+
+    fireEvent.keyDown(slider, { key: 'ArrowRight' });
+    expect(mockEmblaApi.scrollNext).toHaveBeenNthCalledWith(1);
+
+    // Test home/end key navigation
+    fireEvent.keyDown(slider, { key: 'Home' });
+    expect(mockEmblaApi.scrollTo).toHaveBeenNthCalledWith(1, 0);
+
+    fireEvent.keyDown(slider, { key: 'End' });
+    expect(mockEmblaApi.scrollTo).toHaveBeenNthCalledWith(2, mockSlides.length - 1);
+  });
+
+  it('provides accessible navigation controls', () => {
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    // Check if navigation buttons are properly labeled
+    expect(screen.getByRole('button', { name: 'Previous slide' })).toHaveAttribute(
+      'aria-label',
+      'Previous slide',
+    );
+    expect(screen.getByRole('button', { name: 'Next slide' })).toHaveAttribute(
+      'aria-label',
+      'Next slide',
+    );
+
+    // Check if slider has proper ARIA attributes
+    const slider = screen.getByRole('button', { name: defaultProps.title });
+    expect(slider).toHaveAttribute('aria-roledescription', 'carousel');
+    const presentation = screen.getByRole('presentation');
+    expect(presentation).toBeInTheDocument();
+    expect(presentation).toHaveAttribute('aria-live', 'polite');
+    expect(presentation).toHaveAttribute('aria-atomic', 'true');
+    expect(presentation).toHaveTextContent(/Slide 1 of 3:.*/);
+  });
+
+  it('renders bullets navigation', () => {
+    render(
+      <IntlProvider locale="en">
+        <Slider {...defaultProps} />
+      </IntlProvider>,
+    );
+
+    const bullets = screen.getAllByRole('tab', { name: /Go to slide [1-3]{1}/ });
+    expect(bullets).toHaveLength(mockSlides.length);
+
+    expect(bullets[0]).toHaveAttribute('aria-selected', 'true');
+    expect(bullets[1]).toHaveAttribute('aria-selected', 'false');
+    expect(bullets[2]).toHaveAttribute('aria-selected', 'false');
+
+    // Click the second bullet
+    fireEvent.click(bullets[1]);
+    expect(mockUseEmblaCarousel()[1]!.scrollTo).toHaveBeenCalledWith(1);
+  });
+});

package/js/widgets/Slider/index.tsx

@@ -0,0 +1,119 @@
+import useEmblaCarousel from 'embla-carousel-react';
+import { useCallback, useEffect, useState } from 'react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Slide as SlideType } from './types';
+import SlidePanel from './components/SlidePanel';
+import Slideshow from './components/Slideshow';
+
+const messages = defineMessages({
+  sliderSummary: {
+    id: 'widgets.Slider.sliderSummary',
+    defaultMessage: 'Slide {slideNumber} of {totalSlides}: {slideTitle}',
+    description: 'Aria live label which summarizes the slider state.',
+  },
+});
+
+type SliderProps = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  pk: string;
+  title: string;
+  slides: readonly SlideType[];
+};
+
+const Slider = ({ slides, title }: SliderProps) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [WheelGesturesPlugin()]);
+  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  const handleBulletClick = useCallback(
+    (index: number) => {
+      setIsTransitioning(true);
+      emblaApi?.scrollTo(index);
+    },
+    [emblaApi],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (!emblaApi) return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          emblaApi.scrollPrev();
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          emblaApi.scrollNext();
+          break;
+        case 'Home':
+          event.preventDefault();
+          emblaApi.scrollTo(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          emblaApi.scrollTo(slides.length - 1);
+          break;
+        default:
+          break;
+      }
+    },
+    [emblaApi, slides.length],
+  );
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    const handleSlidesChanged = (event: any) => {
+      setIsTransitioning(true);
+      setActiveSlideIndex(event.selectedScrollSnap());
+    };
+    emblaApi.on('select', handleSlidesChanged);
+
+    return () => {
+      emblaApi.off('select', handleSlidesChanged);
+    };
+  }, [emblaApi]);
+
+  useEffect(() => {
+    // Remove the transitioning class immediately after a transitioned render
+    setIsTransitioning(false);
+  }, [activeSlideIndex]);
+
+  return (
+    <div
+      className="slider"
+      ref={emblaRef}
+      aria-roledescription="carousel"
+      aria-label={title}
+      role="button"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+    >
+      <Slideshow
+        slides={slides}
+        onNextSlide={() => emblaApi?.scrollNext()}
+        onPreviousSlide={() => emblaApi?.scrollPrev()}
+      />
+      <SlidePanel
+        slides={slides}
+        activeSlideIndex={activeSlideIndex}
+        onBulletClick={handleBulletClick}
+        isTransitioning={isTransitioning}
+      />
+      <span className="offscreen" role="presentation" aria-live="polite" aria-atomic="true">
+        <FormattedMessage
+          {...messages.sliderSummary}
+          values={{
+            slideNumber: activeSlideIndex + 1,
+            totalSlides: slides.length,
+            slideTitle: slides[activeSlideIndex].title,
+          }}
+        />
+      </span>
+    </div>
+  );
+};
+
+export default Slider;

package/js/widgets/Slider/types/index.ts

@@ -0,0 +1,8 @@
+export type Slide = {
+  pk: string;
+  title: string;
+  image: string;
+  content: string;
+  link_url: string;
+  link_open_blank: boolean;
+};

package/js/widgets/index.tsx

@@ -18,6 +18,7 @@ const Search = lazy(() => import('widgets/Search'));
 const SearchSuggestField = lazy(() => import('widgets/SearchSuggestField'));
 const SyllabusCourseRunsList = lazy(() => import('widgets/SyllabusCourseRunsList'));
 const UserLogin = lazy(() => import('widgets/UserLogin'));
+const Slider = lazy(() => import('widgets/Slider'));
 
 // List the top-level components that can be directly called from the Django templates in an interface
 // for type-safety when we call them. This will let us use the props for any top-level component in a
@@ -31,6 +32,7 @@ interface ComponentLibrary {
   SearchSuggestField: typeof SearchSuggestField;
   SyllabusCourseRunsList: typeof SyllabusCourseRunsList;
   UserLogin: typeof UserLogin;
+  Slider: typeof Slider;
 }
 // Actually create the component map that we'll use below to access our component classes
 const componentLibrary: ComponentLibrary = {
@@ -42,6 +44,7 @@ const componentLibrary: ComponentLibrary = {
   SearchSuggestField,
   SyllabusCourseRunsList,
   UserLogin,
+  Slider,
 };
 // Type guard: ensures a given string (candidate) is indeed a proper key of the componentLibrary with a corresponding
 // component. This is a runtime check but it allows TS to check the component prop types at compile time

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.34.1-dev47",
+  "version": "2.34.1-dev51",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -90,6 +90,8 @@
     "cljs-merge": "1.1.1",
     "core-js": "3.41.0",
     "downshift": "9.0.9",
+    "embla-carousel-react": "8.5.2",
+    "embla-carousel-wheel-gestures": "8.0.1",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",

package/scss/colors/_theme.scss

@@ -160,10 +160,12 @@ $r-theme: (
     secondary-color: r-color('white'),
   ),
   slider-plugin: (
-    arrows-color: r-color('white'),
-    arrows-hover-color: r-color('firebrick6'),
-    index-color: r-color('charcoal'),
-    index-hover-color: r-color('black'),
+    arrows-fill-color: r-color('white'),
+    arrows-stroke-color: r-color('black'),
+    arrows-stroke-width: 0.5px,
+    index-color: r-color('battleship-grey'),
+    index-hover-color: r-color('indianred3'),
+    index-active-color: r-color('firebrick6'),
   ),
   blogpost-glimpse: (
     card-background: r-color('white'),

package/scss/components/templates/richie/slider/_slider.scss

@@ -1,142 +1,208 @@
-$r-slider-title-fontsize: $h1-font-size !default;
+$r-slider-slide-height: clamp(400px, 50vh, 600px) !default;
+$r-slider-title-fontsize: $h2-font-size !default;
 $r-slider-title-fontweight: $font-weight-bold !default;
 $r-slider-title-fontfamily: $headings-font-family !default;
-$r-slider-content-fontsize: $h4-font-size !default;
+$r-slider-content-fontsize: 1rem !default;
 $r-slider-content-line-height: 1.1 !default;
+$r-slider-content-line-clamp: 4 !default;
+.richie-react--slider {
+  min-height: $r-slider-slide-height;
+}
 
 .slider {
+  overflow: hidden;
   position: relative;
-  width: 100%;
-  // Reserved space for slide indexes
-  padding-bottom: 1.75rem;
+}
 
-  &__items {
-    display: flex;
-    overflow-x: hidden;
+.slider__slideshow {
+  display: flex;
+  height: $r-slider-slide-height;
+  position: relative;
+}
+
+.slider__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
+}
 
-  &__tools {
-    @include make-container-max-widths();
-    margin: 0 auto;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-content: center;
+.slider__slideshow-overlay {
+  @include make-container();
+  @include make-container-max-widths();
+  height: clamp(400px, 50vh, 600px);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+
+  // Re-enable pointer events for children
+  & > * {
+    pointer-events: auto;
   }
+}
 
-  &__next,
-  &__previous {
+.slider__navigation-button {
+  @include button-reset-style();
+  cursor: pointer;
+  margin: 0;
+  height: 100%;
+  padding: 0;
+  position: relative;
+  display: inline-block;
+  text-align: right;
+
+  $width: 50vw;
+  &:before {
+    content: '';
+    display: block;
+    width: $width;
+    height: 100%;
     position: absolute;
-    top: 25%;
-    left: 0;
-    right: 0;
-    background: none;
-    border: 0;
-
-    svg {
-      width: 5rem;
-      height: 5rem;
-      color: r-theme-val(slider-plugin, arrows-color);
-    }
+    top: 0;
+    z-index: -1;
+  }
 
-    &:hover {
-      svg {
-        color: r-theme-val(slider-plugin, arrows-hover-color);
-      }
+  &:first-child {
+    --hover-offet-x: -10%;
+    &:before {
+      left: $width * -1;
+    }
+  }
+  &:last-child {
+    --hover-offet-x: 10%;
+    &:before {
+      right: $width * -1;
     }
   }
 
-  &__next {
-    left: auto;
-    right: 0;
+  &:hover > .icon {
+    transform: scale(1.2) translateX(var(--hover-offet-x));
   }
 
-  &__previous {
-    left: 0;
-    right: auto;
+  & > .icon {
+    transition: transform 300ms $r-ease-out;
+    color: r-theme-val(slider-plugin, arrows-fill-color);
+    stroke: r-theme-val(slider-plugin, arrows-stroke-color);
+    stroke-width: r-theme-val(slider-plugin, arrows-stroke-width);
+    height: 4rem;
+    width: 4rem;
   }
+}
 
-  &__indexes {
-    @include make-container-max-widths();
-    margin: 0 auto;
-    width: 100%;
-    padding: 0.5rem;
-    position: absolute;
-    bottom: 0;
+.slider__panel {
+  @include make-container();
+  @include make-container-max-widths();
+
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.slider__bullet {
+  &-list {
     display: flex;
-    justify-content: flex-end;
+    flex-direction: row;
+    gap: 6px;
     align-items: center;
+    justify-content: flex-end;
   }
 
-  &__index {
-    @include sv-flex(1, 0, 1.9rem);
-    padding: 0;
-    height: 1rem;
-    background: transparent;
-    border: 0;
+  &-item {
+    @include button-reset-style();
+    cursor: pointer;
+    width: 2rem;
+    transform-origin: left center;
+    padding-block: 1rem;
+    position: relative;
+    display: block;
 
-    &::before {
+    &:before {
       content: '';
       display: block;
-      height: 0.2rem;
-      background: r-theme-val(slider-plugin, index-color);
-      border: 0;
+      width: 100%;
+      height: 3px;
+      border-radius: 50vw;
+      background-color: r-theme-val(slider-plugin, index-color);
+      position: absolute;
+      transform-origin: left center;
+      transition: height 400ms $r-ease-out;
+      translate: 0 -50%;
+      transform: scaleY(1);
     }
 
-    &--active {
-      pointer-events: none;
-
-      &::before {
-        height: 0.5rem;
-      }
+    &:hover:before,
+    &:focus:before,
+    &--active:before {
+      height: 7px;
     }
 
-    &:hover {
-      &::before {
-        background: r-theme-val(slider-plugin, index-hover-color);
-      }
+    &:hover:before,
+    &:focus:before {
+      background-color: r-theme-val(slider-plugin, index-hover-color);
     }
-  }
 
-  &__index + &__index {
-    margin-left: 0.3rem;
+    &--active:before {
+      background-color: r-theme-val(slider-plugin, index-active-color);
+    }
   }
 }
 
-.slider-item {
-  @include sv-flex(1, 0, 100%);
-  display: block;
-  color: inherit;
-  text-decoration: none;
-
-  // Disable any hover event on content since it can be in a link
-  &:hover,
-  *:hover {
-    color: inherit !important;
-    text-decoration: none !important;
-  }
+.slide__content {
+  max-width: 680px;
 
-  &__image {
-    display: block;
-    margin: 0 0 1rem 0;
-    width: 100%;
-  }
+  &--transitioning {
+    .slide__title > span,
+    .slide__description {
+      transition: inherit;
+    }
 
-  &__container {
-    @include make-container-max-widths();
-    position: relative;
-    margin: 0 auto;
-  }
+    .slide__title > span {
+      transform: translateY(150%);
+      opacity: 0;
+    }
 
-  &__title {
-    @include font-size($r-slider-title-fontsize);
-    font-family: $r-slider-title-fontfamily;
-    font-weight: $r-slider-title-fontweight;
-    margin: 0 0 0.5rem 0;
+    .slide__description {
+      opacity: 0;
+    }
   }
+}
 
-  &__content {
-    @include font-size($r-slider-content-fontsize);
-    line-height: $r-slider-content-line-height;
+.slide__title {
+  overflow: hidden;
+  display: inline-block;
+  font-size: $r-slider-title-fontsize;
+  font-weight: $r-slider-title-fontweight;
+  font-family: $r-slider-title-fontfamily;
+
+  & > span {
+    display: inline-block;
+    transform: translateY(0%);
+    opacity: 1;
+    transition-property: transform, opacity;
+    transition-duration: 0.8s, 0.4s;
+    transition-delay: 0s, 0.1s;
+    transition-timing-function: $r-ease-out, $r-ease-in;
   }
 }
+
+.slide__description {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $r-slider-content-line-clamp;
+  line-clamp: $r-slider-content-line-clamp;
+  display: -webkit-box;
+  overflow: hidden;
+  min-height: $r-slider-content-line-clamp *
+    ($r-slider-content-fontsize * $r-slider-content-line-height);
+  opacity: 1;
+  transition: opacity 0.3s 0.4s $r-ease-in;
+  font-size: $r-slider-content-fontsize;
+  line-height: $r-slider-content-line-height;
+}