@ndla/ui 3.3.7 → 3.3.8

package/lib/NDLAFilm/SlideshowIndicator.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 { NDLAMovie } from './interfaces';
+interface Props {
+    slideshow: NDLAMovie[];
+    activeSlide: number;
+    gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+}
+declare const SlideshowIndicator: ({ slideshow, activeSlide, gotoSlide }: Props) => JSX.Element;
+export default SlideshowIndicator;

package/lib/NDLAFilm/SlideshowIndicator.js

@@ -5,89 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 
 var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
 
-var _shapes = require("./shapes");
-
 var _core = require("@emotion/core");
 
 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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 var classes = new _reactBemHelper["default"]({
   name: 'film-slideshow',
   prefix: 'c-'
 });
 
-var SlideshowIndicator = /*#__PURE__*/function (_Component) {
-  _inherits(SlideshowIndicator, _Component);
-
-  var _super = _createSuper(SlideshowIndicator);
-
-  function SlideshowIndicator() {
-    _classCallCheck(this, SlideshowIndicator);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(SlideshowIndicator, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          slideshow = _this$props.slideshow,
-          activeSlide = _this$props.activeSlide,
-          gotoSlide = _this$props.gotoSlide;
-      return (0, _core.jsx)("div", classes('indicator-wrapper'), slideshow.map(function (slide, index) {
-        return (0, _core.jsx)("button", _extends({
-          key: "indicator_".concat(index) // eslint-disable-line react/no-array-index-key
-          ,
-          type: "button"
-        }, classes('indicator-dot', index === activeSlide ? 'active' : ''), {
-          onClick: function onClick() {
-            return gotoSlide(index, true);
-          }
-        }), (0, _core.jsx)("span", null));
-      }));
-    }
-  }]);
-
-  return SlideshowIndicator;
-}(_react.Component);
-
-SlideshowIndicator.propTypes = {
-  slideshow: _propTypes["default"].arrayOf(_shapes.movieShape),
-  activeSlide: _propTypes["default"].number
+var SlideshowIndicator = function SlideshowIndicator(_ref) {
+  var slideshow = _ref.slideshow,
+      activeSlide = _ref.activeSlide,
+      gotoSlide = _ref.gotoSlide;
+  return (0, _core.jsx)("div", classes('indicator-wrapper'), slideshow.map(function (slide, index) {
+    return (0, _core.jsx)("button", _extends({
+      key: "indicator_".concat(index),
+      type: "button"
+    }, classes('indicator-dot', index === activeSlide ? 'active' : ''), {
+      onClick: function onClick() {
+        return gotoSlide(index, true);
+      }
+    }), (0, _core.jsx)("span", null));
+  }));
 };
+
 var _default = SlideshowIndicator;
 exports["default"] = _default;

package/lib/NDLAFilm/interfaces.d.ts

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

package/lib/NDLAFilm/interfaces.js

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

package/lib/NDLAFilm/shapes.d.ts

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export declare const topicShape: PropTypes.Requireable<PropTypes.InferProps<{
+    id: PropTypes.Requireable<string>;
+    name: PropTypes.Requireable<string>;
+}>>;

package/lib/NDLAFilm/shapes.js

@@ -3,25 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topicShape = exports.movieShape = void 0;
+exports.topicShape = 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

package/lib/Spinner/Spinner.d.ts

@@ -7,9 +7,9 @@
  */
 import { SpacingNames } from '@ndla/core';
 interface Props {
-    size: SpacingNames;
-    margin: string;
-    inverted: boolean;
+    size?: SpacingNames;
+    margin?: string;
+    inverted?: boolean;
 }
 declare const Spinner: ({ size, margin, inverted }: Partial<Props>) => JSX.Element;
 export default Spinner;

package/lib/Spinner/Spinner.js

@@ -33,9 +33,9 @@ var SpinnerDiv = ( /*#__PURE__*/0, _styledBase["default"])('div', {
   return _core.spacing[props.size];
 }, ";width:", function (props) {
   return _core.spacing[props.size];
-}, ";display:block;margin:", function (props) {
+}, ";margin:", function (props) {
   return props.margin;
-}, ";@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCdUMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG4gIG1hcmdpbjogc3RyaW5nO1xuICBpbnZlcnRlZDogYm9vbGVhbjtcbn1cblxuY29uc3QgU3Bpbm5lckRpdiA9IHN0eWxlZCgnZGl2Jyk8UHJvcHM+YFxuICBib3JkZXI6IGNhbGMoJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19IC8gNi41KSBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1ib3R0b20tY29sb3I6ICR7KHByb3BzKSA9PiAocHJvcHMuaW52ZXJ0ZWQgPyAnI2ZmZicgOiBjb2xvcnMuYnJhbmQucHJpbWFyeSl9O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGFuaW1hdGlvbjogc3Bpbm5lckFuaW1hdGlvbiAwLjdzIGxpbmVhciBpbmZpbml0ZTtcbiAgaGVpZ2h0OiAkeyhwcm9wcykgPT4gc3BhY2luZ1twcm9wcy5zaXplXX07XG4gIHdpZHRoOiAkeyhwcm9wcykgPT4gc3BhY2luZ1twcm9wcy5zaXplXX07XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBAa2V5ZnJhbWVzIHNwaW5uZXJBbmltYXRpb24ge1xuICAgIDAlIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgIH1cbiAgICAxMDAlIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTcGlubmVyID0gKHsgc2l6ZSA9ICdsYXJnZScsIG1hcmdpbiA9IGAke3NwYWNpbmcubm9ybWFsfSBhdXRvYCwgaW52ZXJ0ZWQgfTogUGFydGlhbDxQcm9wcz4pID0+IChcbiAgPFNwaW5uZXJEaXYgc2l6ZT17c2l6ZX0gbWFyZ2luPXttYXJnaW59IGludmVydGVkPXshIWludmVydGVkfSAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgU3Bpbm5lcjtcbiJdfQ== */"));
+}, ";display:block;@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNkMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplPzogU3BhY2luZ05hbWVzO1xuICBtYXJnaW4/OiBzdHJpbmc7XG4gIGludmVydGVkPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIGV4dGVuZHMgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG59XG5cbmNvbnN0IFNwaW5uZXJEaXYgPSBzdHlsZWQoJ2RpdicpPFN0eWxlZFByb3BzPmBcbiAgYm9yZGVyOiBjYWxjKCR7KHByb3BzKSA9PiBzcGFjaW5nW3Byb3BzLnNpemVdfSAvIDYuNSkgc29saWQgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItYm90dG9tLWNvbG9yOiAkeyhwcm9wcykgPT4gKHByb3BzLmludmVydGVkID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBhbmltYXRpb246IHNwaW5uZXJBbmltYXRpb24gMC43cyBsaW5lYXIgaW5maW5pdGU7XG4gIGhlaWdodDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICB3aWR0aDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBkaXNwbGF5OiBibG9jaztcbiAgQGtleWZyYW1lcyBzcGlubmVyQW5pbWF0aW9uIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3Bpbm5lciA9ICh7IHNpemUgPSAnbGFyZ2UnLCBtYXJnaW4gPSBgJHtzcGFjaW5nLm5vcm1hbH0gYXV0b2AsIGludmVydGVkIH06IFBhcnRpYWw8UHJvcHM+KSA9PiAoXG4gIDxTcGlubmVyRGl2IHNpemU9e3NpemV9IG1hcmdpbj17bWFyZ2lufSBpbnZlcnRlZD17ISFpbnZlcnRlZH0gLz5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFNwaW5uZXI7XG4iXX0= */"));
 
 var Spinner = function Spinner(_ref) {
   var _ref$size = _ref.size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@ndla/button": "^1.1.2",
-    "@ndla/carousel": "^1.0.7",
+    "@ndla/carousel": "^1.1.0",
     "@ndla/core": "^0.7.2",
     "@ndla/hooks": "^1.0.7",
     "@ndla/icons": "^1.3.2",
@@ -63,7 +63,7 @@
     "react-facebook": "^6.0.15",
     "react-prop-types": "0.4.0",
     "react-sticky-el": "^2.0.6",
-    "react-swipeable": "^5.0.1",
+    "react-swipeable": "^6.2.0",
     "react-syntax-highlighter": "^15.4.4",
     "react-transition-group": "^2.5.3",
     "shave": "^2.5.10"
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "442cac4c7229e4d8151b850ab4e8c4a6e0b7586c"
+  "gitHead": "5c0c46da877836c5e8dbaf52979a8965a41ca0ec"
 }

