@ndla/ui 3.3.9 → 3.3.14

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,20 +7,21 @@
  */
 
 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({
@@ -31,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/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/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;
 };
 

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