qpp-style 9.41.5 → 9.42.1-mo-beta.0

package/components/Error/Collapsible.jsx

@@ -0,0 +1,88 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+class Collapsible extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isExpanded: false,
+    };
+
+    this._toggleExpanded = this.toggleExpanded.bind(this);
+    this._renderShowButton = this.renderShowButton.bind(this);
+    this._renderHideButton = this.renderHideButton.bind(this);
+  }
+
+  toggleExpanded() {
+    this.setState({
+      isExpanded: !this.state.isExpanded,
+    });
+  }
+
+  renderShowButton() {
+    return (
+      <span className="collapsible-show-label">{this.props.showLabel}</span>
+    );
+  }
+
+  renderHideButton() {
+    if (this.props.hideLabel) {
+      return (
+        <span className="collapsible-hide-label">{this.props.hideLabel}</span>
+      );
+    } else {
+      return "";
+    }
+  }
+
+  render() {
+    const isArray = Array.isArray(this.props.content);
+    const isHidden = this.state.isExpanded ? undefined : true;
+
+    return (
+      <div className="collapsible-container">
+        <button
+          onClick={this._toggleExpanded}
+          className="collapsible-summary"
+          type="button"
+          aria-expanded={this.state.isExpanded ? true : false}
+        >
+          {this._renderShowButton()}
+          {this._renderHideButton()}
+        </button>
+
+        <div className="collapsible-details" hidden={isHidden}>
+          {isArray ? (
+            <ul className="items">
+              {this.props.content.map((c) => (
+                <li key={c.contentTitle}>
+                  <p>
+                    <b>{c.contentTitle}</b>
+                  </p>
+                  <p>{c.content}</p>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div>
+              <p>
+                <b>{this.props.contentTitle}</b>
+              </p>
+              <p>{this.props.content}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+Collapsible.propTypes = {
+  showLabel: PropTypes.string.isRequired,
+  hideLabel: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
+  contentTitle: PropTypes.string,
+};
+
+export default Collapsible;

package/components/Error/ErrorUI.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Collapsible from "./Collapsible";
+import PropTypes from "prop-types";
+
+const ErrorUI = (props) => {
+  let errorTitle = `${props.type || "Error"} ${props.code || ""}`;
+  let errorDetails = props.message;
+
+  return (
+    <section className="page-error">
+      <div className="responsive-container">
+        <h1>We’re sorry.</h1>
+        <p className="h2">We cannot access this page.</p>
+        <Collapsible
+          showLabel="Open technical details about the error"
+          hideLabel="Close technical details about the error"
+          contentTitle={errorTitle}
+          content={errorDetails}
+        />
+      </div>
+    </section>
+  );
+};
+
+ErrorUI.propTypes = {
+  code: PropTypes.string,
+  message: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  type: PropTypes.string,
+};
+
+export default ErrorUI;

package/components/Error/error.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render } from "react-dom";
+import ErrorUI from "./ErrorUI";
+
+/**
+ * Renders the QPP Error Page content.
+ */
+export default class ErrorPage {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {String} options.type - The error type
+   * @param {String} options.code - The error code
+   * @param {String} options.message - The error message
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    render(
+      <ErrorUI
+        type={options.type}
+        code={options.code}
+        message={options.message}
+      />,
+      options.rootElement,
+    );
+  }
+}