Merge pull request #719 from SUI-Components/feat-button-topbar

feat(components/topbar/user): add navCTASecondary prop

Author: stivaliserna

components/topbar/user/demo/index.js

@@ -125,12 +125,17 @@ const navCTA = {
   text: 'Check our code'
 }
 
+const navCTASecondary = <a href="https://github.com/SUI-Components/sui-components/issues">Open an issue</a>
+
 const Demo = () => {
   return (
     <>
       <h1>Topbar with CTA</h1>
       <Topbar />
 
+      <h1>Topbar with CTA and Secondary CTA</h1>
+      <Topbar navCTASecondary={navCTASecondary} />
+
       <h1>Topbar with Custom content</h1>
       <Topbar customContent={<div>custom content</div>} />
     </>

components/topbar/user/src/index.js

@@ -87,6 +87,7 @@ export default function TopbarUser({
   navButton,
   navCTA,
   navCTALogin,
+  navCTASecondary,
   navMain,
   navUser,
   onToggle = () => {},
@@ -307,6 +308,7 @@ export default function TopbarUser({
             </AtomButton>
           </div>
         )}
+        {navCTASecondary && !customContent && <div className="sui-TopbarUser-ctaSecondary">{navCTASecondary}</div>}
       </div>
     </div>
   )
@@ -483,6 +485,10 @@ TopbarUser.propTypes = {
      */
     shape: PropTypes.string
   }),
+  /**
+   * Render custom node as secondary CTA, displayed after navCTA
+   */
+  navCTASecondary: PropTypes.node,
   /**
    * CTALogin data.
    */

components/topbar/user/src/index.scss

@@ -93,6 +93,7 @@ $w-topbar-user-nav: 90% !default;
   }
 
   &-cta {
+    align-items: center;
     display: flex;
     gap: $m-m;
 

components/topbar/user/test/fixtures.js

@@ -118,3 +118,5 @@ export const navCTA = {
   icon: PencilIcon,
   text: 'Check our code'
 }
+
+export const navCTASecondary = <a href="https://github.com/SUI-Components/sui-components/issues">Secondary action</a>

components/topbar/user/test/index.test.js

@@ -9,7 +9,7 @@ import chaiDOM from 'chai-dom'
 
 import {fireEvent, render, waitFor} from '@testing-library/react'
 
-import {brand, navCTA, navMain, navUser} from './fixtures.js'
+import {brand, navCTA, navCTASecondary, navMain, navUser} from './fixtures.js'
 
 chai.use(chaiDOM)
 
@@ -40,6 +40,19 @@ describe('topbar/user', () => {
     expect(queryByTitle(navCTA.text)).not.exist
   })
 
+  it('The user can see the secondary CTA when declared', () => {
+    const {getByText} = render(<Component navCTASecondary={navCTASecondary} />)
+
+    expect(getByText(/Secondary action/i)).to.exist
+  })
+
+  it('The secondary CTA is not rendered when customContent is provided', () => {
+    const customContent = <div>custom content</div>
+    const {queryByText} = render(<Component customContent={customContent} navCTASecondary={navCTASecondary} />)
+
+    expect(queryByText(/Secondary action/i)).not.exist
+  })
+
   it('The user can open toggable menus and see clickable link items', async () => {
     const {queryByText} = render(<Component />)