feat(MainNavigationBar): add menu (#1280)

Issue: [Link](https://jira.tid.es/browse/WEB-2056) Specs: [Link](https://www.figma.com/design/Os5UfsnhLtQ9rnzmtcX8J4/%F0%9F%94%B8-Navigation-Bar-Component-Specs?node-id=2452-7836&node-type=canvas&t=BTooEBz4s8puwWFJ-0)
Telefonica · Nov 14, 2024 · 3973ead · 3973ead · github-actions · Nov 14, 2024
1 parent 087c486
commit 3973ead
Show file tree

Hide file tree

Showing 29 changed files with 2,126 additions and 313 deletions.
diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
@@ -2584,33 +2584,278 @@ 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={[
+              {
+                title: "Start",
+                onPress: () => setState("index", 0),
+              },
+              {
+                title: "Account",
+                onPress: () => setState("index", 1),
+              },
+              {
+                title: "Explore",
+                onPress: () => setState("index", 2),
+              },
+              {
+                title: "Support",
+                onPress: () => setState("index", 3),
+              },
+            ]}
+            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 menu',
+        code: `
+          <MainNavigationBar
+            sections={[
+              {
+                onPress: () => setState("index", 0),
+                title: "Start",
+                menu: {
+                  columns: [
+                    {
+                      title: "Start 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 1),
+                title: "Account",
+                menu: {
+                  columns: [
+                    {
+                      title: "Account 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 2),
+                title: "Explore",
+                menu: {
+                  columns: [
+                    {
+                      title: "Explore 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+            ]}
+            selectedIndex={getState("index", 0)}
+          />`,
+    },
+    {
+        group: 'NavigationBar',
+        name: 'MainNavigationBar with large menu',
+        code: `
+          <MainNavigationBar
+            desktopLargeMenu
+            sections={[
+              {
+                onPress: () => setState("index", 0),
+                title: "Start",
+                menu: {
+                  columns: [
+                    {
+                      title: "Start 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                    {
+                      title: "Start 2",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 1),
+                title: "Account",
+                menu: {
+                  columns: [
+                    {
+                      title: "Account 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 2),
+                title: "Explore",
+                menu: {
+                  content: ({ closeMenu }) => (
+                    <Stack space={16}>
+                      <Text2 regular>Custom content</Text2>
+                      <Placeholder />
+                      <ButtonPrimary onPress={closeMenu}>Close menu</ButtonPrimary>
+                    </Stack>
+                  ),
+                },
+              },
+              {
+                onPress: () => setState("index", 3),
+                title: "Support",
+                menu: {
+                  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="${imagePlaceholder}"
+                        />
+                      </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="${imagePlaceholder}"
+                      />
+                    </Stack>
+                  ),
+                },
+              },
+            ]}
+            selectedIndex={getState("index", 0)}
+          />`,
     },
     {
         group: 'NavigationBar',

diff --git a/...shot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png b/...shot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png
diff --git a/...shot-test-tsx-main-navigation-bar-inverse-with-small-menu-in-desktop-1-snap.png b/...shot-test-tsx-main-navigation-bar-inverse-with-small-menu-in-desktop-1-snap.png
diff --git a/...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png b/...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png
diff --git a/...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-2-snap.png b/...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-2-snap.png
diff --git a/...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-3-snap.png b/...sx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-3-snap.png
diff --git a/...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png b/...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png
diff --git a/...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-2-snap.png b/...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-2-snap.png
diff --git a/...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-3-snap.png b/...x-main-navigation-bar-with-large-menu-and-default-content-in-desktop-3-snap.png
diff --git a/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-1-snap.png b/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-1-snap.png
diff --git a/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-2-snap.png b/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-2-snap.png
diff --git a/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-3-snap.png b/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-3-snap.png
diff --git a/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-4-snap.png b/...t-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-4-snap.png
diff --git a/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-1-snap.png b/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-1-snap.png
diff --git a/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-2-snap.png b/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-2-snap.png
diff --git a/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-3-snap.png b/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-3-snap.png
diff --git a/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-4-snap.png b/...-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-4-snap.png
diff --git a/...sx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-1-snap.png b/...sx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-1-snap.png
diff --git a/...sx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-2-snap.png b/...sx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-2-snap.png
diff --git a/...sx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-3-snap.png b/...sx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-3-snap.png
diff --git a/...x-main-navigation-bar-with-small-menu-and-default-content-in-desktop-1-snap.png b/...x-main-navigation-bar-with-small-menu-and-default-content-in-desktop-1-snap.png
diff --git a/...x-main-navigation-bar-with-small-menu-and-default-content-in-desktop-2-snap.png b/...x-main-navigation-bar-with-small-menu-and-default-content-in-desktop-2-snap.png
diff --git a/...x-main-navigation-bar-with-small-menu-and-default-content-in-desktop-3-snap.png b/...x-main-navigation-bar-with-small-menu-and-default-content-in-desktop-3-snap.png
diff --git a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx b/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, desktopLargeMenu: menuType === 'large', 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, desktopLargeMenu: menuType === 'large', menu: 'default', variant: 'inverse'},
+    });
+
+    // first section opened
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot({failureThreshold: 0.00001});
+});