Merge pull request #658 from SUI-Components/feature/topbar-user-exper…

…iment Feature/topbar user experiment
SUI-Components · Apr 24, 2024 · 6b83379 · 6b83379
2 parents 2f8276c + 862ee6e
commit 6b83379
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 22 deletions.
diff --git a/components/topbar/user/src/index.js b/components/topbar/user/src/index.js
@@ -24,6 +24,11 @@ const BODY_HAS_SCROLL_DISABLED = 'body-has-scroll-disabled'
 const TITLE_CLASS_NAME = 'sui-TopbarUser-title'
 const FLOW_BUTTON_CLASS_NAME = 'sui-TopbarUser-navButton'
 
+// Experiment code
+const EXPERIMENT_PUBLISH_LITERAL = 'Publicar'
+const EXPERIMENT_ACCESS_LITERAL = 'Acceder'
+const EXPERIMENT_LOGIN_URL = '/login/?p=l'
+
 /**
  * Render main navigation function.
  */
@@ -65,8 +70,13 @@ export default function TopbarUser({
   shouldDisplayToggle = true,
   showBrandIcon = false,
   title,
-  toggleIcon = Menu
+  toggleIcon = Menu,
+  isPublishSolidVariation,
+  isAccessSolidVariation,
+  isLogged
 }) {
+  const isLoginButtonVariation = isPublishSolidVariation || isAccessSolidVariation
+
   const _topbarUserNode = useRef(null)
   const _topbarUserToggleNode = useRef(null)
   const _windowWidth = useRef()
@@ -193,6 +203,10 @@ export default function TopbarUser({
 
   const handleCTAclick = navCTA && navCTA.onClick
 
+  const ctaClassName = cx('sui-TopbarUser-cta', {
+    'sui-TopbarUser-cta--isPublishMainAction': isPublishSolidVariation
+  })
+
   return (
     <div ref={_topbarUserNode} className="sui-TopbarUser">
       <div className="sui-TopbarUser-wrap">
@@ -237,25 +251,41 @@ export default function TopbarUser({
         </div>
       </div>
       {customContent ? <div className="sui-TopbarUser-customContent">{customContent}</div> : <></>}
-      {navCTA && !customContent && (
-        <div className="sui-TopbarUser-ctaButton">
-          <AtomButton
-            link
-            linkFactory={linkFactory}
-            design="solid"
-            href={navCTA.url}
-            title={navCTA.text}
-            {...(navCTA.icon && {
-              leftIcon: <navCTA.icon svgClass="sui-TopbarUser-ctaButtonIcon" />
-            })}
-            shape={navCTA.shape}
-            size={atomButtonSizes.SMALL}
-            onClick={handleCTAclick}
-          >
-            {navCTA.text}
-          </AtomButton>
-        </div>
-      )}
+      <div className={ctaClassName}>
+        {navCTA && !customContent && (
+          <div className="sui-TopbarUser-ctaButton">
+            <AtomButton
+              link
+              linkFactory={linkFactory}
+              design={!isLoginButtonVariation || isPublishSolidVariation ? 'solid' : 'outline'}
+              href={navCTA.url}
+              title={navCTA.text}
+              {...(navCTA.icon && {
+                leftIcon: <navCTA.icon svgClass="sui-TopbarUser-ctaButtonIcon" />
+              })}
+              shape={navCTA.shape}
+              size={atomButtonSizes.SMALL}
+              onClick={handleCTAclick}
+            >
+              {isLoginButtonVariation ? EXPERIMENT_PUBLISH_LITERAL : navCTA.text}
+            </AtomButton>
+          </div>
+        )}
+        {!customContent && isLoginButtonVariation && !isLogged && (
+          <div className="sui-TopbarUser-ctaAccess">
+            <AtomButton
+              link
+              linkFactory={linkFactory}
+              design={isAccessSolidVariation ? 'solid' : 'outline'}
+              href={EXPERIMENT_LOGIN_URL}
+              shape="circular"
+              size={atomButtonSizes.SMALL}
+            >
+              {EXPERIMENT_ACCESS_LITERAL}
+            </AtomButton>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

diff --git a/components/topbar/user/src/index.scss b/components/topbar/user/src/index.scss
@@ -86,8 +86,17 @@ $w-topbar-user-nav: 90% !default;
     }
   }
 
-  &-ctaButtonIcon {
-    fill: currentColor !important;
+  &-cta {
+    display: flex;
+    gap: $m-m;
+
+    &--isPublishMainAction {
+      flex-direction: row-reverse;
+    }
+
+    &ButtonIcon {
+      fill: currentColor !important;
+    }
   }
 
   &-nav {