feat(NavigationBar, FunnelNavigationBar, MainNavigationBar): add alte…

…rnative variant (#1200)

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

@@ -3,16 +3,18 @@ import {openStoryPage, screen} from '../test-utils';
 const DEVICES = ['MOBILE_IOS', 'DESKTOP'] as const;
 
 test.each`
-    inverse  | isDarkMode
-    ${false} | ${false}
-    ${false} | ${true}
-    ${true}  | ${false}
-    ${true}  | ${true}
-`('MainNavigationBar desktop. inverse={$inverse} isDarkMode={$isDarkMode}', async ({inverse, isDarkMode}) => {
+    variant          | isDarkMode
+    ${'default'}     | ${false}
+    ${'default'}     | ${true}
+    ${'inverse'}     | ${false}
+    ${'inverse'}     | ${true}
+    ${'alternative'} | ${false}
+    ${'alternative'} | ${true}
+`('MainNavigationBar desktop. variant={$variant} isDarkMode={$isDarkMode}', async ({variant, isDarkMode}) => {
     const page = await openStoryPage({
         id: 'components-navigation-bars-mainnavigationbar--default',
         device: 'DESKTOP',
-        args: {inverse},
+        args: {variant},
         isDarkMode,
     });
 
@@ -22,16 +24,18 @@ test.each`
 });
 
 test.each`
-    inverse  | isDarkMode
-    ${false} | ${false}
-    ${false} | ${true}
-    ${true}  | ${false}
-    ${true}  | ${true}
-`('MainNavigationBar mobile. inverse={$inverse} isDarkMode={$isDarkMode}', async ({inverse, isDarkMode}) => {
+    variant          | isDarkMode
+    ${'default'}     | ${false}
+    ${'default'}     | ${true}
+    ${'inverse'}     | ${false}
+    ${'inverse'}     | ${true}
+    ${'alternative'} | ${false}
+    ${'alternative'} | ${true}
+`('MainNavigationBar mobile. variant={$variant} isDarkMode={$isDarkMode}', async ({variant, isDarkMode}) => {
     const page = await openStoryPage({
         id: 'components-navigation-bars-mainnavigationbar--default',
         device: 'MOBILE_IOS',
-        args: {inverse},
+        args: {variant},
         isDarkMode,
     });
 
@@ -70,22 +74,26 @@ test('MainNavigationBar large', async () => {
 });
 
 test.each`
-    inverse  | isDarkMode | device
-    ${false} | ${false}   | ${'DESKTOP'}
-    ${false} | ${true}    | ${'DESKTOP'}
-    ${true}  | ${false}   | ${'DESKTOP'}
-    ${true}  | ${true}    | ${'DESKTOP'}
-    ${false} | ${false}   | ${'MOBILE_IOS'}
-    ${false} | ${true}    | ${'MOBILE_IOS'}
-    ${true}  | ${false}   | ${'MOBILE_IOS'}
-    ${true}  | ${true}    | ${'MOBILE_IOS'}
+    variant          | isDarkMode | device
+    ${'default'}     | ${false}   | ${'DESKTOP'}
+    ${'default'}     | ${true}    | ${'DESKTOP'}
+    ${'inverse'}     | ${false}   | ${'DESKTOP'}
+    ${'inverse'}     | ${true}    | ${'DESKTOP'}
+    ${'alternative'} | ${false}   | ${'DESKTOP'}
+    ${'alternative'} | ${true}    | ${'DESKTOP'}
+    ${'default'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'default'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'alternative'} | ${false}   | ${'MOBILE_IOS'}
+    ${'alternative'} | ${true}    | ${'MOBILE_IOS'}
 `(
-    'NavigationBar. inverse={$inverse} isDarkMode={$isDarkMode} device={$device}',
-    async ({inverse, isDarkMode, device}) => {
+    'NavigationBar. variant={$variant} isDarkMode={$isDarkMode} device={$device}',
+    async ({variant, isDarkMode, device}) => {
         const page = await openStoryPage({
             id: 'components-navigation-bars-navigationbar--default',
             device,
-            args: {inverse},
+            args: {variant},
             isDarkMode,
         });
 
@@ -96,22 +104,26 @@ test.each`
 );
 
 test.each`
-    inverse  | isDarkMode | device
-    ${false} | ${false}   | ${'DESKTOP'}
-    ${false} | ${true}    | ${'DESKTOP'}
-    ${true}  | ${false}   | ${'DESKTOP'}
-    ${true}  | ${true}    | ${'DESKTOP'}
-    ${false} | ${false}   | ${'MOBILE_IOS'}
-    ${false} | ${true}    | ${'MOBILE_IOS'}
-    ${true}  | ${false}   | ${'MOBILE_IOS'}
-    ${true}  | ${true}    | ${'MOBILE_IOS'}
+    variant          | isDarkMode | device
+    ${'default'}     | ${false}   | ${'DESKTOP'}
+    ${'default'}     | ${true}    | ${'DESKTOP'}
+    ${'inverse'}     | ${false}   | ${'DESKTOP'}
+    ${'inverse'}     | ${true}    | ${'DESKTOP'}
+    ${'alternative'} | ${false}   | ${'DESKTOP'}
+    ${'alternative'} | ${true}    | ${'DESKTOP'}
+    ${'default'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'default'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'alternative'} | ${false}   | ${'MOBILE_IOS'}
+    ${'alternative'} | ${true}    | ${'MOBILE_IOS'}
 `(
-    'FunnelNavigationBar. inverse={$inverse} isDarkMode={$isDarkMode} device={$device}',
-    async ({inverse, isDarkMode, device}) => {
+    'FunnelNavigationBar. variant={$variant} isDarkMode={$isDarkMode} device={$device}',
+    async ({variant, isDarkMode, device}) => {
         const page = await openStoryPage({
             id: 'components-navigation-bars-funnelnavigationbar--default',
             device,
-            args: {inverse},
+            args: {variant},
             isDarkMode,
         });
 

src/__stories__/funnel-navigation-bar-story.tsx

@@ -10,6 +10,8 @@ import {
 } from '..';
 import {vars} from '../skins/skin-contract.css';
 
+import type {Variant} from '../theme-variant-context';
+
 export default {
     title: 'Components/Navigation bars/FunnelNavigationBar',
     component: FunnelNavigationBar,
@@ -18,14 +20,14 @@ export default {
     },
 };
 
-type Args = {inverse: boolean; withBorder: boolean};
+type Args = {variant: Variant; withBorder: boolean};
 
-export const Default: StoryComponent<Args> = ({inverse, withBorder}) => {
+export const Default: StoryComponent<Args> = ({variant, withBorder}) => {
     const {isDesktopOrBigger} = useScreenSize();
     return (
         <FunnelNavigationBar
             withBorder={withBorder}
-            isInverse={inverse}
+            variant={variant}
             right={
                 <NavigationBarActionGroup>
                     <NavigationBarAction aria-label="need help?" href="/help">
@@ -49,6 +51,13 @@ export const Default: StoryComponent<Args> = ({inverse, withBorder}) => {
 Default.storyName = 'FunnelNavigationBar';
 
 Default.args = {
-    inverse: false,
+    variant: 'default',
     withBorder: true,
 };
+
+Default.argTypes = {
+    variant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
+};

src/__stories__/main-navigation-bar-story.tsx

@@ -11,6 +11,8 @@ import {
 } from '..';
 import avatarImg from './images/avatar.jpg';
 
+import type {Variant} from '../theme-variant-context';
+
 export default {
     title: 'Components/Navigation bars/MainNavigationBar',
     component: MainNavigationBar,
@@ -22,15 +24,15 @@ export default {
 const sections = ['Start', 'Account', 'Explore', 'Support'];
 
 type Args = {
-    inverse: boolean;
+    variant: Variant;
     withBorder: boolean;
     withBurgerMenuExtra: boolean;
     large: boolean;
     withSections: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
-    inverse,
+    variant,
     withBorder,
     withBurgerMenuExtra,
     large,
@@ -40,7 +42,7 @@ export const Default: StoryComponent<Args> = ({
     const {isDesktopOrBigger} = useScreenSize();
     return (
         <MainNavigationBar
-            isInverse={inverse}
+            variant={variant}
             large={large}
             withBorder={withBorder}
             burgerMenuExtra={withBurgerMenuExtra ? <Placeholder /> : undefined}
@@ -70,9 +72,16 @@ export const Default: StoryComponent<Args> = ({
 Default.storyName = 'MainNavigationBar';
 
 Default.args = {
-    inverse: false,
+    variant: 'default',
     withBorder: true,
     withBurgerMenuExtra: false,
     large: false,
     withSections: true,
 };
+
+Default.argTypes = {
+    variant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
+};

src/__stories__/navigation-bar-story.tsx

@@ -7,6 +7,8 @@ import {
     IconSearchRegular,
 } from '..';
 
+import type {Variant} from '../theme-variant-context';
+
 export default {
     title: 'Components/Navigation bars/NavigationBar',
     component: NavigationBar,
@@ -15,14 +17,14 @@ export default {
     },
 };
 
-type Args = {isInverse: boolean; withBorder: boolean};
+type Args = {variant: Variant; withBorder: boolean};
 
-export const Default: StoryComponent<Args> = ({isInverse, withBorder}) => {
+export const Default: StoryComponent<Args> = ({variant, withBorder}) => {
     const {isDesktopOrBigger} = useScreenSize();
     return (
         <NavigationBar
             withBorder={withBorder}
-            isInverse={isInverse}
+            variant={variant}
             onBack={() => {}}
             title="Settings"
             right={
@@ -40,6 +42,13 @@ export const Default: StoryComponent<Args> = ({isInverse, withBorder}) => {
 Default.storyName = 'NavigationBar';
 
 Default.args = {
-    isInverse: false,
+    variant: 'default',
     withBorder: true,
 };
+
+Default.argTypes = {
+    variant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
+};