@ndla/ui 3.3.4 → 3.3.8

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) 2016-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 { SwipeEventData, useSwipeable } from 'react-swipeable';
+import BEMHelper from 'react-bem-helper';
+import SafeLink from '@ndla/safelink';
+import { OneColumn } from '../Layout';
+import Spinner from '../Spinner';
+import { NDLAMovie } from './interfaces';
+import NavigationArrow from './NavigationArrow';
+import SlideshowIndicator from './SlideshowIndicator';
+
+interface Props {
+  autoSlide: boolean;
+  randomStart: boolean;
+  slideshow: NDLAMovie[];
+  slideInterval: number;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const defaultTransitionSwipeEnd = 'transform 600ms cubic-bezier(0, 0.76, 0.09, 1)';
+const defaultTransitionText = 'opacity 600ms ease';
+
+const renderSlideItem = (slide: NDLAMovie) => (
+  <div
+    {...classes('item')}
+    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 slideRef = useRef<HTMLDivElement>(null);
+  const slideText = useRef<HTMLDivElement>(null);
+  let 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))`;
+      }
+
+      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 = () => {
+    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.dir === 'Up' || eventData.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]);
+
+  useEffect(() => {
+    initTimer();
+  }, [initTimer]);
+
+  const handlers = useSwipeable({
+    onSwiped: onSwipeEnd,
+    onSwiping: onSwipe,
+  });
+
+  if (slideshow.length === 0) {
+    return (
+      <div>
+        <div {...classes('slideshow')}>
+          <Spinner inverted />
+        </div>
+      </div>
+    );
+  }
+
+  const slideshowWidth = `${(slideshow.length + 2) * 100}vw`;
+  let activeSlide = slideIndex;
+  if (activeSlide < 0) {
+    activeSlide = slideshow.length - 1;
+  } else if (activeSlide >= slideshow.length) {
+    activeSlide = 0;
+  }
+
+  return (
+    <section {...classes('')} {...handlers}>
+      <>
+        <div {...classes('slide-link-wrapper')}>
+          <OneColumn>
+            <SafeLink
+              to={slideshow[activeSlide].path}
+              {...classes('item-wrapper', 'text', {
+                out: !animationComplete,
+              })}>
+              <div {...classes('slide-info')} ref={slideText}>
+                <h1>{slideshow[activeSlide].title}</h1>
+                <p>{slideshow[activeSlide].metaDescription}</p>
+              </div>
+            </SafeLink>
+          </OneColumn>
+        </div>
+        <NavigationArrow
+          slideIndexTarget={slideIndexTarget > 0 ? slideIndexTarget - 1 : slideshow.length - 1}
+          gotoSlide={gotoSlide}
+        />
+        <NavigationArrow
+          slideIndexTarget={slideIndexTarget < slideshow.length - 1 ? slideIndexTarget + 1 : 0}
+          gotoSlide={gotoSlide}
+          rightArrow
+        />
+        {!animationComplete && (
+          <div
+            {...classes('item', 'fade-over')}
+            role="img"
+            onAnimationEnd={onChangedSlide}
+            style={{
+              backgroundImage: `url(${
+                (slideshow[activeSlide].metaImage && slideshow[activeSlide].metaImage.url) || ''
+              })`,
+            }}
+          />
+        )}
+        <div
+          ref={slideRef}
+          {...classes('item-wrapper')}
+          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} />
+      </>
+    </section>
+  );
+};
+
+export default FilmSlideshow;

package/src/NDLAFilm/NavigationArrow.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2016-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 from 'react';
+import BEMHelper from 'react-bem-helper';
+import { ChevronRight, ChevronLeft } from '@ndla/icons/common';
+
+interface Props {
+  slideIndexTarget: number;
+  slideshowLength?: number;
+  gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+  rightArrow?: boolean;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const NavigationArrow = ({ slideIndexTarget, gotoSlide, rightArrow }: Props) => {
+  const Chevron = rightArrow ? ChevronRight : ChevronLeft;
+
+  return (
+    <div {...classes('navigation-arrows', rightArrow ? 'right' : '')}>
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={() => {
+          gotoSlide(slideIndexTarget, true);
+        }}>
+        <Chevron />
+      </button>
+    </div>
+  );
+};
+
+export default NavigationArrow;

package/src/NDLAFilm/SlideshowIndicator.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2019-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 from 'react';
+import BEMHelper from 'react-bem-helper';
+import { NDLAMovie } from './interfaces';
+
+interface Props {
+  slideshow: NDLAMovie[];
+  activeSlide: number;
+  gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const SlideshowIndicator = ({ slideshow, activeSlide, gotoSlide }: Props) => {
+  return (
+    <div {...classes('indicator-wrapper')}>
+      {slideshow.map((slide, index) => (
+        <button
+          key={`indicator_${index}`}
+          type="button"
+          {...classes('indicator-dot', index === activeSlide ? 'active' : '')}
+          onClick={() => gotoSlide(index, true)}>
+          <span />
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SlideshowIndicator;

package/src/NDLAFilm/interfaces.ts

@@ -0,0 +1,10 @@
+export interface NDLAMovie {
+  id: string;
+  metaDescription: string;
+  title: string;
+  metaImage: {
+    url: string;
+    alt: string;
+  };
+  path: string;
+}

package/src/NDLAFilm/shapes.ts

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const topicShape = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string,
+});

package/src/Programme/Programme.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import LayoutItem, { OneColumn } from '../Layout';
@@ -65,19 +65,7 @@ type Props = GradesProps & {
   image?: string;
 };
 
-export const Programme = ({ heading, image, grades }: Props) => {
-  const [showGradeIndex, setShowGradeIndex] = useState(0);
-  const isWindowContext = typeof window !== 'undefined';
-
-  useEffect(() => {
-    if (isWindowContext) {
-      const rememberGradeIndex = window.localStorage.getItem('programmeShowGradeIndex') || '0';
-      if (grades.length > Number(rememberGradeIndex)) {
-        setShowGradeIndex(Number(rememberGradeIndex));
-      }
-    }
-  }, [isWindowContext, grades]);
-
+export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade }: Props) => {
   return (
     <StyledWrapper>
       <StyledBackground image={image} />
@@ -87,7 +75,7 @@ export const Programme = ({ heading, image, grades }: Props) => {
             <StyledContentWrapper>
               <NavigationHeading>{heading}</NavigationHeading>
               <SubjectsWrapper>
-                <ProgrammeSubjects grades={grades} preSelectedGradeIndex={showGradeIndex} />
+                <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />
               </SubjectsWrapper>
             </StyledContentWrapper>
           </LayoutItem>

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 // @ts-ignore
 import Button from '@ndla/button';
@@ -27,66 +27,42 @@ const GradesMenu = styled.div`
 `;
 
 export type GradesProps = {
-  grades: [
-    {
+  selectedGrade?: string;
+  onChangeGrade: (newGrade: string) => void;
+  grades: {
+    name: string;
+    categories: {
       name: string;
-      categories: [
-        {
-          name: string;
-          subjects: [
-            {
-              label: string;
-              url: string;
-            },
-          ];
-        },
-      ];
-    },
-  ];
+      subjects: {
+        label: string;
+        url: string;
+      }[];
+    }[];
+  }[];
 };
 
 type Props = GradesProps & {
-  preSelectedGradeIndex?: number;
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, preSelectedGradeIndex = 0 }: Props) => {
-  const [showGradeIndex, setShowGradeIndex] = useState(preSelectedGradeIndex);
-  const isWindowContext = typeof window !== 'undefined';
-
-  const toggleGradeIndex = (index: number) => {
-    setShowGradeIndex(index);
-    if (isWindowContext) {
-      window.localStorage.setItem('programmeShowGradeIndex', `${index}`);
-    }
-  };
-
-  const selectedGrade = grades[showGradeIndex];
+const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade = 'vg1' }: Props) => {
+  const grade = grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0];
   return (
     <>
       <GradesMenu>
-        {grades.map((item, index) => (
+        {grades.map((item) => (
           <Button
             key={item.name}
-            onClick={() => toggleGradeIndex(index)}
-            lighter={showGradeIndex !== index}
+            onClick={() => onChangeGrade(item.name.toLowerCase())}
+            lighter={item !== grade}
             size="normal"
             borderShape="rounded">
             {item.name}
           </Button>
         ))}
       </GradesMenu>
-      {selectedGrade.categories.map((category) => (
-        <NavigationBox
-          key={category.name}
-          heading={category.name}
-          items={category.subjects}
-          onClick={() => {
-            if (onNavigate) {
-              onNavigate();
-            }
-          }}
-        />
+      {grade.categories.map((category) => (
+        <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}
     </>
   );

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -85,7 +85,7 @@ type Props = {
 const SearchTypeHeader = ({ filters, onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
   <HeaderWrapper>
     <TypeWrapper>
-      {type && <ContentTypeBadge type={type} background size="large" />}
+      {type && <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background size="large" />}
       <SubjectName>
         {type && <b>{t(`contentTypes.${type}`)}</b>}{' '}
         {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}

package/src/Spinner/Spinner.tsx

@@ -8,23 +8,27 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { spacing, colors, SpacingNames } from '@ndla/core';
+import { colors, spacing, SpacingNames } from '@ndla/core';
 
 interface Props {
+  size?: SpacingNames;
+  margin?: string;
+  inverted?: boolean;
+}
+
+interface StyledProps extends Props {
   size: SpacingNames;
-  margin: string;
-  inverted: boolean;
 }
 
-const SpinnerDiv = styled('div')<Props>`
+const SpinnerDiv = styled('div')<StyledProps>`
   border: calc(${(props) => spacing[props.size]} / 6.5) solid rgba(0, 0, 0, 0.1);
   border-bottom-color: ${(props) => (props.inverted ? '#fff' : colors.brand.primary)};
   border-radius: 50%;
   animation: spinnerAnimation 0.7s linear infinite;
   height: ${(props) => spacing[props.size]};
   width: ${(props) => spacing[props.size]};
-  display: block;
   margin: ${(props) => props.margin};
+  display: block;
   @keyframes spinnerAnimation {
     0% {
       transform: rotate(0deg);