use react children for Button and ButtonGroup

scm-ui-components/packages/ui-components/src/buttons/Button.js

@@ -1,16 +1,17 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 import { withRouter } from "react-router-dom";
 
 export type ButtonProps = {
-  label: string,
+  label?: string,
   loading?: boolean,
   disabled?: boolean,
   action?: (event: Event) => void,
   link?: string,
   fullWidth?: boolean,
   className?: string,
+  children?: React.Node,
   classes: any
 };
 
@@ -45,6 +46,7 @@ class Button extends React.Component<Props> {
       type,
       color,
       fullWidth,
+      children,
       className
     } = this.props;
     const loadingClass = loading ? "is-loading" : "";
@@ -62,7 +64,7 @@ class Button extends React.Component<Props> {
           className
         )}
       >
-        {label}
+        {label} {children}
       </button>
     );
   };

scm-ui-components/packages/ui-components/src/buttons/ButtonGroup.js

@@ -1,41 +1,30 @@
 // @flow
-import React from "react";
-import Button from "./Button";
+import * as React from "react";
 
 type Props = {
-  firstlabel: string,
-  secondlabel: string,
-  firstAction?: (event: Event) => void,
-  secondAction?: (event: Event) => void,
-  firstIsSelected: boolean
+  addons?: boolean,
+  className?: string,
+  children: React.Node
 };
 
 class ButtonGroup extends React.Component<Props> {
 
+  static defaultProps = {
+    addons: true
+  };
+
   render() {
-    const { firstlabel, secondlabel, firstAction, secondAction, firstIsSelected } = this.props;
-
-    let showFirstColor = "";
-    let showSecondColor = "";
-
-    if (firstIsSelected) {
-      showFirstColor += "link is-selected";
-    } else {
-      showSecondColor += "link is-selected";
+    const { addons, className, children } = this.props;
+    let styleClasses = "buttons";
+    if (addons) {
+      styleClasses += " has-addons";
+    }
+    if (className) {
+      styleClasses += " " + className;
     }
-
     return (
-      <div className="buttons has-addons">
-        <Button
-          label={firstlabel}
-          color={showFirstColor}
-          action={firstAction}
-        />
-        <Button
-          label={secondlabel}
-          color={showSecondColor}
-          action={secondAction}
-        />
+      <div className={styleClasses}>
+        { children }
       </div>
     );
   }