import React from 'react';
import { action } from '@storybook/addon-actions';

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

function ButtonRow(props) {
    return (
        <ListRow>
            <Button
                minified={false}
                {...props} />
        </ListRow>
    );
}

function DemoList() {
    return (
        <List>
            <ButtonRow basic="Row 1" onClick={action('click.1')} />
            <ButtonRow basic="Row 2" onClick={action('click.2')} />
            <ButtonRow basic="Row 3" onClick={action('click.3')} />

            <ButtonRow basic="Link row" tagName="a" href="https://apple.com" />
        </List>
    );
}

export default DemoList;

import React from 'react';
import { action } from '@storybook/addon-actions';

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

function DemoButton(props) {
    return (
        <Button
            bold
            minified={false}
            color="black"
            {...props} />
    );
}

function DemoList() {
    return (
        <List>
            <ListRow>
                <DemoButton basic="Row 1" onClick={action('click.1')} />
            </ListRow>
            <ListRow>
                <DemoButton basic="Row 2" onClick={action('click.2')} />
            </ListRow>
            <ListRow>
                <DemoButton basic="Row 3" onClick={action('click.3')} />
            </ListRow>
        </List>
    );
}

export default DemoList;

--- 
+++ 
@@ -5,28 +5,24 @@
 import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
 
-function DemoButton(props) {
+function ButtonRow(props) {
     return (
-        <Button
-            bold
-            minified={false}
-            color="black"
-            {...props} />
+        <ListRow>
+            <Button
+                minified={false}
+                {...props} />
+        </ListRow>
     );
 }
 
 function DemoList() {
     return (
         <List>
-            <ListRow>
-                <DemoButton basic="Row 1" onClick={action('click.1')} />
-            </ListRow>
-            <ListRow>
-                <DemoButton basic="Row 2" onClick={action('click.2')} />
-            </ListRow>
-            <ListRow>
-                <DemoButton basic="Row 3" onClick={action('click.3')} />
-            </ListRow>
+            <ButtonRow basic="Row 1" onClick={action('click.1')} />
+            <ButtonRow basic="Row 2" onClick={action('click.2')} />
+            <ButtonRow basic="Row 3" onClick={action('click.3')} />
+
+            <ButtonRow basic="Link row" tagName="a" href="https://apple.com" />
         </List>
     );
 }
Update demo list for popover to add row of hyperlink button
