qpp-style 2.0.2 → 2.0.4-sm.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/Details/DetailsIcons.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const Add = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-closed qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>{' '}
+    {iconText}
+  </>
+);
+
+Add.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Add.defaultProps = {
+  iconText: null,
+};
+
+export const Remove = ({ iconText }) => (
+  <>
+    <svg
+      className="qpp-c-details--icon-open qpp-icon-mat qpp-icon-inline--md"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      role="img"
+      focusable="false"
+    >
+      <path d="M19 13H5v-2h14v2z" />
+    </svg>
+    {iconText}
+  </>
+);
+
+Remove.propTypes = {
+  iconText: PropTypes.string,
+};
+
+Remove.defaultProps = {
+  iconText: null,
+};

package/components/Details/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Add, Remove } from './DetailsIcons';
+
+const Details = ({ children, title, variant, className, ...rest }) => {
+  if (variant === 'header') {
+    return (
+      <details className="qpp-c-details qpp-c-details--header">
+        <summary>
+          {title}
+          <span className="qpp-c-details--icon-closed" aria-hidden="true">
+            <Add iconText="View" />
+          </span>
+          <span className="qpp-c-details--icon-open" aria-hidden="true">
+            <Remove iconText="Hide" />
+          </span>
+        </summary>
+        {children}
+      </details>
+    );
+  }
+
+  return (
+    <details className={`qpp-c-details ${className}`} {...rest}>
+      <summary
+        className={
+          variant === 'text-button' ? 'qpp-c-button qpp-c-button--text' : ''
+        }
+      >
+        <Add />
+        <Remove />
+        {title}
+      </summary>
+      {children}
+    </details>
+  );
+};
+
+Details.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.node,
+  variant: PropTypes.oneOf(['header', 'text-button']),
+  className: PropTypes.string,
+};
+
+Details.defaultProps = {
+  children: false,
+  title: null,
+  variant: null,
+  className: '',
+};
+
+export default Details;

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/DropdownButton/Menu.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Menu as AriaKitMenu } from 'ariakit/menu';
+
+function Menu({ state, className, children, ...props }) {
+  return (
+    <AriaKitMenu as="ul" state={state} className={className} {...props}>
+      {children}
+    </AriaKitMenu>
+  );
+}
+
+Menu.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Menu.defaultProps = {
+  className:
+    'qpp-c-dropdown-menu qpp-c-dropdown-menu__box qpp-c-dropdown-menu__list',
+  children: null,
+};
+
+export default Menu;

package/components/DropdownButton/MenuButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuButton as AriaKitButton } from 'ariakit/menu';
+
+function MenuButton({ state, className, iconExist, children, ...props }) {
+  const dropDownIsOpen = state.open;
+
+  const CheveronUpIcon = 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z';
+  const CheveronDownIcon = 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z';
+
+  return (
+    <AriaKitButton state={state} className={className} {...props}>
+      {children}{' '}
+      {iconExist && (
+        <svg
+          className="qpp-icon-mat qpp-icon-inline--lg"
+          focusable="false"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path d={dropDownIsOpen ? CheveronUpIcon : CheveronDownIcon} />
+        </svg>
+      )}
+    </AriaKitButton>
+  );
+}
+
+MenuButton.propTypes = {
+  state: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  iconExist: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+MenuButton.defaultProps = {
+  className: 'qpp-c-button',
+  iconExist: true,
+  children: null,
+};
+
+export default MenuButton;

package/components/DropdownButton/MenuItem.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+
+function MenuItem({ as, className, children, ...props }) {
+  return (
+    <AriaKitMenuItem as={as} className={className} {...props}>
+      {children}
+    </AriaKitMenuItem>
+  );
+}
+
+MenuItem.propTypes = {
+  as: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+MenuItem.defaultProps = {
+  as: 'li',
+  className: 'qpp-c-dropdown-menu__item',
+  children: null,
+};
+
+export default MenuItem;

package/components/DropdownButton/MenuItemLink.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem as AriaKitMenuItem } from 'ariakit/menu';
+
+function MenuItemLink({ as, className, children, ...props }) {
+  return (
+    <li role="none">
+      <AriaKitMenuItem as={as} className={className} {...props}>
+        {children}
+      </AriaKitMenuItem>
+    </li>
+  );
+}
+
+MenuItemLink.propTypes = {
+  as: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+MenuItemLink.defaultProps = {
+  as: 'a',
+  className: 'qpp-c-dropdown-menu__item',
+  children: null,
+};
+
+export default MenuItemLink;

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;