diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css index 962ceeab..ac84e5df 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 0ed71889..76be570f 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 49d20493..bd56829e 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 89c29d25..7f79a06c 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'; -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 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'; @@ -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';