feat(MainNavigationBar): add menu

playroom/snippets.tsx

@@ -2408,33 +2408,251 @@ const navigationBarSnippets = [
         group: 'NavigationBar',
         name: 'MainNavigationBar',
         code: `
-<MainNavigationBar
-  sections={["Start", "Account", "Explore", "Support"].map((title, idx) => ({
-    title,
-    onPress: () => setState("index", idx),
-  }))}
-  selectedIndex={getState("index", 0)}
-  right={
-    <NavigationBarActionGroup>
-      <NavigationBarAction
-        onPress={() => {}}
-        aria-label="shopping cart with 2 items"
-      >
-        <Badge value={2}>
-          <IconShoppingCartRegular color="currentColor" />
-        </Badge>
-      </NavigationBarAction>
-      <NavigationBarAction onPress={() => {}} aria-label="Open profile">
-        <Avatar
-          size={isDesktopOrBigger ? 32 : 24}
-          initials="ML"
-          src="${imagePlaceholder}"
-        />
-        {isDesktopOrBigger && "María López Serrano"}
-      </NavigationBarAction>
-    </NavigationBarActionGroup>
-  }
-/>`,
+          <MainNavigationBar
+            sections={["Start", "Account", "Explore", "Support"].map((title, idx) => ({
+              title,
+              onPress: () => setState("index", idx),
+            }))}
+            selectedIndex={getState("index", 0)}
+            right={
+              <NavigationBarActionGroup>
+                <NavigationBarAction
+                  onPress={() => {}}
+                  aria-label="shopping cart with 2 items"
+                >
+                  <Badge value={2}>
+                    <IconShoppingCartRegular color="currentColor" />
+                  </Badge>
+                </NavigationBarAction>
+                <NavigationBarAction onPress={() => {}} aria-label="Open profile">
+                  <Avatar
+                    size={isDesktopOrBigger ? 32 : 24}
+                    initials="ML"
+                    src="${imagePlaceholder}"
+                  />
+                  {isDesktopOrBigger && "María López Serrano"}
+                </NavigationBarAction>
+              </NavigationBarActionGroup>
+            }
+          />`,
+    },
+    {
+        group: 'NavigationBar',
+        name: 'MainNavigationBar with large menu',
+        code: `
+          <MainNavigationBar
+            sections={["Start", "Account", "Explore", "Support"].map((title, idx) => ({
+              onPress: () => setState("index", idx),
+              title,
+              menu:
+                title === "Start"
+                  ? {
+                      columns: [
+                        {
+                          title: \`\${title} 1\`,
+                          items: [
+                            {
+                              title: "item 1",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 2",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 3",
+                              onPress: () => {},
+                            },
+                          ],
+                        },
+                        {
+                          title: \`\${title} 2\`,
+                          items: [
+                            {
+                              title: "item 1",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 2",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 3",
+                              onPress: () => {},
+                            },
+                          ],
+                        },
+                      ],
+                    }
+                  : title === "Account"
+                  ? {
+                      columns: [
+                        {
+                          title: \`\${title} 1\`,
+                          items: [
+                            {
+                              title: "item 1",
+                              onPress: () => {},
+                            },
+                          ],
+                        },
+                      ],
+                    }
+                  : title === "Explore"
+                  ? {
+                      content: ({ closeMenu }) => (
+                        <Stack space={16}>
+                          <Text2 regular>Custom content</Text2>
+                          <Placeholder />
+                          <ButtonPrimary onPress={closeMenu}>Close menu</ButtonPrimary>
+                        </Stack>
+                      ),
+                    }
+                  : title === "Support"
+                  ? {
+                      content: isDesktopOrBigger ? (
+                        <Grid columns={12} gap={24}>
+                          {Array.from({ length: 3 }, (_, index) => (
+                            <GridItem columnSpan={2} key={index}>
+                              <Stack space={24}>
+                                <Title1>Contenidos</Title1>
+                                <Stack space={16}>
+                                  {[
+                                    "Destacados",
+                                    "Todo fútbol",
+                                    "#0",
+                                    "Cine",
+                                    "Oferta comercial",
+                                    "Mi Movistar",
+                                    "Movistar Cloud",
+                                  ].map((title, index) => (
+                                    <TextLink
+                                      key={index}
+                                      onPress={() => {}}
+                                      style={{ color: colors.textPrimary }}
+                                    >
+                                      {title}
+                                    </TextLink>
+                                  ))}
+                                </Stack>
+                              </Stack>
+                            </GridItem>
+                          ))}
+
+                          <GridItem columnSpan={5} columnStart={8}>
+                            <DisplayMediaCard
+                              headline={<Tag type="promo">Oferta</Tag>}
+                              title="Movistar Plus+"
+                              onPress={() => {}}
+                              description="Contrata solo TV por 9,99 €"
+                              backgroundImage="https://picsum.photos/1200/1200"
+                            />
+                          </GridItem>
+                        </Grid>
+                      ) : (
+                        <Stack space={40}>
+                          {Array.from({ length: 3 }, (_, index) => (
+                            <Stack space={16} key={index}>
+                              <Title1>Title</Title1>
+                              <NegativeBox>
+                                <RowList>
+                                  <Row title="Title" onPress={() => {}} />
+                                  <Row title="Title" onPress={() => {}} />
+                                  <Row title="Title" onPress={() => {}} />
+                                  <Row title="Title" onPress={() => {}} />
+                                </RowList>
+                              </NegativeBox>
+                            </Stack>
+                          ))}
+
+                          <DisplayMediaCard
+                            headline={<Tag type="promo">Oferta</Tag>}
+                            title="Movistar Plus+"
+                            aspectRatio="1:1"
+                            onPress={() => {}}
+                            description="Contrata solo TV por 9,99 €"
+                            backgroundImage="https://picsum.photos/1200/1200"
+                          />
+                        </Stack>
+                      ),
+                    }
+                  : undefined,
+            }))}
+            selectedIndex={getState("index", 0)}
+          />`,
+    },
+    {
+        group: 'NavigationBar',
+        name: 'MainNavigationBar with small menu',
+        code: `
+          <MainNavigationBar
+            desktopSmallMenu
+            sections={["Start", "Account", "Explore", "Support"].map((title, idx) => ({
+              onPress: () => setState("index", idx),
+              title,
+              menu:
+                title === "Start"
+                  ? {
+                      columns: [
+                        {
+                          title: \`\${title} 1\`,
+                          items: [
+                            {
+                              title: "item 1",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 2",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 3",
+                              onPress: () => {},
+                            },
+                          ],
+                        },
+                      ],
+                    }
+                  : 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",
+                              onPress: () => {},
+                            },
+                            {
+                              title: "item 3",
+                              onPress: () => {},
+                            },
+                          ],
+                        },
+                      ],
+                    }
+                  : undefined,
+            }))}
+            selectedIndex={getState("index", 0)}
+          />`,
     },
     {
         group: 'NavigationBar',

src/__screenshot_tests__/navigation-bar-screenshot-test.tsx

@@ -164,3 +164,67 @@ test.each(DEVICES)('MainNavigationBar without sections (%s)', async (device) =>
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each`
+    menuType   | content
+    ${'large'} | ${'default'}
+    ${'large'} | ${'custom'}
+    ${'small'} | ${'default'}
+    ${'small'} | ${'custom'}
+`('MainNavigationBar with $menuType menu and $content content in DESKTOP', async ({menuType, content}) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {sections: true, desktopSmallMenu: menuType === 'small', menu: content},
+    });
+
+    // first section opened
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // second section opened
+    await page.click(await screen.findByRole('button', {name: 'Account'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // close menu with ESC key
+    await page.keyboard.press('Escape');
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test.each(['default', 'custom'])('MainNavigationBar with menu and %s content in MOBILE_IOS', async (menu) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'MOBILE_IOS',
+        args: {sections: true, menu},
+    });
+
+    await page.click(await screen.findByRole('button', {name: 'Abrir menú de navegación'}));
+
+    // open first section
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // go back
+    await page.click(await screen.findByRole('button', {name: 'Atrás'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // open second section
+    await page.click(await screen.findByRole('button', {name: 'Account'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // close menu
+    await page.click(await screen.findByRole('button', {name: 'Cerrar menú de navegación'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test.each(['large', 'small'])('MainNavigationBar inverse with %s menu in DESKTOP', async (menuType) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {sections: true, desktopSmallMenu: menuType === 'small', menu: 'default', variant: 'inverse'},
+    });
+
+    // first section opened
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot({failureThreshold: 0.00001});
+});