Add props useBullets and twoColumns to SelectSingleFilterMobile

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

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 (
               <button
                 key={option.key}
-                className={css.option}
+                className={optionClass}
                 onClick={() => this.selectOption(option.key)}
               >
                 <span className={optionBorderClass} />
@@ -75,6 +96,8 @@ SelectSingleFilterMobile.defaultProps = {
   rootClassName: null,
   className: null,
   initialValue: null,
+  twoColumns: false,
+  useBullets: false,
 };
 
 SelectSingleFilterMobile.propTypes = {
@@ -91,6 +114,8 @@ SelectSingleFilterMobile.propTypes = {
     })
   ).isRequired,
   initialValue: string,
+  twoColumns: bool,
+  useBullets: bool,
 };
 
 export default SelectSingleFilterMobile;