feat: add theme support in Button (#53)

#48 #52

src/components/Button/Button.js

@@ -1,26 +1,42 @@
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
-const Button = styled.div`
-  display: flex;
-  flex: 1;
+import defaultTheme from './defaultTheme.json';
+
+const Button = styled.button`
+  width: 100%;
   height: 40px;
-  border: 1px solid #303d41;
-  border-right: 0;
-  align-items: center;
-  justify-content: center;
-  
-  background-color: 'white';
-  color: #303d41;
-  
+  padding: 0;
+  border-width: ${({ theme }) => theme.button_borderWidth};
+  border-style: solid;
+  border-color: ${({ theme }) => theme.button_borderColor};
+  border-image: ${({ theme }) => theme.button_borderImage};
+
+  color: ${({ theme }) => theme.button_color};
+
+  background-color: ${({ theme }) => theme.button_backgroundColor};
+  background-image: ${({ theme }) => theme.button_backgroundImage};
+
   &:hover {
     cursor: pointer;
   }
-
-  &:last-child {
-    border-right: 1px solid #303d41;
-  }
 `;
 
+Button.propTypes = {
+  theme: PropTypes.shape({
+    button_borderWidth: PropTypes.string,
+    button_borderColor: PropTypes.string,
+    button_borderImage: PropTypes.string,
+    button_color: PropTypes.string,
+    button_backgroundColor: PropTypes.string,
+    button_backgroundImage: PropTypes.string
+  })
+};
+
+Button.defaultProps = {
+  theme: defaultTheme
+};
+
 /**
  * @component
  */

src/components/Button/README.md

@@ -1,5 +1,20 @@
-Button
-
+Default Button
 ```js
 <Button>Button</Button>
-```
+```
+
+Themed Button
+```js
+const { ThemeProvider } = require('styled-components');
+
+const theme = {
+  button_borderWidth: '4px',
+  button_borderImage: 'linear-gradient(to bottom, #b732ff, #8017ff) 1',
+  button_color: 'aliceblue',
+  button_backgroundImage: 'linear-gradient(to top, #b732ff, #8017ff)',
+};
+
+<ThemeProvider theme={theme}>
+  <Button>Themed Button</Button>
+</ThemeProvider>
+```

src/components/Button/__snapshots__/Button.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button does not crash 1`] = `
-<div
-  className="sc-bdVaJa icTUIk"
+<button
+  className="sc-bdVaJa ldKojJ"
 >
   title
-</div>
+</button>
 `;

src/components/Button/defaultTheme.json

@@ -0,0 +1,8 @@
+{
+  "button_borderWidth": "1px",
+  "button_borderColor": "#303d41",
+  "button_borderImage": "none",
+  "button_color": "#303d41",
+  "button_backgroundColor": "#fff",
+  "button_backgroundImage": "none"
+}

src/components/RadioButton/__snapshots__/RadioButton.test.js.snap

@@ -1,10 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RadioButton does not crash 1`] = `
-<styled.div
+<styled.button
   className="sc-bwzfXH goITcP"
+  theme={
+    Object {
+      "button_backgroundColor": "#fff",
+      "button_backgroundImage": "none",
+      "button_borderColor": "#303d41",
+      "button_borderImage": "none",
+      "button_borderWidth": "1px",
+      "button_color": "#303d41",
+    }
+  }
   value={true}
 >
   title
-</styled.div>
+</styled.button>
 `;

src/components/RadioGroup/__snapshots__/RadioGroup.test.js.snap

@@ -2,21 +2,41 @@
 
 exports[`RadioGroup does not crash 1`] = `
 <styled.div>
-  <styled.div
+  <styled.button
     active={true}
     key=".0"
     onClick={[Function]}
+    theme={
+      Object {
+        "button_backgroundColor": "#fff",
+        "button_backgroundImage": "none",
+        "button_borderColor": "#303d41",
+        "button_borderImage": "none",
+        "button_borderWidth": "1px",
+        "button_color": "#303d41",
+      }
+    }
     value={1}
   >
     Option 1
-  </styled.div>
-  <styled.div
+  </styled.button>
+  <styled.button
     active={false}
     key=".1"
     onClick={[Function]}
+    theme={
+      Object {
+        "button_backgroundColor": "#fff",
+        "button_backgroundImage": "none",
+        "button_borderColor": "#303d41",
+        "button_borderImage": "none",
+        "button_borderWidth": "1px",
+        "button_color": "#303d41",
+      }
+    }
     value={2}
   >
     Option 2
-  </styled.div>
+  </styled.button>
 </styled.div>
 `;

src/defaultTheme.js

@@ -1,7 +1,9 @@
+import buttonTheme from './components/Button/defaultTheme.json';
 import inputRangeTheme from './components/InputRange/defaultTheme.json';
 import legendRangeTheme from './components/Legend/defaultTheme.json';
 
 export default {
+  ...buttonTheme,
   ...inputRangeTheme,
   ...legendRangeTheme
 };