@innovaccer/design-system 2.13.3 → 2.13.4-2

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Text, Icon, Pills } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { getTextAppearance, getIconAppearance, getPillsAppearance, Menu } from '@/utils/navigationHelper';
-
+import Link from '@/components/atoms/_text';
 export interface MenuItemProps extends BaseProps {
   menu: Menu;
   isActive: boolean;
@@ -71,12 +71,17 @@ export const MenuItem = (props: MenuItemProps) => {
   const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick, customItemRenderer } =
     props;
 
-  const baseProps = extractBaseProps(props);
-
-  const onClickHandler = () => {
+  const onClickHandler = (ev: { preventDefault: () => void }) => {
+    ev.preventDefault();
     if (onClick) onClick(menu);
   };
 
+  const baseProps = {
+    onClick: onClickHandler,
+    href: menu.link,
+    ...extractBaseProps(props),
+  };
+
   const ItemClass = classNames({
     ['MenuItem']: true,
     ['MenuItem--vertical']: true,
@@ -115,7 +120,7 @@ export const MenuItem = (props: MenuItemProps) => {
   ) : (
     // TODO(a11y)
     // eslint-disable-next-line
-    <div className={ItemClass} {...baseProps} onClick={onClickHandler}>
+    <Link componentType="a" className={ItemClass} {...baseProps}>
       <div className="d-flex align-items-center overflow-hidden">
         {menu.icon && (
           <Icon
@@ -128,7 +133,7 @@ export const MenuItem = (props: MenuItemProps) => {
         {expanded && <MenuLabel label={menu.label} disabled={menu.disabled} isActive={isActive} />}
       </div>
       {expanded && renderSubMenu()}
-    </div>
+    </Link>
   );
 };
 

package/core/components/organisms/verticalNav/__stories__/CustomOptionsRenderer.story.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { VerticalNav, Icon, Tooltip, Text, Pills } from '@/index';
+import { VerticalNav, Icon } from '@/index';
 
 export const CustomOptionsRenderer = () => {
   const data = [
@@ -18,25 +18,25 @@ export const CustomOptionsRenderer = () => {
           name: 'care_management.timeline',
           label: 'Timeline',
           icon: 'people',
-          count: 10
+          count: 10,
         },
         {
           name: 'care_management.care_protocol',
           label: 'Care Protocol',
           icon: 'fact_check',
-          count: 10
+          count: 10,
         },
         {
           name: 'care_management.assessments',
           label: 'Assessments',
           icon: 'assessment',
-          count: 10
+          count: 10,
         },
         {
           name: 'care_management.tasks',
           label: 'Tasks',
           icon: 'alarm',
-          count: 10
+          count: 10,
         },
       ],
     },
@@ -44,7 +44,7 @@ export const CustomOptionsRenderer = () => {
       name: 'episodes',
       label: 'Episodes',
       icon: 'airline_seat_flat_angled',
-      count: 100
+      count: 100,
     },
     {
       name: 'risk',
@@ -88,9 +88,10 @@ export const CustomOptionsRenderer = () => {
   });
 
   const customItemRenderer = (props) => {
-    const {menu, onClick, hasSubmenu, expanded, isChildren, MenuIcon, MenuLabel, MenuPills} = props;
-    return ( 
-      <div 
+    const { menu, onClick, hasSubmenu, expanded, isChildren, MenuIcon, MenuLabel, MenuPills } = props;
+    return (
+      <div
+        aria-hidden="true"
         onClick={() => onClick(menu)}
         className={`p-5 d-flex align-items-center cursor-pointer ${isChildren ? 'ml-7' : ''}`}
       >

package/core/components/organisms/verticalNav/__stories__/CustomTrigger.story.jsx

@@ -6,45 +6,47 @@ import { Icon, VerticalNav, Heading } from '@/index';
 export const CustomTrigger = () => {
   const [expanded, setExpanded] = React.useState(false);
   const [active, setActive] = React.useState({
-    name: 'To-do\'s.Due',
+    name: "To-do's.Due",
   });
 
   const data = [
     {
-      name: 'To-do\'s',
-      label: 'To-do\'s',
+      name: "To-do's",
+      label: "To-do's",
       icon: 'assignment_ind',
       count: 31,
       subMenu: [
         {
-          name: 'To-do\'s.Due',
+          name: "To-do's.Due",
           label: 'Due',
-          count: 31
+          count: 31,
         },
         {
-          name: 'To-do\'s.Completed',
+          name: "To-do's.Completed",
           label: 'Completed',
-          count: 0
+          count: 0,
         },
       ],
     },
     {
       name: 'Received',
       label: 'Received',
-      count: 0
+      count: 0,
     },
     {
       name: 'Sent',
       label: 'Sent',
-      count: 5
+      count: 5,
     },
   ];
 
   return (
     <div>
-      <div className='d-flex align-items-center mb-3'>
-        <Icon name="menu" className="cursor-pointer" onClick={() => setExpanded(!expanded) }></Icon>
-        <Heading size='s' className="ml-4">My Worklist</Heading>
+      <div className="d-flex align-items-center mb-3">
+        <Icon name="menu" className="cursor-pointer" onClick={() => setExpanded(!expanded)}></Icon>
+        <Heading size="s" className="ml-4">
+          My Worklist
+        </Heading>
       </div>
       <Collapsible withTrigger={false} expanded={expanded} height="100vh">
         <VerticalNav menus={data} active={active} expanded={expanded} onClick={setActive} />

package/core/components/organisms/verticalNav/__stories__/FlatEdgedVerticalNav.story.jsx

@@ -7,7 +7,7 @@ export const flatEdgedVerticalNavigation = () => {
       name: 'home',
       label: 'Home',
       icon: 'home',
-      count: 10
+      count: 10,
     },
     {
       name: 'profile',
@@ -18,22 +18,22 @@ export const flatEdgedVerticalNavigation = () => {
         {
           name: 'profile.personal',
           label: 'Personal',
-          count: 5
+          count: 5,
         },
         {
           name: 'profile.are_team',
           label: 'Care Team',
-          count: 10
+          count: 10,
         },
         {
           name: 'profile.goals',
           label: 'Goals',
-          count: 5
+          count: 5,
         },
         {
           name: 'profile.care_plans',
           label: 'Care Plans',
-          count: 5
+          count: 5,
         },
       ],
     },

package/core/components/organisms/verticalNav/__stories__/LabelOverflowBehaviour.story.jsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { VerticalNav, Icon, Tooltip, Text } from '@/index';
+import { VerticalNav } from '@/index';
 
 export const LabelOverflowBehaviour = () => {
   const data = [
     {
       name: 'clinical_data',
       label: 'Clinical Data',
-      icon: 'assignment_ind'
+      icon: 'assignment_ind',
     },
     {
       name: 'care_management',
@@ -16,29 +16,29 @@ export const LabelOverflowBehaviour = () => {
         {
           name: 'care_management.timeline',
           label: 'Timeline',
-          icon: 'people'
+          icon: 'people',
         },
         {
           name: 'care_management.care_protocol',
           label: 'Care Protocol Management Guidelines',
-          icon: 'fact_check'
+          icon: 'fact_check',
         },
         {
           name: 'care_management.assessments',
           label: 'Assessments',
-          icon: 'assessment'
+          icon: 'assessment',
         },
-      ]
+      ],
     },
     {
       name: 'episodes',
       label: 'Episodes',
-      icon: 'airline_seat_flat_angled'
+      icon: 'airline_seat_flat_angled',
     },
     {
       name: 'preventive_health',
       label: 'Preventive Health Precautions Template',
-      icon: 'beenhere'
+      icon: 'beenhere',
     },
   ];
 
@@ -48,13 +48,7 @@ export const LabelOverflowBehaviour = () => {
 
   return (
     <div style={{ height: '90vh', background: 'var(--secondary-lightest)' }}>
-      <VerticalNav
-        menus={data}
-        expanded={true}
-        active={active}
-        onClick={setActive}
-        showTooltip={true}
-      />
+      <VerticalNav menus={data} expanded={true} active={active} onClick={setActive} showTooltip={true} />
     </div>
   );
 };

package/core/components/organisms/verticalNav/__tests__/__snapshots__/VerticalNav.test.tsx.snap

@@ -8,9 +8,10 @@ exports[`Vertical Navigation component
     <div
       class="VerticalNav"
     >
-      <div
+      <a
         class="MenuItem MenuItem--vertical MenuItem--collapsed"
         data-test="DesignSystem-VerticalNav--Item"
+        href="/patient360"
       >
         <div
           class="d-flex align-items-center overflow-hidden"
@@ -24,8 +25,8 @@ exports[`Vertical Navigation component
             assignment_ind_round
           </i>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--collapsed"
         data-test="DesignSystem-VerticalNav--Item"
       >
@@ -41,8 +42,8 @@ exports[`Vertical Navigation component
             forum_round
           </i>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--collapsed MenuItem--active"
       >
         <div
@@ -57,8 +58,8 @@ exports[`Vertical Navigation component
             assignment_ind_round
           </i>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--collapsed"
       >
         <div
@@ -73,8 +74,8 @@ exports[`Vertical Navigation component
             events_round
           </i>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--collapsed MenuItem--disabled"
         data-test="DesignSystem-VerticalNav--Item"
       >
@@ -90,8 +91,8 @@ exports[`Vertical Navigation component
             airline_seat_flat_angled_round
           </i>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--collapsed"
         data-test="DesignSystem-VerticalNav--Item"
       >
@@ -107,7 +108,7 @@ exports[`Vertical Navigation component
             favorite_round
           </i>
         </div>
-      </div>
+      </a>
     </div>
   </div>
 </body>
@@ -131,9 +132,10 @@ exports[`Vertical Navigation component
           Section 1
         </span>
       </div>
-      <div
+      <a
         class="MenuItem MenuItem--vertical MenuItem--expanded MenuItem--rounded"
         data-test="DesignSystem-VerticalNav--Item"
+        href="/patient360"
       >
         <div
           class="d-flex align-items-center overflow-hidden"
@@ -159,7 +161,7 @@ exports[`Vertical Navigation component
         >
           10
         </span>
-      </div>
+      </a>
       <div
         class="VerticalNav-section VerticalNav-section--border"
       >
@@ -170,7 +172,7 @@ exports[`Vertical Navigation component
           Section 2
         </span>
       </div>
-      <div
+      <a
         class="MenuItem MenuItem--vertical MenuItem--expanded MenuItem--rounded"
         data-test="DesignSystem-VerticalNav--Item"
       >
@@ -199,8 +201,8 @@ exports[`Vertical Navigation component
         >
           keyboard_arrow_up_round
         </i>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--expanded MenuItem--active MenuItem--subMenu MenuItem--rounded"
       >
         <div
@@ -221,8 +223,8 @@ exports[`Vertical Navigation component
             Timeline
           </span>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--expanded MenuItem--subMenu MenuItem--rounded"
       >
         <div
@@ -243,8 +245,8 @@ exports[`Vertical Navigation component
             Care Plans
           </span>
         </div>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--expanded MenuItem--disabled MenuItem--rounded"
         data-test="DesignSystem-VerticalNav--Item"
       >
@@ -272,8 +274,8 @@ exports[`Vertical Navigation component
         >
           99+
         </span>
-      </div>
-      <div
+      </a>
+      <a
         class="MenuItem MenuItem--vertical MenuItem--expanded MenuItem--rounded"
         data-test="DesignSystem-VerticalNav--Item"
       >
@@ -302,7 +304,7 @@ exports[`Vertical Navigation component
         >
           keyboard_arrow_down_round
         </i>
-      </div>
+      </a>
     </div>
   </div>
 </body>

package/core/index.tsx

@@ -65,6 +65,7 @@ export { Placeholder } from './components/molecules/placeholder';
 export { EditableInput } from './components/molecules/editableInput';
 export { EditableChipInput } from './components/molecules/editableChipInput';
 export { PlaceholderParagraph } from './components/atoms/placeholderParagraph';
+export { PlaceholderImage } from './components/atoms/placeholderImage';
 export { ProgressRing } from './components/atoms/progressRing';
 export { Stepper } from './components/molecules/stepper';
 export { DateRangePicker } from './components/organisms/dateRangePicker';

package/css/dist/index.css

@@ -2085,7 +2085,7 @@ body {
 }
 
 .Dropdown-inputWrapper {
-  border-bottom: var(--border);
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
 }
 
 .Dropdown-input {
@@ -2095,6 +2095,7 @@ body {
 .Dropdown-input,
 .Dropdown-input:focus-within {
   border: unset !important;
+  box-shadow: none !important;
 }
 
 .Dropdown-section {
@@ -2135,13 +2136,6 @@ body {
   box-sizing: border-box;
 }
 
-.Dropdown-items {
-  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
 .Option {
   display: flex;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
@@ -2168,6 +2162,10 @@ body {
   cursor: pointer;
 }
 
+.Option--active {
+  transition: var(--standard-productive-curve);
+}
+
 .Option-loading {
   pointer-events: none;
 }
@@ -3858,6 +3856,7 @@ body {
 .MetricInput:focus-within {
   background: var(--white);
   border-color: var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -5924,6 +5923,7 @@ body {
 }
 
 .MenuItem {
+  text-decoration: none;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -5971,6 +5971,7 @@ body {
 .MenuItem:hover {
   background-color: var(--secondary-light);
   box-shadow: var(--shadow-s);
+  text-decoration: none;
 }
 
 .MenuItem--active,