@ndla/ui 35.1.1 → 36.0.0

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -1,436 +1,227 @@
 /**
- * Copyright (c) 2016-present, NDLA.
+ * Copyright (c) 2023-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
  *
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { SwipeDirections, SwipeEventData, useSwipeable } from 'react-swipeable';
+import React, { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
+import { Carousel, CarouselAutosize } from '@ndla/carousel';
+import { breakpoints, colors, misc, mq, spacing, spacingUnit } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { Spinner } from '@ndla/icons';
-import { OneColumn } from '../Layout';
-import NavigationArrow, { StyledNavigationArrow } from './NavigationArrow';
-import SlideshowIndicator from './SlideshowIndicator';
+import { IconButtonV2 } from '@ndla/button';
+import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
+import FilmContentCard from './FilmContentCard';
 import { MovieType } from './types';
 
+export const slideshowBreakpoints: {
+  until?: keyof typeof breakpoints;
+  columnsPrSlide: number;
+  distanceBetweenItems: number;
+  arrowOffset: number;
+  margin?: number;
+  maxColumnWidth?: number;
+}[] = [
+  {
+    until: 'mobileWide',
+    columnsPrSlide: 2,
+    distanceBetweenItems: spacingUnit / 2,
+    margin: spacingUnit,
+    arrowOffset: 13,
+  },
+  {
+    until: 'tabletWide',
+    columnsPrSlide: 3,
+    distanceBetweenItems: spacingUnit / 2,
+    margin: spacingUnit,
+    arrowOffset: 13,
+  },
+  {
+    until: 'desktop',
+    columnsPrSlide: 3,
+    distanceBetweenItems: spacingUnit,
+    margin: spacingUnit * 2,
+    arrowOffset: 0,
+  },
+  {
+    until: 'wide',
+    columnsPrSlide: 3,
+    distanceBetweenItems: spacingUnit,
+    margin: spacingUnit * 2,
+    arrowOffset: 0,
+  },
+  {
+    until: 'ultraWide',
+    columnsPrSlide: 3,
+    distanceBetweenItems: spacingUnit,
+    margin: spacingUnit * 3.5,
+    arrowOffset: 0,
+  },
+  {
+    columnsPrSlide: 3,
+    distanceBetweenItems: spacingUnit,
+    margin: spacingUnit * 3.5,
+    arrowOffset: 0,
+  },
+];
+
 interface Props {
-  autoSlide?: boolean;
-  randomStart?: boolean;
   slideshow: MovieType[];
-  slideInterval?: number;
 }
 
-const SlideLinkWrapper = styled.div`
-  margin: 0 auto;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-end;
+const SlideInfoWrapper = styled.div`
   position: absolute;
-  z-index: 2;
-  height: 100vw;
-  width: 100%;
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    height: 100vw;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 75vw;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 55vw;
-  }
-  ${mq.range({ from: breakpoints.wide })} {
-    height: 40vw;
-  }
-  ${mq.range({ from: breakpoints.ultraWide })} {
-    height: 36vw;
+  color: ${colors.white};
+  max-width: 40%;
+  min-width: 40%;
+  top: 40%;
+  right: 5%;
+  ${mq.range({ until: breakpoints.desktop })} {
+    top: 30%;
+    max-width: 60%;
+    min-width: 60%;
+  }
+  ${mq.range({ until: breakpoints.tablet })} {
+    max-width: 90%;
+    min-width: 90%;
+    left: 5%;
   }
 `;
 
-const itemWrapperCSS = css`
-  display: flex;
+const StyledSafeLink = styled(SafeLink)`
+  position: relative;
+  display: block;
   box-shadow: none;
 `;
 
-interface SlideshowItemProps {
-  fadeOver?: boolean;
-}
-
-const SlideshowItem = styled.div<SlideshowItemProps>`
-  width: 100vw;
-  height: 100vw;
-  /* aspect ratios */
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    height: 100vw;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 75vw;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 55vw;
-  }
-  ${mq.range({ from: breakpoints.wide })} {
-    height: 40vw;
-  }
-  ${mq.range({ from: breakpoints.ultraWide })} {
-    height: 36vw;
-  }
-  background-color: '#222';
-  background-size: cover;
-  background-position-x: center;
-  background-position-y: center;
-  border: 0;
-  position: ${(props) => (props.fadeOver ? 'absolute' : 'relative')};
-  animation: ${(props) => props.fadeOver && 'fadeIn 400ms ease'};
-  z-index: ${(props) => props.fadeOver && 1};
-  &:before {
-    content: '';
-    opacity: 0.4;
-    background: #091a2a;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    position: absolute;
-    z-index: 1;
+const InfoWrapper = styled.div`
+  padding: ${spacing.normal};
+  border-radius: ${misc.borderRadius};
+  border: 0.5px solid ${colors.brand.primary};
+  background-color: rgba(11, 29, 45, 0.8);
+  h3 {
+    margin: 0px;
   }
 `;
 
-interface SlideshowLinkProps {
-  out?: boolean;
-}
-
-const shouldForwardProp = (p: string) => p !== 'out';
-
-const SlideshowLink = styled(SafeLink, { shouldForwardProp })<SlideshowLinkProps>`
-  display: flex;
-  box-shadow: none;
-  transition: all 400ms ease;
-  opacity: ${(props) => props.out && 0};
-  animation: ${(props) => !props.out && 'fadeInBottomFixed 600ms ease'};
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    padding-bottom: ${spacing.medium};
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding-bottom: ${spacing.large};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding-bottom: ${spacingUnit * 3}px;
-  }
-  &:hover {
-    ${() => SlideshowName} {
-      text-decoration: underline;
-      text-decoration-color: white;
-    }
-  }
-`;
-
-const SlideshowWrapper = styled.section`
+const StyledImg = styled.img`
+  max-height: 600px;
+  object-position: top;
   width: 100%;
-  overflow: hidden;
-  &:hover {
-    ${StyledNavigationArrow} {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
+  aspect-ratio: 16/9;
+  ${mq.range({ until: breakpoints.tablet })} {
+    min-height: 440px;
+    max-height: 440px;
   }
+  object-fit: cover;
 `;
 
-const SlideshowInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  background-color: rgba(3, 23, 43, 0.7);
-  border-radius: 4px;
-  padding: ${spacing.medium} ${spacing.medium} ${spacing.medium} ${spacing.normal};
-  margin: 0 -20px;
-  width: 100vw;
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    margin: 0;
-    width: 100%;
-    padding: ${spacing.medium} ${spacingUnit * 2}px ${spacing.medium} ${spacing.normal};
-  }
-`;
-
-const SlideshowName = styled.p`
-  ${fonts.sizes('22px', '30px')};
-  color: ${colors.white};
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  margin: 0;
-  font-weight: ${fonts.weight.semibold};
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    ${fonts.sizes('26px', '30px')};
-  }
+const CarouselContainer = styled.div`
+  margin-top: -50px;
   ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('40px', '44px')};
+    margin-top: -70px;
   }
   ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('48px', '54px')};
