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

2024-01-15 18:01:29 +03:00 · 2024-01-15 18:01:29 +03:00 · 4cd811861e
commit 4cd811861e
parent c0e08573c4
3 changed files with 89 additions and 66 deletions
--- 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,
 };
--- 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 && (
            <TrashWarning title={titles.trashWarning} />
          )}
-          {infoPanelIsVisible && !hideInfoPanel && (
-            <ToggleInfoPanelButton
-              id="info-panel-toggle--open"
-              isRootFolder={isRootFolder}
-              toggleInfoPanel={toggleInfoPanel}
-              isInfoPanelVisible={isInfoPanelVisible}
-              titles={titles}
-            />
-          )}
+          <StyledTariffWrapper>
+            {tariffBar && tariffBar}
+            {infoPanelIsVisible && !hideInfoPanel && (
+              <ToggleInfoPanelButton
+                id="info-panel-toggle--open"
+                isRootFolder={isRootFolder}
+                toggleInfoPanel={toggleInfoPanel}
+                isInfoPanelVisible={isInfoPanelVisible}
+                titles={titles}
+              />
+            )}
+          </StyledTariffWrapper>
        </>
      )}
    </Consumer>
--- 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;
 }