Merge pull request 'refactoring/campaigns-banner' (#103) from refacto…

…ring/campaigns-banner into develop Reviewed-on: https://git.onlyoffice.com/ONLYOFFICE/DocSpace-client/pulls/103 Reviewed-by: Timofey Boyko <[email protected]>
ONLYOFFICE · Jan 20, 2025 · 6e7268e · 6e7268e
2 parents bfc1e28 + 95c7acf
commit 6e7268e
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 78 deletions.
diff --git a/...ampaigns-banner/CampaignsBanner.styled.ts → ...paigns-banner/CampaignsBanner.module.scss b/...ampaigns-banner/CampaignsBanner.styled.ts → ...paigns-banner/CampaignsBanner.module.scss
@@ -24,56 +24,53 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import styled from "styled-components";
-import { globalColors } from "../../themes";
-import { tablet, mobile } from "../../utils/device";
-import { injectDefaultTheme } from "../../utils";
-
-const BannerWrapper = styled.div.attrs(injectDefaultTheme)<{
-  background?: string;
-  borderColor?: string;
-}>`
+@import "../../styles/variables/index.scss";
+@import "../../styles/variables/_colors.scss";
+@import "../../styles/_mixins.scss";
+
+.wrapper {
   overflow: hidden;
   position: relative;
   min-height: 142px;
   max-height: 142px;
 
   &::before {
     content: "";
-    background-image: url(${(props) => props.background});
+    background-image: var(--campaign-background);
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: 0% 100%;
-
     position: absolute;
     z-index: -1000;
     inset: 0px;
-
     border-radius: 4px;
-    border: 1px solid ${(props) => props.borderColor};
+    border: 1px solid var(--campaign-border-color);
+  }
 
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
+  [dir="rtl"] & {
+    &::before {
+      transform: scaleX(-1);
+    }
   }
 
-  @media ${mobile} {
+  @include mobile {
     min-height: 132px;
     max-height: 132px;
   }
 
-  .close-icon {
+  .closeIcon {
+    cursor: pointer;
     position: absolute;
     inset-inline-end: 14px;
-
     top: 18px;
 
     path {
-      fill: ${globalColors.gray};
+      fill: $gray;
     }
   }
-`;
+}
 
-const BannerContent = styled.div`
+.content {
   padding: 16px 14px;
   display: flex;
   flex-direction: column;
@@ -83,49 +80,53 @@ const BannerContent = styled.div`
     max-width: 167px;
   }
 
