Merge pull request #256 from appnexus/quality/branding

Branding refresh and VerticalListMenu tweaks

README.md

@@ -6,28 +6,22 @@ A UI component library from AppNexus.
 
 Lucid can be installed with NPM.
 
-```bash
-npm install --save lucid-ui
-```
+    npm install --save lucid-ui
 
 ## Usage
 
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Button } from 'lucid-ui';
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+    import { Button } from 'lucid-ui';
 
-ReactDOM.render(
-	<Button>Hello World<Button/>,
-	mountNode
-);
-```
+    ReactDOM.render(
+      <Button>Hello World<Button/>,
+      mountNode
+    );
 
 You must also include lucid's styles:
 
-```less
-@import "node_modules/lucid-ui/src/index.less";
-```
+    @import "node_modules/lucid-ui/src/index.less";
 
 Or use the precompiled CSS file `node_modules/lucid-ui/dist/index.css`.
 
@@ -37,16 +31,15 @@ Or use the precompiled CSS file `node_modules/lucid-ui/dist/index.css`.
 the consuming application is responsible for declaring a dependency on a
 compatible version.
 
-```
-package.json
-
-{
-	"dependencies": {
-		"lucid-ui": "^0.0.1",
-		"react": "^0.14.0",
-		"react-dom": "^0.14.0"
-	}
-}
-```
+    package.json
+
+    {
+      "dependencies": {
+        "lucid-ui": "^0.0.1",
+        "react": "^0.14.0",
+        "react-dom": "^0.14.0",
+        "react-css-transition-group": "^0.14.0"
+      }
+    }
 
 To contribute to lucid, please see `CONTRIBUTING.md`.

gulp/config.js

@@ -14,7 +14,7 @@ module.exports = {
 	EXAMPLES_GLOB: {
 		SOURCE: SOURCE_DIR + '/**/examples/*.js*',
 	},
-	AUTOPREFIXER_BROWSERS: 'last 2 versions',
+	AUTOPREFIXER_BROWSERS: 'last 3 versions',
 	SOURCE_DIR: SOURCE_DIR,
 	BUILD_DIR: BUILD_DIR,
 };

gulp/docs.js

@@ -172,7 +172,7 @@ module.exports = {
 
 					var currentBranch = stdoutBranch.trim().replace(/\//g, '-'); // clean branch and replace forward slashes
 
-					var tarStream = gulp.src('dist/docs/*')
+					var tarStream = gulp.src('dist/docs/**/*')
 						.pipe(tar(currentBranch + '.tar'))
 						.pipe(gzip())
 						.pipe(gulp.dest('/tmp'));

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/appnexus/lucid.git"
   },
   "scripts": {
-    "dev": "gulp docs-generate && webpack-dev-server --inline",
+    "dev": "gulp docs-generate && webpack-dev-server --inline --content-base src/docs/",
     "docs-upload-gh": "./scripts/docs-upload-gh.sh",
     "docs-upload": "gulp docs-upload",
     "preversion": "rm -rf dist && TZ=UTC gulp preversion",
@@ -43,6 +43,7 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-2": "^6.5.0",
+    "copy-webpack-plugin": "^3.0.0",
     "css-loader": "^0.23.1",
     "enzyme": "^2.0.0-rc1",
     "eslint-plugin-react": "^3.16.1",
@@ -72,6 +73,7 @@
     "react-addons-test-utils": "^0.14.0",
     "react-docgen": "^2.7.0",
     "react-dom": "^0.14.0",
+    "react-motion": "^0.4.3",
     "react-router": "^2.0.0",
     "sinon": "^2.0.0-pre",
     "style-loader": "^0.13.0",

src/components/Table/Table.less

@@ -183,7 +183,7 @@
 
 				// always show marker on first cell
 				.selectFirstCellOnRow({
-					.renderLeftMarker(1);
+					.left-marker(1);
 				});
 			}
 
@@ -193,13 +193,13 @@
 
 				// place hidden marker on first cell
 				.selectFirstCellOnRow({
-					.renderLeftMarker(0);
+					.left-marker(0);
 				});
 
 				// show marker on hover
 				&:hover {
 					.selectFirstCellOnRow({
-						.renderLeftMarker(1);
+						.left-marker(1);
 					});
 				}
 			}
@@ -269,20 +269,3 @@
 		}
 	}
 }
-
-// Place a styled box on the left edge of the current element with the given scale and width
-.renderLeftMarker(@scale:1; @width: 4px) {
-	position: relative;
-	&::before {
-		position: absolute;
-		left: 0;
-		top: 0;
-		height: 100%;
-		width: @width;
-		background-color: @color-primary;
-		content: '';
-		transform-origin: 0 0;
-		transform: scaleX(@scale);
-		transition: transform 100ms;
-	}
-}

src/components/VerticalListMenu/VerticalListMenu.jsx

@@ -39,6 +39,7 @@ const VerticalListMenu = createClass({
 				hasExpander: bool,
 				isExpanded: bool,
 				isSelected: bool,
+				isActionable: bool,
 				onSelect: func,
 				onToggle: func,
 			}
@@ -122,6 +123,7 @@ const VerticalListMenu = createClass({
 				{_.map(itemChildProps, (itemChildProp, index) => {
 					const {
 						hasExpander = false,
+						isActionable = true,
 					} = itemChildProp;
 
 					const itemChildrenAsArray = React.Children.toArray(itemChildProp.children);
@@ -150,12 +152,13 @@ const VerticalListMenu = createClass({
 							<div
 								className={cx('&-Item-content', {
 									'&-Item-content-is-selected': actualIsSelected,
+									'&-Item-content-is-actionable': isActionable,
 								})}
 								onClick={_.partial(this.handleClickItem, index, itemChildProp)}
 							>
-							<span className={cx('&-Item-content-text')}>
+							<div className={cx('&-Item-content-text')}>
 								{otherChildren}
-							</span>
+							</div>
 							{hasExpander ?
 								<div
 									className={cx('&-Item-expander')}

src/components/VerticalListMenu/VerticalListMenu.less

@@ -1,7 +1,6 @@
 @VerticalListMenu-levels: 8;
 
 @VerticalListMenu-size-itemHeight: 29px;
-@VerticalListMenu-size-border: 4px;
 @VerticalListMenu-size-icon: 20px;
 @VerticalListMenu-size-childSpacer: 6px;
 @VerticalListMenu-size-childPadding: 15px;
@@ -38,11 +37,11 @@
 			height: @VerticalListMenu-size-icon;
 			width: @VerticalListMenu-size-icon;
 			margin: 4px;
-			margin-left: auto; // allows the expander to be flush on the right side
 		}
 
 		&-content {
 			.is-selectable();
+			.left-marker(0);
 			min-height: @VerticalListMenu-size-itemHeight;
 			display: flex;
 			font-size: 12px;
@@ -55,29 +54,25 @@
 			padding-left: 15px;
 
 			&-text {
+				width: 100%;
 				padding: @VerticalListMenu-size-childSpacer 0;
 			}
 
 			// Selected and hover state are the same for items
 			&&-is-selected,
 			&&-is-selected:hover {
-				.hardstop-gradient(
-					to right,
-					@color-primary,
-					@featured-color-primary-backgroundColor,
-					@VerticalListMenu-size-border
-				);
+				.left-marker(1);
 				color: @color-darkGray;
 			}
 
+			// Only show the left marker if the item is actionable
+			&&-is-actionable:hover,
+			&&-is-actionable:focus {
+				.left-marker(1);
+			}
+
 			&:hover,
 			&:focus {
-				.hardstop-gradient(
-					to right,
-					@color-primary,
-					@color-lightGray,
-					@VerticalListMenu-size-border
-				);
 				color: @color-darkGray;
 
 				// Style the expander button when the user hovers on the item content

src/docs/containers/colors.jsx → src/docs/containers/color-palette.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { lucidClassNames } from '../../util/style-helpers';
 
-const cx = lucidClassNames.bind('&-ColorPalette');
+const cx = lucidClassNames.bind('ColorPalette');
 
 const colorList = [
 	{
@@ -13,28 +13,22 @@ const colorList = [
 		variables: [
 			'color-white',
 			'color-black',
+			'color-backgroundColor',
+			'color-pageBackgroundColor',
+			'color-borderColor',
 		]
 	},
 	{
 		category: 'Primary',
-		description: 'Primary Colors come in three states primary, primaryMedium and primaryLight',
+		description: 'The primary color is the most prominent color used throughout lucid. It\'s great for drawing the user\'s eye to particular components.',
 		variables: [
 			'color-primary',
 			'color-primaryMedium',
 			'color-primaryLight',
 		]
 	},
-	{
-		category: 'Container Colors',
-		description: 'Colors used to define colors of containers within components.',
-		variables: [
-			'color-backgroundColor',
-			'color-borderColor',
-		]
-	},
 	{
 		category: 'Text Colors',
-		description: 'Used to define the color of text within a component.',
 		variables: [
 			'color-textColor',
 			'color-disabledText',
@@ -44,8 +38,7 @@ const colorList = [
 	},
 	{
 		category: 'Grays',
-		description: 'Defined gray colors to be used with a component.  Do not use ' +
-		'if a variable has been created that is more descriptive.',
+		description: 'Grays play an important role in lucid, and this set of grays forms the foundation for all the other variants. More prescriptive colors should be favored over these general grays when available.',
 		variables: [
 			'color-lightGray',
 			'color-gray',
@@ -55,7 +48,6 @@ const colorList = [
 	},
 	{
 		category: 'Transparent Grays',
-		description: 'Gray with an opacity.',
 		variables: [
 			'color-gray-5',
 			'color-gray-10',
@@ -65,10 +57,7 @@ const colorList = [
 	},
 	{
 		category: 'Featured Colors',
-		description: 'A featured color should only be used for a component that has ' +
-		'multiple states like banners or buttons or button like components ' +
-		'(single select).  Featured colors should not be consumed by most components ' +
-		'instead use the color variables defined above.',
+		description: 'A featured color should only be used for a component that has multiple states like banners, buttons, or button like components (e.g. SingleSelect).',
 		variables: [
 			'featured-color-default',
 			'featured-color-primary',
@@ -139,6 +128,7 @@ const colorList = [
 	},
 	{
 		category: 'Chart 0',
+		description: 'Chart colors are used for data visualizations and were designed to be used in a particular order.',
 		variables: [
 			'color-chart-0-lightest',
 			'color-chart-0-light',
@@ -224,20 +214,22 @@ const colorList = [
 const ColorPalette = React.createClass({
 	render() {
 		return (
-			<div >
+			<div className={cx('&')}>
 				<h2>Color Palette</h2>
+
 				<p>A list of all colors used.  Colors are listed by group type.</p>
-				<p></p>
+
 				{_.map(colorList, (group, i) => (
-					<div key={i} style={{display: 'flex', flexWrap: 'wrap'}}>
-						<h3 style={{flex: '1 0 100%'}}>{group.category}</h3>
+					<div key={i}>
+						<h3>{group.category}</h3>
+
 						{group.description ?
-							<p style={{flex: '1 0 100%'}}>{group.description}</p>
+							<p>{group.description}</p>
 						: null}
+
 						{_.map(group.variables, (variable, j) => (
-							<div key={j} className={classNames(cx('&'))}>
-								<div className={cx(`&-${variable}`)}></div>
-								<p><code>{`@${variable};`}</code></p>
+							<div key={j} className={classNames(cx('&-item', `&-${variable}`))}>
+								{`@${variable};`}
 							</div>
 						))}
 					</div>