Merge pull request #58 from pivotal-cf/complex-alerts

feat(alert): alerts are more flexible with their content

src/pivotal-ui/components/alerts.scss

@@ -7,15 +7,42 @@ categories:
   - Objects
 ---
 
-Alerts are used to display flash messages to the user.
+Alerts are used to display flash messages to the user. When using alerts with simple one-line text,
+wrap the text in a `<p>` with `.em-high`.
 
 ```html_example
 <div class="alert alert-success">
-  <p>Success</p>
+  <p class="em-high">Success</p>
 </div>
 ```
 
-You can also make them dismissable:
+Alerts are also used to bring important notes to a user's attention. If the content of your alert
+is a little more complicated, we would recommend using headings coupled with the content.
+
+```html_example
+<div class="alert alert-info">
+  <h5 class="em-high mtn">You should know...</h5>
+  <p>There are some things you should note. Just in case you didn't figure it out already.</p>
+  <ul>
+    <li>thing 1</li>
+    <li>thing 2</li>
+  </ul>
+</div>
+```
+
+By adding `.alert-dismassable` and a button, you can also make alerts dismissable.
+
+```html_example
+<div class="alert alert-success alert-dismissable">
+  <button class="close" data-dismiss="alert">
+    <i class="fa fa-times"></i>
+  </button>
+  <p class="em-high">Click the 'X' over there------> </p>
+</div>
+
+```
+
+There are may use cases for alerts. Here is a list of our different alert types.
 
 ```html_example_table
 <div class="alert alert-success alert-dismissable">
@@ -26,7 +53,7 @@ You can also make them dismissable:
     <div class="media-left">
       <i class="fa fa-check-circle"></i>
     </div>
-    <div class="media-body">
+    <div class="media-body em-high">
       Everything is wonderful.
       <a class="alert-link" href="http://bit.ly/QCMZM5">Be happy.</a>
     </div>
@@ -41,7 +68,7 @@ You can also make them dismissable:
     <div class="media-left">
       <i class="fa fa-info-circle"></i>
     </div>
-    <div class="media-body">
+    <div class="media-body em-high">
       Info for you.
       <a class="alert-link" href="http://bit.ly/1DFns8H">Tell me more.</a>
     </div>
@@ -56,7 +83,7 @@ You can also make them dismissable:
     <div class="media-left">
       <i class="fa fa-exclamation-triangle"></i>
     </div>
-    <div class="media-body">
+    <div class="media-body em-high">
       Warning: There is no parking on the dancefloor.
       <a class="alert-link" href="http://bit.ly/1uM05DJ">Be alert.</a>
     </div>
@@ -71,22 +98,19 @@ You can also make them dismissable:
     <div class="media-left">
       <i class="fa fa-exclamation-triangle"></i>
     </div>
-    <div class="media-body">
+    <div class="media-body em-high">
       Something has gone horribly awry.
       <a class="alert-link" href="http://bit.ly/1rooFJV">You've made a huge mistake.</a>
     </div>
   </div>
 </div>
-```
-
-
+``` 
 
 */
 
 .alert {
   border: none;
   margin: $baseSpacing 0 0;
-  font-weight: 600;
 
   a.alert-link {
     &:hover {

src/pivotal-ui/components/colors.scss

@@ -12,11 +12,12 @@ Our color pallet is composed of several different colors. At any given point in
 evolution of our design and likely includes old and new colors. Whenever possible, evolve the old
 colors rather than adding new ones.
 
-
 <div class="alert alert-warning alert-dismissable">
+  <h5 class="em-high mtn">
+    Sass variables should only be used in variables.css.scss.
+  </h5>
   <p>
-    Sass variables should <strong>only be used in variables.css.scss</strong>. They should never be used
-    directly when building components, because it makes
+    They should never be used directly when building components, because it makes
     it very hard to change the values later if you can't tell how they might have been used.
     You should <strong>define your own variables</strong> that use these colors in variables.css.scss.
   </p>

src/pivotal-ui/components/ellipsis.scss

@@ -22,7 +22,7 @@ The type `.type-ellipsis-1-line` adds ellipsis to text when there is too much. C
 
 
 <div class="alert alert-info">
-  <p>
+  <p class="em-high">
     Multi-line ellipsis only works on webkit.
   </p>
 </div>

src/pivotal-ui/components/forms.scss

@@ -371,8 +371,11 @@ parent: form
 Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
 
 <div class="alert alert-info">
+  <h5 class="em-high mtn">
+    Always add labels to every input.
+  </h5>
   <p>
-    Always add labels to every input. Screen readers will have trouble with your forms if you don't. You can always hide the labels using the <code class="sg-code">.sr-only</code> class.
+    Screen readers will have trouble with your forms if you don't. You can always hide the labels using the <code class="sg-code">.sr-only</code> class.
   </p>
 </div>
 
@@ -444,7 +447,7 @@ all HTML5 types: `text`, `password`, `datetime`, `datetime-local`,
 `tel`, and `color`.
 
 <div class="alert alert-warning">
-  <p>
+  <p class="em-high">
     Inputs will only be fully styled if their type is properly declared.
   </p>
 </div>
@@ -563,7 +566,9 @@ If you're doing client-side validation and want to show successful validation of
 add `.has-success` to the field's form group.
 
 <div class="alert alert-info mbxl">
-  <p>The <code>.has-success</code> class can only be used on inputs that have a text-box.</p>
+  <p class="em-high">
+    The <code>.has-success</code> class can only be used on inputs that have a text-box.
+  </p>
 </div>
 
 ```html_example_table

