@aarhus-university/au-lib-react-components 8.20.1 → 8.81.0

package/src/app.js

@@ -1,263 +0,0 @@
-/* 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);

package/src/components/AUAlertComponent.js

@@ -1,158 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-/**
- * AU Alert Komponent
- * Bliver brugt til elementer der kræver bekræftelse eller advarsel
- *
- * Eksempel:
- * ```jsx
- * <AUAlertComponent
- *         alert={this.state.alert}
- *         message="Er du sikker?"
- *         onConfirm={() => {
- *           this.setState({
- *             alert: false,
- *           });
- *         }}
- *         onCancel={() => {
- *           this.setState({
- *             alert: false,
- *           });
- *         }}
- *       >
- *         <button
- *           className="button"
- *           onClick={() => {
- *             this.setState({
- *               alert: true,
- *             });
- *           }}
- *         >
- *           Alert!
- *         </button>
- *       </AUAlertComponent>
- * ```
- */
-
-const AUAlertComponent = (props) => {
-  const {
-    message,
-    classNames,
-    content,
-    children,
-    alert,
-    onConfirm,
-    onCancel,
-    labels,
-  } = props;
-
-  const className = `au-alert ${classNames}`;
-
-  if (alert) {
-    return [
-      ReactDOM.createPortal(
-        <div className="au-alert-overlay" />,
-        document.querySelector('body'),
-      ),
-      ReactDOM.createPortal(
-        <div key="0" className={className}>
-          {(() => {
-            if (content != null) {
-              return content;
-            }
-            return <div dangerouslySetInnerHTML={{ __html: message }} />;
-          })()}
-          {(() => {
-            if (typeof onConfirm === 'function') {
-              return (
-                <button
-                  type="button"
-                  className="button confirm"
-                  onClick={() => {
-                    onConfirm();
-                  }}
-                >
-                  {labels[0]}
-                </button>
-              );
-            }
-            return null;
-          })()}
-          {(() => {
-            if (typeof onCancel === 'function') {
-              return (
-                <button
-                  type="button"
-                  className="button cancel"
-                  onClick={() => {
-                    onCancel();
-                  }}
-                >
-                  {labels[1]}
-                </button>
-              );
-            }
-            return null;
-          })()}
-        </div>, document.querySelector('body'),
-      ),
-      children,
-    ];
-  }
-
-  if (!children && !content) {
-    return <div />;
-  }
-
-  return children || content;
-};
-
-AUAlertComponent.defaultProps = {
-  children: null,
-  content: null,
-  classNames: '',
-  onConfirm: null,
-  onCancel: null,
-  labels: [
-    'OK',
-    'Annullér',
-  ],
-};
-
-AUAlertComponent.propTypes = {
-  /**
-  * Beskeden der vises i popup
-  */
-  message: PropTypes.string.isRequired,
-  /**
-   * True når beskeden skal vises
-   */
-  alert: PropTypes.bool.isRequired,
-  /**
-  * Det element der trigger beskeden
-  */
-  children: PropTypes.arrayOf(PropTypes.element),
-  /**
-  * Det samme som children
-  */
-  content: PropTypes.element,
-  /**
-   * Hvis der skal tilføjes ekstra klasser til alert-komponentet
-   */
-  classNames: PropTypes.string,
-  /**
-   * Kaldes ved confirm
-   */
-  onConfirm: PropTypes.func,
-  /**
-   * Kaldes ved cancel
-   */
-  onCancel: PropTypes.func,
-  labels: PropTypes.arrayOf(PropTypes.string.isRequired),
-};
-
-AUAlertComponent.displayName = 'AUAlertComponent';
-export default AUAlertComponent;

package/src/components/AUAmountComponent.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AUAmountComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      amount: props.amount,
-      countTo: 0,
-      newAmountReceived: false,
-      counting: false,
-      ticks: 0,
-    };
-
-    this.count = this.count.bind(this);
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (!prevState.newAmountReceived && nextProps.amount !== prevState.amount) {
-      return {
-        countTo: nextProps.amount,
-        newAmountReceived: true,
-        ticks: Math.abs(nextProps.amount - prevState.amount),
-      };
-    }
-
-    return null;
-  }
-
-  componentDidUpdate() {
-    const {
-      amount,
-      counting,
-      newAmountReceived,
-    } = this.state;
-    if (newAmountReceived && !counting) {
-      this.count(amount);
-    }
-  }
-
-  count(stateAmount) {
-    const { countTo, ticks } = this.state;
-    if (countTo !== stateAmount) {
-      let newAmount = 0;
-      if (stateAmount < countTo) {
-        newAmount = stateAmount + 1;
-      } else {
-        newAmount = stateAmount - 1;
-      }
-      this.setState({
-        amount: newAmount,
-        counting: true,
-      }, () => {
-        setTimeout(() => {
-          this.count(newAmount);
-        }, 100 / ticks);
-      });
-    } else {
-      this.setState({
-        newAmountReceived: false,
-        counting: false,
-      });
-    }
-  }
-
-  render() {
-    const { amount } = this.state;
-    return (
-      <span>
-        <strong>
-          {`${amount} `}
-        </strong>
-      </span>
-    );
-  }
-}
-
-AUAmountComponent.propTypes = {
-  amount: PropTypes.number.isRequired,
-};
-
-AUAmountComponent.displayName = 'AUAmountComponent';
-export default AUAmountComponent;

package/src/components/AUBannerComponent.js

@@ -1,99 +0,0 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * AU Banner Komponent
- *
- * Eksempel:
- * ```jsx
- *  <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"
-          />
- * ```
- */
-
-
-const AUBannerComponent = (props) => {
-  const {
-    classNames,
-    url,
-    header,
-    text,
-    image,
-  } = props;
-  return (
-    <div className={`aubanner ${classNames}`}>
-      {(() => {
-        const target = url.indexOf(window.location.host) > -1 || url.indexOf('/') === 0 ? '_self' : '_blank';
-        const banner2 = classNames.indexOf('aubanner-2') > -1;
-
-        if (banner2) {
-          return (
-            <a target={target} href={url} rel="noreferrer noopener">
-              {(() => {
-                if (image) {
-                  return <img src={image} alt="" />;
-                }
-                return null;
-              })()}
-              <div className="aubanner-content">
-                <h2>
-                  {header}
-                </h2>
-                <p>
-                  {text}
-                </p>
-              </div>
-            </a>
-          );
-        }
-
-        return (
-          <a target={target} href={url} rel="noreferrer noopener">
-            <div className="aubanner-content">
-              <div className="aubanner-content-overlay">
-                <div className="aubanner-content-text" />
-              </div>
-            </div>
-            <img src={image} alt="" />
-            <div className="aubanner-content-header">
-              <div className="aubanner-content-header-pos">
-                <h2>
-                  {header}
-                </h2>
-                <p>
-                  {text}
-                </p>
-              </div>
-            </div>
-          </a>
-        );
-      })()}
-
-    </div>
-  );
-};
-
-AUBannerComponent.defaultProps = {
-  text: '',
-  header: '',
-  image: null,
-  url: '#',
-  classNames: '',
-};
-
-AUBannerComponent.propTypes = {
-  header: PropTypes.string,
-  text: PropTypes.string,
-  image: PropTypes.string,
-  url: PropTypes.string,
-  classNames: PropTypes.string,
-};
-
-AUBannerComponent.displayName = 'AUBannerComponent';
-export default AUBannerComponent;