feat(search): enable swap independently of via points

app/component/OriginDestinationBar.js

@@ -148,7 +148,6 @@ class OriginDestinationBar extends React.Component {
           refPoint={refPoint}
           originPlaceHolder="search-origin-index"
           destinationPlaceHolder="search-destination-index"
-          showMultiPointControls={this.context.config.viaPointsEnabled}
           viaPoints={this.props.viaPoints}
           updateViaPoints={this.updateViaPoints}
           addAnalyticsEvent={addAnalyticsEvent}
@@ -171,6 +170,8 @@ class OriginDestinationBar extends React.Component {
           }
           modeSet={this.props.modeSet}
           onFocusChange={() => {}}
+          showSwapControl
+          showViapointControl={this.context.config.viaPointsEnabled}
           filterResults={filter}
         />{' '}
       </div>

app/component/WithSearchContext.js

@@ -41,15 +41,15 @@ export default function withSearchContext(
       onGeolocationStart: PropTypes.func,
       fromMap: PropTypes.string,
       isMobile: PropTypes.bool,
-      showMultiPointControls: PropTypes.bool,
       favouriteContext: PropTypes.bool,
+      showViapointControl: PropTypes.bool,
     };
 
     static defaultProps = {
       onGeolocationStart: null,
       fromMap: undefined,
       isMobile: false,
-      showMultiPointControls: false,
+      showViapointControl: false,
     };
 
     constructor(props) {
@@ -261,7 +261,7 @@ export default function withSearchContext(
         return this.renderSelectFromMapModal(fromMap);
       }
 
-      const viaProps = this.props.showMultiPointControls
+      const viaProps = this.props.showViapointControl
         ? { handleViaPointLocationSelected: this.onSelect }
         : {};
       return (

digitransit-component/packages/digitransit-component-autosuggest-panel/README.md

@@ -81,10 +81,9 @@ const sources = ['Favourite', 'History', 'Datasource'] // Defines where you are
    destination={destination} // Selected destination point
    originPlaceHolder={'Give origin'} // Optional Give string shown initially inside origin search field
    destinationPlaceHolder={'Give destination'} // Optional Give string shown initally inside destination search field
-   showMultiPointControls={false} // Optional. If true, controls for via points and reversing is being shown.
-   initialViaPoints={[]} // Optional.  If showMultiPointControls is set to true, pass initial via points to the panel. Currently no default implementation is given.
-   updateViaPoints={() => return []} // Optional. If showMultiPointControls is set to true, define how to update your via point list with this function. Currenlty no default implementation is given.
-   swapOrder={() => return null} // Optional. If showMultiPointControls is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given.
+   initialViaPoints={[]} // Optional.  If showViapointControl is set to true, pass initial via points to the panel. Currently no default implementation is given.
+   updateViaPoints={() => return []} // Optional. If showViapointControl is set to true, define how to update your via point list with this function. Currenlty no default implementation is given.
+   swapOrder={() => return null} // Optional. If showViapointControl is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given.
    searchContext={searchContext}
    getAutoSuggestIcons={getAutoSuggestIcons}
    onSelect={this.onSelect}

digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/styles.scss

@@ -150,7 +150,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
   justify-content: center;
   text-align: center;
   max-height: 50px;
-  cursor: pointer;
+  min-width: var(--width);
   & + .itinerary-search-control {
     border-left: 1px solid rgba(151, 151, 151, 0.2);
   }
@@ -160,6 +160,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     align-items: center;
     height: 100%;
     min-width: 40px;
+    cursor: pointer;
     svg {
       width: 19px;
       height: 17px;
@@ -171,6 +172,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     align-items: center;
     height: 100%;
     min-width: 40px;
+    cursor: pointer;
     svg {
       width: 20px;
       height: 22px;
@@ -182,6 +184,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     align-items: center;
     height: 100%;
     min-width: 47px;
+    cursor: pointer;
     svg {
       width: 18px;
       height: 19px;
@@ -194,6 +197,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle,
     height: 100%;
     max-height: 44px;
     min-width: 40px;
+    cursor: pointer;
     svg {
       width: 14px;
       height: 14px;

digitransit-component/packages/digitransit-component-autosuggest-panel/src/index.js

@@ -38,11 +38,14 @@ const ItinerarySearchControl = ({
   enabled,
   onClick,
   onKeyPress,
+  wide,
   ...rest
-}) =>
-  enabled &&
-  onClick && (
-    <div className={styles['itinerary-search-control']}>
+}) => (
+  <div
+    className={styles['itinerary-search-control']}
+    style={{ '--width': wide ? '47px' : '40px' }}
+  >
+    {onClick && enabled && (
       <div
         {...rest}
         className={className}
@@ -53,15 +56,17 @@ const ItinerarySearchControl = ({
       >
         {children}
       </div>
-    </div>
-  );
+    )}
+  </div>
+);
 
 ItinerarySearchControl.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string.isRequired,
   enabled: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   onKeyPress: PropTypes.func.isRequired,
+  wide: PropTypes.bool,
 };
 
 /**
@@ -134,10 +139,9 @@ ItinerarySearchControl.propTypes = {
  *    destination={destination} // Selected destination point
  *    originPlaceHolder={'Give origin'} // Optional Give string shown initially inside origin search field
  *    destinationPlaceHolder={'Give destination'} // Optional Give string shown initally inside destination search field
- *    showMultiPointControls={false} // Optional. If true, controls for via points and reversing is being shown.
- *    initialViaPoints={[]} // Optional.  If showMultiPointControls is set to true, pass initial via points to the panel. Currently no default implementation is given.
- *    updateViaPoints={() => return []} // Optional. If showMultiPointControls is set to true, define how to update your via point list with this function. Currenlty no default implementation is given.
- *    swapOrder={() => return null} // Optional. If showMultiPointControls is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given.
+ *    initialViaPoints={[]} // Optional.  If showViapointControl is set to true, pass initial via points to the panel. Currently no default implementation is given.
+ *    updateViaPoints={() => return []} // Optional. If showViapointControl is set to true, define how to update your via point list with this function. Currenlty no default implementation is given.
+ *    swapOrder={() => return null} // Optional. If showViapointControl is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given.
  *    searchContext={searchContext}
  *    getAutoSuggestIcons={getAutoSuggestIcons}
  *    onSelect={this.onSelect}
@@ -151,13 +155,14 @@ ItinerarySearchControl.propTypes = {
  *    originMobileLabel="Origin label" // Optional. Custom label text for origin field on mobile.
  *    destinationMobileLabel="Destination label" // Optional. Custom label text for destination field on mobile.
  *    handleFocusChange={() => {}} // Optional. If defined overrides default onFocusChange behaviour
+ *    showSwapControl={false} // Optional.
+ *    showViapointControl={false} // Optional.
  */
 class DTAutosuggestPanel extends React.Component {
   static propTypes = {
     appElement: PropTypes.string.isRequired,
     origin: PropTypes.object.isRequired,
     destination: PropTypes.object.isRequired,
-    showMultiPointControls: PropTypes.bool,
     originPlaceHolder: PropTypes.string,
     destinationPlaceHolder: PropTypes.string,
     viaPoints: PropTypes.arrayOf(PropTypes.object),
@@ -189,11 +194,12 @@ class DTAutosuggestPanel extends React.Component {
     showScroll: PropTypes.bool,
     onFocusChange: PropTypes.func,
     isEmbedded: PropTypes.bool,
+    showSwapControl: PropTypes.bool,
+    showViapointControl: PropTypes.bool,
   };
 
   static defaultProps = {
     viaPoints: [],
-    showMultiPointControls: false,
     originPlaceHolder: 'give-origin',
     destinationPlaceHolder: 'give-destination',
     swapOrder: undefined,
@@ -217,6 +223,8 @@ class DTAutosuggestPanel extends React.Component {
     showScroll: false,
     onFocusChange: undefined,
     isEmbedded: false,
+    showSwapControl: false,
+    showViapointControl: false,
   };
 
   constructor(props) {
@@ -394,7 +402,6 @@ class DTAutosuggestPanel extends React.Component {
 
   render = () => {
     const {
-      showMultiPointControls,
       origin,
       searchPanelText,
       searchContext,
@@ -404,6 +411,8 @@ class DTAutosuggestPanel extends React.Component {
       destinationMobileLabel,
       fontWeights,
       onFocusChange,
+      showSwapControl,
+      showViapointControl,
     } = this.props;
     const { activeSlackInputs } = this.state;
     const slackTime = this.getSlackTimeOptions();
@@ -420,7 +429,6 @@ class DTAutosuggestPanel extends React.Component {
           styles['autosuggest-panel'],
           {
             small: this.props.isMobile,
-            showMultiPointControls,
           },
         ])}
         style={{
@@ -472,17 +480,19 @@ class DTAutosuggestPanel extends React.Component {
             showScroll={this.props.showScroll}
             isEmbedded={this.props.isEmbedded}
           />
-          <ItinerarySearchControl
-            className={styles.opposite}
-            enabled={showMultiPointControls}
-            onClick={() => this.handleSwapOrderClick()}
-            onKeyPress={e =>
-              this.isKeyboardSelectionEvent(e) && this.handleSwapOrderClick()
-            }
-            aria-label={i18next.t('swap-order-button-label')}
-          >
-            <Icon img="opposite" color={this.props.color} />
-          </ItinerarySearchControl>
+          {(showSwapControl || showViapointControl) && (
+            <ItinerarySearchControl
+              className={styles.opposite}
+              enabled={showSwapControl}
+              onClick={() => this.handleSwapOrderClick()}
+              onKeyPress={e =>
+                this.isKeyboardSelectionEvent(e) && this.handleSwapOrderClick()
+              }
+              aria-label={i18next.t('swap-order-button-label')}
+            >
+              <Icon img="opposite" color={this.props.color} />
+            </ItinerarySearchControl>
+          )}
         </div>
         {viaPoints.length === 0 && (
           <div className={styles['rectangle-container']}>
@@ -555,7 +565,7 @@ class DTAutosuggestPanel extends React.Component {
                   </div>
                   <ItinerarySearchControl
                     className={styles['add-via-point-slack']}
-                    enabled={showMultiPointControls}
+                    enabled={this.props.showViapointControl}
                     onClick={() => this.handleToggleViaPointSlackClick(i)}
                     onKeyPress={e =>
                       this.isKeyboardSelectionEvent(e) &&
@@ -567,6 +577,7 @@ class DTAutosuggestPanel extends React.Component {
                         : 'add-via-duration-button-label-close',
                       { index: i + 1 },
                     )}
+                    wide
                   >
                     <Icon img="time" color={this.props.color} />
                   </ItinerarySearchControl>
@@ -609,7 +620,7 @@ class DTAutosuggestPanel extends React.Component {
               </div>
               <ItinerarySearchControl
                 className={styles['remove-via-point']}
-                enabled={showMultiPointControls}
+                enabled={this.props.showViapointControl}
                 onClick={() => this.handleRemoveViaPointClick(i)}
                 onKeyPress={e =>
                   this.isKeyboardSelectionEvent(e) &&
@@ -658,12 +669,12 @@ class DTAutosuggestPanel extends React.Component {
             showScroll={this.props.showScroll}
             isEmbedded={this.props.isEmbedded}
           />
-          {showMultiPointControls && (
+          {(showSwapControl || showViapointControl) && (
             <ItinerarySearchControl
               className={cx(styles['add-via-point'], styles.more, {
                 collapsed: viaPoints.length > 4,
               })}
-              enabled={showMultiPointControls}
+              enabled={showViapointControl}
               onClick={() => this.handleAddViaPointClick()}
               onKeyPress={e =>
                 this.isKeyboardSelectionEvent(e) &&