Fix CommonJS constant import

INPUT and NAVIGATION
CHECKBOX and TEXTAREA imports/exports

Author: interactivellama

components/checkbox/__docs__/storybook-stories.jsx

@@ -3,14 +3,14 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import IconSettings from '../../icon-settings';
 
-import { FORMS_CHECKBOX } from '../../../utilities/constants';
+import { CHECKBOX } from '../../../utilities/constants';
 import Checkbox from '../';
 import Button from '../../button';
 
 import DefaultCheckbox from '../__examples__/default';
 
 class CheckboxIndeterminate extends React.Component {
-	static displayName = `${FORMS_CHECKBOX}_INDETERMINATE`;
+	static displayName = `${CHECKBOX}_INDETERMINATE`;
 
 	state = {
 		indeterminate: true,
@@ -106,7 +106,7 @@ class CheckboxIndeterminate extends React.Component {
 	}
 }
 
-storiesOf(FORMS_CHECKBOX, module)
+storiesOf(CHECKBOX, module)
 	.addDecorator((getStory) => (
 		<div className="slds-p-around--medium">
 			<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>

components/checkbox/index.jsx

@@ -22,7 +22,7 @@ import EventUtil from '../../utilities/event';
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
-import { FORMS_CHECKBOX } from '../../utilities/constants';
+import { CHECKBOX } from '../../utilities/constants';
 
 const propTypes = {
 	/**
@@ -159,7 +159,7 @@ const defaultProps = {
  */
 class Checkbox extends React.Component {
 	componentWillMount () {
-		checkProps(FORMS_CHECKBOX, this.props);
+		checkProps(CHECKBOX, this.props);
 		this.generatedId = shortid.generate();
 	}
 
@@ -384,7 +384,7 @@ class Checkbox extends React.Component {
 	}
 }
 
-Checkbox.displayName = FORMS_CHECKBOX;
+Checkbox.displayName = CHECKBOX;
 Checkbox.propTypes = propTypes;
 Checkbox.defaultProps = defaultProps;
 

components/input/__docs__/storybook-stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf, action } from '@storybook/react';
 
-import { FORMS_INPUT } from '../../../utilities/constants';
+import { INPUT } from '../../../utilities/constants';
 import Button from '../../button';
 import IconSettings from '../../icon-settings';
 import Input from '../';
@@ -38,7 +38,7 @@ const searchIconClickable = (
 	/>
 );
 
-storiesOf(FORMS_INPUT, module)
+storiesOf(INPUT, module)
 	.addDecorator((getStory) => (
 		<div className="slds-p-around--medium">{getStory()}</div>
 	))

components/input/check-props.js

@@ -8,13 +8,13 @@ import sunsetProperty from '../../utilities/warning/sunset-property';
 // import oneOfRequiredProperty from '../../../utilities/warning/one-of-required-property';
 import onlyOneOfProperties from '../../utilities/warning/only-one-of-properties';
 
-import { FORMS_INPUT, FORMS_SEARCH } from '../../utilities/constants';
+import { INPUT, SEARCH } from '../../utilities/constants';
 
 let checkProps = function () {};
 
 if (process.env.NODE_ENV !== 'production') {
 	checkProps = function (COMPONENT, props) {
-		if (COMPONENT === FORMS_INPUT) {
+		if (COMPONENT === INPUT) {
 			// Deprecated and changed to another property
 			deprecatedProperty(
 				COMPONENT,
@@ -81,7 +81,7 @@ if (process.env.NODE_ENV !== 'production') {
 				});
 			}
 			*/
-		} else if (COMPONENT === FORMS_SEARCH) {
+		} else if (COMPONENT === SEARCH) {
 			if (typeof props.assistiveText === 'string') {
 				sunsetProperty(
 					COMPONENT,

components/input/index.jsx

@@ -34,7 +34,7 @@ import Label from '../utilities/label';
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
-import { FORMS_INPUT } from '../../utilities/constants';
+import { INPUT } from '../../utilities/constants';
 
 const defaultProps = {
 	assistiveText: {
@@ -47,7 +47,7 @@ const defaultProps = {
  * The HTML `input` with a label and error messaging.
  */
 const Input = createReactClass({
-	displayName: FORMS_INPUT,
+	displayName: INPUT,
 
 	propTypes: {
 		/**
@@ -279,7 +279,7 @@ const Input = createReactClass({
 
 	componentWillMount () {
 		// `checkProps` issues warnings to developers about properties (similar to React's built in development tools)
-		checkProps(FORMS_INPUT, this.props);
+		checkProps(INPUT, this.props);
 
 		this.generatedId = shortid.generate();
 		if (this.props.errorText) {

components/navigation/index.jsx

@@ -4,9 +4,9 @@
 // Alias
 import VerticalNavigation from '../vertical-navigation';
 import componentHasMoved from '../../utilities/warning/component-has-moved';
-import { NAVIGATION } from '../../utilities/constants';
+import { VERTICAL_NAVIGATION } from '../../utilities/constants';
 
-componentHasMoved(NAVIGATION, {
+componentHasMoved(VERTICAL_NAVIGATION, {
 	oldFileLocation: 'components/navigation',
 	newFileLocation: 'components/vertical-navigation',
 });

components/textarea/index.jsx

@@ -29,13 +29,13 @@ import shortid from 'shortid';
 // This component's `checkProps` which issues warnings to developers about properties when in development mode (similar to React's built in development tools)
 import checkProps from './check-props';
 
-import { FORMS_TEXTAREA } from '../../utilities/constants';
+import { TEXTAREA } from '../../utilities/constants';
 
 /**
  * A multi-line plain-text editing control.
  */
 const Textarea = createReactClass({
-	displayName: FORMS_TEXTAREA,
+	displayName: TEXTAREA,
 
 	propTypes: {
 		/**

utilities/constants.js

@@ -35,7 +35,7 @@ export const DIALOG = 'SLDSDialog';
 export const FILTER = 'SLDSFilter';
 export const FORMS_CHECKBOX = 'SLDSCheckbox';
 export const FORMS_INLINE_EDIT = 'SLDSInlineEdit';
-export const FORMS_INPUT = 'SLDSInput';
+export const INPUT = 'SLDSInput';
 export const FORMS_TEXTAREA = 'SLDSTextarea';
 export const FORMS_SEARCH = 'SLDSSearch';
 export const GLOBAL_HEADER = 'SLDSGlobalHeader';

utilities/warning/is-trigger-tabbable.js

@@ -10,9 +10,9 @@ import {
 	BUTTON,
 	BUTTON_STATEFUL,
 	BUTTON_GROUP,
-	FORMS_CHECKBOX,
+	CHECKBOX,
 	DATE_PICKER,
-	FORMS_INPUT,
+	INPUT,
 	LOOKUP,
 	TIME_PICKER,
 } from '../../utilities/constants';
@@ -40,9 +40,9 @@ if (process.env.NODE_ENV !== 'production') {
 			trigger.type.displayName !== BUTTON &&
 			trigger.type.displayName !== BUTTON_STATEFUL &&
 			trigger.type.displayName !== BUTTON_GROUP &&
-			trigger.type.displayName !== FORMS_CHECKBOX &&
+			trigger.type.displayName !== CHECKBOX &&
 			trigger.type.displayName !== DATE_PICKER &&
-			trigger.type.displayName !== FORMS_INPUT &&
+			trigger.type.displayName !== INPUT &&
 			trigger.type.displayName !== LOOKUP &&
 			trigger.type.displayName !== TIME_PICKER
 		) {