From 32a55232e9afaeaf18f8f9e2d6dc7b43203bf4dc Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Tue, 19 Feb 2019 14:30:52 +0200
Subject: [PATCH] Refactor derivative buttons so that they can also take in
 rootClassName This means PrimaryButton, SecondaryButton and InlineTextButton.
 However, those can still be used as before.

---
 src/components/Button/Button.css        | 36 ++++++-------------------
 src/components/Button/Button.example.js |  2 +-
 src/components/Button/Button.js         | 15 ++++++++---
 3 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index fbdbf270..1cb34644 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -7,14 +7,14 @@
   padding: 0;
 }
 
-.primaryButton {
+.primaryButtonRoot {
   @apply --marketplaceButtonStylesPrimary;
 
   /* Clear padding that is set for link elements looking like buttons */
   padding: 0;
 }
 
-.secondaryButton {
+.secondaryButtonRoot {
   @apply --marketplaceButtonStylesSecondary;
 
   /* We must lift up the text from the center since it looks better with
@@ -23,35 +23,15 @@
   padding: 0 0 2px 0;
 }
 
-.inlineTextButton {
+.inlineTextButtonRoot {
   @apply --marketplaceLinkStyles;
 }
 
-.inlineButton {
-  display: inline-block;
-
-  /* fill colors should be in sync with marketplace color palette */
-  background-color: transparent;
-
-  /* border-width should be in sync with marketplace strike-widths */
-  border-width: 0px;
-
-  /* Font configuration */
-  text-decoration: none;
-
-  /* Hovers */
-  &:enabled {
-    cursor: pointer;
-  }
-  &:enabled:hover,
-  &:enabled:active {
-    background-color: transparent;
-    text-decoration: underline;
-  }
-  &:disabled {
-    background-color: transparent;
-    cursor: auto;
-  }
+.primaryButton {
+  /* Class handle for primary button state styles */
+}
+.secondaryButton {
+  /* Class handle for secondary button state styles */
 }
 
 .inProgress {
diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js
index ad145534..34fe0ab4 100644
--- a/src/components/Button/Button.example.js
+++ b/src/components/Button/Button.example.js
@@ -157,7 +157,7 @@ const ButtonsComponent = () => {
       </a>
 
       <h3>Button with custom styles:</h3>
-      <Button className={css.customButton}>Click me</Button>
+      <Button rootClassName={css.customButton}>Click me</Button>
     </div>
   );
 };
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index adda2afa..b009bbf0 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -69,11 +69,20 @@ Button.propTypes = {
 
 export default Button;
 
-export const PrimaryButton = props => <Button {...props} rootClassName={css.primaryButton} />;
+export const PrimaryButton = props => {
+  const classes = classNames(props.rootClassName || css.primaryButtonRoot, css.primaryButton);
+  return <Button {...props} rootClassName={classes} />;
+};
 PrimaryButton.displayName = 'PrimaryButton';
 
-export const SecondaryButton = props => <Button {...props} rootClassName={css.secondaryButton} />;
+export const SecondaryButton = props => {
+  const classes = classNames(props.rootClassName || css.secondaryButtonRoot, css.secondaryButton);
+  return <Button {...props} rootClassName={classes} />;
+};
 SecondaryButton.displayName = 'SecondaryButton';
 
-export const InlineTextButton = props => <Button {...props} rootClassName={css.inlineTextButton} />;
+export const InlineTextButton = props => {
+  const classes = classNames(props.rootClassName || css.inlineTextButtonRoot, css.inlineTextButton);
+  return <Button {...props} rootClassName={classes} />;
+};
 InlineTextButton.displayName = 'InlineTextButton';