Update/add Warning, Info, Check, Cross, TableConfig icons

src/components/Icon/CheckIcon/CheckIcon.jsx

@@ -15,12 +15,6 @@ const CheckIcon = React.createClass({
 		...Icon.propTypes,
 	},
 
-	getDefaultProps() {
-		return {
-			viewBox: '0 0 18 18',
-		};
-	},
-
 	render() {
 		const {
 			className,
@@ -32,7 +26,7 @@ const CheckIcon = React.createClass({
 				{...passThroughs}
 				className={boundClassNames('&', className)}
 			>
-				<path d='M13.41,5.84l-0.25-.26a0.82,0.82,0,0,0-1.16,0h0L7.36,10.22,5.73,8.75a0.82,0.82,0,0,0-1.16,0h0l-0.32.38a0.82,0.82,0,0,0,0,1.16h0L6.7,12.61a0.82,0.82,0,0,0,1.16,0h0L13.41,7a0.82,0.82,0,0,0,0-1.16h0Z' />
+				<path d='M11.92,5.189 L11.7,4.96 C11.415,4.675 10.951,4.675 10.667,4.96 L6.537,9.087 L4.79,7.473 C4.504,7.187 4.042,7.187 3.757,7.473 L3.47,7.816 C3.184,8.101 3.184,8.563 3.47,8.849 L5.955,11.203 C6.24,11.488 6.703,11.488 6.988,11.203 L11.92,6.222 C12.205,5.938 12.205,5.474 11.92,5.189 z'/>
 			</Icon>
 		);
 	}

src/components/Icon/ChevronIcon/ChevronIcon.jsx

@@ -30,9 +30,7 @@ const ChevronIcon = React.createClass({
 
 	getDefaultProps() {
 		return {
-			direction: 'down',
-			viewBox: '0 0 16 16',
-			size: 16
+			direction: 'down'
 		};
 	},
 

src/components/Icon/CrossIcon/CrossIcon.jsx

@@ -15,12 +15,6 @@ const CrossIcon = React.createClass({
 		...Icon.propTypes,
 	},
 
-	getDefaultProps() {
-		return {
-			viewBox: '0 0 18 18',
-		}
-	},
-
 	render() {
 		const {
 			className,
@@ -32,7 +26,7 @@ const CrossIcon = React.createClass({
 				{...passThroughs}
 				className={boundClassNames('&', className)}
 			>
-				<path d='M8,9.25L5.25,6.48,6.53,5.16l2.8,2.78L12.1,5.16l1.32,1.31L10.63,9.25,13.42,12,12.1,13.34,9.32,10.56,6.53,13.34,5.21,12Z' />
+				<path d='M6.837,7.999 L4.388,5.536 L5.558,4.365 L8.007,6.83 L10.472,4.365 L11.642,5.536 L9.163,7.999 L11.642,10.464 L10.475,11.634 L8.008,9.155 L5.528,11.635 L4.358,10.464 L6.837,7.999 z'/>
 			</Icon>
 		);
 	}

src/components/Icon/InfoIcon/InfoIcon.jsx

@@ -25,9 +25,10 @@ const InfoIcon = React.createClass({
 			<Icon
 				{...passThroughs}
 				className={boundClassNames('&', className)}
+				isBadge
 			>
-				<path d='M6.739,6.11h2.521v7.562H6.739V6.11z' />
-				<path d='M6.739,2.328h2.521v2.521H6.739V2.328z' />
+				<rect x='7' y='3' width='2' height='2'/>
+				<rect x='7' y='6' width='2' height='7'/>
 			</Icon>
 		);
 	}

src/components/Icon/InfoIcon/examples/default.jsx

@@ -6,7 +6,6 @@ export default React.createClass({
 		return (
 			<div>
 				<InfoIcon />
-				<InfoIcon isBadge />
 			</div>
 		);
 	}

src/components/Icon/TableGearIcon/TableGearIcon.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Icon from '../Icon';
+import { lucidClassNames } from '../../../util/style-helpers';
+
+const boundClassNames = lucidClassNames.bind('&-TableGearIcon');
+
+/**
+ *
+ * {"categories": ["visual design", "icons"], "extend": "Icon", "madeFrom": ["Icon"]}
+ *
+ * A table configuration Icon.
+ */
+
+const TableGearIcon = React.createClass({
+	propTypes: {
+		...Icon.propTypes,
+	},
+
+	render() {
+		const {
+			className,
+			...passThroughs
+		} = this.props;
+
+		return (
+			<Icon
+				{...passThroughs}
+				className={boundClassNames('&', className)}
+			>
+				<rect className={boundClassNames('&-background')} x='1' y='4' width='13' height='8'/>
+				<g opacity='0.25'>
+					<rect x='3' y='4' width='1' height='8'/>
+					<rect x='6' y='4' width='1' height='8'/>
+					<rect x='9' y='4' width='1' height='5.5'/>
+					<rect x='12' y='4' width='1' height='3.847'/>
+				</g>
+				<path d='M15.79,9.298l-1.191-0.219c-0.114-0.022-0.155-0.117-0.089-0.215l0.683-1.013 c0.065-0.098,0.052-0.246-0.031-0.329l-0.656-0.654c-0.083-0.085-0.23-0.099-0.329-0.031L13.164,7.52 c-0.097,0.065-0.193,0.025-0.216-0.091l-0.219-1.191c-0.021-0.114-0.137-0.21-0.252-0.21H11.55c-0.117,0-0.231,0.096-0.252,0.21 l-0.219,1.191c-0.022,0.116-0.119,0.156-0.216,0.091L9.852,6.837C9.753,6.77,9.605,6.783,9.522,6.868L8.866,7.522 C8.783,7.605,8.771,7.754,8.835,7.852l0.683,1.013c0.066,0.098,0.027,0.192-0.089,0.215L8.237,9.298 C8.121,9.32,8.027,9.435,8.027,9.55v0.929c0,0.116,0.094,0.23,0.21,0.251l1.191,0.221c0.116,0.021,0.156,0.117,0.089,0.214 l-0.683,1.014c-0.063,0.099-0.052,0.244,0.031,0.327l0.656,0.656c0.083,0.083,0.23,0.097,0.329,0.031l1.012-0.683 c0.097-0.066,0.193-0.027,0.216,0.091l0.219,1.189C11.318,13.906,11.433,14,11.55,14h0.928c0.115,0,0.231-0.094,0.252-0.21 l0.219-1.189c0.022-0.118,0.119-0.157,0.216-0.091l1.012,0.683c0.099,0.065,0.246,0.052,0.329-0.031l0.656-0.655 c0.083-0.084,0.097-0.229,0.031-0.328l-0.683-1.014c-0.066-0.097-0.027-0.193,0.089-0.214l1.191-0.221 c0.116-0.021,0.21-0.135,0.21-0.251V9.55C16,9.435,15.906,9.32,15.79,9.298z M12.014,11.814c-0.992,0-1.799-0.804-1.799-1.798 c0-0.992,0.807-1.797,1.799-1.797s1.798,0.805,1.798,1.797C13.812,11.011,13.006,11.814,12.014,11.814z'/>
+				<path d='M8,12H1.25C1.112,12,1,11.888,1,11.75v-7.5C1,4.112,1.112,4,1.25,4h12.5C13.888,4,14,4.112,14,4.25V6h1V3.25 C15,2.56,14.44,2,13.75,2H1.25C0.56,2,0,2.56,0,3.25v8.5C0,12.44,0.56,13,1.25,13H8V12z'/>
+			</Icon>
+		);
+	}
+});
+
+export default TableGearIcon;

src/components/Icon/TableGearIcon/TableGearIcon.less

@@ -0,0 +1,5 @@
+.lucid-TableGearIcon{
+	&-background {
+		fill: @color-white;
+	}
+}

src/components/Icon/TableGearIcon/TableGearIcon.spec.jsx

@@ -0,0 +1,8 @@
+import { icons, common } from '../../../util/generic-tests';
+
+import TableGearIcon from './TableGearIcon';
+
+describe('TableGearIcon', () => {
+	common(TableGearIcon);
+	icons(TableGearIcon);
+});

src/components/Icon/TableGearIcon/examples/default.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import TableGearIcon from '../TableGearIcon';
+
+export default React.createClass({
+	render() {
+		return (
+			<div>
+				<TableGearIcon />
+			</div>
+		);
+	}
+});

src/components/Icon/WarningIcon/WarningIcon.jsx

@@ -15,12 +15,6 @@ const WarningIcon = React.createClass({
 		...Icon.propTypes,
 	},
 
-	getDefaultProps() {
-		return {
-			viewBox: '0 0 18 18',
-		};
-	},
-
 	render() {
 		const {
 			className,
@@ -32,9 +26,9 @@ const WarningIcon = React.createClass({
 				{...passThroughs}
 				className={boundClassNames('&', className)}
 			>
-				<path className={boundClassNames('&-triangle')} d='M9,1C8.2,1,7.4,1.6,7.1,2.3C5.9,4.3,1,12.9,0.5,13.7C-0.6,15.5,0.3,17,2.4,17h13.2 c2.1,0,3-1.5,1.9-3.3C14.9,9.2,13.7,6.9,11,2.3C10.6,1.5,9.9,1,9,1L9,1z'/>
-				<rect x='8.1' y='5.4' fill='#ffffff' width='1.8' height='6.3'/>
-				<rect x='8.1' y='12.6' fill='#ffffff' width='1.8' height='1.8'/>
+				<path className={boundClassNames('&-triangle')} d='M8.011,0 C7.379,0 6.747,0.457 6.268,1.369 C5.242,3.321 0.864,11.832 0.419,12.681 C-0.54,14.503 0.228,15.999 2.124,15.999 C3.186,15.999 10.737,15.999 13.877,15.999 C15.773,15.999 16.541,14.506 15.584,12.681 C13.209,8.156 12.127,5.892 9.755,1.369 C9.273,0.458 8.641,0 8.011,0 L8.011,0 z'/>
+				<rect x='7' y='4' fill='#FFFFFF' width='2' height='7'></rect>
+				<rect x='7' y='12' fill='#FFFFFF' width='2' height='2'></rect>
 			</Icon>
 		);
 	}

src/docs/index.jsx

@@ -34,7 +34,10 @@ const docgenMap = _.mapValues(docgenMapRaw, (value, componentName) => {
 		return value;
 	}
 
-	const parentProps = _.get(docgenMapRaw, `${parentName}.props`);
+	// TODO: this hack only allows for one level of `extend` nesting, we'll need
+	// recursion to go deeper.
+	const parentExtend = _.get(docgenMapRaw, `${parentName}.customData.extend`);
+	const parentProps = _.get(docgenMapRaw, `${parentExtend || parentName}.props`);
 
 	if (!parentProps) {
 		throw new Error(`Looks like something is wrong with the custom metadata for ${componentName}. Please make sure the 'extend' refers to a real component that has valid props defined.`);

src/index.js

@@ -39,6 +39,7 @@ import SuccessIcon from './components/Icon/SuccessIcon/SuccessIcon';
 import StickySection from './components/StickySection/StickySection';
 import Switch from './components/Switch/Switch';
 import Table from './components/Table/Table';
+import TableGearIcon from './components/Icon/TableGearIcon/TableGearIcon';
 import Tabs from './components/Tabs/Tabs';
 import TextField from './components/TextField/TextField'
 import ValidatedTextField from './components/ValidatedTextField/ValidatedTextField';
@@ -101,6 +102,7 @@ export {
 	StickySection,
 	Switch,
 	Table,
+	TableGearIcon,
 	Tabs,
 	TextField,
 	ValidatedTextField,

src/styles/components.less

@@ -17,6 +17,7 @@
 @import '../components/Icon/SuccessIcon/SuccessIcon';
 @import '../components/Icon/EditIcon/EditIcon';
 @import '../components/Icon/SearchIcon/SearchIcon';
+@import '../components/Icon/TableGearIcon/TableGearIcon';
 @import '../components/Icon/EligibilityIcon/EligibilityIcon';
 @import '../components/Icon/WarningIcon/WarningIcon';
 @import '../components/Icon/ResizeIcon/ResizeIcon';