feat(TripPlanner): Walking directions UX update

assets/css/_spacing.scss

@@ -72,6 +72,10 @@
 // End Bottom
 
 // Start
+.ps-0 {
+  padding-left: 0;
+}
+
 .ps-5 {
   padding-left: .313rem;
 }

assets/css/_stop-bubbles.scss

@@ -7,17 +7,6 @@ $location-line-width: $space-6;
     .route-branch-indent-start {
       background-color: $color;
     }
-
-    .expand-icon {
-      .horizontal {
-        background-color: rgba($color, .4);
-
-        &::before,
-        &::after {
-          background-color: $color;
-        }
-      }
-    }
   }
 }
 
@@ -27,17 +16,6 @@ $location-line-width: $space-6;
   flex: 1 1 0%;
   overflow: visible; // if set to hidden, site works better in IE10, but then circles are slightly cropped everywhere
   width: 100%;
-
-  &.expanded {
-    .expand-icon {
-      display: none;
-    }
-  }
-}
-
-.route-branch-stop-info-container {
-  display: flex;
-  justify-content: space-between;
 }
 
 .route-branch-stop-prediction {
@@ -147,51 +125,6 @@ $location-line-width: $space-6;
   }
 }
 
-.expand-icon {
-  display: flex;
-  flex: 0 0 $base-spacing;
-  flex-direction: column;
-  justify-content: center;
-  position: relative;
-  width: $base-spacing;
-
-  .horizontal {
-    border-radius: $location-line-width * 2;
-    border-width: 0;
-    flex-basis: $location-line-width;
-    flex-grow: 0;
-    flex-shrink: 0;
-    position: relative;
-    width: $base-spacing;
-
-    &::before,
-    &::after {
-      border-radius: $location-line-width * 2;
-      content: '';
-      height: $location-line-width;
-      position: absolute;
-      transform: rotate(-45deg);
-      width: $base-spacing;
-    }
-
-    &::before {
-      transform-origin: 0 $location-line-width;
-    }
-
-    &::after {
-      transform-origin: $base-spacing 0;
-    }
-  }
-
-  + .route-branch-stop-bubble-line {
-    border-radius: $location-line-width * 2 $location-line-width * 2 0 0;
-
-    &.expanded {
-      border-radius: 0;
-    }
-  }
-}
-
 .route-branch-stop-bubble-line {
   border-width: 0;
   display: none; // hide on non-flex browsers
@@ -212,8 +145,7 @@ $location-line-width: $space-6;
   display: flex;
   flex: 1 1 0%;
   flex-direction: column;
-  margin-bottom: $base-spacing;  // both margin-bottom and padding-bottom are needed on this element
-  padding-bottom: $base-spacing; // to keep the icon properly aligned with the text
+  margin-bottom: $base-spacing;
   width: 60%; // for non-flex browsers
 }
 
@@ -230,14 +162,20 @@ $location-line-width: $space-6;
   }
 }
 
-.toggle-stop-list {
+.toggle-detail-list {
   align-items: center;
   color: $gray-dark;
   display: flex;
   justify-content: space-between;
+  padding-bottom: .75rem;
+  padding-top: .5rem;
   text-align: left;
   width: 100%;
 
+  @include media-breakpoint-down(sm) {
+    padding-right: 0;
+  }
+
   &:hover {
     text-decoration: none;
   }
@@ -247,7 +185,7 @@ $location-line-width: $space-6;
   }
 }
 
