@ndla/ui 3.3.12 → 3.3.16

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;

package/src/TopicIntroductionList/TopicIntroductionShortcuts.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import BEMHelper from 'react-bem-helper';
+import { Forward } from '@ndla/icons/common';
+
+import ShortcutItem from './TopicShortcutItem';
+
+import { Shortcut } from './TopicIntroductionList';
+
+const classes = new BEMHelper({
+  name: 'topic-shortcuts',
+  prefix: 'c-',
+});
+
+interface Props {
+  id: string;
+  alwaysExpanded?: boolean;
+  shortcuts: Shortcut[];
+}
+
+const TopicIntroductionShortcuts = ({ id, alwaysExpanded = false, shortcuts }: Props) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(alwaysExpanded);
+  const [returned, setReturned] = useState(false);
+  const [showButtonText, setShowButtonText] = useState(true);
+
+  const handleOnToggle = (newOpen: boolean) => {
+    setOpen(newOpen);
+    setShowButtonText(!newOpen);
+    setReturned(!newOpen);
+  };
+
+  let onMouseEnter = undefined;
+  let onMouseLeave = undefined;
+
+  let buttonView = null;
+
+  if (!alwaysExpanded) {
+    onMouseEnter = () => handleOnToggle(true);
+    onMouseLeave = () => handleOnToggle(false);
+
+    buttonView = (
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-label={t('resource.label')}
+        aria-controls={id}
+        {...classes('button', returned ? 're-enter' : '')}
+        onClick={() => handleOnToggle(!open)}>
+        <Forward />
+        {showButtonText && <span {...classes('label')}>{t('resource.label')}</span>}
+      </button>
+    );
+  }
+  return (
+    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...classes()}>
+      {buttonView}
+      {open && (
+        <ul className={classes('list', open ? 'visible' : '').className}>
+          {shortcuts.map((shortcut) => (
+            <li {...classes('item')} key={shortcut.id}>
+              <ShortcutItem shortcut={shortcut} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default TopicIntroductionShortcuts;

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

@@ -1,19 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import ContentTypeBadge from '../ContentTypeBadge';
-
-import { ShortcutShape } from '../shapes';
+import { Shortcut } from './TopicIntroductionList';
 
 const classes = new BEMHelper({
   name: 'topic-shortcuts',
   prefix: 'c-',
 });
 
-const ShortcutItem = ({ shortcut: { id, tooltip, contentType, url, count } }) => {
+interface Props {
+  shortcut: Shortcut;
+}
+const ShortcutItem = ({ shortcut: { id, tooltip, contentType, url, count } }: Props) => {
   const { t } = useTranslation();
   return (
     <Tooltip
@@ -29,13 +30,4 @@ const ShortcutItem = ({ shortcut: { id, tooltip, contentType, url, count } }) =>
   );
 };
 
-ShortcutItem.propTypes = {
-  shortcut: ShortcutShape.isRequired,
-  disableToolTip: PropTypes.bool,
-};
-
-ShortcutItem.defaultProps = {
-  disableToolTip: false,
-};
-
 export default ShortcutItem;

package/src/Translation/TranslationBox.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-//@ts-ignore
 import { ArticleTabs } from '@ndla/tabs';
 
 interface Props {

package/src/User/AuthModal.tsx

@@ -9,7 +9,6 @@
 import React, { ReactElement, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import Modal, { ModalCloseButton } from '@ndla/modal';
 // @ts-ignore
 import Button from '@ndla/button';

package/src/index-javascript.js

@@ -23,16 +23,6 @@ export {
   ToggleSearchButton,
 } from './Search';
 
-export {
-  default as ContentTypeBadge,
-  SubjectMaterialBadge,
-  TasksAndActivitiesBadge,
-  AssessmentResourcesBadge,
-  LearningPathBadge,
-  SubjectBadge,
-  ExternalLearningResourcesBadge,
-  SourceMaterialBadge,
-} from './ContentTypeBadge';
 export { default as TopicIntroductionList } from './TopicIntroductionList';
 export { default as TopicMenu, TopicMenuButton } from './TopicMenu';
 export {
@@ -43,24 +33,4 @@ export {
   CompetenceGoalsDialog,
 } from './CompetenceGoals';
 
-export {
-  MediaList,
-  MediaListItem,
-  MediaListItemBody,
-  MediaListItemActions,
-  MediaListItemImage,
-  MediaListItemMeta,
-} from './MediaList';
-
 export { EmbeddedTwitter, EmbeddedFacebook, EmbeddedFacebookPage } from './Embedded';
-
-export { DisplayOnPageYOffset } from './Animation';
-
-export {
-  FilmSlideshow,
-  MovieGrid,
-  AboutNdlaFilm,
-  FilmMovieSearch,
-  FilmMovieList,
-  AllMoviesAlphabetically,
-} from './NDLAFilm';

package/src/index.ts

@@ -158,6 +158,37 @@ export { default as ResourceGroup } from './ResourceGroup';
 
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
 
+export {
+  FilmSlideshow,
+  MovieGrid,
+  AboutNdlaFilm,
+  FilmMovieSearch,
+  FilmMovieList,
+  AllMoviesAlphabetically,
+} from './NDLAFilm';
+
+export { DisplayOnPageYOffset } from './Animation';
+
+export {
+  MediaList,
+  MediaListItem,
+  MediaListItemBody,
+  MediaListItemActions,
+  MediaListItemImage,
+  MediaListItemMeta,
+} from './MediaList';
+
+export {
+  default as ContentTypeBadge,
+  SubjectMaterialBadge,
+  TasksAndActivitiesBadge,
+  AssessmentResourcesBadge,
+  LearningPathBadge,
+  SubjectBadge,
+  ExternalLearningResourcesBadge,
+  SourceMaterialBadge,
+} from './ContentTypeBadge';
+
 export {
   SubjectAbout,
   SubjectArchive,

package/src/locale/LocaleProvider.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { i18nInstance } from '../i18n';
 import { Locale } from '../types';
 
 type Props = {
   locale: Locale;
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 const InitI18nWrapper = ({ locale, children }: Props) => {

package/src/shapes.js

@@ -69,13 +69,6 @@ export const ResourceShape = PropTypes.shape({
   type: PropTypes.string,
 });
 
-export const ShortcutShape = PropTypes.shape({
-  tooltip: PropTypes.string.isRequired,
-  contentType: PropTypes.string.isRequired,
-  url: PropTypes.string.isRequired,
-  count: PropTypes.number.isRequired,
-});
-
 export const ContentTypeShape = PropTypes.oneOf([
   contentTypes.SUBJECT_MATERIAL,
   contentTypes.TASKS_AND_ACTIVITIES,

package/src/types.ts

@@ -6,6 +6,8 @@
  *
  */
 
+import { ReactNode } from 'react';
+
 const locales = ['nb', 'nn', 'en'] as const;
 export type Locale = typeof locales[number];
 
@@ -23,9 +25,9 @@ type ResourceTypes = {
 };
 
 export type Resource = {
-  id: string;
+  id: string | number;
   name: string;
-  contentUri: string;
+  contentUri?: string;
   path: string;
   primary?: boolean;
   rank?: number;
@@ -114,5 +116,5 @@ export type CompetenceGoalsItemType = {
 
 export type NotionMedia = {
   type: 'video' | 'other';
-  element: React.ReactNode;
+  element: ReactNode;
 };

package/es/NDLAFilm/shapes.js

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-export var movieShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  metaDescription: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  metaImage: PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    alt: PropTypes.string.isRequired
-  }),
-  path: PropTypes.string.isRequired
-});
-export var topicShape = PropTypes.shape({
-  id: PropTypes.string,
-  name: PropTypes.string
-});

package/lib/NDLAFilm/interfaces.d.ts

@@ -1,10 +0,0 @@
-export interface NDLAMovie {
-    id: string;
-    metaDescription: string;
-    title: string;
-    metaImage: {
-        url: string;
-        alt: string;
-    };
-    path: string;
-}

package/lib/NDLAFilm/interfaces.js

@@ -1 +0,0 @@
-"use strict";

package/lib/NDLAFilm/shapes.d.ts

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-export declare const movieShape: PropTypes.Requireable<PropTypes.InferProps<{
-    id: PropTypes.Validator<string>;
-    metaDescription: PropTypes.Validator<string>;
-    title: PropTypes.Validator<string>;
-    metaImage: PropTypes.Requireable<PropTypes.InferProps<{
-        url: PropTypes.Validator<string>;
-        alt: PropTypes.Validator<string>;
-    }>>;
-    path: PropTypes.Validator<string>;
-}>>;
-export declare const topicShape: PropTypes.Requireable<PropTypes.InferProps<{
-    id: PropTypes.Requireable<string>;
-    name: PropTypes.Requireable<string>;
-}>>;

package/lib/NDLAFilm/shapes.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.topicShape = exports.movieShape = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var movieShape = _propTypes["default"].shape({
-  id: _propTypes["default"].string.isRequired,
-  metaDescription: _propTypes["default"].string.isRequired,
-  title: _propTypes["default"].string.isRequired,
-  metaImage: _propTypes["default"].shape({
-    url: _propTypes["default"].string.isRequired,
-    alt: _propTypes["default"].string.isRequired
-  }),
-  path: _propTypes["default"].string.isRequired
-});
-
-exports.movieShape = movieShape;
-
-var topicShape = _propTypes["default"].shape({
-  id: _propTypes["default"].string,
-  name: _propTypes["default"].string
-});
-
-exports.topicShape = topicShape;

package/src/NDLAFilm/FilmMovieSearch.jsx

@@ -1,66 +0,0 @@
-/**
- * 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 PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { OneColumn } from '@ndla/ui';
-import SafeLink from '@ndla/safelink';
-import { withTranslation } from 'react-i18next';
-import CategorySelect from './CategorySelect';
-
-import { topicShape } from './shapes';
-
-const classes = new BEMHelper({
-  name: 'film-moviesearch',
-  prefix: 'c-',
-});
-
-const classesMovieList = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-',
-});
-
-const FilmMovieSearch = ({ topics, t, ...props }) => (
-  <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 {...props} />
-    </OneColumn>
-  </div>
-);
-
-FilmMovieSearch.propTypes = {
-  topics: PropTypes.arrayOf(topicShape),
-  onChangeResourceType: PropTypes.func.isRequired,
-  resourceTypeSelected: PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.string,
-  }),
-  ariaControlId: PropTypes.string.isRequired,
-  t: PropTypes.func.isRequired,
-};
-
-FilmMovieSearch.defaultProps = {
-  topics: [],
-};
-
-export default withTranslation()(FilmMovieSearch);

package/src/NDLAFilm/MovieGrid.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { css } from '@emotion/core';
-import { withTranslation } from 'react-i18next';
-import FilmContentCard from './FilmContentCard';
-
-const movieListClasses = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-',
-});
-
-const MovieGrid = ({
-  resourceTypeName,
-  fetchingMoviesByType,
-  moviesByType,
-  resourceTypes,
-  loadingPlaceholderHeight,
-  autoSizedProps,
-  resizeThumbnailImages,
-  t,
-}) => (
-  <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>
-);
-
-MovieGrid.propTypes = {
-  autoSizedProps: PropTypes.shape({}),
-  resourceTypeName: PropTypes.shape({
-    name: PropTypes.string,
-  }),
-  fetchingMoviesByType: PropTypes.bool,
-  moviesByType: PropTypes.array,
-  classes: PropTypes.func,
-  resourceTypes: PropTypes.array,
-  loadingPlaceholderHeight: PropTypes.string,
-};
-
-export default withTranslation()(MovieGrid);