@innovaccer/design-system 2.7.0 → 2.9.0-0

package/core/components/organisms/verticalNav/MenuItem.tsx

@@ -13,10 +13,12 @@ export interface MenuItemProps extends BaseProps {
   isChildren?: boolean;
   isChildrenVisible?: boolean;
   onClick?: (menu: Menu) => void;
+  customItemRenderer?: (props: MenuItemProps) => JSX.Element;
 }
 
 export const MenuItem = (props: MenuItemProps) => {
-  const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick } = props;
+  const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick, customItemRenderer } =
+    props;
 
   const baseProps = extractBaseProps(props);
 
@@ -70,7 +72,9 @@ export const MenuItem = (props: MenuItemProps) => {
 
   if (!expanded && !menu.icon) return null;
 
-  return (
+  return customItemRenderer ? (
+    customItemRenderer(props)
+  ) : (
     // TODO(a11y)
     // eslint-disable-next-line
     <div className={ItemClass} {...baseProps} onClick={onClickHandler}>

package/core/components/organisms/verticalNav/VerticalNav.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Text } from '@/index';
-import { MenuItem } from './MenuItem';
+import { MenuItem, MenuItemProps } from './MenuItem';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { getMenu, isMenuActive, ActiveMenu, Menu } from '@/utils/navigationHelper';
 
@@ -54,6 +54,10 @@ export interface VerticalNavProps extends BaseProps {
    * Only one SubMenu visible at a time**(applicable only for type: `vertical`)**
    */
   autoCollapse: boolean;
+  /**
+   * Option to pass Custom Item Renderer
+   */
+  customItemRenderer?: (props: MenuItemProps) => JSX.Element;
 }
 
 /**
@@ -61,7 +65,7 @@ export interface VerticalNavProps extends BaseProps {
  */
 
 export const VerticalNav = (props: VerticalNavProps) => {
-  const { menus, active, onClick, expanded, rounded, autoCollapse, className } = props;
+  const { menus, active, onClick, expanded, rounded, autoCollapse, className, customItemRenderer } = props;
 
   const [menuState, setMenuState] = React.useState<Record<string, boolean>>({});
   const baseProps = extractBaseProps(props);
@@ -137,6 +141,7 @@ export const VerticalNav = (props: VerticalNavProps) => {
             rounded={rounded}
             isChildrenVisible={isChildrenVisible}
             onClick={onClickHandler}
+            customItemRenderer={customItemRenderer}
           />
           {menuState[menu.name] &&
             menu.subMenu &&
@@ -151,6 +156,7 @@ export const VerticalNav = (props: VerticalNavProps) => {
                   rounded={rounded}
                   onClick={onClickHandler}
                   isActive={isMenuActive(menus, subMenu, active)}
+                  customItemRenderer={customItemRenderer}
                 />
               );
             })}

package/core/components/organisms/verticalNav/__stories__/CustomItemsRenderer.story.tsx

@@ -0,0 +1,238 @@
+import * as React from 'react';
+import { VerticalNav, Icon, Tooltip, Text } from '@/index';
+import { MenuItemProps } from '../MenuItem';
+
+export const CustomItemsRenderer = () => {
+  const data = [
+    {
+      name: 'clinical_data',
+      label: 'Clinical Data',
+      icon: 'assignment_ind',
+    },
+    {
+      name: 'care_management',
+      label: 'Care Management',
+      icon: 'forum',
+      subMenu: [
+        {
+          name: 'care_management.timeline',
+          label: 'Timeline',
+          icon: 'people',
+        },
+        {
+          name: 'care_management.care_protocol',
+          label: 'Care Protocol',
+          icon: 'fact_check',
+        },
+        {
+          name: 'care_management.assessments',
+          label: 'Assessments',
+          icon: 'assessment',
+        },
+        {
+          name: 'care_management.tasks',
+          label: 'Tasks',
+          icon: 'alarm',
+        },
+      ],
+    },
+    {
+      name: 'episodes',
+      label: 'Episodes',
+      icon: 'airline_seat_flat_angled',
+    },
+    {
+      name: 'risk',
+      label: 'Risk',
+      icon: 'favorite',
+    },
+    {
+      name: 'preventive_health',
+      label: 'Preventive Health',
+      icon: 'beenhere',
+    },
+    {
+      name: 'profile',
+      label: 'Profile',
+      icon: 'receipt',
+    },
+    {
+      name: 'claims',
+      label: 'Claims',
+      icon: 'account_circle',
+    },
+    {
+      name: 'manual_entry',
+      label: 'Manual Entry',
+      icon: 'edit',
+    },
+    {
+      name: 'patient_notes',
+      label: 'Patient Notes',
+      icon: 'note_add',
+    },
+    {
+      name: 'documents',
+      label: 'Documents',
+      icon: 'assignment',
+    },
+  ];
+
+  const [active, setActive] = React.useState({
+    name: 'care_management.timeline',
+  });
+
+  const customItemRenderer = (props: MenuItemProps) => {
+    const { menu, expanded, isChildren } = props;
+    return (
+      <div className={`p-5 d-flex align-items-center cursor-pointer ${isChildren ? 'ml-7' : ''}`}>
+        {menu.icon && (
+          <Icon data-test="DesignSystem-VerticalNav--Icon" className={expanded ? 'mr-4' : ''} name={menu.icon} />
+        )}
+        <Tooltip tooltip={menu.label}>
+          <Text weight="medium">{menu.label}</Text>
+        </Tooltip>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ height: '90vh', background: 'var(--secondary-lightest)' }}>
+      <VerticalNav
+        menus={data}
+        expanded={true}
+        active={active}
+        onClick={setActive}
+        customItemRenderer={customItemRenderer}
+      />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const data = [
+    {
+      name: 'clinical_data',
+      label: 'Clinical Data',
+      icon: 'assignment_ind'
+    },
+    {
+      name: 'care_management',
+      label: 'Care Management',
+      icon: 'forum',
+      subMenu: [
+        {
+          name: 'care_management.timeline',
+          label: 'Timeline',
+          icon: 'people'
+        },
+        {
+          name: 'care_management.care_protocol',
+          label: 'Care Protocol',
+          icon: 'fact_check'
+        },
+        {
+          name: 'care_management.assessments',
+          label: 'Assessments',
+          icon: 'assessment'
+        },
+        {
+          name: 'care_management.tasks',
+          label: 'Tasks',
+          icon: 'alarm'
+        },
+      ]
+    },
+    {
+      name: 'episodes',
+      label: 'Episodes',
+      icon: 'airline_seat_flat_angled'
+    },
+    {
+      name: 'risk',
+      label: 'Risk',
+      icon: 'favorite'
+    },
+    {
+      name: 'preventive_health',
+      label: 'Preventive Health',
+      icon: 'beenhere'
+    },
+    {
+      name: 'profile',
+      label: 'Profile',
+      icon: 'receipt'
+    },
+    {
+      name: 'claims',
+      label: 'Claims',
+      icon: 'account_circle'
+    },
+    {
+      name: 'manual_entry',
+      label: 'Manual Entry',
+      icon: 'edit'
+    },
+    {
+      name: 'patient_notes',
+      label: 'Patient Notes',
+      icon: 'note_add'
+    },
+    {
+      name: 'documents',
+      label: 'Documents',
+      icon: 'assignment'
+    },
+  ];
+
+  const [active, setActive] = React.useState({
+    name: 'care_management.timeline'
+  });
+
+  const customItemRenderer = (props) => {
+    const {menu, onClick, expanded, isChildren} = props;
+    return ( 
+      <div 
+        onClick={() => onClick(menu)}
+        className={\`p-5 d-flex align-items-center cursor-pointer \${isChildren ? 'ml-7' : ''}\`}
+      >
+        {menu.icon && 
+            <Icon
+              data-test="DesignSystem-VerticalNav--Icon"
+              className={expanded ? 'mr-4' : ''}
+              name={menu.icon}
+            />
+        }
+        <Tooltip tooltip={menu.label}>
+          <Text weight="medium">
+            {menu.label}
+          </Text>
+        </Tooltip>
+      </div>
+    );
+  };
+  
+  return (
+    <div style={{ height: '90vh', background: 'var(--secondary-lightest)' }}>
+      <VerticalNav
+        menus={data}
+        expanded={true}
+        active={active}
+        onClick={setActive}
+        customItemRenderer={customItemRenderer}
+      />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/VerticalNav/Custom Items Renderer',
+  component: VerticalNav,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`TS renders children 1`] = `
     </span>
   </div>
   <div
-    class="Chip Chip--input"
+    class="Chip-wrapper Chip Chip--input"
     data-test="DesignSystem-Chip--GenericChip"
   >
     <span
@@ -728,7 +728,7 @@ exports[`TS renders children 1`] = `
       data-test="DesignSystem-Select--TodaysDate-wrapper"
     >
       <div
-        class="Chip Chip--action"
+        class="Chip-wrapper Chip Chip--action"
         data-test="DesignSystem-Chip--GenericChip"
       >
         <span
@@ -743,6 +743,7 @@ exports[`TS renders children 1`] = `
   <div
     class="Dropdown"
   >
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger w-100"
     >
@@ -787,6 +788,7 @@ exports[`TS renders children 1`] = `
           class="Dropdown d-none"
           data-test="DesignSystem-EditableDropdown--Dropdown"
         >
+          <style />
           <div
             class="OutsideClick PopperWrapper-trigger w-100"
           >
@@ -1530,6 +1532,7 @@ exports[`TS renders children 1`] = `
       </div>
     </div>
   </div>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -1744,6 +1747,7 @@ exports[`TS renders children 1`] = `
       stroke-width="8"
     />
   </svg>
+  <style />
   <div
     class="OutsideClick PopperWrapper-trigger"
   >
@@ -2619,7 +2623,168 @@ exports[`TS renders children 1`] = `
         />
       </div>
       <div
-        style="flex-shrink: 0; height: 920px;"
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        class="VS-item Grid-rowWrapper"
+      >
+        <div
+          class="Grid-row Grid-row--body"
+        />
+      </div>
+      <div
+        style="flex-shrink: 0; height: 0px;"
       />
     </div>
   </div>