Merge pull request #279 from sharetribe/createlisting-default-button

Change buttons in ListingCreation form

src/components/Button/Button.js

@@ -29,7 +29,10 @@ Button.propTypes = {
 export default Button;
 
 export const PrimaryButton = props => <Button {...props} rootClassName={css.primaryButton} />;
+PrimaryButton.displayName = 'PrimaryButton';
 
 export const SecondaryButton = props => <Button {...props} rootClassName={css.secondaryButton} />;
+SecondaryButton.displayName = 'SecondaryButton';
 
 export const InlineTextButton = props => <Button {...props} rootClassName={css.inlineTextButton} />;
+InlineTextButton.displayName = 'InlineTextButton';

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

@@ -62,13 +62,13 @@ exports[`BookingDatesForm matches snapshot with selected dates 1`] = `
       id="BookingDatesForm.youWontBeChargedInfo"
       values={Object {}} />
   </p>
-  <Component
+  <PrimaryButton
     disabled={false}
     type="submit">
     <FormattedMessage
       id="BookingDatesForm.requestToBook"
       values={Object {}} />
-  </Component>
+  </PrimaryButton>
 </form>
 `;
 
@@ -97,12 +97,12 @@ exports[`BookingDatesForm matches snapshot without selected dates 1`] = `
       id="BookingDatesForm.youWontBeChargedInfo"
       values={Object {}} />
   </p>
-  <Component
+  <PrimaryButton
     disabled={true}
     type="submit">
     <FormattedMessage
       id="BookingDatesForm.requestToBook"
       values={Object {}} />
-  </Component>
+  </PrimaryButton>
 </form>
 `;

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js

@@ -4,7 +4,7 @@ import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { maxLength, required } from '../../util/validators';
-import { PrimaryButton, TextInputField } from '../../components';
+import { Button, TextInputField } from '../../components';
 
 import css from './EditListingDescriptionForm.css';
 
@@ -68,13 +68,13 @@ const EditListingDescriptionFormComponent = props => {
         validate={[required(descriptionRequiredMessage)]}
       />
 
-      <PrimaryButton
+      <Button
         className={css.submitButton}
         type="submit"
         disabled={invalid || submitting || disabled}
       >
         {saveActionMsg}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };

src/containers/EditListingLocationForm/EditListingLocationForm.js

@@ -6,7 +6,7 @@ import { intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { autocompleteSearchRequired, autocompletePlaceSelected } from '../../util/validators';
-import { LocationAutocompleteInputField, PrimaryButton, TextInputField } from '../../components';
+import { LocationAutocompleteInputField, Button, TextInputField } from '../../components';
 
 import css from './EditListingLocationForm.css';
 
@@ -67,13 +67,13 @@ export const EditListingLocationFormComponent = props => {
         placeholder={buildingPlaceholderMessage}
       />
 
-      <PrimaryButton
+      <Button
         className={css.submitButton}
         type="submit"
         disabled={invalid || submitting || disabled}
       >
         {saveActionMsg}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };

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

@@ -20,9 +20,11 @@ exports[`EditListingLocationForm matches snapshot 1`] = `
     name="building"
     placeholder="EditListingLocationForm.buildingPlaceholder"
     type="text" />
-  <Component
+  <Button
+    className={null}
+    rootClassName={null}
     type="submit">
     Next: pricing
-  </Component>
+  </Button>
 </form>
 `;

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -6,7 +6,7 @@ import { isEqual } from 'lodash';
 import { arrayMove } from 'react-sortable-hoc';
 import classNames from 'classnames';
 import { noEmptyArray } from '../../util/validators';
-import { AddImages, PrimaryButton, ValidationError } from '../../components';
+import { AddImages, Button, ValidationError } from '../../components';
 
 import css from './EditListingPhotosForm.css';
 
@@ -128,13 +128,13 @@ export class EditListingPhotosFormComponent extends Component {
           <FormattedMessage id="EditListingPhotosForm.addImagesTip" />
         </p>
 
-        <PrimaryButton
+        <Button
           className={css.submitButton}
           type="submit"
           disabled={invalid || submitting || disabled}
         >
           {saveActionMsg}
-        </PrimaryButton>
+        </Button>
       </form>
     );
   }

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

@@ -42,9 +42,11 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
       id="EditListingPhotosForm.addImagesTip"
       values={Object {}} />
   </p>
-  <Component
+  <Button
+    className={null}
+    rootClassName={null}
     type="submit">
     Publish listing
-  </Component>
+  </Button>
 </form>
 `;

src/containers/EditListingPricingForm/EditListingPricingForm.js

@@ -5,7 +5,7 @@ import { intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import config from '../../config';
 import { required } from '../../util/validators';
-import { PrimaryButton, CurrencyInputField } from '../../components';
+import { Button, CurrencyInputField } from '../../components';
 
 import css from './EditListingPricingForm.css';
 
@@ -41,13 +41,13 @@ export const EditListingPricingFormComponent = props => {
         validate={[required(priceRequiredMessage)]}
       />
 
-      <PrimaryButton
+      <Button
         className={css.submitButton}
         type="submit"
         disabled={invalid || submitting || disabled}
       >
         {saveActionMsg}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };

src/containers/PayoutDetailsForm/PayoutDetailsForm.js

@@ -6,7 +6,7 @@ import { reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-
 import classNames from 'classnames';
 import config from '../../config';
 import {
-  PrimaryButton,
+  Button,
   StripeBankAccountTokenInputField,
   SelectField,
   BirthdayInputField,
@@ -220,9 +220,9 @@ const PayoutDetailsFormComponent = props => {
         {addressSection}
       </div>
       {bankAccountSection}
-      <PrimaryButton className={css.submitButton} type="submit" disabled={submitDisabled}>
+      <Button className={css.submitButton} type="submit" disabled={submitDisabled}>
         <FormattedMessage id="PayoutDetailsForm.submitButtonText" />
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };

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

@@ -119,18 +119,18 @@ exports[`SalePage matches snapshot 1`] = `
         }
       } />
     <div>
-      <Component
+      <SecondaryButton
         onClick={[Function]}>
         <FormattedMessage
           id="SalePage.rejectButton"
           values={Object {}} />
-      </Component>
-      <Component
+      </SecondaryButton>
+      <PrimaryButton
         onClick={[Function]}>
         <FormattedMessage
           id="SalePage.acceptButton"
           values={Object {}} />
-      </Component>
+      </PrimaryButton>
     </div>
   </div>
 </Connect(withRouter(PageLayout))>