import React from 'react';

import List from '@ichef/gypcrete/src/List';
import ListRow from '@ichef/gypcrete/src/ListRow';
import TextLabel from '@ichef/gypcrete/src/TextLabel';

function DemoList() {
    return (
        <List>
            <ListRow>
                <TextLabel basic="Row 1" />
            </ListRow>
            <ListRow>
                <TextLabel basic="Row 2" />
            </ListRow>
            <ListRow>
                <TextLabel basic="Row 3" />
            </ListRow>
        </List>
    );
}

export default DemoList;

@@ -24,159 +24,370 @@
 t';%0A
-%0Aimport List from '@ichef/gypcrete/src/List';%0Aimport ListRow from '@ichef/gypcrete/src/ListRow';%0Aimport TextLabel from '@ichef/gypcrete/src/TextLabel';
+import %7B action %7D from '@storybook/addon-actions';%0A%0Aimport Button from '@ichef/gypcrete/src/Button';%0Aimport List from '@ichef/gypcrete/src/List';%0Aimport ListRow from '@ichef/gypcrete/src/ListRow';%0A%0Afunction DemoButton(props) %7B%0A    return (%0A        %3CButton%0A            bold%0A            minified=%7Bfalse%7D%0A            color=%22black%22%0A            %7B...props%7D /%3E%0A    );%0A%7D
 %0A%0Afu
@@ -469,33 +469,34 @@
            %3C
-TextLabel
+DemoButton
  basic=%22Row 
@@ -497,16 +497,44 @@
 =%22Row 1%22
+ onClick=%7Baction('click.1')%7D
  /%3E%0A    
@@ -587,33 +587,34 @@
            %3C
-TextLabel
+DemoButton
  basic=%22Row 
@@ -615,16 +615,44 @@
 =%22Row 2%22
+ onClick=%7Baction('click.2')%7D
  /%3E%0A    
@@ -713,17 +713,18 @@
    %3C
-TextLabel
+DemoButton
  bas
@@ -733,16 +733,44 @@
 =%22Row 3%22
+ onClick=%7Baction('click.3')%7D
  /%3E%0A    

Update example for <Popover> to verify behavior