@innovaccer/design-system 2.13.4-6 → 2.13.4-7

package/core/components/atoms/button/Button.tsx

@@ -165,7 +165,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
                     ? 'disabled'
                     : appearance === 'basic' || appearance === 'transparent'
                     ? selected
-                      ? 'info'
+                      ? 'primary_dark'
                       : 'default'
                     : 'white'
                 }

package/core/components/atoms/progressBar/__stories__/WithAnimation.story.jsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import ProgressBar from '../ProgressBar';
+
+const customCode = `() => {
+  const [progress, setProgress] = React.useState(0);
+  
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress(progress + 25);
+    }, 1000);
+  });
+
+  return <ProgressBar value={progress} max={100} />;
+}`;
+
+export const withAnimation = () => <></>;
+
+export default {
+  title: 'Components/ProgressBar/With Animation',
+  component: ProgressBar,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'ProgressBar',
+      },
+    },
+  },
+};

package/core/components/atoms/progressRing/__stories__/WithAnimation.story.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import ProgressBar from '../ProgressRing';
+
+const customCode = `() => {
+  const [progress, setProgress] = React.useState(0);
+  
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress(progress + 25);
+    }, 1000);
+  });
+
+  return <ProgressRing value={progress} max={100} />;
+}`;
+
+export const withAnimation = () => <></>;
+
+export default {
+  title: 'Components/ProgressRing/With Animation',
+  component: ProgressBar,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'ProgressRing',
+      },
+    },
+  },
+};

package/core/components/organisms/horizontalNav/HorizontalNav.tsx

@@ -3,7 +3,13 @@ import classNames from 'classnames';
 import { Text, Icon, Pills } from '@/index';
 import { VerticalNavProps } from '@/index.type';
 import { extractBaseProps, BaseProps } from '@/utils/types';
-import { getTextAppearance, getIconAppearance, getPillsAppearance, isMenuActive, Menu } from '@/utils/navigationHelper';
+import {
+  getTextColor,
+  getHorizontalIconAppearance,
+  getPillsAppearance,
+  isMenuActive,
+  Menu,
+} from '@/utils/navigationHelper';
 
 export type HorizontalNavProps = BaseProps & Pick<VerticalNavProps, 'menus' | 'active' | 'onClick'>;
 export type Align = 'left' | 'center';
@@ -50,7 +56,7 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
         <Icon
           className="mr-3"
           name={menu.icon}
-          appearance={getIconAppearance(isActive, menu.disabled)}
+          appearance={getHorizontalIconAppearance(isActive, menu.disabled)}
           data-test="DesignSystem-HorizontalNav--Icon"
         />
       );
@@ -64,6 +70,7 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
 
     const menuClasses = classNames({
       'HorizontalNav-menu': true,
+      'HorizontalNav-menu--default': !isActive,
       ['HorizontalNav-menu--active']: isActive,
       ['HorizontalNav-menu--disabled']: menu.disabled,
     });
