@ndla/ui 3.2.1 → 3.2.2

package/es/Article/ArticleAuthorContent.js

@@ -12,8 +12,7 @@ import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next'; // @ts-ignore
 
 import Button from '@ndla/button';
-import SafeLink from '@ndla/safelink'; // @ts-ignore
-
+import SafeLink from '@ndla/safelink';
 import Portrait from '../Portrait';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 var classes = new BEMHelper({

package/es/BackgroundImage/BackgroundImage.js

@@ -0,0 +1,27 @@
+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); }
+
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = BEMHelper('c-background-image');
+
+var BackgroundImage = function BackgroundImage(_ref) {
+  var images = _ref.images,
+      _ref$showOverlay = _ref.showOverlay,
+      showOverlay = _ref$showOverlay === void 0 ? false : _ref$showOverlay;
+  return ___EmotionJSX("div", classes('', {
+    showOverlay: showOverlay
+  }), images && images.map(function (image) {
+    return image.types.map(function (type) {
+      return ___EmotionJSX("div", _extends({
+        key: "".concat(image.url).concat(type)
+      }, classes('background', type), {
+        style: {
+          backgroundImage: "url(".concat(image.url, ")")
+        }
+      }));
+    });
+  }));
+};
+
+export default BackgroundImage;

package/es/BackgroundImage/index.js

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

package/es/ContentLoader/index.js

@@ -0,0 +1,83 @@
+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; }
+
+/**
+ * Copyright (c) 2018-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 { uuid } from '@ndla/util';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var ContentLoader = function ContentLoader(_ref) {
+  var children = _ref.children,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 400 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 130 : _ref$height,
+      _ref$preserveAspectRa = _ref.preserveAspectRatio,
+      preserveAspectRatio = _ref$preserveAspectRa === void 0 ? 'xMidYMid meet' : _ref$preserveAspectRa,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$primaryColor = _ref.primaryColor,
+      primaryColor = _ref$primaryColor === void 0 ? '#f0f0f0' : _ref$primaryColor,
+      _ref$secondaryColor = _ref.secondaryColor,
+      secondaryColor = _ref$secondaryColor === void 0 ? '#e0e0e0' : _ref$secondaryColor,
+      _ref$speed = _ref.speed,
+      speed = _ref$speed === void 0 ? 2 : _ref$speed,
+      rest = _objectWithoutProperties(_ref, ["children", "width", "height", "preserveAspectRatio", "className", "primaryColor", "secondaryColor", "speed"]);
+
+  var idClip = uuid();
+  var idGradient = uuid();
+  return ___EmotionJSX("svg", _extends({
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    version: "1.1",
+    preserveAspectRatio: preserveAspectRatio,
+    className: className
+  }, rest), ___EmotionJSX("rect", {
+    style: {
+      fill: "url(#".concat(idGradient, ")")
+    },
+    clipPath: "url(#".concat(idClip, ")"),
+    x: "0",
+    y: "0",
+    width: width,
+    height: height
+  }), ___EmotionJSX("defs", null, ___EmotionJSX("clipPath", {
+    id: idClip
+  }, children), ___EmotionJSX("linearGradient", {
+    id: idGradient
+  }, ___EmotionJSX("stop", {
+    offset: "0%",
+    stopColor: primaryColor
+  }, ___EmotionJSX("animate", {
+    attributeName: "offset",
+    values: "-2; 1",
+    dur: "".concat(speed, "s"),
+    repeatCount: "indefinite"
+  })), ___EmotionJSX("stop", {
+    offset: "50%",
+    stopColor: secondaryColor
+  }, ___EmotionJSX("animate", {
+    attributeName: "offset",
+    values: "-1.5; 1.5",
+    dur: "".concat(speed, "s"),
+    repeatCount: "indefinite"
+  })), ___EmotionJSX("stop", {
+    offset: "100%",
+    stopColor: primaryColor
+  }, ___EmotionJSX("animate", {
+    attributeName: "offset",
+    values: "-1; 2",
+    dur: "".concat(speed, "s"),
+    repeatCount: "indefinite"
+  })))));
+};
+
+export default ContentLoader;

package/es/Dialog/Dialog.js

@@ -0,0 +1,64 @@
+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; }
+
+/**
+ * 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.
+ *
+ */
+// N.B These component is used to render static markup serverside
+// Any interactivty is added by scripts located in the ndla-article-scripts package
+import React from 'react';
+import BEMHelper from 'react-bem-helper'; //@ts-ignore
+
+import { createUniversalPortal } from '../utils/createUniversalPortal';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = new BEMHelper({
+  name: 'dialog',
+  prefix: 'c-'
+});
+export 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 = ___EmotionJSX("div", _extends({}, classes('', modifier), {
+    "data-dialog-id": id,
+    role: "dialog",
+    "aria-hidden": hidden,
+    "aria-labelledby": labelledby,
+    "aria-label": label
+  }, rest), ___EmotionJSX("div", classes('content'), ___EmotionJSX("button", _extends({}, classes('close'), {
+    type: "button",
+    onClick: function onClick() {
+      if (onClose) {
+        onClose();
+      }
+    }
+  }), messages.close), children), ___EmotionJSX("div", {
+    className: "o-backdrop"
+  }));
+
+  if (disablePortal) {
+    return content;
+  }
+
+  return createUniversalPortal(content, 'body');
+};

