@madie/madie-design-system 1.0.0

package/components/Card/index.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FeatherIcon from 'feather-icons-react';
+
+const Card = ({
+  children,
+  className,
+  cta,
+  description,
+  eyebrow,
+  img,
+  parentTag,
+  responsive,
+  routerComponent,
+  size,
+  title,
+  variant,
+}) => {
+  const classes = [
+    'qppds',
+    'qpp-c-card',
+    size && `qpp-c-card--${size}`,
+    img && 'qpp-c-card--image',
+    variant === 'flag' && responsive && 'qpp-c-xs-card--flag',
+    variant === 'flag' && !responsive && 'qpp-c-card--flag',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const Container = parentTag || 'div';
+  const HeadingComponent = title?.headingLevel || 'h3';
+  const LinkComponent = routerComponent || 'a';
+
+  return (
+    <Container className={classes}>
+      <div className="qpp-c-card__content">
+        <div className="qpp-c-card__header">
+          {title && (
+            <HeadingComponent className="h3 qpp-c-card__title">
+              {typeof title === 'object' ? title.text : title}
+            </HeadingComponent>
+          )}
+          {eyebrow && <span className="l2 qpp-c-card__eyebrow">{eyebrow}</span>}
+        </div>
+        {description && (
+          <div className="qpp-c-card__body">
+            <p className="p1">{description}</p>
+          </div>
+        )}
+        {children && <div className="qpp-c-card__body">{children}</div>}
+        {cta && (
+          <div className="qpp-c-card__cta">
+            {React.isValidElement(cta) ? (
+              cta
+            ) : (
+              <LinkComponent
+                href={cta.href}
+                className="qpp-c-button qpp-c-button--text qpp-c-button--icon-after"
+                {...cta}
+              >
+                {cta.text} <FeatherIcon icon={cta.icon || 'chevron-right'} />
+              </LinkComponent>
+            )}
+          </div>
+        )}
+      </div>
+      {img &&
+        (() => {
+          const { useBgImage, url, alt, ...restImg } = img;
+          return (
+            <div className="qpp-c-card__media">
+              {useBgImage ? (
+                <div
+                  role="img"
+                  style={{ backgroundImage: `url(${url})` }}
+                  aria-label={alt}
+                  {...restImg}
+                />
+              ) : (
+                <img src={url} alt={alt} {...restImg} />
+              )}
+            </div>
+          );
+        })()}
+    </Container>
+  );
+};
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  cta: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.shape({
+      href: PropTypes.string,
+      text: PropTypes.string,
+      icon: PropTypes.string,
+    }),
+  ]),
+  description: PropTypes.string,
+  eyebrow: PropTypes.string,
+  img: PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string,
+    useBgImage: PropTypes.bool,
+  }),
+  parentTag: PropTypes.string,
+  responsive: PropTypes.bool,
+  routerComponent: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      text: PropTypes.string,
+      headingLevel: PropTypes.string,
+    }),
+  ]),
+  variant: PropTypes.oneOf(['default', 'flag']),
+};
+
+Card.defaultProps = {
+  children: null,
+  className: null,
+  cta: null,
+  description: null,
+  eyebrow: null,
+  img: null,
+  parentTag: null,
+  responsive: false,
+  routerComponent: null,
+  size: null,
+  title: null,
+  variant: 'default',
+};
+
+export default Card;

package/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import Dropdown from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  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' },
+    ]}
+  />
+);
+
+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' },
+    ]}
+  />
+);
+
+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' },
+    ]}
+  />
+);
+
+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' },
+    ]}
+  />
+);
+
+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' },
+    ]}
+  />
+);
+
+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>
+);

package/components/Dropdown/index.js

@@ -0,0 +1,85 @@
+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(' ');
+
+  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,
+};
+
+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',
+};
+
+export default Dropdown;

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
+    );
+  }
+}

package/components/FlashNotification/FlashNotificationUI.jsx

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import reactDOM from 'react-dom';
+import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+
+class FlashNotification extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isClosed: true };
+    this._closeFlashNotification = this.closeFlashNotification.bind(this);
+    this._fadeOutNotification = this.fadeOutNotification.bind(this);
+  }
+
+  render() {
+    return (
+      <div
+        className={
+          this.state.isClosed
+            ? 'flash-notification notification-closed'
+            : 'flash-notification'
+        }
+        ref={(elem) => {
+          this.element = elem;
+        }}
+      >
+        <div className={this.props.success ? 'success' : 'error'}>
+          <div className="icon"></div>
+          <div className="text-content">
+            <p className="title-text">{this.props.titleText}</p>
+            <p className="body-text">{this.props.bodyText}</p>
+          </div>
+          <div className="close-notification-container">
+            <button
+              className="closeNotification"
+              aria-label="Close notification"
+              onClick={this._closeFlashNotification}
+            >
+              <svg className="close-icon" aria-hidden="true">
+                {/* <use xlinkHref="#closex" /> */}
+                <CloseXIcon />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    setTimeout(
+      function () {
+        this.setState({ isClosed: false });
+      }.bind(this),
+      250
+    );
+
+    this.timer = setTimeout(
+      function () {
+        this._fadeOutNotification();
+      }.bind(this),
+      10000
+    );
+  }
+
+  fadeOutNotification() {
+    this.setState({ isClosed: true });
+    setTimeout(
+      function () {
+        reactDOM.unmountComponentAtNode(this.element.parentElement);
+        if (typeof this.props.onClose === 'function') {
+          this.props.onClose();
+        }
+      }.bind(this),
+      500
+    );
+  }
+
+  closeFlashNotification() {
+    clearTimeout(this.timer);
+    this._fadeOutNotification();
+  }
+}
+
+FlashNotification.propTypes = {
+  bodyText: PropTypes.string,
+  success: PropTypes.bool.isRequired,
+  titleText: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
+export default FlashNotification;

package/components/FlashNotification/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from 'react-dom';
+import FlashNotificationUI from './FlashNotificationUI';
+
+/**
+ * Renders the Confirmation/Error Flash Component
+ */
+export default class FlashNotification {
+  /**
+   * @param {Object} options - An object containing content and config data
+   * @param {Boolean} options.success - Whether to render a confirmation or error notification
+   * @param {String} options.titleText - The title text displayed on the notification
+   * @param {String} options.bodyText - The body text displayed on the notification
+   * @param {HTMLElement} options.rootElement - Elem inside which to render
+   */
+  constructor(options) {
+    if (options.hasOwnProperty('rootElement')) {
+      render(
+        <FlashNotificationUI
+          success={options.success}
+          titleText={options.titleText}
+          bodyText={options.bodyText}
+        />,
+        options.rootElement
+      );
+    } else {
+      render(<FlashNotificationUI />, options);
+    }
+  }
+}

package/components/Footer/Footer.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Footer from './FooterUI';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Footer',
+  component: Footer,
+  decorators: [withKnobs],
+};
+
+export const ExampleFooter = () => (
+  <Footer
+    isFullWidth={boolean('isFullWidth', false)}
+    buildVersion={text('buildVersion', 'BUILD VERSION')}
+    isNewFooter={boolean('isNewFooter', false)}
+    showHcdResearch={boolean('showHcdResearch', false)}
+  />
+);
+
+ExampleFooter.storyName = 'example Footer';