@ndla/ui 3.2.1 → 3.2.2

package/es/Translation/Translation.js

@@ -0,0 +1,22 @@
+/**
+ * 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 { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = new BEMHelper({
+  name: 'translation',
+  prefix: 'c-'
+});
+
+var Translation = function Translation(_ref) {
+  var children = _ref.children,
+      index = _ref.index;
+  return ___EmotionJSX("div", classes(''), ___EmotionJSX("div", classes('index'), index), ___EmotionJSX("dl", classes('wrapper'), children));
+};
+
+export default Translation;

package/es/Translation/TranslationBox.js

@@ -0,0 +1,17 @@
+import React from 'react'; //@ts-ignore
+
+import { ArticleTabs } from '@ndla/tabs';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var TranslationBox = function TranslationBox(_ref) {
+  var tabs = _ref.tabs;
+  return ___EmotionJSX("div", {
+    className: "c-translation-box"
+  }, ___EmotionJSX("div", {
+    className: "c-bodybox c-bodybox--translation"
+  }, ___EmotionJSX(ArticleTabs, {
+    tabs: tabs
+  })));
+};
+
+export default TranslationBox;

package/es/Translation/TranslationLine.js

@@ -0,0 +1,37 @@
+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 { jsx as ___EmotionJSX } from "@emotion/core";
+var classes = new BEMHelper({
+  name: 'translation',
+  prefix: 'c-'
+});
+
+var TranslationLine = function TranslationLine(_ref) {
+  var children = _ref.children,
+      lang = _ref.lang,
+      langName = _ref.langName,
+      _ref$isTerm = _ref.isTerm,
+      isTerm = _ref$isTerm === void 0 ? false : _ref$isTerm;
+  var hasLang = langName && lang;
+
+  var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, classes('line-body'), {
+    lang: lang
+  }), children), hasLang && ___EmotionJSX("div", classes('line-lang'), langName));
+
+  if (isTerm) {
+    return ___EmotionJSX("dt", classes('line', hasLang ? 'lang' : ''), content);
+  }
+
+  return ___EmotionJSX("dd", classes('line', hasLang ? 'lang' : ''), content);
+};
+
+export default TranslationLine;

package/es/Translation/index.js

@@ -0,0 +1,3 @@
+export { default as Translation } from './Translation';
+export { default as TranslationBox } from './TranslationBox';
+export { default as TranslationLine } from './TranslationLine';

package/es/index-javascript.js

@@ -5,32 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { InfoBox } from './InfoBox';
-export { default as Logo } from './Logo';
 export { default as Table } from './Table';
 export { FilterList, FilterListPhone, FilterButtons } from './Filter';
-export { default as FactBox } from './FactBox';
-export { default as FileList, File } from './FileList';
 export { SearchOverlay, SearchField, SearchPage, SearchResult, SearchResultAuthor, SearchResultList, SearchResultItem, SearchFilter, SearchFilterList, SearchPopoverFilter, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, ExternalLearningResourcesBadge, SourceMaterialBadge } from './ContentTypeBadge';
-export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as TopicIntroductionList } from './TopicIntroductionList';
 export { default as TopicMenu, TopicMenuButton } from './TopicMenu';
-export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
 export { default as CompetenceGoals, CompetenceGoalList, CompetenceGoalListHeading, CompetenceGoal, CompetenceGoalsDialog } from './CompetenceGoals';
-export { default as NoContentBox } from './NoContentBox';
 export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
-export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';
-export { default as Masthead, MastheadItem } from './Masthead';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
 export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, MediaListItemImage, MediaListItemMeta } from './MediaList';
 export { EmbeddedTwitter, EmbeddedFacebook, EmbeddedFacebookPage } from './Embedded';
-export { default as Image, ImageLink } from './Image';
-export { makeSrcQueryString } from './Image';
-export { default as Portrait } from './Portrait';
-export { Translation, TranslationLine, TranslationBox } from './Translation';
-export { default as ContentLoader } from './ContentLoader';
 export { DisplayOnPageYOffset } from './Animation';
-export { default as InfoWidget } from './InfoWidget';
-export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically } from './NDLAFilm';
-export { default as Spinner } from './Spinner';
+export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically } from './NDLAFilm';

package/es/index.js

@@ -11,12 +11,29 @@
 /** @ts-ignore */
 export * from './index-javascript';
 export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article } from './Article';
+export { createUniversalPortal } from './utils/createUniversalPortal';
+export { default as NoContentBox } from './NoContentBox';
+export { default as Masthead, MastheadItem } from './Masthead';
+export { default as Portrait } from './Portrait';
+export { default as ContentLoader } from './ContentLoader';
+export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';
+export { default as FileList, File } from './FileList';
 export { BlogPost, BlogPostWrapper } from './BlogPosts';
+export { default as Logo } from './Logo';
+export { InfoBox } from './InfoBox';
+export { default as InfoWidget } from './InfoWidget';
 export { FrontpageInfo, FrontpageFilm, FrontpageToolbox, FrontpageMultidisciplinarySubject, FrontpageHeader, FrontpageSubjectIllustration, FrontpageSearch, FrontpageProgramMenu } from './Frontpage';
