@ndla/ui 3.3.13 → 3.3.14

package/es/TopicIntroductionList/TopicIntroduction.js

@@ -6,12 +6,11 @@
  *
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
 import { Additional, Core } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
-import { TopicShape, ShortcutShape } from '../shapes';
 import TopicIntroductionShortcuts from './TopicIntroductionShortcuts';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 var topicClasses = new BEMHelper({
@@ -24,15 +23,20 @@ export var TopicIntroduction = function TopicIntroduction(_ref) {
       topic = _ref.topic,
       subjectPage = _ref.subjectPage,
       shortcuts = _ref.shortcuts,
-      messages = _ref.messages,
       shortcutAlwaysExpanded = _ref.shortcutAlwaysExpanded,
-      additional = _ref.additional,
-      showAdditionalCores = _ref.showAdditionalCores,
+      _ref$additional = _ref.additional,
+      additional = _ref$additional === void 0 ? false : _ref$additional,
+      _ref$showAdditionalCo = _ref.showAdditionalCores,
+      showAdditionalCores = _ref$showAdditionalCo === void 0 ? false : _ref$showAdditionalCo,
       id = _ref.id;
-  var contentTypeDescription = additional ? messages.tooltipAdditionalTopic : messages.tooltipCoreTopic;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var contentTypeDescription = t(additional ? 'resource.tooltipAdditionalTopic' : 'resource.tooltipCoreTopic');
   return ___EmotionJSX("li", {
     className: topicClasses('item', {
-      subjectPage: subjectPage,
+      subjectPage: !!subjectPage,
       additional: additional,
       showAdditionalCores: showAdditionalCores
     })
@@ -49,12 +53,12 @@ export var TopicIntroduction = function TopicIntroduction(_ref) {
     id: id,
     hidden: true
   }, contentTypeDescription), additional && ___EmotionJSX(Tooltip, {
-    tooltip: messages.tooltipAdditionalTopic,
+    tooltip: t('resource.tooltipAdditionalTopic'),
     align: "left"
   }, ___EmotionJSX(Additional, {
     className: "c-icon--20 u-margin-left-tiny"
   })), !additional && showAdditionalCores && ___EmotionJSX(Tooltip, {
-    tooltip: messages.tooltipCoreTopic,
+    tooltip: t('resource.tooltipCoreTopic'),
     align: "left"
   }, ___EmotionJSX(Core, {
     className: "c-icon--20 u-margin-left-tiny"
@@ -67,32 +71,9 @@ export var TopicIntroduction = function TopicIntroduction(_ref) {
   }), shortcuts && ___EmotionJSX(TopicIntroductionShortcuts, {
     alwaysExpanded: shortcutAlwaysExpanded,
     id: "".concat(topic.id, "_shortcuts"),
-    shortcuts: shortcuts,
-    messages: {
-      toggleButtonText: messages.shortcutButtonText
-    }
+    shortcuts: shortcuts
   })), topic.metaImage && ___EmotionJSX("div", null, ___EmotionJSX("img", {
     src: topic.metaImage.url,
     alt: topic.metaImage.alt
   })))));
-};
-TopicIntroduction.propTypes = {
-  additional: PropTypes.bool,
-  showAdditionalCores: PropTypes.bool,
-  messages: PropTypes.shape({
-    shortcutButtonText: PropTypes.string.isRequired,
-    tooltipAdditionalTopic: PropTypes.string,
-    tooltipCoreTopic: PropTypes.string
-  }),
-  topic: TopicShape.isRequired,
-  toTopic: PropTypes.func.isRequired,
-  subjectPage: PropTypes.bool,
-  shortcuts: PropTypes.arrayOf(ShortcutShape),
-  twoColumns: PropTypes.bool,
-  shortcutAlwaysExpanded: PropTypes.bool,
-  id: PropTypes.string.isRequired
-};
-TopicIntroduction.defaultProps = {
-  showAdditionalCores: false,
-  additional: false
 };

package/es/TopicIntroductionList/TopicIntroductionList.js

@@ -12,11 +12,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  *
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';
-import { TopicShape } from '../shapes';
 import { TopicIntroduction } from './TopicIntroduction';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 var topicClasses = new BEMHelper({
@@ -27,9 +25,12 @@ var topicClasses = new BEMHelper({
 
 var TopicIntroductionList = function TopicIntroductionList(_ref) {
   var topics = _ref.topics,
-      twoColumns = _ref.twoColumns,
-      shortcutAlwaysExpanded = _ref.shortcutAlwaysExpanded,
-      showAdditionalCores = _ref.showAdditionalCores,
+      _ref$twoColumns = _ref.twoColumns,
+      twoColumns = _ref$twoColumns === void 0 ? false : _ref$twoColumns,
+      _ref$shortcutAlwaysEx = _ref.shortcutAlwaysExpanded,
+      shortcutAlwaysExpanded = _ref$shortcutAlwaysEx === void 0 ? false : _ref$shortcutAlwaysEx,
+      _ref$showAdditionalCo = _ref.showAdditionalCores,
+      showAdditionalCores = _ref$showAdditionalCo === void 0 ? false : _ref$showAdditionalCo,
       toggleAdditionalCores = _ref.toggleAdditionalCores,
       rest = _objectWithoutProperties(_ref, ["topics", "twoColumns", "shortcutAlwaysExpanded", "showAdditionalCores", "toggleAdditionalCores"]);
 
@@ -56,11 +57,6 @@ var TopicIntroductionList = function TopicIntroductionList(_ref) {
       additional: additional,
       showAdditionalCores: showAdditionalCores,
       shortcutAlwaysExpanded: shortcutAlwaysExpanded,
-      messages: {
-        shortcutButtonText: t('resource.label'),
-        tooltipAdditionalTopic: t('resource.tooltipAdditionalTopic'),
-        tooltipCoreTopic: t('resource.tooltipCoreTopic')
-      },
       id: "".concat(topic.id, "_").concat(index)
     }));
   }), renderAdditionalTopicsTrigger && ___EmotionJSX("li", null, ___EmotionJSX(NoContentBox, {
@@ -70,17 +66,4 @@ var TopicIntroductionList = function TopicIntroductionList(_ref) {
   })));
 };
 
-TopicIntroductionList.propTypes = {
-  toTopic: PropTypes.func.isRequired,
-  topics: PropTypes.arrayOf(TopicShape).isRequired,
-  twoColumns: PropTypes.bool,
-  shortcutAlwaysExpanded: PropTypes.bool,
-  showAdditionalCores: PropTypes.bool,
-  toggleAdditionalCores: PropTypes.func.isRequired
-};
-TopicIntroductionList.defaultProps = {
-  twoColumns: false,
-  shortcutAlwaysExpanded: false,
-  showAdditionalCores: false
-};
 export default TopicIntroductionList;

package/es/TopicIntroductionList/TopicIntroductionShortcuts.js

@@ -1,134 +1,95 @@
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import BEMHelper from 'react-bem-helper';
 import { Forward } from '@ndla/icons/common';
 import ShortcutItem from './TopicShortcutItem';
-import { ShortcutShape } from '../shapes';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 var classes = new BEMHelper({
   name: 'topic-shortcuts',
   prefix: 'c-'
 });
 
-var TopicIntroductionShortcuts = /*#__PURE__*/function (_Component) {
-  _inherits(TopicIntroductionShortcuts, _Component);
-
-  var _super = _createSuper(TopicIntroductionShortcuts);
-
-  function TopicIntroductionShortcuts(props) {
-    var _this;
-
-    _classCallCheck(this, TopicIntroductionShortcuts);
+var TopicIntroductionShortcuts = function TopicIntroductionShortcuts(_ref) {
+  var id = _ref.id,
+      _ref$alwaysExpanded = _ref.alwaysExpanded,
+      alwaysExpanded = _ref$alwaysExpanded === void 0 ? false : _ref$alwaysExpanded,
+      shortcuts = _ref.shortcuts;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(alwaysExpanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      returned = _useState4[0],
+      setReturned = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showButtonText = _useState6[0],
+      setShowButtonText = _useState6[1];
+
+  var handleOnToggle = function handleOnToggle(newOpen) {
+    setOpen(newOpen);
+    setShowButtonText(!newOpen);
+    setReturned(!newOpen);
+  };
+
+  var onMouseEnter = undefined;
+  var onMouseLeave = undefined;
+  var buttonView = null;
+
+  if (!alwaysExpanded) {
+    onMouseEnter = function onMouseEnter() {
+      return handleOnToggle(true);
+    };
 
-    _this = _super.call(this, props);
-    _this.state = {
-      open: props.alwaysExpanded,
-      returned: false,
-      showButtonText: true
+    onMouseLeave = function onMouseLeave() {
+      return handleOnToggle(false);
     };
-    _this.handleOnToggle = _this.handleOnToggle.bind(_assertThisInitialized(_this));
-    return _this;
-  }
 
-  _createClass(TopicIntroductionShortcuts, [{
-    key: "handleOnToggle",
-    value: function handleOnToggle(open) {
-      this.setState({
-        open: open,
-        showButtonText: !open,
-        returned: !open
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          shortcuts = _this$props.shortcuts,
-          messages = _this$props.messages,
-          id = _this$props.id,
-          alwaysExpanded = _this$props.alwaysExpanded;
-      var _this$state = this.state,
-          open = _this$state.open,
-          returned = _this$state.returned,
-          showButtonText = _this$state.showButtonText;
-      var onMouseEnter = null;
-      var onMouseLeave = null;
-      var buttonView = null;
-
-      if (!alwaysExpanded) {
-        onMouseEnter = function onMouseEnter() {
-          return _this2.handleOnToggle(true);
-        };
-
-        onMouseLeave = function onMouseLeave() {
-          return _this2.handleOnToggle(false);
-        };
-
-        buttonView = ___EmotionJSX("button", _extends({
-          type: "button",
-          "aria-expanded": this.state.open,
-          "aria-label": messages.toggleButtonText,
-          "aria-controls": id
-        }, classes('button', returned ? 're-enter' : ''), {
-          onClick: function onClick() {
-            _this2.handleOnToggle(!open);
-          }
-        }), ___EmotionJSX(Forward, null), showButtonText && ___EmotionJSX("span", classes('label'), messages.toggleButtonText));
+    buttonView = ___EmotionJSX("button", _extends({
+      type: "button",
+      "aria-expanded": open,
+      "aria-label": t('resource.label'),
+      "aria-controls": id
+    }, classes('button', returned ? 're-enter' : ''), {
+      onClick: function onClick() {
+        return handleOnToggle(!open);
       }
+    }), ___EmotionJSX(Forward, null), showButtonText && ___EmotionJSX("span", classes('label'), t('resource.label')));
+  }
 
-      return ___EmotionJSX("div", _extends({
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }, classes()), buttonView, open && ___EmotionJSX("ul", {
-        className: classes('list', open ? 'visible' : '').className
-      }, shortcuts.map(function (shortcut) {
-        return ___EmotionJSX("li", _extends({}, classes('item'), {
-          key: shortcut.id
-        }), ___EmotionJSX(ShortcutItem, {
-          shortcut: shortcut
-        }));
-      })));
-    }
-  }]);
-
-  return TopicIntroductionShortcuts;
-}(Component);
-
-TopicIntroductionShortcuts.propTypes = {
-  id: PropTypes.string.isRequired,
-  alwaysExpanded: PropTypes.bool,
-  messages: PropTypes.shape({
-    toggleButtonText: PropTypes.string.isRequired
-  }),
-  shortcuts: PropTypes.arrayOf(ShortcutShape).isRequired
-};
-TopicIntroductionShortcuts.defaultProps = {
-  alwaysExpanded: false
+  return ___EmotionJSX("div", _extends({
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, classes()), buttonView, open && ___EmotionJSX("ul", {
+    className: classes('list', open ? 'visible' : '').className
+  }, shortcuts.map(function (shortcut) {
+    return ___EmotionJSX("li", _extends({}, classes('item'), {
+      key: shortcut.id
+    }), ___EmotionJSX(ShortcutItem, {
+      shortcut: shortcut
+    }));
+  })));
 };
+
 export default TopicIntroductionShortcuts;

package/es/TopicIntroductionList/TopicShortcutItem.js

@@ -1,13 +1,11 @@
 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 PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import ContentTypeBadge from '../ContentTypeBadge';
-import { ShortcutShape } from '../shapes';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 var classes = new BEMHelper({
   name: 'topic-shortcuts',
@@ -42,11 +40,4 @@ var ShortcutItem = function ShortcutItem(_ref) {
   }), ___EmotionJSX("span", classes('count'), count)));
 };
 
-ShortcutItem.propTypes = {
-  shortcut: ShortcutShape.isRequired,
-  disableToolTip: PropTypes.bool
-};
-ShortcutItem.defaultProps = {
-  disableToolTip: false
-};
 export default ShortcutItem;