From 7e2958978216159dc524896f255e3a685f510848 Mon Sep 17 00:00:00 2001 From: marcoskolodny Date: Wed, 6 Nov 2024 15:54:18 +0100 Subject: [PATCH] make small menu default --- playroom/snippets.tsx | 146 +++++++++--------- .../navigation-bar-screenshot-test.tsx | 4 +- src/__stories__/main-navigation-bar-story.tsx | 12 +- src/navigation-bar.tsx | 48 +++--- 4 files changed, 105 insertions(+), 105 deletions(-) diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx index 31f5b22d7..5f439b001 100644 --- a/playroom/snippets.tsx +++ b/playroom/snippets.tsx @@ -2436,11 +2436,84 @@ const navigationBarSnippets = [ } />`, }, + { + group: 'NavigationBar', + name: 'MainNavigationBar with menu', + code: ` + ({ + onPress: () => setState("index", idx), + title, + menu: + title === "Start" + ? { + columns: [ + { + title: \`\${title} 1\`, + items: [ + { + title: "item 1", + onPress: () => {}, + }, + { + title: "item 2", + href: "https://www.google.com/", + }, + { + title: "item 3", + to: "#", + }, + ], + }, + ], + } + : title === "Account" + ? { + columns: [ + { + title: \`\${title} 1\`, + items: [ + { + title: "item 1", + onPress: () => {}, + }, + ], + }, + ], + } + : title === "Explore" + ? { + columns: [ + { + title: \`\${title} 1\`, + items: [ + { + title: "item 1", + onPress: () => {}, + }, + { + title: "item 2", + href: "https://www.google.com/", + }, + { + title: "item 3", + to: "#", + }, + ], + }, + ], + } + : undefined, + }))} + selectedIndex={getState("index", 0)} + />`, + }, { group: 'NavigationBar', name: 'MainNavigationBar with large menu', code: ` ({ onPress: () => setState("index", idx), title, @@ -2581,79 +2654,6 @@ const navigationBarSnippets = [ selectedIndex={getState("index", 0)} />`, }, - { - group: 'NavigationBar', - name: 'MainNavigationBar with small menu', - code: ` - ({ - onPress: () => setState("index", idx), - title, - menu: - title === "Start" - ? { - columns: [ - { - title: \`\${title} 1\`, - items: [ - { - title: "item 1", - onPress: () => {}, - }, - { - title: "item 2", - href: "https://www.google.com/", - }, - { - title: "item 3", - to: "#", - }, - ], - }, - ], - } - : title === "Account" - ? { - columns: [ - { - title: \`\${title} 1\`, - items: [ - { - title: "item 1", - onPress: () => {}, - }, - ], - }, - ], - } - : title === "Explore" - ? { - columns: [ - { - title: \`\${title} 1\`, - items: [ - { - title: "item 1", - onPress: () => {}, - }, - { - title: "item 2", - href: "https://www.google.com/", - }, - { - title: "item 3", - to: "#", - }, - ], - }, - ], - } - : undefined, - }))} - selectedIndex={getState("index", 0)} - />`, - }, { group: 'NavigationBar', name: 'FunnelNavigationBar', diff --git a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx index d9fe83655..0a6a0f907 100644 --- a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx +++ b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx @@ -175,7 +175,7 @@ test.each` const page = await openStoryPage({ id: 'components-navigation-bars-mainnavigationbar--default', device: 'DESKTOP', - args: {sections: true, desktopSmallMenu: menuType === 'small', menu: content}, + args: {sections: true, desktopLargeMenu: menuType === 'large', menu: content}, }); // first section opened @@ -221,7 +221,7 @@ test.each(['large', 'small'])('MainNavigationBar inverse with %s menu in DESKTOP const page = await openStoryPage({ id: 'components-navigation-bars-mainnavigationbar--default', device: 'DESKTOP', - args: {sections: true, desktopSmallMenu: menuType === 'small', menu: 'default', variant: 'inverse'}, + args: {sections: true, desktopLargeMenu: menuType === 'large', menu: 'default', variant: 'inverse'}, }); // first section opened diff --git a/src/__stories__/main-navigation-bar-story.tsx b/src/__stories__/main-navigation-bar-story.tsx index 97a3179f7..1d632883f 100644 --- a/src/__stories__/main-navigation-bar-story.tsx +++ b/src/__stories__/main-navigation-bar-story.tsx @@ -32,7 +32,7 @@ type Args = { large: boolean; sections: boolean; menu: 'undefined' | 'default' | 'custom'; - desktopSmallMenu: boolean; + desktopLargeMenu: boolean; }; export const Default: StoryComponent = ({ @@ -42,7 +42,7 @@ export const Default: StoryComponent = ({ large, sections, menu, - desktopSmallMenu, + desktopLargeMenu, }) => { const [selectedIndex, setSelectedIndex] = React.useState(0); const {isDesktopOrBigger} = useScreenSize(); @@ -60,7 +60,7 @@ export const Default: StoryComponent = ({ large={large} withBorder={border} burgerMenuExtra={burgerMenuExtra ? : undefined} - desktopSmallMenu={desktopSmallMenu} + desktopLargeMenu={desktopLargeMenu} sections={ sections ? sectionTitles.map((title, idx) => ({ @@ -73,7 +73,7 @@ export const Default: StoryComponent = ({ ? { title: `${title} menu`, columns: Array.from( - {length: desktopSmallMenu ? 1 : 2}, + {length: desktopLargeMenu ? 2 : 1}, (_, columnIndex) => ({ title: `${title} ${columnIndex + 1}`, items: Array.from( @@ -129,7 +129,7 @@ Default.args = { large: false, sections: true, menu: 'undefined', - desktopSmallMenu: false, + desktopLargeMenu: false, }; Default.argTypes = { @@ -142,5 +142,5 @@ Default.argTypes = { control: {type: 'select'}, if: {arg: 'sections'}, }, - desktopSmallMenu: {if: {arg: 'sections'}}, + desktopLargeMenu: {if: {arg: 'sections'}}, }; diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx index 3b1cfd0ec..907749285 100644 --- a/src/navigation-bar.tsx +++ b/src/navigation-bar.tsx @@ -270,7 +270,7 @@ type MainNavigationBarProps = { withBorder?: boolean; burgerMenuExtra?: React.ReactNode; large?: boolean; - desktopSmallMenu?: boolean; + desktopLargeMenu?: boolean; }; type MainNavigationBarMenuStatus = 'opening' | 'opened' | 'closing' | 'closed'; @@ -566,11 +566,11 @@ const MainNavigationBarDesktopMenuContext = React.createContext; - isSmallMenu?: boolean; + isLargeMenu?: boolean; }): JSX.Element => { const {isTabletOrSmaller} = useScreenSize(); const [isMenuOpen, setIsMenuOpen] = React.useState(false); @@ -637,7 +637,7 @@ const MainNavigationBarDesktopMenuContextProvider = ({ React.useEffect(() => { const menuAnimationDuration = - isRunningAcceptanceTest() || isSmallMenu ? 0 : styles.DESKTOP_MENU_ANIMATION_DURATION_MS; + isRunningAcceptanceTest() || !isLargeMenu ? 0 : styles.DESKTOP_MENU_ANIMATION_DURATION_MS; let id: NodeJS.Timeout; @@ -651,7 +651,7 @@ const MainNavigationBarDesktopMenuContextProvider = ({ } return () => clearTimeout(id); - }, [isMenuOpen, isSmallMenu]); + }, [isMenuOpen, isLargeMenu]); React.useEffect(() => { // reset openedSection when the menu has been closed @@ -1012,7 +1012,7 @@ const MainNavigationBarDesktopSection = ({ navigationBarRef, variant, isLargeNavigationBar, - desktopSmallMenu, + desktopLargeMenu, }: { section: MainNavigationBarSection; index: number; @@ -1022,7 +1022,7 @@ const MainNavigationBarDesktopSection = ({ navigationBarRef: React.RefObject; variant?: Variant; isLargeNavigationBar: boolean; - desktopSmallMenu?: boolean; + desktopLargeMenu?: boolean; }): JSX.Element => { const {texts, t} = useTheme(); const {title, menu, ...touchableProps} = section; @@ -1054,7 +1054,7 @@ const MainNavigationBarDesktopSection = ({ return left <= maxLeftOffset ? left : right - styles.DESKTOP_SMALL_MENU_WIDTH; }; - if (desktopSmallMenu) { + if (!desktopLargeMenu) { setSmallMenuLeftPosition(getSmallMenuLeftPosition()); } @@ -1064,7 +1064,7 @@ const MainNavigationBarDesktopSection = ({ openSectionMenu(index); } }, - [desktopSmallMenu, index, openSectionMenu, debouncedOpenSectionMenu, navigationBarRef] + [desktopLargeMenu, index, openSectionMenu, debouncedOpenSectionMenu, navigationBarRef] ); React.useEffect(() => { @@ -1196,17 +1196,17 @@ const MainNavigationBarDesktopSection = ({ )} - {desktopSmallMenu ? ( - ) : ( - )} @@ -1223,7 +1223,7 @@ const MainNavigationBarDesktopSections = ({ variant, isLargeNavigationBar, hasRightContent, - desktopSmallMenu, + desktopLargeMenu, }: { sections: ReadonlyArray; selectedIndex?: number; @@ -1231,7 +1231,7 @@ const MainNavigationBarDesktopSections = ({ variant: Variant; hasRightContent: boolean; isLargeNavigationBar: boolean; - desktopSmallMenu: boolean; + desktopLargeMenu: boolean; }): JSX.Element => { const {openSectionMenu, openedSection, closeMenu} = useMainNavigationBarDesktopMenuState(); @@ -1264,7 +1264,7 @@ const MainNavigationBarDesktopSections = ({ variant={variant} section={section} isLargeNavigationBar={isLargeNavigationBar} - desktopSmallMenu={desktopSmallMenu} + desktopLargeMenu={desktopLargeMenu} /> ))} @@ -1279,11 +1279,11 @@ const MainNavigationBarDesktopSections = ({ const MainNavigationBarContentWrapper = ({ children, isLargeNavigationBar, - desktopSmallMenu, + desktopLargeMenu, }: { children: React.ReactNode; isLargeNavigationBar: boolean; - desktopSmallMenu: boolean; + desktopLargeMenu: boolean; }): JSX.Element => { const {menuHeight} = useMainNavigationBarDesktopMenuState(); const topSpace = isLargeNavigationBar ? NAVBAR_HEIGHT_DESKTOP_LARGE : NAVBAR_HEIGHT_DESKTOP; @@ -1292,7 +1292,7 @@ const MainNavigationBarContentWrapper = ({
{ const {texts, t} = useTheme(); const menuId = React.useId(); @@ -1336,7 +1336,7 @@ export const MainNavigationBar = ({ variant={variant} hasRightContent={!!right} isLargeNavigationBar={hasBottomSections} - desktopSmallMenu={desktopSmallMenu} + desktopLargeMenu={desktopLargeMenu} /> ); @@ -1361,12 +1361,12 @@ export const MainNavigationBar = ({ variant={variant} dataAttributes={{'component-name': 'MainNavigationBar'}} > - {!desktopSmallMenu && ( + {desktopLargeMenu && ( )} + {!isTabletOrSmaller ? ( mainNavBar ) : (