qpp-style 0.0.9 → 0.0.10

package/components/Button/Button.stories.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withKnobs } from '@storybook/addon-knobs';
-import FeatherIcon from 'feather-icons-react';
-
-import Button, { TextButton } from './index';
-
-export default {
-  title: 'Button',
-  component: Button,
-  decorators: [withKnobs],
-};
-
-const Container = ({ className = '', children }) => (
-  <div className={`qppds qpp-u-padding--16 ${className}`}>{children}</div>
-);
-Container.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-};
-
-export const Primary = () => (
-  <Container>
-    <Button>Button</Button>
-  </Container>
-);
-
-export const Secondary = () => (
-  <Container>
-    <Button variant="secondary">Button</Button>
-  </Container>
-);
-
-export const Danger = () => (
-  <Container>
-    <Button variant="danger">Button</Button>
-  </Container>
-);
-
-export const Outline = () => (
-  <Container className="qpp-u-fill--blue-80">
-    <Button variant="outline">Button</Button>
-  </Container>
-);
-
-export const White = () => (
-  <Container className="qpp-u-fill--blue-80">
-    <Button variant="white">Button</Button>
-  </Container>
-);
-
-export const Icon = () => (
-  <Container>
-    <Button>
-      Icon Button <FeatherIcon icon="chevron-right" />
-    </Button>
-    <hr />
-    <Button variant="secondary">
-      <FeatherIcon icon="download" /> Icon Button
-    </Button>
-    <hr />
-    <Button variant="danger">
-      Icon Button <FeatherIcon icon="chevron-right" />
-    </Button>
-    <hr />
-    <Button variant="white">
-      Icon Button <FeatherIcon icon="chevron-right" />
-    </Button>
-  </Container>
-);
-
-export const Big = () => (
-  <Container>
-    <Button size="big">Big Primary Button</Button>
-    <hr />
-    <Button size="big" variant="secondary">
-      Big Secondary Button
-    </Button>
-  </Container>
-);
-
-export const Link = () => (
-  <Container>
-    <Button href="https://qpp.cms.gov/">Link Button</Button>
-    <hr />
-    <Button href="https://qpp.cms.gov/" variant="secondary">
-      SecondaryLink Button
-    </Button>
-    <hr />
-    <Button href="https://qpp.cms.gov/" variant="danger">
-      Danger Link Button
-    </Button>
-    <hr />
-    <div className="qpp-u-fill--gray-60 qpp-u-padding--8">
-      <Button href="https://qpp.cms.gov/" variant="white">
-        White Link Button
-      </Button>
-    </div>
-  </Container>
-);
-
-export const TextButtonStory = () => (
-  <Container>
-    <TextButton>Button</TextButton>
-    <hr />
-    <TextButton variant="danger">
-      Button
-    </TextButton>
-    <hr />
-    <div className="qpp-u-fill--gray-60 qpp-u-padding--8">
-      <TextButton variant="white">
-        Button
-      </TextButton>
-    </div>
-    <hr />
-    <TextButton>
-      <FeatherIcon icon="download" /> Icon Button
-    </TextButton>
-    <hr />
-    <TextButton>
-      Icon Button <FeatherIcon icon="chevron-right" />
-    </TextButton>
-  </Container>
-);
-TextButtonStory.storyName = 'Text Button';

package/components/Footer/Footer.stories.js

@@ -1,20 +0,0 @@
-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';