package/src/Breadcrumb/Breadcrumb.tsx

@@ -43,7 +43,7 @@ const Breadcrumb: React.FunctionComponent<Props & WithTranslation> = ({ children
           isCurrent={i === items.length - 1}
           to={item.to}
           name={item.name}>
-          {i === 0 ? <Home className="c-icon--20" /> : item.name}
+          {i === 0 ? <Home className="c-icon--20" title={item.name} /> : item.name}
         </BreadcrumbItem>
       ))}
     </ol>

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -0,0 +1,264 @@
+/**
+ * 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, { useCallback, useEffect, useRef, useState } from 'react';
+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';
+
+interface Props {
+  autoSlide: boolean;
+  randomStart: boolean;
+  slideshow: NDLAMovie[];
+  slideInterval: number;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const defaultTransitionSwipeEnd = 'transform 600ms cubic-bezier(0, 0.76, 0.09, 1)';
+const defaultTransitionText = 'opacity 600ms ease';
+
+const renderSlideItem = (slide: NDLAMovie) => (
+  <div
+    {...classes('item')}
+    key={slide.id}
+    role="img"
+    aria-label={(slide.metaImage && slide.metaImage.alt) || ''}
+    style={{
+      backgroundImage: `url(${(slide.metaImage && slide.metaImage.url) || ''})`,
+    }}
+  />
+);
+
+const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000 }: Props) => {
+  const [swipeDistance, setSwipeDistance] = useState(0);
+  const [slideIndex, setSlideIndex] = useState(0);
+  const [slideIndexTarget, setSlideIndexTarget] = useState(0);
+  const [animationComplete, setAnimationComplete] = useState(true);
+  const slideRef = useRef<HTMLDivElement>(null);
+  const slideText = useRef<HTMLDivElement>(null);
+  let timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const gotoSlide = useCallback((indexTarget: number, useAnimation = false) => {
+    setSwipeDistance(0);
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setSlideIndexTarget(indexTarget);
+    setAnimationComplete(!useAnimation);
+  }, []);
+
+  const onChangedSlide = () => {
+    if (!animationComplete) {
+      if (slideRef.current) {
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = `translateX(${slideIndexTarget * 100}vw))`;
+      }
+
+      setAnimationComplete(true);
+      setSlideIndex(slideIndexTarget);
+    } else if (slideIndexTarget === -1) {
+      if (slideRef.current) {
+        // Go to last slide for continuous loop
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = `translateX(${slideshow.length * 100}vw))`;
+      }
+
+      setSlideIndex(slideshow.length - 1);
+      setSlideIndexTarget(slideshow.length - 1);
+      setAnimationComplete(true);
+    } else if (slideIndexTarget === slideshow.length) {
+      if (slideRef.current) {
+        // Go to first slide for continuous loop
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = `translateX(100vw))`;
+      }
+      setSlideIndex(0);
+      setSlideIndexTarget(0);
+      setAnimationComplete(true);
+    } else {
+      setAnimationComplete(true);
+      setSlideIndex(slideIndexTarget);
+    }
+  };
+
+  const onSwipeEnd = () => {
+    let slide;
+    if (swipeDistance > 40) {
+      slide = -1;
+    } else if (swipeDistance < -40) {
+      slide = 1;
+    } else {
+      slide = 0;
+    }
+    if (slideRef.current && slideText.current) {
+      slideRef.current.style.transition = defaultTransitionSwipeEnd;
+      slideText.current.style.transition = defaultTransitionText;
+      slideText.current.style.opacity = '1';
+    }
+    setSwipeDistance(0);
+
+    initTimer();
+
+    if (slide !== 0) {
+      setSlideIndex(slideIndex + slide);
+      setSlideIndexTarget(slideIndex + slide);
+    } else {
+      // Reset transfrom
+      if (slideRef.current) {
+        slideRef.current.style.transform = getSlidePosition(slideIndex + slide);
+      }
+    }
+  };
+
+  const onSwipe = (eventData: SwipeEventData) => {
+    if (eventData.dir === 'Up' || eventData.dir === 'Down') {
+      return;
+    }
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setSwipeDistance(eventData.deltaX);
+    if (slideRef && slideRef.current) {
+      slideRef.current.style.transition = 'none';
+      slideRef.current.style.transform = getSlidePosition(slideIndexTarget);
+    }
+    const opacityText = 1 - Math.min(100, Math.abs(swipeDistance)) / 100;
+    if (slideText && slideText.current) {
+      slideText.current.style.transition = 'none';
+      slideText.current.style.opacity = opacityText.toString();
+    }
+  };
+
+  const onTransitionEnd = () => {
+    const slideshowLength = slideshow.length;
+    if (slideIndex === -1) {
+      if (slideRef.current) {
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = getSlidePosition(slideshowLength - 1);
+      }
+      setSlideIndex(slideshowLength - 1);
+      setSlideIndexTarget(slideshowLength - 1);
+    } else if (slideIndex >= slideshowLength) {
+      if (slideRef.current) {
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = getSlidePosition(0);
+      }
+      setSlideIndex(0);
+      setSlideIndexTarget(0);
+    }
+  };
+
+  const getSlidePosition = (target: number) => {
+    if (swipeDistance !== 0) {
+      return `translateX(calc(${swipeDistance}px -
+        ${(target + 1) * 100}vw))`;
+    }
+    return `translateX(-${(target + 1) * 100}vw)`;
+  };
+
+  const initTimer = useCallback(() => {
+    if (autoSlide) {
+      timer.current = setTimeout(() => {
+        gotoSlide(slideIndex + 1);
+      }, slideInterval);
+    }
+  }, [autoSlide, gotoSlide, slideInterval, slideIndex]);
+
+  useEffect(() => {
+    initTimer();
+  }, [initTimer]);
+
+  const handlers = useSwipeable({
+    onSwiped: onSwipeEnd,
+    onSwiping: onSwipe,
+  });
+
+  if (slideshow.length === 0) {
+    return (
+      <div>
+        <div {...classes('slideshow')}>
+          <Spinner inverted />
+        </div>
+      </div>
+    );
+  }
+
+  const slideshowWidth = `${(slideshow.length + 2) * 100}vw`;
+  let activeSlide = slideIndex;
+  if (activeSlide < 0) {
+    activeSlide = slideshow.length - 1;
+  } else if (activeSlide >= slideshow.length) {
+    activeSlide = 0;
+  }
+
+  return (
+    <section {...classes('')} {...handlers}>
+      <>
+        <div {...classes('slide-link-wrapper')}>
+          <OneColumn>
+            <SafeLink
+              to={slideshow[activeSlide].path}
+              {...classes('item-wrapper', 'text', {
+                out: !animationComplete,
+              })}>
+              <div {...classes('slide-info')} ref={slideText}>
+                <h1>{slideshow[activeSlide].title}</h1>
+                <p>{slideshow[activeSlide].metaDescription}</p>
+              </div>
+            </SafeLink>
+          </OneColumn>
+        </div>
+        <NavigationArrow
+          slideIndexTarget={slideIndexTarget > 0 ? slideIndexTarget - 1 : slideshow.length - 1}
+          gotoSlide={gotoSlide}
+        />
+        <NavigationArrow
+          slideIndexTarget={slideIndexTarget < slideshow.length - 1 ? slideIndexTarget + 1 : 0}
+          gotoSlide={gotoSlide}
+          rightArrow
+        />
+        {!animationComplete && (
+          <div
+            {...classes('item', 'fade-over')}
+            role="img"
+            onAnimationEnd={onChangedSlide}
+            style={{
+              backgroundImage: `url(${
+                (slideshow[activeSlide].metaImage && slideshow[activeSlide].metaImage.url) || ''
+              })`,
+            }}
+          />
+        )}
+        <div
+          ref={slideRef}
+          {...classes('item-wrapper')}
+          onTransitionEnd={onTransitionEnd}
+          style={{
+            width: slideshowWidth,
+            transform: getSlidePosition(slideIndex),
+          }}>
+          {renderSlideItem(slideshow[slideshow.length - 1])}
+          {slideshow.map(renderSlideItem)}
+          {renderSlideItem(slideshow[0])}
+        </div>
+        <SlideshowIndicator slideshow={slideshow} activeSlide={activeSlide} gotoSlide={gotoSlide} />
+      </>
+    </section>
+  );
+};
+
+export default FilmSlideshow;

package/src/NDLAFilm/NavigationArrow.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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 { ChevronRight, ChevronLeft } from '@ndla/icons/common';
+
+interface Props {
+  slideIndexTarget: number;
+  slideshowLength?: number;
+  gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+  rightArrow?: boolean;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const NavigationArrow = ({ slideIndexTarget, gotoSlide, rightArrow }: Props) => {
+  const Chevron = rightArrow ? ChevronRight : ChevronLeft;
+
+  return (
+    <div {...classes('navigation-arrows', rightArrow ? 'right' : '')}>
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={() => {
+          gotoSlide(slideIndexTarget, true);
+        }}>
+        <Chevron />
+      </button>
+    </div>
+  );
+};
+
+export default NavigationArrow;

package/src/NDLAFilm/SlideshowIndicator.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 BEMHelper from 'react-bem-helper';
+import { NDLAMovie } from './interfaces';
+
+interface Props {
+  slideshow: NDLAMovie[];
+  activeSlide: number;
+  gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const SlideshowIndicator = ({ slideshow, activeSlide, gotoSlide }: Props) => {
+  return (
+    <div {...classes('indicator-wrapper')}>
+      {slideshow.map((slide, index) => (
+        <button
+          key={`indicator_${index}`}
+          type="button"
+          {...classes('indicator-dot', index === activeSlide ? 'active' : '')}
+          onClick={() => gotoSlide(index, true)}>
+          <span />
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SlideshowIndicator;

package/src/NDLAFilm/interfaces.ts

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

package/src/NDLAFilm/shapes.ts

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const topicShape = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string,
+});

package/src/Spinner/Spinner.tsx

@@ -8,23 +8,27 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { spacing, colors, SpacingNames } from '@ndla/core';
+import { colors, spacing, SpacingNames } from '@ndla/core';
 
 interface Props {
+  size?: SpacingNames;
+  margin?: string;
+  inverted?: boolean;
+}
+
+interface StyledProps extends Props {
   size: SpacingNames;
-  margin: string;
-  inverted: boolean;
 }
 
-const SpinnerDiv = styled('div')<Props>`
+const SpinnerDiv = styled('div')<StyledProps>`
   border: calc(${(props) => spacing[props.size]} / 6.5) solid rgba(0, 0, 0, 0.1);
   border-bottom-color: ${(props) => (props.inverted ? '#fff' : colors.brand.primary)};
   border-radius: 50%;
   animation: spinnerAnimation 0.7s linear infinite;
   height: ${(props) => spacing[props.size]};
   width: ${(props) => spacing[props.size]};
-  display: block;
   margin: ${(props) => props.margin};
+  display: block;
   @keyframes spinnerAnimation {
     0% {
       transform: rotate(0deg);