feat: #253 new app-bar (existing app switcher) (#261)

* feat: init top-bar's app-switcher
reapit · Dec 18, 2024 · 7be9541 · 7be9541
1 parent 34b4daf
commit 7be9541
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 8 deletions.
diff --git a/src/components/nav/__styles__/index.ts b/src/components/nav/__styles__/index.ts
@@ -350,3 +350,11 @@ export const ElNavResponsiveAppSwitcherIconWrap = styled.div`
     }
   }
 `
+
+export const elNewTopBarAppSwitcher = css`
+  ${ElNavResponsiveAppSwitcherIconWrap} {
+    margin-right: 0;
+    padding: var(--spacing-half);
+    box-sizing: content-box;
+  }
+`
diff --git a/src/components/nav/nav-responsive.tsx b/src/components/nav/nav-responsive.tsx
@@ -72,6 +72,7 @@ export interface NavResponsiveAvatarProps {
 
 export interface NavResponsiveAppSwitcherProps {
   options: NavResponsiveAppSwitcherOption[]
+  className?: string // Note: probably only required for new AppBar
 }
 
 export type LogoIcon = 'reapitLogoSelectedMenu' | 'reapitLogoMenu'
@@ -141,7 +142,7 @@ export const NavResponsiveAvatar: FC<NavResponsiveAvatarProps> = ({ options, isH
   )
 }
 
-export const NavResponsiveAppSwitcher: FC<NavResponsiveAppSwitcherProps> = ({ options }) => {
+export const NavResponsiveAppSwitcher: FC<NavResponsiveAppSwitcherProps> = ({ options, className }) => {
   const [appSwitcherOpen, setAppSwitcherOpen] = useState<boolean>(false)
 
   const marketplaceCallback = () => {
@@ -164,6 +165,7 @@ export const NavResponsiveAppSwitcher: FC<NavResponsiveAppSwitcherProps> = ({ op
         onKeyDown={handleKeyboardEvent('Enter', handleToggleMenu(setAppSwitcherOpen))}
         role="button"
         tabIndex={0}
+        className={className}
       >
         <ElNavResponsiveAppSwitcherIconWrap className={cx(appSwitcherOpen && elAppSwitcherOpen)}>
           <Icon intent="default" icon="appLauncher" />

diff --git a/src/components/top-bar/__test__/__snapshots__/top-bar.test.tsx.snap b/src/components/top-bar/__test__/__snapshots__/top-bar.test.tsx.snap
@@ -4,45 +4,50 @@ exports[`TopBar Snapshot > should match snapshot 1`] = `
 <DocumentFragment>
   <nav>
     <div
-      class="mocked-styled-6 el-top-bar"
+      class="mocked-styled-7 el-top-bar"
     >
       <a
-        class="mocked-styled-2 el-top-bar-logo"
+        class="mocked-styled-2 el-top-bar-app-switcher"
+      >
+        App-switcher
+      </a>
+      <a
+        class="mocked-styled-3 el-top-bar-logo"
       >
         <img
           data-testid="logo-img"
         />
       </a>
       <div
-        class="mocked-styled-4 el-button-group el-top-bar-main-nav el-button-group"
+        class="mocked-styled-5 el-button-group el-top-bar-main-nav el-button-group"
       >
         <div
           data-testid="nav-item"
         />
       </div>
       <div
-        class="mocked-styled-7 el-top-bar-search"
+        class="mocked-styled-8 el-top-bar-search"
       >
         <div
           data-testid="nav-search-button"
         />
       </div>
       <div
-        class="mocked-styled-5 el-button-group el-top-bar-secondary-nav el-button-group"
+        class="mocked-styled-6 el-button-group el-top-bar-secondary-nav el-button-group"
       >
         <div
           data-testid="nav-icon-item"
         />
       </div>
       <div
-        class="mocked-styled-8 el-top-bar-mobile-nav"
+        class="mocked-styled-9 el-top-bar-mobile-nav"
       >
         <div
           data-testid="nav-icon-item"
         />
       </div>
       <div
-        class="mocked-styled-3 el-top-bar-profile"
+        class="mocked-styled-4 el-top-bar-profile"
       >
         <div
           data-testid="avatar-button"

diff --git a/src/components/top-bar/__test__/top-bar.test.tsx b/src/components/top-bar/__test__/top-bar.test.tsx
@@ -26,6 +26,7 @@ describe('TopBar Snapshot', () => {
   it('should match snapshot', () => {
     const { asFragment } = render(
       <TopBar>
+        <TopBar.AppSwitcher>App-switcher</TopBar.AppSwitcher>
         <TopBar.Logo>
           <img data-testid="logo-img" />
         </TopBar.Logo>

diff --git a/src/components/top-bar/styles.ts b/src/components/top-bar/styles.ts
@@ -3,6 +3,14 @@ import { isBelowWideScreen, isTablet, isBelowDesktop, isWideScreen } from '../..
 import { ElButtonGroup } from '../button-group'
 import { css } from '@linaria/core'
 
+export const ElTopBarAppSwitcher = styled.a`
+  padding-right: var(--spacing-4);
+
+  ${isWideScreen} {
+    padding-right: var(--spacing-5);
+  }
+`
+
 export const ElTopBarLogo = styled.a`
   padding-right: var(--spacing-2);
   display: inline-flex;

diff --git a/src/components/top-bar/top-bar.stories.tsx b/src/components/top-bar/top-bar.stories.tsx
@@ -14,6 +14,7 @@ import MenuIcon from './icons/menu-icon.svg?react'
 import { elTopBarMenuPopover } from './styles'
 import { TopBar } from './top-bar'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { elNewTopBarAppSwitcher, NavResponsiveAppSwitcher } from '../nav'
 
 const viewports: typeof INITIAL_VIEWPORTS = {
   superWideScreen: {
@@ -59,6 +60,21 @@ export const Default: Story = {
   render: () => {
     return (
       <TopBar>
+        <TopBar.AppSwitcher>
+          <NavResponsiveAppSwitcher
+            className={elNewTopBarAppSwitcher}
+            options={[
+              {
+                text: 'AppMarket',
+                callback: console.log,
+              },
+              {
+                text: 'DevPortal',
+                callback: console.log,
+              },
+            ]}
+          />
+        </TopBar.AppSwitcher>
         <TopBar.Logo href="/">
           <ReapitLogo />
         </TopBar.Logo>
@@ -125,6 +141,21 @@ export const ResponsiveMainNav: Story = {
   render: () => {
     return (
       <TopBar>
+        <TopBar.AppSwitcher>
+          <NavResponsiveAppSwitcher
+            className={elNewTopBarAppSwitcher}
+            options={[
+              {
+                text: 'AppMarket',
+                callback: console.log,
+              },
+              {
+                text: 'DevPortal',
+                callback: console.log,
+              },
+            ]}
+          />
+        </TopBar.AppSwitcher>
         <TopBar.Logo href="/">
           <ReapitLogo />
         </TopBar.Logo>

diff --git a/src/components/top-bar/top-bar.tsx b/src/components/top-bar/top-bar.tsx
@@ -7,9 +7,11 @@ import {
   ElTopBarProfile,
   ElTopBarMainNav,
   ElTopBarLogo,
+  ElTopBarAppSwitcher,
 } from './styles'
 
 const TopBar: FC<HTMLAttributes<HTMLDivElement>> & {
+  AppSwitcher: typeof ElTopBarAppSwitcher
   Logo: typeof ElTopBarLogo
   MainNav: typeof ElTopBarMainNav
   SecondaryNav: typeof ElTopBarSecondaryNav
@@ -24,6 +26,7 @@ const TopBar: FC<HTMLAttributes<HTMLDivElement>> & {
   )
 }
 
+TopBar.AppSwitcher = ElTopBarAppSwitcher
 TopBar.Logo = ElTopBarLogo
 TopBar.MainNav = ElTopBarMainNav
 TopBar.SecondaryNav = ElTopBarSecondaryNav