@automattic/vip-design-system 2.4.1 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/build/system/MobileMenu/MobileMenu.js +1 -1
  2. package/build/system/MobileMenu/MobileMenu.stories.js +109 -101
  3. package/build/system/Nav/Nav.d.ts +2 -1
  4. package/build/system/Nav/Nav.js +7 -0
  5. package/build/system/Nav/Nav.stories.d.ts +1 -0
  6. package/build/system/Nav/styles/variants/menu.js +1 -1
  7. package/build/system/Nav/styles.js +9 -0
  8. package/package.json +2 -2
  9. package/src/system/MobileMenu/MobileMenu.stories.tsx +89 -80
  10. package/src/system/MobileMenu/MobileMenu.tsx +2 -2
  11. package/src/system/Nav/Nav.tsx +15 -1
  12. package/src/system/Nav/styles/variants/menu.ts +1 -1
  13. package/src/system/Nav/styles.ts +11 -0
package/build/system/MobileMenu/MobileMenu.js CHANGED
@@ -55,7 +55,7 @@ var MobileMenu = exports.MobileMenu = /*#__PURE__*/(0, _react.forwardRef)(functi
55
55
  width: '100%',
56
56
  flexDirection: 'column'
57
57
  },
58
- children: [toolbarItems && (0, _jsxRuntime.jsx)(_index.Nav.Primary, {
58
+ children: [toolbarItems && (0, _jsxRuntime.jsx)(_index.Nav.PrimaryInverse, {
59
59
  label: "Main Links",
60
60
  orientation: "vertical",
61
61
  children: toolbarItems
package/build/system/MobileMenu/MobileMenu.stories.js CHANGED
@@ -40,126 +40,134 @@ var MobileMenuExample = exports.MobileMenuExample = function MobileMenuExample()
40
40
  children: "My Organizations"
41
41
  })]
42
42
  }),
43
- children: (0, _jsxRuntime.jsxs)(_.Nav.Menu, {
43
+ children: (0, _jsxRuntime.jsx)(_.Flex, {
44
44
  sx: {
45
- mb: 4
45
+ gap: 3,
46
+ px: 5,
47
+ py: 0,
48
+ flexDirection: 'column'
46
49
  },
47
- label: "Nav Menu",
48
- children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
49
- href: "https://wordpress.com",
50
- renderIcon: function renderIcon(size) {
51
- return (0, _jsxRuntime.jsx)(_bi.BiGridAlt, {
52
- size: size
53
- });
54
- },
55
- as: _CustomLink.CustomLink,
56
- children: "Overview"
57
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
58
- as: _CustomLink.CustomLink,
59
- href: "https://random-website.com/",
60
- renderIcon: function renderIcon(size) {
61
- return (0, _jsxRuntime.jsx)(_bi.BiWindows, {
62
- size: size
63
- });
64
- },
65
- children: "Network Sites"
66
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
67
- as: _CustomLink.CustomLink,
68
- href: "https://random-website.com/",
69
- renderIcon: function renderIcon(size) {
70
- return (0, _jsxRuntime.jsx)(_ai.AiOutlineLock, {
71
- size: size
72
- });
73
- },
74
- children: "Domains & TLS"
75
- }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
76
- active: true,
77
- label: "Logs",
78
- renderIcon: function renderIcon(size) {
79
- return (0, _jsxRuntime.jsx)(_bi.BiHistory, {
80
- size: size
81
- });
50
+ children: (0, _jsxRuntime.jsxs)(_.Nav.Menu, {
51
+ sx: {
52
+ mb: 4
82
53
  },
54
+ label: "Nav Menu",
83
55
  children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
56
+ href: "https://wordpress.com",
57
+ renderIcon: function renderIcon(size) {
58
+ return (0, _jsxRuntime.jsx)(_bi.BiGridAlt, {
59
+ size: size
60
+ });
61
+ },
84
62
  as: _CustomLink.CustomLink,
85
- href: "https://google.com/",
86
- children: "Audit"
63
+ children: "Overview"
87
64
  }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
65
+ as: _CustomLink.CustomLink,
66
+ href: "https://random-website.com/",
67
+ renderIcon: function renderIcon(size) {
68
+ return (0, _jsxRuntime.jsx)(_bi.BiWindows, {
69
+ size: size
70
+ });
71
+ },
72
+ children: "Network Sites"
73
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
74
+ as: _CustomLink.CustomLink,
75
+ href: "https://random-website.com/",
76
+ renderIcon: function renderIcon(size) {
77
+ return (0, _jsxRuntime.jsx)(_ai.AiOutlineLock, {
78
+ size: size
79
+ });
80
+ },
81
+ children: "Domains & TLS"
82
+ }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
88
83
  active: true,
84
+ label: "Logs",
85
+ renderIcon: function renderIcon(size) {
86
+ return (0, _jsxRuntime.jsx)(_bi.BiHistory, {
87
+ size: size
88
+ });
89
+ },
90
+ children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
91
+ as: _CustomLink.CustomLink,
92
+ href: "https://google.com/",
93
+ children: "Audit"
94
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
95
+ active: true,
96
+ as: _CustomLink.CustomLink,
97
+ href: "https://wpvip.com/",
98
+ children: "Runtime"
99
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
100
+ as: _CustomLink.CustomLink,
101
+ href: "https://dashboard.wpvip.com/",
102
+ children: "Slow Query"
103
+ })]
104
+ }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
105
+ label: "Performance",
106
+ renderIcon: function renderIcon(size) {
107
+ return (0, _jsxRuntime.jsx)(_bi.BiTachometer, {
108
+ size: size
109
+ });
110
+ },
111
+ children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
112
+ as: _CustomLink.CustomLink,
113
+ href: "https://random-website.com/",
114
+ children: "Metrics"
115
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
116
+ as: _CustomLink.CustomLink,
117
+ href: "https://random-website.com/",
118
+ children: "Monitor"
119
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
120
+ as: _CustomLink.CustomLink,
121
+ href: "https://random-website.com/",
122
+ children: "Cache"
123
+ })]
124
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
89
125
  as: _CustomLink.CustomLink,
90
- href: "https://wpvip.com/",
91
- children: "Runtime"
126
+ href: "https://random-website.com/",
127
+ renderIcon: function renderIcon(size) {
128
+ return (0, _jsxRuntime.jsx)(_bi.BiCodeAlt, {
129
+ size: size
130
+ });
131
+ },
132
+ children: "Code [v]"
92
133
  }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
93
134
  as: _CustomLink.CustomLink,
94
- href: "https://dashboard.wpvip.com/",
95
- children: "Slow Query"
96
- })]
97
- }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
98
- label: "Performance",
99
- renderIcon: function renderIcon(size) {
100
- return (0, _jsxRuntime.jsx)(_bi.BiTachometer, {
101
- size: size
102
- });
103
- },
104
- children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
135
+ href: "https://random-website.com/",
136
+ renderIcon: function renderIcon(size) {
137
+ return (0, _jsxRuntime.jsx)(_bi.BiData, {
138
+ size: size
139
+ });
140
+ },
141
+ children: "Database [v]"
142
+ }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
105
143
  as: _CustomLink.CustomLink,
106
144
  href: "https://random-website.com/",
107
- children: "Metrics"
145
+ renderIcon: function renderIcon(size) {
146
+ return (0, _jsxRuntime.jsx)(_md.MdOutlinePhotoLibrary, {
147
+ size: size
148
+ });
149
+ },
150
+ children: "Media [v]"
108
151
  }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
109
152
  as: _CustomLink.CustomLink,
110
153
  href: "https://random-website.com/",
111
- children: "Monitor"
154
+ renderIcon: function renderIcon(size) {
155
+ return (0, _jsxRuntime.jsx)(_bi.BiBell, {
156
+ size: size
157
+ });
158
+ },
159
+ children: "Notifications"
112
160
  }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
113
161
  as: _CustomLink.CustomLink,
114
162
  href: "https://random-website.com/",
115
- children: "Cache"
163
+ renderIcon: function renderIcon(size) {
164
+ return (0, _jsxRuntime.jsx)(_bi.BiBulb, {
165
+ size: size
166
+ });
167
+ },
168
+ children: "Features"
116
169
  })]
