From fe811c230baa72dbbc6b2847d88745dbe03eeb59 Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Fri, 1 Sep 2017 15:38:07 +0100
Subject: [PATCH] Use global CSS variables for the primary colour
---
src/atoms/Button.js | 8 ++++++--
src/atoms/Button.local.scss | 12 +++++++++++-
src/atoms/Button.md | 7 +++++++
3 files changed, 24 insertions(+), 3 deletions(-)
diff --git a/src/atoms/Button.js b/src/atoms/Button.js
index 3270a1ac3..52e6cf384 100644
--- a/src/atoms/Button.js
+++ b/src/atoms/Button.js
@@ -1,9 +1,13 @@
import React from 'react'
+import classnames from 'classnames'
import classes from './Button.local.scss'
-const Button = ({ children, type = 'button', disabled, onClick}) => (
+const Button = ({ children, type = 'button', disabled, primary, onClick}) => (
<button
- className={classes.root}
+ className={classnames(classes.root, {
+ [classes.disabled]: disabled,
+ [classes.primary]: primary
+ })}
type={type}
disabled={disabled}
onClick={onClick}>{children}</button>
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index 498fb964a..02e18e592 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -1,7 +1,17 @@
.root {
- composes: primary from '../lib/colors.local.scss';
text-transform: uppercase;
border: none;
font-size: inherit;
padding: 10px 20px;
+ cursor: pointer;
+}
+
+.primary {
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.disabled {
+ background-color: gray;
+ color: white;
}
diff --git a/src/atoms/Button.md b/src/atoms/Button.md
index 1c2b0519b..a7871d1b7 100644
--- a/src/atoms/Button.md
+++ b/src/atoms/Button.md
@@ -1,6 +1,7 @@
A button.
```js
+
<Button>Save</Button>
```
@@ -9,3 +10,9 @@ A button can be disabled.
```js
<Button disabled>Save</Button>
```
+
+A button can be marked as the "primary" action.
+
+```js
+<Button primary>Save</Button>
+```
--
GitLab