package/components/Footer/LegacyFooterUI.jsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import InfoTip from '../Infotip/Infotip';
-
-const infoTipLabel =
-  'When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.';
-
-const LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) => {
-  return (
-    <footer className="legacy-footer">
-      <div className="build-version" id="build-version">
-        {buildVersion}
-      </div>
-      <div className="banner">
-        <div
-          className={
-            isFullWidth ? 'container-full-width' : 'responsive-container'
-          }
-        >
-          <div className="row">
-            <div className="col-sm-12 col-md-12 col-lg-12">
-              <span>Help shape the future of QPP</span> by participating in user
-              feedback sessions.{' '}
-              <a className="email-note-link" href={signUpNowLink}>
-                Send us an email to sign up
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className={
-          isFullWidth ? 'container-full-width' : 'responsive-container'
-        }
-      >
-        <div className="row">
-          <div
-            className={
-              isFullWidth
-                ? 'col-sm-12 col-md-8 col-lg-8'
-                : 'col-sm-8 col-md-9 col-lg-9'
-            }
-          >
-            <div className="logo-container">
-              <img
-                src="/images/qpp_logo_reversed.png"
-                alt="Quality Payment Program"
-                className="qpp-logo"
-              />
-              <div className="social-container">
-                <a
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  className="social-link"
-                  href="https://twitter.com/CMSGov"
-                  aria-label="Follow us on Twitter. This link opens in a new window."
-                >
-                  <span className="glyphicon glyphicon-twitter"></span>
-                </a>
-                <a
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  className="social-link"
-                  href="https://www.youtube.com/playlist?list=PLaV7m2-zFKpj_6fBsqav6GvFzzq9oOpkk"
-                  aria-label="Follow us on YouTube. This link opens in a new window."
-                >
-                  <span className="glyphicon glyphicon-youtube"></span>
-                </a>
-              </div>
-            </div>
-            <div className="links">
-              <ul>
-                <li>
-                  <a
-                    href="/developers"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenDeveloperTools"
-                    data-track-label="Quality Payment Program"
-                  >
-                    Developer Tools
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="/about/resource-library"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenEducationAndTools"
-                    data-track-label="Education and Tools"
-                  >
-                    Resource Library
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="/glossary"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenGlossary"
-                    data-track-label="Glossary"
-                  >
-                    Glossary
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="/resources/help-and-support"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenHelpAndSupport"
-                    data-track-label="Help and Support"
-                  >
-                    Help and Support
-                  </a>
-                </li>
-              </ul>
-              <ul className="small">
-                <li>
-                  <a
-                    href="/privacy"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenPrivacyDisclaimer"
-                    data-track-label="Notice of Privacy and Disclaimer"
-                  >
-                    CMS Privacy Notice
-                  </a>
-                </li>
-                <span className="divider"></span>
-                <li>
-                  <a
-                    href="/accessibility"
-                    data-track-category="FooterNav"
-                    data-track-action="OpenAccessibility"
-                    data-track-label="Accessibility"
-                  >
-                    Accessibility
-                  </a>
-                </li>
-                <span className="divider"></span>
-                <li>
-                  <a
-                    className="adobe-link"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    href="https://get.adobe.com/reader"
-                    data-track-category="FooterNav"
-                    data-track-action="DownloadAdobeReader"
-                    data-track-label="AdobeReader"
-                  >
-                    <svg className="icon">
-                      <use xlinkHref="#icon-download" />
-                    </svg>
-                    Download Adobe Reader
-                  </a>
-                </li>
-                <span className="divider"></span>
-                <li>
-                  <a href="mailto:QPP@cms.hhs.gov" className="email-link">
-                    QPP@cms.hhs.gov
-                  </a>
-                </li>
-                <li>
-                  1-866-288-8292 (TRS: 711)
-                  <div className="footer-trs-infotip">
-                    <InfoTip lightIcon label={infoTipLabel} />
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div
-            className={
-              isFullWidth
-                ? 'col-sm-12 col-md-4 col-lg-4'
-                : 'col-sm-4 col-md-3 col-lg-3'
-            }
-          >
-            <div className="hhs-logo-container">
-              <img
-                alt="Department of Health &amp; Human Services USA"
-                src="/images/hhs-logo-white.svg"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-LegacyFooterUI.propTypes = {
-  buildVersion: PropTypes.string,
-  isFullWidth: PropTypes.bool,
-  signUpNowLink: PropTypes.string,
-};
-
-export default LegacyFooterUI;

package/components/Header/Header.stories.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Header from './HeaderUI';
-import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Header',
-  component: Header,
-  decorators: [withKnobs],
-};
-
-export const Example = () => (
-  <div id="qpp-nav-header">
-    <Header
-      isLoginEnabled={boolean('isLoginEnabled', true)}
-      skipToContentId={text('skipToContentId', '')}
-      includeSkipToSidebar={boolean('includeSkipToSidebar', false)}
-      showFacilityBasedPreviewLink={boolean(
-        'showFacilityBasedPreviewLink',
-        false
-      )}
-      showCancelButton={boolean('showCancelButton', false)}
-      handleCancel={action('handleCancel')}
-      showPhysicianCompareLink={boolean('showPhysicianCompareLink', false)}
-      performanceYear={number('performanceYear', 2019)}
-      feedbackPerformanceYear={text('feedbackPerformanceYear', '')}
-      fbpPerformanceYear={text('fbpPerformanceYear', '')}
-      showCovidLink={boolean('showCovidLink', false)}
-      isDevPre={boolean('isDevPre', false)}
-    />
-  </div>
-);

package/components/InfoModal/InfoModal.stories.js

@@ -1,98 +0,0 @@
-import React, { useState } from 'react';
-import InfoModal from './index';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'InfoModal',
-  component: InfoModal,
-  decorators: [withKnobs],
-};
-
-const useModal = () => {
-  const [open, setOpen] = useState(false);
-  const openModal = () => setOpen(true);
-  const closeModal = () => setOpen(false);
-  return [open, openModal, closeModal];
-};
-
-export const Example = () => {
-  const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
-  return (
-    <>
-      <button onClick={openModal}>Open InfoModal</button>
-      <InfoModal
-        isOpen={open || knobIsOpen}
-        titleText={text('titleText', 'Title Text')}
-        bodyText={text('bodyText', 'Body Text')}
-        closeXAction={closeModal}
-        primaryAction={text('primaryAction', null)}
-        primaryCallback={action('primaryCallback')}
-        secondaryAction={text('secondaryAction', null)}
-        secondaryCallback={action('secondaryCallback')}
-        onRequestClose={closeModal}
-      />
-    </>
-  );
-};
-
-export const WithBodyBullets = () => {
-  const [open, openModal, closeModal] = useModal();
-  return (
-    <>
-      <button onClick={openModal}>Open InfoModal</button>
-      <InfoModal
-        isOpen={open}
-        titleText="Title Text"
-        bodyText="Example InfoModal with body bullets"
-        bodyBullets={{
-          header: 'Bullets Header',
-          bullets: ['Bullet 1', 'Bullet 2', 'Bullet 3'],
-        }}
-        closeXAction={closeModal}
-        onRequestClose={closeModal}
-      />
-    </>
-  );
-};
-
-export const WithChildContent = () => {
-  const [open, openModal, closeModal] = useModal();
-  return (
-    <>
-      <button onClick={openModal}>Open InfoModal</button>
-      <InfoModal
-        isOpen={open}
-        titleText="Title Text"
-        bodyText="Example InfoModal with child content"
-        closeXAction={closeModal}
-        onRequestClose={closeModal}
-      >
-        <strong>Custom child content is placed here</strong>
-        <br />
-        <button onClick={action('childButtonClick')}>Foobar</button>
-      </InfoModal>
-    </>
-  );
-};
-
-export const WithActions = () => {
-  const [open, openModal, closeModal] = useModal();
-  return (
-    <>
-      <button onClick={openModal}>Open InfoModal</button>
-      <InfoModal
-        isOpen={open}
-        titleText="Title Text"
-        bodyText="Example InfoModal with action buttons"
-        closeXAction={closeModal}
-        onRequestClose={closeModal}
-        primaryAction={'Primary Action'}
-        primaryCallback={action('primaryCallback')}
-        secondaryAction={'Secondary Action'}
-        secondaryCallback={action('secondaryCallback')}
-      />
-    </>
-  );
-};