package/es/Dialog/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+import { Dialog } from './Dialog';
+export { Dialog };
+export default Dialog;

package/es/FactBox/FactBox.js

@@ -8,15 +8,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  *
  */
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import BEMHelper from 'react-bem-helper'; //@ts-ignore
+
 import Button from '@ndla/button';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 
 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 BEMHelper({
@@ -34,10 +36,4 @@ var FactBox = function FactBox(_ref) {
   })));
 };
 
-FactBox.propTypes = {
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired
-  }),
-  children: PropTypes.node
-};
 export default FactBox;

package/es/Figure/Figure.js

@@ -0,0 +1,93 @@
+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); }
+
+/**
+ * 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.
+ *
+ */
+// N.B These component is used to render static markup serverside
+// Any interactivty is added by scripts located in the ndla-article-scripts package
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import { isFunction, parseMarkdown } from '@ndla/util';
+import { useTranslation } from 'react-i18next';
+import { Link as LinkIcon } from '@ndla/icons/common';
+import { LicenseByline } from '@ndla/licenses';
+import SafeLink from '@ndla/safelink'; //@ts-ignore
+
+import Button from '@ndla/button';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = new BEMHelper({
+  name: 'figure',
+  prefix: 'c-'
+});
+export 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 = useTranslation(),
+      t = _useTranslation.t;
+
+  return ___EmotionJSX("figcaption", classes('caption', hideFigcaption ? 'hidden-caption' : undefined), caption ? ___EmotionJSX("div", classes('info'), parseMarkdown(caption)) : null, ___EmotionJSX("footer", classes('byline'), ___EmotionJSX("div", classes('byline-licenselist'), ___EmotionJSX(LicenseByline, {
+    licenseRights: licenseRights,
+    locale: locale,
+    marginRight: true
+  }, ___EmotionJSX("div", classes('byline-author-buttons'), ___EmotionJSX("span", classes('byline-authors'), authors === null || authors === void 0 ? void 0 : authors.map(function (author) {
+    return author.name;
+  }).join(', ')), ___EmotionJSX("div", null, ___EmotionJSX(Button, {
+    borderShape: "rounded",
+    outline: true,
+    size: "small",
+    type: "button",
+    "data-dialog-trigger-id": id,
+    "data-dialog-source-id": figureId
+  }, reuseLabel), hasLinkedVideo && ___EmotionJSX(Button, _extends({
+    borderShape: "rounded",
+    outline: true,
+    size: "small",
+    type: "button"
+  }, classes('toggleAlternativeVideo')), ___EmotionJSX("span", {
+    className: "original"
+  }, t('figure.button.alternative')), ___EmotionJSX("span", {
+    className: "alternative hidden"
+  }, t('figure.button.original')))), children)), link && ___EmotionJSX("div", classes('link-wrapper'), ___EmotionJSX(SafeLink, _extends({
+    to: link.url
+  }, classes('link'), {
+    target: link.external ? '_blank' : undefined,
+    rel: link.external ? 'noopener noreferrer' : undefined
+  }), ___EmotionJSX("span", classes('link-text'), link.text), ___EmotionJSX(LinkIcon, null)), link.description && ___EmotionJSX("p", classes('link-description'), link.description)))));
+};
+
+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 ___EmotionJSX("figure", _extends({
+    "data-sizetype": type
+  }, classes('', {
+    resize: !!resizeIframe
+  }, typeClass), rest), isFunction(children) ? children({
+    typeClass: typeClass
+  }) : children);
+};
+
+export default Figure;

