-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hybridize alert. #13
Hybridize alert. #13
Changes from 1 commit
da957ca
5b7dec2
2196611
a22ebf5
28eede4
ed82b71
ff503b2
49fabcc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
bower_components* | ||
node_modules | ||
bower-*.json | ||
bower_components | ||
bower_components-1.x | ||
bower-1.x.json | ||
node_modules/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,5 @@ | ||
language: node_js | ||
node_js: node | ||
script: | ||
- npm run test:lint:js | ||
- npm run test:lint:wc |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,100 @@ | ||
# d2l-alert | ||
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/alert) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will still need to get this component registered. |
||
[![Bower version][bower-image]][bower-url] | ||
[![Build status][ci-image]][ci-url] | ||
|
||
A [Polymer](https://www.polymer-project.org/1.0/)-based web component for alerts. | ||
[Polymer](https://www.polymer-project.org)-based web component for D2L alerts. | ||
|
||
![screenshot of text input component](/alert.gif?raw=true) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Alt text is wrong There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks. I will correct. Copy & paste. ;) |
||
|
||
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 | ||
``` | ||
|
||
Type can be one of: `confirmation`, `call-to-action` (default), `error`, `warning`, or `reinforcement`. | ||
|
||
|
||
## Usage | ||
|
||
Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import the opener and content components as needed: | ||
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 | ||
<head> | ||
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script> | ||
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> | ||
<link rel="import" href="bower_components/d2l-alert/d2l-alert.html"> | ||
</head> | ||
``` | ||
|
||
### Alert | ||
|
||
Alerts can be defined using `d2l-alert`. | ||
A `<d2l-alert>` custom element can now be used in your application by specifying one of the following types: `call-to-action`, `success`, `error`, or `warning`. | ||
|
||
```html | ||
<link rel="import" href="../d2l-alert/d2l-alert.html"> | ||
<d2l-alert type="call-to-action">A call-to-action message.</d2l-alert> | ||
``` | ||
|
||
<d2l-alert type='call-to-action'> | ||
This is the alert message | ||
</d2l-alert> | ||
A close button can optionally be rendered by specifying the `has-close-button` attribute. | ||
|
||
<d2l-alert type='call-to-action' button-text='Yes, use the cool new UI!' has-close-button> | ||
This is the alert message | ||
```html | ||
<d2l-alert type="call-to-action" has-close-button> | ||
A call-to-action message. | ||
</d2l-alert> | ||
``` | ||
|
||
* `type` - required to style the alert; values: call-to-action, success, error, warning | ||
* `button-text` - optionally specify text for a custom button | ||
* `has-close-button` - optionally show a close button for dismissing the alert | ||
```javascript | ||
alert.addEventListener('d2l-alert-closed', function() { | ||
console.log('alert dismissed/closed'); | ||
}); | ||
``` | ||
|
||
A custom action button can also be rendered if text is provided for the button. | ||
|
||
```html | ||
<d2l-alert type="call-to-action" button-text="Do it!"> | ||
A call-to-action message. | ||
</d2l-alert> | ||
``` | ||
|
||
```javascript | ||
alert.addEventListener('d2l-alert-button-pressed', function() { | ||
console.log('alert custom button pressed!'); | ||
console.log('alert custom action!'); | ||
}); | ||
``` | ||
|
||
alert.addEventListener('d2l-alert-closed', function() { | ||
console.log('alert was dismissed/closed'); | ||
}); | ||
## Developing, Testing and Contributing | ||
|
||
After cloning the repo, run `npm install` to install dependencies. | ||
|
||
If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: | ||
|
||
```shell | ||
npm install -g polymer-cli | ||
``` | ||
|
||
To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: | ||
|
||
```shell | ||
polymer serve | ||
``` | ||
|
||
### Usage in Production | ||
To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): | ||
|
||
In production, it's recommended to use a build tool like [Vulcanize](https://github.com/Polymer/vulcanize) to combine all your web components into a single import file. [More from the Polymer Docs: Optimize for Production](https://www.polymer-project.org/1.0/tools/optimize-for-production.html)... | ||
```shell | ||
npm run lint | ||
``` | ||
|
||
## Coding styles | ||
To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests): | ||
|
||
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. | ||
```shell | ||
polymer test --skip-plugin sauce | ||
``` | ||
|
||
To lint AND run local unit tests: | ||
|
||
```shell | ||
npm test | ||
``` | ||
|
||
[bower-url]: http://bower.io/search/?q=d2l-alert | ||
[bower-image]: https://badge.fury.io/bo/d2l-alert.svg | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,10 +2,15 @@ | |
<link rel="import" href="../d2l-colors/d2l-colors.html"> | ||
<link rel="import" href="../d2l-icons/d2l-icon.html"> | ||
<link rel="import" href="../d2l-icons/tier1-icons.html"> | ||
<link rel="import" href="../d2l-button/d2l-button.html"> | ||
<link rel="import" href="../d2l-typography/d2l-typography-shared-styles.html"> | ||
<link rel="import" href="localize-behavior.html"> | ||
<link rel="import" href="d2l-alert-shared-styles.html"> | ||
<!-- | ||
`d2l-alert` | ||
Polymer-based web component for a D2L alert | ||
|
||
@demo demo/index.html | ||
--> | ||
|
||
<dom-module id="d2l-alert"> | ||
<template> | ||
|
@@ -16,7 +21,7 @@ | |
flex-direction: row; | ||
background: white; | ||
} | ||
:host[hidden] { | ||
:host([hidden]) { | ||
display: none; | ||
} | ||
.alert-wrapper { | ||
|
@@ -29,12 +34,18 @@ | |
:host-context([dir='rtl']) .alert-wrapper :first-child { | ||
border-radius: 0 3px 3px 0; | ||
} | ||
:host(:dir(rtl)) .alert-wrapper :first-child { | ||
border-radius: 0 3px 3px 0; | ||
} | ||
.alert-wrapper :last-child:not(.message-highlight) { | ||
border-radius: 0 3px 3px 0; | ||
} | ||
:host-context([dir='rtl']) .alert-wrapper :last-child:not(.message-highlight) { | ||
border-radius: 3px 0 0 3px; | ||
} | ||
:host(:dir(rtl)) .alert-wrapper :last-child:not(.message-highlight) { | ||
border-radius: 3px 0 0 3px; | ||
} | ||
.message-wrapper { | ||
position: relative; | ||
border: 1px solid var(--d2l-color-gypsum); | ||
|
@@ -74,6 +85,14 @@ | |
border-top-right-radius: 3px; | ||
border-bottom-right-radius: 3px; | ||
} | ||
:host(:dir(rtl)) .message-highlight { | ||
left: auto; | ||
right: 0; | ||
border-top-left-radius: 0; | ||
border-bottom-left-radius: 0; | ||
border-top-right-radius: 3px; | ||
border-bottom-right-radius: 3px; | ||
} | ||
@keyframes drop-in { | ||
from { | ||
transform: translate(0,-10px); | ||
|
@@ -92,6 +111,7 @@ | |
padding: 1.15em 1.43em; | ||
border-left: none; | ||
font: inherit; | ||
margin: 0; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was needed just for Safari. |
||
} | ||
|
||
button:hover, | ||
|
@@ -113,6 +133,11 @@ | |
border-right: none; | ||
} | ||
|
||
:host(:dir(rtl)) button { | ||
border-left: 1px solid var(--d2l-color-gypsum); | ||
border-right: none; | ||
} | ||
|
||
.inner-button { | ||
display: flex; | ||
justify-content: center; | ||
|
@@ -133,21 +158,19 @@ | |
<div class="message-highlight"></div> | ||
<slot></slot> | ||
</div> | ||
<button is="d2l-button" on-tap="_dispatchButtonPressedEvent" hidden$="[[!hasButton]]"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Turns out we weren't relying on d2l-button for anything, so there wasn't any need to switch to |
||
<button on-tap="_dispatchButtonPressedEvent" hidden$="[[!_hasButton]]"> | ||
<div class="inner-button d2l-alert-button"> | ||
[[buttonText]] | ||
</div> | ||
</button> | ||
<button is="d2l-button" title$="[[localize('close')]]" on-tap="close" hidden$="[[!hasCloseButton]]"> | ||
<button title$="[[localize('close')]]" on-tap="close" hidden$="[[!hasCloseButton]]"> | ||
<div class="inner-button"> | ||
<d2l-icon class="close-icon" icon="d2l-tier1:close-default"></d2l-icon> | ||
</div> | ||
</button> | ||
</div> | ||
</template> | ||
<script> | ||
'use strict'; | ||
|
||
Polymer({ | ||
is: 'd2l-alert', | ||
|
||
|
@@ -156,25 +179,49 @@ | |
], | ||
|
||
properties: { | ||
/** | ||
* Fired when the custom action button is pressed. | ||
* | ||
* @event d2l-alert-button-pressed | ||
*/ | ||
|
||
/** | ||
* Fired when the alert is closed/hidden. | ||
* | ||
* @event d2l-alert-closed | ||
*/ | ||
|
||
/** | ||
* Type of alert to display. Valid values are 'call-to-action', 'success', 'error', and 'warning'. | ||
*/ | ||
type: { | ||
type: String, | ||
value: 'call-to-action', | ||
reflectToAttribute: true | ||
}, | ||
hasButton: { | ||
_hasButton: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Made this computed property private (ala "_" prefix), since it's not really part of the public API, and we don't really want it showing as such in the generated docs. |
||
type: Boolean, | ||
computed: '_computeHasButton(buttonText)' | ||
}, | ||
/** | ||
* Text for a custom action button. If provided, a button will be rendered with the specified text. | ||
*/ | ||
buttonText: { | ||
type: String, | ||
value: null | ||
}, | ||
/** | ||
* Whether to render a close button, allowing the user to hide the alert. | ||
*/ | ||
hasCloseButton: { | ||
type: Boolean, | ||
value: false | ||
} | ||
}, | ||
|
||
/** | ||
* Closes/hides the alert. | ||
*/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think ideally we'd want this to be a |
||
close: function() { | ||
this.setAttribute('hidden', 'hidden'); | ||
this._dispatchClosedEvent(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any reason for changing from the
.json
extension to no extension? I've been switching things to be the opposite lately as I think it's more standard.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Haha - I was trying to follow new convention... since I think someone recently recommended I should omit the extension. Looks like
text-input
omits it too.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ha so I wouldn't trust
text-input
totally. Their docs seem to like having the extension.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok cool.