@aarhus-university/au-lib-react-components 9.11.2 → 9.11.6

package/src/components/universe/StudentTopComponent.js

@@ -1,137 +1,137 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const parseBurgerLinks = (elements) => {
-  const links = [];
-  elements.forEach((e) => {
-    const link = e.querySelector('a');
-    links.push({
-      url: link.getAttribute('href'),
-      title: link.innerText,
-      className: e.getAttribute('class'),
-    });
-  });
-  return links;
-};
-
-class StudentTopComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      active: 0,
-      burgerLinks: [],
-    };
-  }
-
-  componentDidMount() {
-    const { promiseHandler } = this.props;
-    document.getElementById('fade').addEventListener('click', () => {
-      this.setState({
-        active: 0,
-      });
-    });
-
-    promiseHandler((data) => {
-      const container = document.createElement('div');
-      container.innerHTML = data;
-      const burgerLinks = container.querySelectorAll('ul.burger-links > li');
-      this.setState({
-        burgerLinks: parseBurgerLinks(burgerLinks),
-      });
-    });
-  }
-
-  componentDidUpdate() {
-    const { active } = this.state;
-    const fade = document.getElementById('fade');
-    if (active > 0) {
-      fade.style.display = 'block';
-    } else {
-      fade.style.display = 'none';
-    }
-    fade.style.opacity = 0;
-    if (active === 1 && typeof window.findWidgetInit !== 'undefined') {
-      window.findWidgetInit('.universe-utility .find-container');
-    }
-    if (active === 2) {
-      AU.alphabox.init();
-    }
-  }
-
-  render() {
-    const { lang, universeLabels } = this.props;
-    const { active, burgerLinks } = this.state;
-
-    const renderBurgerLinks = burgerLinks.map(
-      (u) => (
-        <li key={u.title} className={u.className}>
-          <a href={u.url}>
-            {u.title}
-          </a>
-        </li>
-      ),
-    );
-
-    return [
-      <div key="header" className="large-12 medium-12 small-12 columns">
-        <div>
-          <h2 className="universe-home" dangerouslySetInnerHTML={{ __html: universeLabels[lang].studentTitleLink }} />
-          <ul className="resetlist universe-icons">
-            <li className="mitstudie">
-              <a href={universeLabels[lang].mitstudieUrl}>{universeLabels[lang].mitstudieText}</a>
-            </li>
-            <li className="au" dangerouslySetInnerHTML={{ __html: universeLabels[lang].mainPageLink }} />
-            <li className={active === 1 ? 'active' : null}>
-              <button
-                type="button"
-                className="btn-find"
-                onClick={() => {
-                  this.setState((prevState) => ({
-                    active: prevState.active === 1 ? 0 : 1,
-                  }));
-                }}
-              >
-                Find
-              </button>
-            </li>
-            <li className={active === 2 ? 'active' : null}>
-              <button
-                type="button"
-                className="btn-menu"
-                onClick={() => {
-                  this.setState((prevState) => ({
-                    active: prevState.active === 2 ? 0 : 2,
-                  }));
-                }}
-              >
-                Menu
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>,
-      <div key={1} className={`universe-utility${active === 1 ? ' active' : ''}`}>
-        <div className="find-container au-map" />
-      </div>,
-      <div key={2} className={`universe-utility${active === 2 ? ' active' : ''}`}>
-        <div className="au_alphabox" id="au_alphabox_student_utility" />
-        <div className="universe-utility-links">
-          <ul className="resetlist">
-            {renderBurgerLinks}
-          </ul>
-        </div>
-      </div>,
-    ];
-  }
-}
-
-StudentTopComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  promiseHandler: PropTypes.func.isRequired,
-  universeLabels: PropTypes.shape({}).isRequired,
-};
-
-StudentTopComponent.displayName = 'StudentTopComponent';
-export default StudentTopComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const parseBurgerLinks = (elements) => {
+  const links = [];
+  elements.forEach((e) => {
+    const link = e.querySelector('a');
+    links.push({
+      url: link.getAttribute('href'),
+      title: link.innerText,
+      className: e.getAttribute('class'),
+    });
+  });
+  return links;
+};
+
+class StudentTopComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      active: 0,
+      burgerLinks: [],
+    };
+  }
+
+  componentDidMount() {
+    const { promiseHandler } = this.props;
+    document.getElementById('fade').addEventListener('click', () => {
+      this.setState({
+        active: 0,
+      });
+    });
+
+    promiseHandler((data) => {
+      const container = document.createElement('div');
+      container.innerHTML = data;
+      const burgerLinks = container.querySelectorAll('ul.burger-links > li');
+      this.setState({
+        burgerLinks: parseBurgerLinks(burgerLinks),
+      });
+    });
+  }
+
+  componentDidUpdate() {
+    const { active } = this.state;
+    const fade = document.getElementById('fade');
+    if (active > 0) {
+      fade.style.display = 'block';
+    } else {
+      fade.style.display = 'none';
+    }
+    fade.style.opacity = 0;
+    if (active === 1 && typeof window.findWidgetInit !== 'undefined') {
+      window.findWidgetInit('.universe-utility .find-container');
+    }
+    if (active === 2) {
+      AU.alphabox.init();
+    }
+  }
+
+  render() {
+    const { lang, universeLabels } = this.props;
+    const { active, burgerLinks } = this.state;
+
+    const renderBurgerLinks = burgerLinks.map(
+      (u) => (
+        <li key={u.title} className={u.className}>
+          <a href={u.url}>
+            {u.title}
+          </a>
+        </li>
+      ),
+    );
+
+    return [
+      <div key="header" className="large-12 medium-12 small-12 columns">
+        <div>
+          <h2 className="universe-home" dangerouslySetInnerHTML={{ __html: universeLabels[lang].studentTitleLink }} />
+          <ul className="resetlist universe-icons">
+            <li className="mitstudie">
+              <a href={universeLabels[lang].mitstudieUrl}>{universeLabels[lang].mitstudieText}</a>
+            </li>
+            <li className="au" dangerouslySetInnerHTML={{ __html: universeLabels[lang].mainPageLink }} />
+            <li className={active === 1 ? 'active' : null}>
+              <button
+                type="button"
+                className="btn-find"
+                onClick={() => {
+                  this.setState((prevState) => ({
+                    active: prevState.active === 1 ? 0 : 1,
+                  }));
+                }}
+              >
+                Find
+              </button>
+            </li>
+            <li className={active === 2 ? 'active' : null}>
+              <button
+                type="button"
+                className="btn-menu"
+                onClick={() => {
+                  this.setState((prevState) => ({
+                    active: prevState.active === 2 ? 0 : 2,
+                  }));
+                }}
+              >
+                Menu
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>,
+      <div key={1} className={`universe-utility${active === 1 ? ' active' : ''}`}>
+        <div className="find-container au-map" />
+      </div>,
+      <div key={2} className={`universe-utility${active === 2 ? ' active' : ''}`}>
+        <div className="au_alphabox" id="au_alphabox_student_utility" />
+        <div className="universe-utility-links">
+          <ul className="resetlist">
+            {renderBurgerLinks}
+          </ul>
+        </div>
+      </div>,
+    ];
+  }
+}
+
+StudentTopComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  promiseHandler: PropTypes.func.isRequired,
+  universeLabels: PropTypes.shape({}).isRequired,
+};
+
+StudentTopComponent.displayName = 'StudentTopComponent';
+export default StudentTopComponent;