+export { default as FactBox } from './FactBox';
+export { default as Image, ImageLink } from './Image';
+export { makeSrcQueryString } from './Image';
+export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader } from './LearningPaths';
+export { Translation, TranslationLine, TranslationBox } from './Translation';
+export { default as Spinner } from './Spinner';
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';

package/es/locale/messages-en.js

@@ -774,6 +774,10 @@ var messages = _objectSpread(_objectSpread({
     reuse: 'Use video',
     error: 'Sorry, an error occurred while loading the video or metadata about the video.'
   },
+  other: {
+    download: 'Download content',
+    reuse: 'Use content'
+  },
   concept: {
     showDescription: 'Show concept description',
     error: {

package/es/locale/messages-nb.js

@@ -510,7 +510,7 @@ var messages = _objectSpread(_objectSpread({
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Velg målform'
+    prefixChangeLanguage: 'Velg språk'
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -774,6 +774,10 @@ var messages = _objectSpread(_objectSpread({
     reuse: 'Bruk video',
     error: 'Beklager, en feil oppstod ved lasting av videoen eller metadata om videoen.'
   },
+  other: {
+    download: 'Last ned innhold',
+    reuse: 'Bruk innhold'
+  },
   concept: {
     showDescription: 'Vis beskrivelsen av forklaringen.',
     error: {

package/es/locale/messages-nn.js

@@ -510,7 +510,7 @@ var messages = _objectSpread(_objectSpread({
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Vel målform'
+    prefixChangeLanguage: 'Vel språk'
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -774,6 +774,10 @@ var messages = _objectSpread(_objectSpread({
     reuse: 'Bruk video',
     error: 'Orsak, ein feil oppstod ved lasting av videoen eller metadata om videoen.'
   },
+  other: {
+    download: 'Last ned innhald',
+    reuse: 'Bruk innhald'
+  },
   concept: {
     showDescription: 'Vis skildring av forklaringa',
     error: {

package/lib/BackgroundImage/BackgroundImage.js

@@ -0,0 +1,40 @@
+"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 _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-background-image');
+
+var BackgroundImage = function BackgroundImage(_ref) {
+  var images = _ref.images,
+      _ref$showOverlay = _ref.showOverlay,
+      showOverlay = _ref$showOverlay === void 0 ? false : _ref$showOverlay;
+  return (0, _core.jsx)("div", classes('', {
+    showOverlay: showOverlay
+  }), images && images.map(function (image) {
+    return image.types.map(function (type) {
+      return (0, _core.jsx)("div", _extends({
+        key: "".concat(image.url).concat(type)
+      }, classes('background', type), {
+        style: {
+          backgroundImage: "url(".concat(image.url, ")")
+        }
+      }));
+    });
+  }));
+};
+
+var _default = BackgroundImage;
+exports["default"] = _default;

package/lib/BackgroundImage/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _BackgroundImage = _interopRequireDefault(require("./BackgroundImage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _BackgroundImage["default"];
+exports["default"] = _default;

package/lib/ContentLoader/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _util = require("@ndla/util");
+
+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 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 = (0, _util.uuid)();
+  var idGradient = (0, _util.uuid)();
+  return (0, _core.jsx)("svg", _extends({
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    version: "1.1",
+    preserveAspectRatio: preserveAspectRatio,
+    className: className
+  }, rest), (0, _core.jsx)("rect", {
+    style: {
+      fill: "url(#".concat(idGradient, ")")
+    },
+    clipPath: "url(#".concat(idClip, ")"),
+    x: "0",
+    y: "0",
+    width: width,
+    height: height
+  }), (0, _core.jsx)("defs", null, (0, _core.jsx)("clipPath", {
+    id: idClip
+  }, children), (0, _core.jsx)("linearGradient", {
+    id: idGradient
+  }, (0, _core.jsx)("stop", {
+    offset: "0%",
+    stopColor: primaryColor
+  }, (0, _core.jsx)("animate", {
+    attributeName: "offset",
+    values: "-2; 1",
+    dur: "".concat(speed, "s"),
+    repeatCount: "indefinite"
+  })), (0, _core.jsx)("stop", {
+    offset: "50%",
+    stopColor: secondaryColor
+  }, (0, _core.jsx)("animate", {
+    attributeName: "offset",
+    values: "-1.5; 1.5",
+    dur: "".concat(speed, "s"),
+    repeatCount: "indefinite"
+  })), (0, _core.jsx)("stop", {
+    offset: "100%",
+    stopColor: primaryColor
+  }, (0, _core.jsx)("animate", {
+    attributeName: "offset",
+    values: "-1; 2",
+    dur: "".concat(speed, "s"),
+    repeatCount: "indefinite"
+  })))));
+};
+
+var _default = ContentLoader;
+exports["default"] = _default;

package/lib/Dialog/Dialog.d.ts

@@ -19,5 +19,5 @@ interface Props {
     disablePortal?: boolean;
     onClose?: () => void;
 }
-export declare const Dialog: ({ children, messages, id, labelledby, label, modifier, disablePortal, hidden, onClose, ...rest }: Props) => any;
+export declare const Dialog: ({ children, messages, id, labelledby, label, modifier, disablePortal, hidden, onClose, ...rest }: Props) => JSX.Element;
 export {};

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.js

@@ -0,0 +1,105 @@
+"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), (0, _util.isFunction)(children) ? children({
+    typeClass: typeClass
+  }) : 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"
+  }));
+}