@ganpatiinfo/gids-web-dom-reference 4.0.0 → 6.0.0

package/src/components/GidsTopNavigation/GidsTopNavigation.ts

@@ -16,6 +16,7 @@ import {
   GidsSegmentedControlDomProps,
 } from '../GidsSegmentedControl/GidsSegmentedControl.js';
 import { GidsLogoDom } from '../GidsLogo/GidsLogo.js';
+import { GidsDividerDom } from '../GidsDivider/GidsDivider.js';
 
 const { getGidsTopNavigationClassNames } = GidsTopNavigationWebUtils;
 
@@ -28,7 +29,8 @@ export interface GidsTopNavigationDomProps
       DomNodeOrString,
       string,
       string,
-      string
+      string,
+      DomChildren
     >,
     Pick<GidsSearchBarDomProps, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>,
     Pick<GidsSegmentedControlDomProps, 'onPress'> {
@@ -53,11 +55,21 @@ export const GidsTopNavigationDom = (
     width,
     tabItems = [],
     extraClasses,
+    invertedInDarkMode,
+    invertedInLightMode,
+    dividerVisible = true,
+    topNavigationAppearance = 'default',
     ...rest
   } = props;
 
   const topNavigation = document.createElement('nav');
-  topNavigation.className = getGidsTopNavigationClassNames(extraClasses);
+  topNavigation.className = getGidsTopNavigationClassNames(
+    { topNavigationAppearance },
+    extraClasses,
+  );
+
+  const topNavigationWrapper = document.createElement('div');
+  topNavigationWrapper.className = 'gids-top-navigation__wrapper';
 
   const leftContentContainer = document.createElement('div');
   leftContentContainer.className = 'gids-top-navigation__left-content';
@@ -74,10 +86,12 @@ export const GidsTopNavigationDom = (
           alt: 'logo-img',
           href: href && href !== '' ? href : '/',
           clickable,
+          invertedInDarkMode,
+          invertedInLightMode,
         }),
       );
     }
-    topNavigation.appendChild(leftContentContainer);
+    topNavigationWrapper.appendChild(leftContentContainer);
   }
 
   const middleContentContainer = document.createElement('div');
@@ -97,7 +111,7 @@ export const GidsTopNavigationDom = (
         }),
       );
     }
-    topNavigation.appendChild(middleContentContainer);
+    topNavigationWrapper.appendChild(middleContentContainer);
   }
 
   const rightContentContainer = document.createElement('div');
@@ -116,7 +130,16 @@ export const GidsTopNavigationDom = (
         }),
       );
     }
-    topNavigation.appendChild(rightContentContainer);
+    topNavigationWrapper.appendChild(rightContentContainer);
+  }
+
+  topNavigation.appendChild(topNavigationWrapper);
+
+  if (dividerVisible) {
+    const dividerWrapper = document.createElement('div');
+    dividerWrapper.className = 'gids-top-navigation__divider-wrapper';
+    dividerWrapper.appendChild(GidsDividerDom({ orientation: 'horizontal' }));
+    topNavigation.appendChild(dividerWrapper);
   }
 
   return topNavigation;

package/src/index.ts

@@ -59,6 +59,11 @@ export * from './components/GidsOverlayProvider/GidsOverlayProvider.js';
 export * from './components/GidsSnackbar/GidsSnackbar.js';
 export * from './components/_GidsNotificationContainer/GidsNotificationContainer.js';
 export * from './components/GidsNotification/GidsNotification.js';
+export * from './components/GidsSideMenuItem/GidsSideMenuItem.js';
+export * from './components/GidsScrim/GidsScrim.js';
+export * from './components/GidsSideMenuHeader/GidsSideMenuHeader.js';
+export * from './components/GidsSideMenu/GidsSideMenu.js';
+export * from './components/GidsSideNavigation/GidsSideNavigation.js';
 
 /**
  * Utilities