From 4cd811861e54d2bbce65429c6b2580bacd57a9b0 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 18:01:29 +0300 Subject: [PATCH] Shared: Components: Navigation: add tariff bar prop, wrapper --- .../navigation/Navigation.styled.ts | 130 ++++++++++-------- .../components/navigation/Navigation.tsx | 24 ++-- .../components/navigation/Navigation.types.ts | 1 + 3 files changed, 89 insertions(+), 66 deletions(-) diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts index 974c8fadfd..b15e14f971 100644 --- a/packages/shared/components/navigation/Navigation.styled.ts +++ b/packages/shared/components/navigation/Navigation.styled.ts @@ -48,11 +48,11 @@ const StyledContainer = styled.div<{ display: flex; height: 24px; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} @@ -65,12 +65,12 @@ const StyledContainer = styled.div<{ .header_separator { display: ${({ isRootFolder }) => (isRootFolder ? "block" : "none")}; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` border-right: 1px solid #dfe2e3; margin: 0 15px 0 0; ` - : css` + : css` border-left: 1px solid #dfe2e3; margin: 0 0 0 15px; `} @@ -125,7 +125,7 @@ const StyledContainer = styled.div<{ svg { ${({ theme }) => - theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`} + theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`} } } @@ -144,12 +144,12 @@ const StyledContainer = styled.div<{ .navigation-header-separator { display: block; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` padding-right: 16px; border-left: ${`1px solid ${props.theme.navigation.icon.stroke}`}; ` - : css` + : css` padding-left: 16px; border-right: ${`1px solid ${props.theme.navigation.icon.stroke}`}; `} @@ -195,13 +195,13 @@ const StyledContainer = styled.div<{ @media ${tablet} { width: 100%; grid-template-columns: ${({ isRootFolder, withLogo }) => - isRootFolder - ? withLogo - ? "59px 1fr auto" - : "1fr auto" - : withLogo - ? "43px 49px 1fr auto" - : "49px 1fr auto"}; + isRootFolder + ? withLogo + ? "59px 1fr auto" + : "1fr auto" + : withLogo + ? "43px 49px 1fr auto" + : "49px 1fr auto"}; } @media ${mobile} { @@ -210,11 +210,11 @@ const StyledContainer = styled.div<{ } grid-template-columns: ${(props) => - props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; + props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; } `; -const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{ +const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme) <{ isInfoPanelVisible?: boolean; isRootFolder?: boolean; }>` @@ -256,11 +256,11 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{ @media ${tablet} { display: none; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: ${props.isRootFolder ? "auto" : "0"}; ` - : css` + : css` margin-left: ${props.isRootFolder ? "auto" : "0"}; `} } @@ -283,11 +283,11 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` .add-button { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} min-width: 15px; @@ -305,21 +305,21 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` min-width: 17px; /* ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} */ /* @media ${tablet} { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 9px; ` - : css` + : css` margin-right: 9px; `} } */ @@ -327,11 +327,11 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` .trash-button { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} min-width: 15px; @@ -357,11 +357,11 @@ const StyledInfoPanelToggleWrapper = styled.div<{ @media ${tablet} { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: ${props.isRootFolder ? "auto" : "0"}; ` - : css` + : css` margin-left: ${props.isRootFolder ? "auto" : "0"}; `} } @@ -374,15 +374,15 @@ const StyledInfoPanelToggleWrapper = styled.div<{ justify-content: center; border-radius: 50%; background-color: ${(props) => - props.isInfoPanelVisible - ? props.theme.infoPanel.sectionHeaderToggleBgActive - : props.theme.infoPanel.sectionHeaderToggleBg}; + props.isInfoPanelVisible + ? props.theme.infoPanel.sectionHeaderToggleBgActive + : props.theme.infoPanel.sectionHeaderToggleBg}; path { fill: ${(props) => - props.isInfoPanelVisible - ? props.theme.infoPanel.sectionHeaderToggleIconActive - : props.theme.infoPanel.sectionHeaderToggleIcon}; + props.isInfoPanelVisible + ? props.theme.infoPanel.sectionHeaderToggleIconActive + : props.theme.infoPanel.sectionHeaderToggleIcon}; } } `; @@ -443,7 +443,7 @@ const StyledTextContainer = styled.div<{ `}; `; -const StyledHeading = styled(Heading)<{ isRootFolderTitle: boolean }>` +const StyledHeading = styled(Heading) <{ isRootFolderTitle: boolean }>` font-weight: 700; font-size: ${(props) => props.theme.getCorrectFontSize("18px")}; line-height: 24px; @@ -539,14 +539,14 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>` @media ${tablet} { ${({ withLogo }) => - withLogo && - css` + withLogo && + css` ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: 44px; ` - : css` + : css` margin-left: 44px; `} `}; @@ -554,17 +554,17 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>` @media ${mobile} { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: 0; ` - : css` + : css` margin-left: 0; `} } `; -const StyledText = styled(Text)<{ isRoot: boolean }>` +const StyledText = styled(Text) <{ isRoot: boolean }>` ${(props) => props.theme.interfaceDirection === "rtl" ? css` @@ -621,11 +621,11 @@ const StyledBox = styled.div<{ @media ${tablet} { width: ${({ dropBoxWidth }) => `${dropBoxWidth}px`}; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` right: -16px; ` - : css` + : css` left: -16px; `} padding: 0 16px; @@ -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, }; diff --git a/packages/shared/components/navigation/Navigation.tsx b/packages/shared/components/navigation/Navigation.tsx index 5db9c6b953..1a0a0300c2 100644 --- a/packages/shared/components/navigation/Navigation.tsx +++ b/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,15 +258,18 @@ const Navigation = ({ {isDesktop && isTrashFolder && !isEmptyPage && ( )} - {infoPanelIsVisible && !hideInfoPanel && ( - - )} + + {tariffBar && tariffBar} + {infoPanelIsVisible && !hideInfoPanel && ( + + )} + )} diff --git a/packages/shared/components/navigation/Navigation.types.ts b/packages/shared/components/navigation/Navigation.types.ts index 7eb4c62e83..8b84a94ac2 100644 --- a/packages/shared/components/navigation/Navigation.types.ts +++ b/packages/shared/components/navigation/Navigation.types.ts @@ -160,4 +160,5 @@ export interface INavigationProps { titleIcon: string; currentDeviceType: DeviceType; rootRoomTitle: string; + tariffBar: React.ReactNode; }