FlatButton (using Button and alternative root styling)

src/components/Button/Button.css

@@ -30,3 +30,45 @@
     cursor: auto;
   }
 }
+
+/**
+* This is an alternative button styling instead of default .root style
+* TODO css.flatButton could compose styles from marketplace's style configuration
+* (to make it easier to manage colors, strokes, fonts etc. from one file)
+*/
+.flatButton {
+  display: block;
+  padding: 0.5rem;
+
+  /* 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 */
+  font-weight: bold;
+  font-size: 16px;
+  letter-spacing: -0.4px;
+
+  /* Font color should be in sync with marketplace color palette */
+  color: #4A4A4A;
+
+  /* Dimensions */
+  /* TODO parent should be able to define or override these */
+  width: 100%;
+  height: 50px;
+
+  /* Hovers */
+  &:enabled {
+    cursor: pointer;
+  }
+  &:enabled:hover,
+  &:enabled:active {
+    background-color: transparent;
+  }
+  &:disabled {
+    background-color: transparent;
+    cursor: auto;
+  }
+}

src/components/Button/Button.js

@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import css from './Button.css';
 
 const Button = props => {
-  const { children, className, ...rest } = props;
+  const { children, className, rootClassName, ...rest } = props;
 
-  const classes = classNames(css.root, className);
+  const rootClass = rootClassName || css.root;
+  const classes = classNames(rootClass, className);
 
   return <button className={classes} {...rest}>{children}</button>;
 };
@@ -16,11 +17,23 @@ const { node, string } = PropTypes;
 Button.defaultProps = {
   children: null,
   className: null,
+  rootClassName: '',
 };
 
 Button.propTypes = {
   children: node,
   className: string,
+  rootClassName: string,
 };
 
 export default Button;
+
+
+export const FlatButton = props => (
+  <Button {...props} rootClassName={css.flatButton}/>
+);
+
+FlatButton.defaultProps = { className: '' };
+
+FlatButton.propTypes = { className: string };
+

src/components/index.js

@@ -2,7 +2,7 @@ import AddImages from './AddImages/AddImages';
 import AuthorInfo from './AuthorInfo/AuthorInfo';
 import Avatar from './Avatar/Avatar';
 import BookingInfo from './BookingInfo/BookingInfo';
-import Button from './Button/Button';
+import Button, { FlatButton } from './Button/Button';
 import CurrencyInput from './CurrencyInput/CurrencyInput';
 import DateInput from './DateInput/DateInput';
 import Discussion from './Discussion/Discussion';
@@ -41,6 +41,7 @@ export {
   DateInput,
   Discussion,
   FilterPanel,
+  FlatButton,
   HeroSection,
   Input,
   LabeledField,

src/containers/BookingDatesForm/__snapshots__/BookingDatesForm.test.js.snap

@@ -38,6 +38,7 @@ exports[`BookingDatesForm matches snapshot 1`] = `
   <Button
     className={null}
     disabled={true}
+    rootClassName=""
     type="submit">
     <FormattedMessage
       id="BookingDatesForm.requestToBook"

src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap

@@ -79,6 +79,7 @@ exports[`EditListingForm matches snapshot 1`] = `
   <Button
     className={null}
     disabled={true}
+    rootClassName=""
     type="submit">
     Save listing
   </Button>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -49,7 +49,8 @@ exports[`ListingPage matches snapshot 1`] = `
     <div>
       <Button
         className={null}
-        onClick={[Function]}>
+        onClick={[Function]}
+        rootClassName="">
         ListingPage.ctaButtonMessage
       </Button>
     </div>

src/containers/SalePage/__snapshots__/SalePage.test.js.snap

@@ -69,14 +69,16 @@ exports[`SalePage matches snapshot 1`] = `
   <div>
     <Button
       className={null}
-      onClick={[Function]}>
+      onClick={[Function]}
+      rootClassName="">
       <FormattedMessage
         id="SalePage.rejectButton"
         values={Object {}} />
     </Button>
     <Button
       className={null}
-      onClick={[Function]}>
+      onClick={[Function]}
+      rootClassName="">
       <FormattedMessage
         id="SalePage.acceptButton"
         values={Object {}} />