-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #277 from edx/dsjen/alerts
Added alerts pattern.
- Loading branch information
Showing
7 changed files
with
276 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| --- | ||
| layout: pattern | ||
| title: Alerts | ||
| date: 2015-01-28 00:00:00 | ||
|
|
||
| categories: patterns | ||
| tags: | ||
| - atomic | ||
| - pattern | ||
| - alerts | ||
|
|
||
| slug: alerts | ||
|
|
||
| url_styles: "patterns/_alerts.scss" | ||
|
|
||
| description: Examples of alerts in a semi-real world context. | ||
|
|
||
| info: When something goes wrong, alerts clarify an issue and/or notify users of the problem, communicate the severity of the issue, and provide an actionable next step, if necessary. When implementing the alert pattern, consider the alert’s location; closer proximity to the action/event associates the issue (and hence resolution) with a specific page element, whereas more distant placement communicates a more systematic issue. Seek to balance graphic and content elements, where less is usually more. We recommend reading stuff about "microcopy." | ||
| --- | ||
|
|
||
| <h3 class="hd-6 example-set-hd">Error Alert with Message and Button</h3> | ||
| <div class="example-set"> | ||
| <div class="alert alert-error" role="alert" aria-labelledby="alert-title-error" tabindex="-1"> | ||
| <span class="icon alert-icon icon-exclamation-triangle" aria-hidden="true"></span> | ||
|
|
||
| <div class="alert-message-with-action"> | ||
| <h3 class="sr-only alert-title" id="alert-title-error"> | ||
| Unable to load chart. | ||
| </h3> | ||
|
|
||
| <p class="alert-copy"> | ||
| We are unable to load this chart. | ||
| </p> | ||
| </div> | ||
|
|
||
| <button type="button" class="alert-action btn-neutral btn">Read More <span class="sr-only">about charts</span></button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h3 class="hd-6 example-set-hd">Success Alert with Title and Message</h3> | ||
| <div class="example-set"> | ||
| <div class="alert alert-success" role="alert" aria-labelledby="alert-title-success" tabindex="-1"> | ||
| <span class="icon alert-icon icon-check" aria-hidden="true"></span> | ||
|
|
||
| <div class="alert-message"> | ||
| <h3 class="alert-title" id="alert-title-success"> | ||
| We've recieved your essay submission! | ||
| </h3> | ||
|
|
||
| <p class="alert-copy-with-title"> | ||
| Hang tight while the rest of the class catches up. We'll let you know when your peers have | ||
| graded your essay and when you can help grade theirs as well. In the meantime, | ||
| <a href="http://example.com">check out what's next in the course</a>. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h3 class="hd-6 example-set-hd">Warning Alert with Title, Message, and Button</h3> | ||
| <div class="example-set"> | ||
| <div class="alert alert-warning" role="alert" aria-labelledby="alert-title-warning" tabindex="-1"> | ||
| <span class="icon alert-icon icon-exclamation-triangle" aria-hidden="true"></span> | ||
|
|
||
| <div class="alert-message-with-action"> | ||
| <h3 class="alert-title" id="alert-title-warning"> | ||
| Waiting for Peer Responses | ||
| </h3> | ||
|
|
||
| <p class="alert-copy-with-title"> | ||
| All submitted peer responses have been assessed. Check back later to see if | ||
| more students have submitted responses. You'll receive your grade after you've | ||
| completed all the steps for this problem and your peers have assessed your | ||
| responses. | ||
| </p> | ||
| </div> | ||
|
|
||
| <button type="button" class="alert-action btn-neutral btn">Reload <span class="sr-only">peer responses</span></button> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3> | ||
| <div class="example-set"> | ||
| <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1"> | ||
| <span class="icon alert-icon icon-exclamation-triangle" aria-hidden="true"></span> | ||
|
|
||
| <div class="alert-message"> | ||
| <h3 class="sr-only alert-title" id="alert-warning-publish-title"> | ||
| Caution: The last published version of this unit is live. | ||
| </h3> | ||
|
|
||
| <p class="alert-copy"> | ||
| Caution: The last published version of this unit is live. By publishing | ||
| changes you will change the student experience. | ||
| </p> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <h3 class="hd-6 example-set-hd">Information Alert with Title and Message</h3> | ||
| <div class="example-set"> | ||
| <div class="alert alert-information" role="alert" aria-labelledby="alert-title-information" tabindex="-1"> | ||
| <span class="icon alert-icon icon-bullhorn" aria-hidden="true"></span> | ||
|
|
||
| <div class="alert-message"> | ||
| <h3 class="alert-title" id="alert-title-information"> | ||
| A better measure of total interest in your course | ||
| </h3> | ||
|
|
||
| <p class="alert-copy-with-title"> | ||
| The total enrollment metric below now includes all students who | ||
| have ever registered for this course. | ||
| </p> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "edx-pattern-library", | ||
| "version": "0.9.2", | ||
| "version": "0.10.0", | ||
| "authors": [ | ||
| "edX Pattern Library Team <[email protected]>" | ||
| ], | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "edx-pattern-library", | ||
| "version": "0.9.2", | ||
| "version": "0.10.0", | ||
| "author": "edX Pattern Library Team <[email protected]>", | ||
| "license": "Apache-2.0", | ||
| "description": "The (working) Visual, UI, and Front End Styleguide for edX Apps", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,3 +22,4 @@ | |
| @import 'patterns/depth'; | ||
| @import 'patterns/icons'; | ||
| @import 'patterns/tables'; | ||
| @import 'patterns/alerts'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| // ------------------------------ | ||
| // edX Pattern Library: Utilities - Alerts | ||
| // | ||
| // About: Contains base styling for alerts. | ||
| // ---------------------------- | ||
|
|
||
| // #CONFIG | ||
| // #UTILITIES | ||
| // #GENERAL | ||
| // #INDIVIDUAL CASES | ||
|
|
||
|
|
||
| // ---------------------------- | ||
| // #CONFIG | ||
| // ---------------------------- | ||
| $alert-background-color: palette(grayscale, white) !default; | ||
| $alert-icon-color: palette(grayscale, white) !default; | ||
| $alert-border-radius: spacing-vertical(xx-small) !default; | ||
| // border around the sides and bottom | ||
| $alert-border: rem(1) solid palette(grayscale-cool, light) !default; | ||
|
|
||
| // alert colors | ||
| $alert-information-color: palette(information, base) !default; | ||
| $alert-warning-color: palette(warning, base) !default; | ||
| $alert-error-color: palette(error, base) !default; | ||
| $alert-success-color: palette(success, base) !default; | ||
|
|
||
| // ---------------------------- | ||
| // #UTILITIES | ||
| // ---------------------------- | ||
| @mixin alert($alert-color) { | ||
| border-top: rem(2) solid $alert-color; | ||
|
|
||
| .alert-icon { | ||
| color: $alert-icon-color; | ||
| background-color: $alert-color; | ||
| } | ||
| } | ||
|
|
||
| @mixin alert-message($width) { | ||
|
|
||
| @include susy-media($bp-screen-md) { | ||
| @include float(left); | ||
| width: $width; | ||
| padding: spacing-vertical(small); | ||
| padding-top: 0; | ||
| padding-bottom: 0; | ||
| } | ||
|
|
||
| :last-child { | ||
| // keeps the message compact | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| // ---------------------------- | ||
| // #GENERAL | ||
| // ---------------------------- | ||
| .alert { | ||
| background-color: $alert-background-color; | ||
| border: $alert-border; | ||
| border-radius: $alert-border-radius; | ||
| border-top-left-radius: 0; | ||
| border-top-right-radius: 0; | ||
| padding: spacing-vertical(small) spacing-horizontal(base); | ||
| overflow: auto; | ||
| box-shadow: 0 rem(2) rem(2) 0 palette(grayscale-cool, xx-light); | ||
| } | ||
|
|
||
| .alert-icon { | ||
| // hide icons on small screens | ||
| display: none; | ||
|
|
||
| @include susy-media($bp-screen-md) { | ||
| @include float(left); | ||
| display: block; | ||
|
|
||
| // create a circle around the icon | ||
| border-radius: 50%; | ||
|
|
||
| // create room around the icon for the circle | ||
| padding: spacing-vertical(x-small); | ||
| } | ||
| } | ||
|
|
||
| .alert-message-with-action { | ||
| // provide room for the action to be displayed next to the alert message | ||
| @include alert-message(70%); | ||
| } | ||
|
|
||
| .alert-message { | ||
| @include alert-message(90%); | ||
| } | ||
|
|
||
| .alert-title { | ||
| @extend %hd-5; | ||
| @extend %headings-emphasized; | ||
|
|
||
| @include susy-media($bp-screen-md) { | ||
| // shift the section up to make the alert more compact | ||
| margin-top: - spacing-vertical(x-small); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| .alert-copy { | ||
| @extend %copy-base; | ||
|
|
||
| @include susy-media($bp-screen-md) { | ||
| // shift the message down to be in line with the icon | ||
| margin-top: spacing-vertical(xx-small); | ||
| } | ||
| } | ||
|
|
||
| .alert-copy-with-title { | ||
| @extend %copy-base; | ||
| } | ||
|
|
||
| .alert-action { | ||
| width: 100%; | ||
|
|
||
| @include susy-media($bp-screen-md) { | ||
| @include float(right); | ||
| width: inherit; | ||
| } | ||
| } | ||
|
|
||
| // ---------------------------- | ||
| // #INDIVIDUAL CASES | ||
| // ---------------------------- | ||
|
|
||
| // information-based alert | ||
| .alert-information { | ||
| @include alert($alert-information-color); | ||
| } | ||
|
|
||
| // warning-based alert | ||
| .alert-warning { | ||
| @include alert($alert-warning-color); | ||
| } | ||
|
|
||
| // error-based alert | ||
| .alert-error { | ||
| @include alert($alert-error-color); | ||
| } | ||
|
|
||
| // success-based alert | ||
| .alert-success { | ||
| @include alert($alert-success-color); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters