@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Dropdown/Dropdown.stories.js

@@ -1,94 +1,94 @@
-import React from 'react';
-import Dropdown from './index';
-import { withKnobs } from '@storybook/addon-knobs';
+import React from "react";
+import Dropdown from "./index";
+import { withKnobs } from "@storybook/addon-knobs";
 
 export default {
-  title: 'Dropdown',
-  component: Dropdown,
-  decorators: [withKnobs],
+    title: "Dropdown",
+    component: Dropdown,
+    decorators: [withKnobs],
 };
 
 export const DropdownField = () => (
-  <Dropdown
-    id="id-example"
-    value="value-example"
-    name="name-example"
-    ariaLabel="arial label example"
-    options={[
-      { name: 'Name 1', value: 'Value 1' },
-      { name: 'Name 2', value: 'Value 2' },
-      { name: 'Name 3', value: 'Value 3' },
-    ]}
-  />
+    <Dropdown
+        id="id-example"
+        value="value-example"
+        name="name-example"
+        ariaLabel="arial label example"
+        options={[
+            { name: "Name 1", value: "Value 1" },
+            { name: "Name 2", value: "Value 2" },
+            { name: "Name 3", value: "Value 3" },
+        ]}
+    />
 );
 
 export const DropdownFieldAutoWidth = () => (
-  <Dropdown
-    id="id-example"
-    value="value-example"
-    name="name-example"
-    ariaLabel="arial label example"
-    className="qpp-u-width--auto"
-    options={[
-      { name: 'Name 1', value: 'Value 1' },
-      { name: 'Name 2', value: 'Value 2' },
-      { name: 'Name 3', value: 'Value 3' },
-    ]}
-  />
+    <Dropdown
+        id="id-example"
+        value="value-example"
+        name="name-example"
+        ariaLabel="arial label example"
+        className="qpp-u-width--auto"
+        options={[
+            { name: "Name 1", value: "Value 1" },
+            { name: "Name 2", value: "Value 2" },
+            { name: "Name 3", value: "Value 3" },
+        ]}
+    />
 );
 
 export const DisabledDropdown = () => (
-  <Dropdown
-    disabled
-    id="id-example"
-    value="value-example"
-    name="name-example"
-    ariaLabel="arial label example"
-    options={[
-      { name: 'Name 1', value: 'Value 1' },
-      { name: 'Name 2', value: 'Value 2' },
-      { name: 'Name 3', value: 'Value 3' },
-    ]}
-  />
+    <Dropdown
+        disabled
+        id="id-example"
+        value="value-example"
+        name="name-example"
+        ariaLabel="arial label example"
+        options={[
+            { name: "Name 1", value: "Value 1" },
+            { name: "Name 2", value: "Value 2" },
+            { name: "Name 3", value: "Value 3" },
+        ]}
+    />
 );
 
 export const DropdownBigVariant = () => (
-  <Dropdown
-    id="id-example"
-    value="value-example"
-    name="name-example"
-    ariaLabel="arial label example"
-    size="big"
-    options={[
-      { name: 'Name 1', value: 'Value 1' },
-      { name: 'Name 2', value: 'Value 2' },
-      { name: 'Name 3', value: 'Value 3' },
-    ]}
-  />
+    <Dropdown
+        id="id-example"
+        value="value-example"
+        name="name-example"
+        ariaLabel="arial label example"
+        size="big"
+        options={[
+            { name: "Name 1", value: "Value 1" },
+            { name: "Name 2", value: "Value 2" },
+            { name: "Name 3", value: "Value 3" },
+        ]}
+    />
 );
 
 export const DropdownWithDisabledOption = () => (
-  <Dropdown
-    id="id-example"
-    value="value-example"
-    name="name-example"
-    ariaLabel="arial label example"
-    options={[
-      { disabled: true, name: 'Select Category', value: 'default' },
-      { name: 'Name 1', value: 'Value 1' },
-      { name: 'Name 2', value: 'Value 2' },
-    ]}
-  />
+    <Dropdown
+        id="id-example"
+        value="value-example"
+        name="name-example"
+        ariaLabel="arial label example"
+        options={[
+            { disabled: true, name: "Select Category", value: "default" },
+            { name: "Name 1", value: "Value 1" },
+            { name: "Name 2", value: "Value 2" },
+        ]}
+    />
 );
 
 export const DropdownUsingChildrenProp = () => (
-  <Dropdown
-    id="id-example"
-    value="value-example"
-    name="name-example"
-    ariaLabel="arial label example"
-  >
-    <option value="Value 1">Name 1</option>
-    <option value="Value 2">Name 2</option>
-  </Dropdown>
+    <Dropdown
+        id="id-example"
+        value="value-example"
+        name="name-example"
+        ariaLabel="arial label example"
+    >
+        <option value="Value 1">Name 1</option>
+        <option value="Value 2">Name 2</option>
+    </Dropdown>
 );

package/components/Dropdown/index.js

