Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Hybridize alert. #13

Merged
merged 8 commits into from
Nov 23, 2017
Merged

Hybridize alert. #13

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
da957ca
Hybridize alert.
dbatiste Nov 22, 2017
5b7dec2
Initial attempt for inline demo.
dbatiste Nov 22, 2017
2196611
Try to hide typography stuff for inline demo.
dbatiste Nov 22, 2017
a22ebf5
2nd attempt to get typography working in inline demo.
dbatiste Nov 22, 2017
28eede4
Another attempt to get typography working in inline demo.
dbatiste Nov 22, 2017
ed82b71
Remove screenshot and update type of alert in demo.
dbatiste Nov 22, 2017
ff503b2
Update to latest version of polymer-cli.
dbatiste Nov 22, 2017
49fabcc
Add .json extension to eslint config per recommendation.
dbatiste Nov 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@ insert_final_newline = true
indent_style = tab
indent_size = 4

[{*.json,*.yml}]
[{package.json,bower.json,.travis.yml,.eslintrc}]
Copy link
Member

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.

Copy link
Contributor Author

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.

Copy link
Member

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok cool.

indent_style = space
indent_size = 2
0 .eslintrc.json → .eslintrc
View file
Open in desktop
File renamed without changes.
7 changes: 4 additions & 3 deletions .gitignore
View file
Open in desktop
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/
3 changes: 3 additions & 0 deletions .travis.yml
View file
Open in desktop
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
86 changes: 60 additions & 26 deletions README.md
View file
Open in desktop
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)
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alt text is wrong

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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
Expand Down
Binary file added alert.gif
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 37 additions & 11 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,49 @@
"description": "Polymer-based web component for a D2L alert",
"main": "d2l-alert.html",
"license": "Apache-2.0",
"homepage": "https://github.com/Brightspace/alert",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"demo",
"test",
"tests"
".editorconfig",
".eslintrc",
".gitignore",
".travis.yml",
"index.html",
"package.json",
"wct.config.json"
],
"dependencies": {
"polymer": "^1.7.1",
"d2l-button": "^3.0.8",
"d2l-colors": "^2.2.3",
"d2l-icons": "^3.1.0",
"polymer": "Polymer/polymer#1 - 2",
"d2l-colors": "^2.4.0 || ^3.1.0",
"d2l-icons": "^3.6.0 || ^4.4.0",
"d2l-localize-behavior": "^1.0.0",
"d2l-typography": "^5.3.0"
"d2l-typography": "^5.3.0 || ^6.0.0"
},
"devDependencies": {
"webcomponentsjs": "^0.7.24"
"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"
},
"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"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}
61 changes: 54 additions & 7 deletions d2l-alert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -16,7 +21,7 @@
flex-direction: row;
background: white;
}
:host[hidden] {
:host([hidden]) {
display: none;
}
.alert-wrapper {
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -92,6 +111,7 @@
padding: 1.15em 1.43em;
border-left: none;
font: inherit;
margin: 0;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was needed just for Safari.

}

button:hover,
Expand All @@ -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;
Expand All @@ -133,21 +158,19 @@
<div class="message-highlight"></div>
<slot></slot>
</div>
<button is="d2l-button" on-tap="_dispatchButtonPressedEvent" hidden$="[[!hasButton]]">
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 d2l-button hybrid. In fact, doing so makes things difficult since it would require lots of style overrides.

<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',

Expand All @@ -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: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.
*/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think ideally we'd want this to be a closed attribute, but that's a major breaking change so we can defer for now.

close: function() {
this.setAttribute('hidden', 'hidden');
this._dispatchClosedEvent();
Expand Down