feat(button): adding active prop to Button

CHANGELOG.md

@@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `fluid` variant and size variables to Image @kuzhelov ([#54](https://github.com/stardust-ui/react/pull/54))
 - Add SVG icons support @kuzhelov ([#50](https://github.com/stardust-ui/react/pull/50))
 - Add `fluid` prop and variation and width variables to Input @alinais ([#59](https://github.com/stardust-ui/react/pull/59))
+- Add Button `active` prop @gopalgoel19 ([#42](https://github.com/stardust-ui/react/pull/42))
 
 <!--------------------------------[ v0.2.5 ]------------------------------- -->
 ## [v0.2.5](https://github.com/stardust-ui/react/tree/v0.2.5) (2018-08-03)
@@ -134,4 +135,4 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 <!--------------------------------[ v0.1.0 ]------------------------------- -->
 ## [v0.1.0](https://github.com/stardust-ui/react-old/tree/v0.2.0) (2018-07-05)
 
-Initial prototype release
+Initial prototype release

docs/src/examples/components/Button/States/ButtonExampleActive.shorthand.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleActive = () => (
+  <div>
+    <Button active content="Default" />
+    <Button active type="primary" content="Primary" />
+    <Button active type="secondary" content="Secondary" />
+    <Button active type="primary" icon="book" content="Click me" iconPosition="before" />
+    <Button active circular icon="coffee" />
+    <br />
+    <br />
+    <Button active fluid content="Fluid" />
+  </div>
+)
+
+export default ButtonExampleActive

docs/src/examples/components/Button/States/ButtonExampleActive.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Button, Icon, Text } from '@stardust-ui/react'
+
+const ButtonExampleActive = () => (
+  <div>
+    <Button active>Default</Button>
+    <Button active type="primary">
+      Primary
+    </Button>
+    <Button active type="secondary">
+      Secondary
+    </Button>
+    <Button active type="primary" icon iconPosition="before">
+      <Icon name="book" color="white" xSpacing="after" />
+      <Text content="Click me" />
+    </Button>
+    <Button active circular>
+      <Icon name="coffee" xSpacing="none" />
+    </Button>
+    <br />
+    <br />
+    <Button active fluid>
+      Fluid
+    </Button>
+  </div>
+)
+
+export default ButtonExampleActive

docs/src/examples/components/Button/States/index.tsx

@@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const States = () => (
   <ExampleSection title="States">
+    <ComponentExample
+      title="Active"
+      description="A button can show it is currently the active user selection."
+      examplePath="components/Button/States/ButtonExampleActive"
+    />
     <ComponentExample
       title="Disabled"
       description="A button can show it is currently unable to be interacted with."

src/components/Button/Button.tsx

@@ -23,6 +23,9 @@ class Button extends UIComponent<any, any> {
   public static variables = buttonVariables
 
   public static propTypes = {
+    /** A button can show it is currently the active user selection. */
+    active: PropTypes.bool,
+
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
@@ -66,6 +69,7 @@ class Button extends UIComponent<any, any> {
 
   static handledProps = [
     'accessibility',
+    'active',
     'as',
     'children',
     'circular',
@@ -85,7 +89,7 @@ class Button extends UIComponent<any, any> {
   }
 
   public renderComponent({ ElementType, classes, accessibility, rest }): React.ReactNode {
-    const { children, content, disabled, icon, iconPosition, type } = this.props
+    const { active, children, content, disabled, icon, iconPosition, type } = this.props
     const primary = type === 'primary'
 
     const getContent = (): React.ReactNode => {
@@ -114,6 +118,7 @@ class Button extends UIComponent<any, any> {
       <ElementType
         className={classes.root}
         disabled={disabled}
+        active={active}
         onClick={this.handleClick}
         {...accessibility.attributes.root}
         {...rest}

src/styles/customCSS.ts

@@ -9,13 +9,21 @@ export const fittedStyle: React.CSSProperties = {
   margin: 0,
 }
 
+export const overflowWrapStyle: React.CSSProperties = {
+  overflow: 'overlay',
+  overflowWrap: 'break-word',
+}
+
+export const primaryActiveStyle: React.CSSProperties = {
+  backgroundColor: '#464775',
+}
+
+export const secondaryActiveStyle: React.CSSProperties = {
+  backgroundColor: 'rgba(0,0,0,.25)',
+}
+
 export const truncateStyle: React.CSSProperties = {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 }
-
-export const overflowWrapStyle: React.CSSProperties = {
-  overflow: 'overlay',
-  overflowWrap: 'break-word',
-}

src/themes/teams/components/Button/buttonStyles.ts

@@ -1,10 +1,15 @@
 import { pxToRem } from '../../../../lib'
-import { disabledStyle, truncateStyle } from '../../../../styles/customCSS'
+import {
+  disabledStyle,
+  primaryActiveStyle,
+  secondaryActiveStyle,
+  truncateStyle,
+} from '../../../../styles/customCSS'
 import { IButtonVariables } from './buttonVariables'
 
 export default {
   root: ({ props, variables }: { props: any; variables: IButtonVariables }) => {
-    const { circular, disabled, fluid, icon, iconPosition, type } = props
+    const { active, circular, disabled, fluid, icon, iconPosition, type } = props
     const primary = type === 'primary'
     const secondary = type === 'secondary'
 
@@ -74,15 +79,17 @@ export default {
     return {
       ...styles,
 
-      borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
+      borderWidth: `${secondary ? pxToRem(circular ? 1 : 2) : 0}`,
       cursor: 'pointer',
       ':hover': {
         backgroundColor: backgroundColorHover,
       },
-
+      ...(active && {
+        backgroundColor: secondaryActiveStyle.backgroundColor,
+      }),
       ...(primary && {
         color: typePrimaryColor,
-        backgroundColor: typePrimaryBackgroundColor,
+        backgroundColor: active ? primaryActiveStyle.backgroundColor : typePrimaryBackgroundColor,
         borderColor: typePrimaryBorderColor,
         ':hover': {
           backgroundColor: typePrimaryBackgroundColorHover,
@@ -91,12 +98,15 @@ export default {
 
       ...(secondary && {
         color: typeSecondaryColor,
-        backgroundColor: typeSecondaryBackgroundColor,
+        backgroundColor: active
+          ? secondaryActiveStyle.backgroundColor
+          : typeSecondaryBackgroundColor,
         borderColor: typeSecondaryBorderColor,
         ':hover': {
           borderColor: 'transparent',
           backgroundColor: typeSecondaryBackgroundColorHover,
         },
+        borderWidth: `${active ? 0 : pxToRem(circular ? 1 : 2)}`,
       }),
     }
   },