Merge pull request #644 from SUI-Components/feat-topbar-user-new-props

Add new props to topbar/user
SUI-Components · Jan 26, 2024 · 33da48d · 33da48d
2 parents 4b1fefe + 91558d5
commit 33da48d
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 64 deletions.
diff --git a/components/topbar/user/src/index.js b/components/topbar/user/src/index.js
@@ -21,24 +21,51 @@ const DEFAULT_NAV_WRAP_STYLE = {
 const HTML_HAS_SCROLL_DISABLED = 'html-has-scroll-disabled'
 const BODY_HAS_SCROLL_DISABLED = 'body-has-scroll-disabled'
 
+const TITLE_CLASS_NAME = 'sui-TopbarUser-title'
+const FLOW_BUTTON_CLASS_NAME = 'sui-TopbarUser-navButton'
+
+/**
+ * Render main navigation function.
+ */
+const renderNavMain =
+  ({isToggleHidden, linkFactory}) =>
+  ({icon, label: text, menu, arrowButtonIcon, onClick = noop}, index) => {
+    const handleToggleMenu = () => onClick()
+
+    return (
+      <DropdownBasic
+        key={index}
+        button={{icon, text, arrowButtonIcon}}
+        menu={menu}
+        expandOnMouseOver={isToggleHidden}
+        linkFactory={linkFactory}
+        onToggleMenu={handleToggleMenu}
+      />
+    )
+  }
+
 /**
  * Topbar containing a dropdown with user data (login, logout, secured links...).
  */
 export default function TopbarUser({
-  shouldDisplayNavUser = true,
-  toggleIcon = Menu,
   brand,
-  navMain,
-  navUser,
-  navCTA,
   customContent,
+  elementsToKeepScrollOnToggleMenu = [],
   linkFactory = ({href, className, children, target, title}) => (
     <a href={href} className={className} target={target} title={title}>
       {children}
     </a>
   ),
+  navButton,
+  navCTA,
+  navMain,
+  navUser,
   onToggle = () => {},
-  elementsToKeepScrollOnToggleMenu = []
+  shouldDisplayNavUser = true,
+  shouldDisplayToggle = true,
+  showBrandIcon = false,
+  title,
+  toggleIcon = Menu
 }) {
   const _topbarUserNode = useRef(null)
   const _topbarUserToggleNode = useRef(null)
@@ -89,6 +116,7 @@ export default function TopbarUser({
      * Set the display state for toggle button.
      */
     const _setToggleDisplayState = () => {
+      if (!shouldDisplayToggle) return
       // Only go on if user has been resized the browser window horizontally.
       if (window.innerWidth === _windowWidth.current) return
       // Then save the new global value again.
@@ -151,29 +179,9 @@ export default function TopbarUser({
     }
   }, [menuExpanded, isToggleHidden, elementsToKeepScrollOnToggleMenu])
 
-  /**
-   * Render main navigation function.
-   */
-  const _renderNavMain =
-    isToggleHidden =>
-    ({icon, label: text, menu, arrowButtonIcon, onClick = noop}, index) => {
-      const handleToggleMenu = () => onClick()
-
-      return (
-        <DropdownBasic
-          key={index}
-          button={{icon, text, arrowButtonIcon}}
-          menu={menu}
-          expandOnMouseOver={isToggleHidden}
-          linkFactory={linkFactory}
-          onToggleMenu={handleToggleMenu}
-        />
-      )
-    }
-
   const Link = linkFactory
   const ToggleIcon = toggleIcon
-  const {image: BrandImage, name: brandName, url: brandUrl} = brand
+  const {icon: BrandIcon, image: BrandImage, name: brandName, url: brandUrl} = brand
   const {avatar, name, menu, hasUserBadgeLabel} = navUser
   const navWrapClassName = cx('sui-TopbarUser-navWrap', {
     'is-expanded': menuExpanded
@@ -188,19 +196,31 @@ export default function TopbarUser({
   return (
     <div ref={_topbarUserNode} className="sui-TopbarUser">
       <div className="sui-TopbarUser-wrap">
-        <button ref={_topbarUserToggleNode} className={toggleMenuClassName} onClick={_toggleMenu}>
-          <ToggleIcon svgClass="sui-TopbarUser-toggleIcon" />
-        </button>
-        <Link href={brandUrl} className="sui-TopbarUser-brand" title={brandName}>
-          {BrandImage ? <BrandImage /> : brandName}
-        </Link>
+        {navButton ? <div className={FLOW_BUTTON_CLASS_NAME}>{navButton}</div> : null}
+        {shouldDisplayToggle ? (
+          <button ref={_topbarUserToggleNode} className={toggleMenuClassName} onClick={_toggleMenu}>
+            <ToggleIcon svgClass="sui-TopbarUser-toggleIcon" />
+          </button>
+        ) : (
+          <></>
+        )}
+        {showBrandIcon ? (
+          <Link href={brandUrl} className="sui-TopbarUser-brandIcon" title={brandName}>
+            <BrandIcon />
+          </Link>
+        ) : (
+          <Link href={brandUrl} className="sui-TopbarUser-brand" title={brandName}>
+            {BrandImage ? <BrandImage /> : brandName}
+          </Link>
+        )}
+        {title ? <div className={TITLE_CLASS_NAME}>{title}</div> : null}
         <div
           className={navWrapClassName}
           style={isToggleHidden ? DEFAULT_NAV_WRAP_STYLE : navWrapStyle}
           onClick={_handleNavWrapClick}
         >
           <div className="sui-TopbarUser-nav">
-            <div className="sui-TopbarUser-navMain">{navMain.map(_renderNavMain(isToggleHidden))}</div>
+            <div className="sui-TopbarUser-navMain">{navMain.map(renderNavMain({isToggleHidden, linkFactory}))}</div>
             {shouldDisplayNavUser && (
               <div className="sui-TopbarUser-navUser">
                 <DropdownUser
@@ -216,7 +236,7 @@ export default function TopbarUser({
           </div>
         </div>
       </div>
-      {customContent}
+      {customContent ? <div className="sui-TopbarUser-customContent">{customContent}</div> : <></>}
       {navCTA && !customContent && (
         <div className="sui-TopbarUser-ctaButton">
           <AtomButton
@@ -243,6 +263,10 @@ export default function TopbarUser({
 TopbarUser.displayName = 'TopbarUser'
 
 TopbarUser.propTypes = {
+  /**
+   * Render custom node as flow button
+   */
+  navButton: PropTypes.node,
   /**
    * Optional toggle icon.
    */
@@ -313,6 +337,10 @@ TopbarUser.propTypes = {
    * Dropdown user visibility
    */
   shouldDisplayNavUser: PropTypes.bool,
+  /**
+   * Toggle icon visibility
+   */
+  shouldDisplayToggle: PropTypes.bool,
   /**
    * Dropdown user object.
    */
@@ -395,5 +423,13 @@ TopbarUser.propTypes = {
   /**
    * Function that is being executed each time use toggle topbar with the state
    */
-  onToggle: PropTypes.func
+  onToggle: PropTypes.func,
+  /**
+   * Boolean to determines whether the Brand Icon should be shown, instead of Brand image
+   */
+  showBrandIcon: PropTypes.bool,
+  /**
+   * Render custom node as title
+   */
+  title: PropTypes.node
 }
diff --git a/components/topbar/user/src/index.scss b/components/topbar/user/src/index.scss
@@ -12,10 +12,15 @@ $bgc-topbar-user: $c-white !default;
 $bgsz-topbar-user-brand: 100% !default;
 $bxsh-topbar-user: $bxsh-base !default;
 $fill-topbar-user-toggle-icon: $c-accent !default;
+$h-topbar-user-brand-icon-large: $sz-icon-xl !default;
+$h-topbar-user-brand-icon-small: $sz-icon-m !default;
 $h-topbar-user-brand-large: 0 !default;
 $h-topbar-user-brand-small: 0 !default;
+$h-topbar-user-flow-button: 48px !default;
 $maw-topbar-user-nav: 350px !default;
 $size-topbar-user-toggle-icon: 24px !default;
+$w-topbar-user-brand-icon-large: $sz-icon-xl !default;
+$w-topbar-user-brand-icon-small: $sz-icon-m !default;
 $w-topbar-user-brand-large: 0 !default;
 $w-topbar-user-brand-small: 0 !default;
 $w-topbar-user-nav: 90% !default;
@@ -45,34 +50,6 @@ $w-topbar-user-nav: 90% !default;
     border-radius: $bdrs-topbar-user;
   }
 
-  &-ctaButtonIcon {
-    fill: currentColor !important;
-  }
-
-  &-wrap {
-    display: flex;
-    flex: 1;
-  }
-
-  &-toggle {
-    @include reset-button;
-    @include media-breakpoint-up(m) {
-      display: none;
-    }
-    margin-left: -$m-h;
-    padding: $p-v $p-h;
-
-    &.has-notifications {
-      @include sui-badge-notification(true, 2px, 12px);
-    }
-
-    &Icon {
-      fill: $fill-topbar-user-toggle-icon !important;
-      height: $size-topbar-user-toggle-icon;
-      width: $size-topbar-user-toggle-icon;
-    }
-  }
-
   &-brand {
     @include reset-link;
     align-self: center;
@@ -97,6 +74,20 @@ $w-topbar-user-nav: 90% !default;
     }
     padding: $p-v 0;
     width: $w-topbar-user-brand-small;
+
+    &Icon {
+      align-items: center;
+      display: flex;
+      margin-right: $m-l;
+
+      @include media-breakpoint-up(m) {
+        margin-right: $m-xxl;
+      }
+    }
+  }
+
+  &-ctaButtonIcon {
+    fill: currentColor !important;
   }
 
   &-nav {
@@ -153,6 +144,7 @@ $w-topbar-user-nav: 90% !default;
         order: 1;
       }
     }
+
     @include media-breakpoint-up(m) {
       display: flex;
       justify-content: space-between;
@@ -173,4 +165,39 @@ $w-topbar-user-nav: 90% !default;
       }
     }
   }
+
+  &-title {
+    display: flex;
+    align-items: center;
+  }
+
+  &-toggle {
+    @include reset-button;
+    @include media-breakpoint-up(m) {
+      display: none;
+    }
+    margin-left: -$m-h;
+    padding: $p-v $p-h;
+
+    &.has-notifications {
+      @include sui-badge-notification(true, 2px, 12px);
+    }
+
+    &Icon {
+      fill: $fill-topbar-user-toggle-icon !important;
+      height: $size-topbar-user-toggle-icon;
+      width: $size-topbar-user-toggle-icon;
+    }
+  }
+
+  &-navButton {
+    align-items: center;
+    display: flex;
+    height: $h-topbar-user-flow-button;
+  }
+
+  &-wrap {
+    display: flex;
+    flex: 1;
+  }
 }