Merge pull request #1482 from interactivellama/icon-colors

Add Icon colors: Warning, error, light

Author: futuremint

components/icon/__docs__/storybook-stories.jsx

@@ -19,6 +19,7 @@ import ColorBase from '../__examples__/color-base';
 import ColorDefault from '../__examples__/color-default';
 import ColorError from '../__examples__/color-error';
 import ColorWarning from '../__examples__/color-warning';
+import ColorLight from '../__examples__/color-light';
 
 import SizesExtraSmall from '../__examples__/sizes-extra-small';
 import SizesSmall from '../__examples__/sizes-small';
@@ -47,6 +48,9 @@ storiesOf(ICON, module)
 		</div>
 	))
 	.add('Color: Default', () => <ColorDefault />)
+	.add('Color: Error', () => <ColorError />)
+	.add('Color: Warning', () => <ColorWarning />)
+	.add('Color: Light', () => <ColorLight />)
 	.add('Base: Standard (custom styles)', () => (
 		<Icon
 			assistiveText={{ label: 'Account' }}
@@ -57,5 +61,9 @@ storiesOf(ICON, module)
 		/>
 	))
 	.add('Base: Imported', () => (
-		<Icon assistiveText={{ label: 'Download' }} category="utility" icon={download} />
+		<Icon
+			assistiveText={{ label: 'Download' }}
+			category="utility"
+			icon={download}
+		/>
 	));

components/icon/__examples__/color-default.jsx

@@ -11,14 +11,13 @@ const Example = createReactClass({
 			<IconSettings iconPath="/assets/icons">
 				<Icon
 					assistiveText={{ label: 'Description of icon' }}
-					category="standard"
-					name="account"
+					category="utility"
+					name="announcement"
 					title="This is a title"
-					inverse
 				/>
 			</IconSettings>
 		);
-	}
+	},
 });
 
 export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/icon/__examples__/color-error.jsx

@@ -11,13 +11,14 @@ const Example = createReactClass({
 			<IconSettings iconPath="/assets/icons">
 				<Icon
 					assistiveText={{ label: 'Description of icon' }}
-					category="standard"
-					name="account"
+					category="utility"
+					colorVariant="error"
+					name="announcement"
 					title="description of icon"
 				/>
 			</IconSettings>
 		);
-	}
+	},
 });
 
 export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/icon/__examples__/color-light.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import createReactClass from 'create-react-class';
+import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
+import IconSettings from '~/components/icon-settings';
+
+const Example = createReactClass({
+	displayName: 'IconExample',
+
+	render () {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<Icon
+					assistiveText={{ label: 'Description of icon' }}
+					category="utility"
+					colorVariant="light"
+					name="announcement"
+					title="description of icon"
+				/>
+			</IconSettings>
+		);
+	},
+});
+
+export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/icon/__examples__/color-warning.jsx

@@ -11,13 +11,14 @@ const Example = createReactClass({
 			<IconSettings iconPath="/assets/icons">
 				<Icon
 					assistiveText={{ label: 'Description of icon' }}
-					category="standard"
-					name="account"
+					category="utility"
+					colorVariant="warning"
+					name="announcement"
 					title="description of icon"
 				/>
 			</IconSettings>
 		);
-	}
+	},
 });
 
 export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/icon/__examples__/colors.jsx

@@ -26,6 +26,14 @@ const Example = createReactClass({
 							name="lock"
 						/>
 					</div>
+					<div className="slds-col--padded">
+						<Icon
+							assistiveText={{ label: 'Lock' }}
+							category="utility"
+							colorVariant="light"
+							name="lock"
+						/>
+					</div>
 					<div className="slds-col--padded">
 						<Icon
 							assistiveText={{ label: 'Warning' }}
@@ -45,7 +53,7 @@ const Example = createReactClass({
 				</div>
 			</IconSettings>
 		);
-	}
+	},
 });
 
 export default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime

components/icon/index.jsx

@@ -2,12 +2,6 @@
 /* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 // # Icon Component
-
-// Based on SLDS v2.1.0-rc.4
-
-// ## Dependencies
-
-// ### React
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -21,13 +15,13 @@ import classNames from '../../utilities/class-names';
 // ## Children
 import UtilityIcon from '../utilities/utility-icon';
 
-// ## Constants
 import { ICON } from '../../utilities/constants';
 
 const defaultProps = {
 	assistiveText: {},
 	category: 'standard',
-	size: 'medium'
+	colorVariant: 'default',
+	size: 'medium',
 };
 
 /**
@@ -38,21 +32,23 @@ const Icon = (props) => {
 	const {
 		category,
 		className,
+		colorVariant,
 		containerClassName,
 		icon,
 		inverse,
 		name,
 		path,
 		size,
 		style,
-		title
+		title,
 	} = props;
-	const assistiveText = typeof props.assistiveText === 'string'
-		? props.assistiveText
-		: {
-			...defaultProps.assistiveText,
-			...props.assistiveText,
-		}.label;
+	const assistiveText =
+		typeof props.assistiveText === 'string'
+			? props.assistiveText
+			: {
+				...defaultProps.assistiveText,
+				...props.assistiveText,
+			}.label;
 
 	const kababCaseName = name ? name.replace(/_/g, '-') : '';
 
@@ -63,7 +59,7 @@ const Icon = (props) => {
 					'slds-icon_container': category !== 'utility',
 					'slds-icon_container--circle': category === 'action',
 					[`slds-icon-${category}-${kababCaseName}`]:
-						category !== 'utility' && category !== 'doctype' && !path
+						category !== 'utility' && category !== 'doctype' && !path,
 				},
 				containerClassName
 			)}
@@ -82,7 +78,13 @@ const Icon = (props) => {
 					// if category is `utility` and `inverse` is true, icon will be light // return false
 					// if category is NOT `utility` and `inverse` is false (default), icon will be light // return false
 					// if category is NOT `utility` and `inverse` is true, icon will be dark // return true
-					'slds-icon-text-default': category === 'utility' ? !inverse : inverse
+					'slds-icon-text-default':
+						colorVariant === 'default' && category === 'utility'
+							? !inverse
+							: inverse,
+					'slds-icon-text-warning': colorVariant === 'warning',
+					'slds-icon-text-error': colorVariant === 'error',
+					'slds-icon-text-light': colorVariant === 'light',
 				})}
 				icon={icon}
 				name={name}
@@ -120,28 +122,34 @@ Icon.propTypes = {
 		'custom',
 		'doctype',
 		'standard',
-		'utility'
+		'utility',
 	]).isRequired,
 	/**
 	 * CSS classes that are applied to the SVG.
 	 */
 	className: PropTypes.oneOfType([
 		PropTypes.array,
 		PropTypes.object,
-		PropTypes.string
+		PropTypes.string,
 	]),
 	/**
 	 * CSS classes that are applied to the span.
 	 */
 	containerClassName: PropTypes.oneOfType([
 		PropTypes.array,
 		PropTypes.object,
-		PropTypes.string
+		PropTypes.string,
 	]),
 	/**
 	 * Icon color variants
 	 */
-	colorVariant: PropTypes.oneOf(['base', 'default', 'error', 'warning']),
+	colorVariant: PropTypes.oneOf([
+		'base',
+		'default',
+		'error',
+		'light',
+		'warning',
+	]),
 	/**
 	 * A custom SVG object to use instead of the supplied SLDS icons, look in `design-system-react/icons` for examples and syntax.
 	 */
@@ -169,7 +177,7 @@ Icon.propTypes = {
 	/**
 	 * Title attribute for the icon container
 	 */
-	title: PropTypes.string
+	title: PropTypes.string,
 };
 
 Icon.defaultProps = defaultProps;

components/story-based-tests.js

@@ -32,7 +32,7 @@ export DataTable from '../components/data-table/__docs__/storybook-stories';
 // export Input from '../components/input/__docs__/storybook-stories';
 // export Textarea from '../components/textarea/__docs__/storybook-stories';
 // export Search from '../components/input/__docs__/search/storybook-stories';
-// export Icon from '../components/icon/__docs__/storybook-stories';
+export Icon from '../components/icon/__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';