qpp-style 0.0.9 → 0.0.10

package/components/SideNav/SideNav.stories.js

@@ -1,397 +0,0 @@
-import React from 'react';
-import SideNav from './UI/SideNavUI';
-import {
-  withKnobs,
-  boolean,
-  number,
-  select,
-  text,
-} from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import {
-  AccountHomeIcon,
-  StarIcon,
-  PaymentIcon,
-  ReportsIcon,
-  TargetIcon,
-  HardshipIcon,
-} from '../../lib/SvgComponents';
-
-export default {
-  title: 'SideNav',
-  component: SideNav,
-  decorators: [withKnobs],
-};
-
-const PERFORMANCE_YEARS = ['2017', '2018', '2019', '2020'];
-
-const CONFIG_GROUP_ID = 'config prop';
-
-/*
-type Config = {
-  openDrawersByDefault: Boolean,
-  linkActiveFunc: Function,
-  linkCallback: Function,
-  animationType: String,
-  useTooltips: Boolean,
-  navClassName: String,
-  chartActive: Boolean,
-  openDrawersByDefault: Boolean,
-  updateTime: String,
-  practiceId: String,
-  practiceName: String,
-  practiceTin: String,
-  apmEntityId: String,
-  isConnectedUsersPage: Boolean,
-  vgId: String,
-  roleAbbr: String,
-  performanceYear: String,
-  finalFeedbackOpen: Boolean,
-  isApmPaymentDetailsPage: Boolean,
-  cpcPlusId: String,
-}
-
-type Category = {
-  name: String,
-  link: String,
-  value: Number,
-  maxContribution: Number,
-}
-
-type ChartData = {
-  finalScore: Number,
-  categories: [ Category ],
-}
-*/
-
-const demoChartData = {
-  finalScore: 50,
-  categories: [
-    {
-      name: 'name1',
-      link: 'https://google.com',
-      value: 10,
-      maxContribution: 20,
-    },
-    {
-      name: 'name2',
-      link: 'https://google.com',
-      value: 10,
-      maxContribution: 20,
-    },
-    {
-      name: 'name3',
-      link: 'https://google.com',
-      value: 10,
-      maxContribution: 20,
-    },
-    {
-      name: 'name4',
-      link: 'https://google.com',
-      value: 20,
-      maxContribution: 40,
-    },
-  ],
-};
-
-export const Example = () => (
-  <div style={{ height: '840px' }}>
-    <SideNav
-      currentLevel={number('currentLevel', 1)}
-      isExpanded={boolean('isExpanded', true)}
-      onExpanded={action('onExpanded')}
-      onCollapsed={action('onCollapsed')}
-      chartData={demoChartData}
-      showDevPreDfpLink={boolean('showDevPreDfpLink', false)}
-      // svgIcons="" (default value is svg file import)
-      // items={demoItems}
-      isAltStyle={boolean('isAltStyle', false)}
-      showPhysicianCompareLink={boolean('showPhysicianCompareLink', false)}
-      showFacilityBasedPreviewLink={boolean(
-        'showFacilityBasedPreviewLink',
-        false
-      )}
-      showReportingLinks={boolean('showReportingLinks', false)}
-      showApmIncentivePaymentLink={boolean(
-        'showApmIncentivePaymentLink',
-        false
-      )}
-      performanceYear={select(
-        'performanceYear',
-        PERFORMANCE_YEARS,
-        PERFORMANCE_YEARS[0]
-      )}
-      // feedbackPerformanceYear={null} TODO: appears unused, remove?
-      fbpPerformanceYear={select(
-        'fbpPerformanceYear',
-        [null, ...PERFORMANCE_YEARS],
-        null
-      )}
-      showSelfNomination={boolean('showSelfNomination', false)}
-      showReportsPortal={boolean('showReportsPortal', false)}
-      showTargetedReviewLink={boolean('showTargetedReviewLink', false)}
-      config={{
-        linkActiveFunc: action('linkActiveFunc'),
-        linkCallback: action('linkCallback'),
-        animationType: text('animationType', '', CONFIG_GROUP_ID),
-        navClassName: text('navClassName', '', CONFIG_GROUP_ID),
-        updateTime: text('updateTime', '', CONFIG_GROUP_ID),
-        practiceId: text('practiceId', 'PRACTICE_ID', CONFIG_GROUP_ID),
-        practiceName: text('practiceName', 'PRACTICE_NAME', CONFIG_GROUP_ID),
-        practiceTin: text('practiceTin', 'PRACTICE_TIN', CONFIG_GROUP_ID),
-        apmEntityId: text('apmEntityId', 'APM_ENTITY_ID', CONFIG_GROUP_ID),
-        cpcPlusId: text('cpcPlusId', 'CPC_PLUS_ID', CONFIG_GROUP_ID),
-        vgId: text('vgId', 'VG ID', CONFIG_GROUP_ID),
-        roleAbbr: text('roleAbbr', 'ROLE-ABBR', CONFIG_GROUP_ID),
-        performanceYear: text(
-          'performanceYear',
-          PERFORMANCE_YEARS[0],
-          CONFIG_GROUP_ID
-        ),
-        openDrawersByDefault: boolean(
-          'openDrawersByDefault',
-          false,
-          CONFIG_GROUP_ID
-        ),
-        chartActive: boolean('chartActive', true, CONFIG_GROUP_ID),
-        isConnectedUsersPage: boolean(
-          'isConnectedUsersPage',
-          false,
-          CONFIG_GROUP_ID
-        ),
-        finalFeedbackOpen: boolean('finalFeedbackOpen', false, CONFIG_GROUP_ID),
-        isApmPaymentDetailsPage: boolean(
-          'isApmPaymentDetailsPage',
-          false,
-          CONFIG_GROUP_ID
-        ),
-        useTooltips: boolean('useTooltips', false, CONFIG_GROUP_ID),
-      }}
-    />
-  </div>
-);
-
-/*
-type Item = {
-  type: String,
-  url: String,
-  label: String,
-  className: String,
-  icon: Element,
-  practiceName: String,
-  practiceTin: String,
-  apmEntityId: String,
-  vgId: String,
-  cpcPlusId: String,
-  individualName: String,
-  individualNpi: String,
-  isAlwaysOpen: Boolean,
-  content: String,
-  customClassName: String,
-  chartData: ChartData,
-  disabled: Boolean,
-  items: [ Item ]
-}
-
-type Items = [ Item ]
-*/
-
-const demoItems = [
-  {
-    type: 'container',
-    className: 'foobar',
-    items: [
-      {
-        type: 'linkBack',
-        url: 'https://qpp.cms.gov',
-        label: 'link back',
-      },
-      {
-        type: 'linkHome',
-        icon: AccountHomeIcon,
-        url: 'https://qpp.cms.gov',
-        label: 'link home',
-      },
-    ],
-  },
-  {
-    type: 'divider',
-  },
-  {
-    type: 'practiceDetails',
-    practiceName: 'Demo Practice',
-    practiceTin: '123456789',
-    //apmEntityId: '111111111',
-    //vgId: '987654321',
-    //cpcPlusId: '999999999',
-  },
-  {
-    type: 'individualDetails',
-    individualName: 'Demo Individual',
-    individualNpi: '333333333',
-  },
-  {
-    type: 'divider',
-  },
-  {
-    type: 'linkDrawer',
-    icon: StarIcon,
-    isAlwaysOpen: false,
-    label: 'Link Drawer',
-    // disabled: false,
-    items: [
-      {
-        type: 'link',
-        className: 'foo',
-        label: 'Link 1',
-        icon: PaymentIcon,
-        url: 'https://qpp.cms.gov',
-      },
-      {
-        type: 'link',
-        className: 'bar',
-        label: 'Link 2',
-        icon: ReportsIcon,
-        url: 'https://qpp.cms.gov',
-      },
-      {
-        type: 'link',
-        className: 'baz',
-        label: 'Link 3',
-        url: 'https://qpp.cms.gov',
-      },
-    ],
-  },
-  {
-    type: 'divider',
-  },
-  {
-    type: 'custom',
-    content: `
-        <div style="margin-left: 20px;">
-          <h4 style="color: white;">Custom Content</h4>
-          <ul>
-            <li>foo</li>
-            <li>bar</li>
-          </ul>
-        </div>
-      `,
-  },
-  {
-    type: 'divider',
-  },
-  {
-    type: 'chart',
-    chartData: demoChartData,
-  },
-  {
-    type: 'divider',
-  },
-  {
-    type: 'switchLink',
-    label: 'Switch Link',
-    url: 'https://qpp.cms.gov',
-  },
-  {
-    type: 'divider',
-  },
-  {
-    type: 'link',
-    label: 'Default Link',
-    icon: HardshipIcon,
-  },
-  {
-    type: 'link',
-    label: 'Default Disabled Link',
-    icon: TargetIcon,
-    disabled: true,
-  },
-];
-
-export const DynamicItems = () => (
-  <div style={{ height: '840px' }}>
-    <SideNav
-      isExpanded={boolean('isExpanded', true)}
-      onExpanded={action('onExpanded')}
-      onCollapsed={action('onCollapsed')}
-      items={demoItems}
-    />
-  </div>
-);
-
-export const LevelTwoUsage = () => (
-  <div style={{ height: '840px' }}>
-    <SideNav
-      currentLevel={number('currentLevel', 2)}
-      isExpanded={boolean('isExpanded', true)}
-      onExpanded={action('onExpanded')}
-      onCollapsed={action('onCollapsed')}
-      chartData={demoChartData}
-      showDevPreDfpLink={boolean('showDevPreDfpLink', false)}
-      // svgIcons="" (default value is svg file import)
-      // items={demoItems}
-      isAltStyle={boolean('isAltStyle', false)}
-      showPhysicianCompareLink={boolean('showPhysicianCompareLink', false)}
-      showFacilityBasedPreviewLink={boolean(
-        'showFacilityBasedPreviewLink',
-        false
-      )}
-      showReportingLinks={boolean('showReportingLinks', false)}
-      showApmIncentivePaymentLink={boolean(
-        'showApmIncentivePaymentLink',
-        false
-      )}
-      performanceYear={select(
-        'performanceYear',
-        PERFORMANCE_YEARS,
-        PERFORMANCE_YEARS[0]
-      )}
-      // feedbackPerformanceYear={null} TODO: appears unused, remove?
-      fbpPerformanceYear={select(
-        'fbpPerformanceYear',
-        [null, ...PERFORMANCE_YEARS],
-        null
-      )}
-      showSelfNomination={boolean('showSelfNomination', false)}
-      showReportsPortal={boolean('showReportsPortal', false)}
-      showTargetedReviewLink={boolean('showTargetedReviewLink', false)}
-      config={{
-        linkActiveFunc: action('linkActiveFunc'),
-        linkCallback: action('linkCallback'),
-        animationType: text('animationType', '', CONFIG_GROUP_ID),
-        navClassName: text('navClassName', '', CONFIG_GROUP_ID),
-        updateTime: text('updateTime', '', CONFIG_GROUP_ID),
-        practiceId: text('practiceId', 'PRACTICE_ID', CONFIG_GROUP_ID),
-        practiceName: text('practiceName', 'PRACTICE_NAME', CONFIG_GROUP_ID),
-        practiceTin: text('practiceTin', 'PRACTICE_TIN', CONFIG_GROUP_ID),
-        apmEntityId: text('apmEntityId', 'APM_ENTITY_ID', CONFIG_GROUP_ID),
-        cpcPlusId: text('cpcPlusId', 'CPC_PLUS_ID', CONFIG_GROUP_ID),
-        vgId: text('vgId', 'VG ID', CONFIG_GROUP_ID),
-        roleAbbr: text('roleAbbr', 'ROLE-ABBR', CONFIG_GROUP_ID),
-        performanceYear: text(
-          'performanceYear',
-          PERFORMANCE_YEARS[0],
-          CONFIG_GROUP_ID
-        ),
-        openDrawersByDefault: boolean(
-          'openDrawersByDefault',
-          false,
-          CONFIG_GROUP_ID
-        ),
-        chartActive: boolean('chartActive', true, CONFIG_GROUP_ID),
-        isConnectedUsersPage: boolean(
-          'isConnectedUsersPage',
-          false,
-          CONFIG_GROUP_ID
-        ),
-        finalFeedbackOpen: boolean('finalFeedbackOpen', false, CONFIG_GROUP_ID),
-        isApmPaymentDetailsPage: boolean(
-          'isApmPaymentDetailsPage',
-          false,
-          CONFIG_GROUP_ID
-        ),
-        useTooltips: boolean('useTooltips', false, CONFIG_GROUP_ID),
-      }}
-    />
-  </div>
-)

