Add radiogroup ButtonGroup variant (#9383)

Add a prop to the `ButtonGroup` component to make it act as a group of
radio buttons, rather than a group of regular buttons. These commits
were written by @danjm - I just pulled them into this branch.

ui/app/components/ui/button-group/button-group.component.js

@@ -11,11 +11,13 @@ export default class ButtonGroup extends PureComponent {
     className: PropTypes.string,
     style: PropTypes.object,
     newActiveButtonIndex: PropTypes.number,
+    variant: PropTypes.oneOf(['radiogroup', 'default']),
   }
 
   static defaultProps = {
     className: 'button-group',
     defaultActiveButtonIndex: 0,
+    variant: 'default',
   }
 
   state = {
@@ -36,14 +38,21 @@ export default class ButtonGroup extends PureComponent {
   }
 
   renderButtons () {
-    const { children, disabled } = this.props
+    const { children, disabled, variant } = this.props
 
     return React.Children.map(children, (child, index) => {
       return child && (
         <button
+          role={variant === 'radiogroup' ? 'radio' : undefined}
+          aria-checked={index === this.state.activeButtonIndex}
           className={classnames(
             'button-group__button',
-            { 'button-group__button--active': index === this.state.activeButtonIndex },
+            child.props.className,
+            {
+              'radio-button': variant === 'radiogroup',
+              'button-group__button--active': index === this.state.activeButtonIndex,
+              'radio-button--active': variant === 'radiogroup' && index === this.state.activeButtonIndex,
+            },
           )}
           onClick={() => {
             this.handleButtonClick(index)
@@ -59,11 +68,12 @@ export default class ButtonGroup extends PureComponent {
   }
 
   render () {
-    const { className, style } = this.props
+    const { className, style, variant } = this.props
 
     return (
       <div
-        className={className}
+        className={classnames(className, { 'radio-button-group': variant === 'radiogroup' })}
+        role={variant === 'radiogroup' ? 'radiogroup' : undefined}
         style={style}
       >
         { this.renderButtons() }

ui/app/components/ui/button-group/button-group.stories.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
+import classnames from 'classnames'
 import { text, boolean } from '@storybook/addon-knobs/react'
 import Button from '../button'
 import ButtonGroup from '.'
@@ -50,3 +51,30 @@ export const withDisabledButton = () => (
     </Button>
   </ButtonGroup>
 )
+
+export const radioButtons = () => (
+  <ButtonGroup
+    style={{ width: '300px' }}
+    defaultActiveButtonIndex={1}
+    variant="radiogroup"
+  >
+    <Button
+      onClick={action('radio 1')}
+    >
+      {text('Button1', '1%')}
+    </Button>
+    <Button
+      onClick={action('radio 2')}
+    >
+      {text('Button2', '2%')}
+    </Button>
+    <Button
+      onClick={action('radio 3')}
+      className={classnames({
+        'radio-button--danger': boolean('Button3 warning', false),
+      })}
+    >
+      {text('Button3', '5%')}
+    </Button>
+  </ButtonGroup>
+)

ui/app/components/ui/button-group/index.scss

@@ -35,3 +35,41 @@
     }
   }
 }
+
+.radio-button-group {
+  .radio-button {
+    @include H7;
+
+    color: $Grey-700;
+    border: 1px solid $Grey-100;
+    background: $white;
+    border-radius: 25px;
+    height: 25px;
+    margin-right: 8px;
+    min-width: 48px;
+    padding: 0;
+
+    &--active {
+      font-weight: bold;
+      background: $Blue-300;
+      color: white;
+    }
+
+    &--danger {
+      border: 1px solid $Red-500;
+      color: $Red-500;
+      background: $white;
+    }
+
+
+    &:hover {
+      box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
+    };
+  }
+
+  .radio-button--active.radio-button--danger {
+    border: 1px solid $Red-500;
+    color: white;
+    background: $Red-500;
+  }
+}