Move Navigation to VerticalNavigation

components/index.js

@@ -238,5 +238,8 @@ export UtilityIcon from './utilities/utility-icon';
 export SLDSTree from './tree';
 export Tree from './tree';
 
+export SLDSVerticalNavigation from './vertical-navigation';
+export VerticalNavigation from './vertical-navigation';
+
 // Library utilities
 export log from '../utilities/log';

components/navigation/index.jsx

@@ -1,142 +1,7 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
 /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-// Implements the [Navigation design pattern](https://lightningdesignsystem.com/components/navigation/) in React.
-// Based on SLDS v2.2.1
+// Alias
+import VerticalNavigation from '../vertical-navigation';
 
-import React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-
-// ### classNames
-// [github.com/JedWatson/classnames](https://github.com/JedWatson/classnames)
-// This project uses `classnames`, 'a simple javascript utility for conditionally
-// joining classNames together.'
-import classNames from 'classnames';
-
-// ### shortid
-// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
-// shortid is a short, non-sequential, url-friendly, unique id generator
-import shortid from 'shortid';
-
-import { NAVIGATION } from '../../utilities/constants';
-
-// Child components
-import Item from './private/item';
-
-/**
- * Navigation represents a list of links that either take the user to another page or parts of the page the user is in.
- */
-const Navigation = createReactClass({
-	displayName: NAVIGATION,
-
-	propTypes: {
-		/**
-		 * HTML id for component. _Tested with snapshot testing._
-		 */
-		id: PropTypes.string,
-		/**
-		 * CSS class names to be added to the container element. _Tested with snapshot testing._
-		 */
-		className: PropTypes.oneOfType([
-			PropTypes.array,
-			PropTypes.object,
-			PropTypes.string,
-		]),
-		/**
-		 * Array of categories. The required shape is: `{id: string, label: string, items: array}`. The required shape of an item is `{id: string, label: string, url: string}`. All item ids are expected to be unique. _Tested with snapshot testing._
-		 */
-		categories: PropTypes.array,
-		/**
-		 * The ID of the item that is currently selected. Defaults to the ID of the first item. _Tested with Mocha framework._
-		 */
-		selectedId: PropTypes.string,
-		/**
-		 * Triggered when the selection changes. It receives an event and an item object in the shape: `event, {item: [object] }`. _Tested with Mocha framework._
-		 */
-		onSelect: PropTypes.func,
-		/**
-		 * Determines component style. _Tested with snapshot testing._
-		 */
-		variant: PropTypes.oneOf(['default', 'shade']),
-	},
-
-	getDefaultProps () {
-		return {
-			variant: 'default',
-		};
-	},
-
-	componentWillMount () {
-		this.generatedId = shortid.generate();
-	},
-
-	getId () {
-		return this.props.id || this.generatedId;
-	},
-
-	getVariant () {
-		return this.props.variant === 'shade' ? 'shade' : 'default';
-	},
-
-	getSelectedId () {
-		const categories = this.props.categories;
-		let selectedId;
-		if (this.props.selectedId) {
-			selectedId = this.props.selectedId;
-		} else if (
-			categories.length > 0 &&
-			categories[0].items &&
-			categories[0].items.length > 0
-		) {
-			selectedId = categories[0].items[0].id;
-		}
-		return selectedId;
-	},
-
-	render () {
-		const rootId = this.getId();
-		const variant = this.getVariant();
-		return (
-			<div
-				id={rootId}
-				className={classNames(
-					'slds-grid',
-					'slds-grid--vertical',
-					'slds-navigation-list--vertical',
-					{
-						'slds-navigation-list--vertical-inverse': variant === 'shade',
-					},
-					this.props.className
-				)}
-			>
-				{this.props.categories.map((category) => {
-					const categoryId = `${rootId}-${category.id}`;
-					const selectedId = this.getSelectedId();
-					return [
-						<h2
-							id={categoryId}
-							key={`${categoryId}-header`}
-							className="slds-text-title--caps slds-p-around--medium"
-						>
-							{category.label}
-						</h2>,
-						<ul key={categoryId}>
-							{category.items.map((item) => (
-								<Item
-									key={item.id}
-									item={item}
-									isSelected={item.id === selectedId}
-									categoryId={categoryId}
-									onSelect={this.props.onSelect}
-								/>
-							))}
-						</ul>,
-					];
-				})}
-			</div>
-		);
-	},
-});
-
-export default Navigation;
+export default VerticalNavigation;

