import React from 'react';

import { action } from '@storybook/addon-actions';
import SprkAccordion from './SprkAccordion';
import SprkAccordionItem from './SprkAccordionItem';

export default {
  title: 'Components|Accordion',
};

export const defaultStory = () => (
  <SprkAccordion>
    <SprkAccordionItem
      onClick={action('clicked')}
      heading="This is an accordion heading"
      contentAddClasses="sprk-o-Stack sprk-o-Stack--medium"
      idString="accordion-item-1"
      analyticsString="analytics_string_goes_here"
    >
      <p className="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        This is an example of multiple HTML elements used
        for the content in an accordion item.
      </p>
      <ul className="sprk-b-List sprk-b-List--indented sprk-o-Stack__item">
        <li>List Item One</li>
        <li>List Item Two</li>
        <li>List Item Three</li>
      </ul>
    </SprkAccordionItem>
    <SprkAccordionItem
      heading="This is an accordion heading"
      idString="accordion-item-2"
      analyticsString="analytics_string_goes_here"
    >
      <p className="sprk-b-TypeBodyTwo">
        This is an example of accordion content.
        This is an example of accordion content. This is an
        example of accordion content. This is an example of accordion content.
      </p>
    </SprkAccordionItem>
    <SprkAccordionItem
      heading="This is an accordion heading"
      idString="accordion-item-3"
      analyticsString="analytics_string_goes_here"
    >
      <p className="sprk-b-TypeBodyTwo">
        This is an example of accordion content.
        This is an example of accordion content. This is an
        example of accordion content. This is an example of accordion content.
      </p>
    </SprkAccordionItem>
  </SprkAccordion>
);

defaultStory.story = {
  name: 'Default',
};

@@ -20,17 +20,16 @@
 react';%0A
-%0A
 import %7B
@@ -220,16 +220,60 @@
 rdion',%0A
+  parameters: %7B component: SprkAccordion %7D,%0A
 %7D;%0A%0Aexpo
@@ -691,13 +691,8 @@
 ents
- used
 %0A   
@@ -696,16 +696,21 @@
         
+used 
 for the 
@@ -746,24 +746,25 @@
 %0A      %3C/p%3E%0A
+%0A
       %3Cul cl
@@ -831,32 +831,43 @@
 m%22%3E%0A        %3Cli%3E
+%0A          
 List Item One%3C/l
@@ -863,22 +863,32 @@
 Item One
+%0A        
 %3C/li%3E%0A
+%0A
         
@@ -883,32 +883,43 @@
 i%3E%0A%0A        %3Cli%3E
+%0A          
 List Item Two%3C/l
@@ -915,22 +915,32 @@
 Item Two
+%0A        
 %3C/li%3E%0A
+%0A
         
@@ -943,16 +943,27 @@
     %3Cli%3E
+%0A          
 List Ite
@@ -969,16 +969,25 @@
 em Three
+%0A        
 %3C/li%3E%0A  
@@ -1013,32 +1013,33 @@
 kAccordionItem%3E%0A
+%0A
     %3CSprkAccordi
@@ -1037,32 +1037,66 @@
 rkAccordionItem%0A
+      onClick=%7Baction('clicked')%7D%0A
       heading=%22T
@@ -1260,57 +1260,8 @@
 o%22%3E%0A
-        This is an example of accordion content.%0A
     
@@ -1367,32 +1367,81 @@
 is an example of
+%0A        accordion content. This is an example of
  accordion conte
@@ -1480,16 +1480,17 @@
 onItem%3E%0A
+%0A
     %3CSpr
@@ -1500,24 +1500,58 @@
 cordionItem%0A
+      onClick=%7Baction('clicked')%7D%0A
       headin
@@ -1719,57 +1719,8 @@
 o%22%3E%0A
-        This is an example of accordion content.%0A
     
@@ -1767,32 +1767,32 @@
 ent. This is an%0A
-
         example 
@@ -1826,32 +1826,81 @@
 is an example of
+%0A        accordion content. This is an example of
  accordion conte

Update story for SprkAccordion