feat(verticalNav): add icon variations property in vertical nav compo…

…nent
innovaccer · Sep 15, 2023 · 828a706 · 828a706
1 parent b1b6424
commit 828a706
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/core/components/organisms/verticalNav/MenuItem.tsx b/core/components/organisms/verticalNav/MenuItem.tsx
@@ -125,7 +125,12 @@ export const MenuItem = (props: MenuItemProps) => {
     <Link componentType="a" className={ItemClass} {...baseProps}>
       <div className="d-flex align-items-center overflow-hidden">
         {menu.icon && (
-          <Icon data-test="DesignSystem-VerticalNav--Icon" className={expanded ? 'mr-4' : ''} name={menu.icon} />
+          <Icon
+            data-test="DesignSystem-VerticalNav--Icon"
+            className={expanded ? 'mr-4' : ''}
+            name={menu.icon}
+            variations={menu.iconVariations}
+          />
         )}
         {expanded && <MenuLabel label={menu.label} labelColor={itemColor} />}
       </div>

diff --git a/core/components/organisms/verticalNav/VerticalNav.tsx b/core/components/organisms/verticalNav/VerticalNav.tsx
@@ -19,6 +19,12 @@ export interface VerticalNavProps extends BaseProps {
    *    count?: number;
    *    subMenu?: Menu[];
    *    icon?: string;
+   *    iconVariations?: {
+   *      fill?: number;
+   *      weight?: number; Range: [100, 700]
+   *      grade?: number; Range: [-25, 200]
+   *      opticalSize?: number; Range: [20px, 48px]
+   *    };
    * };
    * </pre>
    *
@@ -32,6 +38,7 @@ export interface VerticalNavProps extends BaseProps {
    * | group | Section of menu | |
    * | subMenu | Menu submenus of type `Menu[]` | |
    * | icon | Menu icon | |
+   * | iconVariations | Set font-variation-settings CSS property for Icons ||
    */
   menus: Menu[];
   /**

diff --git a/core/utils/navigationHelper.tsx b/core/utils/navigationHelper.tsx
@@ -1,3 +1,5 @@
+import { FontVariationType } from '@/common.type';
+
 export type Menu = {
   name: string;
   label: string;
@@ -7,6 +9,7 @@ export type Menu = {
   count?: number;
   disabled?: boolean;
   subMenu?: Menu[];
+  iconVariations?: FontVariationType;
 };
 
 export type ActiveMenu = ({ name: string } | { link: string }) & Partial<Menu>;