Add subcomponents to package.json

components/app-launcher/index.jsx

@@ -29,10 +29,6 @@ import checkProps from './check-props';
 
 // ## Children
 import Modal from '../modal';
-// DO NOT REMOVE UNTIL THIS IS RESOLVED https://github.com/salesforce-ux/design-system-react-site/issues/56
-import AppLauncherSection from './section'; // eslint-disable-line no-unused-vars
-import AppLauncherTile from './tile'; // eslint-disable-line no-unused-vars
-// //////////////////////////////////////////////////////////////////////////////////
 
 // ## Constants
 import { APP_LAUNCHER } from '../../utilities/constants';

components/global-navigation-bar/region.jsx

@@ -70,52 +70,53 @@ const renderTertiary = (dividerClass, className, children) =>
 /**
  * Regions make up a GlobalNavigation Bar and typically contain links and dropdowns. The Primary region contains the AppSwitcher, Application Name, and Object Switcher. The secondary region typically has navigation betweens sections of the application. The tertiary region is aligned to the right side of the screen and contains shortcuts or actions.
  */
-const Region = (props) => {
-	let region;
-	const dividerClass = props.dividerPosition ? `slds-context-bar__item--divider-${props.dividerPosition}` : null;
-
-	switch (props.region) {
-		case 'primary':
-			region = renderPrimary(dividerClass, props.className, props.children);
-			break;
-		case 'secondary':
-			region = renderSecondary(dividerClass, props.className, props.children, props.navigation);
-			break;
-		case 'tertiary':
-			region = renderTertiary(dividerClass, props.className, props.children);
-			break;
-		default:
-			// do nothing
+const Region = React.createClass({
+	displayName: GLOBAL_NAVIGATION_BAR_REGION,
+
+	propTypes: {
+		/**
+		 * Contents of region. Expects `GlobalNavigationBarLink`, `GlobalNavigationBarDropdown`, `GlobalNavigationBarApplicationName`, `AppSwitcher`, but could be any component. This is the place to pass in an Object Switcher until that is supported.
+		 */
+		children: PropTypes.node,
+		/**
+		 * Determines position of separating bar.
+		 */
+		dividerPosition: PropTypes.oneOf(['left', 'right']),
+		/**
+		 * CSS classes to be added to the region
+		 */
+		className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+		/**
+		 * Wraps the `secondary` region in a `nav` and adds a role attribute
+		 */
+		navigation: PropTypes.bool,
+		/**
+		 * Region wrap children in styling specific to that region.
+		 */
+		region: PropTypes.oneOf(['primary', 'secondary', 'tertiary']).isRequired
+	},
+
+	render () {
+		let region;
+		const dividerClass = this.props.dividerPosition ? `slds-context-bar__item--divider-${this.props.dividerPosition}` : null;
+
+		switch (this.props.region) {
+			case 'primary':
+				region = renderPrimary(dividerClass, this.props.className, this.props.children);
+				break;
+			case 'secondary':
+				region = renderSecondary(dividerClass, this.props.className, this.props.children, this.props.navigation);
+				break;
+			case 'tertiary':
+				region = renderTertiary(dividerClass, this.props.className, this.props.children);
+				break;
+			default:
+				// do nothing
+		}
+
+		return region;
 	}
-
-	return region;
-};
-
-Region.displayName = GLOBAL_NAVIGATION_BAR_REGION;
-
-Region.propTypes = {
-	/**
-	 * Contents of region. Expects `GlobalNavigationBarLink`, `GlobalNavigationBarDropdown`, `GlobalNavigationBarApplicationName`, `AppSwitcher`, but could be any component. This is the place to pass in an Object Switcher until that is supported.
-	 */
-	children: PropTypes.node,
-	/**
-	 * Determines position of separating bar.
-	 */
-	dividerPosition: PropTypes.oneOf(['left', 'right']),
-	/**
-	 * CSS classes to be added to the region
-	 */
-	className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
-	/**
-	 * Wraps the `secondary` region in a `nav` and adds a role attribute
-	 */
-	navigation: PropTypes.bool,
-	/**
-	 * Region wrap children in styling specific to that region.
-	 */
-	region: PropTypes.oneOf(['primary', 'secondary', 'tertiary']).isRequired
-};
-
+});
 
 module.exports = Region;
 module.exports.regions = regions;

components/icon/index.jsx

@@ -30,7 +30,7 @@ import SLDSUtilityIcon from '../utilities/utility-icon';
 import { ICON } from '../../utilities/constants';
 
 /**
- * The Icon component is the Lightning Design System Icon component and should be used for naked icons. For icons that are buttons, use the <a href='#/button'>SLDSButton component</a> component with <code>variant='icon'</code>.
+ * The Icon component is the Lightning Design System Icon component and should be used for naked icons. For icons that are buttons, use the <a href='/components/buttons/'>Button component</a> component with <code>variant='icon'</code>.
  */
 const Icon = React.createClass({
 	// ### Display Name

examples/app-launcher-examples-1.js

@@ -0,0 +1,50 @@
+const SLDSAppLauncherExample = React.createClass({
+	displayName: 'SLDSAppLauncherExample2',
+
+	render () {
+		const search = <SLDSSearch onChange={function (event) { console.log('Search term:', event.target.value); }} placeholder="Find an app" assistiveText="Find an app" />;
+		const headerButton = <SLDSButton label="App Exchange" />;
+
+		return (
+			<SLDSGlobalNavigationBar>
+				<SLDSGlobalNavigationBarRegion
+					region="primary"
+				>
+					<SLDSAppLauncher
+						triggerName="App Name"
+						search={search}
+						modalHeaderButton={headerButton}
+					>
+						<SLDSAppLauncherSection title="Tile Section">
+							<SLDSAppLauncherTile
+								title="Marketing Cloud"
+								iconText="MC"
+								description="Send emails, track emails, read emails! Emails!"
+							/>
+							<SLDSAppLauncherTile
+								title="Call Center"
+								description="The key to call center and contact center is not to use too many words!"
+								descriptionHeading="Call Center"
+								iconText="CC"
+							/>
+						</SLDSAppLauncherSection>
+						<SLDSAppLauncherSection title="Small Tile Section">
+							<SLDSAppLauncherTile
+								title="Journey Builder"
+								iconText="JB"
+								size="small"
+							/>
+							<SLDSAppLauncherTile
+								title="Sales Cloud"
+								iconNode={<SLDSIcon name="campaign" category="standard" size="large" />}
+								size="small"
+							/>
+						</SLDSAppLauncherSection>
+					</SLDSAppLauncher>
+				</SLDSGlobalNavigationBarRegion>
+			</SLDSGlobalNavigationBar>
+		);
+	}
+});
+
+ReactDOM.render(<SLDSAppLauncherExample />, mountNode);

examples/bread-crumb-examples-1.js

@@ -0,0 +1,14 @@
+class BreadCrumbExample extends React.Component {
+	render () {
+		const trail = [
+			(<a href="#">Parent Entity</a>),
+			(<a href="#">Parent Record Name</a>)
+		];
+
+		return (
+			<SLDSBreadCrumb trail={trail} />
+			);
+	}
+}
+
+ReactDOM.render(<BreadCrumbExample />, mountNode);

examples/button-examples-1.js

@@ -0,0 +1,18 @@
+<div className="slds-x-small-buttons--horizontal">
+	<SLDSButton
+		label="Base"
+		onClick={function(e){console.log("Base Button e.target:", e.target)}}
+		variant="base" />
+
+	<SLDSButton
+		label="Neutral" />
+
+	<SLDSButton
+		iconName="download"
+		iconPosition="left"
+		label="Neutral Icon" />
+
+	<SLDSButton
+		label="Responsive"
+		responsive={true} />
+</div>

examples/button-examples-2.js

@@ -0,0 +1,26 @@
+<div className="slds-x-small-buttons--horizontal">
+	<SLDSButton
+		label="Brand"
+		variant="brand"
+	/>
+
+	<SLDSButton
+		disabled={true}
+		label="Disabled"
+		onClick={function(){alert("Disabled Button Clicked")}}
+		variant="brand"
+	/>
+
+	<SLDSButton
+		label="Destructive"
+		variant="destructive"
+	/>
+
+	<div style={{backgroundColor: "#16325c", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
+		<SLDSButton
+			inverse
+			label="Inverse"
+			variant="base"
+		/>
+	</div>
+</div>

examples/button-examples-3.js

@@ -0,0 +1,54 @@
+<div className="slds-x-small-buttons--horizontal">
+	<SLDSButton
+		assistiveText="Icon Bare Small"
+		iconName="settings"
+		iconSize="small"
+		iconVariant="bare"
+		onClick={function(){alert("Icon Bare Clicked")}} variant="icon" />
+
+	<SLDSButton
+		assistiveText="Icon Container Small"
+		iconName="settings"
+		iconSize="small"
+		iconVariant="container"
+		variant="icon" />
+
+	<div style={{backgroundColor: "#4BC076", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
+		<SLDSButton
+			assistiveText="Icon Border medium"
+			iconName="settings"
+			iconVariant="border"
+			variant="icon" />
+
+		<SLDSButton
+			assistiveText="Icon Border-filled medium"
+			iconName="settings"
+			iconVariant="border-filled"
+			variant="icon" />
+	</div>
+
+	<SLDSButton
+		assistiveText="Icon More large"
+		iconName="settings"
+		iconSize="large"
+		iconVariant="more"
+		variant="icon" />
+
+	<div style={{backgroundColor: "#16325c", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
+		<SLDSButton
+			assistiveText="Icon inverse"
+			iconName="settings"
+			iconSize="large"
+			inverse
+			variant="icon" />
+	</div>
+
+	<div style={{backgroundColor: "#FFB75D", padding: "10px 50px", display: "inline-block"}} className="slds-hint-parent slds-m-horizontal--small">
+		<SLDSButton
+			assistiveText="Icon hint large"
+			hint={true}
+			iconName="settings"
+			iconSize="large"
+			variant="icon" />
+	</div>
+</div>

examples/button-group-examples-1.js

@@ -0,0 +1,18 @@
+<SLDSButtonGroup>
+	<SLDSButton label="Refresh" />
+	<SLDSButton label="Edit" />
+	<SLDSButton label="Save" />
+	<SLDSMenuDropdown
+		assistiveText="More Options"
+		buttonVariant="icon"
+		iconName="down"
+		iconVariant="border-filled"
+		onSelect={function (item) { console.log(item.label, 'selected'); }}
+		openOn="click"
+		options={[
+			{ label: 'undo', value: 'A0' },
+			{ label: 'redo', value: 'B0' },
+			{ label: 'activate', value: 'C0' }
+		]}
+	/>
+</SLDSButtonGroup>

examples/button-group-examples-2.js

@@ -0,0 +1,30 @@
+<SLDSButtonGroup>
+	<SLDSButtonStateful
+		assistiveText="Show Chart"
+		buttonVariant="icon"
+		iconName="chart"
+		iconVariant="border"
+		variant="icon"
+	/>
+	<SLDSButtonStateful
+		assistiveText="Filter"
+		iconName="filter"
+		iconVariant="border"
+		variant="icon"
+	/>
+	<SLDSMenuDropdown
+		assistiveText="Sort"
+		checkmark
+		iconName="sort"
+		iconVariant="more"
+		onSelect={function (item) { console.log(item.label, 'selected'); }}
+		openOn="click"
+		modal
+		options={[
+			{ label: 'Sort ascending', value: 'A0' },
+			{ label: 'Sort descending', value: 'B0' }
+		]}
+		value="A0"
+		variant="icon"
+	/>
+</SLDSButtonGroup>

examples/button-stateful-examples-1.js

@@ -0,0 +1,5 @@
+<SLDSButtonStateful
+	assistiveText="like"
+	iconName="like"
+	iconSize="large"
+	variant="icon" />

examples/button-stateful-examples-2.js

@@ -0,0 +1,12 @@
+<div className="slds-x-small-buttons--horizontal">
+	<SLDSButtonStateful />
+
+	<div style={{backgroundColor: "#16325c", padding: "10px", display: "inline-block"}} className="slds-m-horizontal--small">
+		<SLDSButtonStateful
+			inverse
+			stateOne={{iconName: "add", label: "Join"}}
+			stateTwo={{iconName: "check", label: "Member"}}
+			stateThree={{iconName: "close", label: "Leave"}}
+	 	/>
+	</div>
+</div>