@ndla/ui 50.1.0 → 50.1.2

package/es/TagSelector/ariaMessages.js

@@ -6,87 +6,89 @@
  *
  */
 
-export var createAriaMessages = function createAriaMessages(t) {
-  return {
-    guidance: function guidance(props) {
-      var isSearchable = props.isSearchable,
-        isMulti = props.isMulti,
-        isDisabled = props.isDisabled,
-        tabSelectsValue = props.tabSelectsValue,
-        context = props.context;
-      switch (context) {
-        case 'menu':
-          return "".concat(t('tagSelector.aria.guidance.menu.updown')).concat(isDisabled ? '' : ", ".concat(t('tagSelector.aria.guidance.menu.enter')), ", ").concat(t('tagSelector.aria.guidance.menu.escape')).concat(tabSelectsValue ? ", ".concat(t('tagSelector.aria.guidance.menu.tab')) : '', ".");
-        case 'input':
-          return "".concat(props['aria-label'] || t('tagSelector.aria.guidance.input.select'), " ").concat(t('tagSelector.aria.guidance.input.focused'), " ").concat(isSearchable ? ", ".concat(t('tagSelector.aria.guidance.input.refine')) : '', ", ").concat(t('tagSelector.aria.guidance.input.down'), ", ").concat(isMulti ? " ".concat(t('tagSelector.aria.guidance.input.left')) : '', ", ").concat(t('tagSelector.aria.guidance.input.space'));
-        case 'value':
-          return t('tagSelector.aria.guidance.value');
-        default:
-          return '';
-      }
-    },
-    onChange: function onChange(props) {
-      var action = props.action,
-        _props$label = props.label,
-        label = _props$label === void 0 ? '' : _props$label,
-        labels = props.labels,
-        isDisabled = props.isDisabled;
-      switch (action) {
-        case 'deselect-option':
-        case 'pop-value':
-        case 'remove-value':
-          return t('tagSelector.aria.onChange.deselect', {
-            label: label
-          });
-        case 'clear':
-          return t('tagSelector.aria.onChange.clear');
-        case 'initial-input-focus':
-          return t('tagSelector.aria.onChange.initialFocus', {
-            labels: labels.join(',')
-          });
-        case 'select-option':
-          return isDisabled ? t('tagSelector.aria.onChange.selectedDisabled', {
-            label: label
-          }) : t('tagSelector.aria.onChange.selected', {
-            label: label
-          });
-        default:
-          return '';
-      }
-    },
-    onFocus: function onFocus(props) {
-      var context = props.context,
-        focused = props.focused,
-        options = props.options,
-        _props$label2 = props.label,
-        label = _props$label2 === void 0 ? '' : _props$label2,
-        selectValue = props.selectValue,
-        isDisabled = props.isDisabled,
-        isSelected = props.isSelected;
-      var getArrayIndex = function getArrayIndex(arr, item) {
-        return arr && arr.length ? "".concat(arr.indexOf(item) + 1, " ").concat(t('tagSelector.aria.onFocus.of'), " ").concat(arr.length) : '';
-      };
-      if (context === 'value' && selectValue) {
-        return t('tagSelector.aria.onFocus.value', {
-          label: label,
-          position: getArrayIndex(selectValue, focused)
+export const createAriaMessages = t => ({
+  guidance: props => {
+    const {
+      isSearchable,
+      isMulti,
+      isDisabled,
+      tabSelectsValue,
+      context
+    } = props;
+    switch (context) {
+      case 'menu':
+        return `${t('tagSelector.aria.guidance.menu.updown')}${isDisabled ? '' : `, ${t('tagSelector.aria.guidance.menu.enter')}`}, ${t('tagSelector.aria.guidance.menu.escape')}${tabSelectsValue ? `, ${t('tagSelector.aria.guidance.menu.tab')}` : ''}.`;
+      case 'input':
+        return `${props['aria-label'] || t('tagSelector.aria.guidance.input.select')} ${t('tagSelector.aria.guidance.input.focused')} ${isSearchable ? `, ${t('tagSelector.aria.guidance.input.refine')}` : ''}, ${t('tagSelector.aria.guidance.input.down')}, ${isMulti ? ` ${t('tagSelector.aria.guidance.input.left')}` : ''}, ${t('tagSelector.aria.guidance.input.space')}`;
+      case 'value':
+        return t('tagSelector.aria.guidance.value');
+      default:
+        return '';
+    }
+  },
+  onChange: props => {
+    const {
+      action,
+      label = '',
+      labels,
+      isDisabled
+    } = props;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return t('tagSelector.aria.onChange.deselect', {
+          label
+        });
+      case 'clear':
+        return t('tagSelector.aria.onChange.clear');
+      case 'initial-input-focus':
+        return t('tagSelector.aria.onChange.initialFocus', {
+          labels: labels.join(',')
         });
-      }
-      if (context === 'menu') {
-        var disabled = isDisabled ? " ".concat(t('tagSelector.aria.disabled')) : '';
-        var status = "".concat(isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')).concat(disabled);
-        return t('tagSelector.aria.onFocus.menu', {
-          label: label,
-          status: status,
-          position: getArrayIndex(options, focused)
+      case 'select-option':
+        return isDisabled ? t('tagSelector.aria.onChange.selectedDisabled', {
+          label
+        }) : t('tagSelector.aria.onChange.selected', {
+          label
         });
-      }
-      return '';
-    },
-    onFilter: function onFilter(props) {
-      var inputValue = props.inputValue,
-        resultsMessage = props.resultsMessage;
-      return "".concat(resultsMessage).concat(inputValue ? " ".concat(t('tagSelector.aria.onFilter'), " ") + inputValue : '', ".");
+      default:
+        return '';
+    }
+  },
+  onFocus: props => {
+    const {
+      context,
+      focused,
+      options,
+      label = '',
+      selectValue,
+      isDisabled,
+      isSelected
+    } = props;
+    const getArrayIndex = (arr, item) => arr && arr.length ? `${arr.indexOf(item) + 1} ${t('tagSelector.aria.onFocus.of')} ${arr.length}` : '';
+    if (context === 'value' && selectValue) {
+      return t('tagSelector.aria.onFocus.value', {
+        label,
+        position: getArrayIndex(selectValue, focused)
+      });
+    }
+    if (context === 'menu') {
+      const disabled = isDisabled ? ` ${t('tagSelector.aria.disabled')}` : '';
+      const status = `${isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')}${disabled}`;
+      return t('tagSelector.aria.onFocus.menu', {
+        label,
+        status,
+        position: getArrayIndex(options, focused)
+      });
     }
-  };
-};
+    return '';
+  },
+  onFilter: props => {
+    const {
+      inputValue,
+      resultsMessage
+    } = props;
+    return `${resultsMessage}${inputValue ? ` ${t('tagSelector.aria.onFilter')} ` + inputValue : ''}.`;
+  }
+});

package/es/ToolboxPage/ToolboxInfo.js

@@ -12,14 +12,17 @@ import { NavigationBox } from '../Navigation';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var ToolboxInfo = function ToolboxInfo(_ref) {
-  var title = _ref.title,
-    introduction = _ref.introduction,
-    topics = _ref.topics,
-    onSelectTopic = _ref.onSelectTopic,
-    id = _ref.id;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+const ToolboxInfo = _ref => {
+  let {
+    title,
+    introduction,
+    topics,
+    onSelectTopic,
+    id
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
   return _jsxs(_Fragment, {
     children: [_jsx(Heading, {
       element: "h1",

package/es/Topic/Loader.js

@@ -1,102 +1,100 @@
 import ContentLoader from '../ContentLoader';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var Loader = function Loader() {
-  return _jsxs(ContentLoader, {
-    width: 800,
-    height: 880,
-    children: [_jsx("rect", {
-      x: "0",
-      y: "0",
-      rx: "3",
-      ry: "3",
-      width: "500",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "100",
-      rx: "3",
-      ry: "3",
-      width: "500",
-      height: "25"
-    }), _jsx("rect", {
-      x: "0",
-      y: "140",
-      rx: "3",
-      ry: "3",
-      width: "500",
-      height: "25"
-    }), _jsx("rect", {
-      x: "0",
-      y: "180",
-      rx: "3",
-      ry: "3",
-      width: "400",
-      height: "25"
-    }), _jsx("rect", {
-      x: "600",
-      y: "0",
-      rx: "3",
-      ry: "3",
-      width: "200",
-      height: "205"
-    }), _jsx("rect", {
-      x: "0",
-      y: "280",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "350",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "420",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "490",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "560",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "680",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "750",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    }), _jsx("rect", {
-      x: "0",
-      y: "820",
-      rx: "3",
-      ry: "3",
-      width: "800",
-      height: "60"
-    })]
-  });
-};
+const Loader = () => _jsxs(ContentLoader, {
+  width: 800,
+  height: 880,
+  children: [_jsx("rect", {
+    x: "0",
+    y: "0",
+    rx: "3",
+    ry: "3",
+    width: "500",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "100",
+    rx: "3",
+    ry: "3",
+    width: "500",
+    height: "25"
+  }), _jsx("rect", {
+    x: "0",
+    y: "140",
+    rx: "3",
+    ry: "3",
+    width: "500",
+    height: "25"
+  }), _jsx("rect", {
+    x: "0",
+    y: "180",
+    rx: "3",
+    ry: "3",
+    width: "400",
+    height: "25"
+  }), _jsx("rect", {
+    x: "600",
+    y: "0",
+    rx: "3",
+    ry: "3",
+    width: "200",
+    height: "205"
+  }), _jsx("rect", {
+    x: "0",
+    y: "280",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "350",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "420",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "490",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "560",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "680",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "750",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  }), _jsx("rect", {
+    x: "0",
+    y: "820",
+    rx: "3",
+    ry: "3",
+    width: "800",
+    height: "60"
+  })]
+});
 export default Loader;