@@ -1,85 +1,85 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const Dropdown = ({
-  className,
-  id,
-  ariaLabelledBy,
-  ariaLabel,
-  onChange,
-  dataTestId,
-  name,
-  dataType,
-  disabled,
-  size,
-  options,
-  children,
-  parentElement,
-  ...rest
-}) => {
-  const dropdownClass = [
-    'qpp-c-dropdown',
-    size === 'big' && 'qpp-c-dropdown--big',
     className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+    id,
+    ariaLabelledBy,
+    ariaLabel,
+    onChange,
+    dataTestId,
+    name,
+    dataType,
+    disabled,
+    size,
+    options,
+    children,
+    parentElement,
+    ...rest
+}) => {
+    const dropdownClass = [
+        "qpp-c-dropdown",
+        size === "big" && "qpp-c-dropdown--big",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
 
-  return (
-    <select
-      id={id}
-      aria-labelledby={ariaLabelledBy}
-      aria-label={ariaLabel}
-      className={dropdownClass || ''}
-      onChange={onChange}
-      data-testid={dataTestId}
-      name={name}
-      disabled={disabled}
-      data-type={dataType}
-      {...rest}
-    >
-      {children}
-      {options.map(({ disabled, name, value }) => (
-        <option disabled={disabled} key={value} value={value}>
-          {name}
-        </option>
-      ))}
-    </select>
-  );
+    return (
+        <select
+            id={id}
+            aria-labelledby={ariaLabelledBy}
+            aria-label={ariaLabel}
+            className={dropdownClass || ""}
+            onChange={onChange}
+            data-testid={dataTestId}
+            name={name}
+            disabled={disabled}
+            data-type={dataType}
+            {...rest}
+        >
+            {children}
+            {options.map(({ disabled, name, value }) => (
+                <option disabled={disabled} key={value} value={value}>
+                    {name}
+                </option>
+            ))}
+        </select>
+    );
 };
 
 Dropdown.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  id: PropTypes.string,
-  ariaLabelledBy: PropTypes.string,
-  ariaLabel: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  dataTestId: PropTypes.string,
-  name: PropTypes.string,
-  dataType: PropTypes.string,
-  disabled: PropTypes.bool,
-  size: PropTypes.oneOf(['big']),
-  options: PropTypes.array,
-  parentElement: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    id: PropTypes.string,
+    ariaLabelledBy: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+    defaultValue: PropTypes.string,
+    dataTestId: PropTypes.string,
+    name: PropTypes.string,
+    dataType: PropTypes.string,
+    disabled: PropTypes.bool,
+    size: PropTypes.oneOf(["big"]),
+    options: PropTypes.array,
+    parentElement: PropTypes.string,
 };
 
 Dropdown.defaultProps = {
-  children: false,
-  className: 'qpp-u-width--100',
-  id: null,
-  ariaLabelledBy: null,
-  ariaLabel: null,
-  onChange: () => null,
-  dataTestId: null,
-  name: null,
-  dataType: null,
-  disabled: false,
-  size: null,
-  options: [],
-  parentElement: 'span',
+    children: false,
+    className: "qpp-u-width--100",
+    id: null,
+    ariaLabelledBy: null,
+    ariaLabel: null,
+    onChange: () => null,
+    dataTestId: null,
+    name: null,
+    dataType: null,
+    disabled: false,
+    size: null,
+    options: [],
+    parentElement: "span",
 };
 
 export default Dropdown;

package/components/Error/Collapsible.jsx

@@ -1,88 +1,93 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
 class Collapsible extends Component {
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props);
 
-    this.state = {
-      isExpanded: false,
-    };
+        this.state = {
+            isExpanded: false,
+        };
 
-    this._toggleExpanded = this.toggleExpanded.bind(this);
-    this._renderShowButton = this.renderShowButton.bind(this);
-    this._renderHideButton = this.renderHideButton.bind(this);
-  }
+        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,
-    });
-  }
+    toggleExpanded() {
+        this.setState({
+            isExpanded: !this.state.isExpanded,
+        });
+    }
 
-  renderShowButton() {
-    return (
-      <span className="collapsible-show-label">{this.props.showLabel}</span>
-    );
-  }
+    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 '';
+    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;
+    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>
+        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 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>
-          )}
-        </div>
-      </div>
-    );
-  }
+        );
+    }
 }
 
 Collapsible.propTypes = {
-  showLabel: PropTypes.string.isRequired,
-  hideLabel: PropTypes.string.isRequired,
-  content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
-  contentTitle: PropTypes.string,
+    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

@@ -1,31 +1,31 @@
-import React from 'react';
-import Collapsible from './Collapsible';
-import PropTypes from 'prop-types';
+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;
+    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>
-  );
+    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,
+    code: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    type: PropTypes.string,
 };
 
 export default ErrorUI;

package/components/Error/error.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import { render } from 'react-dom';
-import ErrorUI from './ErrorUI';
+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
-    );
-  }
+    /**
+     * @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
+        );
+    }
 }