@aarhus-university/au-lib-react-components 9.18.0 → 9.18.2

package/src/components/form/AUSubmitButtonContainerComponent.js

@@ -1,39 +1,39 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { profileLabels } from '../../lib/i18n';
-
-const AUSubmitButtonContainerComponent = ({
-  lang,
-  disabled,
-  onSubmit,
-  onCancel,
-}) => (
-  <div className="submit button-container">
-    <button
-      type="submit"
-      className={`button${disabled ? ' button--processing' : ''}`}
-      disabled={disabled}
-      onClick={onSubmit}
-    >
-      {profileLabels[lang].save}
-    </button>
-    <button
-      type="button"
-      className="button button--text"
-      disabled={disabled}
-      onClick={onCancel}
-    >
-      {profileLabels[lang].cancel}
-    </button>
-  </div>
-);
-
-AUSubmitButtonContainerComponent.propTypes = {
-  lang: PropTypes.string.isRequired,
-  disabled: PropTypes.bool.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-};
-
-AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
-export default AUSubmitButtonContainerComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { profileLabels } from '../../lib/i18n';
+
+const AUSubmitButtonContainerComponent = ({
+  lang,
+  disabled,
+  onSubmit,
+  onCancel,
+}) => (
+  <div className="submit button-container">
+    <button
+      type="submit"
+      className={`button${disabled ? ' button--processing' : ''}`}
+      disabled={disabled}
+      onClick={onSubmit}
+    >
+      {profileLabels[lang].save}
+    </button>
+    <button
+      type="button"
+      className="button button--text"
+      disabled={disabled}
+      onClick={onCancel}
+    >
+      {profileLabels[lang].cancel}
+    </button>
+  </div>
+);
+
+AUSubmitButtonContainerComponent.propTypes = {
+  lang: PropTypes.string.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+AUSubmitButtonContainerComponent.displayName = 'AUSubmitButtonContainerComponent';
+export default AUSubmitButtonContainerComponent;

package/src/components/news/EventLayout1Component.js

@@ -1,94 +1,94 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const EventLayout1Component = (props) => {
-  const {
-    item,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-
-  const domID = `news-${listid}-${i.id}`;
-  const {
-    fromDate,
-    toDate,
-    fromDateSplit,
-    toDateSplit,
-  } = AUNewsHelpers.getEventDates(i, lang);
-  const multipleDates = fromDate.getTime() !== toDate.getTime();
-  const showYear = i.showyear === '1'; // Oh ffs...
-  const className = `au_news_eventlist1-calendar ${(multipleDates ? 'multiple' : 'single')}`;
-
-  return (
-    <div id={domID} className="au_news-eventlist1-item">
-      <div className={className}>
-        <span className="au_news_events_weekday">
-          {labels[lang].news.weekdaysShort[fromDate.getDay()]}
-        </span>
-        <span className="au_news_events_date">
-          {fromDateSplit[lang === 'da' ? 0 : 2]}
-        </span>
-        <span className="au_news_events_month">
-          {labels[lang].news.monthsShort[fromDate.getMonth()] + (showYear ? (` ${(`${fromDate.getFullYear()}`).substring(2)}`) : '')}
-        </span>
-        <span className="au_news_events_weekday_end multiple">
-          {labels[lang].news.weekdaysShort[toDate.getDay()]}
-        </span>
-        <span className="au_news_events_date_end multiple">
-          {toDateSplit[lang === 'da' ? 0 : 2]}
-        </span>
-        <span className="au_news_events_month_end multiple">
-          {labels[lang].news.monthsShort[toDate.getMonth()] + (showYear ? (` ${(`${toDate.getFullYear()}`).substring(2)}`) : '')}
-        </span>
-      </div>
-      <div className="au_news_eventlist1-text">
-        <p>
-          <span className="au_news_events_time">
-            {`${(multipleDates ? `${i.event_from.date} ` : '')} ${`${i.event_from.time} `} ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
-          </span>
-          {'  |  '}
-          <span className="au_news_events_place">
-            {i.event_where}
-          </span>
-          <br />
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(props.item);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-        </p>
-        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-      </div>
-      <div className="au_news_clear" />
-    </div>
-  );
-};
-
-EventLayout1Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
-    header: PropTypes.string.isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-EventLayout1Component.displayName = 'EventLayout1Component';
-export default EventLayout1Component;
+/* eslint jsx-a11y/control-has-associated-label: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import NewsSubHeaderComponent from './NewsSubHeaderComponent';
+import { newsLabels as labels } from '../../lib/i18n';
+import { AUNewsHelpers } from '../../lib/au-news';
+
+const EventLayout1Component = (props) => {
+  const {
+    item,
+    listid,
+    setPopupItem,
+    lang,
+  } = props;
+  if (!item) {
+    return <div />;
+  }
+
+  const i = AUNewsHelpers.setExternal(item);
+
+  const domID = `news-${listid}-${i.id}`;
+  const {
+    fromDate,
+    toDate,
+    fromDateSplit,
+    toDateSplit,
+  } = AUNewsHelpers.getEventDates(i, lang);
+  const multipleDates = fromDate.getTime() !== toDate.getTime();
+  const showYear = i.showyear === '1'; // Oh ffs...
+  const className = `au_news_eventlist1-calendar ${(multipleDates ? 'multiple' : 'single')}`;
+
+  return (
+    <div id={domID} className="au_news-eventlist1-item">
+      <div className={className}>
+        <span className="au_news_events_weekday">
+          {labels[lang].news.weekdaysShort[fromDate.getDay()]}
+        </span>
+        <span className="au_news_events_date">
+          {fromDateSplit[lang === 'da' ? 0 : 2]}
+        </span>
+        <span className="au_news_events_month">
+          {labels[lang].news.monthsShort[fromDate.getMonth()] + (showYear ? (` ${(`${fromDate.getFullYear()}`).substring(2)}`) : '')}
+        </span>
+        <span className="au_news_events_weekday_end multiple">
+          {labels[lang].news.weekdaysShort[toDate.getDay()]}
+        </span>
+        <span className="au_news_events_date_end multiple">
+          {toDateSplit[lang === 'da' ? 0 : 2]}
+        </span>
+        <span className="au_news_events_month_end multiple">
+          {labels[lang].news.monthsShort[toDate.getMonth()] + (showYear ? (` ${(`${toDate.getFullYear()}`).substring(2)}`) : '')}
+        </span>
+      </div>
+      <div className="au_news_eventlist1-text">
+        <p>
+          <span className="au_news_events_time">
+            {`${(multipleDates ? `${i.event_from.date} ` : '')} ${`${i.event_from.time} `} ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
+          </span>
+          {'  |  '}
+          <span className="au_news_events_place">
+            {i.event_where}
+          </span>
+          <br />
+          <a
+            onClick={() => {
+              if (!i.external) {
+                setPopupItem(props.item);
+              }
+            }}
+            href={i.url}
+            title={i.header}
+            dangerouslySetInnerHTML={{ __html: i.header }}
+          />
+        </p>
+        <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
+      </div>
+      <div className="au_news_clear" />
+    </div>
+  );
+};
+
+EventLayout1Component.propTypes = {
+  lang: PropTypes.string.isRequired,
+  item: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    url: PropTypes.string.isRequired,
+    header: PropTypes.string.isRequired,
+  }).isRequired,
+  listid: PropTypes.number.isRequired,
+  setPopupItem: PropTypes.func.isRequired,
+};
+
+EventLayout1Component.displayName = 'EventLayout1Component';
+export default EventLayout1Component;

package/src/components/news/EventLayout2Component.js

@@ -1,90 +1,90 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import NewsSubHeaderComponent from './NewsSubHeaderComponent';
-import { newsLabels as labels } from '../../lib/i18n';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const EventLayout2Component = (props) => {
-  const {
-    item,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  if (!item) {
-    return <div />;
-  }
-
-  const i = AUNewsHelpers.setExternal(item);
-
-  const domID = `news-${listid}-${i.id}`;
-  const { fromDate, toDate, fromDateSplit } = AUNewsHelpers.getEventDates(i, lang);
-  const multipleDates = fromDate.getTime() !== toDate.getTime();
-  const showYear = i.showyear === '1';
-  const classNameOuter = `au_news-eventlist2-item ${(i.featured ? 'au_event-featured' : '')}`;
-  const classNameInner = `au_news_eventlist2-calendar ${(multipleDates ? 'multiple' : 'single') + (showYear ? ' show-year' : '')}`;
-  const style = i.image.list === '' ? {} : {
-    backgroundImage: `url('${i.image.list}')`,
-    backgroundPosition: 'top center',
-    backgroundRepeat: 'no-repeat',
-  };
-
-  return (
-    <div id={domID} className={classNameOuter}>
-      <div className="au_padding">
-        <div className={classNameInner} style={style}>
-          <span className="au_news_events_weekday">
-            {labels[lang].news.weekdaysShort[fromDate.getDay()]}
-          </span>
-          <span className="au_news_events_date">
-            {fromDateSplit[lang === 'da' ? 0 : 2]}
-          </span>
-          <span className="au_news_events_month">
-            {labels[lang].news.monthsShort[fromDate.getMonth()] + (showYear ? (` ${(`${fromDate.getFullYear()}`).substring(2)}`) : '')}
-          </span>
-        </div>
-        <div className="au_news_eventlist2-text">
-          <h2>
-            <a
-              onClick={() => {
-                if (!i.external) {
-                  setPopupItem(props.item);
-                }
-              }}
-              href={i.url}
-              title={i.header}
-              dangerouslySetInnerHTML={{ __html: i.header }}
-            />
-          </h2>
-          <div>
-            <span className="au_news_events_time">
-              {`${(multipleDates ? `${i.event_from.date} ` : '')} ${`${i.event_from.time} `} ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
-            </span>
-            {'  |  '}
-            <span className="au_news_events_place">
-              {i.event_where}
-            </span>
-            <br />
-            <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
-          </div>
-        </div>
-        <div className="au_news_clear" />
-      </div>
-    </div>
-  );
-};
-
-EventLayout2Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  item: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
-    header: PropTypes.string.isRequired,
-  }).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-EventLayout2Component.displayName = 'EventLayout2Component';
-export default EventLayout2Component;
+/* eslint jsx-a11y/control-has-associated-label: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import NewsSubHeaderComponent from './NewsSubHeaderComponent';
+import { newsLabels as labels } from '../../lib/i18n';
+import { AUNewsHelpers } from '../../lib/au-news';
+
+const EventLayout2Component = (props) => {
+  const {
+    item,
+    listid,
+    setPopupItem,
+    lang,
+  } = props;
+  if (!item) {
+    return <div />;
+  }
+
+  const i = AUNewsHelpers.setExternal(item);
+
+  const domID = `news-${listid}-${i.id}`;
+  const { fromDate, toDate, fromDateSplit } = AUNewsHelpers.getEventDates(i, lang);
+  const multipleDates = fromDate.getTime() !== toDate.getTime();
+  const showYear = i.showyear === '1';
+  const classNameOuter = `au_news-eventlist2-item ${(i.featured ? 'au_event-featured' : '')}`;
+  const classNameInner = `au_news_eventlist2-calendar ${(multipleDates ? 'multiple' : 'single') + (showYear ? ' show-year' : '')}`;
+  const style = i.image.list === '' ? {} : {
+    backgroundImage: `url('${i.image.list}')`,
+    backgroundPosition: 'top center',
+    backgroundRepeat: 'no-repeat',
+  };
+
+  return (
+    <div id={domID} className={classNameOuter}>
+      <div className="au_padding">
+        <div className={classNameInner} style={style}>
+          <span className="au_news_events_weekday">
+            {labels[lang].news.weekdaysShort[fromDate.getDay()]}
+          </span>
+          <span className="au_news_events_date">
+            {fromDateSplit[lang === 'da' ? 0 : 2]}
+          </span>
+          <span className="au_news_events_month">
+            {labels[lang].news.monthsShort[fromDate.getMonth()] + (showYear ? (` ${(`${fromDate.getFullYear()}`).substring(2)}`) : '')}
+          </span>
+        </div>
+        <div className="au_news_eventlist2-text">
+          <h2>
+            <a
+              onClick={() => {
+                if (!i.external) {
+                  setPopupItem(props.item);
+                }
+              }}
+              href={i.url}
+              title={i.header}
+              dangerouslySetInnerHTML={{ __html: i.header }}
+            />
+          </h2>
+          <div>
+            <span className="au_news_events_time">
+              {`${(multipleDates ? `${i.event_from.date} ` : '')} ${`${i.event_from.time} `} ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
+            </span>
+            {'  |  '}
+            <span className="au_news_events_place">
+              {i.event_where}
+            </span>
+            <br />
+            <NewsSubHeaderComponent subheader={i.subheader} trim={350} />
+          </div>
+        </div>
+        <div className="au_news_clear" />
+      </div>
+    </div>
+  );
+};
+
+EventLayout2Component.propTypes = {
+  lang: PropTypes.string.isRequired,
+  item: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    url: PropTypes.string.isRequired,
+    header: PropTypes.string.isRequired,
+  }).isRequired,
+  listid: PropTypes.number.isRequired,
+  setPopupItem: PropTypes.func.isRequired,
+};
+
+EventLayout2Component.displayName = 'EventLayout2Component';
+export default EventLayout2Component;

package/src/components/news/EventLayout3Component.js

@@ -1,68 +1,68 @@
-/* eslint jsx-a11y/control-has-associated-label: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AUNewsHelpers } from '../../lib/au-news';
-
-const EventLayout3Component = (props) => {
-  const {
-    items,
-    listid,
-    setPopupItem,
-    lang,
-  } = props;
-  const renderItems = items.map((_i, j) => {
-    let i = _i;
-    const key = j;
-    if (i) {
-      i = AUNewsHelpers.setExternal(i);
-      const { fromDate, toDate } = AUNewsHelpers.getEventDates(i, lang);
-      const multipleDates = fromDate.getTime() !== toDate.getTime();
-      const domID = `news-${listid}-${i.id}`;
-      return (
-        <li
-          key={key}
-          id={domID}
-        >
-          <a
-            onClick={() => {
-              if (!i.external) {
-                setPopupItem(i);
-              }
-            }}
-            href={i.url}
-            title={i.header}
-            dangerouslySetInnerHTML={{ __html: i.header }}
-          />
-          {' ('}
-          <span className="au_news_events_time">
-            {`${i.event_from.date} ${i.event_from.time} - ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
-          </span>
-          {`, ${i.event_where}) `}
-        </li>
-      );
-    }
-    return null;
-  });
-
-  return (
-    <div className="au_news-header-list">
-      <ul>
-        {renderItems}
-      </ul>
-    </div>
-  );
-};
-
-EventLayout3Component.propTypes = {
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
-    header: PropTypes.string.isRequired,
-  })).isRequired,
-  listid: PropTypes.number.isRequired,
-  setPopupItem: PropTypes.func.isRequired,
-};
-
-EventLayout3Component.displayName = 'EventLayout3Component';
-export default EventLayout3Component;
+/* eslint jsx-a11y/control-has-associated-label: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AUNewsHelpers } from '../../lib/au-news';
+
+const EventLayout3Component = (props) => {
+  const {
+    items,
+    listid,
+    setPopupItem,
+    lang,
+  } = props;
+  const renderItems = items.map((_i, j) => {
+    let i = _i;
+    const key = j;
+    if (i) {
+      i = AUNewsHelpers.setExternal(i);
+      const { fromDate, toDate } = AUNewsHelpers.getEventDates(i, lang);
+      const multipleDates = fromDate.getTime() !== toDate.getTime();
+      const domID = `news-${listid}-${i.id}`;
+      return (
+        <li
+          key={key}
+          id={domID}
+        >
+          <a
+            onClick={() => {
+              if (!i.external) {
+                setPopupItem(i);
+              }
+            }}
+            href={i.url}
+            title={i.header}
+            dangerouslySetInnerHTML={{ __html: i.header }}
+          />
+          {' ('}
+          <span className="au_news_events_time">
+            {`${i.event_from.date} ${i.event_from.time} - ${(multipleDates ? `${i.event_to.date} ` : '')} ${i.event_to.time}`}
+          </span>
+          {`, ${i.event_where}) `}
+        </li>
+      );
+    }
+    return null;
+  });
+
+  return (
+    <div className="au_news-header-list">
+      <ul>
+        {renderItems}
+      </ul>
+    </div>
+  );
+};
+
+EventLayout3Component.propTypes = {
+  lang: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    url: PropTypes.string.isRequired,
+    header: PropTypes.string.isRequired,
+  })).isRequired,
+  listid: PropTypes.number.isRequired,
+  setPopupItem: PropTypes.func.isRequired,
+};
+
+EventLayout3Component.displayName = 'EventLayout3Component';
+export default EventLayout3Component;

package/src/components/news/NewsCategoriesComponent.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const NewsCategoriesComponent = (props) => {
-  const { categories } = props;
-  const renderCategories = categories.slice(0, 1).map((cat, i) => {
-    const key = i;
-    return <span key={key}>{(i > 0 ? ', ' : '') + cat.category}</span>;
-  });
-
-  return <span className="au_news-list-news-category">{renderCategories}</span>;
-};
-
-NewsCategoriesComponent.propTypes = {
-  categories: PropTypes.arrayOf(PropTypes.shape({
-    category: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-NewsCategoriesComponent.displayName = 'NewsCategoriesComponent';
-export default NewsCategoriesComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const NewsCategoriesComponent = (props) => {
+  const { categories } = props;
+  const renderCategories = categories.slice(0, 1).map((cat, i) => {
+    const key = i;
+    return <span key={key}>{(i > 0 ? ', ' : '') + cat.category}</span>;
+  });
+
+  return <span className="au_news-list-news-category">{renderCategories}</span>;
+};
+
+NewsCategoriesComponent.propTypes = {
+  categories: PropTypes.arrayOf(PropTypes.shape({
+    category: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+NewsCategoriesComponent.displayName = 'NewsCategoriesComponent';
+export default NewsCategoriesComponent;