@aarhus-university/au-lib-react-components 9.11.19 → 9.12.0

package/src/components/delphinus/AUContentToggleComponent.js

@@ -1,32 +1,32 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
-
-const AUContentToggleComponent = ({ toggled, classNames, children }) => {
-  const toggleContainer = useRef();
-  useEffect(() => {
-    const toggle = toggleContainer.current.querySelector('.content-toggle__content');
-    if (toggle) {
-      const button = setContentToggle(toggle);
-      button.setAttribute('aria-expanded', toggled);
-    }
-  }, []);
-  return (
-    <div ref={toggleContainer} className={classNames}>
-      {children}
-    </div>
-  );
-};
-
-AUContentToggleComponent.defaultProps = {
-  children: null,
-  classNames: null,
-};
-
-AUContentToggleComponent.propTypes = {
-  children: PropTypes.element,
-  toggled: PropTypes.bool.isRequired,
-  classNames: PropTypes.string,
-};
-AUContentToggleComponent.displayName = 'AUContentToggleComponent';
-export default AUContentToggleComponent;
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/source/js/components/content-toggle';
+
+const AUContentToggleComponent = ({ toggled, classNames, children }) => {
+  const toggleContainer = useRef();
+  useEffect(() => {
+    const toggle = toggleContainer.current.querySelector('.content-toggle__content');
+    if (toggle) {
+      const button = setContentToggle(toggle);
+      button.setAttribute('aria-expanded', toggled);
+    }
+  }, []);
+  return (
+    <div ref={toggleContainer} className={classNames}>
+      {children}
+    </div>
+  );
+};
+
+AUContentToggleComponent.defaultProps = {
+  children: null,
+  classNames: null,
+};
+
+AUContentToggleComponent.propTypes = {
+  children: PropTypes.element,
+  toggled: PropTypes.bool.isRequired,
+  classNames: PropTypes.string,
+};
+AUContentToggleComponent.displayName = 'AUContentToggleComponent';
+export default AUContentToggleComponent;

package/src/components/delphinus/AUDatepickerComponent.js

