@ndla/ui 3.3.11 → 3.3.15

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -15,7 +15,7 @@ import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from
 import SafeLink from '@ndla/safelink';
 // @ts-ignore
 import { makeSrcQueryString } from '../Image';
-import { movieType } from './types';
+import { MovieType } from './types';
 import { isLetter } from './isLetter';
 const IMAGE_WIDTH = 143;
 
@@ -158,7 +158,7 @@ const StyledSafeLink = styled(SafeLink)<isIEProps>`
 `;
 
 interface Props {
-  movies: movieType[];
+  movies: MovieType[];
   locale: string;
 }
 
@@ -231,7 +231,7 @@ const AllMoviesAlphabetically: React.FunctionComponent<Props> = ({ movies, local
 
   return (
     <StyledWrapper ref={wrapperRef}>
-      {movies.map((movie: movieType, index: number) => {
+      {movies.map((movie: MovieType, index: number) => {
         const currentLetter = movie.title.substr(0, 1);
         const isNewLetter = currentLetter.localeCompare(previousLetter, locale) === 1 && isLetter(movie.title);
         previousLetter = currentLetter;

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

@@ -1,28 +1,40 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import BEMHelper from 'react-bem-helper';
 import FocusTrapReact from 'focus-trap-react';
 import { ChevronDown } from '@ndla/icons/common';
-import { withTranslation } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { MovieResourceType } from './types';
 
 const classes = new BEMHelper({
   name: 'film-moviesearch',
   prefix: 'c-',
 });
 
-class CategorySelect extends React.Component {
-  constructor(props) {
+interface Props extends WithTranslation {
+  resourceTypes: MovieResourceType[];
+  resourceTypeSelected?: MovieResourceType;
+  ariaControlId?: string;
+  onChangeResourceType: (resourceId?: string) => void;
+}
+
+interface State {
+  resourceTypesIsOpen: boolean;
+}
+class CategorySelect extends Component<Props, State> {
+  references: Record<string, HTMLButtonElement | null>;
+  constructor(props: Props) {
     super(props);
     this.state = {
       resourceTypesIsOpen: false,
     };
+    this.references = {};
     this.createRef = this.createRef.bind(this);
     this.openSelect = this.openSelect.bind(this);
     this.onSelect = this.onSelect.bind(this);
   }
 
-  createRef(el, name) {
-    this[name] = el;
+  createRef(el: HTMLButtonElement | null, name: string) {
+    this.references[name] = el;
   }
 
   openSelect() {
@@ -32,14 +44,14 @@ class CategorySelect extends React.Component {
         resourceTypesIsOpen: true,
       },
       () => {
-        if (resourceTypeSelected && this[resourceTypeSelected.id]) {
-          this[resourceTypeSelected.id].focus();
+        if (resourceTypeSelected && this.references[resourceTypeSelected.id]) {
+          this.references[resourceTypeSelected.id]?.focus();
         }
       },
     );
   }
 
-  onSelect(val) {
+  onSelect(val?: string) {
     this.props.onChangeResourceType(val);
     this.setState({
       resourceTypesIsOpen: false,
@@ -97,7 +109,7 @@ class CategorySelect extends React.Component {
                   ref={(el) => this.createRef(el, resourceType.id)}
                   onClick={() => this.onSelect(resourceType.id)}
                   {...classes('dropdown-button', {
-                    selected: resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
+                    selected: !!resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
                   })}
                   data-id={resourceType.id}
                   key={resourceType.id}>
@@ -112,13 +124,4 @@ class CategorySelect extends React.Component {
   }
 }
 
-CategorySelect.propTypes = {
-  resourceTypes: PropTypes.arrayOf(PropTypes.object),
-  resourceTypeSelected: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  }),
-  ariaControlId: PropTypes.string,
-};
-
 export default withTranslation()(CategorySelect);

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

@@ -1,11 +1,20 @@
 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 +22,8 @@ const FilmContentCard = ({
   distanceBetweenItems,
   resourceTypes,
   resizeThumbnailImages,
-  hideTags,
-}) => {
+  hideTags = false,
+}: Props) => {
   let backgroundImage = `${(metaImage && metaImage.url) || ''}`;
   if (resizeThumbnailImages && metaImage) {
     backgroundImage += '?width=480';
@@ -55,7 +64,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 +90,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 +114,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

@@ -13,15 +13,15 @@ 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 +32,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}

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 {
+export interface MovieType {
   id: string;
   metaDescription: string;
+  resourceTypes: MovieResourceType[];
   metaImage: {
     alt: string;
     url: string;
   };
-  movieTypes: {
-    [key: string]: boolean;
-  };
   path: string;
   title: string;
 }
+
+export interface MovieResourceType {
+  id: string;
+  name: string;
+}

package/src/Search/SearchResultSleeve.tsx

@@ -7,20 +7,10 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { History } from 'history';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import {
-  ChevronDown,
-  ChevronUp,
-  Esc,
-  KeyboardReturn,
-  Search as SearchIcon,
-  Wrench,
-  // @ts-ignore
-} from '@ndla/icons/common';
+import { ChevronDown, ChevronUp, Esc, KeyboardReturn, Search as SearchIcon, Wrench } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import { useTranslation } from 'react-i18next';
 import ContentTypeResult from './ContentTypeResult';
 import { highlightStyle } from './ContentTypeResultStyles';
@@ -218,14 +208,13 @@ type Props = {
     to: string;
   };
   onNavigate?: VoidFunction;
-  infoText: string;
-  ignoreContentTypeBadge: boolean;
+  infoText?: string;
+  ignoreContentTypeBadge?: boolean;
   searchString: string;
   loading: boolean;
   frontpage?: boolean;
-  history: History;
-  suggestion: string;
-  suggestionUrl: string;
+  suggestion?: string;
+  suggestionUrl?: string;
 };
 
 const SearchResultSleeve: React.FC<Props> = ({
@@ -238,7 +227,6 @@ const SearchResultSleeve: React.FC<Props> = ({
   searchString,
   loading,
   frontpage,
-  history,
   suggestion,
   suggestionUrl,
 }) => {
@@ -332,7 +320,7 @@ const SearchResultSleeve: React.FC<Props> = ({
               <strong ref={searchAllRef}>{searchString}</strong>
               <small>{t('welcomePage.searchAllInfo')}</small>
             </StyledSearchLink>
-            {suggestion && (
+            {suggestion && suggestionUrl && (
               <StyledSearchLink css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle} to={suggestionUrl}>
                 <SearchIcon className="c-icon--22" />
                 <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
@@ -342,7 +330,7 @@ const SearchResultSleeve: React.FC<Props> = ({
           </SearchLinkContainer>
           {result.map((contentTypeResult: ContentTypeResultType) => (
             <ContentTypeResult
-              ignoreContentTypeBadge={ignoreContentTypeBadge}
+              ignoreContentTypeBadge={!!ignoreContentTypeBadge}
               onNavigate={onNavigate}
               contentTypeResult={contentTypeResult}
               resourceToLinkProps={resourceToLinkProps}

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