package/src/components/universe/UniverseContainerComponent.js

@@ -1,62 +1,62 @@
-/* eslint-env browser */
-import React, { useState } from 'react';
-import axios from 'axios';
-import { universeLabels, profileLabels } from '../../lib/i18n';
-import StaffTopComponent from './StaffTopComponent';
-import StudentTopComponent from './StudentTopComponent';
-
-const UniverseContainerComponent = () => {
-  const [user, setUser] = useState({
-    chosenFirstNames: '',
-    chosenLastName: '',
-    preferredLanguage: '',
-    auId: 0,
-  });
-
-  const { auAuth } = window;
-  const lang = document.querySelector('html').getAttribute('lang');
-  const body = document.querySelector('body');
-  const staffClass = 'staff';
-  const studentClass = 'student';
-  const { universeGlobalContentPath } = window;
-  let universe = <div />;
-  if (body.classList.contains(staffClass)) {
-    universe = (
-      <StaffTopComponent
-        lang={lang}
-        user={user}
-        promiseHandler={(callback) => {
-          axios.get(universeGlobalContentPath).then((promise) => {
-            callback(promise.data);
-          });
-        }}
-        onLoad={(context) => {
-          setUser(context);
-        }}
-        auAuth={auAuth}
-        universeLabels={universeLabels}
-        profileLabels={profileLabels}
-      />
-    );
-  }
-  if (body.classList.contains(studentClass)) {
-    universe = (
-      <StudentTopComponent
-        lang={lang}
-        user={user}
-        promiseHandler={(callback) => {
-          axios.get(universeGlobalContentPath).then((promise) => {
-            callback(promise.data);
-          });
-        }}
-        universeLabels={universeLabels}
-        profileLabels={profileLabels}
-      />
-    );
-  }
-
-  return universe;
-};
-
-UniverseContainerComponent.displayName = 'UniverseContainerComponent';
-export default UniverseContainerComponent;
+/* eslint-env browser */
+import React, { useState } from 'react';
+import axios from 'axios';
+import { universeLabels, profileLabels } from '../../lib/i18n';
+import StaffTopComponent from './StaffTopComponent';
+import StudentTopComponent from './StudentTopComponent';
+
+const UniverseContainerComponent = () => {
+  const [user, setUser] = useState({
+    chosenFirstNames: '',
+    chosenLastName: '',
+    preferredLanguage: '',
+    auId: 0,
+  });
+
+  const { auAuth } = window;
+  const lang = document.querySelector('html').getAttribute('lang');
+  const body = document.querySelector('body');
+  const staffClass = 'staff';
+  const studentClass = 'student';
+  const { universeGlobalContentPath } = window;
+  let universe = <div />;
+  if (body.classList.contains(staffClass)) {
+    universe = (
+      <StaffTopComponent
+        lang={lang}
+        user={user}
+        promiseHandler={(callback) => {
+          axios.get(universeGlobalContentPath).then((promise) => {
+            callback(promise.data);
+          });
+        }}
+        onLoad={(context) => {
+          setUser(context);
+        }}
+        auAuth={auAuth}
+        universeLabels={universeLabels}
+        profileLabels={profileLabels}
+      />
+    );
+  }
+  if (body.classList.contains(studentClass)) {
+    universe = (
+      <StudentTopComponent
+        lang={lang}
+        user={user}
+        promiseHandler={(callback) => {
+          axios.get(universeGlobalContentPath).then((promise) => {
+            callback(promise.data);
+          });
+        }}
+        universeLabels={universeLabels}
+        profileLabels={profileLabels}
+      />
+    );
+  }
+
+  return universe;
+};
+
+UniverseContainerComponent.displayName = 'UniverseContainerComponent';
+export default UniverseContainerComponent;

