Merge pull request #54 from Brightspace/rename-vui-to-d2l

Rename vui to d2l
BrightspaceUI · Jun 14, 2016 · 549e3e9 · 549e3e9
2 parents 55e29e7 + ec82836
commit 549e3e9
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 bower_components/
 node_modules/
-test/perceptual/typography.html.ignore
+test/perceptual/d2l-typography.html.ignore
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,3 @@
 language: node_js
 node_js: stable
-script:
-- polylint
 sudo: false
diff --git a/README.md b/README.md
@@ -1,38 +1,38 @@
-**Looking for SASS-based `vui-typography`?** It's [over here](https://github.com/Brightspace/valence-ui-typography/tree/sass).
+**Looking for SASS-based `d2l-typography`?** It's [over here](https://github.com/Brightspace/d2l-typography-ui/tree/sass).
 
-# vui-typography
+# d2l-typography
 [![Bower version][bower-image]][bower-url]
 [![Build status][ci-image]][ci-url]
 
-A Valence UI, [Polymer](https://www.polymer-project.org/1.0/)-based web component for typography styles.
+A set of [Polymer](https://www.polymer-project.org/1.0/)-based web components and shared styles for applying D2L typography.
 
-For further information on this and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
+For further information on this and other D2L UI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
 
 ## Installation
 
-`vui-typography` can be installed from [Bower][bower-url]:
+`d2l-typography` can be installed from [Bower][bower-url]:
 ```shell
-bower install vui-typography
+bower install d2l-typography
 ```
 
 ## Usage
 
-Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), import `typography.html`, and include the `vui-typography` style:
+Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), import `d2l-typography.html`, and include the `d2l-typography` shared style:
 
 ```html
 <head>
 	<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
-	<link rel="import" href="../vui-typography/typography.html">
-	<style is="custom-style" include="vui-typography"></style>
+	<link rel="import" href="../d2l-typography/d2l-typography.html">
+	<style is="custom-style" include="d2l-typography"></style>
 </head>
 ```
 
 ### Body
 
-The `vui-typography` class can be used to set base font properties, typically applied to the `<body>` element.
+The `d2l-typography` class can be used to set base font properties, typically applied to the `<body>` element.
 
 ```html
-<body class="vui-typography">
+<body class="d2l-typography">
 	...
 </body>
 ```
@@ -46,20 +46,20 @@ The default font family, color and line/character spacing will look like this:
 There are four separate classes 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.
 
 ```html
-<h1 class="vui-heading-1">...</h1>
-<h2 class="vui-heading-2">...</h2>
-<h3 class="vui-heading-3">...</h3>
-<h4 class="vui-heading-4">...</h4>
+<h1 class="d2l-heading-1">...</h1>
+<h2 class="d2l-heading-2">...</h2>
+<h3 class="d2l-heading-3">...</h3>
+<h4 class="d2l-heading-4">...</h4>
 ```
 
 ![screenshot of headings](/screenshots/headings.png?raw=true)
 
 ### Help Text
 
-The custom `vui-help-text` element can be used to apply styling to help text.
+The custom `d2l-help-text` element can be used to apply styling to help text.
 
 ```html
-<vui-help-text>...</vui-help-text>
+<d2l-help-text>...</d2l-help-text>
 ```
 
 ### Note About Font Size
@@ -78,9 +78,9 @@ In production, it's recommended to use a build tool like [Vulcanize](https://git
 
 ## 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.