package/es/Figure/FigureExpandButton.js

@@ -0,0 +1,28 @@
+/**
+ * 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 { ArrowCollapse } from '@ndla/icons/common';
+import { ExpandTwoArrows } from '@ndla/icons/action';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+export function FigureExpandButton(_ref) {
+  var messages = _ref.messages,
+      typeClass = _ref.typeClass;
+  return ___EmotionJSX("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
+  }, ___EmotionJSX(ArrowCollapse, {
+    className: "expanded-icon"
+  }), ___EmotionJSX(ExpandTwoArrows, {
+    className: "contracted-icon"
+  }));
+}

package/es/Figure/FigureLicense.js

@@ -0,0 +1,54 @@
+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); }
+
+/**
+ * Copyright (c) 2018-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// N.B This component is used to render static markup serverside
+// Any interactivty is added by scripts located in the ndla-article-scripts package
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import { uuid } from '@ndla/util';
+import { LicenseDescription } from '@ndla/licenses';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+export var classLicenses = new BEMHelper({
+  name: 'figure-license',
+  prefix: 'c-'
+});
+export var FigureLicenseCta = function FigureLicenseCta(_ref) {
+  var children = _ref.children,
+      messages = _ref.messages,
+      authors = _ref.authors,
+      origin = _ref.origin,
+      title = _ref.title;
+  return ___EmotionJSX("div", classLicenses('cta-wrapper'), ___EmotionJSX("ul", classLicenses('list'), title && ___EmotionJSX("li", classLicenses('item'), "".concat(messages.title, ": ").concat(title)), authors === null || authors === void 0 ? void 0 : authors.map(function (author) {
+    return ___EmotionJSX("li", _extends({
+      key: uuid()
+    }, classLicenses('item')), "".concat(author.type, ": ").concat(author.name));
+  }), origin && ___EmotionJSX("li", classLicenses('item'), messages.source, ":", ' ', origin.startsWith('http') ? ___EmotionJSX("a", {
+    href: origin,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, origin) : origin)), ___EmotionJSX("div", classLicenses('cta-block'), children));
+};
+export var FigureLicenseByline = function FigureLicenseByline(_ref2) {
+  var messages = _ref2.messages,
+      license = _ref2.license,
+      locale = _ref2.locale;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(LicenseDescription, {
+    key: "byline",
+    highlightCC: true,
+    locale: locale,
+    messages: messages,
+    licenseRights: license.rights
+  }), ",", ___EmotionJSX("a", _extends({
+    key: "link"
+  }, classLicenses('link'), {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: license.url
+  }), license.linkText));
+};

package/es/Figure/FigureLicenseDialog.js

@@ -0,0 +1,43 @@
+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); }
+
+/**
+ * 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.
+ *
+ */
+// N.B This component is used to render static markup serverside
+// Any interactivty is added by scripts located in the ndla-article-scripts package
+import React from 'react'; //@ts-ignore
+
+import Dialog from '../Dialog';
+import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+export 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 ___EmotionJSX(Dialog, {
+    id: id,
+    labelledby: headingLabelId,
+    messages: messages
+  }, ___EmotionJSX("div", classLicenses(), ___EmotionJSX("h3", _extends({
+    id: headingLabelId
+  }, classLicenses('title')), messages.rulesForUse), ___EmotionJSX(FigureLicenseByline, {
+    license: license,
+    messages: messages,
+    locale: locale
+  }), ___EmotionJSX(FigureLicenseCta, {
+    authors: authors,
+    title: title,
+    origin: origin,
+    messages: messages
+  }, children)));
+};

package/es/Figure/index.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+import Figure, { FigureCaption } from './Figure';
+export { Figure, FigureCaption };
+export { FigureLicenseDialog } from './FigureLicenseDialog';
+export { FigureExpandButton } from './FigureExpandButton';
+export { FigureBylineExpandButton } from './FigureBylineExpandButton';

package/es/FileList/File.js

