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,24 +5,28 @@
 import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
 
-function ButtonRow(props) {
+function DemoButton(props) {
     return (
-        <ListRow>
-            <Button
-                minified={false}
-                {...props} />
-        </ListRow>
+        <Button
+            bold
+            minified={false}
+            color="black"
+            {...props} />
     );
 }
 
 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" />
+            <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>
     );
 }
Update demo list for popover to add row of hyperlink button