117
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
118
- as: _CustomLink.CustomLink,
119
- href: "https://random-website.com/",
120
- renderIcon: function renderIcon(size) {
121
- return (0, _jsxRuntime.jsx)(_bi.BiCodeAlt, {
122
- size: size
123
- });
124
- },
125
- children: "Code [v]"
126
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
127
- as: _CustomLink.CustomLink,
128
- href: "https://random-website.com/",
129
- renderIcon: function renderIcon(size) {
130
- return (0, _jsxRuntime.jsx)(_bi.BiData, {
131
- size: size
132
- });
133
- },
134
- children: "Database [v]"
135
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
136
- as: _CustomLink.CustomLink,
137
- href: "https://random-website.com/",
138
- renderIcon: function renderIcon(size) {
139
- return (0, _jsxRuntime.jsx)(_md.MdOutlinePhotoLibrary, {
140
- size: size
141
- });
142
- },
143
- children: "Media [v]"
144
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
145
- as: _CustomLink.CustomLink,
146
- href: "https://random-website.com/",
147
- renderIcon: function renderIcon(size) {
148
- return (0, _jsxRuntime.jsx)(_bi.BiBell, {
149
- size: size
150
- });
151
- },
152
- children: "Notifications"
153
- }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
154
- as: _CustomLink.CustomLink,
155
- href: "https://random-website.com/",
156
- renderIcon: function renderIcon(size) {
157
- return (0, _jsxRuntime.jsx)(_bi.BiBulb, {
158
- size: size
159
- });
160
- },
161
- children: "Features"
162
- })]
170
+ })
163
171
  })
164
172
  })]
165
173
  });
package/build/system/Nav/Nav.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  /** @jsxImportSource theme-ui */
3
3
  import * as NavigationMenu from '@radix-ui/react-navigation-menu';
4
4
  export declare const VIP_NAV = "vip-nav-component";
5
- export type NavVariant = 'primary' | 'tabs' | 'toolbar' | 'menu' | 'menu-inverse' | 'breadcrumbs';
5
+ export type NavVariant = 'primary' | 'tabs' | 'toolbar' | 'menu' | 'menu-inverse' | 'breadcrumbs' | 'primary-inverse';
6
6
  export interface NavProps extends NavigationMenu.NavigationMenuProps {
7
7
  className?: string;
8
8
  variant?: NavVariant;
@@ -12,6 +12,7 @@ export interface NavProps extends NavigationMenu.NavigationMenuProps {
12
12
  export type NavItemRenderIconProp = (size: number) => JSX.Element | null;
13
13
  export declare const Nav: {
14
14
  Primary: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
15
+ PrimaryInverse: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
15
16
  Tab: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
16
17
  Toolbar: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
17
18
  Menu: import("react").ForwardRefExoticComponent<NavProps & import("react").RefAttributes<HTMLElement>>;
package/build/system/Nav/Nav.js CHANGED
@@ -39,6 +39,12 @@ var NavPrimary = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
39
39
  ref: ref
40
40
  }));
41
41
  });
42
+ var NavPrimaryInverse = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
43
+ return (0, _jsxRuntime.jsx)(NavBase, _extends({}, props, {
44
+ variant: "primary-inverse",
45
+ ref: ref
46
+ }));
47
+ });
42
48
  var NavTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
