qpp-style 9.6.13 → 9.7.3

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -20,7 +20,10 @@ const NavLinkDrawer = ({
   sidebarExpand,
   staticDrawer,
   url,
-  isHighlighted
+  isHighlighted,
+  darkerBackground,
+  leftBorderHighlightDisabled,
+  largerDrawerBottomPadding
 }) => {
   const [isOpen, setIsOpen] = useState(openByDefault);
 
@@ -73,8 +76,32 @@ const NavLinkDrawer = ({
     }
   }
 
+  const hasDarkerBackground = (darkerBackground) => {
+    return darkerBackground ? 'background-highlight' : '';
+  }
+
+  const hasDarkerTitle = (darkerBackground) => {
+    return darkerBackground ? 'expanded currentPage' : '';
+  }
+
+  const isLeftBorderHighlightDisabled = (leftBorderHighlightDisabled) => {
+    return leftBorderHighlightDisabled ? 'left-border-disabled' : ''
+  }
+
+  const isHiddenWhileCollapsed = (isLeftBorderDisabled, isExpanded) => {
+    return isLeftBorderDisabled && !isExpanded ? 'hidden-nav-link-item' : '';
+  }
+
   const highlightTitle = (isHighlighted) => {
-    return isHighlighted ? 'highlight' : '';
+    return isHighlighted && isExpanded ? 'highlight' : '';
+  }
+
+  const hasLargerDrawBottomPadding = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? 'larger-drawer-bottom-padding' : '';
+  }
+
+  const adjustItemSpacing = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? 'larger-item-spacing' : '';
   }
 
   useEffect(() => {
@@ -147,9 +174,9 @@ const NavLinkDrawer = ({
         {...(isAlwaysOpen || disabled
           ? { disabled: isAlwaysOpen || disabled }
           : {})}
-        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${
-          currentPage ? 'currentPage' : ''
-        }`}
+        className={`${className} ${expandedClass} ${highlightTitle(isHighlighted)} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(leftBorderHighlightDisabled)}
+         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
       >
         <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
           {renderLeftIcon(leftIcon)}
@@ -171,11 +198,11 @@ const NavLinkDrawer = ({
         <div
           className={`${currentPage ? 'currentPage' : ''} ${
             isOpen && !disabled ? 'drawer open' : 'drawer'
-          }`}
+          } ${hasDarkerBackground(darkerBackground)} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
         >
           <ul aria-hidden={!isOpen}>
             {listOfLinks &&
-              renderDrawerLinksRecursively(listOfLinks, 'parent-link')}
+              renderDrawerLinksRecursively(listOfLinks, `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`)}
           </ul>
         </div>
       </AnimationGroup>
@@ -199,7 +226,10 @@ NavLinkDrawer.propTypes = {
   staticDrawer: PropTypes.bool,
   items: PropTypes.object,
   url: PropTypes.string,
-  isHighlighted: PropTypes.bool
+  isHighlighted: PropTypes.bool,
+  darkerBackground: PropTypes.bool,
+  leftBorderHighlightDisabled: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool
 };
 
 export default NavLinkDrawer;

package/components/SideNav/SideNav.stories.js

@@ -1,61 +1,14 @@
 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';
 
 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: [
@@ -86,88 +39,6 @@ const demoChartData = {
   ],
 };
 
-export const Example = () => (
-  <div style={{ height: '840px' }}>
-    <SideNav
-      currentLevel={number('currentLevel', 1)}
-      isExpanded={boolean('isExpanded', true)}
-      onExpanded={action('onExpanded')}
-      onCollapsed={action('onCollapsed')}
-      chartData={demoChartData}
-      // items={demoItems}
-      isAltStyle={boolean('isAltStyle', false)}
-      showReportingLinks={boolean('showReportingLinks', false)}
-      performanceYear={select(
-        'performanceYear',
-        PERFORMANCE_YEARS,
-        PERFORMANCE_YEARS[0]
-      )}
-      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',
@@ -309,71 +180,119 @@ const demoItems = [
   },
 ];
 
-export const DynamicItems = () => (
+export const Example = (args) => (
+  <div style={{ height: '840px' }}>
+    <SideNav {...args} />
+  </div>
+);
+Example.argTypes = {
+  currentLevel: {
+    control: {
+      options: [1, 2],
+      type: 'radio',
+    },
+  },
+  performanceYear: {
+    control: {
+      options: PERFORMANCE_YEARS,
+      type: 'select',
+    },
+  },
+};
+Example.args = {
+  currentLevel: 1,
+  isExpanded: true,
+  onExpanded: () => action('onExpanded'),
+  onCollapsed: () => action('onCollapsed'),
+  isAltStyle: false,
+  showReportingLinks: false,
+  performanceYear: PERFORMANCE_YEARS[0],
+  config: {
+    linkActiveFunc: () => action('linkActiveFunc'),
+    linkCallback: () => action('linkCallback'),
+    animationType: '',
+    navClassName: '',
+    updateTime: '',
+    practiceId: 'PRACTICE_ID',
+    practiceName: 'PRACTICE_NAME',
+    practiceTin: 'PRACTICE_TIN',
+    apmEntityId: 'APM_ENTITY_ID',
+    cpcPlusId: 'CPC_PLUS_ID',
+    vgId: 'VG ID',
+    roleAbbr: 'ROLE-ABBR',
+    performanceYear: PERFORMANCE_YEARS[0],
+    openDrawersByDefault: false,
+    chartActive: true,
+    isConnectedUsersPage: false,
+    finalFeedbackOpen: false,
+    isApmPaymentDetailsPage: false,
+    useTooltips: false,
+  },
+};
+
+export const DynamicItems = (args) => (
   <div style={{ height: '840px' }}>
     <SideNav
-      isExpanded={boolean('isExpanded', true)}
       onExpanded={action('onExpanded')}
       onCollapsed={action('onCollapsed')}
       items={demoItems}
+      {...args}
     />
   </div>
 );
+DynamicItems.args = {
+  isExpanded: true,
+};
 
-export const LevelTwoUsage = () => (
+export const LevelTwoUsage = (args) => (
   <div style={{ height: '840px' }}>
-    <SideNav
-      currentLevel={number('currentLevel', 2)}
-      isExpanded={boolean('isExpanded', true)}
-      onExpanded={action('onExpanded')}
-      onCollapsed={action('onCollapsed')}
-      chartData={demoChartData}
-      // items={demoItems}
-      isAltStyle={boolean('isAltStyle', false)}
-      showReportingLinks={boolean('showReportingLinks', false)}
-      performanceYear={select(
-        'performanceYear',
-        PERFORMANCE_YEARS,
-        PERFORMANCE_YEARS[0]
-      )}
-      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),
-        pcfId: text('pcfId', 'PCF_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),
-      }}
-    />
+    <SideNav {...args} />
   </div>
 );
+LevelTwoUsage.argTypes = {
+  currentLevel: {
+    control: {
+      options: [1, 2],
+      type: 'select',
+    },
+  },
+  performanceYear: {
+    control: {
+      options: PERFORMANCE_YEARS,
+      type: 'select',
+    },
+  },
+};
+LevelTwoUsage.args = {
+  currentLevel: 2,
+  isExpanded: true,
+  onExpanded: () => action('onExpanded'),
+  onCollapsed: () => action('onCollapsed'),
+  chartData: demoChartData,
+  items: demoItems,
+  isAltStyle: false,
+  showReportingLinks: false,
+  performanceYear: PERFORMANCE_YEARS[0],
+  config: {
+    linkActiveFunc: () => action('linkActiveFunc'),
+    linkCallback: () => action('linkCallback'),
+    animationType: '',
+    navClassName: '',
+    updateTime: '',
+    practiceId: 'PRACTICE_ID',
+    practiceName: 'PRACTICE_NAME',
+    practiceTin: 'PRACTICE_TIN',
+    apmEntityId: 'APM_ENTITY_ID',
+    cpcPlusId: 'CPC_PLUS_ID',
+    pcfId: 'PCF_ID',
+    vgId: 'VG ID',
+    roleAbbr: 'ROLE-ABBR',
+    performanceYear: PERFORMANCE_YEARS[0],
+    openDrawersByDefault: false,
+    chartActive: true,
+    isConnectedUsersPage: false,
+    finalFeedbackOpen: false,
+    isApmPaymentDetailsPage: false,
+    useTooltips: false,
+  },
+};

package/components/SideNav/UI/SideNavUI.jsx

@@ -89,13 +89,17 @@ const SideNavUI = ({
       return Component ? <Component /> : null;
     };
 
+    const hasDarkerBackground = (darkerBackground) => {
+      return darkerBackground ? 'hr-smaller-vertical-spacing' : '';
+    }
+
     const itemsMarkup = (contentItems || []).map((item, index) => {
       const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
       return (
         {
           divider: (
-            <AnimationGroup display={isExpandedState} key={key}>
-              <hr />
+            <AnimationGroup display={isExpandedState} key={key} darkerBackground={item.darkerBackground}>
+              <hr className={`${hasDarkerBackground(item.darkerBackground)}`}/>
             </AnimationGroup>
           ),
           container: getDynamicContent(
@@ -173,6 +177,9 @@ const SideNavUI = ({
               url={item.url}
               sidebarExpand={expand}
               isHighlighted={item.isHighlighted}
+              darkerBackground={item.darkerBackground}
+              leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              largerDrawerBottomPadding={item.largerDrawerBottomPadding}
             />
           ),
           custom: (

package/components/Tabs/Tabs.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
 
 import Tabs from './index';
 import TabPanel from './TabPanel';
@@ -8,7 +7,6 @@ import Button from '../Button';
 export default {
   title: 'Tabs',
   component: Tabs,
-  decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/TextInput/TextInput.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TextInput from './index';
-import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'Text Input',
   component: TextInput,
-  decorators: [withKnobs],
 };
 
 const optionalProps = {

package/components/index.js

@@ -16,6 +16,7 @@ import Tooltip from './Tooltip';
 import Infotip from './Infotip';
 import Search from './Search';
 import TextInput from './TextInput';
+import Dropdown from './Dropdown';
 import {
   MyApplicationsIcon,
   UserSignInIcon,
@@ -118,5 +119,6 @@ export {
   Tabs,
   TextButton,
   TextInput,
+  Dropdown,
   Tooltip,
 };