refactor(TripPlannerForm): use LiveComponent (#2173)

.dockerignore

@@ -8,8 +8,6 @@ deps
 erl_crash.dump
 build.sh
 deploy.sh
-/priv/static/*
-!/priv/static/icon-svg/
 aws
 dotcom-build.zip
 bin

.gitignore

@@ -49,10 +49,9 @@ node_modules
 /**/react_renderer/dist
 
 # Since we are building assets from assets,
-# we ignore priv/static. You may want to comment
-# this depending on your deployment strategy.
-/priv/static/*
-!/priv/static/icon-svg/
+# we ignore certain directories in priv/static.
+/priv/static/css
+/priv/static/js
 
 # The config/prod.secret.exs file by default contains sensitive
 # data and you should not commit it into version control.

assets/css/_form.scss

@@ -33,6 +33,7 @@
   width: 100%;
 
   &:focus {
+    box-shadow: none;
     outline: 0;
   }
 }

assets/css/_spacing.scss

@@ -1,201 +1,201 @@
-.w-100 {
+.u-w-100 {
   width: 100%;
 }
 
 //// PADDING
-.p-16 {
+.u-p-16 {
   padding: 1rem;
 }
 
 // Top
-.pt-2 {
+.u-pt-2 {
   padding-top: .125rem;
 }
 
-.pt-4 {
+.u-pt-4 {
   padding-top: .25rem;
 }
 
-.pt-8 {
+.u-pt-8 {
   padding-top: .5rem;
 }
 
-.pt-10 {
+.u-pt-10 {
   padding-top: .625rem;
 }
 
-.pt-14 {
+.u-pt-14 {
   padding-top: .875rem;
 }
 
-.pt-16 {
+.u-pt-16 {
   padding-top: 1rem;
 }
 
-.pt-18 {
+.u-pt-18 {
   padding-top: 1.125rem;
 }
 
-.pt-24 {
+.u-pt-24 {
   padding-top: 1.5rem;
 }
 
-.pt-40 {
+.u-pt-40 {
   padding-top: 2.5rem;
 }
 // End Top
 
 // Bottom
-.pb-8 {
+.u-pb-8 {
   padding-bottom: .5rem;
 }
 
-.pb-10 {
+.u-pb-10 {
   padding-bottom: .625rem;
 }
 
-.pb-14 {
+.u-pb-14 {
   padding-bottom: .875rem;
 }
 
-.pb-16 {
+.u-pb-16 {
   padding-bottom: 1rem;
 }
 
-.pb-18 {
+.u-pb-18 {
   padding-bottom: 1.125rem;
 }
 
-.pb-40 {
+.u-pb-40 {
   padding-bottom: 2.5rem;
 }
 // End Bottom
 
 // Start
-.ps-0 {
+.u-ps-0 {
   padding-left: 0;
 }
 
-.ps-5 {
+.u-ps-5 {
   padding-left: .313rem;
 }
 
-.ps-8 {
+.u-ps-8 {
   padding-left: .5rem;
 }
 
-.ps-16 {
+.u-ps-16 {
   padding-left: 1rem;
 }
 // End Start
 
 // End
-.pe-5 {
+.u-pe-5 {
   padding-right: .313rem;
 }
 
-.pe-8 {
+.u-pe-8 {
   padding-right: .5rem;
 }
 
-.pe-16 {
+.u-pe-16 {
   padding-right: 1rem;
 }
 // End End
 //// End PADDING
 
 //// MARGINS
 
-.m-8 {
+.u-m-8 {
   margin: .5rem;
 }
 
-.m-16 {
+.u-m-16 {
   margin: 1rem;
 }
 
-.m-24 {
+.u-m-24 {
   margin: 1.5rem;
 }
 
 // Negative margins need to be turned on in bootstrap 5
-.m-n24 {
+.u-m-n24 {
   margin: -1.5rem;
 }
 
 // Top
-.mt-n5 {
+.u-mt-n5 {
   margin-top: -.313rem;
 }
 
-.mt-6 {
+.u-mt-6 {
   margin-top: .375rem;
 }
 
-.mt-8 {
+.u-mt-8 {
   margin-top: .5rem;
 }
 
-.mt-10 {
+.u-mt-10 {
   margin-top: .625rem;
 }
 
-.mt-12 {
+.u-mt-12 {
   margin-top: .75rem;
 }
 
-.mt-16 {
+.u-mt-16 {
   margin-top: 1rem;
 }
 
-.mt-24 {
+.u-mt-24 {
   margin-top: 1.5rem;
 }
 
-.mt-n8 {
+.u-mt-n8 {
   margin-top: -.5rem;
 }
 
-.mt-n16 {
+.u-mt-n16 {
   margin-top: -1rem;
 }
 
-.mt-n20 {
+.u-mt-n20 {
   margin-top: -1.25rem;
 }
 // End Top
 
 // Bottom
-.mb-6 {
+.u-mb-6 {
   margin-bottom: .375rem;
 }
 
-.mb-8 {
+.u-mb-8 {
   margin-bottom: .5rem;
 }
 
 // End
-.me-4 {
+.u-me-4 {
   margin-right: .25rem;
 }
 
-.me-5 {
+.u-me-5 {
   margin-right: .313rem;
 }
 
-.me-8 {
+.u-me-8 {
   margin-right: .5rem;
 }
 
-.me-12 {
+.u-me-12 {
   margin-right: .75rem;
 }
 
-.me-14 {
+.u-me-14 {
   margin-right: .875rem;
 }
 
-.me-16 {
+.u-me-16 {
   margin-right: 1rem;
 }
 // End End

assets/css/_stop-card.scss

@@ -439,8 +439,8 @@ $radius: 4px;
     @extend .c-alert-item--low;
     @extend .d-flex;
     @extend .justify-content-center;
-    @extend .m-8;
-    @extend .pb-40;
-    @extend .pt-40;
+    @extend .u-m-8;
+    @extend .u-pb-40;
+    @extend .u-pt-40;
   }
 }

assets/css/_utilities.scss

@@ -251,43 +251,43 @@
 
 // quick margin utilities loosely based off Bootstrap v4
 /* stylelint-disable declaration-no-important */
-.mb-0 {
+.u-mb-0 {
   margin-bottom: 0 !important;
 }
 
-.mb-05 {
+.u-mb-05 {
   margin-bottom: calc(#{$base-spacing} / 2) !important;
 }
 
-.mb-1 {
+.u-mb-1 {
   margin-bottom: $base-spacing !important;
 }
 
-.mb-2 {
+.u-mb-2 {
   margin-bottom: $base-spacing * 2 !important;
 }
 
-.mt-0 {
+.u-mt-0 {
   margin-top: 0 !important;
 }
 
-.mt-05 {
+.u-mt-05 {
   margin-top: calc(#{$base-spacing} / 2) !important;
 }
 
-.mt-1 {
+.u-mt-1 {
   margin-top: $base-spacing !important;
 }
 
-.mt-2 {
+.u-mt-2 {
   margin-top: $base-spacing * 2 !important;
 }
 
-.mt-3 {
+.u-mt-3 {
   margin-top: $base-spacing * 3 !important;
 }
 
-.mr-025 {
+.u-mr-025 {
   margin-right: $base-spacing * .25 !important;
 }
 /* stylelint-enable declaration-no-important */

assets/css/app.scss

@@ -1,6 +1,5 @@
-// TailwindCSS
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+// MBTA METRO
+@import '../../deps/mbta_metro/priv/static/assets/default.css';
 
 ////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////

assets/js/algolia-result.js

@@ -449,11 +449,11 @@ function _sortFeatures(features) {
 
 function _getCommuterRailZone(hit) {
   if (hit.zone) {
-    return [`<span class="c-icon__cr-zone">Zone ${hit.zone}</span>`];
+    return [`<span class="c-icon__cr-zone text-sm">Zone ${hit.zone}</span>`];
   }
   if (hit.icon === "station") {
     // the north/south station popular result
-    return [`<span class="c-icon__cr-zone">Zone 1A</span>`];
+    return [`<span class="c-icon__cr-zone text-sm">Zone 1A</span>`];
   }
   return [];
 }
@@ -482,7 +482,7 @@ function _stopIcons(hit, type) {
           .split(", ")
           .map(
             num =>
-              `<span class="c-icon__bus-pill--small u-bg--bus tw-mr-1">${num}</span>`
+              `<span class="c-icon__bus-pill--small u-bg--bus mr-1">${num}</span>`
           )
           .join("");
       });