@aarhus-university/au-lib-react-components 9.11.18 → 9.12.1

package/package.json

@@ -1,60 +1,60 @@
-{
-  "sideEffects": false,
-  "name": "@aarhus-university/au-lib-react-components",
-  "version": "9.11.18",
-  "description": "Library for shared React components for various applications on au.dk",
-  "main": "build/cjs/index.js",
-  "scripts": {
-    "dev": "webpack serve --mode development --env development --config src/config/webpack.dev.config.js",
-    "umd": "webpack --config src/config/webpack.umd.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
-  },
-  "author": {
-    "name": "Thomas Riis Hansen",
-    "email": "trh@au.dk"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.0.0",
-    "css-loader": "^5.0.0",
-    "eslint": "^7.0.0",
-    "eslint-config-airbnb": "^18.0.0",
-    "eslint-plugin-import": "^2.0.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
-    "eslint-plugin-react": "^7.0.0",
-    "eslint-webpack-plugin": "^2.0.0",
-    "mini-css-extract-plugin": "^1.0.0",
-    "sass": "^1.30.0",
-    "sass-loader": "^10.0.0",
-    "style-loader": "^0.23.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "^0.23.22",
-    "axios": "^0.18.1",
-    "lodash.debounce": "^4.0.8",
-    "moment": "^2.22.2",
-    "prop-types": "^15.7.2",
-    "query-string": "^5.1.1",
-    "react": "^17.0.0",
-    "react-autosuggest": "^10.0.2",
-    "react-dom": "^17.0.0",
-    "react-hot-loader": "^4.1.1",
-    "react-router-dom": "^5.2.0",
-    "webpack": "^5.0.0"
-  }
-}
+{
+  "sideEffects": false,
+  "name": "@aarhus-university/au-lib-react-components",
+  "version": "9.12.1",
+  "description": "Library for shared React components for various applications on au.dk",
+  "main": "build/cjs/index.js",
+  "scripts": {
+    "dev": "webpack serve --mode development --env development --config src/config/webpack.dev.config.js",
+    "umd": "webpack --config src/config/webpack.umd.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
+  },
+  "author": {
+    "name": "Thomas Riis Hansen",
+    "email": "trh@au.dk"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.0",
+    "babel-loader": "^8.0.0",
+    "css-loader": "^5.0.0",
+    "eslint": "^7.0.0",
+    "eslint-config-airbnb": "^18.0.0",
+    "eslint-plugin-import": "^2.0.0",
+    "eslint-plugin-jsx-a11y": "^6.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-webpack-plugin": "^2.0.0",
+    "mini-css-extract-plugin": "^1.0.0",
+    "sass": "^1.30.0",
+    "sass-loader": "^10.0.0",
+    "style-loader": "^0.23.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@aarhus-university/au-designsystem-delphinus": "^0.23.22",
+    "axios": "^0.18.1",
+    "lodash.debounce": "^4.0.8",
+    "moment": "^2.22.2",
+    "prop-types": "^15.7.2",
+    "query-string": "^5.1.1",
+    "react": "^17.0.0",
+    "react-autosuggest": "^10.0.2",
+    "react-dom": "^17.0.0",
+    "react-hot-loader": "^4.1.1",
+    "react-router-dom": "^5.2.0",
+    "webpack": "^5.0.0"
+  }
+}

package/src/all.js

@@ -1,3 +1,3 @@
-import './styles/app.scss';
-import './lib/au-databox';
-import './lib/au-alphabox';
+import './styles/app.scss';
+import './lib/au-databox';
+import './lib/au-alphabox';

package/src/app.js