-  @media ${tablet} {
+  @include tablet {
     .header {
       max-width: 180px;
     }
   }
 
-  @media ${mobile} {
+  @include mobile {
     .header {
       max-width: 75%;
     }
-
     max-width: 75%;
   }
-`;
+}
 
-const BannerButton = styled.button<{
-  buttonColor?: string;
-  buttonTextColor?: string;
-}>`
+.button {
   cursor: pointer;
   width: fit-content;
   padding: 4px 12px;
   border-radius: 32px;
   border: none;
-  background: ${(props) => props.buttonColor};
   font-size: 12px;
   font-weight: 700;
   text-align: center;
-  color: ${(props) => props.buttonTextColor};
-`;
+  background: var(--campaign-button-background-color);
+  color: var(--campaign-button-color);
 
-const BannerIcon = styled.div`
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.icon {
   width: 100px;
   height: 80px;
   z-index: -1;
   position: absolute;
   bottom: 1px;
-
   inset-inline-end: 1px;
-  ${({ theme }) =>
-    theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
 
-  @media ${mobile} {
+  [dir="rtl"] & {
+    .icon {
+      transform: scaleX(-1);
+    }
+  }
+
+  @include mobile {
     width: 140px;
     height: 112px;
 
@@ -134,6 +135,4 @@ const BannerIcon = styled.div`
       height: 112px;
     }
   }
-`;
-
-export { BannerWrapper, BannerContent, BannerButton, BannerIcon };
+}
diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx
@@ -30,15 +30,10 @@ import React from "react";
 import { ReactSVG } from "react-svg";
 
 import { Text as TextComponent } from "../text";
-import { Link as LinkComponent } from "../link";
+import { Link as LinkComponent, LinkType } from "../link";
 import { IconButton } from "../icon-button";
 
-import {
-  BannerWrapper,
-  BannerContent,
-  BannerButton,
-  BannerIcon,
-} from "./CampaignsBanner.styled";
+import styles from "./CampaignsBanner.module.scss";
 import { CampaignsBannerProps } from "./CampaignsBanner.types";
 
 import useFitText from "./useFitText";
@@ -66,20 +61,30 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
     body?.fontSize,
   );
 
+  const wrapperStyle = {
+    "--campaign-background": `url(${campaignBackground})`,
+    "--campaign-border-color": borderColor,
+  } as React.CSSProperties;
+
+  const buttonStyle = {
+    "--campaign-button-background-color": action?.backgroundColor,
+    "--campaign-button-color": action?.color,
+  } as React.CSSProperties;
+
   return (
-    <BannerWrapper
+    <div
       ref={wrapperRef}
       data-testid="campaigns-banner"
-      background={campaignBackground}
-      borderColor={borderColor}
+      className={styles.wrapper}
+      style={wrapperStyle}
     >
-      <BannerContent ref={ref}>
+      <div ref={ref} className={styles.content}>
         {hasTitle ? (
           <TextComponent
             className="header"
-            color={title?.color || globalColors.black}
-            fontSize={title?.fontSize}
-            fontWeight={title?.fontWeight}
+            color={title?.color ?? globalColors.black}
+            fontSize={title?.fontSize ?? "13px"}
+            fontWeight={title?.fontWeight ?? "normal"}
             lineHeight="12px"
           >
             {Header}
@@ -88,53 +93,66 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
         <div>
           {hasBodyText ? (
             <TextComponent
-              color={body?.color || globalColors.black}
-              fontSize={fontSize}
-              fontWeight={body?.fontWeight}
+              color={body?.color ?? globalColors.black}
+              fontSize={fontSize ?? "13px"}
+              fontWeight={body?.fontWeight ?? "normal"}
             >
               {SubHeader}
             </TextComponent>
           ) : null}
           {hasText ? (
             <TextComponent
-              color={text?.color || globalColors.black}
-              fontSize={text?.fontSize}
-              fontWeight={text?.fontWeight}
+              color={text?.color ?? globalColors.black}
+              fontSize={text?.fontSize ?? "13px"}
+              fontWeight={text?.fontWeight ?? "normal"}
             >
               {Text}
             </TextComponent>
           ) : null}
         </div>
         {isButton ? (
-          <BannerButton
-            buttonTextColor={action?.color}
-            buttonColor={action?.backgroundColor}
-            onClick={() => onAction(action?.type, Link)}
+          <button
+            style={buttonStyle}
+            className={styles.button}
+            onClick={() => onAction()}
+            type="button"
           >
-            {ButtonLabel}
-          </BannerButton>
+            <TextComponent
+              color={action?.color ?? globalColors.black}
+              fontSize={action?.fontSize ?? "13px"}
+              fontWeight={action?.fontWeight ?? "normal"}
+            >
+              {ButtonLabel}
+            </TextComponent>
+          </button>
         ) : (
           <LinkComponent
-            color={action?.color}
-            fontSize={action?.fontSize}
-            fontWeight={action?.fontWeight}
-            onClick={() => onAction(action?.type, Link)}
+            color={action?.color ?? globalColors.black}
+            type={LinkType.action}
             isHovered
+            onClick={() => onAction(action?.type, Link)}
           >
-            {ButtonLabel}
+            <TextComponent
+              color={action?.color ?? globalColors.black}
+              fontSize={action?.fontSize ?? "13px"}
+              fontWeight={action?.fontWeight ?? "normal"}
+            >
+              {ButtonLabel}
+            </TextComponent>
           </LinkComponent>
         )}
-      </BannerContent>
+
+        {campaignIcon ? (
+          <ReactSVG src={campaignIcon} className={styles.icon} />
+        ) : null}
+      </div>
       <IconButton
-        className="close-icon"
         size={12}
-        iconName={CrossReactSvg}
+        className={styles.closeIcon}
         onClick={onClose}
+        iconName={CrossReactSvg}
       />
-      <BannerIcon>
-        <ReactSVG src={campaignIcon} />
-      </BannerIcon>
-    </BannerWrapper>
+    </div>
   );
 };