fix(alerts): reorganize alert documentation

- Break dismissable alerts into child component
- Break alert types into child component

[Fixes #82655864]

src/pivotal-ui/components/alerts.scss

@@ -41,26 +41,19 @@ If you want to include a link in your alert, use the class `alert-link`.
   </p>
 </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>
-
-```
+/*doc
+---
+title: Alert Types
+name: 01_alert_types
+parent: alert
+---
 
-There are may use cases for alerts. Here is a list of our different alert types.
+Our 4 alert types are:
 
 ```html_example_table
-<div class="alert alert-success alert-dismissable">
-  <button class="close" data-dismiss="alert">
-    <i class="fa fa-times"></i>
-  </button>
+<div class="alert alert-success">
   <div class="media">
     <div class="media-left">
       <i class="fa fa-check-circle"></i>
@@ -72,10 +65,7 @@ There are may use cases for alerts. Here is a list of our different alert types.
   </div>
 </div>
 
-<div class="alert alert-info alert-dismissable">
-  <button class="close" data-dismiss="alert">
-    <i class="fa fa-times"></i>
-  </button>
+<div class="alert alert-info">
   <div class="media">
     <div class="media-left">
       <i class="fa fa-info-circle"></i>
@@ -87,10 +77,7 @@ There are may use cases for alerts. Here is a list of our different alert types.
   </div>
 </div>
 
-<div class="alert alert-warning alert-dismissable">
-  <button class="close" data-dismiss="alert">
-    <i class="fa fa-times"></i>
-  </button>
+<div class="alert alert-warning">
   <div class="media">
     <div class="media-left">
       <i class="fa fa-exclamation-triangle"></i>
@@ -102,10 +89,7 @@ There are may use cases for alerts. Here is a list of our different alert types.
   </div>
 </div>
 
-<div class="alert alert-error alert-dismissable">
-  <button class="close" data-dismiss="alert">
-    <i class="fa fa-times"></i>
-  </button>
+<div class="alert alert-error">
   <div class="media">
     <div class="media-left">
       <i class="fa fa-exclamation-triangle"></i>
@@ -116,8 +100,28 @@ There are may use cases for alerts. Here is a list of our different alert types.
     </div>
   </div>
 </div>
-``` 
+```
+
+*/
 
+/*doc
+---
+title: Dismissable Alerts
+name: 02_alert_dismissable
+parent: alert
+---
+
+By adding `.alert-dismissable` 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>
+
+```
 */
 
 .alert {