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

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);