- );
+ const classes = useStyles();
+
+ useEffect(() => {
+
+ function handleClickLink(link) {
+ onClickLink({
+ ...link,
+ manualId: link.manualId ? link.manualId : manualId
+ });
+ }
+
+ const options = {
+ remarkReactComponents: {
+ a: (props) => (
+
+
+ );
+}
+
+Article.propTypes = {
+ manualId: PropTypes.string.isRequired,
+ articleId: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ path: PropTypes.string.isRequired,
+ subTitle: PropTypes.string,
+ body: PropTypes.string,
+ direction: PropTypes.string.isRequired,
+ onClickLink: PropTypes.func.isRequired
+};
+
+Article.defaultProps = {
+ direction: 'ltr'
+};
diff --git a/src/js/academy-es6/components/Articles.js b/src/js/academy-es6/components/Articles.js
new file mode 100644
index 000000000..51acb973b
--- /dev/null
+++ b/src/js/academy-es6/components/Articles.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {List, BulletList} from 'react-content-loader';
+import {makeStyles} from '@material-ui/core/styles';
+import Article from './Article';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ width: '100%',
+ overflowY: 'scroll',
+ backgroundColor: '#fff',
+ // TRICKY: give room for the title bar
+ maxHeight: 'calc(100vh - 40px)'
+ },
+ frame: {
+ padding: 30
+ },
+ loading: {
+ maxWidth: 600
+ }
+}));
+
+/**
+ * Renders a list of tA articles.
+ * While the list is empty a placeholder will be displayed.
+ * @param articles
+ * @param onClickLink
+ * @returns
+ * @constructor
+ */
+export default function ArticleList({articles, onClickLink}) {
+ const classes = useStyles();
+
+ if (articles.length > 0) {
+ return (
+ {title}
+{subTitle}
+ {component} +
+
+ );
+ } else {
+ // placeholder while articles are loading
+ return (
+
+
+ {articles.map((a, i) => (
+
+ ))}
+
+
+
+
+ );
+ }
+
+}
+
+ArticleList.propTypes = {
+ articles: PropTypes.array.isRequired,
+ onClickLink: PropTypes.func.isRequired
+};
diff --git a/src/js/academy-es6/components/ChooseTranslationDialog.js b/src/js/academy-es6/components/ChooseTranslationDialog.js
new file mode 100644
index 000000000..ada68831a
--- /dev/null
+++ b/src/js/academy-es6/components/ChooseTranslationDialog.js
@@ -0,0 +1,223 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {makeStyles} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import WifiIcon from '@material-ui/icons/Wifi';
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import Typography from '@material-ui/core/Typography';
+import {useControlledProp, useKeyboard} from "../util";
+
+const useRawStyles = makeStyles(theme => ({
+ leftIcon: {
+ marginRight: theme.spacing(1)
+ },
+ listIcon: {
+ // marginRight: theme.spacing(1)
+ },
+ label: {
+ display: 'flex',
+ width: '100%'
+ },
+ title: {
+ flexGrow: 1
+ },
+ radio: {
+ '&:hover': {
+ backgroundColor: '#eee'
+ }
+ },
+ labelRTL: {
+ direction: 'rtl',
+ display: 'flex',
+ width: '100%'
+ }
+}));
+
+/**
+ * Renders a title with text in the correct position
+ * based on the language direction.
+ * @param props
+ * @returns {*}
+ * @constructor
+ */
+function LocalizedTitle(props) {
+ const {title, language, direction, classes} = props;
+
+ let displayedTitle = `${title} - ${language}`;
+ if (direction === 'rtl') {
+ displayedTitle = `${language} - ${title}`;
+ }
+ return (
+
+
+
+
+
+ -
+
-
+
-
+