src/pivotal-ui/components/lists.scss

@@ -693,7 +693,7 @@ large                 | `.list-card-lg`
 extra-large           | `.list-card-xl`
 
 <div class="alert alert-info mbxl">
-  <p>The cards list should only be used in fully liquid layouts, otherwise grids are a better choice.</p>
+  <p class="em-high">The cards list should only be used in fully liquid layouts, otherwise grids are a better choice.</p>
 </div>
 
 This is an example of a card list with the `list-cards-xs` stack point applied.

src/pivotal-ui/components/tables.scss

@@ -671,7 +671,7 @@ If you would like a custom size, please add an inline style to the `.table-scrol
 Design Note: The `table-scrollable` is often paired with `table-data` and `table-light` as in our example.
 
 <div class="alert alert-info alert-dismissable">
-  <p>
+  <p class="em-high">
     You will need to specify the width of <strong>every</strong> column in both the <code>thead</code> and
     the first row of the <code>tbody</code>. You can do this with inline width attributes.
   </p>

src/pivotal-ui/components/tooltips.scss

@@ -14,7 +14,9 @@ The `data-placement` attribute defines the tooltip's placement.
 If `data-placement` is not specified, the tooltip is placed on top by default.
 
 <div class="alert alert-warning">
-  Tooltips must be initialized with javascript: <code>$(mySelector).tooltip();</code>
+  <p class="em-high">
+    Tooltips must be initialized with javascript: <code>$(mySelector).tooltip();</code>
+  </p>
 </div>
 
 ```html_example
@@ -53,7 +55,9 @@ $('#button-with-tooltip-2').tooltip();
 ```
 
 <div class="alert alert-info">
-  If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class <code>.button-with-tooltip-wrapper</code>.
+  <p class="em-high">
+    If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class <code>.button-with-tooltip-wrapper</code>.
+  </p>
 </div>
 
 ```html_example

src/pivotal-ui/components/typography.scss

@@ -56,16 +56,14 @@ Set font sizes using headings and modifier classes.
 ```
 
 <div class="alert alert-info mbxl">
-  <div class="alert-heading">
-    Tip: Separating code and visual semantics
-  </div>
-  <div class="alert-body">
-    <p>
-      Sometimes you may need to use a heading which has different visual and code semantics.
-      You can accomplish this by combining classes with elements
-      (classes take visual precedence over elements in this case).
-    </p>
-  </div>
+  <h5 class="em-high mtn">
+    Separating code and visual semantics
+  </h5>
+  <p>
+    Sometimes you may need to use a heading which has different visual and code semantics.
+    You can accomplish this by combining classes with elements
+    (classes take visual precedence over elements in this case).
+  </p>
 </div>
 
 
@@ -79,7 +77,7 @@ Set font sizes using headings and modifier classes.
 If it's not a heading but you need similar visual treatment you can add just the class to any element.
 
 <div class="alert alert-warning mbxl">
-  <p>
+  <p class="em-high">
     Use headings when possible since they add semantic value.
   </p>
 </div>

src/pivotal-ui/components/vertical_alignment.scss

@@ -15,7 +15,7 @@ You can use grids, or the [text-alignment classes](/utilities.html#alignment)
 `.txt-l`, `.txt-r`, and `.txt-c` with this component.
 
 <div class="alert alert-warning">
-  <p>
+  <p class="em-high">
     This component is not supported in IE10 and below.
     While the content will appear, it will not be vertically aligned.
   </p>

src/styleguide/styleguide.scss

@@ -622,17 +622,3 @@ td.is-hidden {
     background-color: $neutral-11;
   }
 }
-
-.alert {
-  .alert-heading {
-    margin-bottom: 12px;
-  }
-
-  .alert-body {
-    font-weight: $font-weight-em-default;
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-}