make small menu default

Telefonica · Nov 6, 2024 · 7e29589 · 7e29589
1 parent 638fa05
commit 7e29589
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 105 deletions.
diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
@@ -2436,11 +2436,84 @@ const navigationBarSnippets = [
             }
           />`,
     },
+    {
+        group: 'NavigationBar',
+        name: 'MainNavigationBar with 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",
+                              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: `
           <MainNavigationBar
+            desktopLargeMenu
             sections={["Start", "Account", "Explore", "Support"].map((title, idx) => ({
               onPress: () => setState("index", idx),
               title,
@@ -2581,79 +2654,6 @@ const navigationBarSnippets = [
             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",
-                              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
@@ -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
@@ -32,7 +32,7 @@ type Args = {
     large: boolean;
     sections: boolean;
     menu: 'undefined' | 'default' | 'custom';
-    desktopSmallMenu: boolean;
+    desktopLargeMenu: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -42,7 +42,7 @@ export const Default: StoryComponent<Args> = ({
     large,
     sections,
     menu,
-    desktopSmallMenu,
+    desktopLargeMenu,
 }) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const {isDesktopOrBigger} = useScreenSize();
@@ -60,7 +60,7 @@ export const Default: StoryComponent<Args> = ({
             large={large}
             withBorder={border}
             burgerMenuExtra={burgerMenuExtra ? <Placeholder /> : undefined}
-            desktopSmallMenu={desktopSmallMenu}
+            desktopLargeMenu={desktopLargeMenu}
             sections={
                 sections
                     ? sectionTitles.map((title, idx) => ({
@@ -73,7 +73,7 @@ export const Default: StoryComponent<Args> = ({
                                     ? {
                                           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'}},
 };