-.expand-branch-stop-count {
+.expand-show-details {
   color: $brand-primary;
 
   &:hover {

assets/css/_trip-plan.scss

@@ -49,15 +49,6 @@
   }
 }
 
-.trip-plan-itinerary-container {
-  margin-top: $space-12;
-
-  .toggle-stop-list {
-    padding-bottom: $space-6;
-    text-decoration: none;
-  }
-}
-
 .itinerary-accessible {
   background-color: $gray-lightest;
   border-radius: $border-radius $border-radius 0 0;
@@ -68,108 +59,10 @@
   padding-top: $space-4;
 }
 
-.trip-plan-itinerary-header {
-  align-items: center;
-  border: $border-width solid $brand-primary;
-  border-radius: $border-radius;
-  display: flex;
-  padding: calc(#{$base-spacing} / 2) $space-16;
-
-  &:not(.collapsed) {
-    background-color: $brand-primary-darkest;
-    border-radius: $border-radius $border-radius 0 0;
-    color: $white;
-  }
-
-  &.collapsed:not(:hover) {
-    .fa-angle-right {
-      color: $gray-light;
-    }
-
-    .itinerary-has-alerts-icon,
-    .trip-plan-itinerary-length-distance {
-      color: $gray-dark;
-    }
-  }
-
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:hover {
-    background-color: $brand-primary-lightest;
-    color: $gray-dark;
-    text-decoration: none;
-  }
-}
-
-.trip-plan-itinerary-summary {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-}
-
-.trip-plan-itinerary-accessibility {
-  @include icon-size-inline(1em);
-
-  [class*='c-svg__icon'] {
-    margin-right: calc(#{$base-spacing} / 4);
-  }
-}
-
-.trip-plan-itinerary-legs {
-  @include icon-size-inline(1.5em, .1875em);
-  align-items: center;
-  display: flex;
-  flex: 1 1 auto;
-
-  .fa-angle-right {
-    margin-left: calc(#{$base-spacing} / 4);
-    margin-right: calc(#{$base-spacing} / 4);
-  }
-}
-
-.trip-plan-itinerary-length {
-  align-items: center;
-  display: flex;
-  flex: 0 1 auto;
-  margin-right: calc(#{$base-spacing} / 2);
-}
-
-.trip-plan-itinerary-length-time {
-  flex: 0 0 auto;
-  font-weight: bold;
-}
-
-.trip-plan-itinerary-length-distance {
-  flex: 0 0 auto;
-  font-size: .875rem;
-  line-height: 1.125rem;
-  margin-left: $space-12;
-  white-space: nowrap;
-
-  g {
-    fill: currentColor;
-  }
-}
-
 .itinerary-has-alerts-icon {
   margin-left: $space-8;
 }
 
-.trip-plan-itinerary-expand {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.trip-plan-itinerary-body {
-  border: $border;
-  border-radius: 0 0 $border-radius $border-radius;
-  padding: 0 $space-16;
-}
-
 .trip-plan-map {
   height: $base-spacing * 31.5;
   margin-bottom: $base-spacing;
@@ -199,12 +92,6 @@
   }
 }
 
-.itinerary-has-alerts-text {
-  background-color: $gray-lightest;
-  margin-bottom: $base-spacing;
-  padding: $base-spacing;
-}
-
 .trip-plan-related-links {
   @include icon-size-inline(1em);
 
@@ -244,22 +131,22 @@
   width: 100%;
 }
 
-.itinerary-transfer-row-label {
-  font-weight: bold;
-}
-
 .itinerary-instruction {
   display: inline-block;
   max-width: 75%;
   padding-right: $space-8;
 }
 
 .itinerary-step {
-  border-bottom: $border;
   flex: 1 1 0%;
   margin-bottom: $space-6;
   padding-bottom: $space-6;
   width: 100%;
+
+  &--border {
+    border-bottom: $border;
+  }
+
 }
 
 .itinerary-stop {

assets/css/_typography.scss

@@ -147,3 +147,7 @@ $base-line-height: 1.275;
 .font-helvetica-neue {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
+.text-wrap {
+  text-wrap: wrap;
+}

assets/js/stop-bubbles.js

@@ -1,24 +1,30 @@
 export default function stopBubbles($) {
   $ = $ || window.jQuery;
 
-  function toggleStopList(e) {
-    const targetId = $(e.target).attr("id");
-    const clickedLink = $("[data-target='#" + targetId + "']");
-
-    toggleArrow(clickedLink);
-    toggleBranch(clickedLink);
-  }
-
   function toggleArrow(link) {
     link.find(".fa").toggleClass("fa-angle-down fa-angle-up");
   }
 
+  function toggleShowHide(link) {
+    const text = link.find(".expand-show-details").text()
+    link.find(".expand-show-details").text(text.includes("Show Details") ? "Hide Details" : "Show Details")
+  }
+
   function toggleBranch(link) {
     const branch = link.data("target-branch");
     $("[data-branch='" + branch + "']").toggleClass("expanded");
     link.parents(".route-branch-stop").toggleClass("expanded");
   }
 
+  function toggleStopList(e) {
+    const targetId = $(e.target).attr("id");
+    const clickedLink = $("[data-target='#" + targetId + "']");
+
+    toggleArrow(clickedLink);
+    toggleBranch(clickedLink);
+    toggleShowHide(clickedLink);
+  }
+
   $(document).on(
     "hide.bs.collapse show.bs.collapse",
     ".collapse.stop-list",

lib/dotcom/trip_plan/itinerary_row.ex

@@ -37,7 +37,9 @@ defmodule Dotcom.TripPlan.ItineraryRow do
             transit?: false,
             steps: [],
             additional_routes: [],
-            alerts: []
+            alerts: [],
+            distance: 0.0,
+            duration: 0
 
   @type t :: %__MODULE__{
           stop: name_and_id,
@@ -47,7 +49,9 @@ defmodule Dotcom.TripPlan.ItineraryRow do
           departure: DateTime.t(),
           steps: [step],
           additional_routes: [Route.t()],
-          alerts: [Alerts.Alert.t()]
+          alerts: [Alerts.Alert.t()],
+          distance: Float.t(),
+          duration: Integer.t()
         }
 
   def route_id(%__MODULE__{route: %Route{id: id}}), do: id
@@ -75,7 +79,9 @@ defmodule Dotcom.TripPlan.ItineraryRow do
       trip: trip,
       departure: leg.start,
       steps: get_steps(leg.mode, deps.stop_mapper, next_leg),
-      additional_routes: get_additional_routes(route, trip, leg, stop, deps)
+      additional_routes: get_additional_routes(route, trip, leg, stop, deps),
+      duration: leg.duration,
+      distance: leg.distance
     }
   end