+    margin-top: -150px;
   }
 `;
 
-const SlideshowDescription = styled.p`
-  color: ${colors.white};
-  margin: 0;
-  padding: 0;
-  ${fonts.sizes('12px', '18px')};
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    ${fonts.sizes('15px', '20px')};
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('18px', '24px')};
-  }
-  ${mq.range({ from: breakpoints.wide })} {
-    ${fonts.sizes('20px', '32px')};
-  }
-`;
+interface StyledFilmContentCardProps {
+  current?: boolean;
+}
 
-const EmptySlideshow = styled.div`
-  background: rgba(255, 255, 255, 0.08);
-  margin-bottom: $spacing--large * 4;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40vw;
+const SlideshowButton = styled(IconButtonV2)`
+  margin-top: ${spacing.normal};
 `;
 
-const defaultTransitionSwipeEnd = 'transform 600ms cubic-bezier(0, 0.76, 0.09, 1)';
-const defaultTransitionText = 'opacity 600ms ease';
-
-const renderSlideItem = (slide: MovieType) => (
-  <SlideshowItem
-    key={slide.id}
-    role="img"
-    aria-label={(slide.metaImage && slide.metaImage.alt) || ''}
-    style={{
-      backgroundImage: `url(${(slide.metaImage && slide.metaImage.url) || ''})`,
-    }}
-  />
-);
-
-const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000 }: Props) => {
-  const [swipeDistance, setSwipeDistance] = useState(0);
-  const [slideIndex, setSlideIndex] = useState(0);
-  const [slideIndexTarget, setSlideIndexTarget] = useState(0);
-  const [animationComplete, setAnimationComplete] = useState(true);
-  const [swipeDirection, setSwipeDirection] = useState<SwipeDirections | undefined>(undefined);
-  const slideRef = useRef<HTMLDivElement>(null);
-  const slideText = useRef<HTMLDivElement>(null);
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const gotoSlide = useCallback((indexTarget: number, useAnimation = false) => {
-    setSwipeDistance(0);
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    setSlideIndexTarget(indexTarget);
-    setAnimationComplete(!useAnimation);
-  }, []);
-
-  const onChangedSlide = () => {
-    if (!animationComplete) {
-      if (slideRef.current) {
-        slideRef.current.style.transition = 'none';
-        slideRef.current.style.transform = `translateX(${slideIndexTarget * 100}vw))`;
-      }
+const shouldForwardProp = (p: string) => p !== 'current';
 
-      setAnimationComplete(true);
-      setSlideIndex(slideIndexTarget);
-    } else if (slideIndexTarget === -1) {
-      if (slideRef.current) {
-        // Go to last slide for continuous loop
-        slideRef.current.style.transition = 'none';
-        slideRef.current.style.transform = `translateX(${slideshow.length * 100}vw))`;
-      }
-
-      setSlideIndex(slideshow.length - 1);
-      setSlideIndexTarget(slideshow.length - 1);
-      setAnimationComplete(true);
-    } else if (slideIndexTarget === slideshow.length) {
-      if (slideRef.current) {
-        // Go to first slide for continuous loop
-        slideRef.current.style.transition = 'none';
-        slideRef.current.style.transform = `translateX(100vw))`;
-      }
-      setSlideIndex(0);
-      setSlideIndexTarget(0);
-      setAnimationComplete(true);
-    } else {
-      setAnimationComplete(true);
-      setSlideIndex(slideIndexTarget);
-    }
-  };
-
-  const onSwipeEnd = () => {
-    setSwipeDirection(undefined);
-    let slide;
-    if (swipeDistance > 40) {
-      slide = -1;
-    } else if (swipeDistance < -40) {
-      slide = 1;
-    } else {
-      slide = 0;
-    }
-    if (slideRef.current && slideText.current) {
-      slideRef.current.style.transition = defaultTransitionSwipeEnd;
-      slideText.current.style.transition = defaultTransitionText;
-      slideText.current.style.opacity = '1';
-    }
-    setSwipeDistance(0);
-
-    initTimer();
-
-    if (slide !== 0) {
-      setSlideIndex(slideIndex + slide);
-      setSlideIndexTarget(slideIndex + slide);
-    } else {
-      // Reset transfrom
-      if (slideRef.current) {
-        slideRef.current.style.transform = getSlidePosition(slideIndex + slide);
-      }
-    }
-  };
-
-  const onSwipe = (eventData: SwipeEventData) => {
-    if (eventData.initial) {
-      setSwipeDirection(eventData.dir);
-    }
-    const dir = eventData.initial ? eventData.dir : swipeDirection;
-    if (dir === 'Up' || dir === 'Down') {
-      return;
-    }
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    setSwipeDistance(eventData.deltaX);
-    if (slideRef && slideRef.current) {
-      slideRef.current.style.transition = 'none';
-      slideRef.current.style.transform = getSlidePosition(slideIndexTarget);
-    }
-    const opacityText = 1 - Math.min(100, Math.abs(swipeDistance)) / 100;
-    if (slideText && slideText.current) {
-      slideText.current.style.transition = 'none';
-      slideText.current.style.opacity = opacityText.toString();
-    }
-  };
-
-  const onTransitionEnd = () => {
-    const slideshowLength = slideshow.length;
-    if (slideIndex === -1) {
-      if (slideRef.current) {
-        slideRef.current.style.transition = 'none';
-        slideRef.current.style.transform = getSlidePosition(slideshowLength - 1);
-      }
-      setSlideIndex(slideshowLength - 1);
-      setSlideIndexTarget(slideshowLength - 1);
-    } else if (slideIndex >= slideshowLength) {
-      if (slideRef.current) {
-        slideRef.current.style.transition = 'none';
-        slideRef.current.style.transform = getSlidePosition(0);
-      }
-      setSlideIndex(0);
-      setSlideIndexTarget(0);
-    }
-  };
-
-  const getSlidePosition = (target: number) => {
-    if (swipeDistance !== 0) {
-      return `translateX(calc(${swipeDistance}px -
-        ${(target + 1) * 100}vw))`;
-    }
-    return `translateX(-${(target + 1) * 100}vw)`;
-  };
-
-  const initTimer = useCallback(() => {
-    if (autoSlide) {
-      timer.current = setTimeout(() => {
-        gotoSlide(slideIndex + 1);
-      }, slideInterval);
-    }
-  }, [autoSlide, gotoSlide, slideInterval, slideIndex]);
+const StyledFilmContentCard = styled(FilmContentCard, { shouldForwardProp })<StyledFilmContentCardProps>`
+  margin-bottom: 2%;
+  transform: ${(p) => (p.current ? 'translateY(0%)' : 'translateY(10%)')};
+  transition: all 200ms;
+`;
 
-  useEffect(() => {
-    initTimer();
-  }, [initTimer]);
+const FilmSlideshow = ({ slideshow }: Props) => {
+  const [currentSlide, setCurrentSlide] = useState(slideshow[0]);
 
-  const handlers = useSwipeable({
-    onSwiped: onSwipeEnd,
-    onSwiping: onSwipe,
-    preventScrollOnSwipe: swipeDirection === 'Left' || swipeDirection === 'Right',
-  });
+  return (
+    <CarouselAutosize breakpoints={slideshowBreakpoints} itemsLength={slideshow.length}>
+      {(autoSizedProps) => (
+        <section>
+          <StyledSafeLink to={currentSlide.path} tabIndex={-1} aria-hidden>
+            <StyledImg src={currentSlide.metaImage?.url ?? ''} alt={currentSlide.metaImage?.alt ?? ''} />
+            <SlideInfoWrapper>
+              <InfoWrapper>
+                <h3>{currentSlide.title}</h3>
+                <span id="currentMovieDescription">{currentSlide.metaDescription}</span>
+              </InfoWrapper>
+            </SlideInfoWrapper>
+          </StyledSafeLink>
+          <CarouselContainer>
+            <Carousel
+              leftButton={
+                <SlideshowButton aria-label={''}>
+                  <ChevronLeft />
+                </SlideshowButton>
+              }
+              rightButton={
+                <SlideshowButton aria-label={''}>
+                  <ChevronRight />
+                </SlideshowButton>
+              }
+              items={slideshow.map((movie) => (
+                <FilmCard
+                  key={movie.id}
+                  current={movie.id === currentSlide.id}
+                  movie={movie}
+                  columnWidth={autoSizedProps.columnWidth}
+                  setCurrentSlide={() => setCurrentSlide(movie)}
+                />
+              ))}
+              {...autoSizedProps}
+            />
+          </CarouselContainer>
+        </section>
+      )}
+    </CarouselAutosize>
+  );
+};
 
-  if (slideshow.length === 0) {
-    return (
-      <div>
-        <EmptySlideshow>
-          <Spinner inverted />
-        </EmptySlideshow>
-      </div>
-    );
-  }
+interface FilmCardProps {
+  setCurrentSlide: () => void;
+  movie: MovieType;
+  current: boolean;
+  columnWidth: number;
+}
 
-  const slideshowWidth = `${(slideshow.length + 2) * 100}vw`;
-  let activeSlide = slideIndex;
-  if (activeSlide < 0) {
-    activeSlide = slideshow.length - 1;
-  } else if (activeSlide >= slideshow.length) {
-    activeSlide = 0;
-  }
+const FilmCard = ({ setCurrentSlide, movie, current, columnWidth }: FilmCardProps) => {
+  const [hoverCallback, setHoverCallback] = useState<ReturnType<typeof setTimeout> | undefined>(undefined);
 
-  const backgroundImage = slideshow[activeSlide].metaImage;
+  const onHover = useCallback(() => {
+    const timeout = setTimeout(() => setCurrentSlide(), 500);
+    setHoverCallback(timeout);
+  }, [setCurrentSlide]);
 
   return (
-    <SlideshowWrapper {...handlers}>
-      <>
-        <SlideLinkWrapper>
-          <OneColumn>
-            <SlideshowLink to={slideshow[activeSlide].path} out={!animationComplete}>
-              <SlideshowInfo ref={slideText}>
-                <SlideshowName>{slideshow[activeSlide].title}</SlideshowName>
-                <SlideshowDescription>{slideshow[activeSlide].metaDescription}</SlideshowDescription>
-              </SlideshowInfo>
-            </SlideshowLink>
-          </OneColumn>
-        </SlideLinkWrapper>
-        <NavigationArrow
-          slideIndexTarget={slideIndexTarget > 0 ? slideIndexTarget - 1 : slideshow.length - 1}
-          gotoSlide={gotoSlide}
-        />
-        <NavigationArrow
-          slideIndexTarget={slideIndexTarget < slideshow.length - 1 ? slideIndexTarget + 1 : 0}
-          gotoSlide={gotoSlide}
-          rightArrow
-        />
-        {!animationComplete && (
-          <SlideshowItem
-            fadeOver
-            role="img"
-            onAnimationEnd={onChangedSlide}
-            style={{
-              backgroundImage: `url(${(backgroundImage && backgroundImage.url) || ''})`,
-            }}
-          />
-        )}
-        <div
-          ref={slideRef}
-          css={itemWrapperCSS}
-          onTransitionEnd={onTransitionEnd}
-          style={{
-            width: slideshowWidth,
-            transform: getSlidePosition(slideIndex),
-          }}
-        >
-          {renderSlideItem(slideshow[slideshow.length - 1])}
-          {slideshow.map(renderSlideItem)}
-          {renderSlideItem(slideshow[0])}
-        </div>
-        <SlideshowIndicator slideshow={slideshow} activeSlide={activeSlide} gotoSlide={gotoSlide} />
-      </>
-    </SlideshowWrapper>
+    <StyledFilmContentCard
+      onMouseEnter={onHover}
+      onMouseLeave={() => {
+        if (hoverCallback) {
+          clearTimeout(hoverCallback);
+          setHoverCallback(undefined);
+        }
+      }}
+      onFocus={() => setCurrentSlide()}
+      current={current}
+      aria-describedby={'currentMovieDescription'}
+      key={movie.id}
+      movie={movie}
+      columnWidth={columnWidth}
+      resourceTypes={[]}
+    />
   );
 };
 

package/src/RelatedArticleList/RelatedArticleV2.tsx

@@ -6,9 +6,10 @@
  *
  */
 
-import { Children, useMemo, useState } from 'react';
+import { Children, HTMLProps, ReactNode, useMemo, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
@@ -54,12 +55,25 @@ export const RelatedArticleV2 = ({
   );
 };
 
-interface Props {
+const HeadingWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+interface Props extends HTMLProps<HTMLElement> {
   children?: JSX.Element[];
   articleCount?: number;
   headingLevel?: HeadingLevel;
+  headingButtons?: ReactNode;
 }
-export const RelatedArticleListV2 = ({ children = [], articleCount, headingLevel = 'h3' }: Props) => {
+export const RelatedArticleListV2 = ({
+  children = [],
+  articleCount,
+  headingLevel = 'h3',
+  headingButtons,
+  ...rest
+}: Props) => {
   const [expanded, setExpanded] = useState(false);
   const { t } = useTranslation();
   const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
@@ -69,10 +83,13 @@ export const RelatedArticleListV2 = ({ children = [], articleCount, headingLevel
   );
 
   return (
-    <section {...classes('')}>
-      <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
-        {t('related.title')}
-      </SectionHeading>
+    <section {...classes('')} {...rest}>
+      <HeadingWrapper>
+        <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
+          {t('related.title')}
+        </SectionHeading>
+        {headingButtons}
+      </HeadingWrapper>
       <div {...classes('articles')}>{childrenToShow}</div>
       {childCount > 2 ? (
         <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">

package/src/Search/ToggleSearchButton.tsx

@@ -24,7 +24,11 @@ interface StyledButtonProps {
   ndlaFilm?: boolean;
 }
 
-const StyledButton = styled(ButtonV2)<StyledButtonProps>`
+const props = ['hideOnNarrowScreen', 'hideOnWideScreen', 'ndlaFilm'];
+
+const shouldForwardProp = (p: string) => !props.includes(p);
+
+const StyledButton = styled(ButtonV2, { shouldForwardProp })<StyledButtonProps>`
   background: ${(p) => (p.ndlaFilm ? colors.ndlaFilm.filmColorBright : colors.brand.greyLighter)};
   border-radius: ${misc.borderRadius};
   border: 0;

package/src/locale/messages-en.ts

@@ -1185,6 +1185,7 @@ const messages = {
       drawerButton: 'Show folders and resources',
       drawerTitle: 'Folders and resources',
       description: {
+        all: 'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.\n\nIf you want to come back to the folder later, you can use the link the teacher gave you, or you can bookmark the page.',
         info1:
           'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.',
         info2: 'You can use the menu to navigate through the articles.',