package/components/InfoModal/index.jsx

@@ -1,104 +0,0 @@
-import React, { Component } from 'react';
-import Modal from 'react-modal';
-import { CloseXIcon } from '../../lib/SvgComponents.jsx';
-import PropTypes from 'prop-types';
-
-class InfoModal extends Component {
-  constructor(props) {
-    super(props);
-
-    Modal.setAppElement(props.appElement);
-  }
-
-  displayBullets = (bullets) => {
-    return (
-      <div className="list-section">
-        <p>{bullets.header}</p>
-        <ul>
-          {bullets.bullets.map((item) => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-      </div>
-    );
-  };
-
-  render() {
-    const classes = `info-modal-content ${
-      !this.props.secondaryAction ? 'info-modal-content-primary-only' : ''
-    }`;
-    return (
-      <Modal
-        role="alertdialog"
-        isOpen={this.props.isOpen}
-        onRequestClose={this.props.onRequestClose}
-        contentLabel={this.props.titleText}
-        className={classes}
-        overlayClassName="info-modal-overlay"
-      >
-        <button
-          className="closeModal"
-          aria-label="Close modal"
-          onClick={this.props.closeXAction}
-        >
-          <svg className="close-icon" aria-hidden="true">
-            <CloseXIcon />
-          </svg>
-        </button>
-        <h1>{this.props.titleText}</h1>
-        <p className="body-text">{this.props.bodyText}</p>
-        {this.props.bodyBullets && this.displayBullets(this.props.bodyBullets)}
-        {this.props.children}
-        <div className="actions">
-          {this.props.primaryAction && (
-            <button
-              className="btn primary-action"
-              type="button"
-              onClick={this.props.primaryCallback}
-            >
-              {this.props.primaryAction}
-            </button>
-          )}
-          {this.props.secondaryAction && (
-            <button
-              className="btn secondary-action"
-              type="button"
-              onClick={this.props.secondaryCallback}
-            >
-              {this.props.secondaryAction}
-            </button>
-          )}
-        </div>
-      </Modal>
-    );
-  }
-}
-
-InfoModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  titleText: PropTypes.string.isRequired,
-  bodyText: PropTypes.string.isRequired,
-  bodyBullets: PropTypes.object,
-  closeXAction: PropTypes.func,
-  primaryAction: PropTypes.string,
-  primaryCallback: PropTypes.func,
-  secondaryAction: PropTypes.string,
-  secondaryCallback: PropTypes.func,
-  onRequestClose: PropTypes.func,
-  children: PropTypes.node,
-  appElement: PropTypes.string,
-};
-
-InfoModal.defaultProps = {
-  bodyBullets: null,
-  closeXAction: null,
-  primaryAction: null,
-  primaryCallback: null,
-  secondaryAction: null,
-  secondaryCallback: null,
-  onRequestClose: null,
-  children: null,
-  appElement: 'body > *:not(.ReactModalPortal)',
-};
-
-export default InfoModal;

package/components/Infotip/Infotip.stories.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import Infotip from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-
-export default {
-  title: 'Infotip',
-  component: Infotip,
-  decorators: [
-    withKnobs,
-    (storyFn) => (
-      <div style={{ marginTop: '120px', marginLeft: '100px' }}>{storyFn()}</div>
-    ),
-  ],
-};
-
-export const ExampleInfoTip = () => (
-  <Infotip label="Tooltip Content!" lightIcon={boolean('lightIcon', false)} />
-);
-
-ExampleInfoTip.storyName = 'qpp themed Infotip'
-
-export const PositionCollisionInfotip = () => (
-  <Infotip
-    DEBUG_STYLE
-    label="The DEBUG_STYLE prop is supported by the useTooltip hook and should only
-  be used for development."
-  />
-);
-
-PositionCollisionInfotip.storyName = 'position collision';
-
-export const LongContentInfotip = () => (
-  <div style={{ paddingTop: '50px' }}>
-    <span style={{ marginLeft: '120px' }} />
-    <Infotip
-      DEBUG_STYLE
-      label="Initial Eligibility determination covers data collected from Oct. 1, 2018 to Sept. 31, 2019. Determination was released in Dec. 2019. Final eligibility will be released in Nov. 2020."
-    />
-  </div>
-);
-
-LongContentInfotip.storyName = 'long content';
-
-export const LightIconInfotip = () => (
-  <div style={{ backgroundColor: '#04838A', padding: '20px', width: '16px' }}>
-    <Infotip lightIcon label="Light Icon Infotip" />
-  </div>
-);
-
-LightIconInfotip.storyName = 'alternate light icon';