@ndla/ui 3.3.13 → 3.3.17

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];
 
@@ -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);

package/src/NDLAFilm/VisualElement.jsx

@@ -1,48 +0,0 @@
-/**
- * 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 PropTypes from 'prop-types';
-import { Image } from '@ndla/ui';
-import styled from '@emotion/styled';
-
-const StylediFrame = styled.iframe`
-  height: 100%;
-  width: 100%;
-  border: 0;
-  margin: 0;
-  padding: 0;
-`;
-
-const VisualElement = ({ visualElement }) => {
-  switch (visualElement.type) {
-    case 'image':
-      return <Image src={visualElement.url} alt={visualElement.alt} />;
-    case 'brightcove':
-      return (
-        <StylediFrame
-          allowfullscreen="true"
-          webkitallowfullscreen="true"
-          mozallowfullscreen="true"
-          src={visualElement.url}
-        />
-      );
-    default:
-      return null;
-  }
-};
-
-VisualElement.propTypes = {
-  visualElement: PropTypes.shape({
-    url: PropTypes.string,
-    alt: PropTypes.string,
-    type: PropTypes.string,
-  }).isRequired,
-};
-
-export default VisualElement;

package/src/NDLAFilm/interfaces.ts

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

package/src/NDLAFilm/shapes.ts

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const 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 const topicShape = PropTypes.shape({
-  id: PropTypes.string,
-  name: PropTypes.string,
-});

package/src/TopicIntroductionList/TopicIntroductionShortcuts.jsx

@@ -1,92 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { Forward } from '@ndla/icons/common';
-
-import ShortcutItem from './TopicShortcutItem';
-
-import { ShortcutShape } from '../shapes';
-
-const classes = new BEMHelper({
-  name: 'topic-shortcuts',
-  prefix: 'c-',
-});
-
-class TopicIntroductionShortcuts extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: props.alwaysExpanded,
-      returned: false,
-      showButtonText: true,
-    };
-    this.handleOnToggle = this.handleOnToggle.bind(this);
-  }
-
-  handleOnToggle(open) {
-    this.setState({
-      open,
-      showButtonText: !open,
-      returned: !open,
-    });
-  }
-
-  render() {
-    const { shortcuts, messages, id, alwaysExpanded } = this.props;
-    const { open, returned, showButtonText } = this.state;
-
-    let onMouseEnter = null;
-    let onMouseLeave = null;
-
-    let buttonView = null;
-
-    if (!alwaysExpanded) {
-      onMouseEnter = () => this.handleOnToggle(true);
-      onMouseLeave = () => this.handleOnToggle(false);
-
-      buttonView = (
-        <button
-          type="button"
-          aria-expanded={this.state.open}
-          aria-label={messages.toggleButtonText}
-          aria-controls={id}
-          {...classes('button', returned ? 're-enter' : '')}
-          onClick={() => {
-            this.handleOnToggle(!open);
-          }}>
-          <Forward />
-          {showButtonText && <span {...classes('label')}>{messages.toggleButtonText}</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>
-    );
-  }
-}
-
-TopicIntroductionShortcuts.propTypes = {
-  id: PropTypes.string.isRequired,
-  alwaysExpanded: PropTypes.bool,
-  messages: PropTypes.shape({
-    toggleButtonText: PropTypes.string.isRequired,
-  }),
-  shortcuts: PropTypes.arrayOf(ShortcutShape).isRequired,
-};
-
-TopicIntroductionShortcuts.defaultProps = {
-  alwaysExpanded: false,
-};
-
-export default TopicIntroductionShortcuts;