diff --git a/.npmignore b/.npmignore index b37af7c..a6ba854 100644 --- a/.npmignore +++ b/.npmignore @@ -2,10 +2,9 @@ .gitattributes .gitignore .npmignore -.travis.yml .csslintrc +.travis.yml bower_components node_modules -karma.conf.js test typography.css.scss diff --git a/.travis.yml b/.travis.yml index 561e329..24b4758 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: -- '4.1.1' +- 4.1.1 sudo: false deploy: provider: npm @@ -10,3 +10,6 @@ deploy: on: tags: true all_branches: true +env: + global: + secure: Z291fOPTg/3XEw/pBgA/9s4y0cyc/CkFdn0YRIbLyk66y9FWVIwacytGsl2hs2+hQZXXizrx6GK+NEUCuOB+CpFzFi9sE0+b+HIQ/hAnPC8L9AdGWKiIS6skekjJC+ZhQRJq+/DnSe8/N8Mr3YA6rO3PiqHlVJ5787y5vId4w2E= diff --git a/bower.json b/bower.json index 2ecb910..113da90 100644 --- a/bower.json +++ b/bower.json @@ -10,7 +10,6 @@ ".gitignore", ".npmignore", ".travis.yml", - "karma.conf.js", "package.json" ], "dependencies": { diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index a3eda4b..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,68 +0,0 @@ -// Karma configuration -// Generated on Thu May 21 2015 11:15:06 GMT-0400 (Eastern Daylight Time) - -module.exports = function(config) { - config.set({ - - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '', - - - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['jasmine'], - - - // list of files / patterns to load in the browser - files: [ - { pattern: 'test/reset.css', included: true }, - { pattern: 'typography.css', included: true }, - 'node_modules/jasmine-dom-matchers/matchers.js', - 'test/**/*.js' - ], - - - // list of files to exclude - exclude: [ - ], - - - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - }, - - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress'], - - - // web server port - port: 9876, - - - // enable / disable colors in the output (reporters and logs) - colors: true, - - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - - // enable / disable watching file and executing tests whenever any file changes - autoWatch: false, - - - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['PhantomJS'], - - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: true - }); -}; diff --git a/package.json b/package.json index 36a2eaa..48f0105 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,17 @@ { "name": "vui-typography", - "version": "2.0.0", + "version": "2.0.1", "description": "Mixins and CSS for applying basic typography styles", "scripts": { - "clean": "rimraf *.css", + "clean": "rimraf *.css && rimraf ./test/*.css", "prebuild": "npm run clean", - "build": "node-sass --output-style expanded typography.css.scss typography.css", + "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", + "perceptual-diff": "percy snapshot test/", "postinstall": "bower install", "pretest": "npm run build", - "test": "csslint typography.css && karma start karma.conf.js" + "test": "csslint typography.css" }, "repository": { "type": "git", @@ -30,11 +33,6 @@ }, "devDependencies": { "csslint": "^0.10.0", - "jasmine-dom-matchers": "^0.1.0", - "karma": "^0.12.32", - "karma-phantomjs-launcher": "^0.1.4", - "karma-jasmine": "^0.3.5", - "karma-cli": "0.0.4", "node-sass": "^3.1.1", "rimraf": "^2.3.4" } diff --git a/small-text.scss b/small-text.scss index 7207f42..774a8e2 100644 --- a/small-text.scss +++ b/small-text.scss @@ -1,31 +1,34 @@ @import 'bower_components/vui-colors/colors.scss'; -@import 'px-to-base-rem.scss'; @mixin vui-typography-small-text( + $color: $vui-color-ferrite, $fontWeight: 400, $margin: 1rem 0 1rem 0, $line-height: 1rem ) { - color: $vui-color-ferrite; + color: $color; font-family: inherit; font-size: 0.7rem; font-weight: $fontWeight; line-height: $line-height; - letter-spacing: px-to-base-rem(0.4px); + letter-spacing: 0.02rem; margin: $margin; } -@mixin vui-typography-small-strong-text($fontWeight: 700, $margin: 1rem 0 1rem 0) { +@mixin vui-typography-small-strong-text( + $color: $vui-color-ferrite, + $fontWeight: 700, + $margin: 1rem 0 1rem 0 + ) { + + @include vui-typography-small-text( + $color: $color, + $fontWeight: $fontWeight, + $margin: $margin + ); - color: $vui-color-ferrite; - font-family: inherit; - font-size: 0.7rem; - font-weight: $fontWeight; - line-height: 1rem; - letter-spacing: px-to-base-rem(0.4px); - margin: $margin; text-transform: uppercase; } diff --git a/test/reset.css b/test/reset.css deleted file mode 100644 index 2d27114..0000000 --- a/test/reset.css +++ /dev/null @@ -1,3 +0,0 @@ -html { - font-size: 19px; -} diff --git a/test/test.css b/test/test.css new file mode 100644 index 0000000..5697ec8 --- /dev/null +++ b/test/test.css @@ -0,0 +1,113 @@ +@import url(https://s.brightspace.com/lib/fonts/0.2.0/fonts.css); +html { + font-size: 20px; +} + +body { + color: #565a5c; + font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; + font-size: 1rem; + font-weight: 300; + line-height: 1.5; + letter-spacing: 0.015rem; + margin: 1rem; +} + +body.vui-dyslexic, +body .vui-dyslexic { + font-weight: 400; + font-family: 'Open Dyslexic', sans-serif; +} + +body :lang(ar) { + font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif; +} + +body :lang(zh-CN) { + font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; +} + +body :lang(zh-TW) { + font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; +} + +body :lang(ko) { + font-family: 'Apple SD Gothic Neo', Dotum, sans-serif; +} + +body :lang(ja) { + font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif; +} + +body p { + margin: 1.5rem 0; +} + +table { + max-width: 1000px; +} + +td, th { + padding: 0.5rem; +} + +.heading-1 { + color: #565a5c; + font-family: inherit; + font-size: 2rem; + font-weight: 300; + line-height: 3rem; + letter-spacing: -0.025rem; + margin: 1.5rem 0 1.5rem 0; +} + +.heading-2 { + color: #565a5c; + font-family: inherit; + font-size: 1.5rem; + font-weight: 300; + line-height: 2.25rem; + letter-spacing: -0.015rem; + margin: 1.5rem 0 1.5rem 0; +} + +.heading-3 { + color: #565a5c; + font-family: inherit; + font-size: 1rem; + font-weight: 700; + line-height: 1.5rem; + letter-spacing: 0.025rem; + margin: 1.5rem 0 1.5rem 0; +} + +.heading-3 { + color: #565a5c; + font-family: inherit; + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: 0.02rem; + margin: 1.5rem 0 1.5rem 0; +} + +.small-text { + color: #565a5c; + font-family: inherit; + font-size: 0.7rem; + font-weight: 400; + line-height: 1rem; + letter-spacing: 0.02rem; + margin: 1rem 0 1rem 0; +} + +.small-strong-text { + color: #565a5c; + font-family: inherit; + font-size: 0.7rem; + font-weight: 700; + line-height: 1rem; + letter-spacing: 0.02rem; + margin: 1rem 0 1rem 0; + text-transform: uppercase; +} diff --git a/test/test.scss b/test/test.scss new file mode 100644 index 0000000..da6a17f --- /dev/null +++ b/test/test.scss @@ -0,0 +1,43 @@ +@import '../typography.scss'; +@import '../headings.scss'; +@import '../small-text.scss'; + +html { + font-size: 20px; +} +body { + @include vui-typography; + margin: 1rem; +} +table { + max-width: 1000px; +} +td, th { + padding: 0.5rem; +} +td { +} + +.heading-1 { + @include vui-typography-heading1; +} + +.heading-2 { + @include vui-typography-heading2; +} + +.heading-3 { + @include vui-typography-heading3; +} + +.heading-3 { + @include vui-typography-heading4; +} + +.small-text { + @include vui-typography-small-text; +} + +.small-strong-text { + @include vui-typography-small-strong-text; +} diff --git a/test/typography.html b/test/typography.html new file mode 100644 index 0000000..39ecc2c --- /dev/null +++ b/test/typography.html @@ -0,0 +1,62 @@ + + + + Typography Sample + + + +

Typography

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementStyle
Heading 1 +
Grumpy Wizards
+
Heading 2 +
Grumpy Wizards
+
Heading 3 +
Grumpy Wizards
+
Heading 4 +
Grumpy Wizards
+
Paragraph +

Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. +

Small Text +
Grumpy Wizards
+
Small Strong Text +
Grumpy Wizards
+
+ + diff --git a/test/unit/typographySpec.js b/test/unit/typographySpec.js deleted file mode 100644 index 85627c9..0000000 --- a/test/unit/typographySpec.js +++ /dev/null @@ -1,179 +0,0 @@ -( function() { - 'use strict'; - - describe( 'vui', function() { - - var node, heading, text; - - beforeEach( function () { - jasmine.addMatchers( vui.jasmine.dom.matchers ); - - node = document.body.appendChild( document.createElement( 'div' ) ); - node.className = 'vui-typography'; - } ); - - afterEach( function() { - document.body.removeChild( node ); - } ); - - describe( 'typography', function() { - - it( 'defines a "vui-typography" selector', function() { - expect( document ).toHaveCssSelector( '.vui-typography' ); - } ); - - it( 'applies the font color', function() { - expect( node ).toHaveColor( 'rgb(86, 90, 92)' ); - } ); - - it( 'applies the font family', function() { - expect( node ).toHaveFontFamily( "Lato, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif" ); - } ); - - it( 'applies the font size', function() { - expect( node ).toHaveFontSize( '19px' ); - } ); - - it( 'applies the font weight', function() { - expect( node ).toHaveFontWeight( '300' ); - } ); - - it( 'applies the line height', function() { - expect( node ).toHaveLineHeight( '28px' ); - } ); - - } ); - - describe( 'heading-1', function() { - - beforeEach( function () { - heading = node.appendChild( document.createElement( 'h1' ) ); - heading.className = 'vui-heading-1'; - } ); - - it( 'defines a ".vui-heading-1" selector', function() { - expect( document ).toHaveCssSelector( '.vui-heading-1' ); - } ); - - it( 'applies the color', function() { - expect( heading ).toHaveColor( 'rgb(86, 90, 92)' ); - } ); - - it( 'applies the font size', function() { - expect( heading ).toHaveFontSize( '38px' ); - } ); - - it( 'applies the font weight', function() { - expect( heading ).toHaveFontWeight( '300' ); - } ); - - } ); - - describe( 'heading-2', function() { - - beforeEach( function () { - heading = node.appendChild( document.createElement( 'h2' ) ); - heading.className = 'vui-heading-2'; - } ); - - it( 'defines a ".vui-heading-2" selector', function() { - expect( document ).toHaveCssSelector( '.vui-heading-2' ); - } ); - - it( 'applies the font size', function() { - expect( heading ).toHaveFontSize( '29px' ); - } ); - - it( 'applies the font weight', function() { - expect( heading ).toHaveFontWeight( '300' ); - } ); - - } ); - - describe( 'heading-3', function() { - - beforeEach( function () { - heading = node.appendChild( document.createElement( 'h3' ) ); - heading.className = 'vui-heading-3'; - } ); - - it( 'defines a ".vui-heading-3" selector', function() { - expect( document ).toHaveCssSelector( '.vui-heading-3' ); - } ); - - it( 'applies the font size', function() { - expect( heading ).toHaveFontSize( '19px' ); - } ); - - it( 'applies the font weight', function() { - expect( heading ).toHaveFontWeight( 'bold' ); - } ); - - } ); - - describe( 'heading-4', function() { - - beforeEach( function () { - heading = node.appendChild( document.createElement( 'h4' ) ); - heading.className = 'vui-heading-4'; - } ); - - it( 'defines a ".vui-heading-4" selector', function() { - expect( document ).toHaveCssSelector( '.vui-heading-4' ); - } ); - - it( 'applies the font size', function() { - expect( heading ).toHaveFontSize( '19px' ); - } ); - - it( 'applies the font weight', function() { - expect( heading ).toHaveFontWeight( 'normal' ); - } ); - - } ); - - describe( 'small text', function() { - - beforeEach( function () { - text = node.appendChild( document.createElement( 'div' ) ); - text.className = 'vui-typography-small-text'; - } ); - - it( 'defines a ".vui-typography-small-text" selector', function() { - expect( document ).toHaveCssSelector( '.vui-typography-small-text' ); - } ); - - it( 'applies the font size', function() { - expect( text ).toHaveFontSize( '13px' ); - } ); - - it( 'applies the font weight', function() { - expect( text ).toHaveFontWeight( 'normal' ); - } ); - - } ); - - describe( 'small strong text', function() { - - beforeEach( function () { - text = node.appendChild( document.createElement( 'div' ) ); - text.className = 'vui-typography-small-strong-text'; - } ); - - it( 'defines a ".vui-typography-small-strong-text" selector', function() { - expect( document ).toHaveCssSelector( '.vui-typography-small-strong-text' ); - } ); - - it( 'applies the font size', function() { - expect( text ).toHaveFontSize( '13px' ); - } ); - - it( 'applies the font weight', function() { - expect( text ).toHaveFontWeight( 'bold' ); - } ); - - } ); - - } ); - -} )();