Disabled button styles (#121)

* Update Button component
* Update README.md
* Update CHANGELOG.md
* Bump to v1.2.2

Co-Authored-By: Daniel Brierton <[email protected]>

CHANGELOG.md

@@ -1,5 +1,11 @@
 _The format of this document is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)._
 
+## [v1.2.2](https://github.com/RaspberryPiFoundation/Bits/compare/v1.2.1...v1.2.2) - 2019-10-14
+
+### Changed
+
+- Added `disabled` styles for buttons as per Sketch doc
+
 ## [v1.2.1](https://github.com/RaspberryPiFoundation/Bits/compare/v1.2.0...v1.2.1) - 2019-10-09
 
 ### Changed

README.md

@@ -20,25 +20,17 @@ Deploys to: https://static.raspberrypi.org/styles/Bits/<version> via:
 
 (where <version> is taken from package.json & ENV vars are in .env which needs to be created from .env.example)
 
-eg: https://static.raspberrypi.org/styles/Bits/1.0.0/Bits.min.css
+e.g. https://static.raspberrypi.org/styles/Bits/<version>/Bits.min.css
 
 ## Local Development
 
-You can use gulp to watch the scss files & rebuild as necessary:
-```
-npm run gulp:watch
-```
+To bring up everything you need for development, run the `start` command:
 
-When writing documentation, use:
 ```
-npm run docs
+npm run start
 ```
 
-Before creating a PR, make sure you run:
-```
-npm run build
-```
-to build all the css & javascript files.
+This will automatically compile JavaScript and Sass during development.
 
 ## Local Development in another app
 

package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/RaspberryPiFoundation/Bits.git"
   },
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "lib/index.js",
   "files": [
     "lib",
@@ -28,7 +28,7 @@
     "prepublishOnly": "npm run build",
     "rollup": "rollup -c",
     "rollup:watch": "rollup -c -w",
-    "start": "npm-run-all rollup:watch gulp:watch",
+    "start": "npm-run-all rollup:watch gulp:watch docs:serve",
     "test": "jest --env=jsdom --notify --watch",
     "test-coverage": "jest --env=jsdom --coverage",
     "docs": "styleguidist server",

src/components/Button/Button.scss

@@ -80,11 +80,23 @@ $button-lod-hover-color:            $color-ui-grey-dark !default;
   width:   100%;
 }
 
+.c-button--disabled,
+.c-button--disabled:visited,
+.c-button[disabled=''],
+.c-button[disabled='']:visited,
+.c-button[disabled='disabled'],
+.c-button[disabled='disabled']:visited {
+  background-color: $color-ui-grey-lightest;
+  border-color:     $color-ui-grey-lightest;
+  color:            $color-ui-grey-medium;
+  pointer-events:   none;
+}
+
 @each $color-name, $color-value in $colors {
   .#{'c-button--' + $color-name},
   .#{'c-button--' + $color-name + ':visited'} {
     background-color: #{$color-value};
     border-color:          #{$color-value};
-    color:                      set-color($color-value);
+    color:                 set-color($color-value);
   }
 }

src/components/Button/README.md

@@ -8,6 +8,11 @@
 <Button secondary>Button Secondary</Button>
 ```
 
+### Button Disabled
+```jsx
+<Button disabled>Button Disabled</Button>
+```
+
 ### Button as Link
 ```jsx
 <Button to="https://www.raspberrypi.org/">Raspberry Pi Homepage</Button>

src/components/Button/index.js

@@ -1,17 +1,18 @@
+import './Button.scss'
+
 import { Base } from 'react-iotacss'
-import classnames from 'classnames'
+import Link from '../Link'
 import PropTypes from 'prop-types'
 import React from 'react'
-
-import './Button.scss'
-import Link from '../Link'
+import classnames from 'classnames'
 
 /**
  * A styled button that can also be used as a link
  */
 const Button = ({
   children,
   className,
+  disabled,
   lightOnDark,
   secondary,
   to,
@@ -20,6 +21,7 @@ const Button = ({
   const classNames = classnames('c-button', className, {
     'c-button--light-on-dark': lightOnDark,
     'c-button--secondary': secondary,
+    'c-button--disabled': disabled,
   })
   const isLink = () => typeof to === 'string'
 
@@ -32,7 +34,12 @@ const Button = ({
   }
 
   return (
-    <Base {...props} className={classNames} tagName="button">
+    <Base
+      {...props}
+      className={classNames}
+      disabled={disabled}
+      tagName="button"
+    >
       {children}
     </Base>
   )
@@ -43,6 +50,8 @@ Button.propTypes = {
   className: PropTypes.string,
   /** The contents of the button */
   children: PropTypes.node.isRequired,
+  /** Determines if button should render in a disabled state */
+  disabled: PropTypes.bool,
   /** Changes the hover styles to better suit dark backgrounds */
   lightOnDark: PropTypes.bool,
   /** Applies secondary button styling */