Merge pull request #113 from opensrc0/develop

Added support of default theme, user custom theme and override theme property custom property by adding in cssProps object

Author: opensrc0

.gitignore

@@ -8,4 +8,8 @@ __build-es
 
 **/index.js
 
+!__application/**/index.js
+
 CHANGELOG.md
+
+themePrepare_bck.js

__application/component/Button/Button.js

@@ -1,55 +1,55 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import cx from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "styled-components"
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 const styles = {
-  size: { s: 'xs', m: 's', l: 's' },
-  padding: { s: [1, 2], m: [1.5, 2], l: [2, 2] },
+  "size": { "s": "xs", "m": "s", "l": "s" },
+  "padding": { "s": [1, 2], "m": [1.5, 2], "l": [2, 2] },
 
   pointerEvents(props) {
     if (props.disabled) {
-      return 'none';
+      return "none"
     }
-    return '';
+    return ""
   },
   opacity(props) {
     if (props.disabled) {
-      return '0.5';
+      return "0.5"
     }
-    return '';
+    return ""
   },
-  hover: {
+  "hover": {
     color(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color.white;
+      if (props.kind === "filled") {
+        return props.theme.color.white
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color.white;
+      if (props.kind === "outlined") {
+        return props.theme.color.white
       }
-      return '';
+      return ""
     },
     backgroundColor(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color[`${props.color}Dark`];
+      if (props.kind === "filled") {
+        return props.theme.color[`${props.color}Dark`]
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color[props.color];
+      if (props.kind === "outlined") {
+        return props.theme.color[props.color]
       }
-      return '';
+      return ""
     },
     borderColor(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color[`${props.color}Dark`];
+      if (props.kind === "filled") {
+        return props.theme.color[`${props.color}Dark`]
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color[props.color];
+      if (props.kind === "outlined") {
+        return props.theme.color[props.color]
       }
-      return '';
-    },
-  },
-};
+      return ""
+    }
+  }
+}
 
 const StyledButton = styled(
   ({
@@ -60,7 +60,7 @@ const StyledButton = styled(
     fluid,
     isLoading,
     ...props
-  }) => <button {...props} />,
+  }) => <button {...props} />
 )`
   display: inline-flex;
   align-items: center;
@@ -71,10 +71,10 @@ const StyledButton = styled(
   background-color: ${(props) => props.theme.Universal.Color[props.variant]};
   font-size: ${(props) => props.theme.Universal.FontSize[styles.size[props.size]]};
   padding: ${(props) => props.theme.Universal.PXL(styles.padding[props.size])};
-  width: ${(props) => props.fluid ? '100%' : ''};
+  width: ${(props) => props.fluid ? "100%" : ""};
   border-width: 1px;
   border-style: solid;
-  border-color: ${(props) => props.theme.Button[props.variant].borderColor};
+  border-color: ${(props) => props.theme.Universal.Color[props.variant]};
   border-radius: ${(props) => props.theme.Button.borderRadius};
   pointer-events: ${styles.pointerEvents};
   opacity: ${styles.opacity};
@@ -84,7 +84,7 @@ const StyledButton = styled(
     background-color: ${styles.hover.backgroundColor};
     border-color: ${styles.hover.borderColor};
   }
-`;
+`
 
 function Button({ label, disabled, className, onClick, spin, ...props }) {
   return (
@@ -108,31 +108,31 @@ function Button({ label, disabled, className, onClick, spin, ...props }) {
       }
       {label}
     </StyledButton>
-  );
+  )
 }
 
 Button.propTypes = {
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  fluid: PropTypes.bool,
-  disabled: PropTypes.bool,
-  spin: PropTypes.bool,
-  className: PropTypes.string,
-  type: PropTypes.oneOf(['submit', 'button']),
-  variant: PropTypes.string,
-  size: PropTypes.oneOf(['s', 'm', 'l']),
-};
+  "label": PropTypes.string,
+  "onClick": PropTypes.func,
+  "fluid": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "spin": PropTypes.bool,
+  "className": PropTypes.string,
+  "type": PropTypes.oneOf(["submit", "button"]),
+  "variant": PropTypes.string,
+  "size": PropTypes.oneOf(["s", "m", "l"])
+}
 
 Button.defaultProps = {
-  label: 'Button',
-  onClick: () => {},
-  fluid: false,
-  disabled: false,
-  spin: false,
-  className: '',
-  type: 'submit',
-  variant: 'secondary',
-  size: 'm',
-};
+  "label": "Button",
+  "onClick": () => {},
+  "fluid": false,
+  "disabled": false,
+  "spin": false,
+  "className": "",
+  "type": "submit",
+  "variant": "secondary",
+  "size": "m"
+}
 
-export default Button;
+export default Button