@ndla/ui 3.2.1 → 3.2.5

package/lib/Dialog/Dialog.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dialog = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+
+var _createUniversalPortal = require("../utils/createUniversalPortal");
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var classes = new _reactBemHelper["default"]({
+  name: 'dialog',
+  prefix: 'c-'
+});
+
+var Dialog = function Dialog(_ref) {
+  var children = _ref.children,
+      _ref$messages = _ref.messages,
+      messages = _ref$messages === void 0 ? {
+    close: 'Lukk'
+  } : _ref$messages,
+      id = _ref.id,
+      labelledby = _ref.labelledby,
+      label = _ref.label,
+      modifier = _ref.modifier,
+      _ref$disablePortal = _ref.disablePortal,
+      disablePortal = _ref$disablePortal === void 0 ? false : _ref$disablePortal,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? true : _ref$hidden,
+      onClose = _ref.onClose,
+      rest = _objectWithoutProperties(_ref, ["children", "messages", "id", "labelledby", "label", "modifier", "disablePortal", "hidden", "onClose"]);
+
+  var content = (0, _core.jsx)("div", _extends({}, classes('', modifier), {
+    "data-dialog-id": id,
+    role: "dialog",
+    "aria-hidden": hidden,
+    "aria-labelledby": labelledby,
+    "aria-label": label
+  }, rest), (0, _core.jsx)("div", classes('content'), (0, _core.jsx)("button", _extends({}, classes('close'), {
+    type: "button",
+    onClick: function onClick() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }), messages.close), children), (0, _core.jsx)("div", {
+    className: "o-backdrop"
+  }));
+
+  if (disablePortal) {
+    return content;
+  }
+
+  return (0, _createUniversalPortal.createUniversalPortal)(content, 'body');
+};
+
+exports.Dialog = Dialog;

package/lib/Dialog/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _Dialog.Dialog;
+  }
+});
+exports["default"] = void 0;
+
+var _Dialog = require("./Dialog");
+
+/**
+ * Copyright (c) 2017-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var _default = _Dialog.Dialog;
+exports["default"] = _default;

package/lib/FactBox/FactBox.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { ReactNode } from 'react';
+interface Props {
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    children?: ReactNode;
+}
+declare const FactBox: ({ children, dangerouslySetInnerHTML }: Props) => JSX.Element;
+export default FactBox;

package/lib/FactBox/FactBox.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
 
 var _button = _interopRequireDefault(require("@ndla/button"));
@@ -20,9 +18,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 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); }
 
 var toggleFactBox = function toggleFactBox(event) {
-  var button = event.target;
-  var aside = button.previousSibling.parentNode;
-  aside.classList.toggle('expanded');
+  var _button$previousSibli, _aside$classList;
+
+  var button = event.currentTarget;
+  var aside = button === null || button === void 0 ? void 0 : (_button$previousSibli = button.previousSibling) === null || _button$previousSibli === void 0 ? void 0 : _button$previousSibli.parentElement;
+  aside === null || aside === void 0 ? void 0 : (_aside$classList = aside.classList) === null || _aside$classList === void 0 ? void 0 : _aside$classList.toggle('expanded');
 };
 
 var classes = new _reactBemHelper["default"]({
@@ -40,11 +40,5 @@ var FactBox = function FactBox(_ref) {
   })));
 };
 
-FactBox.propTypes = {
-  dangerouslySetInnerHTML: _propTypes["default"].shape({
-    __html: _propTypes["default"].string.isRequired
-  }),
-  children: _propTypes["default"].node
-};
 var _default = FactBox;
 exports["default"] = _default;

package/lib/FactBox/index.d.ts

@@ -0,0 +1,2 @@
+import FactBox from './FactBox';
+export default FactBox;

package/lib/Figure/Figure.d.ts

@@ -6,9 +6,8 @@
  *
  */
 import { ReactNode } from 'react';
-import { License } from '../types';
 export declare const FigureCaption: ({ figureId, id, children, caption, authors, reuseLabel, licenseRights, locale, link, hideFigcaption, hasLinkedVideo, }: FigureCaptionProps) => JSX.Element;
