Inline styles on buttons and links

Author: kkartunov

__tests__/shared/components/__snapshots__/Button.jsx.snap

@@ -5,6 +5,7 @@ exports[`Matches snapshots when active 1`] = `
   className="BUTTON_CLASS ACTIVE_CLASS REGULAR_CLASS"
   onClick={[Function]}
   onMouseDown={null}
+  style={Object {}}
   type="button"
 >
   BUTTON
@@ -16,6 +17,7 @@ exports[`Matches snapshots when active 2`] = `
   className="BUTTON_CLASS ACTIVE_CLASS"
   onClick={[Function]}
   onMouseDown={null}
+  style={Object {}}
   type="button"
 >
   BUTTON
@@ -25,6 +27,7 @@ exports[`Matches snapshots when active 2`] = `
 exports[`Matches snapshots when disabled 1`] = `
 <div
   className="BUTTON_CLASS XL_CLASS DISABLED_CLASS"
+  style={Object {}}
 >
   BUTTON
 </div>
@@ -33,6 +36,7 @@ exports[`Matches snapshots when disabled 1`] = `
 exports[`Matches snapshots when disabled 2`] = `
 <div
   className="BUTTON_CLASS XL_CLASS"
+  style={Object {}}
 >
   BUTTON
 </div>
@@ -46,6 +50,7 @@ exports[`Matches snapshots when rendered as link 1`] = `
   onMouseDown={null}
   openNewTab={false}
   replace={false}
+  style={Object {}}
   to="/SOME/TEST/URL"
 >
   BUTTON
@@ -60,6 +65,7 @@ exports[`Matches snapshots when rendered as link 2`] = `
   onMouseDown={null}
   openNewTab={false}
   replace={false}
+  style={Object {}}
   to="/SOME/TEST/URL"
 >
   BUTTON

__tests__/shared/components/__snapshots__/GenericLink.jsx.snap

@@ -8,6 +8,7 @@ exports[`Absolute link, starting with http:// 1`] = `
   onClick={null}
   onMouseDown={null}
   rel="noopener noreferrer"
+  style={Object {}}
   target=""
 >
   ABSOLUTE LINK
@@ -22,6 +23,7 @@ exports[`Absolute link, starting with https:// 1`] = `
   onClick={[Function]}
   onMouseDown={null}
   rel="noopener noreferrer"
+  style={Object {}}
   target=""
 >
   ABSOLUTE LINK
@@ -36,6 +38,7 @@ exports[`Anchor link 1`] = `
   onClick={null}
   onMouseDown={null}
   rel="noopener noreferrer"
+  style={Object {}}
   target=""
 >
   ANCHOR LINK
@@ -48,7 +51,7 @@ exports[`Relative link 1`] = `
   onClick={[Function]}
   type="button"
 >
-  {"to":"http/relative/link","className":null,"disabled":false,"onMouseDown":null,"replace":false,"children":"RELATIVE LINK"}
+  {"to":"http/relative/link","className":null,"disabled":false,"onMouseDown":null,"replace":false,"style":{},"children":"RELATIVE LINK"}
 </button>
 `;
 
@@ -60,6 +63,7 @@ exports[`Relative link, with \`enforceA\` 1`] = `
   onClick={null}
   onMouseDown={null}
   rel="noopener noreferrer"
+  style={Object {}}
   target=""
 >
   RELATIVE LINK
@@ -74,6 +78,7 @@ exports[`Relative link, with \`openNewTab\` 1`] = `
   onClick={null}
   onMouseDown={null}
   rel="noopener noreferrer"
+  style={Object {}}
   target="_blank"
 >
   RELATIVE LINL

__tests__/shared/components/__snapshots__/Link.jsx.snap

@@ -10,6 +10,7 @@ exports[`Matches snapshots 1`] = `
   openNewTab={false}
   replace={false}
   routerLinkType={[Function]}
+  style={Object {}}
   to=""
 />
 `;

src/shared/components/Button/index.jsx

@@ -25,14 +25,15 @@ export default function Button({
   theme,
   to,
   type,
+  style,
 }) {
   let className = theme.button;
   if (theme[size]) className += ` ${theme[size]}`;
   if (active && theme.active) className += ` ${theme.active}`;
   if (disabled) {
     if (theme.disabled) className += ` ${theme.disabled}`;
     return (
-      <div className={className}>
+      <div className={className} style={style}>
         {children}
       </div>
     );
@@ -57,6 +58,7 @@ export default function Button({
         openNewTab={openNewTab}
         replace={replace}
         to={to}
+        style={style}
       >
         {children}
       </Link>
@@ -73,6 +75,7 @@ export default function Button({
       onClick={onClick}
       onMouseDown={onMouseDown}
       type={type}
+      style={style}
     >
       {children}
     </button>
@@ -93,6 +96,7 @@ Button.defaultProps = {
   theme: defaultTheme,
   to: null,
   type: 'button',
+  style: {},
 };
 
 Button.propTypes = {
@@ -113,4 +117,5 @@ Button.propTypes = {
   }),
   to: PT.oneOfType([PT.object, PT.string]),
   type: PT.oneOf(['button', 'reset', 'submit']),
+  style: PT.shape(),
 };

src/shared/components/GenericLink/index.jsx

@@ -26,6 +26,7 @@ export default function GenericLink(props) {
     replace,
     routerLinkType,
     to,
+    style,
   } = props;
 
   /* Renders Link as <a> element if:
@@ -44,6 +45,7 @@ export default function GenericLink(props) {
         rel="noopener noreferrer"
         styleName="link"
         target={openNewTab ? '_blank' : ''}
+        style={style}
       >
         {children}
       </a>
@@ -81,6 +83,7 @@ GenericLink.defaultProps = {
   openNewTab: false,
   replace: false,
   to: '',
+  style: {},
 };
 
 GenericLink.propTypes = {
@@ -94,4 +97,5 @@ GenericLink.propTypes = {
   replace: PT.bool,
   routerLinkType: PT.func.isRequired,
   to: PT.oneOfType([PT.object, PT.string]),
+  style: PT.shape(),
 };