refactor(ui): apply top-navigation mappings

Author: artyorsh

src/framework/ui/common/mapping.json

@@ -2061,17 +2061,11 @@
         }
       }
     },
-    "TopNavigationBar": {
+    "TopNavigation": {
       "meta": {
         "scope": "mobile",
         "parameters": {
-          "height": {
-            "type": "number"
-          },
-          "paddingTop": {
-            "type": "number"
-          },
-          "paddingBottom": {
+          "paddingVertical": {
             "type": "number"
           },
           "paddingHorizontal": {
@@ -2080,78 +2074,111 @@
           "backgroundColor": {
             "type": "string"
           },
-          "textAlign": {
-            "type": "string"
-          },
-          "titleColor": {
+          "titleTextAlign": {
             "type": "string"
           },
           "titleFontSize": {
             "type": "number"
           },
+          "titleLineHeight": {
+            "type": "number"
+          },
           "titleFontWeight": {
             "type": "string"
           },
-          "subtitleColor": {
+          "titleColor": {
+            "type": "string"
+          },
+          "subtitleTextAlign": {
             "type": "string"
           },
           "subtitleFontSize": {
             "type": "number"
           },
+          "subtitleLineHeight": {
+            "type": "number"
+          },
           "subtitleFontWeight": {
             "type": "string"
+          },
+          "subtitleColor": {
+            "type": "string"
+          },
+          "actionWidth": {
+            "type": "number"
+          },
+          "actionHeight": {
+            "type": "number"
+          },
+          "actionMarginHorizontal": {
+            "type": "number"
           }
         },
         "appearances": {
           "default": {
             "default": true
-          },
-          "titleCentered": {
-            "default": false
           }
         },
-        "variantGroups": {},
+        "variantGroups": {
+          "alignment": {
+            "start": {
+              "default": true
+            },
+            "center": {
+              "default": false
+            }
+          }
+        },
         "states": {}
       },
       "appearances": {
         "default": {
           "mapping": {
-            "height": 46,
-            "paddingTop": 4,
-            "paddingBottom": 12,
-            "paddingHorizontal": 16,
-            "backgroundColor": "blue-primary",
-            "titleColor": "text-primary-inverse",
-            "titleFontSize": 16,
+            "paddingVertical": 8,
+            "paddingHorizontal": 8,
+            "backgroundColor": "color-white",
+            "titleFontSize": 15,
+            "titleLineHeight": 24,
             "titleFontWeight": "600",
-            "subtitleColor": "text-primary-inverse",
-            "subtitleFontSize": 12,
+            "titleColor": "font-primary-color",
+            "subtitleFontSize": 11,
+            "subtitleLineHeight": 16,
             "subtitleFontWeight": "400",
-            "textAlign": "start"
-          }
-        },
-        "titleCentered": {
-          "mapping": {
-            "textAlign": "center"
+            "subtitleColor": "color-basic-600",
+            "actionWidth": 24,
+            "actionHeight": 24,
+            "actionMarginHorizontal": 8
+          },
+          "variantGroups": {
+            "alignment": {
+              "start": {
+                "titleTextAlign": "left",
+                "subtitleTextAlign": "left"
+              },
+              "center": {
+                "titleTextAlign": "center",
+                "subtitleTextAlign": "center"
+              }
+            }
           }
         }
       }
     },
-    "TopNavigationBarAction": {
+    "TopNavigationAction": {
       "meta": {
         "scope": "mobile",
         "parameters": {
-          "width": {
-            "type": "number"
-          },
-          "height": {
+          "iconWidth": {
             "type": "number"
           },
-          "marginRight": {
+          "iconHeight": {
             "type": "number"
           },
-          "tintColor": {
+          "iconTintColor": {
             "type": "string"
+          },
+          "marginHorizontal": {
+            "type": "number"
           }
         },
         "appearances": {
@@ -2160,15 +2187,23 @@
           }
         },
         "variantGroups": {},
-        "states": {}
+        "states": {
+          "active": {
+            "default": false,
+            "priority": 0,
+            "scope": "all"
+          }
+        }
       },
       "appearances": {
         "default": {
           "mapping": {
-            "width": 25,
-            "height": 25,
-            "marginRight": 8,
-            "tintColor": "white"
+            "iconTintColor": "font-primary-color",
+            "state": {
+              "active": {
+                "iconTintColor": "color-basic-900"
+              }
+            }
           }
         }
       }

src/framework/ui/index.ts

@@ -43,6 +43,15 @@ import {
   Modal,
   Props as ModalProps,
 } from './modal/modal.component';
+import {
+  OverflowMenu as OverflowMenuComponent,
+  Props as OverflowMenuProps,
+} from './overflowMenu/overflowMenu.component';
+import {
+  OverflowMenuItem as OverflowMenuItemComponent,
+  Props as OverflowMenuItemProps,
+  OverflowMenuItemType,
+} from './overflowMenu/overflowMenuItem.component';
 import {
   Popover as PopoverComponent,
   Props as PopoverProps,
@@ -80,13 +89,13 @@ import {
   Props as TooltipProps,
 } from './tooltip/tooltip.component';
 import {
-  TopNavigationBar as TopNavigationBarComponent,
+  TopNavigation as TopNavigationComponent,
   Props as TopNavigationBarProps,
-} from './topNavigationBar/topNavigationBar.component';
+} from './topNavigation/topNavigation.component';
 import {
-  TopNavigationBarAction as TopNavigationBarActionComponent,
+  TopNavigationAction as TopNavigationActionComponent,
   Props as TopNavigationBarActionProps,
-} from './topNavigationBar/topNavigationBarAction.component';
+} from './topNavigation/topNavigationAction.component';
 import {
   ViewPager,
   Props as ViewPagerProps,
@@ -100,14 +109,9 @@ import {
   Placements as PopoverPlacements,
 } from './popover/type';
 import {
-  OverflowMenuItem as OverflowMenuItemComponent,
-  Props as OverflowMenuItemProps,
-  OverflowMenuItemType,
-} from './overflowMenu/overflowMenuItem.component';
-import {
-  OverflowMenu as OverflowMenuComponent,
-  Props as OverflowMenuProps,
-} from './overflowMenu/overflowMenu.component';
+  TopNavigationAlignment,
+  TopNavigationAlignments,
+} from './topNavigation/type';
 
 const Avatar = styled<AvatarProps>(AvatarComponent);
 const BottomNavigationTab = styled<BottomNavigatorTabProps>(BottomNavigationTabComponent);
@@ -127,8 +131,8 @@ const TabBar = styled<TabBarProps>(TabBarComponent);
 const Text = styled<TextProps>(TextComponent);
 const Toggle = styled<ToggleProps>(ToggleComponent);
 const Tooltip = styled<TooltipProps>(TooltipComponent);
-const TopNavigationBar = styled<TopNavigationBarProps>(TopNavigationBarComponent);
-const TopNavigationBarAction = styled<TopNavigationBarActionProps>(TopNavigationBarActionComponent);
+const TopNavigation = styled<TopNavigationBarProps>(TopNavigationComponent);
+const TopNavigationAction = styled<TopNavigationBarActionProps>(TopNavigationActionComponent);
 const OverflowMenuItem = styled<OverflowMenuItemProps>(OverflowMenuItemComponent);
 const OverflowMenu = styled<OverflowMenuProps>(OverflowMenuComponent);
 
@@ -153,8 +157,8 @@ export {
   Text,
   Toggle,
   Tooltip,
-  TopNavigationBar,
-  TopNavigationBarAction,
+  TopNavigation,
+  TopNavigationAction,
   ViewPager,
   OverflowMenu,
   OverflowMenuItem,
@@ -193,5 +197,7 @@ export {
   ButtonAlignments,
   PopoverPlacement,
   PopoverPlacements,
+  TopNavigationAlignment,
+  TopNavigationAlignments,
   OverflowMenuItemType,
 };