Search panel visual changes (#1887)

* feat: styling of search input and submit button

* feat: styling of search radio buttons

* feat: horizontal separator and other misc styling

* feat: initial styling of previous searches

* feat: hover and focus for recent searches

* feat: focus and hover states for search input clear button

* feat: styling of "no search results" state

* refactor: use table for card properties list

* feat: initial pass at using universal card for search results

* fix: spacing adjustments to search panel

* fix: allow title row of card to grow to accommodate multiple lines

* feat: make card component support optional left-hand icon component

* feat: display bus icon in search results card

* fix: CSS spacing issues

* feat: drawer tab for search panel

* feat: highlight search terms in results

Also refactors Card component to use PropertiesList

* test: remove obsolete snapshot test

* fix: handle shuttles in search results

* refactor(test): remove unneeded testid for drawer tab

* feat: selecting / unselecting a result hides / shows search panel

* feat: card improvements for selected state and misc styling

* feat: give selected state to relevant card in search results

* feat: card styling updates based on new designs

* fix: address some styling glitches

* feat: updated styling of mobile view toggle button

* feat: backport CSS changes to _search_page.scss

* fix: improve ARIA handling of card selection state + tests

* fix(tests): update snapshots

* refactor: leaflet z-index constant

* refactor: make use of RouteVariantName component

* refactor: use ReactElement instead of JSX.Element

* fix: responding to review comments

* fix: add box-shadow for card

* feat: drop shadow for search panel

* feat: widen search panel

* feat: omit operator first name from search panel card

* fix: correct background colors for card selected states

* feat: hide scrollbar on search panel when collapsed

assets/css/_card.scss

@@ -7,13 +7,7 @@
  border-radius: 0.5rem;
  padding: 0.3125rem 0.3125rem 1rem 1rem;
 
- &:hover:not(.m-card--no-focus-or-hover) {
- box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
- }
-
- &:focus:not(.m-card--no-focus-or-hover) {
- box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
- }
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
 
  button {
  text-align: start;
@@ -22,16 +16,27 @@
 }
 
 .m-card__left {
- display: flex;
- flex-direction: column;
  flex-grow: 1;
  position: relative;
+ display: grid;
+ grid-template-areas: "icon main-contents";
+ grid-template-columns: min-content 1fr;
 
  &:last-child {
  padding-right: 0.3125rem;
  }
 }
 
+.m-card__icon {
+ grid-area: icon;
+}
+
+.m-card__left-content {
+ display: flex;
+ flex-direction: column;
+ grid-area: main-contents;
+}
+
 .m-card__right {
  min-width: 2.5rem;
 
@@ -50,7 +55,7 @@
  justify-content: space-between;
  align-items: center;
  width: 100%;
- height: 1.625rem;
+ min-height: 1.625rem;
  margin-top: 0.3125rem;
 }
 
@@ -94,16 +99,50 @@
  color: $color-gray-700;
 }
 
