diff --git a/.editorconfig b/.editorconfig index a75e9e9..219cbc9 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,6 +8,6 @@ insert_final_newline = true indent_style = tab indent_size = 4 -[{package.json,bower.json,.travis.yml,.eslintrc.json}] +[{*.json,*.yml}] indent_style = space indent_size = 2 diff --git a/README.md b/README.md index bc26ba9..7b45172 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,27 @@ [Polymer](https://www.polymer-project.org)-based web component for D2L alerts. +For further information on this and other Brightspace UI components, see the docs at [ui.developers.brightspace.com](http://ui.developers.brightspace.com/). + +## Installation + +`d2l-alert` can be installed from [Bower][bower-url]: + +```shell +bower install d2l-alert +``` + +## Usage + +Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-alert.html`: + +```html + + + + +``` + ```html - A warning message. + A warning message. ``` -For further information on this and other Brightspace UI components, see the docs at [ui.developers.brightspace.com](http://ui.developers.brightspace.com/). - -## Installation - -`d2l-alert` can be installed from [Bower][bower-url]: - -```shell -bower install d2l-alert -``` - -## Usage - -Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-alert.html`: - -```html - - - - -``` - A `` custom element can now be used in your application by specifying one of the following types: `call-to-action`, `success`, `error`, or `warning`. ```html @@ -70,13 +70,13 @@ A close button can optionally be rendered by specifying the `has-close-button` a ```html - A call-to-action message. + A call-to-action message. ``` ```javascript alert.addEventListener('d2l-alert-closed', function() { - console.log('alert dismissed/closed'); + console.log('alert dismissed/closed'); }); ``` @@ -84,13 +84,13 @@ A custom action button can also be rendered if text is provided for the button. ```html - A call-to-action message. + A call-to-action message. ``` ```javascript alert.addEventListener('d2l-alert-button-pressed', function() { - console.log('alert custom action!'); + console.log('alert custom action!'); }); ``` diff --git a/bower.json b/bower.json index 8fdd2d4..8f17f75 100644 --- a/bower.json +++ b/bower.json @@ -10,36 +10,29 @@ ".eslintrc.json", ".gitignore", ".travis.yml", + "alert.gif", "index.html", "package.json", + "polymer.json", "wct.config.json" ], "dependencies": { - "polymer": "Polymer/polymer#1 - 2", - "d2l-colors": "^2.4.0 || ^3.1.0", - "d2l-icons": "^3.6.0 || ^4.4.0", + "d2l-colors": "^3.1.2", + "d2l-icons": "^4.5.1", "d2l-localize-behavior": "^1.0.0", - "d2l-typography": "^5.3.0 || ^6.0.0" + "d2l-typography": "^6.0.0", + "polymer": "1.9.1 - 2" }, "devDependencies": { - "iron-component-page": "PolymerElements/iron-component-page#1 - 2", - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2", - "web-component-tester": "^6.0.0", - "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0" + "iron-component-page": "^2.0.0", + "iron-demo-helpers": "^2.0.0", + "web-component-tester": "^6.0.0" }, "variants": { "1.x": { "dependencies": { - "d2l-colors": "^2.4.0", - "d2l-icons": "^3.6.0", "polymer": "^1.9.1" }, - "devDependencies": { - "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", - "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", - "web-component-tester": "^5.0.0" - }, "resolutions": { "webcomponentsjs": "^0.7" } diff --git a/d2l-alert.html b/d2l-alert.html index 8afeec0..a232f88 100644 --- a/d2l-alert.html +++ b/d2l-alert.html @@ -175,21 +175,22 @@ is: 'd2l-alert', behaviors: [ - window.D2L.PolymerBehaviors.Alert.LocalizeBehavior + D2L.PolymerBehaviors.Alert.LocalizeBehavior ], - properties: { - /** - * Fired when the custom action button is pressed. - * - * @event d2l-alert-button-pressed - */ + /** + * Fired when the custom action button is pressed. + * + * @event d2l-alert-button-pressed + */ - /** - * Fired when the alert is closed/hidden. - * - * @event d2l-alert-closed - */ + /** + * Fired when the alert is closed/hidden. + * + * @event d2l-alert-closed + */ + + properties: { /** * Type of alert to display. Valid values are 'call-to-action', 'success', 'error', and 'warning'. diff --git a/localize-behavior.html b/localize-behavior.html index d633551..8b248e0 100644 --- a/localize-behavior.html +++ b/localize-behavior.html @@ -3,8 +3,12 @@ (function() { 'use strict'; - /** @polymerBehavior */ - var AlertLocalizeBehavior = { + window.D2L = window.D2L || {}; + window.D2L.PolymerBehaviors = window.D2L.PolymerBehaviors || {}; + window.D2L.PolymerBehaviors.Alert = window.D2L.PolymerBehaviors.Alert || {}; + + /** @polymerBehavior D2L.PolymerBehaviors.Alert.LocalizeBehavior */ + D2L.PolymerBehaviors.Alert.LocalizeBehaviorImpl = { properties: { /** * Localization resources. @@ -57,14 +61,10 @@ } }; - window.D2L = window.D2L || {}; - window.D2L.PolymerBehaviors = window.D2L.PolymerBehaviors || {}; - window.D2L.PolymerBehaviors.Alert = window.D2L.PolymerBehaviors.Alert || {}; - - /** @polymerBehavior */ - window.D2L.PolymerBehaviors.Alert.LocalizeBehavior = [ + /** @polymerBehavior D2L.PolymerBehaviors.Alert.LocalizeBehavior */ + D2L.PolymerBehaviors.Alert.LocalizeBehavior = [ D2L.PolymerBehaviors.LocalizeBehavior, - AlertLocalizeBehavior + D2L.PolymerBehaviors.Alert.LocalizeBehaviorImpl ]; })(); diff --git a/package.json b/package.json index b2e2ea4..23e96f8 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,9 @@ "author": "D2L Corporation", "license": "Apache-2.0", "devDependencies": { - "eslint": "^3.14.0", - "eslint-config-brightspace": "^0.2.4", - "eslint-plugin-html": "^1.7.0", + "eslint": "^4.15.0", + "eslint-config-brightspace": "^0.4.0", + "eslint-plugin-html": "^4.0.1", "polymer-cli": "^1.5.7" } } diff --git a/wct.conf.json b/wct.conf.json index c33e1ce..1d82cf9 100644 --- a/wct.conf.json +++ b/wct.conf.json @@ -28,7 +28,7 @@ { "browserName": "safari", "platform": "OS X 10.12", - "version": "10.0" + "version": "" }, { "browserName": "microsoftedge",