Shared: Components: Navigation: add tariff bar prop, wrapper

packages/shared/components/navigation/Navigation.styled.ts

@@ -640,6 +640,23 @@ const StyledBox = styled.div<{
 
 StyledBox.defaultProps = { theme: Base };
 
+const StyledTariffWrapper = styled.div`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: nowrap;
+  ${({ theme }) =>
+    theme.interfaceDirection === "rtl"
+      ? css`
+          justify-content: left;
+          margin-right: auto;
+        `
+      : css`
+          justify-content: right;
+          margin-left: auto;
+        `}
+`;
+
 export {
   StyledContainer,
   StyledInfoPanelToggleColorThemeWrapper,
@@ -654,4 +671,5 @@ export {
   StyledText,
   StyledItem,
   StyledBox,
+  StyledTariffWrapper,
 };

packages/shared/components/navigation/Navigation.tsx

@@ -14,7 +14,7 @@ import TrashWarning from "./sub-components/TrashWarning";
 import NavigationLogo from "./sub-components/LogoBlock";
 import DropBox from "./sub-components/DropBox";
 
-import { StyledContainer } from "./Navigation.styled";
+import { StyledContainer, StyledTariffWrapper } from "./Navigation.styled";
 import { INavigationProps } from "./Navigation.types";
 
 const Navigation = ({
@@ -52,6 +52,7 @@ const Navigation = ({
   titleIcon,
   currentDeviceType,
   rootRoomTitle,
+  tariffBar,
 
   ...rest
 }: INavigationProps) => {
@@ -257,6 +258,8 @@ const Navigation = ({
           {isDesktop && isTrashFolder && !isEmptyPage && (
             <TrashWarning title={titles.trashWarning} />
           )}
+          <StyledTariffWrapper>
+            {tariffBar && tariffBar}
             {infoPanelIsVisible && !hideInfoPanel && (
               <ToggleInfoPanelButton
                 id="info-panel-toggle--open"
@@ -266,6 +269,7 @@ const Navigation = ({
                 titles={titles}
               />
             )}
+          </StyledTariffWrapper>
         </>
       )}
     </Consumer>

packages/shared/components/navigation/Navigation.types.ts

@@ -160,4 +160,5 @@ export interface INavigationProps {
   titleIcon: string;
   currentDeviceType: DeviceType;
   rootRoomTitle: string;
+  tariffBar: React.ReactNode;
 }