export default {
  title: 'Components|Alerts',
};
export const info = () =>
  '<div class="sprk-c-Alert sprk-c-Alert--info" role="alert" data-sprk-alert="container" data-id="alert-info-1" data-analytics="object.action.event" ><div class="sprk-c-Alert__content"> <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64" aria-hidden="true" > <use xlink:href="#bell"></use> </svg><p class="sprk-c-Alert__text"> This is important information.</p></div><button class="sprk-c-Alert__icon sprk-c-Alert__icon--dismiss" type="button" title="Dismiss" data-sprk-alert="dismiss" > <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64" aria-hidden="true" > <use xlink:href="#close"></use> </svg> </button></div>';
export const success = () =>
  '<div class="sprk-c-Alert sprk-c-Alert--success" role="alert" data-sprk-alert="container" data-id="alert-success-1" data-analytics="object.action.event" ><div class="sprk-c-Alert__content"> <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--stroke-current-color" viewBox="0 0 512 512" aria-hidden="true" > <use xlink:href="#check-mark"></use> </svg><p class="sprk-c-Alert__text"> This is a success message.</p></div><button class="sprk-c-Alert__icon sprk-c-Alert__icon--dismiss" type="button" title="Dismiss" data-sprk-alert="dismiss" > <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64" aria-hidden="true" > <use xlink:href="#close"></use> </svg> </button></div>';
export const fail = () =>
  '<div class="sprk-c-Alert sprk-c-Alert--fail" role="alert" data-sprk-alert="container" data-id="alert-fail-1" data-analytics="object.action.event" ><div class="sprk-c-Alert__content"> <svg class="sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--stroke-current-color" viewBox="0 0 576 512" aria-hidden="true" > <use xlink:href="#exclamation"></use> </svg><p class="sprk-c-Alert__text"> This is a failure message to alert that something was not successful.</p></div><button class="sprk-c-Alert__icon sprk-c-Alert__icon--dismiss" type="button" title="Dismiss" data-sprk-alert="dismiss" > <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64" aria-hidden="true" > <use xlink:href="#close"></use> </svg> </button></div>';

@@ -1,12 +1,99 @@
+import %7B useEffect %7D from '@storybook/client-api';%0Aimport %7B alerts %7D from './alerts';%0A%0A
 export defau
@@ -151,32 +151,97 @@
 info = () =%3E
+ %7B
 %0A  
-'%3Cdiv
+useEffect(() =%3E %7B%0A    alerts();%0A  %7D, %5B%5D);%0A%0A  return %60%0A    %3Cdiv%0A     
  class=%22sprk
@@ -268,16 +268,22 @@
 t--info%22
+%0A     
  role=%22a
@@ -307,32 +307,38 @@
 lert=%22container%22
+%0A     
  data-id=%22alert-
@@ -373,34 +373,45 @@
 ct.action.event%22
+%0A    %3E%0A     
  
-%3E
 %3Cdiv class=%22sprk
@@ -421,37 +421,55 @@
 Alert__content%22%3E
- %3Csvg
+%0A        %3Csvg%0A         
  class=%22sprk-c-A
@@ -532,32 +532,42 @@
 e-current-color%22
+%0A         
  viewBox=%220 0 64
@@ -583,32 +583,42 @@
 -hidden=%22true%22 %3E
+%0A         
  %3Cuse xlink:href
@@ -624,39 +624,56 @@
 f=%22#bell%22%3E%3C/use%3E
- %3C/svg%3E
+%0A        %3C/svg%3E%0A        
 %3Cp class=%22sprk-c
@@ -717,30 +717,44 @@
 rmation.%3C/p%3E
-%3C/div%3E
+%0A      %3C/div%3E%0A      
 %3Cbutton clas
@@ -795,32 +795,40 @@
 __icon--dismiss%22
+%0A       
  type=%22button%22 t
@@ -817,32 +817,40 @@
    type=%22button%22
+%0A       
  title=%22Dismiss%22
@@ -841,32 +841,40 @@
  title=%22Dismiss%22
+%0A       
  data-sprk-alert
@@ -875,34 +875,48 @@
 -alert=%22dismiss%22
+%0A      %3E%0A      
  
-%3E
  %3Csvg class=%22spr
@@ -1030,32 +1030,38 @@
 e%22%3E%3C/use%3E %3C/svg%3E
+%0A     
  %3C/button%3E%3C/div%3E
@@ -1050,32 +1050,44 @@
    %3C/button%3E
+%0A    
 %3C/div%3E
-';
+%0A  %60;%0A%7D;%0A
 %0Aexport cons

update alerts to use vanilla js