+See the [Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
 
-[bower-url]: http://bower.io/search/?q=vui-typography
-[bower-image]: https://img.shields.io/bower/v/vui-typography.svg
-[ci-url]: https://travis-ci.org/Brightspace/valence-ui-typography
-[ci-image]: https://img.shields.io/travis-ci/Brightspace/valence-ui-typography.svg
+[bower-url]: http://bower.io/search/?q=d2l-typography
+[bower-image]: https://img.shields.io/bower/v/d2l-typography.svg
+[ci-url]: https://travis-ci.org/Brightspace/d2l-typography-ui
+[ci-image]: https://img.shields.io/travis-ci/Brightspace/d2l-typography-ui.svg
diff --git a/bower.json b/bower.json
@@ -1,9 +1,11 @@
 {
-  "name": "vui-typography",
-  "main": "typography.html",
+  "name": "d2l-typography",
+  "description": "Polymer-based web components and shared styles for applying D2L typography",
+  "main": "d2l-typography.html",
   "license": "Apache-2.0",
   "ignore": [
     "test",
+    "screenshots",
     ".editorconfig",
     ".gitattributes",
     ".gitignore",
@@ -12,6 +14,6 @@
   ],
   "dependencies": {
     "d2l-colors": "^2.0.0",
-    "polymer": "^1.4.0"
+    "polymer": "^1.5.0"
   }
 }
diff --git a/help-text.html → d2l-help-text.html b/help-text.html → d2l-help-text.html
@@ -1,21 +1,18 @@
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="./small-text.html">
-
-<dom-module id="vui-help-text">
+<link rel="import" href="d2l-typography-shared-styles.html">
+<dom-module id="d2l-help-text">
 	<template>
-		<style>
-
+		<style include="d2l-typography-shared-styles">
 			:host {
-				@apply(--vui-small-text);
+				@apply(--d2l-small-text);
 				@apply(--d2l-help-text-custom);
 			}
-
 		</style>
 		<content></content>
 	</template>
 	<script>
 		Polymer({
-			is: 'vui-help-text'
+			is: 'd2l-help-text'
 		});
 	</script>
 </dom-module>
diff --git a/small-text.html → d2l-typography-shared-styles.html b/small-text.html → d2l-typography-shared-styles.html
@@ -1,13 +1,11 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../d2l-colors/d2l-colors.html">
-
-<dom-module id="vui-small-text">
+<dom-module id="d2l-typography-shared-styles">
 	<template>
 		<style include="d2l-colors">
-
 			:root {
 
-				--vui-small-text: {
+				--d2l-small-text: {
 					color: var(--d2l-color-ferrite);
 					font-family: inherit;
 					font-size: 0.7rem;
@@ -17,7 +15,7 @@
 					margin: auto;
 				}
 
-				--vui-small-strong-text: {
+				--d2l-small-strong-text: {
 					color: var(--d2l-color-ferrite);
 					font-family: inherit;
 					font-size: 0.7rem;
@@ -29,7 +27,6 @@
 				}
 
 			}
-
 		</style>
 	</template>
 </dom-module>
diff --git a/typography.html → d2l-typography.html b/typography.html → d2l-typography.html
@@ -1,13 +1,12 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../d2l-colors/d2l-colors.html">
-<link rel="import" href="./help-text.html">
-<link rel="import" href="./small-text.html">
+<link rel="import" href="d2l-help-text.html">
 <link href="https://s.brightspace.com/lib/fonts/0.3.0/fonts.css" rel="stylesheet">
-
-<dom-module id="vui-typography">
+<dom-module id="d2l-typography">
 	<template>
-		<style include="vui-small-text d2l-colors">
+		<style include="d2l-colors">
 
+			.d2l-typography,
 			.vui-typography {
 				color: var(--d2l-color-ferrite);
 				display: block;
@@ -19,49 +18,63 @@
 				@apply(--d2l-font-custom);
 			}
 
+			.d2l-typography p,
 			.vui-typography p {
 				margin: 1.5rem 0;
 				@apply(--d2l-font-paragraph-custom);
 			}
 
+			.d2l-typography.d2l-dyslexic,
+			.d2l-typography .d2l-dyslexic,
 			.vui-typography.vui-dyslexic,
 			.vui-typography .vui-dyslexic {
 				font-weight: 400;
 				font-family: 'Open Dyslexic', sans-serif;
 				@apply(--d2l-font-dyslexic-custom);
 			}
 
+			.d2l-typography[:lang(ar)],
+			.d2l-typography [:lang(ar)],
 			.vui-typography[:lang(ar)],
 			.vui-typography [:lang(ar)] {
 				font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
 				@apply(--d2l-font-ar-custom);
 			}
 
+			.d2l-typography[:lang(zh-CN)],
+			.d2l-typography [:lang(zh-CN)],
 			.vui-typography[:lang(zh-CN)],
 			.vui-typography [:lang(zh-CN)] {
 				font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
 				@apply(--d2l-font-zh-cn-custom);
 			}
 
+			.d2l-typography[:lang(zh-TW)],
+			.d2l-typography [:lang(zh-TW)],
 			.vui-typography[:lang(zh-TW)],
 			.vui-typography [:lang(zh-TW)] {
 				font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
 				@apply(--d2l-font-zh-tw-custom);
 			}
 
+			.d2l-typography[:lang(ko)],
+			.d2l-typography [:lang(ko)],
 			.vui-typography[:lang(ko)],
 			.vui-typography [:lang(ko)] {
 				font-family: 'Apple SD Gothic Neo', Dotum, sans-serif;
 				@apply(--d2l-font-ko-custom);
 			}
 
+			.d2l-typography[:lang(ja)],
+			.d2l-typography [:lang(ja)],
 			.vui-typography[:lang(ja)],
 			.vui-typography [:lang(ja)] {
 				font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif;
 				@apply(--d2l-font-ja-custom);
 			}
 
-			.vui-typography .vui-heading-1 {
+			.vui-typography .vui-heading-1,
+			.d2l-typography .d2l-heading-1 {
 				font-size: 2rem;
 				font-weight: 300;
 				line-height: 3rem;
@@ -70,7 +83,8 @@
 				@apply(--d2l-heading-1-custom);
 			}
 
-			.vui-typography .vui-heading-2 {
+			.vui-typography .vui-heading-2,
+			.d2l-typography .d2l-heading-2 {
 				font-size: 1.5rem;
 				font-weight: 300;
 				line-height: 2.25rem;
@@ -79,7 +93,8 @@
 				@apply(--d2l-heading-2-custom);
 			}
 
-			.vui-typography .vui-heading-3 {
+			.vui-typography .vui-heading-3,
+			.d2l-typography .d2l-heading-3 {
 				font-size: 1rem;
 				font-weight: 700;
 				line-height: 1.5rem;
@@ -88,7 +103,8 @@
 				@apply(--d2l-heading-3-custom);
 			}
 
-			.vui-typography .vui-heading-4 {
+			.vui-typography .vui-heading-4,
+			.d2l-typography .d2l-heading-4 {
 				font-size: 1rem;
 				font-weight: 400;
 				line-height: 1.5rem;

diff --git a/demo/index.html b/demo/index.html
@@ -5,9 +5,10 @@
 		<title>Typography Snapshot</title>
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 		<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
-		<link rel="import" href="../typography.html">
-		<link rel="import" href="../help-text.html">
-		<style is="custom-style" include="vui-typography">
+		<link rel="import" href="../d2l-typography.html">
+		<link rel="import" href="../d2l-typography-shared-styles.html">
+		<link rel="import" href="../d2l-help-text.html">
+		<style is="custom-style" include="d2l-typography d2l-typography-shared-styles">
 
 			html {
 				font-size: 20px;
@@ -23,15 +24,15 @@
 				text-align: center;
 			}
 			.small-text {
-				@apply(--vui-small-text);
+				@apply(--d2l-small-text);
 			}
 			.small-strong-text {
-				@apply(--vui-small-strong-text);
+				@apply(--d2l-small-strong-text);
 			}
 
 		</style>
 	</head>
-	<body class="vui-typography" unresolved>
+	<body class="d2l-typography" unresolved>
 		<h1>Typography</h1>
 		<table>
 			<thead>
@@ -44,10 +45,10 @@ <h1>Typography</h1>
 				<tr>
 					<th>Headings</th>
 					<td>
-						<h1 class="vui-heading-1">Heading 1</h1>
-						<h2 class="vui-heading-2">Heading 2</h2>
-						<h3 class="vui-heading-3">Heading 3</h3>
-						<h4 class="vui-heading-4">Heading 4</h4>
+						<h1 class="d2l-heading-1">Heading 1</h1>
+						<h2 class="d2l-heading-2">Heading 2</h2>
+						<h3 class="d2l-heading-3">Heading 3</h3>
+						<h4 class="d2l-heading-4">Heading 4</h4>
 					</td>
 				</tr>
 				<tr>
@@ -65,7 +66,7 @@ <h4 class="vui-heading-4">Heading 4</h4>
 				<tr>
 					<th>Help Text</th>
 					<td>
-						<vui-help-text class="vui-help">Help Text</vui-help-text>
+						<d2l-help-text>Help Text</d2l-help-text>
 					</td>
 				</tr>
 				<tr>

diff --git a/package.json b/package.json
@@ -1,16 +1,15 @@
 {
-  "name": "vui-typography",
-  "version": "3.1.1",
-  "description": "Web component with shared typography styles",
+  "name": "d2l-typography",
+  "description": "Polymer-based web components and shared styles for applying D2L typography",
   "private": true,
   "scripts": {
     "prebuild": "cpy *.html ./bower_components/temp",
-    "build": "vulcanize ./bower_components/temp/typography.html > ./test/perceptual/typography.html.ignore",
+    "build": "vulcanize ./bower_components/temp/d2l-typography.html > ./test/perceptual/d2l-typography.html.ignore",
     "postbuild": "rimraf ./bower_components/temp",
     "postinstall": "bower install",
     "prescreenshot": "npm run build",
     "screenshot": "phantomjs ./screenshots/build.js",
-    "test": "polylint"
+    "test": "polylint -i d2l-typography.html d2l-help-text.html d2l-typography-shared-styles.html"
   },
   "repository": {
     "type": "git",

diff --git a/screenshots/headings.png b/screenshots/headings.png
diff --git a/screenshots/paragraph.png b/screenshots/paragraph.png