Add position config for menu popover (#605)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.6.1",
+  "version": "8.7.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/navigationBar/MenuItem.tsx

@@ -13,7 +13,7 @@ export function MenuItem({ caption, icon, children }: MenuItemProps) {
   const { expanded, expandedDone, popoverConfig } = useMenuBarConfiguration();
 
   if (children != null) {
-    const triggerEl = (
+    const triggerElement = (
       <FlexContainer justifyContent={expanded ? "start" : "center"}>
         <Trigger expanded={expandedDone} icon={icon} caption={caption} />
       </FlexContainer>
@@ -22,12 +22,10 @@ export function MenuItem({ caption, icon, children }: MenuItemProps) {
     return (
       <StyledTriggerWrapper>
         <ExtendedPopover
-          trigger={triggerEl}
-          position="start"
-          triggerOn={popoverConfig?.triggerOn}
-          closeOn={popoverConfig?.closeOn}
+          trigger={triggerElement}
           margin={{ left: 20 }}
           content={children}
+          {...popoverConfig}
         />
       </StyledTriggerWrapper>
     );

src/components/navigationBar/NavigationBar.stories.mdx

@@ -47,6 +47,7 @@ expandableConfig = {
 type PopoverConfig = {
   triggerOn: ExtendedPopoverAction,
   closeOn: ExtendedPopoverAction,
+  position: Position,
 };
 ```
 
@@ -56,6 +57,7 @@ type PopoverConfig = {
 popoverConfig = {
   triggerOn: "hover",
   closeOn: "hover",
+  position: "start",
 };
 ```
 

src/components/navigationBar/types.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Position } from "../../utils/position";
 import { ExtendedPopoverAction } from "../extendedPopover";
 import { PathName } from "../svgicon/paths";
 
@@ -26,9 +27,10 @@ export type MenuItemProps = {
 export type PopoverConfig = {
   triggerOn: ExtendedPopoverAction;
   closeOn: ExtendedPopoverAction;
+  position: Position;
 };
 
 export type ExpandableConfig = {
-  timingFunction?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out";
+  timingFunction?: "ease-in-out" | "ease-in" | "ease-out" | "ease" | "linear";
   duration?: string;
 };

src/components/navigationBar/utils/provider.tsx

@@ -8,12 +8,15 @@ type Props = {
   popoverConfig?: PopoverConfig;
 };
 
+const popoverConfigDefault = {
+  triggerOn: "hover",
+  closeOn: "hover",
+  position: "start",
+} as const;
+
 export function NavigationBarProvider({
   children,
-  popoverConfig = {
-    triggerOn: "hover",
-    closeOn: "hover",
-  },
+  popoverConfig = popoverConfigDefault,
 }: Props) {
   const { isOpen: expanded, toggle: setExpanded } = useDisclosure();
   const {