diff --git a/src/components/SelectSingleFilter/SelectSingleFilter.css b/src/components/SelectSingleFilter/SelectSingleFilter.css deleted file mode 100644 index 06edfcff..00000000 --- a/src/components/SelectSingleFilter/SelectSingleFilter.css +++ /dev/null @@ -1,127 +0,0 @@ -@import '../../marketplace.css'; - -.root { - display: inline-block; - - &:last-of-type { - padding-right: 0; - } -} - -.menuLabel { - @apply --marketplaceButtonStylesSecondary; - @apply --marketplaceSearchFilterLabelFontStyles; - - padding: 9px 16px 10px 16px; - width: auto; - height: auto; - min-height: 0; - border-radius: 4px; - - &:focus { - outline: none; - background-color: var(--matterColorLight); - border-color: transparent; - text-decoration: none; - box-shadow: var(--boxShadowFilterButton); - } -} - -.menuLabelSelected { - @apply --marketplaceButtonStyles; - @apply --marketplaceSearchFilterLabelFontStyles; - font-weight: var(--fontWeightSemiBold); - - padding: 9px 16px 10px 16px; - width: auto; - height: auto; - min-height: 0; - border-radius: 4px; - border: 1px solid var(--marketplaceColor); - - &:hover, - &:focus { - border: 1px solid var(--marketplaceColorDark); - } -} - -.menuContent { - margin-top: 7px; - padding-top: 13px; - min-width: 300px; - border-radius: 4px; -} - -/* left animated "border" like hover element */ -.menuItemBorder { - position: absolute; - top: 2px; - left: 0px; - height: calc(100% - 4px); - width: 0; - background-color: var(--marketplaceColor); - transition: width var(--transitionStyleButton); -} - -/* left static border for selected element */ -.menuItemBorderSelected { - position: absolute; - top: 2px; - left: 0px; - height: calc(100% - 7px); - width: 6px; - background-color: var(--matterColorDark); -} - -.menuItem { - @apply --marketplaceListingAttributeFontStyles; - color: var(--matterColor); - - /* Layout */ - position: relative; - min-width: 300px; - margin: 0; - padding: 4px 30px; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - cursor: pointer; - - &:focus, - &:hover { - color: var(--matterColorDark); - } - - &:hover .menuItemBorder { - width: 6px; - } -} - -.clearMenuItem { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - position: relative; - min-width: 300px; - margin: 0; - padding: 32px 30px 18px 30px; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - cursor: pointer; - transition: width var(--transitionStyleButton); - - &:focus, - &:hover { - color: var(--matterColor); - transition: width var(--transitionStyleButton); - } -} diff --git a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.css b/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.css deleted file mode 100644 index 8460c5df..00000000 --- a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.css +++ /dev/null @@ -1,151 +0,0 @@ -@import '../../marketplace.css'; - -.root { - padding-top: 24px; - padding-bottom: 17px; - border-bottom: 1px solid var(--matterColorNegative); -} - -.filterLabel, -.filterLabelSelected { - @apply --marketplaceH3FontStyles; - - /* Baseline adjustment for label text */ - margin-top: 0; - margin-bottom: 12px; - padding: 4px 0 2px 0; -} - -.filterLabel { - color: var(--matterColorDark); -} - -.filterLabelSelected { - color: var(--marketplaceColor); -} - -.labelButton { - /* Override button styles */ - outline: none; - text-align: left; - border: none; - padding: 0; - cursor: pointer; -} - -.optionsContainerOpen { - height: auto; - padding-bottom: 30px; -} - -.optionsContainerClosed { - height: 0; - overflow: hidden; -} - -.hasBullets { - padding-left: 26px; -} - -.twoColumns { - @media (--viewportMedium) { - column-count: 2; - } -} - -.optionBorder, -.optionBorderSelected { - position: absolute; - height: calc(100% - 12px); - top: 4px; - left: -24px; - transition: width var(--transitionStyleButton); -} - -/* left animated "border" like hover element */ -.optionBorder { - width: 0; - background-color: var(--matterColorDark); -} - -/* left static border for selected element */ -.optionBorderSelected { - width: 8px; - background-color: var(--matterColorDark); -} - -.optionBullet, -.optionBulletSelected { - position: absolute; - left: -5px; - top: 13px; - width: 8px; - height: 8px; - border-radius: 4px; - background-color: var(--marketplaceColor); - transition: opacity var(--transitionStyleButton); -} - -/* left animated "border" like hover element */ -.optionBullet { - opacity: 0; -} - -/* left static border for selected element */ -.optionBulletSelected { - opacity: 1; -} - -.option { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - font-size: 18px; - color: var(--matterColor); - - /* Layout */ - display: block; - position: relative; - margin: 0; - padding: 4px 0 8px 20px; - - /* Override button styles */ - outline: none; - border: none; - cursor: pointer; - - &:focus, - &:hover { - color: var(--matterColorDark); - } - - &:hover .menuItemBorder { - width: 6px; - } -} - -.optionSelected { - composes: option; - color: var(--matterColorDark); -} - -.clearButton { - @apply --marketplaceH5FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - display: inline; - float: right; - margin-top: 6px; - padding: 0; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - &:focus, - &:hover { - color: var(--matterColor); - } -} diff --git a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.js b/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.js deleted file mode 100644 index 63a085c9..00000000 --- a/src/components/SelectSingleFilterPlain/SelectSingleFilterPlain.js +++ /dev/null @@ -1,121 +0,0 @@ -import React, { Component } from 'react'; -import { arrayOf, bool, func, shape, string } from 'prop-types'; -import classNames from 'classnames'; -import { FormattedMessage } from 'react-intl'; - -import css from './SelectSingleFilterPlain.css'; - -class SelectSingleFilterPlain extends Component { - constructor(props) { - super(props); - this.state = { isOpen: true }; - this.selectOption = this.selectOption.bind(this); - this.toggleIsOpen = this.toggleIsOpen.bind(this); - } - - selectOption(option, e) { - const { urlParam, onSelect } = this.props; - onSelect(urlParam, option); - - // blur event target if event is passed - if (e && e.currentTarget) { - e.currentTarget.blur(); - } - } - - toggleIsOpen() { - this.setState({ isOpen: !this.state.isOpen }); - } - - render() { - const { - rootClassName, - className, - label, - options, - initialValue, - twoColumns, - useBullets, - } = this.props; - - const labelClass = initialValue ? css.filterLabelSelected : css.filterLabel; - - const hasBullets = useBullets || twoColumns; - const optionsContainerClass = classNames({ - [css.optionsContainerOpen]: this.state.isOpen, - [css.optionsContainerClosed]: !this.state.isOpen, - [css.hasBullets]: hasBullets, - [css.twoColumns]: twoColumns, - }); - - const classes = classNames(rootClassName || css.root, className); - - return ( -
-
- - -
-
- {options.map(option => { - // check if this option is selected - const selected = initialValue === option.key; - const optionClass = hasBullets && selected ? css.optionSelected : css.option; - // menu item selected bullet or border class - const optionBorderClass = hasBullets - ? classNames({ - [css.optionBulletSelected]: selected, - [css.optionBullet]: !selected, - }) - : classNames({ - [css.optionBorderSelected]: selected, - [css.optionBorder]: !selected, - }); - return ( - - ); - })} -
-
- ); - } -} - -SelectSingleFilterPlain.defaultProps = { - rootClassName: null, - className: null, - initialValue: null, - twoColumns: false, - useBullets: false, -}; - -SelectSingleFilterPlain.propTypes = { - rootClassName: string, - className: string, - urlParam: string.isRequired, - label: string.isRequired, - onSelect: func.isRequired, - - options: arrayOf( - shape({ - key: string.isRequired, - label: string.isRequired, - }) - ).isRequired, - initialValue: string, - twoColumns: bool, - useBullets: bool, -}; - -export default SelectSingleFilterPlain; diff --git a/src/components/index.js b/src/components/index.js index 253bf418..cfea1f16 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -103,7 +103,6 @@ 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 SelectSingleFilterPlain } from './SelectSingleFilterPlain/SelectSingleFilterPlain'; export { default as StripeBankAccountTokenInputField } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField'; export { default as TabNav } from './TabNav/TabNav'; export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal';