@aarhus-university/au-lib-react-components 8.20.2 → 8.82.0

package/src/components/delphinus/AUCalendarComponent.js

@@ -1,422 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-
-const months = {
-  da: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
-  en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-};
-const dayTitles = {
-  da: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
-  en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-};
-
-const daysInMonth = (year, month) => new Date(year, month, 0).getDate();
-
-const addDays = (days, date) => new Date(date.getTime() + days * 60 * 24 * 60000);
-
-const calcEaster = (year) => {
-  const a = year % 19;
-  const b = Math.floor(year / 100);
-  const c = year % 100;
-  const d = Math.floor(b / 4);
-  const e = b % 4;
-  const f = Math.floor((b + 8) / 25);
-  const g = Math.floor((b - f + 1) / 3);
-  const h = (19 * a + b - d - g + 15) % 30;
-  const i = Math.floor(c / 4);
-  const k = c % 4;
-  const l = (32 + 2 * e + 2 * i - h - k) % 7;
-  const m = Math.floor((a + 11 * h + 22 * l) / 451);
-  const n0 = (h + l + 7 * m + 114);
-  const n = Math.floor(n0 / 31) - 1;
-  const p = (n0 % 31) + 1;
-  const date = new Date(year, n, p);
-  return date;
-};
-
-const isHoliday = (date) => {
-  const year = date.getFullYear();
-  const holidays = [];
-  const newYear = new Date(year, 0, 1);
-  holidays.push(newYear);
-  const easter = calcEaster(year);
-  holidays.push(easter);
-  const easterThu = addDays(-3, easter);
-  holidays.push(easterThu);
-  const easterFri = addDays(-2, easter);
-  holidays.push(easterFri);
-  const easter2 = addDays(1, easter);
-  holidays.push(easter2);
-  const stBededag = addDays(26, easter);
-  holidays.push(stBededag);
-  const kristiHf = addDays(39, easter);
-  holidays.push(kristiHf);
-  const whitsun = addDays(49, easter);
-  holidays.push(whitsun);
-  const whitsun2 = addDays(1, whitsun);
-  holidays.push(whitsun2);
-  const grundlov = new Date(year, 5, 5);
-  holidays.push(grundlov);
-  const christmas = new Date(year, 11, 25);
-  holidays.push(christmas);
-  const christmas2 = addDays(1, christmas);
-  holidays.push(christmas2);
-
-  return holidays.map((h) => h.toString()).find((x) => x === date.toString());
-};
-
-class AUCalendarComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      day: props.day,
-      month: props.month,
-      year: props.year,
-      hour: props.hour,
-      minute: props.minute,
-      selected: props.selected,
-    };
-
-    this.skipDays = [6, 0, 1, 2, 3, 4, 5];
-    this.goBack = this.goBack.bind(this);
-    this.goForward = this.goForward.bind(this);
-
-    moment.locale(props.lang);
-  }
-
-  goBack() {
-    const { month, year } = this.state;
-    const newMonth = month - 1 < 1 ? 12 : (month - 1);
-    const newYear = newMonth === 12 ? (year - 1) : year;
-    this.setState({
-      month: newMonth,
-      year: newYear,
-    });
-  }
-
-  goForward() {
-    const { month, year } = this.state;
-    const newMonth = month + 1 > 12 ? 1 : (month + 1);
-    const newYear = newMonth === 1 ? (year + 1) : year;
-    this.setState({
-      month: newMonth,
-      year: newYear,
-    });
-  }
-
-  render() {
-    const {
-      day,
-      month,
-      year,
-      hour,
-      minute,
-      selected,
-    } = this.state;
-    const {
-      lang,
-      onSelected,
-      highlightWeekend,
-      highlightHolidays,
-      yearSpan,
-      minuteInterval,
-      showTime,
-      closeable,
-      onClose,
-      controls,
-    } = this.props;
-
-    const renderMonths = months[lang].map(
-      (m, i) => (
-        <option key={m} value={i + 1}>
-          {m}
-        </option>
-      ),
-    );
-
-    const yearArr = [];
-    for (let y = year - yearSpan; y <= year + yearSpan; y += 1) {
-      yearArr.push(y);
-    }
-
-    const renderYears = yearArr.map(
-      (y) => (
-        <option key={y}>
-          {y}
-        </option>
-      ),
-    );
-
-    const renderWeekDays = dayTitles[lang].map(
-      (w) => (
-        <span key={w} className="calendar__days__day">
-          {w}
-        </span>
-      ),
-    );
-
-    const firstDayInMonth = new Date(year, month - 1, 1);
-    const emptyDays = this.skipDays[firstDayInMonth.getDay()];
-    const prevYear = month === 1 ? year - 1 : year;
-    const prevMonth = month === 1 ? 12 : month - 1;
-    const numberOfDaysInPrevMonth = daysInMonth(
-      prevYear, prevMonth,
-    );
-
-    let rowCount = -1;
-    const renderEmptyDaysBefore = Array(emptyDays).fill().map((e, i) => {
-      rowCount = i;
-      const beforeDay = numberOfDaysInPrevMonth - emptyDays + i + 1;
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && isHoliday(new Date(prevYear, prevMonth - 1, beforeDay)));
-      return (
-        <button
-          type="button"
-          key={rowCount}
-          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-          onClick={() => {
-            this.goBack();
-          }}
-          aria-label={moment(new Date(prevYear, prevMonth - 1, beforeDay)).format('LL')}
-        >
-          {beforeDay}
-        </button>
-      );
-    });
-
-    const renderDays = Array(daysInMonth(year, month)).fill().map((d, i) => {
-      const key = i; // suck it
-      if (rowCount === 6) {
-        rowCount = 0;
-      } else {
-        rowCount += 1;
-      }
-      const newDay = i + 1;
-      const isSelected = (
-        newDay === selected.getDate()
-        && year === selected.getFullYear()
-        && month === selected.getMonth() + 1
-      );
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays && isHoliday(new Date(year, month - 1, newDay)));
-      let className = 'calendar__days__date';
-      if (isSelected) {
-        className = `${className} calendar__days__date--selected`;
-      }
-      if (isWeekend) {
-        className = `${className} calendar__days__date--weekend`;
-      }
-      return (
-        <button
-          key={key}
-          type="button"
-          className={className}
-          onClick={() => {
-            const newSelected = new Date(year, month - 1, newDay, hour, minute);
-            this.setState({
-              day: newDay,
-              selected: newSelected,
-            }, () => {
-              onSelected(newSelected);
-            });
-          }}
-          aria-label={moment(new Date(year, month - 1, newDay, hour, minute)).format('LL')}
-        >
-          {i + 1}
-        </button>
-      );
-    });
-
-    const nextYear = month === 12 ? (year + 1) : year;
-    const nextMonth = month === 12 ? 1 : (month + 1);
-    const renderEmptyDaysAfter = Array(6 - rowCount).fill().map((e, i) => {
-      const key = i;
-      const afterDay = i + 1;
-      if (rowCount === 6) {
-        rowCount = 0;
-      } else {
-        rowCount += 1;
-      }
-      const isWeekend = (highlightWeekend && rowCount > 4)
-        || (highlightHolidays
-          && isHoliday(new Date(nextYear, nextMonth - 1, afterDay)));
-      return (
-        <button
-          type="button"
-          key={key}
-          className={`calendar__days__date ${isWeekend ? 'calendar__days__date--weekend calendar__days__date--empty' : 'calendar__days__date--empty'}`}
-          onClick={() => {
-            this.goForward();
-          }}
-          aria-label={moment(new Date(nextYear, nextMonth - 1, afterDay)).format('LL')}
-        >
-          {afterDay}
-        </button>
-      );
-    });
-
-    const renderHours = Array(24).fill().map((h, i) => {
-      const key = i;
-      const optHour = i < 10 ? `0${i}` : i;
-      return (
-        <option key={key} value={i}>
-          {optHour}
-        </option>
-      );
-    });
-
-    const renderMinutes = Array(60).fill().map((h, i) => {
-      const key = i;
-      if (i % minuteInterval === 0) {
-        const optMinute = i < 10 ? `0${i}` : i;
-        return (
-          <option key={key} value={i}>
-            {optMinute}
-          </option>
-        );
-      }
-      return null;
-    });
-
-    return (
-      <div id={`${controls}-calendar`} className="calendar" aria-controls={controls}>
-        <div className="calendar__year-month">
-          <div className="form__field">
-            <select
-              value={month}
-              title={lang === 'da' ? 'Vælg måned' : 'Select month'}
-              onChange={(e) => {
-                const newMonth = parseInt(e.target.value, 10);
-                const newSelected = new Date(year, newMonth - 1, day, hour, minute);
-                this.setState({
-                  month: newMonth,
-                  selected: newSelected,
-                }, () => {
-                  onSelected(newSelected);
-                });
-              }}
-            >
-              {renderMonths}
-            </select>
-          </div>
-          <div className="form__field">
-            <select
-              value={year}
-              title={lang === 'da' ? 'Vælg år' : 'Select year'}
-              onChange={(e) => {
-                const newYear = parseInt(e.target.value, 10);
-                const newSelected = new Date(newYear, month - 1, day, hour, minute);
-                this.setState({
-                  year: newYear,
-                  selected: newSelected,
-                }, () => {
-                  onSelected(newSelected);
-                });
-              }}
-            >
-              {renderYears}
-            </select>
-          </div>
-          {
-            closeable && (
-              <button
-                className="button button--icon--hide-label button--small button--icon"
-                type="button"
-                data-icon=""
-                onClick={onClose}
-              >
-                {lang === 'da' ? 'Luk' : 'Close'}
-              </button>
-            )
-          }
-        </div>
-        <div className="calendar__days">
-          {renderWeekDays}
-          {renderEmptyDaysBefore}
-          {renderDays}
-          {renderEmptyDaysAfter}
-        </div>
-        {
-          showTime && (
-            <div className="calendar__time">
-              <div className="form__field">
-                <select
-                  value={hour}
-                  title={lang === 'da' ? 'Vælg time' : 'Select hour'}
-                  onChange={(e) => {
-                    const newHour = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, newHour, minute);
-                    this.setState({
-                      hour: newHour,
-                      selected: newSelected,
-                    }, () => {
-                      onSelected(newSelected);
-                    });
-                  }}
-                >
-                  {renderHours}
-                </select>
-              </div>
-              <div className="form__field">
-                <select
-                  value={minute}
-                  title={lang === 'da' ? 'Vælg minut' : 'Select minute'}
-                  onChange={(e) => {
-                    const newMinute = parseInt(e.target.value, 10);
-                    const newSelected = new Date(year, month - 1, day, hour, newMinute);
-                    this.setState({
-                      minute: parseInt(e.target.value, 10),
-                      selected: newSelected,
-                    }, () => {
-                      onSelected(newSelected);
-                    });
-                  }}
-                >
-                  {renderMinutes}
-                </select>
-              </div>
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AUCalendarComponent.defaultProps = {
-  lang: 'da',
-  selected: new Date(),
-  onSelected: () => { },
-  highlightWeekend: true,
-  highlightHolidays: true,
-  yearSpan: 5,
-  minuteInterval: 5,
-  showTime: true,
-  closeable: false,
-  onClose: () => { },
-};
-
-AUCalendarComponent.propTypes = {
-  lang: PropTypes.string,
-  selected: PropTypes.instanceOf(Date),
-  day: PropTypes.number.isRequired,
-  month: PropTypes.number.isRequired,
-  year: PropTypes.number.isRequired,
-  hour: PropTypes.number.isRequired,
-  minute: PropTypes.number.isRequired,
-  highlightWeekend: PropTypes.bool,
-  highlightHolidays: PropTypes.bool,
-  onSelected: PropTypes.func,
-  yearSpan: PropTypes.number,
-  minuteInterval: PropTypes.number,
-  showTime: PropTypes.bool,
-  closeable: PropTypes.bool,
-  onClose: PropTypes.func,
-  controls: PropTypes.string.isRequired,
-};
-
-AUCalendarComponent.displayName = 'AUCalendarComponent';
-export default AUCalendarComponent;

package/src/components/delphinus/AUContentToggleComponent.js

@@ -1,32 +0,0 @@
-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,113 +0,0 @@
-/* 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,
-    } = this.props;
-    return (
-      <div className="datepicker" aria-owns={`${id}-calendar`} aria-haspopup="true" aria-expanded={showCalendar}>
-        <div className="form__field">
-          <input
-            id={id}
-            type="text"
-            value={dateFormatted}
-            title={lang === 'da' ? 'Klik for at åbne datovælger' : 'Click to open datepicker'}
-            readOnly
-            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}
-                closeable
-                onClose={this.hideDatePicker}
-                controls={id}
-              />
-            </div>
-          )
-        }
-      </div>
-    );
-  }
-}
-
-AUDatepickerComponent.defaultProps = {
-  date: null,
-  onDateChange: () => { },
-  onHide: () => { },
-  format: 'YYYY-MM-DD HH:mm',
-  showTime: true,
-  lang: 'da',
-};
-
-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,
-};
-
-AUDatepickerComponent.displayName = 'AUDatepickerComponent';
-export default AUDatepickerComponent;

package/src/components/delphinus/AULoginComponent.js

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