-export interface FigureLicense extends License {
+export interface FigureLicense {
     short: string;
     title: string;
     userFriendlyTitle: string;
@@ -40,9 +39,9 @@ interface FigureCaptionProps {
 declare const Figure: ({ children, type, resizeIframe, ...rest }: Props) => JSX.Element;
 interface Props {
     id: string;
-    children: (params: {
+    children: ReactNode | ((params: {
         typeClass: string;
-    }) => ReactNode | ReactNode;
+    }) => ReactNode);
     type: 'full' | 'full-column' | 'left' | 'small-left' | 'right' | 'small-right' | 'xsmall-right' | 'xsmall-left';
     resizeIframe?: boolean;
     noFigcaption?: boolean;

package/lib/Figure/Figure.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FigureCaption = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+
+var _util = require("@ndla/util");
+
+var _reactI18next = require("react-i18next");
+
+var _common = require("@ndla/icons/common");
+
+var _licenses = require("@ndla/licenses");
+
+var _safelink = _interopRequireDefault(require("@ndla/safelink"));
+
+var _button = _interopRequireDefault(require("@ndla/button"));
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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); }
+
+var classes = new _reactBemHelper["default"]({
+  name: 'figure',
+  prefix: 'c-'
+});
+
+var FigureCaption = function FigureCaption(_ref) {
+  var figureId = _ref.figureId,
+      id = _ref.id,
+      children = _ref.children,
+      caption = _ref.caption,
+      authors = _ref.authors,
+      reuseLabel = _ref.reuseLabel,
+      licenseRights = _ref.licenseRights,
+      locale = _ref.locale,
+      link = _ref.link,
+      hideFigcaption = _ref.hideFigcaption,
+      hasLinkedVideo = _ref.hasLinkedVideo;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  return (0, _core.jsx)("figcaption", classes('caption', hideFigcaption ? 'hidden-caption' : undefined), caption ? (0, _core.jsx)("div", classes('info'), (0, _util.parseMarkdown)(caption)) : null, (0, _core.jsx)("footer", classes('byline'), (0, _core.jsx)("div", classes('byline-licenselist'), (0, _core.jsx)(_licenses.LicenseByline, {
+    licenseRights: licenseRights,
+    locale: locale,
+    marginRight: true
+  }, (0, _core.jsx)("div", classes('byline-author-buttons'), (0, _core.jsx)("span", classes('byline-authors'), authors === null || authors === void 0 ? void 0 : authors.map(function (author) {
+    return author.name;
+  }).join(', ')), (0, _core.jsx)("div", null, (0, _core.jsx)(_button["default"], {
+    borderShape: "rounded",
+    outline: true,
+    size: "small",
+    type: "button",
+    "data-dialog-trigger-id": id,
+    "data-dialog-source-id": figureId
+  }, reuseLabel), hasLinkedVideo && (0, _core.jsx)(_button["default"], _extends({
+    borderShape: "rounded",
+    outline: true,
+    size: "small",
+    type: "button"
+  }, classes('toggleAlternativeVideo')), (0, _core.jsx)("span", {
+    className: "original"
+  }, t('figure.button.alternative')), (0, _core.jsx)("span", {
+    className: "alternative hidden"
+  }, t('figure.button.original')))), children)), link && (0, _core.jsx)("div", classes('link-wrapper'), (0, _core.jsx)(_safelink["default"], _extends({
+    to: link.url
+  }, classes('link'), {
+    target: link.external ? '_blank' : undefined,
+    rel: link.external ? 'noopener noreferrer' : undefined
+  }), (0, _core.jsx)("span", classes('link-text'), link.text), (0, _core.jsx)(_common.Link, null)), link.description && (0, _core.jsx)("p", classes('link-description'), link.description)))));
+};
+
+exports.FigureCaption = FigureCaption;
+
+var Figure = function Figure(_ref2) {
+  var children = _ref2.children,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'full' : _ref2$type,
+      resizeIframe = _ref2.resizeIframe,
+      rest = _objectWithoutProperties(_ref2, ["children", "type", "resizeIframe"]);
+
+  var typeClass = type === 'full-column' ? 'c-figure--full-column' : "u-float-".concat(type);
+  return (0, _core.jsx)("figure", _extends({
+    "data-sizetype": type
+  }, classes('', {
+    resize: !!resizeIframe
+  }, typeClass), rest), isFunction(children) ? children({
+    typeClass: typeClass
+  }) : children);
+};
+
+var isFunction = function isFunction(children) {
+  return (0, _util.isFunction)(children);
+};
+
+var _default = Figure;
+exports["default"] = _default;

package/lib/Figure/FigureExpandButton.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FigureExpandButton = FigureExpandButton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _common = require("@ndla/icons/common");
+
+var _action = require("@ndla/icons/action");
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * 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.
+ *
+ */
+function FigureExpandButton(_ref) {
+  var messages = _ref.messages,
+      typeClass = _ref.typeClass;
+  return (0, _core.jsx)("button", {
+    className: "c-figure__fullscreen-btn",
+    type: "button",
+    "data-figure-button": true,
+    "data-classtype": typeClass,
+    "data-aria": messages.zoomImageButtonLabel,
+    "data-ariaexpanded": messages.zoomOutImageButtonLabel,
+    "aria-label": messages.zoomImageButtonLabel
+  }, (0, _core.jsx)(_common.ArrowCollapse, {
+    className: "expanded-icon"
+  }), (0, _core.jsx)(_action.ExpandTwoArrows, {
+    className: "contracted-icon"
+  }));
+}

package/lib/Figure/FigureLicense.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FigureLicenseByline = exports.FigureLicenseCta = exports.classLicenses = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+
+var _util = require("@ndla/util");
+
+var _licenses = require("@ndla/licenses");
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
+
+var classLicenses = new _reactBemHelper["default"]({
+  name: 'figure-license',
+  prefix: 'c-'
+});
+exports.classLicenses = classLicenses;
+
+var FigureLicenseCta = function FigureLicenseCta(_ref) {
+  var children = _ref.children,
+      messages = _ref.messages,
+      authors = _ref.authors,
+      origin = _ref.origin,
+      title = _ref.title;
+  return (0, _core.jsx)("div", classLicenses('cta-wrapper'), (0, _core.jsx)("ul", classLicenses('list'), title && (0, _core.jsx)("li", classLicenses('item'), "".concat(messages.title, ": ").concat(title)), authors === null || authors === void 0 ? void 0 : authors.map(function (author) {
+    return (0, _core.jsx)("li", _extends({
+      key: (0, _util.uuid)()
+    }, classLicenses('item')), "".concat(author.type, ": ").concat(author.name));
+  }), origin && (0, _core.jsx)("li", classLicenses('item'), messages.source, ":", ' ', origin.startsWith('http') ? (0, _core.jsx)("a", {
+    href: origin,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, origin) : origin)), (0, _core.jsx)("div", classLicenses('cta-block'), children));
+};
+
+exports.FigureLicenseCta = FigureLicenseCta;
+
+var FigureLicenseByline = function FigureLicenseByline(_ref2) {
+  var messages = _ref2.messages,
+      license = _ref2.license,
+      locale = _ref2.locale;
+  return (0, _core.jsx)(_react["default"].Fragment, null, (0, _core.jsx)(_licenses.LicenseDescription, {
+    key: "byline",
+    highlightCC: true,
+    locale: locale,
+    messages: messages,
+    licenseRights: license.rights
+  }), (0, _core.jsx)("a", _extends({
+    key: "link"
+  }, classLicenses('link'), {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: license.url
+  }), license.linkText));
+};
+
+exports.FigureLicenseByline = FigureLicenseByline;

package/lib/Figure/FigureLicenseDialog.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FigureLicenseDialog = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Dialog = _interopRequireDefault(require("../Dialog"));
+
+var _FigureLicense = require("./FigureLicense");
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
+
+var FigureLicenseDialog = function FigureLicenseDialog(_ref) {
+  var children = _ref.children,
+      messages = _ref.messages,
+      id = _ref.id,
+      authors = _ref.authors,
+      origin = _ref.origin,
+      title = _ref.title,
+      locale = _ref.locale,
+      license = _ref.license;
+  var headingLabelId = "heading-".concat(id);
+  return (0, _core.jsx)(_Dialog["default"], {
+    id: id,
+    labelledby: headingLabelId,
+    messages: messages
+  }, (0, _core.jsx)("div", (0, _FigureLicense.classLicenses)(), (0, _core.jsx)("h3", _extends({
+    id: headingLabelId
+  }, (0, _FigureLicense.classLicenses)('title')), messages.rulesForUse), (0, _core.jsx)(_FigureLicense.FigureLicenseByline, {
+    license: license,
+    messages: messages,
+    locale: locale
+  }), (0, _core.jsx)(_FigureLicense.FigureLicenseCta, {
+    authors: authors,
+    title: title,
+    origin: origin,
+    messages: messages
+  }, children)));
+};
+
+exports.FigureLicenseDialog = FigureLicenseDialog;

package/lib/Figure/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Figure", {
+  enumerable: true,
+  get: function get() {
+    return _Figure["default"];
+  }
+});
+Object.defineProperty(exports, "FigureCaption", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureCaption;
+  }
+});
+Object.defineProperty(exports, "FigureLicenseDialog", {
+  enumerable: true,
+  get: function get() {
+    return _FigureLicenseDialog.FigureLicenseDialog;
+  }
+});
+Object.defineProperty(exports, "FigureExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _FigureExpandButton.FigureExpandButton;
+  }
+});
+Object.defineProperty(exports, "FigureBylineExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _FigureBylineExpandButton.FigureBylineExpandButton;
+  }
+});
+
+var _Figure = _interopRequireWildcard(require("./Figure"));
+
+var _FigureLicenseDialog = require("./FigureLicenseDialog");
+
+var _FigureExpandButton = require("./FigureExpandButton");
+
+var _FigureBylineExpandButton = require("./FigureBylineExpandButton");
+
+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; }

