Patch request for Badge component

README.md

@@ -119,6 +119,7 @@ Bundled script files are provided _only_ for convenience. Do not use in producti
 
 ```
 git clone git@github.com:salesforce/design-system-react.git
+cd design-system-react
 npm install
 npm start
 open http://localhost:9001 http://localhost:8001
@@ -131,18 +132,22 @@ Please read the [CONTRIBUTING.md](CONTRIBUTING.md) and [Test README](/tests/READ
 If you have support questions, please post a question to [StackOverflow](https://stackoverflow.com/questions/tagged/design-system-react) and tag with `design-system-react`. If you find any bugs, create a [GitHub Issue](https://github.com/salesforce/design-system-react/issues).
 
 ## Security
+
 Please report any security issue to [security@salesforce.com](mailto:security@salesforce.com) as soon as it is discovered. This library limits its runtime dependencies in order to reduce the total cost of ownership as much as can be, but all consumers should remain vigilant and have their security stakeholders review all third-party dependencies.
 
 ## Contributors
+
 Thank you to all the contributors to this one of [many open source projects at Salesforce](https://opensource.salesforce.com/), but special thanks to the following:
 
 ### Active Key Contributors
+
 * [@davidlygagnon](https://github.com/davidlygagnon) David Ly-Gagnon
 * [@futuremint](https://github.com/futuremint) David Woodward
 * [@garygong](https://github.com/garygong) Gary Gong
 * [@interactivellama](https://github.com/interactivellama) Stephen James
 
 ### Former Key Contributors
+
 * [@donnieberg](https://github.com/donnieberg) Donielle Berg
 * [@tweettypography](https://github.com/tweettypography) David Brainer
 * [@ivanbogdanov](https://github.com/ivanbogdanov) Ivan Bogdanov

components/badge/__docs__/site-stories.js

@@ -0,0 +1,10 @@
+// This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load.
+
+/* eslint-env node */
+/* eslint-disable global-require */
+
+const siteStories = [
+	require('raw-loader!@salesforce/design-system-react/components/badge/__examples__/default.jsx'),
+];
+
+module.exports = siteStories;

components/badge/__docs__/storybook-stories.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Base from '../__examples__/base';
+import Darker from '../__examples__/darker.jsx';
+import Lightest from '../__examples__/lightest.jsx';
+import LeftIcon from '../__examples__/left-icon.jsx';
+import InverseRightIcon from '../__examples__/inverse-right-icon.jsx';
+import Nested from '../__examples__/nested.jsx';
+
+import { BADGE } from '../../../utilities/constants';
+
+/* eslint-disable react/display-name */
+
+storiesOf(BADGE, module)
+	.addDecorator((getStory) => (
+		<div className="slds-p-around_medium">{getStory()}</div>
+	))
+	.add('Base', () => (
+		<div>
+			<h1 style={{ marginBottom: '10px' }}>Base Badge</h1>
+			<Base />
+		</div>
+	))
+	.add('Darker', () => (
+		<div>
+			<h1 style={{ marginBottom: '10px' }}>Darker Badger</h1>
+			<Darker />
+		</div>
+	))
+	.add('Lightest', () => (
+		<div>
+			<h1 style={{ marginBottom: '10px' }}>Lightest Badge</h1>
+			<Lightest />
+		</div>
+	))
+	.add('Left Icon', () => (
+		<div>
+			<h1 style={{ marginBottom: '10px' }}>Icon on the left</h1>
+			<LeftIcon />
+		</div>
+	))
+	.add('Inverse Right Icon', () => (
+		<div>
+			<h1 style={{ marginBottom: '10px' }}>
+				Inverse badge with the icon on the left
+			</h1>
+			<InverseRightIcon />
+		</div>
+	))
+	.add('Nested Elements', () => (
+		<div>
+			<h1 style={{ marginBottom: '10px' }}>Badge with Nested Elements</h1>
+			<Nested />
+		</div>
+	));

components/badge/__examples__/base.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Badge from '~/components/badge';
+
+class Example extends React.Component {
+	static displayName = 'BadgeExample';
+
+	render() {
+		return <Badge>Badge Label</Badge>;
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/badge/__examples__/darker.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Badge from '~/components/badge';
+
+class Example extends React.Component {
+	static displayName = 'BadgeExample';
+
+	render() {
+		return <Badge color="inverse">Badge Label</Badge>;
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/badge/__examples__/inverse-right-icon.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Badge from '~/components/badge';
+
+import IconSettings from '~/components/icon-settings';
+
+class Example extends React.Component {
+	static displayName = 'BadgeExample';
+
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<Badge
+					color="inverse"
+					iconName="moneybag"
+					iconCategory="utility"
+					iconPosition="right"
+				>
+					423 Credits Available
+				</Badge>
+			</IconSettings>
+		);
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/badge/__examples__/left-icon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Badge from '~/components/badge';
+
+import IconSettings from '~/components/icon-settings';
+
+class Example extends React.Component {
+	static displayName = 'BadgeExample';
+
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<Badge iconName="moneybag" iconCategory="utility">
+					423 Credits Available
+				</Badge>
+			</IconSettings>
+		);
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/badge/__examples__/lightest.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Badge from '~/components/badge';
+
+class Example extends React.Component {
+	static displayName = 'BadgeExample';
+
+	render() {
+		return <Badge color="lightest">Badge Label</Badge>;
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/badge/__examples__/nested.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Badge from '~/components/badge';
+
+class Example extends React.Component {
+	static displayName = 'BadgeExample';
+
+	render() {
+		return (
+			<Badge>
+				Component In:
+				<strong>Lightning</strong>
+			</Badge>
+		);
+	}
+}
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/badge/docs.json

@@ -0,0 +1,7 @@
+{
+	"component": "badge",
+	"status": "prod",
+	"display-name": "Badges",
+	"SLDS-component-path": "/components/badges",
+	"url-slug": "badges"
+}

components/badge/index.jsx

@@ -0,0 +1,145 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+// # Badges Component
+
+// Implements the [Badges design pattern](https://www.lightningdesignsystem.com/components/badges/) in React.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
+import classNames from 'classnames';
+
+import BadgeIcon from '../icon/badge-icon';
+
+import { BADGE } from '../../utilities/constants';
+
+const propTypes = {
+	/**
+	 * Change badge color and that of text accordingly
+	 */
+	color: PropTypes.oneOf(['inverse', 'lightest']),
+	/**
+	 * CSS classes that are applied to the span.
+	 */
+	className: PropTypes.oneOfType([
+		PropTypes.array,
+		PropTypes.object,
+		PropTypes.string,
+	]),
+	/**
+	 * Name of the icon category. Visit <a href="http://www.lightningdesignsystem.com/resources/icons">Lightning Design System Icons</a> to reference icon categories.
+	 */
+	iconCategory: requiredIf(
+		PropTypes.oneOf(['action', 'custom', 'doctype', 'standard', 'utility']),
+		(props) => !!props.iconName
+	),
+	/**
+	 * CSS classes to be added to icon.
+	 */
+	iconClassName: PropTypes.oneOfType([
+		PropTypes.array,
+		PropTypes.object,
+		PropTypes.string,
+	]),
+	/**
+	 * Name of the icon. Visit <a href="http://www.lightningdesignsystem.com/resources/icons">Lightning Design System Icons</a> to reference icon names.
+	 */
+	iconName: PropTypes.string,
+	/**
+	 * Path to the icon. This will override any global icon settings.
+	 */
+	iconPath: PropTypes.string,
+	/**
+	 * Position of the icon. If omitted icon will be positioned to the left.
+	 */
+	iconPosition: PropTypes.oneOf(['left', 'right']),
+	/**
+	 * HTML id applied on the badge span.
+	 */
+	id: PropTypes.string,
+	/**
+	 * Description of icon if required.
+	 */
+	iconTite: PropTypes.string,
+};
+
+const defaultProps = {
+	assistiveText: {},
+	color: '',
+	iconPosition: 'left',
+};
+
+/**
+ * Badges are labels which hold small amounts of information.
+ */
+class Badge extends React.Component {
+	/**
+	 * ID as a string
+	 * @returns {string} id
+	 */
+	getId() {
+		return this.props.id;
+	}
+
+	/**
+	 * Render icon according to the passed props.
+	 */
+	renderIcon = () => (
+		<BadgeIcon
+			category={this.props.iconCategory || 'utility'}
+			className={classNames(
+				{
+					'slds-global-header__icon':
+						this.props.iconVariant === 'global-header',
+				},
+				this.props.iconClassName
+			)}
+			inverse={this.props.color === 'inverse'}
+			name={this.props.iconName}
+			path={this.props.iconPath}
+			position={this.props.iconPosition}
+			title={this.props.iconTitle}
+		/>
+	);
+
+	/**
+	 * Render data other than icon in a badge.
+	 */
+	renderLabel = () => {
+		if (this.props.iconPosition === 'right' || !this.props.iconName) {
+			return this.props.children;
+		}
+		return <span>{this.props.children}</span>;
+	};
+
+	/**
+	 * Render badge component
+	 */
+	renderBadge = () => (
+		<span
+			className={classNames(
+				'slds-badge',
+				{
+					[`slds-badge_${this.props.color}`]: this.props.color,
+				},
+				this.props.className
+			)}
+			id={this.getId()}
+		>
+			{this.props.iconPosition === 'right' && this.renderLabel()}
+			{this.props.iconName && this.renderIcon()}
+			{this.props.iconPosition === 'left' && this.renderLabel()}
+		</span>
+	);
+
+	render() {
+		return this.renderBadge();
+	}
+}
+
+Badge.displayName = BADGE;
+Badge.propTypes = propTypes;
+Badge.defaultProps = defaultProps;
+
+export default Badge;