@ndla/ui 3.3.13 → 3.3.14

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/TopicIntroductionList/{TopicIntroduction.jsx → TopicIntroduction.tsx}

@@ -7,13 +7,13 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
 import { Additional, Core } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
-import { TopicShape, ShortcutShape } from '../shapes';
 import TopicIntroductionShortcuts from './TopicIntroductionShortcuts';
+import { Shortcut, Topic } from './TopicIntroductionList';
 
 const topicClasses = new BEMHelper({
   prefix: 'c-',
@@ -21,23 +21,35 @@ const topicClasses = new BEMHelper({
   outputIsString: true,
 });
 
+interface Props {
+  additional?: boolean;
+  showAdditionalCores?: boolean;
+  topic: Topic;
+  toTopic: (id: string) => string;
+  subjectPage?: boolean;
+  shortcuts?: Shortcut[];
+  twoColumns?: boolean;
+  shortcutAlwaysExpanded?: boolean;
+  id: string;
+}
+
 export const TopicIntroduction = ({
   toTopic,
   topic,
   subjectPage,
   shortcuts,
-  messages,
   shortcutAlwaysExpanded,
-  additional,
-  showAdditionalCores,
+  additional = false,
+  showAdditionalCores = false,
   id,
-}) => {
-  const contentTypeDescription = additional ? messages.tooltipAdditionalTopic : messages.tooltipCoreTopic;
+}: Props) => {
+  const { t } = useTranslation();
+  const contentTypeDescription = t(additional ? 'resource.tooltipAdditionalTopic' : 'resource.tooltipCoreTopic');
 
   return (
     <li
       className={topicClasses('item', {
-        subjectPage,
+        subjectPage: !!subjectPage,
         additional,
         showAdditionalCores,
       })}>
@@ -52,12 +64,12 @@ export const TopicIntroduction = ({
             {contentTypeDescription}
           </span>
           {additional && (
-            <Tooltip tooltip={messages.tooltipAdditionalTopic} align="left">
+            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')} align="left">
               <Additional className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}
           {!additional && showAdditionalCores && (
-            <Tooltip tooltip={messages.tooltipCoreTopic} align="left">
+            <Tooltip tooltip={t('resource.tooltipCoreTopic')} align="left">
               <Core className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}
@@ -73,9 +85,6 @@ export const TopicIntroduction = ({
                 alwaysExpanded={shortcutAlwaysExpanded}
                 id={`${topic.id}_shortcuts`}
                 shortcuts={shortcuts}
-                messages={{
-                  toggleButtonText: messages.shortcutButtonText,
-                }}
               />
             )}
           </div>
@@ -89,25 +98,3 @@ export const TopicIntroduction = ({
     </li>
   );
 };
-
-TopicIntroduction.propTypes = {
-  additional: PropTypes.bool,
-  showAdditionalCores: PropTypes.bool,
-  messages: PropTypes.shape({
-    shortcutButtonText: PropTypes.string.isRequired,
-    tooltipAdditionalTopic: PropTypes.string,
-    tooltipCoreTopic: PropTypes.string,
-  }),
-  topic: TopicShape.isRequired,
-  toTopic: PropTypes.func.isRequired,
-  subjectPage: PropTypes.bool,
-  shortcuts: PropTypes.arrayOf(ShortcutShape),
-  twoColumns: PropTypes.bool,
-  shortcutAlwaysExpanded: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-};
-
-TopicIntroduction.defaultProps = {
-  showAdditionalCores: false,
-  additional: false,
-};

package/src/TopicIntroductionList/{TopicIntroductionList.jsx → TopicIntroductionList.tsx}

@@ -7,11 +7,9 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';
-import { TopicShape } from '../shapes';
 import { TopicIntroduction } from './TopicIntroduction';
 
 const topicClasses = new BEMHelper({
@@ -20,14 +18,42 @@ const topicClasses = new BEMHelper({
   outputIsString: true,
 });
 
+export interface Shortcut {
+  id: string | number;
+  tooltip: string;
+  contentType: string;
+  url: string;
+  count: number;
+}
+export interface Topic {
+  name: string;
+  id: string;
+  additional?: boolean;
+  shortcuts?: Shortcut[];
+  introduction: string;
+  metaImage?: {
+    url?: string;
+    alt?: string;
+  };
+}
+
+interface Props {
+  toTopic: (id: string) => string;
+  topics: Topic[];
+  twoColumns?: boolean;
+  shortcutAlwaysExpanded?: boolean;
+  showAdditionalCores?: boolean;
+  toggleAdditionalCores?: () => void;
+}
+
 const TopicIntroductionList = ({
   topics,
-  twoColumns,
-  shortcutAlwaysExpanded,
-  showAdditionalCores,
+  twoColumns = false,
+  shortcutAlwaysExpanded = false,
+  showAdditionalCores = false,
   toggleAdditionalCores,
   ...rest
-}) => {
+}: Props) => {
   const { t } = useTranslation();
   const renderAdditionalTopicsTrigger =
     !showAdditionalCores &&
@@ -47,11 +73,6 @@ const TopicIntroductionList = ({
             additional={additional}
             showAdditionalCores={showAdditionalCores}
             shortcutAlwaysExpanded={shortcutAlwaysExpanded}
-            messages={{
-              shortcutButtonText: t('resource.label'),
-              tooltipAdditionalTopic: t('resource.tooltipAdditionalTopic'),
-              tooltipCoreTopic: t('resource.tooltipCoreTopic'),
-            }}
             id={`${topic.id}_${index}`}
           />
         );
@@ -69,19 +90,4 @@ const TopicIntroductionList = ({
   );
 };
 
-TopicIntroductionList.propTypes = {
-  toTopic: PropTypes.func.isRequired,
-  topics: PropTypes.arrayOf(TopicShape).isRequired,
-  twoColumns: PropTypes.bool,
-  shortcutAlwaysExpanded: PropTypes.bool,
-  showAdditionalCores: PropTypes.bool,
-  toggleAdditionalCores: PropTypes.func.isRequired,
-};
-
-TopicIntroductionList.defaultProps = {
-  twoColumns: false,
-  shortcutAlwaysExpanded: false,
-  showAdditionalCores: false,
-};
-
 export default TopicIntroductionList;