feat(MainNavigationBar): topSlot support (#1518)

WEB-2378

Author: atabel

playroom/snippets.tsx

@@ -2677,6 +2677,21 @@ const navigationBarSnippets = [
         name: 'MainNavigationBar',
         code: `
           <MainNavigationBar
+            topSlotBackgroundColor={colors.backgroundNegative}
+            topSlot={
+              <ThemeVariant variant="negative">
+                <Box paddingY={8}>
+                  <Align x="center">
+                    <Inline space={24} alignItems="center">
+                      <Text2 medium>BLACK FRIDAY - 60% en tecnología</Text2>
+                      <ButtonSecondary small onPress={() => {}}>
+                        See offers
+                      </ButtonSecondary>
+                    </Inline>
+                  </Align>
+                </Box>
+              </ThemeVariant>
+            }
             sections={[
               {
                 title: "Start",

src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-with-top-slot-1-snap.png

@@ -88,6 +88,42 @@ test('MainNavigationBar wide', async () => {
     expect(await page.screenshot()).toMatchImageSnapshot();
 });
 
+test('MainNavigationBar desktop with topSlot', async () => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {topSlot: true, desktopLargeMenu: true, menu: 'default'},
+    });
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test('MainNavigationBar mobile with topSlot', async () => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'MOBILE_IOS',
+        args: {topSlot: true},
+    });
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    await page.click(await screen.findByRole('button', {name: 'Abrir menú de navegación'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test('MainNavigationBar desktop with topSlot and custom background', async () => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {topSlot: true, topSlotBackgroundColor: '#FABADA'},
+    });
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
 test.each`
     variant          | isDarkMode | device
     ${'default'}     | ${false}   | ${'DESKTOP'}

src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-with-top-slot-2-snap.png

@@ -41,6 +41,8 @@ type Args = {
     menu: 'undefined' | 'default' | 'custom';
     desktopLargeMenu: boolean;
     customLogo: boolean;
+    topSlot: boolean;
+    topSlotBackgroundColor: string;
     wide: boolean;
     paddingX: PadSize | 'undefined';
 };
@@ -54,6 +56,8 @@ export const Default: StoryComponent<Args> = ({
     menu,
     desktopLargeMenu,
     customLogo,
+    topSlot,
+    topSlotBackgroundColor,
     wide,
     paddingX,
 }) => {
@@ -68,6 +72,8 @@ export const Default: StoryComponent<Args> = ({
             burgerMenuExtra={burgerMenuExtra ? <Placeholder /> : undefined}
             desktopLargeMenu={desktopLargeMenu}
             logo={customLogo ? <Placeholder width={40} height={40} /> : undefined}
+            topSlot={topSlot ? <Placeholder height={24} /> : undefined}
+            topSlotBackgroundColor={topSlotBackgroundColor || undefined}
             sections={
                 sections
                     ? sectionTitles.map((title, idx) => ({
@@ -139,6 +145,8 @@ Default.args = {
     menu: 'undefined',
     desktopLargeMenu: false,
     customLogo: false,
+    topSlot: false,
+    topSlotBackgroundColor: '',
     wide: false,
     paddingX: 'undefined',
 };
@@ -154,6 +162,10 @@ Default.argTypes = {
         if: {arg: 'sections'},
     },
     desktopLargeMenu: {if: {arg: 'sections'}},
+    topSlotBackgroundColor: {
+        control: {type: 'color'},
+        if: {arg: 'topSlot'},
+    },
     paddingX: {
         options: ['undefined', 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80],
         control: {type: 'select'},

src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-with-top-slot-and-custom-background-1-snap.png

@@ -17,6 +17,7 @@ export type BoxProps = {
     paddingBottom?: ByBreakpoint<PadSize>;
     paddingLeft?: ByBreakpoint<PadSize>;
     paddingRight?: ByBreakpoint<PadSize>;
+    background?: string;
     as?: React.ComponentType<any> | string;
     children?: React.ReactNode;
     /**
@@ -46,6 +47,7 @@ const Box = React.forwardRef<HTMLDivElement, BoxProps>(
             paddingBottom = paddingY,
             paddingLeft = paddingX,
             paddingRight = paddingX,
+            background,
             role,
             id,
             dataAttributes,
@@ -99,6 +101,7 @@ const Box = React.forwardRef<HTMLDivElement, BoxProps>(
                     ...applyPaddingVars(styles.vars.paddingLeft, paddingLeftValues),
                     ...applyPaddingVars(styles.vars.paddingRight, paddingRightValues),
                     ...(width !== undefined ? {width, boxSizing: 'border-box'} : {}),
+                    background,
                 }}
                 id={id}
             >

src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-with-top-slot-1-snap.png

@@ -401,7 +401,6 @@ export const burgerMenuButton = style({
 
 export const burgerMenu = sprinkles({
     position: 'fixed',
-    top: NAVBAR_HEIGHT_MOBILE,
     left: 0,
     right: 0,
     bottom: 0,