@@ -1,164 +1,164 @@
-/* eslint-env browser */
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import AUCalendarComponent from './AUCalendarComponent';
-
-class AUDatepickerComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showCalendar: false,
-      date: props.date,
-      dateFormatted: props.date ? moment(props.date).format(props.format) : '',
-    };
-
-    this.hideDatePicker = this.hideDatePicker.bind(this);
-  }
-
-  hideDatePicker() {
-    const { onHide } = this.props;
-    const { date, dateFormatted } = this.state;
-    this.setState({
-      showCalendar: false,
-    }, () => {
-      onHide(date, dateFormatted);
-    });
-  }
-
-  render() {
-    const { showCalendar, dateFormatted } = this.state;
-    let { date } = this.state;
-    if (!date) {
-      date = new Date();
-    }
-    const {
-      onDateChange,
-      format,
-      showTime,
-      id,
-      lang,
-      showLabel,
-      labelInline,
-      labelText,
-      fullWidth,
-      yearSpanMinus,
-      yearSpanPlus,
-      limitStart,
-      limitEnd,
-      disabled,
-    } = this.props;
-
-    let className = 'form__field';
-    if (fullWidth) {
-      className = `${className} form__field--full-width`;
-    }
-
-    if (labelInline) {
-      className = `${className} form__field--inline-label`;
-    }
-
-    if (disabled) {
-      className = `${className} visually-disabled`;
-    }
-
-    return (
-      <div className="datepicker" aria-owns={`${id}-calendar`} aria-haspopup="true" aria-expanded={showCalendar}>
-        <div className={className}>
-          {
-            showLabel && (
-              <label htmlFor={id}>{labelText}</label>
-            )
-          }
-          <input
-            id={id}
-            type="text"
-            value={dateFormatted}
-            title={lang === 'da' ? 'Klik for at åbne datovælger' : 'Click to open datepicker'}
-            readOnly
-            disabled={disabled}
-            onClick={() => {
-              this.setState((prevState) => ({
-                showCalendar: !prevState.showCalendar,
-              }));
-            }}
-          />
-        </div>
-        {
-          showCalendar && (
-            <div className="datepicker__calendar-container">
-              <AUCalendarComponent
-                key={showCalendar}
-                minuteInterval={1}
-                selected={date}
-                day={date.getDate()}
-                month={date.getMonth() + 1}
-                year={date.getFullYear()}
-                hour={date.getHours()}
-                minute={date.getMinutes()}
-                onSelected={(selected) => {
-                  const formatted = moment(selected).format(format);
-                  this.setState({
-                    date: selected,
-                    dateFormatted: formatted,
-                  }, () => {
-                    onDateChange(selected, formatted);
-                  });
-                }}
-                showTime={showTime}
-                yearSpanMinus={yearSpanMinus}
-                yearSpanPlus={yearSpanPlus}
-                closeable
-                onClose={this.hideDatePicker}
-                controls={id}
-                limitStart={limitStart}
-                limitEnd={limitEnd}
-              />
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AUDatepickerComponent.defaultProps = {
-  date: null,
-  onDateChange: () => { },
-  onHide: () => { },
-  format: 'YYYY-MM-DD HH:mm',
-  showTime: true,
-  lang: 'da',
-  showLabel: false,
-  labelInline: false,
-  labelText: 'Vælg dato:',
-  fullWidth: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  limitStart: null,
-  limitEnd: null,
-  disabled: false,
-};
-
-AUDatepickerComponent.propTypes = {
-  id: PropTypes.string.isRequired,
-  lang: PropTypes.string,
-  date: PropTypes.instanceOf(Date),
-  onDateChange: PropTypes.func,
-  onHide: PropTypes.func,
-  format: PropTypes.string,
-  showTime: PropTypes.bool,
-  showLabel: PropTypes.bool,
-  labelInline: PropTypes.bool,
-  labelText: PropTypes.string,
-  fullWidth: PropTypes.bool,
-  yearSpanMinus: PropTypes.bool,
-  yearSpanPlus: PropTypes.bool,
-  limitStart: PropTypes.instanceOf(Date),
-  limitEnd: PropTypes.instanceOf(Date),
-  disabled: PropTypes.bool,
-};
-
-AUDatepickerComponent.displayName = 'AUDatepickerComponent';
-export default AUDatepickerComponent;
+/* eslint-env browser */
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import AUCalendarComponent from './AUCalendarComponent';
+
+class AUDatepickerComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showCalendar: false,
+      date: props.date,
+      dateFormatted: props.date ? moment(props.date).format(props.format) : '',
+    };
+
+    this.hideDatePicker = this.hideDatePicker.bind(this);
+  }
+
+  hideDatePicker() {
+    const { onHide } = this.props;
+    const { date, dateFormatted } = this.state;
+    this.setState({
+      showCalendar: false,
+    }, () => {
+      onHide(date, dateFormatted);
+    });
+  }
+
+  render() {
+    const { showCalendar, dateFormatted } = this.state;
+    let { date } = this.state;
+    if (!date) {
+      date = new Date();
+    }
+    const {
+      onDateChange,
+      format,
+      showTime,
+      id,
+      lang,
+      showLabel,
+      labelInline,
+      labelText,
+      fullWidth,
+      yearSpanMinus,
+      yearSpanPlus,
+      limitStart,
+      limitEnd,
+      disabled,
+    } = this.props;
+
+    let className = 'form__field';
+    if (fullWidth) {
+      className = `${className} form__field--full-width`;
+    }
+
+    if (labelInline) {
+      className = `${className} form__field--inline-label`;
+    }
+
+    if (disabled) {
+      className = `${className} visually-disabled`;
+    }
+
+    return (
+      <div className="datepicker" aria-owns={`${id}-calendar`} aria-haspopup="true" aria-expanded={showCalendar}>
+        <div className={className}>
+          {
+            showLabel && (
+              <label htmlFor={id}>{labelText}</label>
+            )
+          }
+          <input
+            id={id}
+            type="text"
+            value={dateFormatted}
+            title={lang === 'da' ? 'Klik for at åbne datovælger' : 'Click to open datepicker'}
+            readOnly
+            disabled={disabled}
+            onClick={() => {
+              this.setState((prevState) => ({
+                showCalendar: !prevState.showCalendar,
+              }));
+            }}
+          />
+        </div>
+        {
+          showCalendar && (
+            <div className="datepicker__calendar-container">
+              <AUCalendarComponent
+                key={showCalendar}
+                minuteInterval={1}
+                selected={date}
+                day={date.getDate()}
+                month={date.getMonth() + 1}
+                year={date.getFullYear()}
+                hour={date.getHours()}
+                minute={date.getMinutes()}
+                onSelected={(selected) => {
+                  const formatted = moment(selected).format(format);
+                  this.setState({
+                    date: selected,
+                    dateFormatted: formatted,
+                  }, () => {
+                    onDateChange(selected, formatted);
+                  });
+                }}
+                showTime={showTime}
+                yearSpanMinus={yearSpanMinus}
+                yearSpanPlus={yearSpanPlus}
+                closeable
+                onClose={this.hideDatePicker}
+                controls={id}
+                limitStart={limitStart}
+                limitEnd={limitEnd}
+              />
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+AUDatepickerComponent.defaultProps = {
+  date: null,
+  onDateChange: () => { },
+  onHide: () => { },
+  format: 'YYYY-MM-DD HH:mm',
+  showTime: true,
+  lang: 'da',
+  showLabel: false,
+  labelInline: false,
+  labelText: 'Vælg dato:',
+  fullWidth: true,
+  yearSpanMinus: 5,
+  yearSpanPlus: 5,
+  limitStart: null,
+  limitEnd: null,
+  disabled: false,
+};
+
+AUDatepickerComponent.propTypes = {
+  id: PropTypes.string.isRequired,
+  lang: PropTypes.string,
+  date: PropTypes.instanceOf(Date),
+  onDateChange: PropTypes.func,
+  onHide: PropTypes.func,
+  format: PropTypes.string,
+  showTime: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  labelInline: PropTypes.bool,
+  labelText: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  yearSpanMinus: PropTypes.bool,
+  yearSpanPlus: PropTypes.bool,
+  limitStart: PropTypes.instanceOf(Date),
+  limitEnd: PropTypes.instanceOf(Date),
+  disabled: PropTypes.bool,
+};
+
+AUDatepickerComponent.displayName = 'AUDatepickerComponent';
+export default AUDatepickerComponent;

package/src/components/delphinus/AULoginComponent.js

@@ -1,65 +1,65 @@
-/* eslint-env browser */
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-const mitstudieLabels = {
-  da: {
-    frontHeadline: 'Mit studie',
-    frontText: 'En samlet indgang til dit studieoverblik, studieinformation<br />og selvbetjeningssystemer.',
-    signIn: 'Log ind',
-  },
-  en: {
-    frontHeadline: 'My studies',
-    frontText: 'A single point of access to study information and self-service systems.',
-    signIn: 'Sign in',
-  },
-};
-
-const AULoginComponent = ({ labels, signInUri, notification }) => {
-  useEffect(() => {
-    document.querySelector('main').classList.remove('theme--normal');
-    const pageNavTop = document.querySelector('.page__navigation-top');
-    if (pageNavTop) {
-      pageNavTop.classList.remove('theme--normal');
-    }
-  }, []);
-  const redirectUri = window.location.pathname;
-  return (
-    <>
-      <div className="page__content__block">
-        <h1>
-          <strong>
-            {labels[window.appLang].frontHeadline}
-          </strong>
-        </h1>
-        <p className="text--intro" dangerouslySetInnerHTML={{ __html: labels[window.appLang].frontText }} />
-        <a
-          className="button button--large"
-          href={`/${window.appLang}/${signInUri}?redirectUri=${redirectUri}`}
-        >
-          {labels[window.appLang].signIn}
-        </a>
-      </div>
-      {notification}
-    </>
-  );
-};
-
-AULoginComponent.defaultProps = {
-  labels: mitstudieLabels,
-  signInUri: 'account/signin',
-  notification: null,
-};
-
-AULoginComponent.propTypes = {
-  labels: PropTypes.shape({
-    frontHeadline: PropTypes.string.isRequired,
-    frontText: PropTypes.string.isRequired,
-    signIn: PropTypes.string.isRequired,
-  }),
-  signInUri: PropTypes.string,
-  notification: PropTypes.element,
-};
-
-AULoginComponent.displayName = 'AULoginComponent';
-export default AULoginComponent;
+/* eslint-env browser */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const mitstudieLabels = {
+  da: {
+    frontHeadline: 'Mit studie',
+    frontText: 'En samlet indgang til dit studieoverblik, studieinformation<br />og selvbetjeningssystemer.',
+    signIn: 'Log ind',
+  },
+  en: {
+    frontHeadline: 'My studies',
+    frontText: 'A single point of access to study information and self-service systems.',
+    signIn: 'Sign in',
+  },
+};
+
+const AULoginComponent = ({ labels, signInUri, notification }) => {
+  useEffect(() => {
+    document.querySelector('main').classList.remove('theme--normal');
+    const pageNavTop = document.querySelector('.page__navigation-top');
+    if (pageNavTop) {
+      pageNavTop.classList.remove('theme--normal');
+    }
+  }, []);
+  const redirectUri = window.location.pathname;
+  return (
+    <>
+      <div className="page__content__block">
+        <h1>
+          <strong>
+            {labels[window.appLang].frontHeadline}
+          </strong>
+        </h1>
+        <p className="text--intro" dangerouslySetInnerHTML={{ __html: labels[window.appLang].frontText }} />
+        <a
+          className="button button--large"
+          href={`/${window.appLang}/${signInUri}?redirectUri=${redirectUri}`}
+        >
+          {labels[window.appLang].signIn}
+        </a>
+      </div>
+      {notification}
+    </>
+  );
+};
+
+AULoginComponent.defaultProps = {
+  labels: mitstudieLabels,
+  signInUri: 'account/signin',
+  notification: null,
+};
+
+AULoginComponent.propTypes = {
+  labels: PropTypes.shape({
+    frontHeadline: PropTypes.string.isRequired,
+    frontText: PropTypes.string.isRequired,
+    signIn: PropTypes.string.isRequired,
+  }),
+  signInUri: PropTypes.string,
+  notification: PropTypes.element,
+};
+
+AULoginComponent.displayName = 'AULoginComponent';
+export default AULoginComponent;