qpp-style 9.7.2 → 9.7.3

package/.storybook/main.js

@@ -2,6 +2,9 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: [
     '../components/**/*.stories.@(js|jsx|mdx)',
     '../lib/**/*.stories.@(js|jsx|mdx)',
@@ -10,28 +13,30 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
-    '@storybook/addon-knobs',
     '@storybook/addon-a11y',
     '@storybook/addon-docs',
     '@storybook/addon-backgrounds',
     '@storybook/addon-viewport',
     '@storybook/addon-postcss',
+    '@storybook/addon-controls',
   ],
   webpackFinal: async (config) => {
     // do mutation to the config
 
     config.plugins.push(
-      new CopyWebpackPlugin([
-        {
-          from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
-          to: 'fonts/',
-        },
-        {
-          from: path.join(__dirname, '..', '..', 'shared', 'images/'),
-          to: 'images/',
-          force: true,
-        },
-      ])
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
+            to: 'fonts/',
+          },
+          {
+            from: path.join(__dirname, '..', '..', 'shared', 'images/'),
+            to: 'images/',
+            force: true,
+          },
+        ],
+      })
     );
 
     config.module.rules.push({
@@ -81,7 +86,8 @@ module.exports = {
 
     if (staticAssetLoader) {
       // remove svg matching from storybook's default static asset loader
-      staticAssetLoader.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+      staticAssetLoader.test =
+        /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
     }
 
     return config;

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import Breadcrumb from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 
 export default {
   title: 'Breadcrumb',
   component: Breadcrumb,
-  decorators: [withKnobs],
 };
 
-export const ExampleLightBreadcrumb = () => (
+export const ExampleLightBreadcrumb = (args) => (
   <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
     <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
+      {...args}
       crumbs={[
         {
           url: '/',
@@ -31,11 +29,14 @@ export const ExampleLightBreadcrumb = () => (
 );
 
 ExampleLightBreadcrumb.storyName = 'Light';
+ExampleLightBreadcrumb.args = {
+  newBreadcrumb: true,
+}
 
-export const ExampleDarkBreadcrumb = () => (
+export const ExampleDarkBreadcrumb = (args) => (
   <div className="qppds qpp-u-padding--16">
     <Breadcrumb
-      newBreadcrumb={boolean('newBreadcrumb', true)}
+      {...args}
       dark
       crumbs={[
         {
@@ -56,3 +57,6 @@ export const ExampleDarkBreadcrumb = () => (
 );
 
 ExampleDarkBreadcrumb.storyName = 'Dark';
+ExampleDarkBreadcrumb.args = {
+  newBreadcrumb: true,
+}

package/components/Button/Button.stories.js

@@ -1,6 +1,5 @@
 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';
@@ -8,7 +7,6 @@ import Button, { TextButton } from './index';
 export default {
   title: 'Button',
   component: Button,
-  decorators: [withKnobs],
 };
 
 const Container = ({ className = '', children }) => (

package/components/CalloutBox/CalloutBox.stories.js

@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
 
 import CalloutBox from './index';
 
 export default {
   title: 'CalloutBox',
   component: CalloutBox,
-  decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/Card/Card.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
 
 import Card from './index';
 
 export default {
   title: 'Card',
   component: Card,
-  decorators: [withKnobs],
 };
 
 export const Default = () => {

package/components/Dropdown/Dropdown.stories.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import Dropdown from './index';
-import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'Dropdown',
   component: Dropdown,
-  decorators: [withKnobs],
 };
 
 export const DropdownField = () => (

package/components/Footer/Footer.stories.js

@@ -1,20 +1,17 @@
 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)}
-  />
-);
+export const ExampleFooter = (args) => <Footer {...args} />;
+ExampleFooter.args = {
+  isFullWidth: false,
+  buildVersion: 'BUILD VERSION',
+  isNewFooter: false,
+  showHcdResearch: false,
+};
 
 ExampleFooter.storyName = 'example Footer';

package/components/Header/Header.stories.js

@@ -1,32 +1,28 @@
 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 = () => (
+export const Example = (args) => (
   <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)}
-    />
+    <Header {...args} />
   </div>
 );
+Example.args = {
+  isLoginEnabled: true,
+  skipToContentId: '',
+  includeSkipToSidebar: false,
+  showFacilityBasedPreviewLink: false,
+  showCancelButton: false,
+  handleCancel: () => action('handleCancel'),
+  showPhysicianCompareLink: false,
+  performanceYear: 2019,
+  feedbackPerformanceYear: '',
+  fbpPerformanceYear: '',
+  showCovidLink: false,
+  isDevPre: false,
+};

package/components/Infotip/Infotip.stories.js

@@ -1,21 +1,21 @@
 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)} />
-);
+export const ExampleInfoTip = (args) => <Infotip {...args} />;
+ExampleInfoTip.args = {
+  label: 'Tooltip Content!',
+  lightIcon: false,
+};
 
 ExampleInfoTip.storyName = 'qpp themed Infotip';
 

package/components/Modal/Modal.stories.js

@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
 import Modal from './index';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 
 export default {
   title: 'Modal',
   component: Modal,
-  decorators: [withKnobs],
 };
 
 const useModal = () => {
@@ -15,43 +13,37 @@ const useModal = () => {
   return [open, openModal, closeModal];
 };
 
-export const WithDesignSystem = () => {
+export const WithDesignSystem = (args) => {
   const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
+  const { bodyText, ...restArgs } = args;
   return (
     <div className="qpp-u-padding--12">
       <button className="qpp-c-button" onClick={openModal}>
         Open Modal
       </button>
-      <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
-        onRequestClose={closeModal}
-      >
-        <p>
-          {text(
-            'bodyText',
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
-          )}
-        </p>
+      <Modal isOpen={open} onRequestClose={closeModal} {...restArgs}>
+        <p>{bodyText}</p>
       </Modal>
     </div>
   );
 };
+WithDesignSystem.args = {
+  title: 'Title Text',
+  useDesignSystem: true,
+  bodyText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.',
+};
 
-export const WithDesignSystemDialog = () => {
+export const WithDesignSystemDialog = (args) => {
   const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
+  const { bodyText, ...restArgs } = args;
   return (
     <div className="qpp-u-padding--12">
       <button className="qpp-c-button" onClick={openModal}>
         Open Modal
       </button>
       <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
+        isOpen={open}
         onRequestClose={closeModal}
         primary={{
           title: 'Yes, go for it',
@@ -63,30 +55,32 @@ export const WithDesignSystemDialog = () => {
         secondary={{
           title: 'No, take me back',
         }}
+        {...restArgs}
       >
         <p>
-          {text(
-            'bodyText',
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.'
-          )}
+          {bodyText}
         </p>
       </Modal>
     </div>
   );
 };
+WithDesignSystemDialog.args = {
+  title: 'Title Text',
+  useDesignSystem: true,
+  bodyText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac pulvinar massa, in mattis ligula. Vestibulum enim velit, ullamcorper vitae lorem ullamcorper, blandit fringilla mauris.',
+}
 
-export const WithDesignSystemOverflow = () => {
+export const WithDesignSystemOverflow = (args) => {
   const [open, openModal, closeModal] = useModal();
-  const knobIsOpen = boolean('isOpen', false);
   return (
     <div className="qpp-u-padding--12">
       <button className="qpp-c-button" onClick={openModal}>
         Open Modal
       </button>
       <Modal
-        useDesignSystem
-        isOpen={open || knobIsOpen}
-        title={text('Title text', 'Title Text')}
+        {...args}
+        isOpen={open}
         onRequestClose={closeModal}
         primary={{
           title: 'Yes, go for it',
@@ -157,3 +151,7 @@ export const WithDesignSystemOverflow = () => {
     </div>
   );
 };
+WithDesignSystemOverflow.args = {
+  title: 'Title Text',
+  useDesignSystem: true,
+}

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import NotificationBanner from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 
 export default {
   title: 'NotificationBanner',
   component: NotificationBanner,
-  decorators: [withKnobs],
 };
 
-export const ExampleNotificationBanner = () => (
+export const ExampleNotificationBanner = (args) => (
   <NotificationBanner
     result={{
-      content: 'CONTENT',
-      label: 'Label',
-      name: 'name',
-      color: 'blue',
-      dismissable: boolean('dismissable', false),
+      ...args,
     }}
   />
 );
-
-ExampleNotificationBanner.storyName = 'example NotificationBanner';
+ExampleNotificationBanner.args = {
+  content: 'CONTENT',
+  label: 'Label',
+  name: 'name',
+  color: 'blue',
+  dismissable: false,
+};
+ExampleNotificationBanner.storyName = 'Default';

package/components/Search/Search.stories.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import Search from './index';
-import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'Search',
   component: Search,
-  decorators: [withKnobs],
 };
 
 export const ExampleSearch = () => (