@@ -71,10 +78,10 @@ export const HorizontalNav = (props: HorizontalNavProps) => {
     return (
       // TODO(a11y)
       // eslint-disable-next-line
-      <div data-test="DesignSystem-HorizontalNav" key={index} className={menuClasses} onClick={onClickHandler(menu)}>
+      <div tabIndex={0} data-test="DesignSystem-HorizontalNav" key={index} className={menuClasses} onClick={onClickHandler(menu)}>
         {renderIcon(menu, isActive)}
         <Text
-          appearance={getTextAppearance(isActive, menu.disabled)}
+          color={getTextColor(isActive, menu.disabled)}
           data-test="DesignSystem-HorizontalNav--Text"
           className="HorizontalNav-menuText"
         >

package/core/components/organisms/horizontalNav/__stories__/default.story.jsx

@@ -24,7 +24,7 @@ export const defaultHorizontalNavigation = () => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav className="w-100 justify-content-center" menus={data} active={active} onClick={onClickHandler} />
     </div>
   );
@@ -52,7 +52,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav
         className="w-100 justify-content-center"
         menus={data}

package/core/components/organisms/horizontalNav/__stories__/index.story.jsx

@@ -32,15 +32,8 @@ export const all = () => {
   };
 
   return (
-    <div style={{ height: '200px', background: 'var(--secondary-lightest)' }}>
-      <div
-        style={{
-          background: 'white',
-          padding: 'var(--spacing-m)',
-          borderTop: 'var(--border)',
-          borderBottom: 'var(--border)',
-        }}
-      >
+    <div className="bg-secondary-lightest" style={{ height: '200px' }}>
+      <div className="bg-light border-top border-bottom p-3">
         <HorizontalNav className="w-100 justify-content-center" menus={data} active={active} onClick={onClickHandler} />
       </div>
     </div>
@@ -76,15 +69,8 @@ const customCode = `() => {
   };
 
   return (
-    <div style={{ height: '200px', background: 'var(--secondary-lightest)' }}>
-      <div
-        style={{
-            background: 'white',
-            padding: 'var(--spacing-m)',
-            borderTop: 'var(--border)',
-            borderBottom: 'var(--border)'
-        }}
-      >
+    <div className="bg-secondary-lightest" style={{ height: '200px' }}>
+      <div className="bg-light border-top border-bottom p-3">
         <HorizontalNav
           className="w-100 justify-content-center"
           menus={data}

package/core/components/organisms/horizontalNav/__stories__/withCount.story.jsx

@@ -31,7 +31,7 @@ export const horizontalNavigationWithCount = () => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav className="w-100 justify-content-center" menus={data} active={active} onClick={onClickHandler} />
     </div>
   );
@@ -66,7 +66,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav
         className="w-100 justify-content-center"
         menus={data}

package/core/components/organisms/horizontalNav/__stories__/withIcon.story.jsx

@@ -31,7 +31,7 @@ export const horizontalNavigationWithIcon = () => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav className="w-100 justify-content-center" menus={data} active={active} onClick={onClickHandler} />
     </div>
   );
@@ -66,7 +66,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="d-flex align-items-center py-6" style={{ background: 'var(--secondary-lightest)' }}>
+    <div className="d-flex align-items-center py-6 bg-secondary-lightest">
       <HorizontalNav
         className="w-100 justify-content-center"
         menus={data}

package/core/components/organisms/horizontalNav/__tests__/HorizontalNav.test.tsx

@@ -122,7 +122,7 @@ describe('Horizontal Navigation component with prop: menus', () => {
   it('renders menus with disabled menu', () => {
     const { getAllByTestId } = render(<HorizontalNav menus={menus} />);
     const disabledMenu = getAllByTestId('DesignSystem-HorizontalNav--Text')[disabledIndex];
-    expect(disabledMenu).toHaveClass('Text--disabled');
+    expect(disabledMenu).toHaveClass('color-inverse-lightest');
   });
 
   it('renders iconMenus with disabled menu', () => {
@@ -144,13 +144,13 @@ describe('Horizontal Navigation component active menu', () => {
   it('renders menus with active menu', () => {
     const { getAllByTestId } = render(<HorizontalNav menus={menus} active={active} />);
     const activeMenu = getAllByTestId('DesignSystem-HorizontalNav--Text')[activeIndex];
-    expect(activeMenu).toHaveClass('Text--link');
+    expect(activeMenu).toHaveClass('color-primary-dark');
   });
 
   it('renders iconMenus with active menu', () => {
     const { getAllByTestId } = render(<HorizontalNav menus={iconMenus} active={active} />);
     const activeMenu = getAllByTestId('DesignSystem-HorizontalNav--Icon')[activeIndex];
-    expect(activeMenu).toHaveClass('Icon--info');
+    expect(activeMenu).toHaveClass('Icon--primaryDark');
   });
 
   it('renders countMenus with active menu', () => {
@@ -162,7 +162,7 @@ describe('Horizontal Navigation component active menu', () => {
   it('renders active menu with link', () => {
     const { getAllByTestId } = render(<HorizontalNav menus={menus} active={{ link: '/patient360' }} />);
     const activeMenu = getAllByTestId('DesignSystem-HorizontalNav--Text')[activeIndex];
-    expect(activeMenu).toHaveClass('Text--link');
+    expect(activeMenu).toHaveClass('color-primary-dark');
   });
 });
 
@@ -177,3 +177,23 @@ describe('Horizontal Navigation component prop: onClick', () => {
     expect(onClick).toHaveBeenCalledWith(menus[stepClicked]);
   });
 });
+
+describe('Horizontal Navigation component css classes', () => {
+  it('renders text with disabled state ', () => {
+    const { getAllByTestId } = render(<HorizontalNav menus={menus} />);
+    const disabledMenu = getAllByTestId('DesignSystem-HorizontalNav--Text')[2];
+    expect(disabledMenu).toHaveClass('color-inverse-lightest');
+  });
+
+  it('renders text with default state ', () => {
+    const { getAllByTestId } = render(<HorizontalNav menus={menus} />);
+    const defaultMenu = getAllByTestId('DesignSystem-HorizontalNav--Text')[0];
+    expect(defaultMenu).toHaveClass('color-inverse');
+  });
+
+  it('renders text with active state ', () => {
+    const { getAllByTestId } = render(<HorizontalNav menus={menus} active={{ link: '/patient360' }} />);
+    const activeMenu = getAllByTestId('DesignSystem-HorizontalNav--Text')[0];
+    expect(activeMenu).toHaveClass('color-primary-dark');
+  });
+});

package/core/components/organisms/horizontalNav/__tests__/__snapshots__/HorizontalNav.test.tsx.snap

@@ -11,9 +11,10 @@ exports[`Horizontal Navigation component
       <div
         class="HorizontalNav-menu HorizontalNav-menu--active"
         data-test="DesignSystem-HorizontalNav"
+        tabindex="0"
       >
         <i
-          class="material-icons material-icons-round Icon Icon--info mr-3"
+          class="material-icons material-icons-round Icon Icon--primaryDark mr-3"
           data-test="DesignSystem-HorizontalNav--Icon"
           role="button"
           style="font-size: 16px; width: 16px;"
@@ -21,15 +22,16 @@ exports[`Horizontal Navigation component
           events_round
         </i>
         <span
-          class="Text Text--link Text--regular HorizontalNav-menuText"
+          class="Text Text--regular color-primary-dark HorizontalNav-menuText"
           data-test="DesignSystem-HorizontalNav--Text"
         >
           Tab #1
         </span>
       </div>
       <div
-        class="HorizontalNav-menu"
+        class="HorizontalNav-menu HorizontalNav-menu--default"
         data-test="DesignSystem-HorizontalNav"
+        tabindex="0"
       >
         <span
           class="Pills Badge--secondary HorizontalNav-pills"
@@ -38,18 +40,19 @@ exports[`Horizontal Navigation component
           10
         </span>
         <span
-          class="Text Text--default Text--regular HorizontalNav-menuText"
+          class="Text Text--regular color-inverse HorizontalNav-menuText"
           data-test="DesignSystem-HorizontalNav--Text"
         >
           Tab #2
         </span>
       </div>
       <div
-        class="HorizontalNav-menu HorizontalNav-menu--disabled"
+        class="HorizontalNav-menu HorizontalNav-menu--default HorizontalNav-menu--disabled"
         data-test="DesignSystem-HorizontalNav"
+        tabindex="0"
       >
         <span
-          class="Text Text--disabled Text--regular HorizontalNav-menuText"
+          class="Text Text--regular color-inverse-lightest HorizontalNav-menuText"
           data-test="DesignSystem-HorizontalNav--Text"
         >
           Tab #3

package/core/components/organisms/navigation/__tests__/__snapshots__/Navigation.test.tsx.snap

@@ -14,8 +14,9 @@ Object {
           class="HorizontalNav"
         >
           <div
-            class="HorizontalNav-menu"
+            class="HorizontalNav-menu HorizontalNav-menu--default"
             data-test="DesignSystem-HorizontalNav"
+            tabindex="0"
           >
             <span
               class="Pills Badge--secondary HorizontalNav-pills"
@@ -24,15 +25,16 @@ Object {
               1
             </span>
             <span
-              class="Text Text--default Text--regular HorizontalNav-menuText"
+              class="Text Text--regular color-inverse HorizontalNav-menuText"
               data-test="DesignSystem-HorizontalNav--Text"
             >
               Tab #1
             </span>
           </div>
           <div
-            class="HorizontalNav-menu"
+            class="HorizontalNav-menu HorizontalNav-menu--default"
             data-test="DesignSystem-HorizontalNav"
+            tabindex="0"
           >
             <span
               class="Pills Badge--secondary HorizontalNav-pills"
@@ -41,15 +43,16 @@ Object {
               2
             </span>
             <span
-              class="Text Text--default Text--regular HorizontalNav-menuText"
+              class="Text Text--regular color-inverse HorizontalNav-menuText"
               data-test="DesignSystem-HorizontalNav--Text"
             >
               Tab #2
             </span>
           </div>
           <div
-            class="HorizontalNav-menu"
+            class="HorizontalNav-menu HorizontalNav-menu--default"
             data-test="DesignSystem-HorizontalNav"
+            tabindex="0"
           >
             <span
               class="Pills Badge--secondary HorizontalNav-pills"
@@ -58,7 +61,7 @@ Object {
               3
             </span>
             <span
-              class="Text Text--default Text--regular HorizontalNav-menuText"
+              class="Text Text--regular color-inverse HorizontalNav-menuText"
               data-test="DesignSystem-HorizontalNav--Text"
             >
               Tab #3
@@ -76,8 +79,9 @@ Object {
         class="HorizontalNav"
       >
         <div
-          class="HorizontalNav-menu"
+          class="HorizontalNav-menu HorizontalNav-menu--default"
           data-test="DesignSystem-HorizontalNav"
+          tabindex="0"
         >
           <span
             class="Pills Badge--secondary HorizontalNav-pills"
@@ -86,15 +90,16 @@ Object {
             1
           </span>
           <span
-            class="Text Text--default Text--regular HorizontalNav-menuText"
+            class="Text Text--regular color-inverse HorizontalNav-menuText"
             data-test="DesignSystem-HorizontalNav--Text"
           >
             Tab #1
           </span>
         </div>
         <div
-          class="HorizontalNav-menu"
+          class="HorizontalNav-menu HorizontalNav-menu--default"
           data-test="DesignSystem-HorizontalNav"
+          tabindex="0"
         >
           <span
             class="Pills Badge--secondary HorizontalNav-pills"
@@ -103,15 +108,16 @@ Object {
             2
           </span>
           <span
-            class="Text Text--default Text--regular HorizontalNav-menuText"
+            class="Text Text--regular color-inverse HorizontalNav-menuText"
             data-test="DesignSystem-HorizontalNav--Text"
           >
             Tab #2
           </span>
         </div>
         <div
-          class="HorizontalNav-menu"
+          class="HorizontalNav-menu HorizontalNav-menu--default"
           data-test="DesignSystem-HorizontalNav"
+          tabindex="0"
         >
           <span
             class="Pills Badge--secondary HorizontalNav-pills"
@@ -120,7 +126,7 @@ Object {
             3
           </span>
           <span
-            class="Text Text--default Text--regular HorizontalNav-menuText"
+            class="Text Text--regular color-inverse HorizontalNav-menuText"
             data-test="DesignSystem-HorizontalNav--Text"
           >
             Tab #3
@@ -197,8 +203,9 @@ Object {
           class="HorizontalNav"
         >
           <div
-            class="HorizontalNav-menu"
+            class="HorizontalNav-menu HorizontalNav-menu--default"
             data-test="DesignSystem-HorizontalNav"
+            tabindex="0"
           >
             <span
               class="Pills Badge--secondary HorizontalNav-pills"
@@ -207,15 +214,16 @@ Object {
               1
             </span>
             <span
-              class="Text Text--default Text--regular HorizontalNav-menuText"
+              class="Text Text--regular color-inverse HorizontalNav-menuText"
               data-test="DesignSystem-HorizontalNav--Text"
             >
               Tab #1
             </span>
           </div>
           <div
-            class="HorizontalNav-menu"
+            class="HorizontalNav-menu HorizontalNav-menu--default"
             data-test="DesignSystem-HorizontalNav"
+            tabindex="0"
           >
             <span
               class="Pills Badge--secondary HorizontalNav-pills"
@@ -224,15 +232,16 @@ Object {
               2
             </span>
             <span
-              class="Text Text--default Text--regular HorizontalNav-menuText"
+              class="Text Text--regular color-inverse HorizontalNav-menuText"
               data-test="DesignSystem-HorizontalNav--Text"
             >
               Tab #2
             </span>
           </div>
           <div
-            class="HorizontalNav-menu"
+            class="HorizontalNav-menu HorizontalNav-menu--default"
             data-test="DesignSystem-HorizontalNav"
+            tabindex="0"
           >
             <span
               class="Pills Badge--secondary HorizontalNav-pills"
@@ -241,7 +250,7 @@ Object {
               3
             </span>
             <span
-              class="Text Text--default Text--regular HorizontalNav-menuText"
+              class="Text Text--regular color-inverse HorizontalNav-menuText"
               data-test="DesignSystem-HorizontalNav--Text"
             >
               Tab #3
@@ -259,8 +268,9 @@ Object {
         class="HorizontalNav"
       >
         <div
-          class="HorizontalNav-menu"
+          class="HorizontalNav-menu HorizontalNav-menu--default"
           data-test="DesignSystem-HorizontalNav"
+          tabindex="0"
         >
           <span
             class="Pills Badge--secondary HorizontalNav-pills"
@@ -269,15 +279,16 @@ Object {
             1
           </span>
           <span
-            class="Text Text--default Text--regular HorizontalNav-menuText"
+            class="Text Text--regular color-inverse HorizontalNav-menuText"
             data-test="DesignSystem-HorizontalNav--Text"
           >
             Tab #1
           </span>
         </div>
         <div
-          class="HorizontalNav-menu"
+          class="HorizontalNav-menu HorizontalNav-menu--default"
           data-test="DesignSystem-HorizontalNav"
+          tabindex="0"
         >
           <span
             class="Pills Badge--secondary HorizontalNav-pills"
@@ -286,15 +297,16 @@ Object {
             2
           </span>
           <span
-            class="Text Text--default Text--regular HorizontalNav-menuText"
+            class="Text Text--regular color-inverse HorizontalNav-menuText"
             data-test="DesignSystem-HorizontalNav--Text"
           >
             Tab #2
           </span>
         </div>
         <div
-          class="HorizontalNav-menu"
+          class="HorizontalNav-menu HorizontalNav-menu--default"
           data-test="DesignSystem-HorizontalNav"
+          tabindex="0"
         >
           <span
             class="Pills Badge--secondary HorizontalNav-pills"
@@ -303,7 +315,7 @@ Object {
             3
           </span>
           <span
-            class="Text Text--default Text--regular HorizontalNav-menuText"
+            class="Text Text--regular color-inverse HorizontalNav-menuText"
             data-test="DesignSystem-HorizontalNav--Text"
           >
             Tab #3

package/core/components/organisms/table/__stories__/Filtering.story.jsx

@@ -364,7 +364,7 @@ import './style.css';
         searchTerm: undefined,
       };
 
-      this.pageSize = 3;
+      this.pageSize = 5;
       this.searchDebounceDuration = 750;
       this.debounceUpdate = debounce(this.searchDebounceDuration, this.updateDataFn);
     }

package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.jsx

@@ -36,6 +36,28 @@ export const nestedTableWithNestedCards = () => {
       statusType: 'Done',
       className: 'Executed',
     },
+    {
+      firstName: 'Randy',
+      lastName: 'Boatwright',
+      lastRun: 'Yesterday 4:26 PM',
+      name: 'Risk Analysis',
+      type: 'Batch Execution',
+      status: 'Completed',
+      statusType: 'Done',
+      className: 'Executed',
+    },
+    {
+      firstName: 'Rolando',
+      lastName: 'Cyples',
+      lastRun: 'Yesterday 7:34 AM',
+      name: 'Quality',
+      type: 'Test Function',
+      status: 'Failed',
+      statusType: 'Error',
+      errorCode: 2204,
+      className: 'File not found',
+      errorMessage: 'Cannot fetch files',
+    },
   ];
 
   const schema = [
@@ -178,6 +200,28 @@ const customCode = `() => {
       statusType: "Done",
       className: "Executed",
     },
+    {
+      firstName: 'Randy',
+      lastName: 'Boatwright',
+      lastRun: 'Yesterday 4:26 PM',
+      name: 'Risk Analysis',
+      type: 'Batch Execution',
+      status: 'Completed',
+      statusType: 'Done',
+      className: 'Executed',
+    },
+    {
+      firstName: 'Rolando',
+      lastName: 'Cyples',
+      lastRun: 'Yesterday 7:34 AM',
+      name: 'Quality',
+      type: 'Test Function',
+      status: 'Failed',
+      statusType: 'Error',
+      errorCode: 2204,
+      className: 'File not found',
+      errorMessage: 'Cannot fetch files',
+    },
   ];
 
   const schema = [

package/core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx

@@ -23,6 +23,18 @@ export const tableAsDescriptionList = () => {
       email: 'daniellow02@yahoo.com',
       view: true,
     },
+    {
+      firstName: 'Randy',
+      lastName: 'Boatwright',
+      email: 'rboatwright3@arstechnica.com',
+      edit: true,
+    },
+    {
+      firstName: 'Rolando',
+      lastName: 'Cyples',
+      email: 'rcyples4@biglobe.ne.jp',
+      owner: true,
+    },
   ];
 
   const schema = [
@@ -126,6 +138,18 @@ const customCode = `() => {
       email: 'daniellow02@yahoo.com',
       view: true
     },
+    {
+      firstName: 'Randy',
+      lastName: 'Boatwright',
+      email: 'rboatwright3@arstechnica.com',
+      edit: true,
+    },
+    {
+      firstName: 'Rolando',
+      lastName: 'Cyples',
+      email: 'rcyples4@biglobe.ne.jp',
+      owner: true,
+    },
   ];
 
   const schema = [
@@ -212,7 +236,7 @@ export default {
     docs: {
       docPage: {
         customCode,
-        title: 'Table as Option List',
+        title: 'Table as Description List',
         props: {
           components: { AsyncTable, SyncTable },
           exclude: ['showHead'],