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

@@ -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 {

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>
   );
 };

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';