diff --git a/.Gruntfile.js.swp b/.Gruntfile.js.swp new file mode 100644 index 00000000..fde6b723 Binary files /dev/null and b/.Gruntfile.js.swp differ diff --git a/History.md b/History.md index d9b3ca24..72f62dcc 100644 --- a/History.md +++ b/History.md @@ -1,3 +1,11 @@ +v0.3.0 +================== +* Message truncates after 3 lines, able to expand + v0.2.1 ================ * Updated License + +v0.0.1 +================== +* Initial release diff --git a/README.md b/README.md index 5db10394..9fc1e26e 100644 --- a/README.md +++ b/README.md @@ -3,10 +3,130 @@ Px-Alert-Message ## Overview -Px-Alert-Message is a Predix Experience ('Px') component +Px-Alert-Message is a Predix Experience ('Px') component that appears in a queue within the message container. -## Getting Started +## Usage +### Prerequisites +1. node.js +2. npm +3. bower +4. [webcomponents-lite.js polyfill](https://github.com/webcomponents/webcomponentsjs) + +Node, npm and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application. + +### Getting Started + +First, install the component via bower on the command line. + +``` +bower install https://github.com/PredixDev/px-alert-message.git --save +``` + +Second, import the component to your application with the following tag in your head. + +``` + +``` + +Finally, use the component in your application: + +``` + + +``` + +
+
+ +## Attributes + +#### type + +*Type:* **String** - (*Optional*) - *Default:* "information" + +Type defines the alert level; this is reflected in the icon. +``` +'important' - red triangle labeled 1 +'warning'- orange diamond labeled 2 +'error' - yellow square labeled 3 +'information' - blue circle labeled 4 +'custom' - allows a developer to specify HTML incluing images in place of the icon. +'more' - allows for a message that shows that there are more messages. +``` +``` + + +``` +#### message-title + +*Type:* **String** - (*Optional*) - *Default:* "" + +The title that is displayed bold in the message area of the alert box. + +``` + + +``` + +#### message + +*Type:* **String** - (*Optional*) - *Default:* "" + +The message body that is displayed after the message-title in the message area of the alert box. + +``` + + +``` + +#### action + +*Type:* **String** - (*Optional*) - *Default:* null + +User interaction on the right hand side of the message box. +``` +'dismiss' - displays the (x) control to dismiss +'acknowledge' - displays the (OK) button to dismiss +'URL' - string containing http url to be opened, displays the (Open) button. +``` +``` + + +``` + +#### auto-dismiss + +*Type:* **Number** - (*Optional*) - *Default:* null + +A delay in milliseconds before an alert message is dismissed automatically. + +``` + + +``` + + +
+
+ + +## Local Development From the component's directory... @@ -23,7 +143,7 @@ From the component's directory $ grunt depserve ``` -Starts a local server. Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples. +Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples. ### LiveReload @@ -31,6 +151,8 @@ By default grunt depserve is configured to enable LiveReload and will be watchin Your browser will also need to have the LiveReload extension installed and enabled. For instructions on how to do this please refer to [livereload.com/extensions/](http://livereload.com/extensions/). +Disable LiveReload by removing the livereload key from the configuration object or explicitly setting it to false. + Add, remove, modify file system patterns specified in the `depserve.options.livereload` array in your `Gruntfile.js` This is an example depserve configuration: diff --git a/bower.json b/bower.json index eb02e842..96074be0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "px-alert-message", - "version": "0.2.1", + "version": "0.3.0", "main": [ "px-alert-message.html" ], @@ -17,7 +17,9 @@ "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.3", "polymer": "~1.2.3", "px-theme": "https://github.com/PredixDev/px-theme.git#~0.4.0", - "web-component-tester": "~3.3.17" + "web-component-tester": "~3.3.17", + "px-buttons-design": "https://github.com/PredixDev/px-buttons-design.git#^0.4.18", + "px-actionable-text-icons": "https://github.com/PredixDev/px-actionable-text-icons.git#^0.0.1" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#~v1.1.0", diff --git a/css/px-alert-message-sketch.css b/css/px-alert-message-sketch.css index e7bbf762..8f007c68 100644 --- a/css/px-alert-message-sketch.css +++ b/css/px-alert-message-sketch.css @@ -183,9 +183,7 @@ html { /*! Comment to prevent cssmin munging this rule with html above and borking Safari */ box-sizing: border-box; } -*, -*:before, -*:after { +*, *:before, *:after { box-sizing: inherit; } /** @@ -248,15 +246,13 @@ a { /** * Improve readability when focused and also mouse hovered in all browsers. */ } - a:link, - a:visited { + a:link, a:visited { color: #3e87e8; } a:hover { color: #3573c5; } a:active { color: #2b5ea2; } - a:active, - a:hover { + a:active, a:hover { outline: 0; } /** @@ -339,9 +335,9 @@ a { padding: 0 !important; clip: rect(0 0 0 0) !important; } -.a11y.focusable:active, -.a11y.focusable:focus, -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { +.a11y.focusable:active, .a11y.focusable:focus, +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { position: static; overflow: visible; width: auto; @@ -581,8 +577,6 @@ a { .viewport--full-height { min-height: 100vh; } -/*------------------------------------* #PX-META-BUTTONS-DESIGN -\*------------------------------------*/ .btn { display: inline-block; overflow: visible; @@ -601,11 +595,7 @@ a { text-transform: none; white-space: nowrap; background-color: #e4e4ea; } - .btn, - .btn:link, - .btn:visited, - .btn:hover, - .btn:active { + .btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: black; } .btn:hover { border-color: #9999a3; @@ -618,6 +608,13 @@ a { .btn:active { outline: none; } +/** Workaround for FF since it does not support calc(). + * Other buttons appear ok with the height declaration, but non-button elements do not. +**/ +@-moz-document url-prefix() { + .btn:not(button) { + line-height: 1.8em; } } + button.btn { -webkit-appearance: button; } @@ -627,63 +624,151 @@ button.btn { .btn + .btn { margin-left: 0.6666666667rem; } -.btn-group { - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - .btn-group input { - position: absolute !important; - overflow: hidden !important; - width: 1px !important; - height: 1px !important; - margin: -1px !important; - border: 0 !important; - padding: 0 !important; - clip: rect(0 0 0 0) !important; } - .btn-group .btn { - border-radius: 0; - -webkit-appearance: inherit; } - .btn-group .btn:first-of-type { - border-radius: 3px 0 0 3px; } - .btn-group .btn:last-of-type { - border-radius: 0 3px 3px 0; } - .btn-group .btn + .btn { - margin-left: 0; } - .btn-group :checked + .btn { - border-color: #086e87; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); - color: white; - background: #0a9ec1; } - .btn-group :checked + .btn:hover, - .btn-group :checked + .btn:focus { - border-color: transparent; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); - color: white; - background: #0986a4; } - .btn-group :checked + .btn:active { - border-color: transparent; - box-shadow: none; - color: white; - background: #086e87; } +/** + * Buttons with no styles (good a11y practice to use