diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css index c726fdf6..8460c5df 100644 --- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css +++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css @@ -43,6 +43,16 @@ overflow: hidden; } +.hasBullets { + padding-left: 26px; +} + +.twoColumns { + @media (--viewportMedium) { + column-count: 2; + } +} + .optionBorder, .optionBorderSelected { position: absolute; @@ -64,6 +74,28 @@ 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); @@ -79,6 +111,7 @@ /* Override button styles */ outline: none; border: none; + cursor: pointer; &:focus, &:hover { @@ -90,6 +123,11 @@ } } +.optionSelected { + composes: option; + color: var(--matterColorDark); +} + .clearButton { @apply --marketplaceH5FontStyles; font-weight: var(--fontWeightMedium); diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.js b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.js index faa9cd02..f9f70573 100644 --- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.js +++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { string, func, arrayOf, shape } from 'prop-types'; +import { arrayOf, bool, func, shape, string } from 'prop-types'; import classNames from 'classnames'; import { FormattedMessage } from 'react-intl'; @@ -28,13 +28,25 @@ class SelectSingleFilterMobile extends Component { } render() { - const { rootClassName, className, label, options, initialValue } = this.props; + const { + rootClassName, + className, + label, + options, + initialValue, + twoColumns, + useBullets, + } = this.props; const labelClass = initialValue ? css.filterLabelSelected : css.filterLabel; - const optionsContainerClass = this.state.isOpen - ? css.optionsContainerOpen - : css.optionsContainerClosed; + 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); @@ -52,12 +64,21 @@ class SelectSingleFilterMobile extends Component { {options.map(option => { // check if this option is selected const selected = initialValue === option.key; - // menu item border class - const optionBorderClass = selected ? css.optionBorderSelected : css.optionBorder; + 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 (