package/lib/FileList/File.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+
+var _common = require("@ndla/icons/common");
+
+var _safelink = _interopRequireDefault(require("@ndla/safelink"));
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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); }
+
+var classes = (0, _reactBemHelper["default"])('c-file-list');
+
+var renderFormat = function renderFormat(format, title, isPrimary, id, isDeadLink) {
+  var titleWithFormat = "".concat(title, " (").concat(format.fileType.toUpperCase(), ")");
+  var formatId = "".concat(id, "_").concat(format.fileType);
+
+  if (isDeadLink) {
+    return (0, _core.jsx)("span", {
+      key: format.url
+    }, (0, _core.jsx)(_common.Download, null), (0, _core.jsx)("span", null, isPrimary ? titleWithFormat : "(".concat(format.fileType.toUpperCase(), ")")), (0, _core.jsx)("span", _extends({}, classes('tooltip'), {
+      "aria-hidden": true,
+      role: "tooltip",
+      id: formatId
+    }), (0, _core.jsx)("span", classes('tooltip-text'), format.tooltip)));
+  }
+
+  return (0, _core.jsx)(_safelink["default"], _extends({}, classes('link'), {
+    key: format.url,
+    to: format.url,
+    target: "_blank",
+    "aria-label": titleWithFormat,
+    "aria-describedby": formatId
+  }), (0, _core.jsx)(_common.Download, null), (0, _core.jsx)("span", classes('link-text'), (0, _core.jsx)("span", null, isPrimary ? titleWithFormat : "(".concat(format.fileType.toUpperCase(), ")"))), (0, _core.jsx)("span", _extends({}, classes('tooltip'), {
+    "aria-hidden": true,
+    role: "tooltip",
+    id: formatId
+  }), (0, _core.jsx)("span", classes('tooltip-text'), format.tooltip)));
+};
+
+var File = function File(_ref) {
+  var file = _ref.file,
+      id = _ref.id;
+  var formatLinks = file.formats.map(function (format, index) {
+    return renderFormat(format, file.title, index === 0, id, !file.fileExists);
+  });
+  return (0, _core.jsx)("li", _extends({}, classes('item'), {
+    key: file.title
+  }), formatLinks);
+};
+
+var _default = File;
+exports["default"] = _default;

