@ndla/ui 3.3.11 → 3.3.15

package/lib/index-javascript.js

@@ -95,54 +95,6 @@ Object.defineProperty(exports, "ToggleSearchButton", {
     return _Search.ToggleSearchButton;
   }
 });
-Object.defineProperty(exports, "ContentTypeBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge["default"];
-  }
-});
-Object.defineProperty(exports, "SubjectMaterialBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SubjectMaterialBadge;
-  }
-});
-Object.defineProperty(exports, "TasksAndActivitiesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.TasksAndActivitiesBadge;
-  }
-});
-Object.defineProperty(exports, "AssessmentResourcesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.AssessmentResourcesBadge;
-  }
-});
-Object.defineProperty(exports, "LearningPathBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.LearningPathBadge;
-  }
-});
-Object.defineProperty(exports, "SubjectBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SubjectBadge;
-  }
-});
-Object.defineProperty(exports, "ExternalLearningResourcesBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.ExternalLearningResourcesBadge;
-  }
-});
-Object.defineProperty(exports, "SourceMaterialBadge", {
-  enumerable: true,
-  get: function get() {
-    return _ContentTypeBadge.SourceMaterialBadge;
-  }
-});
 Object.defineProperty(exports, "TopicIntroductionList", {
   enumerable: true,
   get: function get() {
@@ -191,42 +143,6 @@ Object.defineProperty(exports, "CompetenceGoalsDialog", {
     return _CompetenceGoals.CompetenceGoalsDialog;
   }
 });
-Object.defineProperty(exports, "MediaList", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaList;
-  }
-});
-Object.defineProperty(exports, "MediaListItem", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItem;
-  }
-});
-Object.defineProperty(exports, "MediaListItemBody", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemBody;
-  }
-});
-Object.defineProperty(exports, "MediaListItemActions", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemActions;
-  }
-});
-Object.defineProperty(exports, "MediaListItemImage", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemImage;
-  }
-});
-Object.defineProperty(exports, "MediaListItemMeta", {
-  enumerable: true,
-  get: function get() {
-    return _MediaList.MediaListItemMeta;
-  }
-});
 Object.defineProperty(exports, "EmbeddedTwitter", {
   enumerable: true,
   get: function get() {
@@ -245,71 +161,21 @@ Object.defineProperty(exports, "EmbeddedFacebookPage", {
     return _Embedded.EmbeddedFacebookPage;
   }
 });
-Object.defineProperty(exports, "DisplayOnPageYOffset", {
-  enumerable: true,
-  get: function get() {
-    return _Animation.DisplayOnPageYOffset;
-  }
-});
-Object.defineProperty(exports, "FilmSlideshow", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmSlideshow;
-  }
-});
-Object.defineProperty(exports, "MovieGrid", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.MovieGrid;
-  }
-});
-Object.defineProperty(exports, "AboutNdlaFilm", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.AboutNdlaFilm;
-  }
-});
-Object.defineProperty(exports, "FilmMovieSearch", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmMovieSearch;
-  }
-});
-Object.defineProperty(exports, "FilmMovieList", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.FilmMovieList;
-  }
-});
-Object.defineProperty(exports, "AllMoviesAlphabetically", {
-  enumerable: true,
-  get: function get() {
-    return _NDLAFilm.AllMoviesAlphabetically;
-  }
-});
 
 var _Filter = require("./Filter");
 
 var _Search = require("./Search");
 
-var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
-
 var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
 
 var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));
 
 var _CompetenceGoals = _interopRequireWildcard(require("./CompetenceGoals"));
 
-var _MediaList = require("./MediaList");
-
 var _Embedded = require("./Embedded");
 
-var _Animation = require("./Animation");
-
-var _NDLAFilm = require("./NDLAFilm");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/index.d.ts

@@ -64,6 +64,10 @@ export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 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, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';

package/lib/index.js