components/site-stories.js

@@ -32,7 +32,6 @@ const documentationSiteLiveExamples = {
 	'menu-dropdown': require('@salesforce/design-system-react/components/menu-dropdown/__docs__/site-stories.js'),
 	'menu-picklist': require('@salesforce/design-system-react/components/menu-picklist/__docs__/site-stories.js'),
 	modal: require('@salesforce/design-system-react/components/modal/__docs__/site-stories.js'),
-	navigation: require('@salesforce/design-system-react/components/navigation/__docs__/site-stories.js'),
 	notification: require('@salesforce/design-system-react/components/notification/__docs__/site-stories.js'),
 	'page-header': require('@salesforce/design-system-react/components/page-header/__docs__/site-stories.js'),
 	panel: require('@salesforce/design-system-react/components/panel/__docs__/site-stories.js'),
@@ -51,6 +50,7 @@ const documentationSiteLiveExamples = {
 	toast: require('@salesforce/design-system-react/components/toast/__docs__/site-stories.js'),
 	tooltip: require('@salesforce/design-system-react/components/tooltip/__docs__/site-stories.js'),
 	tree: require('@salesforce/design-system-react/components/tree/__docs__/site-stories.js'),
+	'vertical-navigation': require('@salesforce/design-system-react/components/vertical-navigation/__docs__/site-stories.js'),
 };
 
 module.exports = documentationSiteLiveExamples;

components/story-based-tests.js

@@ -36,7 +36,6 @@ export DataTable from '../components/data-table/__docs__/storybook-stories';
 export Illustration from '../components/illustration/__docs__/storybook-stories';
 // export Lookup from '../components/lookup/__docs__/storybook-stories';
 // export MediaObject from '../components/media-object/__docs__/storybook-stories';
-// export Navigation from '../components/navigation/__docs__/storybook-stories';
 // export PageHeader from '../components/page-header/__docs__/storybook-stories';
 // export Pill from '../components/pill/__docs__/storybook-stories';
 // export ProgressRing from '../components/progress-ring/__docs__/storybook-stories';
@@ -48,6 +47,7 @@ export Illustration from '../components/illustration/__docs__/storybook-stories'
 // export Toast from '../components/toast/__docs__/storybook-stories';
 // export Tooltip from '../components/tooltip/__docs__/storybook-stories';
 export Tree from '../components/tree/__docs__/storybook-stories';
+// export VerticalNavigation from '../components/vertical-navigation/__docs__/storybook-stories';
 
 /*
  * The following components are not compatible Jest testing because

components/storybook-stories.js

@@ -37,7 +37,6 @@ export Illustration from '../components/illustration/__docs__/storybook-stories'
 export Lookup from '../components/lookup/__docs__/storybook-stories';
 export MediaObject from '../components/media-object/__docs__/storybook-stories';
 export Modal from '../components/modal/__docs__/storybook-stories';
-export Navigation from '../components/navigation/__docs__/storybook-stories';
 export Notification from '../components/notification/__docs__/storybook-stories';
 export PageHeader from '../components/page-header/__docs__/storybook-stories';
 export Panel from '../components/panel/__docs__/storybook-stories';
@@ -56,3 +55,4 @@ export TimePicker from '../components/time-picker/__docs__/storybook-stories';
 export Toast from '../components/toast/__docs__/storybook-stories';
 export Tooltip from '../components/tooltip/__docs__/storybook-stories';
 export Tree from '../components/tree/__docs__/storybook-stories';
+export VerticalNavigation from '../components/vertical-navigation/__docs__/storybook-stories';

components/navigation/__docs__/site-stories.js → components/vertical-navigation/__docs__/site-stories.js

@@ -4,8 +4,8 @@
 /* eslint-disable global-require */
 
 const siteStories = [
-	require('raw-loader!@salesforce/design-system-react/components/navigation/__examples__/default.jsx'),
-	require('raw-loader!@salesforce/design-system-react/components/navigation/__examples__/shade.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/vertical-navigation/__examples__/default.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/vertical-navigation/__examples__/shade.jsx'),
 ];
 
 module.exports = siteStories;

components/navigation/__docs__/storybook-stories.jsx → components/vertical-navigation/__docs__/storybook-stories.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { storiesOf, action } from '@storybook/react';
 import IconSettings from '../../icon-settings';
 
-import { NAVIGATION } from '../../../utilities/constants';
+import { VERTICAL_NAVIGATION } from '../../../utilities/constants';
 
 import Default from '../__examples__/default';
 import Shade from '../__examples__/shade';
 import SnaphotDefault from '../__examples__/snapshot-default';
 
-storiesOf(NAVIGATION, module)
+storiesOf(VERTICAL_NAVIGATION, module)
 	.addDecorator((getStory) => (
 		<div className="slds-p-around--medium">
 			<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>

components/navigation/__examples__/default.jsx → components/vertical-navigation/__examples__/default.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import IconSettings from '~/components/icon-settings';
-import Navigation from '~/components/navigation';
+import VerticalNavigation from '~/components/vertical-navigation';
 
 const sampleReportCategories = [
 	{
@@ -40,7 +40,7 @@ const Example = createReactClass({
 		return (
 			<IconSettings iconPath="/assets/icons">
 				<div style={{ width: '320px' }}>
-					<Navigation
+					<VerticalNavigation
 						id="sample-navigation"
 						categories={sampleReportCategories}
 						selectedId={this.state.selectedId}

components/navigation/__examples__/shade.jsx → components/vertical-navigation/__examples__/shade.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import createReactClass from 'create-react-class';
 import IconSettings from '~/components/icon-settings';
-import Navigation from '~/components/navigation';
+import VerticalNavigation from '~/components/vertical-navigation';
 
 const sampleSearchCategories = [
 	{
@@ -45,7 +45,7 @@ const Example = createReactClass({
 		return (
 			<IconSettings iconPath="/assets/icons">
 				<div style={{ width: '320px', backgroundColor: '#FAFAFB' }}>
-					<Navigation
+					<VerticalNavigation
 						id="sample-navigation"
 						variant="shade"
 						categories={sampleSearchCategories}

components/navigation/__examples__/snapshot-default.jsx → components/vertical-navigation/__examples__/snapshot-default.jsx

@@ -3,18 +3,18 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 
 // Higher Order Components such as `react-onclickoutside` use the DOM and Jest snapshot testing must be DOMless
-import Navigation from '~/components/navigation';
+import VerticalNavigation from '~/components/vertical-navigation';
 import IconSettings from '~/components/icon-settings';
 
-import { sampleReportCategories } from '~/utilities/sample-data/navigation';
+import { sampleReportCategories } from '~/utilities/sample-data/vertical-navigation';
 
 const Example = createReactClass({
 	displayName: 'NavigationExample',
 
 	render () {
 		return (
 			<IconSettings iconPath="/assets/icons">
-				<Navigation
+				<VerticalNavigation
 					id="sample-navigation"
 					categories={sampleReportCategories}
 					{...this.props}

components/navigation/__tests__/navigation.browser-test.jsx → components/vertical-navigation/__tests__/navigation.browser-test.jsx

@@ -23,8 +23,8 @@ import {
 	unmountComponent,
 } from '../../../tests/enzyme-helpers';
 
-import { sampleReportCategories } from '../../../utilities/sample-data/navigation';
-import Navigation from '../../navigation';
+import { sampleReportCategories } from '../../../utilities/sample-data/vertical-navigation';
+import VerticalNavigation from '../../vertical-navigation';
 
 // shim for PhantomJS
 if (!Object.entries) {
@@ -63,11 +63,11 @@ const DemoComponent = createReactClass({
 	// event handlers
 
 	render () {
-		return <Navigation {...this.props} />;
+		return <VerticalNavigation {...this.props} />;
 	},
 });
 
-describe('SLDSNavigation', () => {
+describe('SLDSVerticalNavigation', () => {
 	describe('Assistive technology', () => {
 		/* Detect if presence of accessibility features such as ARIA
 		 * roles and screen reader text is present in the DOM.