@ndla/ui 3.3.7 → 3.3.12

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -0,0 +1,265 @@
+/**
+ * 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';
+// @ts-ignore
+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/Programme/Programme.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
-import { NavigationHeading } from '../Navigation';
 import ProgrammeSubjects from './ProgrammeSubjects';
 import { GradesProps } from './ProgrammeSubjects';
-
+import MessageBox from '../MessageBox/MessageBox';
+import { NavigationHeading } from '..';
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -63,9 +64,11 @@ const SubjectsWrapper = styled.div`
 type Props = GradesProps & {
   heading?: string;
   image?: string;
+  messageBoxText?: string;
 };
 
-export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade }: Props) => {
+export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade, messageBoxText }: Props) => {
+  const { t } = useTranslation();
   return (
     <StyledWrapper>
       <StyledBackground image={image} />
@@ -74,6 +77,7 @@ export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade
           <LayoutItem layout="extend">
             <StyledContentWrapper>
               <NavigationHeading>{heading}</NavigationHeading>
+              {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
               <SubjectsWrapper>
                 <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />
               </SubjectsWrapper>

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { FormEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { colors, breakpoints, mq } from '@ndla/core';
 // @ts-ignore
@@ -76,8 +76,8 @@ const SearchInput = styled.input`
 `;
 
 type Props = {
-  onSubmit: (event: {}) => void;
-  value: string;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  value?: string;
   onChange: (value: string) => void;
   filters?: PopupFilterProps;
   activeFilters?: {

package/src/SearchTypeResult/SearchHeader.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { FormEvent } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
@@ -75,7 +75,7 @@ type Props = {
   searchPhrase?: string;
   searchPhraseSuggestion?: string;
   searchPhraseSuggestionOnClick?: () => void;
-  searchValue: string;
+  searchValue?: string;
   filters?: PopupFilterProps;
   activeFilters?: {
     filters: FilterProps[];
@@ -83,7 +83,7 @@ type Props = {
   };
   competenceGoals?: CompetenceGoalsItemType[];
   onSearchValueChange: (value: string) => void;
-  onSubmit: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   noResults?: boolean;
 };
 

package/src/SearchTypeResult/SearchItem.tsx

@@ -203,12 +203,11 @@ type context = {
 };
 
 export type SearchItemType = {
-  id: string;
+  id: string | number;
   title: string;
   url: string;
   ingress: string;
-  contexts: context[];
-  image: React.ReactNode | null;
+  contexts?: context[];
   img?: { url: string; alt: string };
   labels?: string[];
   children?: React.ReactNode;
@@ -220,7 +219,7 @@ type Props = {
 const SearchItem = ({ item, type }: Props) => {
   const { t } = useTranslation();
   const { title, url, ingress, contexts, img = null, labels = [] } = item;
-  const mainContext = contexts[0];
+  const mainContext = contexts?.[0];
 
   const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: React.ReactNode }) => (
     <BreadcrumbPath>
@@ -268,7 +267,7 @@ const SearchItem = ({ item, type }: Props) => {
           {item.children}
           <ItemText>{parse(ingress)}</ItemText>
           {mainContext && <Breadcrumb breadcrumb={mainContext.breadcrumb} />}
-          {contexts.length > 1 && (
+          {contexts && contexts.length > 1 && (
             <ContextsWrapper>
               <Modal
                 activateButton={

package/src/SearchTypeResult/SearchNotionItem.tsx

@@ -48,7 +48,6 @@ const ItemWrapper = styled.div<ItemWrapperProps>`
 const TextWrapper = styled.div``;
 const DescriptionWrapper = styled.div`
   ${fonts.sizes('18px', '26px')};
-  font-family: ${fonts.serif};
 `;
 
 const MediaWrapper = styled.div`
@@ -121,7 +120,7 @@ const AuthorsWrapper = styled.div`
 `;
 
 export type SearchNotionItemProps = {
-  id: string;
+  id: string | number;
   title: string;
   text: React.ReactNode;
   image?: { url: string; alt: string };

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -10,7 +10,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { fonts, mq, breakpoints, spacing } from '@ndla/core';
 // @ts-ignore
-import Button from '@ndla/button';
+import { ModalCloseButton } from '@ndla/modal';
+// @ts-ignore
 import { withTranslation, WithTranslation } from 'react-i18next';
 import SearchNotionItem, { SearchNotionItemProps } from './SearchNotionItem';
 
@@ -47,10 +48,6 @@ const HeadingCount = styled.span`
   text-transform: lowercase;
 `;
 
-const ButtonRemoveText = styled.span`
-  ${fonts.sizes('18px', '22px')};
-`;
-
 type Props = {
   items: SearchNotionItemProps[];
   totalCount: number;
@@ -65,9 +62,7 @@ const SearchNotionsResult = ({ items, totalCount, onRemove, renderMarkdown, t }:
         {t(`searchPage.resultType.notionsHeading`)}
         <HeadingCount>{t(`searchPage.resultType.hits`, { count: totalCount })}</HeadingCount>
       </Heading>
-      <Button onClick={onRemove} link>
-        <ButtonRemoveText>{t(`searchPage.resultType.notionsRemove`)}</ButtonRemoveText>
-      </Button>
+      <ModalCloseButton onClick={onRemove} />
     </HeadingWrapper>
     {items.map((item) => (
       <SearchNotionItem key={item.id} {...item} renderMarkdown={renderMarkdown} />

package/src/SearchTypeResult/index.ts

@@ -12,4 +12,6 @@ import SearchFieldHeader from './SearchFieldHeader';
 import SearchNotionsResult from './SearchNotionsResult';
 import SearchSubjectResult from './SearchSubjectResult';
 
+export type { ContentType } from './SearchTypeResult';
+
 export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult };

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);

package/src/index.ts

@@ -115,8 +115,9 @@ export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';
 
-export { MessageBox } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
+export { CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';

package/src/locale/messages-en.ts

@@ -313,6 +313,20 @@ const messages = {
       h5p: 'Interactive',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'This course is not updated to the current curriculum. Follow this link to find the updated version of the course: ',
+    updateBrowser:
+      'Your browser is outdated. Update it, or find a safe and updated browser on https://browsehappy.com.',
+    noContent: 'We are sorry, but we do not yet offer any program courses.',
+    feide: 'This resource is accessible only to teachers who are logged in with Feide.',
+    resources:
+      'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
+    beta: 'This course is in beta.',
+    outdatedSubject: 'This topic is part of a course that is not updated to the current curriculum.',
+    newVersion:
+      'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
+  },
   article: {
     edition: 'Edition',
     publisher: 'Publisher',

package/src/locale/messages-nb.ts

@@ -312,6 +312,20 @@ const messages = {
       h5p: 'Interaktiv',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'Dette faget følger en utgått læreplan. Gå til faget som er oppdatert etter gjeldende læreplan:',
+    updateBrowser:
+      'Nettleseren din er utdatert. Oppdater den, eller finn en trygg og oppdatert nettleser på https://browsehappy.com.',
+    noContent: 'Vi har dessverre ikke noen programfag ennå.',
+    feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
+    resources:
+      'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet hører til et fag som ikke er oppdatert etter gjeldende læreplan.',
+    newVersion:
+      'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgave',

package/src/locale/messages-nn.ts

@@ -313,6 +313,20 @@ const messages = {
       h5p: 'Interaktiv',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'Dette faget følgjer ein utgått læreplan. Gå til faget som er oppdatert etter gjeldande læreplan: ',
+    updateBrowser:
+      'Nettlesaren din er utdatert. Oppdater han, eller finn ein trygg og oppdatert nettlesar på https://browsehappy.com. ',
+    noContent: 'Vi har dessverre ikkje nokon programfag enno.',
+    feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
+    resources:
+      'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet høyrer til eit fag som ikkje er oppdatert etter gjeldande læreplan.',
+    newVersion:
+      'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgåve',