Merge pull request #45 from Brightspace/screenshots

Screenshots
BrightspaceUI · Feb 18, 2016 · 6ea2375 · 6ea2375
2 parents b652f1a + 917b088
commit 6ea2375
Show file tree

Hide file tree

Showing 15 changed files with 107 additions and 235 deletions.
diff --git a/.csslintrc b/.csslintrc
@@ -1 +1 @@
---ignore=zero-units,adjoining-classes,import
+--ignore=adjoining-classes,import
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 bower_components/
 node_modules/
-test/output
+test/test.css
 typography.css
diff --git a/.npmignore b/.npmignore
@@ -1,10 +1,9 @@
+.csslintrc
 .editorconfig
 .gitattributes
 .gitignore
 .npmignore
-.csslintrc
 .travis.yml
 bower_components
 node_modules
-test
-typography.css.scss
+test/test.scss
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- 4.1.1
+- 5.6
 before_script:
 - gem install percy-cli
 after_success:

diff --git a/LICENSE b/LICENSE
@@ -176,7 +176,7 @@ recommend that a file or class name and description of purpose be included on
 the same "printed page" as the copyright notice for easier identification within
 third-party archives.
 
-   Copyright 2014 D2L Corporation
+   Copyright 2016 D2L Corporation
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

diff --git a/README.md b/README.md
@@ -30,63 +30,77 @@ Depending on which installation method you choose, use that path when doing the
 
 ## Usage
 
-**Body:**
+### Body
 
-The `vui-typography` mixin can be used to setup the base font properties, typically applied to the `<body>` element.
+The `vui-typography` mixin can be used to set up the base font properties, typically applied to the `<body>` element.
 
 ```scss
 @import '<path-to-component>/typography.scss';
 body {
-	@include vui-typography;
+	@include vui-typography();
 }
 ```
 
-**Headings:**
+The default font family, color and line/character spacing will look like this:
+
+![screenshot of paragraph text](/screenshots/paragraph.png?raw=true)
+
+### Headings
+
+There are four separate mixins for the available heading styles. These would typically be applied to the `<h1>`, `<h2>`, `<h3>` and `<h4>` HTML elements, though it's not a requirement.
 
 ```scss
 @import '<path-to-component>/headings.scss';
 
 h1 {
-	@include vui-typography-heading1;
+	@include vui-typography-heading1();
 }
 
 h2 {
-	@include vui-typography-heading2;
+	@include vui-typography-heading2();
 }
 
 h3 {
-	@include vui-typography-heading3;
+	@include vui-typography-heading3();
 }
 
 h4 {
-	@include vui-typography-heading4;
+	@include vui-typography-heading4();
 }
 ```
 
-**Help Text:**
+![screenshot of paragraph text](/screenshots/headings.png?raw=true)
 
-```scss
-@import '<path-to-component>/help-text.scss';
+The margins around each heading style can be customized by passing in an override value to the mixin:
 
-.help {
-	@include vui-typography-help-text;
+```scss
+h2.no-margin {
+	@include vui-typography-heading2($margin: 0);
 }
 ```
 
-**Other:**
+### Small Text
 
-```scss
-@import '<path-to-component>/small-text.scss';
+There are two mixins available to achieve a smaller look. They're both available by importing `small-text.scss`.
 
-.text1 {
-	@include vui-typography-small-text;
+The first is `vui-typography-small-text()`:
+```scss
+.small {
+	@include vui-typography-small-text();
 }
+```
+
+![screenshot of small text](/screenshots/small.png?raw=true)
 
-.text2 {
-	@include vui-typography-small-strong-text;
+The second, `vui-typography-small-strong-text()` has a heavier font-weight:
+```scss
+.small-strong {
+	@include vui-typography-small-strong-text();
 }
 ```
 
+![screenshot of small strong text](/screenshots/small-strong.png?raw=true)
+
 ## Coding styles
 
 See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on VUI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.

diff --git a/package.json b/package.json
@@ -6,11 +6,11 @@
     "clean": "rimraf *.css && rimraf ./test/*.css",
     "prebuild": "npm run clean",
     "build:sass": "node-sass --output-style expanded typography.css.scss typography.css",
-    "build:sass:test": "node-sass --output-style expanded ./test/test.scss ./test/test.css",
-    "build": "npm run build:sass && npm run build:sass:test",
+    "build": "npm run build:sass",
     "perceptual-diff": "percy snapshot test/",
     "postinstall": "bower install",
-    "pretest": "npm run build",
+    "screenshot": "phantomjs ./screenshots/build.js",
+    "pretest": "npm run build && cpy typography.css test",
     "test": "csslint typography.css"
   },
   "repository": {
@@ -29,11 +29,13 @@
   },
   "homepage": "https://github.com/Brightspace/valence-ui-typography",
   "dependencies": {
-    "bower": "^1.5.3"
+    "bower": "^1.7.7"
   },
   "devDependencies": {
+    "cpy-cli": "^1.0.0",
     "csslint": "^0.10.0",
-    "node-sass": "^3.1.1",
-    "rimraf": "^2.3.4"
+    "node-sass": "^3.4.2",
+    "phantomjs-prebuilt": "^2.1.4",
+    "rimraf": "^2.5.2"
   }
 }
diff --git a/screenshots/build.js b/screenshots/build.js
@@ -0,0 +1,27 @@
+var page = require('webpage').create();
+page.viewportSize = {width: 750, height: 1000};
+
+function capture(name, width) {
+
+	var clipRect = page.evaluate(function(n) {
+		return document.querySelector('.screenshot-' + n)
+			.getBoundingClientRect();
+	}, name);
+
+	page.clipRect = {
+		top:    clipRect.top,
+		left:   clipRect.left,
+		width:  width || clipRect.width,
+		height: clipRect.height
+	};
+	page.render('./screenshots/' + name + '.png');
+
+}
+
+page.open('./test/typography.html', function() {
+	capture('paragraph');
+	capture('headings', 200);
+	capture('small', 200);
+	capture('small-strong', 200);
+	phantom.exit();
+});
diff --git a/screenshots/headings.png b/screenshots/headings.png
diff --git a/screenshots/paragraph.png b/screenshots/paragraph.png
diff --git a/screenshots/small-strong.png b/screenshots/small-strong.png
diff --git a/screenshots/small.png b/screenshots/small.png
diff --git a/test/test.css b/test/test.css
diff --git a/test/test.scss b/test/test.scss
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		--ignore=zero-units,adjoining-classes,import
		--ignore=adjoining-classes,import