@@ -124,6 +124,27 @@ var _exportNames = {
   OneColumn: true,
   PageContainer: true,
   Content: true,
+  FilmSlideshow: true,
+  MovieGrid: true,
+  AboutNdlaFilm: true,
+  FilmMovieSearch: true,
+  FilmMovieList: true,
+  AllMoviesAlphabetically: true,
+  DisplayOnPageYOffset: true,
+  MediaList: true,
+  MediaListItem: true,
+  MediaListItemBody: true,
+  MediaListItemActions: true,
+  MediaListItemImage: true,
+  MediaListItemMeta: true,
+  ContentTypeBadge: true,
+  SubjectMaterialBadge: true,
+  TasksAndActivitiesBadge: true,
+  AssessmentResourcesBadge: true,
+  LearningPathBadge: true,
+  SubjectBadge: true,
+  ExternalLearningResourcesBadge: true,
+  SourceMaterialBadge: true,
   SubjectAbout: true,
   SubjectArchive: true,
   SubjectCarousel: true,
@@ -854,6 +875,132 @@ Object.defineProperty(exports, "Content", {
     return _Layout.Content;
   }
 });
+Object.defineProperty(exports, "FilmSlideshow", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmSlideshow;
+  }
+});
+Object.defineProperty(exports, "MovieGrid", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.MovieGrid;
+  }
+});
+Object.defineProperty(exports, "AboutNdlaFilm", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.AboutNdlaFilm;
+  }
+});
+Object.defineProperty(exports, "FilmMovieSearch", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmMovieSearch;
+  }
+});
+Object.defineProperty(exports, "FilmMovieList", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.FilmMovieList;
+  }
+});
+Object.defineProperty(exports, "AllMoviesAlphabetically", {
+  enumerable: true,
+  get: function get() {
+    return _NDLAFilm.AllMoviesAlphabetically;
+  }
+});
+Object.defineProperty(exports, "DisplayOnPageYOffset", {
+  enumerable: true,
+  get: function get() {
+    return _Animation.DisplayOnPageYOffset;
+  }
+});
+Object.defineProperty(exports, "MediaList", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaList;
+  }
+});
+Object.defineProperty(exports, "MediaListItem", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItem;
+  }
+});
+Object.defineProperty(exports, "MediaListItemBody", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemBody;
+  }
+});
+Object.defineProperty(exports, "MediaListItemActions", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemActions;
+  }
+});
+Object.defineProperty(exports, "MediaListItemImage", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemImage;
+  }
+});
+Object.defineProperty(exports, "MediaListItemMeta", {
+  enumerable: true,
+  get: function get() {
+    return _MediaList.MediaListItemMeta;
+  }
+});
+Object.defineProperty(exports, "ContentTypeBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge["default"];
+  }
+});
+Object.defineProperty(exports, "SubjectMaterialBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SubjectMaterialBadge;
+  }
+});
+Object.defineProperty(exports, "TasksAndActivitiesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.TasksAndActivitiesBadge;
+  }
+});
+Object.defineProperty(exports, "AssessmentResourcesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.AssessmentResourcesBadge;
+  }
+});
+Object.defineProperty(exports, "LearningPathBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.LearningPathBadge;
+  }
+});
+Object.defineProperty(exports, "SubjectBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SubjectBadge;
+  }
+});
+Object.defineProperty(exports, "ExternalLearningResourcesBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.ExternalLearningResourcesBadge;
+  }
+});
+Object.defineProperty(exports, "SourceMaterialBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ContentTypeBadge.SourceMaterialBadge;
+  }
+});
 Object.defineProperty(exports, "SubjectAbout", {
   enumerable: true,
   get: function get() {
@@ -1102,6 +1249,14 @@ var _ResourceGroup = _interopRequireDefault(require("./ResourceGroup"));
 
 var _Layout = _interopRequireWildcard(require("./Layout"));
 
+var _NDLAFilm = require("./NDLAFilm");
+
+var _Animation = require("./Animation");
+
+var _MediaList = require("./MediaList");
+
+var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
+
 var _Subject = require("./Subject");
 
 var _ContentCard = _interopRequireDefault(require("./ContentCard"));

package/lib/shapes.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ShortcutShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
+exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -100,15 +100,6 @@ var ResourceShape = _propTypes["default"].shape({
 
 exports.ResourceShape = ResourceShape;
 
-var ShortcutShape = _propTypes["default"].shape({
-  tooltip: _propTypes["default"].string.isRequired,
-  contentType: _propTypes["default"].string.isRequired,
-  url: _propTypes["default"].string.isRequired,
-  count: _propTypes["default"].number.isRequired
-});
-
-exports.ShortcutShape = ShortcutShape;
-
 var ContentTypeShape = _propTypes["default"].oneOf([contentTypes.SUBJECT_MATERIAL, contentTypes.TASKS_AND_ACTIVITIES, contentTypes.ASSESSMENT_RESOURCES, contentTypes.SUBJECT, contentTypes.EXTERNAL_LEARNING_RESOURCES, contentTypes.SOURCE_MATERIAL, contentTypes.LEARNING_PATH, contentTypes.TOPIC, 'beta', 'ndla-film', 'ndla-film has-image']);
 
 exports.ContentTypeShape = ContentTypeShape;

package/lib/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.3.11",
+  "version": "3.3.15",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.1.4",
-    "@ndla/carousel": "^1.1.2",
-    "@ndla/core": "^0.7.2",
+    "@ndla/button": "^1.1.5",
+    "@ndla/carousel": "^1.1.3",
+    "@ndla/core": "^0.7.3",
     "@ndla/hooks": "^1.0.7",
     "@ndla/icons": "^1.4.1",
-    "@ndla/licenses": "^1.1.6",
-    "@ndla/modal": "^1.1.18",
+    "@ndla/licenses": "^1.1.7",
+    "@ndla/modal": "^1.1.20",
     "@ndla/safelink": "^1.0.9",
-    "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.15",
-    "@ndla/tooltip": "^0.2.49",
+    "@ndla/switch": "^0.0.33",
+    "@ndla/tabs": "^1.0.16",
+    "@ndla/tooltip": "^0.2.50",
     "@ndla/util": "^2.0.1",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "931121c140745578c341fff16a8d8eeb6fd918ee"
+  "gitHead": "2f41952b351cc94317b452ef956efa82d706bd30"
 }

package/src/Figure/Figure.tsx

@@ -121,8 +121,9 @@ interface FigureCaptionProps {
 
 const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
   const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
+  const right = ['small-right', 'xsmall-right'].includes(type);
   return (
-    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe }, typeClass)} {...rest}>
+    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe, right }, typeClass)} {...rest}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );

package/src/Figure/component.figure.scss

@@ -17,6 +17,25 @@
 **/
 
 /* 1. */
+
+@keyframes rightFloatTransition {
+  0% {
+    left: 75%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
+@keyframes smallRightFloatTransition {
+  0% {
+    left: 78.5%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
 .c-figure {
   img {
     width: 100%;
@@ -51,6 +70,21 @@
     padding-bottom: $spacing--large;
     margin-bottom: 0;
   }
+  &--right {
+    &.expanded {
+      @include mq($from: desktop) {
+        animation-name: rightFloatTransition;
+        animation-duration: 0.4s;
+      }
+
+      &[data-sizetype='xsmall-right'] {
+        @include mq($from: desktop) {
+          animation-name: smallRightFloatTransition;
+          animation-duration: 0.4s;
+        }
+      }
+    }
+  }
   &.expanded {
     .c-figure__caption--hidden-caption {
       display: block;
@@ -74,7 +108,7 @@
   background-color: $white;
   padding: $spacing--small 0;
   display: block;
-  border-bottom: 1px solid #D1D6DB;
+  border-bottom: 1px solid #d1d6db;
 }
 
 .c-figure__caption--hidden-caption {
@@ -119,7 +153,7 @@
     margin-bottom: $spacing--small;
   }
   p {
-    margin:0;
+    margin: 0;
   }
 }
 
@@ -179,7 +213,7 @@
   padding: $spacing--small;
   transition: all 0.3s ease-out;
   background: rgba($white, 0.2);
-  border:0;
+  border: 0;
 
   .expanded-icon {
     display: none;

package/src/Filter/FilterButtons.tsx

@@ -12,9 +12,7 @@ import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-// @ts-ignore
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
-// @ts-ignore
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 
 // @ts-ignore

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -73,7 +73,7 @@ const StyledLetterSpacing = styled.span`
 type subjectProps = {
   name: string;
   url?: string;
-  path: string;
+  path?: string;
   id?: string;
 };
 type categoryProps = {
@@ -160,7 +160,7 @@ const renderList = (
                           onNavigate();
                         }
                       }}
-                      to={subject.url || subject.path}>
+                      to={subject.url || subject.path || ''}>
                       {subject.name}
                     </SafeLink>
                     <StyledSpacingElement />

package/src/Frontpage/FrontpageSearch.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { isIE, browserVersion, isMobileSafari } from 'react-device-detect';
 import styled from '@emotion/styled';
-import { History } from 'history';
 import { colors, spacing, mq, breakpoints, animations } from '@ndla/core';
 // @ts-ignore
 import { noScroll } from '@ndla/util';
@@ -54,11 +53,10 @@ type Props = {
   };
   onSearch: (event: React.FormEvent) => void;
   allResultUrl: string;
-  searchResult: Array<ContentTypeResultType>;
+  searchResult?: Array<ContentTypeResultType>;
   loading: boolean;
-  history: History;
-  suggestion: string;
-  suggestionUrl: string;
+  suggestion?: string;
+  suggestionUrl?: string;
 };
 
 const FrontpageSearch: React.FunctionComponent<Props> = ({
@@ -73,7 +71,6 @@ const FrontpageSearch: React.FunctionComponent<Props> = ({
   allResultUrl,
   searchResult,
   loading,
-  history,
   suggestion,
   suggestionUrl,
 }) => {
@@ -190,7 +187,6 @@ const FrontpageSearch: React.FunctionComponent<Props> = ({
               allResultUrl={allResultUrl}
               resourceToLinkProps={resourceToLinkProps}
               infoText={t('welcomePage.searchDisclaimer')}
-              history={history}
               suggestion={suggestion}
               suggestionUrl={suggestionUrl}
             />

package/src/LearningPaths/LearningPathMenu.tsx

@@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '@ndla/tooltip';
 import { useWindowSize } from '@ndla/hooks';
 import { colors, spacing, misc, mq, breakpoints } from '@ndla/core';
-// @ts-ignore
 import { ArrowExpandRight, ArrowExpandLeft } from '@ndla/icons/action';
 import LearningPathMenuModalWrapper from './LearningPathMenuModalWrapper';
 import LearningPathMenuAside from './LearningPathMenuAside';

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -10,8 +10,7 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import React from 'react';
 import { WithTranslation, withTranslation } from 'react-i18next';
-// @ts-ignore
-import { LearningPathBadge } from '../index-javascript';
+import { LearningPathBadge } from '../';
 
 const StyledWrapper = styled.div`
   display: flex;

package/src/NDLAFilm/{AboutNdlaFilm.jsx → AboutNdlaFilm.tsx}

@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { OneColumn } from '@ndla/ui';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { colors, spacing, fonts, mq, breakpoints } from '@ndla/core';
+//@ts-ignore
 import Button from '@ndla/button';
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
+import { OneColumn } from '..';
 import VisualElement from './VisualElement';
 
 const StyledAside = styled.aside`
@@ -44,7 +44,20 @@ const StyledAside = styled.aside`
   }
 `;
 
-const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }) => {
+interface Props {
+  aboutNDLAVideo: {
+    title: string;
+    description: string;
+    visualElement: {
+      alt?: string;
+      url: string;
+      type: string;
+    };
+  };
+  moreAboutNdlaFilm: ReactNode;
+}
+
+const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
   const { t } = useTranslation();
   return (
     <div className="o-wrapper">
@@ -71,16 +84,4 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }) => {
   );
 };
 
-AboutNdlaFilm.propTypes = {
-  aboutNDLAVideo: PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
-    visualElement: PropTypes.shape({
-      url: PropTypes.string,
-      alt: PropTypes.string,
-      type: PropTypes.string,
-    }),
-  }),
-};
-
 export default AboutNdlaFilm;