package/lib/FileList/FileList.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+
+var _File = _interopRequireDefault(require("./File"));
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var classes = (0, _reactBemHelper["default"])('c-file-list');
+
+var FileList = function FileList(_ref) {
+  var files = _ref.files,
+      heading = _ref.heading,
+      id = _ref.id;
+  return (0, _core.jsx)("section", classes(), (0, _core.jsx)("h1", classes('heading'), heading), (0, _core.jsx)("ul", classes('files'), files.map(function (file) {
+    return (0, _core.jsx)(_File["default"], {
+      key: "file-".concat(id, "-").concat(file.title),
+      file: file,
+      id: id
+    });
+  })));
+};
+
+var _default = FileList;
+exports["default"] = _default;

package/lib/FileList/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "File", {
+  enumerable: true,
+  get: function get() {
+    return _File["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _FileList = _interopRequireDefault(require("./FileList"));
+
+var _File = _interopRequireDefault(require("./File"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _FileList["default"];
+exports["default"] = _default;

package/lib/Hero/Hero.d.ts

@@ -6,9 +6,10 @@
  *
  */
 import { ReactNode } from 'react';
+export declare type HeroContentType = 'subject-material' | 'tasks-and-activities' | 'assessment-resources' | 'subject' | 'external-learning-resources' | 'source-material' | 'learning-path' | 'topic' | 'beta' | 'ndla-film' | 'ndla-film has-image';
 interface HeroProps {
     children?: ReactNode;
-    contentType: 'subject-material' | 'tasks-and-activities' | 'assessment-resources' | 'subject' | 'external-learning-resources' | 'source-material' | 'learning-path' | 'topic' | 'beta' | 'ndla-film' | 'ndla-film has-image';
+    contentType?: HeroContentType;
 }
 export declare const Hero: ({ children, contentType }: HeroProps) => JSX.Element;
 interface Props {