package/components/Spinner/index.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import DSSpinner from '@cmsgov/design-system-core/dist/components/Spinner/Spinner';
-
-export default class Spinner {
-  constructor(options) {
-    render(<DSSpinner />, options.rootElement);
-  }
-}

package/components/Tabs/TabsUI.jsx

@@ -1,118 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Tabs from '@cmsgov/design-system-core/dist/components/Tabs/Tabs';
-import TabPanel from '@cmsgov/design-system-core/dist/components/Tabs/TabPanel';
-import SanitizedContent from '../SanitizedContent';
-
-/**
- * Renders Tabs component using [react-tabs]{@link https://github.com/reactjs/react-tabs}.
- * NOTE: Since this component renders HTML content that may be unsafe, anything
- * passed as tab contents will be sanitized via the xss npm package.
- */
-export default class TabsUI extends Component {
-  /**
-   * @param {Object} props - An object containing content and config data
-   * @param {HTMLElement} props.rootElement - Elem inside which to render
-   * @param {Object} props.config - Config info for react-tabs elements
-   * @param {Object} props.config.tabs - Config for react-tabs <Tabs>
-   * @param {Object} props.config.tabList - Config for react-tabs <TabList>
-   * @param {Object} props.config.tab - Config for react-tabs <Tab>
-   * @param {Object} props.config.tabPanel - Config react-tabs <TabPanel>
-   * @param {Object[]} props.tabs - An array of tab content objects
-   * @param {String} props.tabs[].title - The text displayed on the tab
-   * @param {String} props.tabs[].content - The HTML string for tab contents
-   * @param {Boolean} props.tabs[].disabled - Whether the tab is disabled
-   * @param {Boolean} props.fullWidthBorder - Whether to render with a full-
-   * width border
-   */
-  constructor(props) {
-    super(props);
-
-    this._updateStyle = this.updateStyle.bind(this);
-  }
-
-  /**
-   * Adjusts the display of the tabs so that the border line under the tabs
-   * extends the full width of the page.
-   */
-  updateStyle() {
-    const rule = this.element;
-    const tabs = this.element.parentNode;
-    const bounds = tabs.getBoundingClientRect();
-
-    tabs.classList.add('react-tabs__full-width');
-    rule.style.left = `-${bounds.left}px`;
-    rule.style.right = `-${bounds.left}px`;
-  }
-
-  /**
-   * If the component should display with a full-width border, add it and
-   * listen for window resizing so that the border can update along with it.
-   */
-  componentDidMount() {
-    if (this.props.fullWidthBorder) {
-      this._updateStyle();
-      window.addEventListener('resize', this._updateStyle);
-    }
-  }
-
-  /**
-   * If the component was displayed with a full width border, remove the
-   * listener for window resizing when the component is destroyed.
-   */
-  componentWillUnmount() {
-    if (this.props.fullWidthBorder) {
-      window.removeEventListener('resize', this._updateStyle);
-    }
-  }
-
-  /**
-   * Render the tab panels
-   *
-   * @return {String} HTML content
-   */
-  renderTabPanels() {
-    return this.props.tabs.map((t) => {
-      return (
-        <TabPanel
-          key={t.title}
-          id={t.title}
-          tab={t.title}
-          disabled={t.disabled}
-          {...t.tabPanel}
-        >
-          <SanitizedContent html={t.content} />
-        </TabPanel>
-      );
-    });
-  }
-
-  /**
-   * Render the component
-   * @return {String} HTML content
-   */
-  render() {
-    return (
-      <div className="react-tabs">
-        <Tabs {...this.props.config.tabs}>
-          <div
-            ref={(elem) => (this.element = elem)}
-            className="react-tabs__tab-rule"
-          />
-          {this.renderTabPanels()}
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-TabsUI.propTypes = {
-  config: PropTypes.object,
-  fullWidthBorder: PropTypes.bool,
-  tabs: PropTypes.array,
-};
-
-TabsUI.defaultProps = {
-  config: {},
-  fullWidthBorder: false,
-};

package/components/Tabs/tabs.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import TabsUI from './TabsUI';
-
-/**
- * Renders Tabs component using [react-tabs]{@link https://github.com/reactjs/react-tabs}.
- * NOTE: Since this component renders HTML content that may be unsafe, anything
- * passed as tab contents will be sanitized via the xss npm package.
- */
-export default class Tabs {
-  /**
-   * @param {Object} options - An object containing content and config data
-   * @param {HTMLElement} options.rootElement - Elem inside which to render
-   * @param {Object} options.config - Config info for react-tabs elements
-   * @param {Object} options.config.tabs - Config for react-tabs <Tabs>
-   * @param {Object} options.config.tabList - Config for react-tabs <TabList>
-   * @param {Object} options.config.tab - Config for react-tabs <Tab>
-   * @param {Object} options.config.tabPanel - Config react-tabs <TabPanel>
-   * @param {Object[]} options.tabs - An array of tab content objects
-   * @param {String} options.tabs[].title - The text displayed on the tab
-   * @param {String} options.tabs[].content - The HTML string for tab contents
-   * @param {Boolean} options.tabs[].disabled - Whether the tab is disabled
-   * @param {Boolean} options.fullWidthBorder - Whether to render with a full-
-   * width border
-   */
-  constructor(options) {
-    render(
-      <TabsUI
-        config={options.config}
-        tabs={options.tabs}
-        fullWidthBorder={options.fullWidthBorder}
-      />,
-      options.rootElement
-    );
-  }
-}

package/components/Tooltip/Tooltip.jsx

@@ -1,88 +0,0 @@
-import React, { cloneElement, useLayoutEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import positionTip, { positionTriangle } from './position';
-import { useTooltip, TooltipPopup } from '@reach/tooltip';
-import Portal from '@reach/portal';
-
-// TODO: investigate ways to allow more styling via css? the triangle
-// positioning effect issue may need to be resolved to allow for this.
-const TEXT_COLOR = '#FFF';
-const BACKGROUND_COLOR = '#333';
-
-/**
- * Generic styled tooltip component.
- * Corresponding styles: /styles/components/_tooltip.scss
- *
- * Extends implementation from @reach/tooltip:
- * https://reacttraining.com/reach-ui/tooltip
- */
-const Tooltip = ({ children, label, ariaLabel, DEBUG_STYLE }) => {
-  const [trigger, tooltip] = useTooltip({ DEBUG_STYLE });
-  const { isVisible, triggerRect } = tooltip;
-  const tooltipPopupRef = useRef();
-  const triangleRef = useRef();
-
-  useLayoutEffect(() => {
-    // For some reason, the forwardRef for the tooltipPopup points to an undefined
-    // dom element when we first render the portal containing the triangle. Using
-    // an effect here will ensure that the ref is available when applying styles.
-    // TODO: investigate and make issue for @reach-ui/tooltip?
-    if (isVisible && tooltipPopupRef.current && triggerRect) {
-      const tooltipRect = tooltipPopupRef.current.getBoundingClientRect();
-      const positionCssText = positionTriangle(triggerRect, tooltipRect);
-      const cssText = `
-                  position: absolute;
-                  width: 0;
-                  height: 0;
-                  ${positionCssText}
-                  border-top-color: ${BACKGROUND_COLOR};
-                  border-bottom-color: ${BACKGROUND_COLOR};
-                  z-index: 1;
-                `;
-      triangleRef.current.style.cssText = cssText;
-    }
-  });
-
-  return (
-    <>
-      {cloneElement(children, trigger)}
-      <TooltipPopup
-        {...tooltip}
-        label={label}
-        ariaLabel={ariaLabel}
-        style={{
-          background: BACKGROUND_COLOR,
-          color: TEXT_COLOR,
-        }}
-        ref={tooltipPopupRef}
-        position={positionTip}
-      />
-      {isVisible && (
-        <Portal>
-          <div
-            ref={triangleRef}
-            style={{
-              position: 'absolute',
-              width: 0,
-              height: 0,
-            }}
-          />
-        </Portal>
-      )}
-    </>
-  );
-};
-
-Tooltip.propTypes = {
-  children: PropTypes.node.isRequired,
-  label: PropTypes.node.isRequired,
-  ariaLabel: PropTypes.string,
-  DEBUG_STYLE: PropTypes.bool,
-};
-
-Tooltip.defaultProps = {
-  ariaLabel: undefined,
-  DEBUG_STYLE: undefined,
-};
-
-export default Tooltip;