qpp-style 2.0.1 → 2.0.2-sm.2

package/components/CalloutBox/index.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FeatherIcon from 'feather-icons-react';
+
+import Button from '../Button';
+
+const getCtaButton = (button) => {
+  if (button) {
+    if (React.isValidElement(button)) {
+      return button;
+    }
+    if (button.href) {
+      const { href, text, ...restLink } = button;
+      return (
+        <a
+          className="qpp-c-button qpp-c-button--secondary qpp-c-button--icon-after"
+          href={href}
+          {...restLink}
+        >
+          {text}
+          <FeatherIcon icon="chevron-right" />
+        </a>
+      );
+    }
+    const { onClick, text, ...restButton } = button;
+    return (
+      <Button
+        variant="secondary"
+        className="qpp-c-button--icon-after"
+        onClick={onClick}
+        {...restButton}
+      >
+        {text}
+        <FeatherIcon icon="chevron-right" />
+      </Button>
+    );
+  }
+  return null;
+};
+
+const CalloutBox = ({
+  title,
+  description,
+  button,
+  input,
+  children,
+  headerLevel,
+}) => {
+  const Header = `h${headerLevel}`;
+  return (
+    <aside className="qppds qpp-u-sm-padding--32 qpp-u-padding--24 qpp-u-fill--blue-70">
+      {title && (
+        <Header className="qpp-u-font-size--24 qpp-u-color--white qpp-u-margin-bottom--16 qpp-u-margin-top--0 qpp-u-font-weight--regular">
+          {title}
+        </Header>
+      )}
+      {description && (
+        <p className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
+          {description}
+        </p>
+      )}
+      {children && (
+        <div className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
+          {children}
+        </div>
+      )}
+      {(input || button) && (
+        <div className="qpp-u-display--flex qpp-u-align-items--center qpp-u-flex-wrap--wrap qpp-u-margin-top--24">
+          {input && (
+            <input
+              className="qpp-c-text-input qpp-u-sm-margin-right--16 qpp-u-margin-bottom--16 qpp-u-sm-margin-bottom--0 qpp-u-sm-width--auto qpp-u-width--100"
+              type="text"
+              {...input}
+            />
+          )}
+          {getCtaButton(button)}
+        </div>
+      )}
+    </aside>
+  );
+};
+
+CalloutBox.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  button: PropTypes.shape({
+    text: PropTypes.string,
+    onClick: PropTypes.func,
+    href: PropTypes.string,
+  }),
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    id: PropTypes.string,
+  }),
+  children: PropTypes.node,
+  headerLevel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+CalloutBox.defaultProps = {
+  title: null,
+  description: null,
+  button: null,
+  input: null,
+  children: null,
+  headerLevel: 2,
+};
+
+export default CalloutBox;

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/Details.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Details from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Details',
+  component: Details,
+  decorators: [withKnobs],
+};
+
+export const DefaultDetails = () => <Details title="default" />;
+
+export const HeaderDetails = () => <Details variant="header" title="Header" />;
+
+export const TextButtonDetails = () => (
+  <Details variant="text-button" title="Text Button" />
+);
+
+export const HeaderListDetails = () => (
+  <ul className="qpp-c-details-list">
+    <li>
+      <Details title="Header 1" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+        <hr />
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+      </Details>
+    </li>
+    <li>
+      <Details title="Header 2" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+        <ul>
+          <li>foo</li>
+          <li>bar</li>
+        </ul>
+      </Details>
+    </li>
+    <li>
+      <Details title="Header 3" variant="header">
+        <p className="qpp-p1 qpp-u-padding-left--40">
+          Aenean lacinia <a href="#">inline link</a> nulla sed{' '}
+          <a href="#">inline link</a>. Integer posuere erat a ante venenatis
+          dapibus posuere velit aliquet. Integer posuere erat a ante venenatis{' '}
+          <a href="#">inline link</a> dapibus posuere velit aliquet.
+        </p>
+      </Details>
+    </li>
+  </ul>
+);

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import MenuButton from './MenuButton';
+import Menu from './Menu';
+import MenuItem from './MenuItem';
+import MenuItemLink from './MenuItemLink';
+import { useMenuState } from 'ariakit/menu';
+import Download from '@material-design-icons/svg/outlined/file_download.svg';
+
+export default {
+  title: 'DropdownButton',
+  component: MenuButton,
+};
+
+export function BasicExample() {
+  const menu = useMenuState({ gutter: 0 });
+  const basicEx = ['option 1', 'Name of Option 2'];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {basicEx.map((item, i) => (
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export function LinkExample() {
+  const menu = useMenuState({ gutter: 0 });
+  const basicEx = ['link 1', 'link 2'];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {basicEx.map((item, i) => (
+          <MenuItemLink key={i} href="#">
+            {/* if using react-router, you can use `<MenuItemLink as={Link} to={path} ...>`  insead} */}
+            <span>{item}</span>
+          </MenuItemLink>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export function MaxHeight() {
+  const menu = useMenuState({ gutter: 0 });
+  const maxHeightEx = [
+    'option 1',
+    'option 2',
+    'option 3',
+    'option 4',
+    'option 5',
+    'option 6',
+    'option 7',
+    'option 8',
+    'option 9',
+    'option 10',
+  ];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {maxHeightEx.map((item, i) => (
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export function MaxWidth() {
+  const menu = useMenuState({ gutter: 0 });
+  const maxWidthtEx = [
+    'option 1',
+    'very long item text 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24',
+  ];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {maxWidthtEx.map((item, i) => (
+          <MenuItem key={i}>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export function ItemsWithIcons() {
+  const menu = useMenuState({ gutter: 0 });
+  const maxWidthtEx = [
+    'option 1',
+    'very long item text 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24',
+  ];
+
+  return (
+    <div className="qpp-u-padding--48">
+      <MenuButton state={menu}>Test</MenuButton>
+      <Menu state={menu}>
+        {maxWidthtEx.map((item, i) => (
+          <MenuItem key={i}>
+            <div className="qpp-c-dropdown-menu__icon">
+              <Download
+                className="qpp-icon-mat qpp-icon-inline--lg"
+                focusable="false"
+                aria-hidden="true"
+              />
+            </div>
+            <span>{item}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}

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;