@@ -1,263 +1,263 @@
-/* eslint-env browser */
-/* eslint no-param-reassign: 0 */
-import React from 'react';
-import { hot } from 'react-hot-loader';
-import AUCollapsibleComponent from './components/AUCollapsibleComponent';
-import AUFocusComponent from './components/AUFocusComponent';
-import AUSpinnerComponent from './components/AUSpinnerComponent';
-import AUBannerComponent from './components/AUBannerComponent';
-import AUDatepickerComponent from './components/AUDatepickerComponent';
-import AUAlertComponent from './components/AUAlertComponent';
-import AUModalComponent from './components/AUModalComponent';
-// import AUProfileContainerComponent from './components/profile/AUProfileContainerComponent';
-import './styles/app.scss';
-
-const banner = (
-  <AUBannerComponent
-    url="http://ps.au.dk/uddannelser"
-    header="Master i offentlig ledelse"
-    text="Find information om masteruddannelsen i offentlig ledelse og øvrige muligheder for efteruddannelse"
-    classNames="hastext aubanner-2"
-  />
-);
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      spinnerLoaded: false,
-      spinnerVisible: false,
-      alert: false,
-      modal: false,
-    };
-  }
-
-  render() {
-    const {
-      modal,
-      alert,
-      spinnerLoaded,
-      spinnerVisible,
-    } = this.state;
-    const spinnerID = 'collapse-spinner';
-    return [
-      <AUModalComponent
-        key="b"
-        domId="modal1"
-        show={modal}
-        onClose={() => {
-          this.setState({
-            modal: false,
-          });
-        }}
-      >
-        <h1>
-          Indholdet af en modal
-        </h1>
-      </AUModalComponent>,
-      <h3 key="o-datepicker">
-        AU Datepicker:
-      </h3>,
-      <div key="a" className="row">
-        <div className="cell column large-4 medium-4 small-12">
-          <AUDatepickerComponent />
-        </div>
-      </div>,
-      <h3 key="o-overlays">
-        Overlays:
-      </h3>,
-      <div key={0} className="row">
-        <div className="column large-12 medium-12 small-12">
-          <AUAlertComponent
-            alert={alert}
-            message="Er du sikker?"
-            onConfirm={() => {
-              this.setState({
-                alert: false,
-              });
-            }}
-            onCancel={() => {
-              this.setState({
-                alert: false,
-              });
-            }}
-            labels={['Ja', 'Nej']}
-          >
-            <div>
-              <button
-                type="button"
-                className="button"
-                onClick={() => {
-                  this.setState({
-                    alert: true,
-                  });
-                }}
-              >
-                Alert!
-              </button>
-            </div>
-            <div>
-              <button
-                type="button"
-                className="button"
-                onClick={() => {
-                  this.setState({
-                    modal: true,
-                  });
-                }}
-              >
-                Modal!
-              </button>
-            </div>
-          </AUAlertComponent>
-        </div>
-      </div>,
-      <h3 key="o-collapse">
-        Collapsible-elementer i alle afskygninger:
-      </h3>,
-      <div key={1} className="row">
-        <div className="cell column large-4 medium-4 small-12">
-          <AUCollapsibleComponent
-            key="collapse"
-            collapsed
-            headerElement={<div>Hej</div>}
-            level={0}
-            className="hide-for-small-only"
-            onClick={(collapsed) => {
-              this.setState({
-                spinnerVisible: !collapsed,
-              });
-            }}
-          >
-            <h1>
-              Test
-            </h1>
-          </AUCollapsibleComponent>
-        </div>
-        <div className="cell column large-4 medium-4 small-12">
-          <AUCollapsibleComponent
-            key="collapse"
-            collapsed={false}
-            header="Collapsible element"
-            level={2}
-            content={(
-              <div>
-                <h1>
-                  En overskrift
-                </h1>
-                <p>
-                  Noget tekst
-                </p>
-              </div>
-            )}
-            className="hide-for-small-only"
-            attributes={[{
-              attr: 'data-amount',
-              value: '2',
-              selector: ':scope > .csc-header > h2',
-            }]}
-          />
-        </div>
-        <div className="cell column large-4 medium-4 small-12">
-          <AUCollapsibleComponent
-            key="collapse"
-            collapsed
-            header="Collapsible element"
-            level={2}
-            content={banner}
-            className="hide-for-small-only"
-          />
-        </div>
-      </div>,
-      <h3 key="o-focus-banner">
-        TYPO3-indholdselementer (fokusfelter og bannere):
-      </h3>,
-      <div key={2} className="row">
-        <div className="cell column large-12 medium-12 small-12">
-          <AUFocusComponent
-            key="focus"
-            header={(
-              <h1>
-                Fokusfelt
-              </h1>
-            )}
-            text={(
-              <p>
-                Noget tekst
-              </p>
-            )}
-            links={(
-              <ul>
-                <li style={{ backgroundColor: 'rgba(0, 61, 133, .75)' }}>
-                  <a href="http://www.au.dk">
-                    Link
-                  </a>
-                </li>
-              </ul>
-            )}
-            style={{
-              backgroundImage: 'url(http://ps.au.dk/uploads/tx_templavoila/BSS_Foto_outdoor-51_fokusfelt_72ppi_04.jpg)',
-              height: '270px',
-            }}
-          />
-        </div>
-      </div>,
-      <div key={3} className="row">
-        <div className="cell column large-4 medium-4 small-12">
-          <AUBannerComponent
-            url="http://ps.au.dk/uddannelser"
-            header="Bachelor- og kandidatuddannelser"
-            text="Læs mere om, hvilke uddannelser vi udbyder på Institut for Statskundskab"
-            image="http://ps.au.dk/uploads/tx_gridelements/Bacheloruddannelse_04.jpg"
-            classNames="hastext aubanner-2"
-          />
-        </div>
-        <div className="cell column large-4 medium-4 small-12">
-          <AUBannerComponent
-            url="http://ps.au.dk/uddannelser"
-            header="Forskning"
-            text="Find de nyeste publikationer og forskningsnyheder fra Aarhus BSS"
-            image="http://bss.au.dk/uploads/tx_gridelements/forskning-aarhus-bss_35.jpg"
-            classNames="hastext light overlay_full"
-          />
-        </div>
-        <div className="cell column large-4 medium-4 small-12">
-          {banner}
-        </div>
-      </div>,
-      <div key={4} className="row">
-        <div className="column cell large-12 medium-12 small-12">
-          <div className="au_databox" />
-        </div>
-      </div>,
-      <h3 key="o-spinner">
-        Spinner:
-      </h3>,
-      <div key={5} className="row">
-        <AUSpinnerComponent
-          domID={spinnerID}
-          visible={spinnerVisible}
-          columns="large-12 medium-12 small-12"
-          loaded={spinnerLoaded}
-          loadingCondition
-          onLoad={() => {
-            setTimeout(() => {
-              this.setState({
-                spinnerLoaded: true,
-              });
-            }, 4000);
-          }}
-        >
-          <div className="column large-12 medium-12 small-12">
-            <h1>
-              Tekst, som kommer frem, når vi er færdig med at loade...
-            </h1>
-          </div>
-        </AUSpinnerComponent>
-      </div>,
-    ];
-  }
-}
-
-export default hot(module)(App);
+/* eslint-env browser */
+/* eslint no-param-reassign: 0 */
+import React from 'react';
+import { hot } from 'react-hot-loader';
+import AUCollapsibleComponent from './components/AUCollapsibleComponent';
+import AUFocusComponent from './components/AUFocusComponent';
+import AUSpinnerComponent from './components/AUSpinnerComponent';
+import AUBannerComponent from './components/AUBannerComponent';
+import AUDatepickerComponent from './components/AUDatepickerComponent';
+import AUAlertComponent from './components/AUAlertComponent';
+import AUModalComponent from './components/AUModalComponent';
+// import AUProfileContainerComponent from './components/profile/AUProfileContainerComponent';
+import './styles/app.scss';
+
+const banner = (
+  <AUBannerComponent
+    url="http://ps.au.dk/uddannelser"
+    header="Master i offentlig ledelse"
+    text="Find information om masteruddannelsen i offentlig ledelse og øvrige muligheder for efteruddannelse"
+    classNames="hastext aubanner-2"
+  />
+);
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      spinnerLoaded: false,
+      spinnerVisible: false,
+      alert: false,
+      modal: false,
+    };
+  }
+
+  render() {
+    const {
+      modal,
+      alert,
+      spinnerLoaded,
+      spinnerVisible,
+    } = this.state;
+    const spinnerID = 'collapse-spinner';
+    return [
+      <AUModalComponent
+        key="b"
+        domId="modal1"
+        show={modal}
+        onClose={() => {
+          this.setState({
+            modal: false,
+          });
+        }}
+      >
+        <h1>
+          Indholdet af en modal
+        </h1>
+      </AUModalComponent>,
+      <h3 key="o-datepicker">
+        AU Datepicker:
+      </h3>,
+      <div key="a" className="row">
+        <div className="cell column large-4 medium-4 small-12">
+          <AUDatepickerComponent />
+        </div>
+      </div>,
+      <h3 key="o-overlays">
+        Overlays:
+      </h3>,
+      <div key={0} className="row">
+        <div className="column large-12 medium-12 small-12">
+          <AUAlertComponent
+            alert={alert}
+            message="Er du sikker?"
+            onConfirm={() => {
+              this.setState({
+                alert: false,
+              });
+            }}
+            onCancel={() => {
+              this.setState({
+                alert: false,
+              });
+            }}
+            labels={['Ja', 'Nej']}
+          >
+            <div>
+              <button
+                type="button"
+                className="button"
+                onClick={() => {
+                  this.setState({
+                    alert: true,
+                  });
+                }}
+              >
+                Alert!
+              </button>
+            </div>
+            <div>
+              <button
+                type="button"
+                className="button"
+                onClick={() => {
+                  this.setState({
+                    modal: true,
+                  });
+                }}
+              >
+                Modal!
+              </button>
+            </div>
+          </AUAlertComponent>
+        </div>
+      </div>,
+      <h3 key="o-collapse">
+        Collapsible-elementer i alle afskygninger:
+      </h3>,
+      <div key={1} className="row">
+        <div className="cell column large-4 medium-4 small-12">
+          <AUCollapsibleComponent
+            key="collapse"
+            collapsed
+            headerElement={<div>Hej</div>}
+            level={0}
+            className="hide-for-small-only"
+            onClick={(collapsed) => {
+              this.setState({
+                spinnerVisible: !collapsed,
+              });
+            }}
+          >
+            <h1>
+              Test
+            </h1>
+          </AUCollapsibleComponent>
+        </div>
+        <div className="cell column large-4 medium-4 small-12">
+          <AUCollapsibleComponent
+            key="collapse"
+            collapsed={false}
+            header="Collapsible element"
+            level={2}
+            content={(
+              <div>
+                <h1>
+                  En overskrift
+                </h1>
+                <p>
+                  Noget tekst
+                </p>
+              </div>
+            )}
+            className="hide-for-small-only"
+            attributes={[{
+              attr: 'data-amount',
+              value: '2',
+              selector: ':scope > .csc-header > h2',
+            }]}
+          />
+        </div>
+        <div className="cell column large-4 medium-4 small-12">
+          <AUCollapsibleComponent
+            key="collapse"
+            collapsed
+            header="Collapsible element"
+            level={2}
+            content={banner}
+            className="hide-for-small-only"
+          />
+        </div>
+      </div>,
+      <h3 key="o-focus-banner">
+        TYPO3-indholdselementer (fokusfelter og bannere):
+      </h3>,
+      <div key={2} className="row">
+        <div className="cell column large-12 medium-12 small-12">
+          <AUFocusComponent
+            key="focus"
+            header={(
+              <h1>
+                Fokusfelt
+              </h1>
+            )}
+            text={(
+              <p>
+                Noget tekst
+              </p>
+            )}
+            links={(
+              <ul>
+                <li style={{ backgroundColor: 'rgba(0, 61, 133, .75)' }}>
+                  <a href="http://www.au.dk">
+                    Link
+                  </a>
+                </li>
+              </ul>
+            )}
+            style={{
+              backgroundImage: 'url(http://ps.au.dk/uploads/tx_templavoila/BSS_Foto_outdoor-51_fokusfelt_72ppi_04.jpg)',
+              height: '270px',
+            }}
+          />
+        </div>
+      </div>,
+      <div key={3} className="row">
+        <div className="cell column large-4 medium-4 small-12">
+          <AUBannerComponent
+            url="http://ps.au.dk/uddannelser"
+            header="Bachelor- og kandidatuddannelser"
+            text="Læs mere om, hvilke uddannelser vi udbyder på Institut for Statskundskab"
+            image="http://ps.au.dk/uploads/tx_gridelements/Bacheloruddannelse_04.jpg"
+            classNames="hastext aubanner-2"
+          />
+        </div>
+        <div className="cell column large-4 medium-4 small-12">
+          <AUBannerComponent
+            url="http://ps.au.dk/uddannelser"
+            header="Forskning"
+            text="Find de nyeste publikationer og forskningsnyheder fra Aarhus BSS"
+            image="http://bss.au.dk/uploads/tx_gridelements/forskning-aarhus-bss_35.jpg"
+            classNames="hastext light overlay_full"
+          />
+        </div>
+        <div className="cell column large-4 medium-4 small-12">
+          {banner}
+        </div>
+      </div>,
+      <div key={4} className="row">
+        <div className="column cell large-12 medium-12 small-12">
+          <div className="au_databox" />
+        </div>
+      </div>,
+      <h3 key="o-spinner">
+        Spinner:
+      </h3>,
+      <div key={5} className="row">
+        <AUSpinnerComponent
+          domID={spinnerID}
+          visible={spinnerVisible}
+          columns="large-12 medium-12 small-12"
+          loaded={spinnerLoaded}
+          loadingCondition
+          onLoad={() => {
+            setTimeout(() => {
+              this.setState({
+                spinnerLoaded: true,
+              });
+            }, 4000);
+          }}
+        >
+          <div className="column large-12 medium-12 small-12">
+            <h1>
+              Tekst, som kommer frem, når vi er færdig med at loade...
+            </h1>
+          </div>
+        </AUSpinnerComponent>
+      </div>,
+    ];
+  }
+}
+
+export default hot(module)(App);