@ndla/ui 3.3.9 → 3.3.14

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/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

@@ -115,8 +115,9 @@ export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';
 
-export { MessageBox } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
+export { CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
@@ -157,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/messages-en.ts

@@ -313,6 +313,20 @@ const messages = {
       h5p: 'Interactive',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'This course is not updated to the current curriculum. Follow this link to find the updated version of the course: ',
+    updateBrowser:
+      'Your browser is outdated. Update it, or find a safe and updated browser on https://browsehappy.com.',
+    noContent: 'We are sorry, but we do not yet offer any program courses.',
+    feide: 'This resource is accessible only to teachers who are logged in with Feide.',
+    resources:
+      'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
+    beta: 'This course is in beta.',
+    outdatedSubject: 'This topic is part of a course that is not updated to the current curriculum.',
+    newVersion:
+      'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
+  },
   article: {
     edition: 'Edition',
     publisher: 'Publisher',

package/src/locale/messages-nb.ts

@@ -312,6 +312,20 @@ const messages = {
       h5p: 'Interaktiv',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'Dette faget følger en utgått læreplan. Gå til faget som er oppdatert etter gjeldende læreplan:',
+    updateBrowser:
+      'Nettleseren din er utdatert. Oppdater den, eller finn en trygg og oppdatert nettleser på https://browsehappy.com.',
+    noContent: 'Vi har dessverre ikke noen programfag ennå.',
+    feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
+    resources:
+      'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet hører til et fag som ikke er oppdatert etter gjeldende læreplan.',
+    newVersion:
+      'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgave',

package/src/locale/messages-nn.ts

@@ -313,6 +313,20 @@ const messages = {
       h5p: 'Interaktiv',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'Dette faget følgjer ein utgått læreplan. Gå til faget som er oppdatert etter gjeldande læreplan: ',
+    updateBrowser:
+      'Nettlesaren din er utdatert. Oppdater han, eller finn ein trygg og oppdatert nettlesar på https://browsehappy.com. ',
+    noContent: 'Vi har dessverre ikkje nokon programfag enno.',
+    feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
+    resources:
+      'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet høyrer til eit fag som ikkje er oppdatert etter gjeldande læreplan.',
+    newVersion:
+      'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgåve',

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

@@ -23,9 +23,9 @@ type ResourceTypes = {
 };
 
 export type Resource = {
-  id: string;
+  id: string | number;
   name: string;
-  contentUri: string;
+  contentUri?: string;
   path: string;
   primary?: boolean;
   rank?: number;

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/MediaList/MediaList.jsx

@@ -1,182 +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 {
-  LicenseDescription,
-  getLicenseByAbbreviation,
-  resourceTypes,
-  getResourceTypeNamespace,
-  isCreativeCommonsLicense,
-  metaTypes,
-} from '@ndla/licenses';
-import BEMHelper from 'react-bem-helper';
-import { uuid } from '@ndla/util';
-
-const oClasses = new BEMHelper({
-  name: 'media',
-  prefix: 'o-',
-});
-
-const cClasses = new BEMHelper({
-  name: 'medialist',
-  prefix: 'c-',
-});
-
-export const MediaList = ({ children }) => <ul {...cClasses()}>{children}</ul>;
-
-MediaList.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaListItem = ({ children }) => (
-  <li {...oClasses(null, null, cClasses('item').className)}>{children}</li>
-);
-
-MediaListItem.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaListItemImage = ({ children }) => (
-  <div {...oClasses('img', null, cClasses('img').className)}>
-    <div>{children}</div>
-  </div>
-);
-
-MediaListItemImage.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaListCCLink = ({ children, url }) => (
-  <a className="c-figure-license__link" target="_blank" rel="noopener noreferrer license" href={url}>
-    {children}
-  </a>
-);
-
-MediaListCCLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  url: PropTypes.string.isRequired,
-};
-
-MediaListCCLink.defaultProps = {
-  language: 'no',
-};
-
-export const MediaListItemBody = ({
-  children,
-  license: licenseAbbreviation,
-  messages,
-  title,
-  locale,
-  resourceUrl,
-  resourceType,
-}) => {
-  const license = getLicenseByAbbreviation(licenseAbbreviation, locale);
-  const containerProps = isCreativeCommonsLicense(license.rights)
-    ? {
-        ...oClasses('body', null, cClasses('body').className),
-        'xmlns:cc': 'https://creativecommons.org/ns#',
-        'xmlns:dct': 'http://purl.org/dc/terms/',
-        about: resourceUrl,
-      }
-    : {
-        ...oClasses('body', null, cClasses('body').className),
-      };
-
-  const metaResourceType = getResourceTypeNamespace(resourceType);
-
-  return (
-    <div {...containerProps}>
-      {metaResourceType && <span rel="dct:type" href={metaResourceType} style={{ display: 'none' }} />}
-      {title ? <h3 className="c-medialist__title">{title} </h3> : null}
-      <LicenseDescription
-        withDescription
-        locale={locale}
-        messages={messages}
-        licenseRights={license.rights}
-        highlightCC
-      />
-      <MediaListCCLink url={license.url}>{license.linkText}</MediaListCCLink>
-      {children}
-    </div>
-  );
-};
-
-MediaListItemBody.propTypes = {
-  children: PropTypes.node.isRequired,
-  license: PropTypes.string.isRequired,
-  locale: PropTypes.string.isRequired,
-  resourceUrl: PropTypes.string,
-  resourceType: PropTypes.oneOf(Object.keys(resourceTypes).map((key) => resourceTypes[key])),
-  messages: PropTypes.shape({
-    modelPremission: PropTypes.string,
-  }),
-  title: PropTypes.string,
-};
-
-MediaListItemBody.defaultProps = {
-  resourceUrl: '', // defaults to current page
-};
-
-export const MediaListItemActions = ({ children }) => <div {...cClasses('actions')}>{children}</div>;
-
-MediaListItemActions.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const isLink = (text) => text.startsWith('http') || text.startsWith('https');
-
-export const HandleLink = ({ text, children }) => {
-  if (isLink(text)) {
-    return (
-      <a href={text} target="_blank" rel="noopener noreferrer">
-        {children}
-      </a>
-    );
-  }
-  return <span>{children}</span>;
-};
-
-HandleLink.propTypes = {
-  text: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-const attributionTypes = [metaTypes.author, metaTypes.copyrightHolder, metaTypes.contributor];
-
-export const MediaListItemMeta = ({ items }) => {
-  const attributionItems = items.filter((item) => attributionTypes.some((type) => type === item.metaType));
-  const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(', ');
-
-  return (
-    <ul {...cClasses('actions')} property="cc:attributionName" content={attributionMeta}>
-      {items.map((item) => (
-        <li key={uuid()} className="c-medialist__meta-item">
-          {item.label}: <HandleLink text={item.description}>{item.description}</HandleLink>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-const mediaListItemShape = PropTypes.arrayOf(
-  PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    metaType: PropTypes.oneOf(Object.keys(metaTypes).map((key) => metaTypes[key])).isRequired,
-  }),
-);
-
-MediaListItemMeta.propTypes = {
-  items: mediaListItemShape,
-};
-
-MediaListItemMeta.defaultProps = {
-  items: [],
-};