@@ -0,0 +1,48 @@
+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); }
+
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import { Download } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = BEMHelper('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 ___EmotionJSX("span", {
+      key: format.url
+    }, ___EmotionJSX(Download, null), ___EmotionJSX("span", null, isPrimary ? titleWithFormat : "(".concat(format.fileType.toUpperCase(), ")")), ___EmotionJSX("span", _extends({}, classes('tooltip'), {
+      "aria-hidden": true,
+      role: "tooltip",
+      id: formatId
+    }), ___EmotionJSX("span", classes('tooltip-text'), format.tooltip)));
+  }
+
+  return ___EmotionJSX(SafeLink, _extends({}, classes('link'), {
+    key: format.url,
+    to: format.url,
+    target: "_blank",
+    "aria-label": titleWithFormat,
+    "aria-describedby": formatId
+  }), ___EmotionJSX(Download, null), ___EmotionJSX("span", classes('link-text'), ___EmotionJSX("span", null, isPrimary ? titleWithFormat : "(".concat(format.fileType.toUpperCase(), ")"))), ___EmotionJSX("span", _extends({}, classes('tooltip'), {
+    "aria-hidden": true,
+    role: "tooltip",
+    id: formatId
+  }), ___EmotionJSX("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 ___EmotionJSX("li", _extends({}, classes('item'), {
+    key: file.title
+  }), formatLinks);
+};
+
+export default File;

package/es/FileList/FileList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import File from './File';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = BEMHelper('c-file-list');
+
+var FileList = function FileList(_ref) {
+  var files = _ref.files,
+      heading = _ref.heading,
+      id = _ref.id;
+  return ___EmotionJSX("section", classes(), ___EmotionJSX("h1", classes('heading'), heading), ___EmotionJSX("ul", classes('files'), files.map(function (file) {
+    return ___EmotionJSX(File, {
+      key: "file-".concat(id, "-").concat(file.title),
+      file: file,
+      id: id
+    });
+  })));
+};
+
+export default FileList;

package/es/FileList/index.js

@@ -0,0 +1,3 @@
+import FileList from './FileList';
+export { default as File } from './File';
+export default FileList;

package/es/Hero/Hero.js

@@ -0,0 +1,64 @@
+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); }
+
+/**
+ * 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 * as contentTypes from '../model/ContentType';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = new BEMHelper({
+  name: 'hero',
+  prefix: 'c-'
+});
+export var Hero = function Hero(_ref) {
+  var children = _ref.children,
+      contentType = _ref.contentType;
+  return ___EmotionJSX("div", classes('', contentType), children || null);
+};
+export var SubjectMaterialHero = function SubjectMaterialHero(props) {
+  return ___EmotionJSX(Hero, _extends({
+    contentType: contentTypes.SUBJECT_MATERIAL
+  }, props));
+};
+export var TasksAndActivitiesHero = function TasksAndActivitiesHero(props) {
+  return ___EmotionJSX(Hero, _extends({
+    contentType: contentTypes.TASKS_AND_ACTIVITIES
+  }, props));
+};
+export var AssessmentResourcesHero = function AssessmentResourcesHero(props) {
+  return ___EmotionJSX(Hero, _extends({
+    contentType: contentTypes.ASSESSMENT_RESOURCES
+  }, props));
+};
+export var SubjectHero = function SubjectHero(props) {
+  return ___EmotionJSX(Hero, _extends({
+    contentType: contentTypes.SUBJECT
+  }, props));
+};
+export var ExternalLearningResourcesHero = function ExternalLearningResourcesHero(props) {
+  return ___EmotionJSX(Hero, _extends({
+    contentType: contentTypes.EXTERNAL_LEARNING_RESOURCES
+  }, props));
+};
+export var SourceMaterialHero = function SourceMaterialHero(props) {
+  return ___EmotionJSX(Hero, _extends({
+    contentType: contentTypes.SOURCE_MATERIAL
+  }, props));
+};
+export var NdlaFilmHero = function NdlaFilmHero(_ref2) {
+  var hasImage = _ref2.hasImage,
+      rest = _objectWithoutProperties(_ref2, ["hasImage"]);
+
+  return ___EmotionJSX(Hero, _extends({}, rest, {
+    contentType: hasImage ? 'ndla-film has-image' : 'ndla-film'
+  }));
+};

package/es/Hero/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2018-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';