@ndla/ui 3.3.13 → 3.3.17

package/src/NDLAFilm/{FilmContentCard.jsx → FilmContentCard.tsx}

@@ -1,11 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { spacing, colors, fonts, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
-// @ts-ignore
 import { makeSrcQueryString } from '../Image';
 import FilmContentCardTags from './FilmContentCardTags';
+import { MovieResourceType, MovieType } from './types';
+
+interface Props {
+  movie: MovieType;
+  columnWidth: number;
+  distanceBetweenItems?: number;
+  resourceTypes: MovieResourceType[];
+  resizeThumbnailImages?: boolean;
+  hideTags?: boolean;
+}
 
 const FilmContentCard = ({
   movie: { metaImage, resourceTypes: movieResourceTypes, title, id, path },
@@ -13,8 +21,8 @@ const FilmContentCard = ({
   distanceBetweenItems,
   resourceTypes,
   resizeThumbnailImages,
-  hideTags,
-}) => {
+  hideTags = false,
+}: Props) => {
   let backgroundImage = `${(metaImage && metaImage.url) || ''}`;
   if (resizeThumbnailImages && metaImage) {
     backgroundImage += '?width=480';
@@ -55,7 +63,10 @@ const StyledMovieTitle = styled.h2`
   }
 `;
 
-const StyledImage = styled.div`
+interface StyledImageProps {
+  columnWidth: number;
+}
+const StyledImage = styled.div<StyledImageProps>`
   height: ${(props) => props.columnWidth * 0.5625}px;
   background-size: cover;
   background-color: ${colors.ndlaFilm.filmColorLight};
@@ -78,7 +89,11 @@ const StyledImage = styled.div`
   }
 `;
 
-const StyledSlideWrapper = styled.div`
+interface StyledSlideWrapperProps {
+  columnWidth: number;
+}
+
+const StyledSlideWrapper = styled.div<StyledSlideWrapperProps>`
   width: ${(props) => props.columnWidth}px;
   color: #fff;
   box-shadow: none;
@@ -98,20 +113,4 @@ const StyledSlideWrapper = styled.div`
   }
 `;
 
-FilmContentCard.propTypes = {
-  movie: PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-  }).isRequired,
-  columnWidth: PropTypes.number,
-  distanceBetweenItems: PropTypes.number,
-  resourceTypes: PropTypes.arrayOf(PropTypes.object),
-  resizeThumbnailImages: PropTypes.bool,
-  hideTags: PropTypes.bool,
-};
-
-FilmContentCard.defaultProps = {
-  hideTags: false,
-};
-
 export default FilmContentCard;

package/src/NDLAFilm/{FilmContentCardTags.jsx → FilmContentCardTags.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { spacing, spacingUnit, colors, fonts, misc } from '@ndla/core';
 import styled from '@emotion/styled';
+import { MovieResourceType } from './types';
 
 const StyledWrapperDiv = styled.div`
   transition: opacity 200ms ease;
@@ -22,8 +22,12 @@ const StyledMovieTags = styled.span`
   margin-bottom: ${spacingUnit / 8}px;
 `;
 
-const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }) => {
-  const resources = {};
+interface Props {
+  movieResourceTypes: MovieResourceType[];
+  resourceTypes: MovieResourceType[];
+}
+const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }: Props) => {
+  const resources: Record<string, boolean> = {};
   movieResourceTypes.forEach((movieResourceType) => {
     const resource = resourceTypes.find((resourceType) => resourceType.id === movieResourceType.id);
     if (resource) {
@@ -39,8 +43,4 @@ const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }) => {
   );
 };
 
-FilmContentCardTags.propTypes = {
-  resourceTypes: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
 export default FilmContentCardTags;

package/src/NDLAFilm/{FilmMovieList.jsx → FilmMovieList.tsx}

@@ -1,5 +1,4 @@
-/**
- * Copyright (c) 2016-present, NDLA.
+/** * 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.
@@ -7,31 +6,41 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
-import { Carousel } from '@ndla/carousel';
+import { Carousel, CalculatedCarouselProps } from '@ndla/carousel';
 import FilmContentCard from './FilmContentCard';
-import { movieShape } from './shapes';
+import { MovieResourceType, MovieType } from './types';
 
 const classes = new BEMHelper({
   name: 'film-movielist',
   prefix: 'c-',
 });
 
+interface Props {
+  movies: MovieType[];
+  name: string;
+  slideBackwardsLabel: string;
+  slideForwardsLabel: string;
+  resourceTypes: MovieResourceType[];
+  autoSizedProps: CalculatedCarouselProps;
+  resizeThumbnailImages?: boolean;
+}
+
 const FilmMovieList = ({
   name,
-  movies,
+  movies = [],
   slideBackwardsLabel,
   slideForwardsLabel,
-  resourceTypes,
+  resourceTypes = [],
   autoSizedProps,
   resizeThumbnailImages,
-}) => (
+}: Props) => (
   <section {...classes()}>
     <h1 {...classes('heading')} style={{ marginLeft: `${autoSizedProps.margin}px` }}>
       {name}
     </h1>
     <Carousel
+      disableScroll={false}
       slideBackwardsLabel={slideBackwardsLabel}
       slideForwardsLabel={slideForwardsLabel}
       buttonClass="c-film-movielist__carousel-buttons"
@@ -50,23 +59,4 @@ const FilmMovieList = ({
   </section>
 );
 
-FilmMovieList.propTypes = {
-  movies: PropTypes.arrayOf(movieShape),
-  name: PropTypes.string.isRequired,
-  slideBackwardsLabel: PropTypes.string.isRequired,
-  slideForwardsLabel: PropTypes.string.isRequired,
-  resourceTypes: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      id: PropTypes.id,
-    }),
-  ),
-  autoSizedProps: PropTypes.shape({}),
-};
-
-FilmMovieList.defaultProps = {
-  movies: [],
-  resourceTypes: [],
-};
-
 export default FilmMovieList;

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 SafeLink from '@ndla/safelink';
+import { useTranslation } from 'react-i18next';
+import CategorySelect from './CategorySelect';
+import { MovieResourceType } from './types';
+import { OneColumn } from '..';
+
+const classes = new BEMHelper({
+  name: 'film-moviesearch',
+  prefix: 'c-',
+});
+
+const classesMovieList = new BEMHelper({
+  name: 'film-movielist',
+  prefix: 'c-',
+});
+
+interface Props {
+  topics?: { id: string; path: string; name: string }[];
+  onChangeResourceType: (resourceType?: string) => void;
+  resourceTypeSelected?: MovieResourceType;
+  resourceTypes: MovieResourceType[];
+  ariaControlId: string;
+}
+
+const FilmMovieSearch = ({
+  topics = [],
+  onChangeResourceType,
+  resourceTypes,
+  resourceTypeSelected,
+  ariaControlId,
+}: Props) => {
+  const { t } = useTranslation();
+  return (
+    <div {...classes('')}>
+      <OneColumn>
+        <div {...classes('topic-navigation')}>
+          <h2 {...classesMovieList('heading', '', 'u-12/12 u-4/12@tablet')}>{t('ndlaFilm.subjectsInMovies')}:</h2>
+          <nav className="u-12/12 u-8/12@tablet">
+            <ul>
+              {topics.map((topic) => (
+                <li key={topic.id}>
+                  <SafeLink to={topic.path} key={topic.id}>
+                    <span>{topic.name}</span>
+                  </SafeLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+        <CategorySelect
+          onChangeResourceType={onChangeResourceType}
+          resourceTypes={resourceTypes}
+          resourceTypeSelected={resourceTypeSelected}
+          ariaControlId={ariaControlId}
+        />
+      </OneColumn>
+    </div>
+  );
+};
+
+export default FilmMovieSearch;

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -7,21 +7,20 @@
  */
 
 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';
+import { MovieType } from './types';
 
 interface Props {
-  autoSlide: boolean;
-  randomStart: boolean;
-  slideshow: NDLAMovie[];
-  slideInterval: number;
+  autoSlide?: boolean;
+  randomStart?: boolean;
+  slideshow: MovieType[];
+  slideInterval?: number;
 }
 
 const classes = new BEMHelper({
@@ -32,7 +31,7 @@ const classes = new BEMHelper({
 const defaultTransitionSwipeEnd = 'transform 600ms cubic-bezier(0, 0.76, 0.09, 1)';
 const defaultTransitionText = 'opacity 600ms ease';
 
-const renderSlideItem = (slide: NDLAMovie) => (
+const renderSlideItem = (slide: MovieType) => (
   <div
     {...classes('item')}
     key={slide.id}
@@ -206,6 +205,8 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
     activeSlide = 0;
   }
 
+  const backgroundImage = slideshow[activeSlide].metaImage;
+
   return (
     <section {...classes('')} {...handlers}>
       <>
@@ -238,9 +239,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
             role="img"
             onAnimationEnd={onChangedSlide}
             style={{
-              backgroundImage: `url(${
-                (slideshow[activeSlide].metaImage && slideshow[activeSlide].metaImage.url) || ''
-              })`,
+              backgroundImage: `url(${(backgroundImage && backgroundImage.url) || ''})`,
             }}
           />
         )}

package/src/NDLAFilm/MovieGrid.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import { css } from '@emotion/core';
+import { CalculatedCarouselProps } from '@ndla/carousel';
+import { useTranslation } from 'react-i18next';
+import FilmContentCard from './FilmContentCard';
+import { MovieResourceType, MovieType } from './types';
+
+const movieListClasses = new BEMHelper({
+  name: 'film-movielist',
+  prefix: 'c-',
+});
+
+interface Props {
+  autoSizedProps: CalculatedCarouselProps;
+  resourceTypeName?: MovieResourceType;
+  fetchingMoviesByType: boolean;
+  moviesByType: MovieType[];
+  resourceTypes: MovieResourceType[];
+  loadingPlaceholderHeight?: string;
+  resizeThumbnailImages?: boolean;
+}
+
+const MovieGrid = ({
+  resourceTypeName,
+  fetchingMoviesByType,
+  moviesByType,
+  resourceTypes,
+  loadingPlaceholderHeight,
+  autoSizedProps,
+  resizeThumbnailImages,
+}: Props) => {
+  const { t } = useTranslation();
+  return (
+    <section>
+      <h1
+        {...movieListClasses('heading')}
+        css={css`
+          margin-left: ${autoSizedProps.margin}px;
+        `}>
+        {resourceTypeName && resourceTypeName.name}
+        <small>
+          {fetchingMoviesByType
+            ? t('ndlaFilm.loadingMovies')
+            : `${moviesByType.length} ${t('ndlaFilm.movieMatchInCategory')}`}
+        </small>
+      </h1>
+      <div
+        {...movieListClasses('movie-listing')}
+        css={css`
+          margin-left: ${autoSizedProps.margin}px;
+        `}>
+        {fetchingMoviesByType && (
+          <div
+            css={css`
+              height: ${loadingPlaceholderHeight};
+            `}
+          />
+        )}
+        {!fetchingMoviesByType &&
+          moviesByType.map((movie) => (
+            <FilmContentCard
+              hideTags
+              movie={movie}
+              columnWidth={autoSizedProps.columnWidth}
+              distanceBetweenItems={autoSizedProps.distanceBetweenItems}
+              resourceTypes={resourceTypes}
+              resizeThumbnailImages={resizeThumbnailImages}
+            />
+          ))}
+      </div>
+    </section>
+  );
+};
+
+export default MovieGrid;

package/src/NDLAFilm/SlideshowIndicator.tsx

@@ -8,10 +8,10 @@
 
 import React from 'react';
 import BEMHelper from 'react-bem-helper';
-import { NDLAMovie } from './interfaces';
+import { MovieType } from './types';
 
 interface Props {
-  slideshow: NDLAMovie[];
+  slideshow: MovieType[];
   activeSlide: number;
   gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
 }

package/src/NDLAFilm/VisualElement.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 styled from '@emotion/styled';
+import Image from '../Image';
+
+const StylediFrame = styled.iframe`
+  height: 100%;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+`;
+
+interface Props {
+  visualElement: {
+    alt?: string;
+    url: string;
+    type: string;
+  };
+}
+const VisualElement = ({ visualElement }: Props) => {
+  const { type, url, alt } = visualElement;
+  if (type === 'image') {
+    return <Image src={url} alt={alt ?? ''} />;
+  } else if (type === 'brightcove') {
+    //@ts-ignore react does not recognize fullscreen properties.
+    return <StylediFrame allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src={url} />;
+  } else {
+    return null;
+  }
+};
+
+export default VisualElement;

package/src/NDLAFilm/types.ts

@@ -1,13 +1,16 @@
-export interface movieType {
-  id: string;
+export interface MovieType {
+  id: number | string;
   metaDescription: string;
-  metaImage: {
+  resourceTypes: MovieResourceType[];
+  metaImage?: {
     alt: string;
     url: string;
   };
-  movieTypes: {
-    [key: string]: boolean;
-  };
   path: string;
   title: string;
 }
+
+export interface MovieResourceType {
+  id: string;
+  name: string;
+}

package/src/Navigation/NavigationBox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent, ChangeEventHandler } from 'react';
 import styled from '@emotion/styled';
 import { SafeLinkButton } from '@ndla/safelink';
 // @ts-ignore
@@ -186,12 +186,12 @@ type Props = {
   colorMode?: 'dark' | 'light' | 'greyLightest' | 'greyLighter';
   isButtonElements?: boolean;
   items: ItemProps[];
-  onClick?: (event: React.MouseEvent<HTMLElement>, id?: string) => void;
+  onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
   listDirection?: listProps['direction'];
   invertedStyle?: boolean;
-  onToggleAdditionalResources?: React.ChangeEventHandler<HTMLInputElement>;
+  onToggleAdditionalResources?: ChangeEventHandler<HTMLInputElement>;
 };
 
 export const NavigationBox = ({
@@ -240,7 +240,7 @@ export const NavigationBox = ({
                 borderShape="sharpened"
                 width="full"
                 textAlign="left"
-                onClick={(e: React.MouseEvent<HTMLElement>) => {
+                onClick={(e: MouseEvent<HTMLElement>) => {
                   if (onClick) {
                     onClick(e, item.id);
                   }

package/src/Navigation/NavigationHeading.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { breakpoints, fonts, mq } from '@ndla/core';
@@ -43,7 +43,7 @@ const StyledSubText = styled.span`
 
 type Props = {
   subHeading?: string;
-  children: React.ReactNode;
+  children: ReactNode;
   invertedStyle?: boolean;
 };
 

package/src/Navigation/NavigationTopicAbout.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { css } from '@emotion/core';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
 
@@ -114,7 +113,7 @@ type Props = {
   isAdditionalTopic?: boolean;
   invertedStyle?: boolean;
   renderMarkdown: (text: string) => string;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export const NavigationTopicAbout = ({

package/src/Notion/Notion.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import HTMLReactParser from 'html-react-parser';
-import React from 'react';
+import React, { MouseEventHandler, ReactNode } from 'react';
 
 // @ts-ignore
 import Button from '@ndla/button';
@@ -59,10 +59,10 @@ export type NotionProps = {
   labels?: string[];
   license?: string;
   locale?: Locale;
-  media?: React.ReactNode;
-  onReferenceClick?: React.MouseEventHandler<HTMLButtonElement>;
+  media?: ReactNode;
+  onReferenceClick?: MouseEventHandler<HTMLButtonElement>;
   renderMarkdown?: (text: string) => string;
-  text: React.ReactNode;
+  text: ReactNode;
   title: string;
 };
 

package/src/RadioButtonGroup/RadioButtonGroup.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { Fragment, Component } from 'react';
+import React, { Fragment, Component, ChangeEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 
@@ -39,7 +39,7 @@ class RadioButtonGroup extends Component<Props, State> {
     this.uuid = this.props.uniqeIds ? uuid() : undefined;
   }
 
-  handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+  handleOnChange(e: ChangeEvent<HTMLInputElement>) {
     this.setState({
       selected: e.target.value,
     });

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, ReactElement } from 'react';
+import React, { Children, cloneElement, ReactElement } from 'react';
 import BEMHelper from 'react-bem-helper';
 //@ts-ignore
 import Button from '@ndla/button';
@@ -61,13 +61,13 @@ interface Props {
 const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }: Props) => {
   const clonedChildren =
     !dangerouslySetInnerHTML && children
-      ? React.Children.map(children, (article, i) =>
-          React.cloneElement(article, {
+      ? Children.map(children, (article, i) =>
+          cloneElement(article, {
             modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
           }),
         )
       : null;
-  const childrenCount = articleCount || React.Children.count(children);
+  const childrenCount = articleCount || Children.count(children);
 
   return (
     <section {...classes('')}>

package/src/ResourceGroup/ResourceItem.tsx

@@ -14,11 +14,8 @@ import { keyframes } from '@emotion/core';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
 import { Resource } from '../types';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import * as contentTypes from '../model/ContentType';
 

package/src/ResourceGroup/ResourceList.tsx

@@ -11,7 +11,6 @@ import styled from '@emotion/styled';
 import css from '@emotion/css';
 import { keyframes } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';
 import { Resource } from '../types';

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -3,7 +3,6 @@ import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { HelpCircleDual } from '@ndla/icons/common';
-//@ts-ignore
 import Modal, { ModalBody, ModalHeader, ModalCloseButton } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';

package/src/Search/ContentTypeResult.tsx

@@ -1,13 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, ReactElement } from 'react';
 // @ts-ignore
 import Button from '@ndla/button';
-// @ts-ignore
 import Tooltip from '@ndla/tooltip';
-// @ts-ignore
 import { Additional, ChevronUp, ChevronDown } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentTypeResultType, Resource } from '../types';
 import {
@@ -24,7 +21,7 @@ import {
 } from './ContentTypeResultStyles';
 import { isPathToHighlight } from './IsPathToHighlight';
 
-const renderAdditionalIcon = (label: string, isAdditional?: boolean): React.ReactElement | null => {
+const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
   if (isAdditional && label) {
     return (
       <Tooltip tooltip={label} align="top" css={tooltipStyle}>
@@ -58,7 +55,7 @@ type Props = {
   unGrouped?: boolean;
 };
 
-const ContentTypeResult: React.FC<Props> = ({
+const ContentTypeResult = ({
   contentTypeResult,
   onNavigate,
   defaultCount,
@@ -70,7 +67,7 @@ const ContentTypeResult: React.FC<Props> = ({
   inMenu,
   animateList,
   unGrouped,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const [showAll, toggleShowAll] = useState(false);
   const showAllRef = useRef<HTMLLIElement>(null);