43
49
  return (0, _jsxRuntime.jsx)(NavBase, _extends({}, props, {
44
50
  variant: "tabs",
@@ -60,6 +66,7 @@ var NavMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
60
66
  });
61
67
  var Nav = exports.Nav = {
62
68
  Primary: NavPrimary,
69
+ PrimaryInverse: NavPrimaryInverse,
63
70
  Tab: NavTab,
64
71
  Toolbar: NavToolbar,
65
72
  Menu: NavMenu
package/build/system/Nav/Nav.stories.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const _default: {
5
5
  title: string;
6
6
  component: {
7
7
  Primary: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
8
+ PrimaryInverse: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
8
9
  Tab: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
9
10
  Toolbar: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
10
11
  Menu: import("react").ForwardRefExoticComponent<import("./Nav").NavProps & import("react").RefAttributes<HTMLElement>>;
package/build/system/Nav/styles/variants/menu.js CHANGED
@@ -28,7 +28,7 @@ var menuInverseItemStyles = exports.menuInverseItemStyles = function menuInverse
28
28
  return _extends({}, menuItemStyles(orientation), {
29
29
  width: '100%',
30
30
  mr: 0,
31
- height: 45,
31
+ height: 38,
32
32
  color: 'toolbar.text.default'
33
33
  });
34
34
  };
package/build/system/Nav/styles.js CHANGED
@@ -88,6 +88,15 @@ var navStyles = exports.navStyles = function navStyles(variant, orientation) {
88
88
  navStyle = _toolbar.toolbarRootStyles;
89
89
  }
90
90
  break;
91
+ case 'primary-inverse':
92
+ {
93
+ navStyle = _extends({}, _primary.defaultNavRootStyles, {
94
+ px: 5,
95
+ pt: 2,
96
+ pb: 4
97
+ });
98
+ }
99
+ break;
91
100
  default:
92
101
  {
93
102
  navStyle = _primary.defaultNavRootStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.4.1",
3
+ "version": "2.4.2",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
@@ -15,7 +15,7 @@
15
15
  "format:check": "npm run cmd:format -- --check",
16
16
  "jest": "NODE_ENV=test jest --env=jsdom",
17
17
  "jest:coverage": "npm run jest && open-cli ./coverage/index.html",
18
- "jest:watch": "npm run jest --watch",
18
+ "jest:watch": "npm run jest -- --watch",
19
19
  "theme-builder-copy": "npm run theme-builder-copy-light && npm run theme-builder-copy-dark",
20
20
  "theme-builder-copy-light": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-light.json build/system/theme/generated/valet-theme-light.json",
21
21
  "theme-builder-copy-dark": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-dark.json build/system/theme/generated/valet-theme-dark.json",
package/src/system/MobileMenu/MobileMenu.stories.tsx CHANGED
@@ -14,7 +14,7 @@ import {
14
14
  import { MdOutlinePhotoLibrary } from 'react-icons/md';
15
15
 
16
16
  import { MobileMenu, MobileMenuTrigger, MobileMenuWrapper } from './MobileMenu';
17
- import { Nav, NavItem } from '..';
17
+ import { Flex, Nav, NavItem } from '..';
18
18
  import { CustomLink } from '../utils/stories/CustomLink';
19
19
 
20
20
  import type { StoryObj } from '@storybook/react';
@@ -73,91 +73,100 @@ export const MobileMenuExample = () => (
73
73
  </>
74
74
  }
75
75
  >
76
- <Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
77
- <NavItem.Menu
78
- href="https://wordpress.com"
79
- renderIcon={ size => <BiGridAlt size={ size } /> }
80
- as={ CustomLink }
81
- >
82
- Overview
83
- </NavItem.Menu>
84
- <NavItem.Menu
85
- as={ CustomLink }
86
- href="https://random-website.com/"
87
- renderIcon={ size => <BiWindows size={ size } /> }
88
- >
89
- Network Sites
90
- </NavItem.Menu>
91
- <NavItem.Menu
92
- as={ CustomLink }
93
- href="https://random-website.com/"
94
- renderIcon={ size => <AiOutlineLock size={ size } /> }
95
- >
96
- Domains & TLS
97
- </NavItem.Menu>
98
-
99
- <NavItem.MenuGroup active label="Logs" renderIcon={ size => <BiHistory size={ size } /> }>
100
- <NavItem.Menu as={ CustomLink } href="https://google.com/">
101
- Audit
76
+ <Flex
77
+ sx={ {
78
+ gap: 3,
79
+ px: 5,
80
+ py: 0,
81
+ flexDirection: 'column',
82
+ } }
83
+ >
84
+ <Nav.Menu sx={ { mb: 4 } } label="Nav Menu">
85
+ <NavItem.Menu
86
+ href="https://wordpress.com"
87
+ renderIcon={ size => <BiGridAlt size={ size } /> }
88
+ as={ CustomLink }
89
+ >
90
+ Overview
102
91
  </NavItem.Menu>
103
- <NavItem.Menu active as={ CustomLink } href="https://wpvip.com/">
104
- Runtime
92
+ <NavItem.Menu
93
+ as={ CustomLink }
94
+ href="https://random-website.com/"
95
+ renderIcon={ size => <BiWindows size={ size } /> }
96
+ >
97
+ Network Sites
105
98
  </NavItem.Menu>
106
- <NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
107
- Slow Query
99
+ <NavItem.Menu
100
+ as={ CustomLink }
101
+ href="https://random-website.com/"
102
+ renderIcon={ size => <AiOutlineLock size={ size } /> }
103
+ >
104
+ Domains & TLS
108
105
  </NavItem.Menu>
109
- </NavItem.MenuGroup>
110
-
111
- <NavItem.MenuGroup
112
- label="Performance"
113
- renderIcon={ size => <BiTachometer size={ size } /> }
114
- >
115
- <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
116
- Metrics
106
+
107
+ <NavItem.MenuGroup active label="Logs" renderIcon={ size => <BiHistory size={ size } /> }>
108
+ <NavItem.Menu as={ CustomLink } href="https://google.com/">
109
+ Audit
110
+ </NavItem.Menu>
111
+ <NavItem.Menu active as={ CustomLink } href="https://wpvip.com/">
112
+ Runtime
113
+ </NavItem.Menu>
114
+ <NavItem.Menu as={ CustomLink } href="https://dashboard.wpvip.com/">
115
+ Slow Query
116
+ </NavItem.Menu>
117
+ </NavItem.MenuGroup>
118
+
119
+ <NavItem.MenuGroup
120
+ label="Performance"
121
+ renderIcon={ size => <BiTachometer size={ size } /> }
122
+ >
123
+ <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
124
+ Metrics
125
+ </NavItem.Menu>
126
+ <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
127
+ Monitor
128
+ </NavItem.Menu>
129
+ <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
130
+ Cache
131
+ </NavItem.Menu>
132
+ </NavItem.MenuGroup>
133
+ <NavItem.Menu
134
+ as={ CustomLink }
135
+ href="https://random-website.com/"
136
+ renderIcon={ size => <BiCodeAlt size={ size } /> }
137
+ >
138
+ Code [v]
139
+ </NavItem.Menu>
140
+ <NavItem.Menu
141
+ as={ CustomLink }
142
+ href="https://random-website.com/"
143
+ renderIcon={ size => <BiData size={ size } /> }
144
+ >
145
+ Database [v]
146
+ </NavItem.Menu>
147
+ <NavItem.Menu
148
+ as={ CustomLink }
149
+ href="https://random-website.com/"
150
+ renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
151
+ >
152
+ Media [v]
117
153
  </NavItem.Menu>
118
- <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
119
- Monitor
154
+ <NavItem.Menu
155
+ as={ CustomLink }
156
+ href="https://random-website.com/"
157
+ renderIcon={ size => <BiBell size={ size } /> }
158
+ >
159
+ Notifications
120
160
  </NavItem.Menu>
121
- <NavItem.Menu as={ CustomLink } href="https://random-website.com/">
122
- Cache
161
+ <NavItem.Menu
162
+ as={ CustomLink }
163
+ href="https://random-website.com/"
164
+ renderIcon={ size => <BiBulb size={ size } /> }
165
+ >
166
+ Features
123
167
  </NavItem.Menu>
124
- </NavItem.MenuGroup>
125
- <NavItem.Menu
126
- as={ CustomLink }
127
- href="https://random-website.com/"
128
- renderIcon={ size => <BiCodeAlt size={ size } /> }
129
- >
130
- Code [v]
131
- </NavItem.Menu>
132
- <NavItem.Menu
133
- as={ CustomLink }
134
- href="https://random-website.com/"
135
- renderIcon={ size => <BiData size={ size } /> }
136
- >
137
- Database [v]
138
- </NavItem.Menu>
139
- <NavItem.Menu
140
- as={ CustomLink }
141
- href="https://random-website.com/"
142
- renderIcon={ size => <MdOutlinePhotoLibrary size={ size } /> }
143
- >
144
- Media [v]
145
- </NavItem.Menu>
146
- <NavItem.Menu
147
- as={ CustomLink }
148
- href="https://random-website.com/"
149
- renderIcon={ size => <BiBell size={ size } /> }
150
- >
151
- Notifications
152
- </NavItem.Menu>
153
- <NavItem.Menu
154
- as={ CustomLink }
155
- href="https://random-website.com/"
156
- renderIcon={ size => <BiBulb size={ size } /> }
157
- >
158
- Features
159
- </NavItem.Menu>
160
- </Nav.Menu>
168
+ </Nav.Menu>
169
+ </Flex>
161
170
  </MobileMenu>
162
171
  </MobileMenuWrapper>
163
172
  );
package/src/system/MobileMenu/MobileMenu.tsx CHANGED
@@ -53,9 +53,9 @@ export const MobileMenu = forwardRef< HTMLDivElement, MobileMenuProps >(
53
53
  >
54
54
  <Flex sx={ { width: '100%', flexDirection: 'column' } }>
55
55
  { toolbarItems && (
56
- <Nav.Primary label="Main Links" orientation="vertical">
56
+ <Nav.PrimaryInverse label="Main Links" orientation="vertical">
57
57
  { toolbarItems }
58
- </Nav.Primary>
58
+ </Nav.PrimaryInverse>
59
59
  ) }
60
60
 
61
61
  <Box
package/src/system/Nav/Nav.tsx CHANGED
@@ -6,7 +6,14 @@ import { Ref, forwardRef } from 'react';
6
6
  import { navMenuListStyles, navStyles } from './styles';
7
7
 
8
8
  export const VIP_NAV = 'vip-nav-component';
9
- export type NavVariant = 'primary' | 'tabs' | 'toolbar' | 'menu' | 'menu-inverse' | 'breadcrumbs';
9
+ export type NavVariant =
10
+ | 'primary'
11
+ | 'tabs'
12
+ | 'toolbar'
13
+ | 'menu'
14
+ | 'menu-inverse'
15
+ | 'breadcrumbs'
16
+ | 'primary-inverse';
10
17
 
11
18
  export interface NavProps extends NavigationMenu.NavigationMenuProps {
12
19
  className?: string;
@@ -43,6 +50,12 @@ const NavPrimary = forwardRef< HTMLElement, NavProps >(
43
50
  )
44
51
  );
45
52
 
53
+ const NavPrimaryInverse = forwardRef< HTMLElement, NavProps >(
54
+ ( props: NavProps, ref: Ref< HTMLElement > ) => (
55
+ <NavBase { ...props } variant="primary-inverse" ref={ ref } />
56
+ )
57
+ );
58
+
46
59
  const NavTab = forwardRef< HTMLElement, NavProps >(
47
60
  ( props: NavProps, ref: Ref< HTMLElement > ) => (
48
61
  <NavBase { ...props } variant="tabs" ref={ ref } />
@@ -65,6 +78,7 @@ export type NavItemRenderIconProp = ( size: number ) => JSX.Element | null;
65
78
 
66
79
  export const Nav = {
67
80
  Primary: NavPrimary,
81
+ PrimaryInverse: NavPrimaryInverse,
68
82
  Tab: NavTab,
69
83
  Toolbar: NavToolbar,
70
84
  Menu: NavMenu,
package/src/system/Nav/styles/variants/menu.ts CHANGED
@@ -30,7 +30,7 @@ export const menuInverseItemStyles = (
30
30
  ...menuItemStyles( orientation ),
31
31
  width: '100%',
32
32
  mr: 0,
33
- height: 45,
33
+ height: 38,
34
34
  color: 'toolbar.text.default',
35
35
  } );
36
36
 
package/src/system/Nav/styles.ts CHANGED
@@ -104,6 +104,17 @@ export const navStyles = (
104
104
  navStyle = toolbarRootStyles;
105
105
  }
106
106
 
107
+ break;
108
+ case 'primary-inverse':
109
+ {
110
+ navStyle = {
111
+ ...defaultNavRootStyles,
112
+ px: 5,
113
+ pt: 2,
114
+ pb: 4,
115
+ };
116
+ }
117
+
107
118
  break;
108
119
  default: {
109
120
  navStyle = defaultNavRootStyles;