-.m-card__properties {
- margin-top: 1rem;
- margin-bottom: 0;
+.m-card__contents .m-properties-list {
+ padding: 0;
 
- li {
- font-size: 0.875rem;
- line-height: 0.875rem;
+ .m-properties-list__table {
+ &:not(:first-child) {
+ margin-top: 1rem;
+ }
 
- &:not(:last-child) {
- padding-bottom: 0.5rem;
+ &:first-child {
+ margin-top: 0.375rem;
+ }
+
+ margin-bottom: 0;
+
+ tr {
+ font-size: 0.875rem;
+ line-height: 0.875rem;
+ vertical-align: top;
+
+ &:not(:last-child) th,
+ td {
+ padding-bottom: 0.5rem;
+ }
+
+ td .highlighted {
+ background-color: $color-eggplant-200;
+ }
+
+ .m-properties-list__property-label {
+ color: $color-gray-700;
+ text-align: left;
+ text-transform: initial;
+ font-size: inherit;
+ }
+
+ .m-properties-list__property-value {
+ color: $color-gray-600;
+ }
+ }
+
+ .m-properties-list__property--last-login
+ .m-properties-list__property-value {
+ color: $color-gray-600;
+ font-size: inherit;
  }
  }
 }
@@ -126,12 +165,12 @@
  background-color: $color-kiwi-100;
  border: 1px solid $color-kiwi-400;
 
- &:hover:not(.m-card--no-focus-or-hover) {
+ &:hover:not(.m-card--no-focus-or-hover):not(.m-card--selected) {
  background-color: $white;
  border: 1px solid $color-kiwi-300;
  }
 
- &:focus:not(.m-card--no-focus-or-hover) {
+ &:focus-within:not(.m-card--no-focus-or-hover) {
  background-color: $color-kiwi-200;
  border: 2px solid $color-kiwi-400;
  }
@@ -141,7 +180,7 @@
  background-color: $color-gray-50;
  border: 1px solid $color-gray-400;
 
- &:hover:not(.m-card--no-focus-or-hover) {
+ &:hover:not(.m-card--no-focus-or-hover):not(.m-card--selected) {
  background-color: $color-gray-50;
  border: 1px solid $color-kiwi-300;
  }
@@ -156,6 +195,26 @@
  &.m-card {
  background-color: $white;
  border: 1px solid $color-gray-400;
+
+ &:hover:not(.m-card--no-focus-or-hover):not(.m-card--selected) {
+ background-color: $color-gray-100;
+ border: 1px solid $color-gray-300;
+ }
+
+ &:focus-within:not(.m-card--no-focus-or-hover):not(.m-card--selected) {
+ background-color: $color-gray-100;
+ border: 2px solid $color-eggplant-500;
+ }
+
+ &.m-card--selected {
+ background-color: $color-eggplant-100;
+ border: 1px solid $color-eggplant-500;
+ }
+
+ &:focus-within:not(.m-card--no-focus-or-hover).m-card--selected {
+ background-color: $color-eggplant-100;
+ border: 2px solid $color-eggplant-500;
+ }
  }
 
  &.m-card__title {

assets/css/_leaflet.scss

@@ -1,3 +1,6 @@
+// From here: https://github.com/Leaflet/Leaflet/blob/5c29d615563835d373a51b91fc3513a17907da96/dist/leaflet.css#L87
+$leaflet-pane-z-index: 400;
+
 .leaflet-container {
  width: 100%;
  height: 100%;

assets/css/_map_page.scss

@@ -1,3 +1,5 @@
+$map-page-search-panel-width: 24rem;
+
 .m-map-page {
  display: flex;
  flex: 1 1 auto;
@@ -13,40 +15,89 @@
  position: relative;
 }
 
+.m-map-page__input {
+ padding: 0 1.5625rem;
+}
+
 .m-map-page__input-and-results {
- background-color: $color-bg-base;
+ background-color: $color-gray-300;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
- width: 22rem;
-}
+ gap: 1rem;
+ width: $map-page-search-panel-width;
+ height: 100%;
+ box-sizing: border-box;
+ position: absolute;
+ z-index: #{$leaflet-pane-z-index + 100};
 
-.m-map-page__input,
-.m-search-display {
- padding: 1.5rem 1.1875rem;
+ padding: 1.25rem 0 0 0;
+
+ transition: $transition-slide;
+
+ filter: drop-shadow(2px 0px 10px rgba(0, 0, 0, 0.2));
+
+ hr {
+ height: 1px;
+ background-color: $color-gray-100;
+ border: none;
+ width: calc(100% - 2 * 1.5625rem);
+ margin: 0 1.5625rem;
+ }
+
+ &.visible {
+ left: 0;
+ }
+
+ &.hidden {
+ left: calc(-1 * #{$map-page-search-panel-width} + 1rem);
+
+ .m-search-display {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+ }
+ }
 }
 
-.m-map-page__input {
- border-bottom: 1px solid $white;
+.m-map-page__input-and-results .c-drawer-tab {
+ left: 100%;
+ top: 0;
+ background-color: $color-gray-300;
+ z-index: #{$leaflet-pane-z-index + 100};
+
+ .c-drawer-tab__tab-button {
+ &:focus,
+ &:hover {
+ color: $color-eggplant-500;
+ }
+ }
 }
 
 .m-map-page__toggle-mobile-display-button {
- @include button-text;
  display: none;
- font-size: 0.875rem;
  margin: 0.5rem auto 0;
 }
 
 .m-search-display {
  flex: 1 1 auto;
  overflow-y: scroll;
+ padding: 0.625rem 1rem 0 1rem;
 }
 
 @media screen and (max-width: $mobile-max-width) {
  .m-map-page {
  flex-direction: column;
  }
 
+ .m-map-page__input-and-results .c-drawer-tab {
+ display: none;
+ }
+
  .m-map-page--show-list {
  .m-map-page__input-and-results {
  flex: 1 1 auto;
@@ -73,7 +124,8 @@
 
  .m-map-page__input-and-results {
  box-sizing: border-box;
- width: auto;
+ width: 100%;
+ position: relative;
  }
 
  .m-map-page__toggle-mobile-display-button {

assets/css/_recent_searches.scss

@@ -1,15 +1,19 @@
 .m-recent-searches {
- background-color: $color-bg-base;
  flex: 1 1 auto;
  width: 100%;
-}
 
-.m-recent-searches__heading {
- @include font-label;
+ ul {
+ margin-top: 0.875rem;
+ margin-bottom: 0;
+
+ li:not(:last-child) {
+ margin-bottom: 0.75rem;
+ }
+ }
 }
 
-.m-recent-searches__button {
- @include button-text;
- display: block;
- margin-top: 1rem;
+.m-recent-searches__heading {
+ font-size: var(--font-size-s);
+ font-weight: var(--font-weight-bold);
+ color: var(--font-color-on-light-800);
 }