Merge pull request #662 from SUI-Components/feature/rollout-topbar-user

feat(components/topbar/user): rollout topbar user with login callback…
SUI-Components · May 23, 2024 · e2c65ae · e2c65ae
2 parents da932eb + a9e8c66
commit e2c65ae
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/components/topbar/user/src/index.js b/components/topbar/user/src/index.js
@@ -24,11 +24,6 @@ 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 = 'Vender'
-const EXPERIMENT_ACCESS_LITERAL = 'Acceder'
-const EXPERIMENT_LOGIN_URL = '/login/?p=l'
-
 /**
  * Render main navigation function.
  */
@@ -63,20 +58,16 @@ export default function TopbarUser({
   ),
   navButton,
   navCTA,
+  navCTALogin,
   navMain,
   navUser,
   onToggle = () => {},
   shouldDisplayNavUser = true,
   shouldDisplayToggle = true,
   showBrandIcon = false,
   title,
-  toggleIcon = Menu,
-  isPublishSolidVariation,
-  isAccessSolidVariation,
-  isLogged
+  toggleIcon = Menu
 }) {
-  const isLoginButtonVariation = isPublishSolidVariation || isAccessSolidVariation
-
   const _topbarUserNode = useRef(null)
   const _topbarUserToggleNode = useRef(null)
   const _windowWidth = useRef()
@@ -203,10 +194,6 @@ 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">
@@ -251,13 +238,28 @@ export default function TopbarUser({
         </div>
       </div>
       {customContent ? <div className="sui-TopbarUser-customContent">{customContent}</div> : <></>}
-      <div className={ctaClassName}>
+      <div className="sui-TopbarUser-cta">
+        {navCTALogin && !customContent && (
+          <div className="sui-TopbarUser-ctaAccess">
+            <AtomButton
+              link
+              linkFactory={linkFactory}
+              design={'outline'}
+              href={navCTALogin.url}
+              title={navCTALogin.text}
+              shape={navCTALogin.shape}
+              size={atomButtonSizes.SMALL}
+            >
+              {navCTALogin.text}
+            </AtomButton>
+          </div>
+        )}
         {navCTA && !customContent && (
           <div className="sui-TopbarUser-ctaButton">
             <AtomButton
               link
               linkFactory={linkFactory}
-              design={!isLoginButtonVariation || isPublishSolidVariation ? 'solid' : 'outline'}
+              design={'solid'}
               href={navCTA.url}
               title={navCTA.text}
               {...(navCTA.icon && {
@@ -267,21 +269,7 @@ export default function TopbarUser({
               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}
+              {navCTA.text}
             </AtomButton>
           </div>
         )}
@@ -441,6 +429,31 @@ TopbarUser.propTypes = {
      */
     shape: PropTypes.string
   }),
+  /**
+   * CTALogin data.
+   */
+  navCTALogin: PropTypes.shape({
+    /**
+     * Call to action url.
+     */
+    url: PropTypes.string.isRequired,
+    /**
+     * Call to action optional icon.
+     */
+    icon: PropTypes.func,
+    /**
+     * Call to action text.
+     */
+    text: PropTypes.string.isRequired,
+    /**
+     * Call to action click handler.
+     */
+    onClick: PropTypes.func,
+    /**
+     * Atom shape customizable.
+     */
+    shape: PropTypes.string
+  }),
   /**
    * Factory for the component that will hold any link.
    */

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