feat: implemented shaded variant button group

src/components/ButtonGroup/index.d.ts

@@ -3,6 +3,7 @@ import { BaseProps } from '../types';
 
 export interface ButtonGroupProps extends BaseProps {
     children?: ReactNode;
+    variant?: 'default' | 'shaded';
 }
 
 export default function(props: ButtonGroupProps): JSX.Element | null;

src/components/ButtonGroup/index.js

@@ -6,10 +6,10 @@ import StyledContainer from './styled/container';
  * Button groups are used to bunch together buttons with similar actions
  */
 export default function ButtonGroup(props) {
-    const { className, style, children } = props;
+    const { className, style, children, variant } = props;
 
     return (
-        <StyledContainer className={className} style={style} role="group">
+        <StyledContainer className={className} style={style} role="group" variant={variant}>
             {children}
         </StyledContainer>
     );
@@ -23,10 +23,14 @@ ButtonGroup.propTypes = {
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
     style: PropTypes.object,
+    /** The variant changes the appearance of the ButtonGroup. Accepted variants include default,
+     * and shaded. This value defaults to default. */
+    variant: PropTypes.oneOf(['default', 'shaded']),
 };
 
 ButtonGroup.defaultProps = {
     children: null,
     className: undefined,
     style: undefined,
+    variant: 'default',
 };

src/components/ButtonGroup/readme.md

@@ -322,3 +322,17 @@ const socials = [
         </Content>
     </Container>
 ```
+##### button group with shaded variant
+
+```js
+import React from 'react';
+import { ButtonGroup, Button } from 'react-rainbow-components';
+
+    <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
+        <ButtonGroup className="rainbow-m-around_medium" variant='shaded'>
+            <Button label="Refresh" variant="neutral" />
+            <Button label="Edit" variant="neutral" />
+            <Button label="Save" variant="neutral" />
+        </ButtonGroup>
+    </div>
+```

src/components/ButtonGroup/styled/container.js

@@ -1,7 +1,8 @@
 /* stylelint-disable no-descending-specificity */
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
-const StyledContainer = styled.div`
+const StyledContainer = attachThemeAttrs(styled.div)`
     display: inline-flex;
 
     button {
@@ -32,6 +33,34 @@ const StyledContainer = styled.div`
     > div:only-child > button {
         border-radius: 100px;
     }
+
+    ${props =>
+        props.variant === 'shaded' &&
+        `
+        box-shadow: ${props.shadows.shadow_10};
+        background-color: ${props.palette.background.main};
+        border-radius: 100px;
+        > label:last-child > div {
+            display: none;
+        }
+        button {
+            border: none;
+            &::after {
+                content: '';
+                position: absolute;
+                right: 1px;
+                height: 20px;
+                width: 1px;
+                background-color: ${props.palette.border.divider};
+                box-sizing: border-box;
+            }
+        }
+        button:last-of-type {
+            &::after {
+                content: none;
+            }
+        }
+    `}
 `;
 
 export default StyledContainer;