From d3b8c558a581ae7f5674b3048a34b15d81f6f695 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 19 Feb 2019 13:26:57 +0200 Subject: [PATCH 1/6] Remove unused MapPanel component --- src/components/MapPanel/MapPanel.css | 53 ------------------- src/components/MapPanel/MapPanel.js | 25 --------- src/components/MapPanel/MapPanel.test.js | 10 ---- .../__snapshots__/MapPanel.test.js.snap | 20 ------- src/components/index.js | 1 - 5 files changed, 109 deletions(-) delete mode 100644 src/components/MapPanel/MapPanel.css delete mode 100644 src/components/MapPanel/MapPanel.js delete mode 100644 src/components/MapPanel/MapPanel.test.js delete mode 100644 src/components/MapPanel/__snapshots__/MapPanel.test.js.snap diff --git a/src/components/MapPanel/MapPanel.css b/src/components/MapPanel/MapPanel.css deleted file mode 100644 index f4ea212f45..0000000000 --- a/src/components/MapPanel/MapPanel.css +++ /dev/null @@ -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; - } -} diff --git a/src/components/MapPanel/MapPanel.js b/src/components/MapPanel/MapPanel.js deleted file mode 100644 index d0e00b640b..0000000000 --- a/src/components/MapPanel/MapPanel.js +++ /dev/null @@ -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 => ( -
-
Map
-
{props.children}
- - Filters - - - X - -
-); - -MapPanel.defaultProps = { children: null }; - -const { any } = PropTypes; - -MapPanel.propTypes = { children: any }; - -export default MapPanel; diff --git a/src/components/MapPanel/MapPanel.test.js b/src/components/MapPanel/MapPanel.test.js deleted file mode 100644 index 95787f3e80..0000000000 --- a/src/components/MapPanel/MapPanel.test.js +++ /dev/null @@ -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(); - expect(tree).toMatchSnapshot(); - }); -}); diff --git a/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap b/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap deleted file mode 100644 index 8a0209aaa7..0000000000 --- a/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MapPanel matches snapshot 1`] = ` -
-
- Map -
-
- - Filters - - - X - -
-`; diff --git a/src/components/index.js b/src/components/index.js index 65b5cbd237..89c29d2542 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -66,7 +66,6 @@ export { default as LocationAutocompleteInput, LocationAutocompleteInputField } 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'; From 9e3c8ec51f7ee9b39eb722fe0f5cb303d98fbf33 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 19 Feb 2019 13:42:31 +0200 Subject: [PATCH 2/6] Reorder components/index.js and fix css for MenuContent --- .../ManageListingCard/ManageListingCard.css | 4 - src/components/MenuContent/MenuContent.css | 10 +- src/components/MenuContent/MenuContent.js | 3 +- src/components/index.js | 187 +++++++++++------- 4 files changed, 125 insertions(+), 79 deletions(-) diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index 962ceeabe8..ac84e5df24 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/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); diff --git a/src/components/MenuContent/MenuContent.css b/src/components/MenuContent/MenuContent.css index 0ed718898f..76be570ff4 100644 --- a/src/components/MenuContent/MenuContent.css +++ b/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; diff --git a/src/components/MenuContent/MenuContent.js b/src/components/MenuContent/MenuContent.js index 49d204933b..bd56829efe 100644 --- a/src/components/MenuContent/MenuContent.js +++ b/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 = diff --git a/src/components/index.js b/src/components/index.js index 89c29d2542..7f79a06c00 100644 --- a/src/components/index.js +++ b/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,42 +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'; + +// 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 NamedLink } from './NamedLink/NamedLink'; +export { default as NamedRedirect } from './NamedRedirect/NamedRedirect'; +export { default as NotificationBadge } from './NotificationBadge/NotificationBadge'; +export { default as OutsideClickHandler } from './OutsideClickHandler/OutsideClickHandler'; +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 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 LayoutSideNavigation } from './LayoutSideNavigation/LayoutSideNavigation'; -export { default as LayoutSingleColumn } from './LayoutSingleColumn/LayoutSingleColumn'; +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 ListingCard } from './ListingCard/ListingCard'; -export { default as ListingLink } from './ListingLink/ListingLink'; -export { default as LocationAutocompleteInput, LocationAutocompleteInputField } from './LocationAutocompleteInput/LocationAutocompleteInput'; -export { default as Logo } from './Logo/Logo'; -export { default as ManageListingCard } from './ManageListingCard/ManageListingCard'; -export { default as Map } from './Map/Map'; -export { default as Menu } from './Menu/Menu'; -export { default as MenuContent } from './MenuContent/MenuContent'; +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'; -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'; + +// 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 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 ReviewRating } from './ReviewRating/ReviewRating'; export { default as Reviews } from './Reviews/Reviews'; export { default as SearchFilters } from './SearchFilters/SearchFilters'; export { default as SearchFiltersMobile } from './SearchFiltersMobile/SearchFiltersMobile'; @@ -97,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'; From 32a55232e9afaeaf18f8f9e2d6dc7b43203bf4dc Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Tue, 19 Feb 2019 14:30:52 +0200 Subject: [PATCH 3/6] 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 fbdbf27033..1cb34644d9 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 ad1455348f..34fe0ab427 100644 --- a/src/components/Button/Button.example.js +++ b/src/components/Button/Button.example.js @@ -157,7 +157,7 @@ const ButtonsComponent = () => {

Button with custom styles:

- +
); }; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index adda2afa26..b009bbf019 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 => - ) : ( - - - - ); + 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}
- {filtersButton} +
diff --git a/src/forms/SendMessageForm/SendMessageForm.css b/src/forms/SendMessageForm/SendMessageForm.css index 4a4ac9941f..4d5c7b6e28 100644 --- a/src/forms/SendMessageForm/SendMessageForm.css +++ b/src/forms/SendMessageForm/SendMessageForm.css @@ -75,6 +75,7 @@ } .submitButton { + @apply --marketplaceButtonStylesSecondary; @apply --marketplaceH5FontStyles; font-weight: var(--fontWeightMedium); diff --git a/src/forms/SendMessageForm/SendMessageForm.js b/src/forms/SendMessageForm/SendMessageForm.js index c0e55d17e2..716022c8cc 100644 --- a/src/forms/SendMessageForm/SendMessageForm.js +++ b/src/forms/SendMessageForm/SendMessageForm.js @@ -91,7 +91,7 @@ class SendMessageFormComponent extends Component { ) : null}
Date: Tue, 19 Feb 2019 14:40:56 +0200 Subject: [PATCH 6/6] Refactored className usage for InlineTextButton They are changed to use rootClassName for consistency and protection against future bundling order changes. --- src/components/ManageListingCard/ManageListingCard.css | 2 ++ src/components/ManageListingCard/ManageListingCard.js | 4 ++-- .../__snapshots__/ManageListingCard.test.js.snap | 4 ++-- src/components/ModalMissingInformation/EmailReminder.js | 2 +- .../ModalMissingInformation/ModalMissingInformation.css | 1 + src/components/SearchFiltersPanel/SearchFiltersPanel.css | 3 +++ src/components/SearchFiltersPanel/SearchFiltersPanel.js | 6 +++--- src/components/TabNavHorizontal/TabNavHorizontal.css | 1 + src/components/TabNavHorizontal/TabNavHorizontal.js | 2 +- src/components/TopbarDesktop/TopbarDesktop.css | 1 + src/components/TopbarDesktop/TopbarDesktop.js | 2 +- src/components/TopbarMobileMenu/TopbarMobileMenu.css | 1 + src/components/TopbarMobileMenu/TopbarMobileMenu.js | 2 +- src/components/UserCard/UserCard.css | 2 ++ src/components/UserCard/UserCard.js | 4 ++-- src/containers/AuthenticationPage/AuthenticationPage.css | 1 + src/containers/AuthenticationPage/AuthenticationPage.js | 2 +- src/containers/ListingPage/ListingPage.css | 1 + src/containers/ListingPage/SectionHeading.js | 2 +- .../PasswordRecoveryPage/PasswordRecoveryPage.css | 1 + src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js | 4 ++-- src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js | 2 +- 22 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index ac84e5df24..27a7f02eb0 100644 --- a/src/components/ManageListingCard/ManageListingCard.css +++ b/src/components/ManageListingCard/ManageListingCard.css @@ -164,6 +164,7 @@ } .menuItem { + @apply --marketplaceLinkStyles; @apply --marketplaceH5FontStyles; color: var(--matterColorLight); font-weight: var(--fontWeightMedium); @@ -269,6 +270,7 @@ } .title { + @apply --marketplaceLinkStyles; /* Font */ @apply --marketplaceH3FontStyles; color: var(--matterColor); diff --git a/src/components/ManageListingCard/ManageListingCard.js b/src/components/ManageListingCard/ManageListingCard.js index 4c05e1004a..6d2bd78656 100644 --- a/src/components/ManageListingCard/ManageListingCard.js +++ b/src/components/ManageListingCard/ManageListingCard.js @@ -219,7 +219,7 @@ export const ManageListingCardComponent = props => { { event.preventDefault(); event.stopPropagation(); @@ -315,7 +315,7 @@ export const ManageListingCardComponent = props => {
{ event.preventDefault(); event.stopPropagation(); diff --git a/src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap b/src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap index 4105f5d58a..ef138e712a 100644 --- a/src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap +++ b/src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap @@ -78,8 +78,8 @@ exports[`ManageListingCard matches snapshot 1`] = ` rootClassName="" >
{ const email = user.id ? {user.attributes.email} : ''; const resendEmailLink = ( - + ); diff --git a/src/components/ModalMissingInformation/ModalMissingInformation.css b/src/components/ModalMissingInformation/ModalMissingInformation.css index a0c4d42e5c..03241e1bcd 100644 --- a/src/components/ModalMissingInformation/ModalMissingInformation.css +++ b/src/components/ModalMissingInformation/ModalMissingInformation.css @@ -20,6 +20,7 @@ } .helperLink { + @apply --marketplaceLinkStyles; @apply --marketplaceModalHelperLink; } diff --git a/src/components/SearchFiltersPanel/SearchFiltersPanel.css b/src/components/SearchFiltersPanel/SearchFiltersPanel.css index 1b650243bd..939667c334 100644 --- a/src/components/SearchFiltersPanel/SearchFiltersPanel.css +++ b/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); diff --git a/src/components/SearchFiltersPanel/SearchFiltersPanel.js b/src/components/SearchFiltersPanel/SearchFiltersPanel.js index d70dc8b6b0..4a1946c68a 100644 --- a/src/components/SearchFiltersPanel/SearchFiltersPanel.js +++ b/src/components/SearchFiltersPanel/SearchFiltersPanel.js @@ -158,13 +158,13 @@ class SearchFiltersPanelComponent extends Component {
{/* Add filters here */}
- + - + - +
diff --git a/src/components/TabNavHorizontal/TabNavHorizontal.css b/src/components/TabNavHorizontal/TabNavHorizontal.css index 6ad0c4fb25..880c3909e0 100644 --- a/src/components/TabNavHorizontal/TabNavHorizontal.css +++ b/src/components/TabNavHorizontal/TabNavHorizontal.css @@ -23,6 +23,7 @@ } .tabContent { + @apply --marketplaceLinkStyles; display: flex; flex-direction: column; justify-content: flex-end; diff --git a/src/components/TabNavHorizontal/TabNavHorizontal.js b/src/components/TabNavHorizontal/TabNavHorizontal.js index 74cf02986a..764fefb85e 100644 --- a/src/components/TabNavHorizontal/TabNavHorizontal.js +++ b/src/components/TabNavHorizontal/TabNavHorizontal.js @@ -43,7 +43,7 @@ const Tab = props => { return (
{isButton ? ( - + {text} ) : ( diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 93729a89b8..a9459f92be 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -304,6 +304,7 @@ } .logoutButton { + @apply --marketplaceLinkStyles; /* Font is specific to this component */ @apply --marketplaceH4FontStyles; font-size: 14px; diff --git a/src/components/TopbarDesktop/TopbarDesktop.js b/src/components/TopbarDesktop/TopbarDesktop.js index 43fddd9b6e..54f3834777 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.js +++ b/src/components/TopbarDesktop/TopbarDesktop.js @@ -100,7 +100,7 @@ const TopbarDesktop = props => { - + diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.css b/src/components/TopbarMobileMenu/TopbarMobileMenu.css index 1c354e0819..52e2c2fd97 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css +++ b/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); diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.js b/src/components/TopbarMobileMenu/TopbarMobileMenu.js index a8671635f1..8c1ed145e8 100644 --- a/src/components/TopbarMobileMenu/TopbarMobileMenu.js +++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.js @@ -81,7 +81,7 @@ const TopbarMobileMenu = props => { - + + ); @@ -86,7 +86,7 @@ const UserCard = props => { const separator = isCurrentUser ? null : •; const contact = ( - + ); diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css index 104fe98971..20927b5802 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.css +++ b/src/containers/AuthenticationPage/AuthenticationPage.css @@ -122,6 +122,7 @@ /* Helper links */ .modalHelperLink { + @apply --marketplaceLinkStyles; @apply --marketplaceModalHelperLink; } diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js index b9e711cd04..783b7759a9 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.js +++ b/src/containers/AuthenticationPage/AuthenticationPage.js @@ -157,7 +157,7 @@ export class AuthenticationPageComponent extends Component { const email = {user.attributes.email}; const resendEmailLink = ( - + ); diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 64ef1cb6b5..a5f9550dae 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -383,6 +383,7 @@ } .contactLink { + @apply --marketplaceLinkStyles; @apply --marketplaceH4FontStyles; margin: 0; } diff --git a/src/containers/ListingPage/SectionHeading.js b/src/containers/ListingPage/SectionHeading.js index 34e1be6549..90b2d95455 100644 --- a/src/containers/ListingPage/SectionHeading.js +++ b/src/containers/ListingPage/SectionHeading.js @@ -45,7 +45,7 @@ const SectionHeading = props => { {showContactUser ? ( • - + diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css index 16c043e88f..6d500a1604 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css @@ -52,6 +52,7 @@ } .helperLink { + @apply --marketplaceLinkStyles; @apply --marketplaceModalHelperLink; } diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js index 48e923de85..0f2ff66449 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js @@ -45,13 +45,13 @@ export const PasswordRecoveryPageComponent = props => { }); const resendEmailLink = ( - onSubmitEmail(submittedEmail)}> + onSubmitEmail(submittedEmail)}> ); const fixEmailLink = ( - + ); diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js index 65cf73f736..a8885c4c02 100644 --- a/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js +++ b/src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js @@ -193,7 +193,7 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => { push('company.additionalOwners', undefined)} >