qpp-style 9.7.2 → 9.7.3

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/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 = {