package/src/components/wrapping/AUEmbedComponent.js

@@ -1,47 +1,47 @@
-/* eslint-env browser */
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
-import getSourceForFrame from '../../lib/wrapping';
-
-const AUEmbedComponent = ({
-  api,
-  path,
-  referrer,
-}) => {
-  const [source, setSource] = useState(null);
-  const [frameLoaded, setFrameLoaded] = useState(false);
-
-  return (
-    <AUSpinnerComponent
-      loaded={frameLoaded}
-      loadingCondition={!frameLoaded}
-      onLoad={() => {
-        getSourceForFrame(api, path, referrer, (frameSrc) => {
-          setSource(frameSrc.url);
-          setFrameLoaded(true);
-        });
-      }}
-    >
-      <iframe
-        id="AUEmbedIframe"
-        title="AUEmbed"
-        src={source}
-        onLoad={() => {
-          if (window.iFrameResize) {
-            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
-          }
-        }}
-      />
-    </AUSpinnerComponent>
-  );
-};
-
-AUEmbedComponent.propTypes = {
-  path: PropTypes.string.isRequired,
-  api: PropTypes.string.isRequired,
-  referrer: PropTypes.string.isRequired,
-};
-
-AUEmbedComponent.displayName = 'AUEmbedComponent';
-export default AUEmbedComponent;
+/* eslint-env browser */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import AUSpinnerComponent from '../delphinus/AUSpinnerComponent';
+import getSourceForFrame from '../../lib/wrapping';
+
+const AUEmbedComponent = ({
+  api,
+  path,
+  referrer,
+}) => {
+  const [source, setSource] = useState(null);
+  const [frameLoaded, setFrameLoaded] = useState(false);
+
+  return (
+    <AUSpinnerComponent
+      loaded={frameLoaded}
+      loadingCondition={!frameLoaded}
+      onLoad={() => {
+        getSourceForFrame(api, path, referrer, (frameSrc) => {
+          setSource(frameSrc.url);
+          setFrameLoaded(true);
+        });
+      }}
+    >
+      <iframe
+        id="AUEmbedIframe"
+        title="AUEmbed"
+        src={source}
+        onLoad={() => {
+          if (window.iFrameResize) {
+            window.iFrameResize({ heightCalculationMethods: 'taggedElement', log: false }, '#AUEmbedIframe');
+          }
+        }}
+      />
+    </AUSpinnerComponent>
+  );
+};
+
+AUEmbedComponent.propTypes = {
+  path: PropTypes.string.isRequired,
+  api: PropTypes.string.isRequired,
+  referrer: PropTypes.string.isRequired,
+};
+
+AUEmbedComponent.displayName = 'AUEmbedComponent';
+export default AUEmbedComponent;

package/src/config/webpack.dev.config.js

@@ -1,47 +1,47 @@
-const ESLintPlugin = require('eslint-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
-
-module.exports = {
-  mode: 'development',
-  devtool: 'eval-source-map',
-  devServer: {
-    inline: true,
-    contentBase: 'build',
-    port: '8088',
-  },
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, '../../build'),
-    filename: 'dev.js',
-  },
-  plugins: [
-    new ESLintPlugin({
-      fix: true,
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'all.css',
-      chunkFilename: '[id].css',
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, '..'),
-        use: {
-          loader: 'babel-loader',
-        },
-      },
-      {
-        test: /\.scss/,
-        include: path.resolve(__dirname, '..'),
-        use: [
-          MiniCssExtractPlugin.loader,
-          { loader: 'css-loader' },
-          { loader: 'sass-loader' },
-        ],
-      },
-    ],
-  },
-};
+const ESLintPlugin = require('eslint-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+module.exports = {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  devServer: {
+    inline: true,
+    contentBase: 'build',
+    port: '8088',
+  },
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, '../../build'),
+    filename: 'dev.js',
+  },
+  plugins: [
+    new ESLintPlugin({
+      fix: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'all.css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve(__dirname, '..'),
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.scss/,
+        include: path.resolve(__dirname, '..'),
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ],
+      },
+    ],
+  },
+};