Merge pull request #1024 from sharetribe/improve-bundling-order

Improve bundling order

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

src/components/ManageListingCard/ManageListingCard.css

@@ -154,10 +154,6 @@
 }
 
 .menuContent {
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-
   position: absolute;
   right: 0;
   z-index: var(--zIndexPopup);
@@ -168,6 +164,7 @@
 }
 
 .menuItem {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   color: var(--matterColorLight);
   font-weight: var(--fontWeightMedium);
@@ -273,6 +270,7 @@
 }
 
 .title {
+  @apply --marketplaceLinkStyles;
   /* Font */
   @apply --marketplaceH3FontStyles;
   color: var(--matterColor);

src/components/ManageListingCard/ManageListingCard.js

@@ -219,7 +219,7 @@ export const ManageListingCardComponent = props => {
               <MenuContent rootClassName={css.menuContent}>
                 <MenuItem key="close-listing">
                   <InlineTextButton
-                    className={menuItemClasses}
+                    rootClassName={menuItemClasses}
                     onClick={event => {
                       event.preventDefault();
                       event.stopPropagation();
@@ -315,7 +315,7 @@ export const ManageListingCardComponent = props => {
         <div className={css.mainInfo}>
           <div className={css.titleWrapper}>
             <InlineTextButton
-              className={titleClasses}
+              rootClassName={titleClasses}
               onClick={event => {
                 event.preventDefault();
                 event.stopPropagation();

src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap

@@ -78,8 +78,8 @@ exports[`ManageListingCard matches snapshot 1`] = `
               rootClassName=""
             >
               <InlineTextButton
-                className=""
                 onClick={[Function]}
+                rootClassName=""
               >
                 <FormattedMessage
                   id="ManageListingCard.closeListing"
@@ -109,8 +109,8 @@ exports[`ManageListingCard matches snapshot 1`] = `
     <div>
       <div>
         <InlineTextButton
-          className=""
           onClick={[Function]}
+          rootClassName=""
         >
           <span
             key="1"

src/components/MapPanel/MapPanel.css

@@ -1,53 +0,0 @@
-.mapContainer {
-  height: calc(100vh - 237px);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #ddd;
-  color: #fff;
-  font-size: 2rem;
-}
-.mapListingsContainer {
-  height: 237px;
-  width: auto;
-  overflow-x: scroll;
-  background-color: #fff;
-  display: flex;
-  flex-direction: row;
-  padding: 1rem;
-}
-
-.toFiltersButton {
-  position: fixed;
-  top: calc(70vh - 80px);
-  left: 50%;
-  width: 200px;
-  margin-left: -100px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
-  font-size: 1.4rem;
-  padding: 0.5rem;
-  color: #fff;
-  background-color: #9b9b9b;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #888;
-  }
-}
-
-.close {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 3em;
-  padding: 1em;
-  color: #999;
-  text-decoration: none;
-
-  &:hover {
-    color: #000;
-  }
-}

src/components/MapPanel/MapPanel.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NamedLink } from '../../components';
-import css from './MapPanel.css';
-
-const MapPanel = props => (
-  <div>
-    <div className={css.mapContainer}>Map</div>
-    <div className={css.mapListingsContainer}>{props.children}</div>
-    <NamedLink className={css.toFiltersButton} name="SearchFiltersPage">
-      Filters
-    </NamedLink>
-    <NamedLink className={css.close} name="SearchListingsPage">
-      X
-    </NamedLink>
-  </div>
-);
-
-MapPanel.defaultProps = { children: null };
-
-const { any } = PropTypes;
-
-MapPanel.propTypes = { children: any };
-
-export default MapPanel;

src/components/MapPanel/MapPanel.test.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { renderShallow } from '../../util/test-helpers';
-import MapPanel from './MapPanel';
-
-describe('MapPanel', () => {
-  it('matches snapshot', () => {
-    const tree = renderShallow(<MapPanel />);
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/MapPanel/__snapshots__/MapPanel.test.js.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MapPanel matches snapshot 1`] = `
-<div>
-  <div>
-    Map
-  </div>
-  <div />
-  <NamedLink
-    name="SearchFiltersPage"
-  >
-    Filters
-  </NamedLink>
-  <NamedLink
-    name="SearchListingsPage"
-  >
-    X
-  </NamedLink>
-</div>
-`;

src/components/MenuContent/MenuContent.css

@@ -1,10 +1,6 @@
 @import '../../marketplace.css';
 
 .root {
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-
   position: absolute;
   z-index: var(--zIndexPopup);
 
@@ -15,6 +11,12 @@
   transition: var(--transitionStyleButton);
 }
 
+.isClosed {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .isOpen {
   visibility: visible;
   opacity: 1;

src/components/MenuContent/MenuContent.js

@@ -22,7 +22,8 @@ const MenuContent = props => {
   } = props;
 
   const rootClass = rootClassName || css.root;
-  const classes = classNames(rootClass, className, { [css.isOpen]: isOpen });
+  const openClasses = isOpen ? css.isOpen : css.isClosed;
+  const classes = classNames(rootClass, className, openClasses);
   const contentClasses = classNames(contentClassName || css.content);
 
   const arrowPositionStyle =

src/components/ModalMissingInformation/EmailReminder.js

@@ -17,7 +17,7 @@ const EmailReminder = props => {
   const email = user.id ? <span className={css.email}>{user.attributes.email}</span> : '';
 
   const resendEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={onResendVerificationEmail}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={onResendVerificationEmail}>
       <FormattedMessage id="ModalMissingInformation.resendEmailLinkText" />
     </InlineTextButton>
   );

src/components/ModalMissingInformation/ModalMissingInformation.css

@@ -20,6 +20,7 @@
 }
 
 .helperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/components/SearchFiltersMobile/SearchFiltersMobile.css

@@ -30,6 +30,19 @@
 }
 
 .filtersButton {
+  @apply --marketplaceButtonStylesSecondary;
+  @apply --marketplaceTinyFontStyles;
+  font-weight: var(--fontWeightBold);
+
+  height: 35px;
+  min-height: 35px;
+  padding: 0 18px;
+  margin: 0 9px 0 0;
+  border-radius: 4px;
+}
+
+.filtersButtonSelected {
+  @apply --marketplaceButtonStyles;
   @apply --marketplaceTinyFontStyles;
   font-weight: var(--fontWeightBold);
 

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -9,7 +9,6 @@ import routeConfiguration from '../../routeConfiguration';
 import { parseDateFromISO8601, stringifyDateToISO8601 } from '../../util/dates';
 import { createResourceLocatorString } from '../../util/routes';
 import {
-  SecondaryButton,
   ModalInMobile,
   Button,
   PriceFilter,
@@ -204,16 +203,8 @@ class SearchFiltersMobileComponent extends Component {
       { count: resultsCount }
     );
 
-    const filtersButton =
-      selectedFiltersCount > 0 ? (
-        <Button className={css.filtersButton} onClick={this.openFilters}>
-          <FormattedMessage id="SearchFilters.filtersButtonLabel" className={css.mapIconText} />
-        </Button>
-      ) : (
-        <SecondaryButton className={css.filtersButton} onClick={this.openFilters}>
-          <FormattedMessage id="SearchFilters.filtersButtonLabel" className={css.mapIconText} />
-        </SecondaryButton>
-      );
+    const filtersButtonClasses =
+      selectedFiltersCount > 0 ? css.filtersButtonSelected : css.filtersButton;
 
     const categoryLabel = intl.formatMessage({
       id: 'SearchFiltersMobile.categoryLabel',
@@ -284,7 +275,9 @@ class SearchFiltersMobileComponent extends Component {
           {searchInProgress ? loadingResults : null}
         </div>
         <div className={css.buttons}>
-          {filtersButton}
+          <Button rootClassName={filtersButtonClasses} onClick={this.openFilters}>
+            <FormattedMessage id="SearchFilters.filtersButtonLabel" className={css.mapIconText} />
+          </Button>
           <div className={css.mapIcon} onClick={onMapIconClick}>
             <FormattedMessage id="SearchFilters.openMapView" className={css.mapIconText} />
           </div>

src/components/SearchFiltersPanel/SearchFiltersPanel.css

@@ -16,6 +16,7 @@
 }
 
 .resetAllButton {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
   color: var(--matterColorAnti);
@@ -33,6 +34,7 @@
 }
 
 .cancelButton {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
   color: var(--matterColorAnti);
@@ -50,6 +52,7 @@
 }
 
 .applyButton {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
 

src/components/SearchFiltersPanel/SearchFiltersPanel.js

@@ -158,13 +158,13 @@ class SearchFiltersPanelComponent extends Component {
       <div className={classes}>
         <div className={css.filtersWrapper}>{/* Add filters here */}</div>
         <div className={css.footer}>
-          <InlineTextButton className={css.resetAllButton} onClick={this.resetAll}>
+          <InlineTextButton rootClassName={css.resetAllButton} onClick={this.resetAll}>
             <FormattedMessage id={'SearchFiltersPanel.resetAll'} />
           </InlineTextButton>
-          <InlineTextButton className={css.cancelButton} onClick={this.cancelFilters}>
+          <InlineTextButton rootClassName={css.cancelButton} onClick={this.cancelFilters}>
             <FormattedMessage id={'SearchFiltersPanel.cancel'} />
           </InlineTextButton>
-          <InlineTextButton className={css.applyButton} onClick={this.applyFilters}>
+          <InlineTextButton rootClassName={css.applyButton} onClick={this.applyFilters}>
             <FormattedMessage id={'SearchFiltersPanel.apply'} />
           </InlineTextButton>
         </div>

src/components/TabNavHorizontal/TabNavHorizontal.css

@@ -23,6 +23,7 @@
 }
 
 .tabContent {
+  @apply --marketplaceLinkStyles;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;

src/components/TabNavHorizontal/TabNavHorizontal.js

@@ -43,7 +43,7 @@ const Tab = props => {
   return (
     <div className={className}>
       {isButton ? (
-        <InlineTextButton className={buttonClasses} onClick={onClick}>
+        <InlineTextButton rootClassName={buttonClasses} onClick={onClick}>
           {text}
         </InlineTextButton>
       ) : (

src/components/TopbarDesktop/TopbarDesktop.css

@@ -304,6 +304,7 @@
 }
 
 .logoutButton {
+  @apply --marketplaceLinkStyles;
   /* Font is specific to this component */
   @apply --marketplaceH4FontStyles;
   font-size: 14px;

src/components/TopbarDesktop/TopbarDesktop.js

@@ -100,7 +100,7 @@ const TopbarDesktop = props => {
           </NamedLink>
         </MenuItem>
         <MenuItem key="logout">
-          <InlineTextButton className={css.logoutButton} onClick={onLogout}>
+          <InlineTextButton rootClassName={css.logoutButton} onClick={onLogout}>
             <span className={css.menuItemBorder} />
             <FormattedMessage id="TopbarDesktop.logout" />
           </InlineTextButton>

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -55,6 +55,7 @@
 }
 
 .logoutButton {
+  @apply --marketplaceLinkStyles;
   /* Logout font is smaller and gray since the action is not recommended. */
   @apply --marketplaceH3FontStyles;
   color: var(--matterColorAnti);

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -81,7 +81,7 @@ const TopbarMobileMenu = props => {
         <span className={css.greeting}>
           <FormattedMessage id="TopbarMobileMenu.greeting" values={{ displayName }} />
         </span>
-        <InlineTextButton className={css.logoutButton} onClick={onLogout}>
+        <InlineTextButton rootClassName={css.logoutButton} onClick={onLogout}>
           <FormattedMessage id="TopbarMobileMenu.logoutLink" />
         </InlineTextButton>
         <NamedLink

src/components/UserCard/UserCard.css

@@ -59,6 +59,7 @@
 }
 
 .showMore {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH4FontStyles;
   margin: 0 0 0 5px;
 }
@@ -116,6 +117,7 @@
 }
 
 .contact {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH4FontStyles;
   margin: 0;
 }

src/components/UserCard/UserCard.js

@@ -42,7 +42,7 @@ class ExpandableBio extends Component {
       this.setState({ expand: true });
     };
     const showMore = (
-      <InlineTextButton className={css.showMore} onClick={handleShowMoreClick}>
+      <InlineTextButton rootClassName={css.showMore} onClick={handleShowMoreClick}>
         <FormattedMessage id="UserCard.showFullBioLink" />
       </InlineTextButton>
     );
@@ -86,7 +86,7 @@ const UserCard = props => {
   const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>;
 
   const contact = (
-    <InlineTextButton className={css.contact} onClick={handleContactUserClick}>
+    <InlineTextButton rootClassName={css.contact} onClick={handleContactUserClick}>
       <FormattedMessage id="UserCard.contactUser" />
     </InlineTextButton>
   );

src/components/index.js

@@ -1,39 +1,16 @@
-export { default as ActivityFeed } from './ActivityFeed/ActivityFeed';
-export { default as AddImages } from './AddImages/AddImages';
-export { default as Avatar, AvatarMedium, AvatarLarge } from './Avatar/Avatar';
-export { default as BookingBreakdown } from './BookingBreakdown/BookingBreakdown';
-export { default as BookingDateRangeFilter } from './BookingDateRangeFilter/BookingDateRangeFilter';
-export { default as Button, PrimaryButton, SecondaryButton, InlineTextButton } from './Button/Button';
-export { default as BookingPanel } from './BookingPanel/BookingPanel';
-export { default as CookieConsent } from './CookieConsent/CookieConsent';
-export { default as Discussion } from './Discussion/Discussion';
-export { default as EditListingAvailabilityPanel } from './EditListingAvailabilityPanel/EditListingAvailabilityPanel';
-export { default as EditListingDescriptionPanel } from './EditListingDescriptionPanel/EditListingDescriptionPanel';
-export { default as EditListingFeaturesPanel } from './EditListingFeaturesPanel/EditListingFeaturesPanel';
-export { default as EditListingLocationPanel } from './EditListingLocationPanel/EditListingLocationPanel';
-export { default as EditListingPhotosPanel } from './EditListingPhotosPanel/EditListingPhotosPanel';
-export { default as EditListingPoliciesPanel } from './EditListingPoliciesPanel/EditListingPoliciesPanel';
-export { default as EditListingPricingPanel } from './EditListingPricingPanel/EditListingPricingPanel';
-export { default as EditListingWizard } from './EditListingWizard/EditListingWizard';
-export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
-export { default as ExternalLink } from './ExternalLink/ExternalLink';
-export { default as FieldBirthdayInput } from './FieldBirthdayInput/FieldBirthdayInput';
-export { default as FieldBoolean } from './FieldBoolean/FieldBoolean';
-export { default as FieldCheckbox } from './FieldCheckbox/FieldCheckbox';
-export { default as FieldCheckboxGroup } from './FieldCheckboxGroup/FieldCheckboxGroup';
-export { default as FieldCurrencyInput } from './FieldCurrencyInput/FieldCurrencyInput';
-export { default as FieldDateInput } from './FieldDateInput/FieldDateInput';
-export { default as FieldDateRangeController } from './FieldDateRangeController/FieldDateRangeController';
-export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateRangeInput';
-export { default as FieldRadioButton } from './FieldRadioButton/FieldRadioButton';
-export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput';
-export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
-export { default as FieldSelect } from './FieldSelect/FieldSelect';
-export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
-export { default as FilterPlain } from './FilterPlain/FilterPlain';
-export { default as FilterPopup } from './FilterPopup/FilterPopup';
-export { default as Footer } from './Footer/Footer';
-export { default as Form } from './Form/Form';
+/**
+ * Independent components
+ * These components do not include any other components
+ *
+ * This order mitigates problems that might arise when trying to import components
+ * that have circular dependencies to other components.
+ * Note: import-order also affects to the generated CSS bundle file.
+ *
+ * Read more:
+ * https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de
+ */
+
+// Icons
 export { default as IconAdd } from './IconAdd/IconAdd';
 export { default as IconArrowHead } from './IconArrowHead/IconArrowHead';
 export { default as IconBannedUser } from './IconBannedUser/IconBannedUser';
@@ -52,43 +29,102 @@ export { default as IconSocialMediaFacebook } from './IconSocialMediaFacebook/Ic
 export { default as IconSocialMediaInstagram } from './IconSocialMediaInstagram/IconSocialMediaInstagram';
 export { default as IconSocialMediaTwitter } from './IconSocialMediaTwitter/IconSocialMediaTwitter';
 export { default as IconSpinner } from './IconSpinner/IconSpinner';
-export { default as ImageCarousel } from './ImageCarousel/ImageCarousel';
-export { default as ImageFromFile } from './ImageFromFile/ImageFromFile';
-export { default as LayoutSideNavigation } from './LayoutSideNavigation/LayoutSideNavigation';
-export { default as LayoutSingleColumn } from './LayoutSingleColumn/LayoutSingleColumn';
-export { default as LayoutWrapperFooter } from './LayoutWrapperFooter/LayoutWrapperFooter';
-export { default as LayoutWrapperMain } from './LayoutWrapperMain/LayoutWrapperMain';
-export { default as LayoutWrapperSideNav } from './LayoutWrapperSideNav/LayoutWrapperSideNav';
-export { default as LayoutWrapperTopbar } from './LayoutWrapperTopbar/LayoutWrapperTopbar';
-export { default as ListingCard } from './ListingCard/ListingCard';
-export { default as ListingLink } from './ListingLink/ListingLink';
-export { default as LocationAutocompleteInput, LocationAutocompleteInputField } from './LocationAutocompleteInput/LocationAutocompleteInput';
+
+// Other independent components
+export { default as ExternalLink } from './ExternalLink/ExternalLink';
+export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
+export { default as Form } from './Form/Form';
 export { default as Logo } from './Logo/Logo';
-export { default as ManageListingCard } from './ManageListingCard/ManageListingCard';
-export { default as Map } from './Map/Map';
-export { default as MapPanel } from './MapPanel/MapPanel';
-export { default as Menu } from './Menu/Menu';
-export { default as MenuContent } from './MenuContent/MenuContent';
-export { default as MenuItem } from './MenuItem/MenuItem';
-export { default as MenuLabel } from './MenuLabel/MenuLabel';
-export { default as Modal } from './Modal/Modal';
-export { default as ModalInMobile } from './ModalInMobile/ModalInMobile';
-export { default as ModalMissingInformation } from './ModalMissingInformation/ModalMissingInformation';
 export { default as NamedLink } from './NamedLink/NamedLink';
 export { default as NamedRedirect } from './NamedRedirect/NamedRedirect';
 export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
-export { default as OrderDiscussionPanel } from './OrderDiscussionPanel/OrderDiscussionPanel';
 export { default as OutsideClickHandler } from './OutsideClickHandler/OutsideClickHandler';
-export { default as Page } from './Page/Page';
-export { default as PaginationLinks } from './PaginationLinks/PaginationLinks';
-export { default as PriceFilter } from './PriceFilter/PriceFilter';
-export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy';
 export { default as Promised } from './Promised/Promised';
 export { default as PropertyGroup } from './PropertyGroup/PropertyGroup';
 export { default as RangeSlider } from './RangeSlider/RangeSlider';
 export { default as ResponsiveImage } from './ResponsiveImage/ResponsiveImage';
-export { default as ReviewModal } from './ReviewModal/ReviewModal';
+export { default as UserDisplayName } from './UserDisplayName/UserDisplayName';
+export { default as ValidationError } from './ValidationError/ValidationError';
+
+/**
+ * Composite components
+ * These components include other components
+ */
+
+//////////////////////////////////////////////////////////
+// First components that include only atomic components //
+//////////////////////////////////////////////////////////
+
+export { default as Button, PrimaryButton, SecondaryButton, InlineTextButton } from './Button/Button';
+export { default as CookieConsent } from './CookieConsent/CookieConsent';
+export { default as ImageCarousel } from './ImageCarousel/ImageCarousel';
+export { default as ImageFromFile } from './ImageFromFile/ImageFromFile';
+export { default as ListingLink } from './ListingLink/ListingLink';
+export { default as PaginationLinks } from './PaginationLinks/PaginationLinks';
 export { default as ReviewRating } from './ReviewRating/ReviewRating';
+
+// Layout helpers
+export { default as LayoutWrapperFooter } from './LayoutWrapperFooter/LayoutWrapperFooter';
+export { default as LayoutWrapperMain } from './LayoutWrapperMain/LayoutWrapperMain';
+export { default as LayoutWrapperSideNav } from './LayoutWrapperSideNav/LayoutWrapperSideNav';
+export { default as LayoutWrapperTopbar } from './LayoutWrapperTopbar/LayoutWrapperTopbar';
+export { default as LayoutSideNavigation } from './LayoutSideNavigation/LayoutSideNavigation';
+export { default as LayoutSingleColumn } from './LayoutSingleColumn/LayoutSingleColumn';
+
+// Menu
+export { default as MenuItem } from './MenuItem/MenuItem';
+export { default as MenuContent } from './MenuContent/MenuContent';
+export { default as MenuLabel } from './MenuLabel/MenuLabel';
+export { default as Menu } from './Menu/Menu';
+
+// Modal
+export { default as Modal } from './Modal/Modal';
+export { default as ModalInMobile } from './ModalInMobile/ModalInMobile';
+
+// Fields (for Final Form)
+export { default as FieldBirthdayInput } from './FieldBirthdayInput/FieldBirthdayInput';
+export { default as FieldCheckbox } from './FieldCheckbox/FieldCheckbox';
+export { default as FieldCurrencyInput } from './FieldCurrencyInput/FieldCurrencyInput';
+export { default as FieldDateInput } from './FieldDateInput/FieldDateInput';
+export { default as FieldDateRangeController } from './FieldDateRangeController/FieldDateRangeController';
+export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateRangeInput';
+export { default as FieldRadioButton } from './FieldRadioButton/FieldRadioButton';
+export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
+export { default as FieldSelect } from './FieldSelect/FieldSelect';
+export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
+// Fields that use other Fields
+export { default as FieldBoolean } from './FieldBoolean/FieldBoolean';
+export { default as FieldCheckboxGroup } from './FieldCheckboxGroup/FieldCheckboxGroup';
+export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput';
+// Fields and inputs using old naming pattern
+export { default as LocationAutocompleteInput, LocationAutocompleteInputField } from './LocationAutocompleteInput/LocationAutocompleteInput';
+export { default as StripeBankAccountTokenInputField } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField';
+
+// Tab navigation
+export { default as TabNav } from './TabNav/TabNav';
+export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal';
+export { default as Tabs } from './Tabs/Tabs';
+export { default as UserNav } from './UserNav/UserNav';
+
+///////////////////////////////////////////////
+// These components include other components //
+///////////////////////////////////////////////
+
+export { default as ActivityFeed } from './ActivityFeed/ActivityFeed';
+export { default as AddImages } from './AddImages/AddImages';
+export { default as Avatar, AvatarMedium, AvatarLarge } from './Avatar/Avatar';
+export { default as BookingBreakdown } from './BookingBreakdown/BookingBreakdown';
+export { default as BookingDateRangeFilter } from './BookingDateRangeFilter/BookingDateRangeFilter';
+export { default as BookingPanel } from './BookingPanel/BookingPanel';
+export { default as Discussion } from './Discussion/Discussion';
+export { default as FilterPlain } from './FilterPlain/FilterPlain';
+export { default as FilterPopup } from './FilterPopup/FilterPopup';
+export { default as ListingCard } from './ListingCard/ListingCard';
+export { default as ManageListingCard } from './ManageListingCard/ManageListingCard';
+export { default as Map } from './Map/Map';
+export { default as OrderDiscussionPanel } from './OrderDiscussionPanel/OrderDiscussionPanel';
+export { default as Page } from './Page/Page';
+export { default as PriceFilter } from './PriceFilter/PriceFilter';
 export { default as Reviews } from './Reviews/Reviews';
 export { default as SearchFilters } from './SearchFilters/SearchFilters';
 export { default as SearchFiltersMobile } from './SearchFiltersMobile/SearchFiltersMobile';
@@ -98,22 +134,32 @@ export { default as SearchMapGroupLabel } from './SearchMapGroupLabel/SearchMapG
 export { default as SearchMapInfoCard } from './SearchMapInfoCard/SearchMapInfoCard';
 export { default as SearchMapPriceLabel } from './SearchMapPriceLabel/SearchMapPriceLabel';
 export { default as SearchResultsPanel } from './SearchResultsPanel/SearchResultsPanel';
+export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter';
+export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter';
+export { default as UserCard } from './UserCard/UserCard';
+
+//////////////////////////////////////////////
+// Page sections and modal content wrappers //
+//////////////////////////////////////////////
+
+export { default as ModalMissingInformation } from './ModalMissingInformation/ModalMissingInformation';
+export { default as ReviewModal } from './ReviewModal/ReviewModal';
+export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy';
+export { default as TermsOfService } from './TermsOfService/TermsOfService';
+export { default as EditListingAvailabilityPanel } from './EditListingAvailabilityPanel/EditListingAvailabilityPanel';
+export { default as EditListingDescriptionPanel } from './EditListingDescriptionPanel/EditListingDescriptionPanel';
+export { default as EditListingFeaturesPanel } from './EditListingFeaturesPanel/EditListingFeaturesPanel';
+export { default as EditListingLocationPanel } from './EditListingLocationPanel/EditListingLocationPanel';
+export { default as EditListingPhotosPanel } from './EditListingPhotosPanel/EditListingPhotosPanel';
+export { default as EditListingPoliciesPanel } from './EditListingPoliciesPanel/EditListingPoliciesPanel';
+export { default as EditListingPricingPanel } from './EditListingPricingPanel/EditListingPricingPanel';
+export { default as EditListingWizard } from './EditListingWizard/EditListingWizard';
+export { default as Footer } from './Footer/Footer';
 export { default as SectionHero } from './SectionHero/SectionHero';
 export { default as SectionHowItWorks } from './SectionHowItWorks/SectionHowItWorks';
 export { default as SectionLocations } from './SectionLocations/SectionLocations';
 export { default as SectionThumbnailLinks } from './SectionThumbnailLinks/SectionThumbnailLinks';
-export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter';
-export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter';
-export { default as StripeBankAccountTokenInputField } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField';
-export { default as TabNav } from './TabNav/TabNav';
-export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal';
-export { default as Tabs } from './Tabs/Tabs';
-export { default as TermsOfService } from './TermsOfService/TermsOfService';
 export { default as Topbar } from './Topbar/Topbar';
 export { default as TopbarDesktop } from './TopbarDesktop/TopbarDesktop';
 export { default as TopbarMobileMenu } from './TopbarMobileMenu/TopbarMobileMenu';
 export { default as TransactionPanel } from './TransactionPanel/TransactionPanel';
-export { default as UserCard } from './UserCard/UserCard';
-export { default as UserDisplayName } from './UserDisplayName/UserDisplayName';
-export { default as UserNav } from './UserNav/UserNav';
-export { default as ValidationError } from './ValidationError/ValidationError';

src/containers/AuthenticationPage/AuthenticationPage.css

@@ -122,6 +122,7 @@
 
 /* Helper links */
 .modalHelperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -157,7 +157,7 @@ export class AuthenticationPageComponent extends Component {
     const email = <span className={css.email}>{user.attributes.email}</span>;
 
     const resendEmailLink = (
-      <InlineTextButton className={css.modalHelperLink} onClick={onResendVerificationEmail}>
+      <InlineTextButton rootClassName={css.modalHelperLink} onClick={onResendVerificationEmail}>
         <FormattedMessage id="AuthenticationPage.resendEmailLinkText" />
       </InlineTextButton>
     );

src/containers/ListingPage/ListingPage.css

@@ -383,6 +383,7 @@
 }
 
 .contactLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH4FontStyles;
   margin: 0;
 }

src/containers/ListingPage/SectionHeading.js

@@ -45,7 +45,7 @@ const SectionHeading = props => {
           {showContactUser ? (
             <span className={css.contactWrapper}>
               <span className={css.separator}>•</span>
-              <InlineTextButton className={css.contactLink} onClick={onContactUser}>
+              <InlineTextButton rootClassName={css.contactLink} onClick={onContactUser}>
                 <FormattedMessage id="ListingPage.contactUser" />
               </InlineTextButton>
             </span>

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css

@@ -52,6 +52,7 @@
 }
 
 .helperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js

@@ -45,13 +45,13 @@ export const PasswordRecoveryPageComponent = props => {
   });
 
   const resendEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={() => onSubmitEmail(submittedEmail)}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={() => onSubmitEmail(submittedEmail)}>
       <FormattedMessage id="PasswordRecoveryPage.resendEmailLinkText" />
     </InlineTextButton>
   );
 
   const fixEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={onRetypeEmail}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={onRetypeEmail}>
       <FormattedMessage id="PasswordRecoveryPage.fixEmailLinkText" />
     </InlineTextButton>
   );

src/forms/ContactDetailsForm/ContactDetailsForm.js

@@ -316,7 +316,6 @@ class ContactDetailsFormComponent extends Component {
               <div className={css.bottomWrapper}>
                 {genericError}
                 <PrimaryButton
-                  className={css.submitButton}
                   type="submit"
                   inProgress={inProgress}
                   ready={pristineSinceLastSubmit}

src/forms/LoginForm/LoginForm.js

@@ -93,12 +93,7 @@ const LoginFormComponent = props => (
                 />
               </span>
             </p>
-            <PrimaryButton
-              className={css.submitButton}
-              type="submit"
-              inProgress={submitInProgress}
-              disabled={submitDisabled}
-            >
+            <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
               <FormattedMessage id="LoginForm.logIn" />
             </PrimaryButton>
           </div>

src/forms/PasswordChangeForm/PasswordChangeForm.js

@@ -183,7 +183,6 @@ class PasswordChangeFormComponent extends Component {
               <div className={css.bottomWrapper}>
                 {genericFailure}
                 <PrimaryButton
-                  className={css.submitButton}
                   type="submit"
                   inProgress={inProgress}
                   ready={ready}

src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js

@@ -193,7 +193,7 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
                 <React.Fragment>
                   <InlineTextButton
                     type="button"
-                    className={css.fieldArrayAdd}
+                    rootClassName={css.fieldArrayAdd}
                     onClick={() => push('company.additionalOwners', undefined)}
                   >
                     <span className={css.additionalOwnerLabel}>

src/forms/SendMessageForm/SendMessageForm.css

@@ -75,6 +75,7 @@
 }
 
 .submitButton {
+  @apply --marketplaceButtonStylesSecondary;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
 

src/forms/SendMessageForm/SendMessageForm.js

@@ -91,7 +91,7 @@ class SendMessageFormComponent extends Component {
                   ) : null}
                 </div>
                 <SecondaryButton
-                  className={css.submitButton}
+                  rootClassName={css.submitButton}
                   inProgress={submitInProgress}
                   disabled={submitDisabled}
                   onFocus={this.handleFocus}

src/forms/SignupForm/SignupForm.js

@@ -184,12 +184,7 @@ const SignupFormComponent = props => (
                 />
               </span>
             </p>
-            <PrimaryButton
-              className={css.submitButton}
-              type="submit"
-              inProgress={submitInProgress}
-              disabled={submitDisabled}
-            >
+            <PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
               <FormattedMessage id="SignupForm.signUp" />
             </PrimaryButton>
           </div>