bug(global navigation): fix storybook examples, update to new syntax (#4702)

Author: kflournoy-sf

ui/components/global-navigation/docs.mdx

@@ -4,13 +4,13 @@ import Blockquote from '../../../shared/components/Blockquote';
 import { NavBarItem } from './navigation-bar/';
 import * as NavExamples from './navigation-bar/example';
 import * as NavTabBarExamples from './navigation-tab-bar/example';
-import { getDisplayElementById } from '../../shared/helpers';
+import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
 
 <div className="doc lead">
   Global Navigation is the list of navigation links your users find in the Header on every page in Salesforce. Your Global Navigation includes a Navigation Bar where your users find the App Launcher, App Name, and Pages that each App includes.
 </div>
 
-<CodeView exampleOnly demoStyles="height: 15rem;">
+<CodeView exampleOnly demoStyles={getDemoStylesById(NavExamples.default, 'default')}>
   {getDisplayElementById(NavExamples.default)}
 </CodeView>
 
@@ -23,7 +23,7 @@ The navigation bar is composed of a wrapper and 2 required regions:
 
 The markup should follow the order listed above for proper keyboard interaction set by the 508 compliance standards. Each included region inside the wrapper of `.slds-context-bar` needs the appropriate ordering class name, e.g. `.slds-context-bar__primary`.
 
-<CodeView demoStyles="height: 16rem;">
+<CodeView demoStyles={getDemoStylesById(NavExamples.default, 'default')}>
   {getDisplayElementById(NavExamples.default)}
 </CodeView>
 
@@ -108,7 +108,7 @@ Alternatively, two classes are available to add border using css. Adding the cla
 
 #### Menu Open
 
-<CodeView demoStyles="height: 16rem;">
+<CodeView demoStyles={getDemoStylesById(NavExamples.states, 'item-menu-open')}>
   {getDisplayElementById(NavExamples.states, 'item-menu-open')}
 </CodeView>
 

ui/components/global-navigation/navigation-bar/example.jsx

@@ -4,20 +4,28 @@
 import React from 'react';
 import GlobalNavigation, { ContextBar, NavBarItem } from './';
 
+const demoName = 'Navigation Bar - ';
+
 /* -----------------------------------------------------------------------------
     Exports
 ----------------------------------------------------------------------------- */
 
-export const Context = props => (
-  <div style={{ height: '16rem' }}>{props.children}</div>
-);
+const defaultComponent = <GlobalNavigation />;
 
-export default <GlobalNavigation />;
+export default [
+  {
+    id: 'default',
+    label: demoName + 'Default',
+    demoStyles: 'height: 16rem;',
+    storybookStyles: false,
+    element: defaultComponent
+  }
+];
 
 export let states = [
   {
     id: 'item-active',
-    label: 'Item Active',
+    label: demoName + 'Item Active',
     element: (
       <ContextBar>
         <NavBarItem label="Menu Item" hasNavMenu />
@@ -29,7 +37,9 @@ export let states = [
   },
   {
     id: 'item-menu-open',
-    label: 'Item Menu Open',
+    label: demoName + 'Item Menu Open',
+    demoStyles: 'height: 16rem;',
+    storybookStyles: true,
     element: <GlobalNavigation hasNavMenuOpen />
   }
 ];

ui/components/global-navigation/navigation-bar/index.jsx

@@ -71,7 +71,7 @@ export const NavBarItem = props => {
 };
 
 NavBarItem.defaultProps = {
-  lable: 'Menu Item',
+  label: 'Menu Item',
   hasMenuDropdown: true
 };