qpp-style 0.0.8 → 0.0.10

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

@@ -38,7 +38,7 @@ class Collapsible extends Component {
 
   render() {
     const isArray = Array.isArray(this.props.content);
-    const isHidden = this.state.isExpanded ? undefined : 'true';
+    const isHidden = this.state.isExpanded ? undefined : true;
 
     return (
       <div className="collapsible-container">
@@ -46,7 +46,7 @@ class Collapsible extends Component {
           onClick={this._toggleExpanded}
           className="collapsible-summary"
           type="button"
-          aria-expanded={this.state.isExpanded ? 'true' : 'false'}
+          aria-expanded={this.state.isExpanded ? true : false}
         >
           {this._renderShowButton()}
           {this._renderHideButton()}