refactor(TripPlannerForm): use LiveComponent

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,4 +1,5 @@
 // TailwindCSS
+@import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 

assets/js/algolia-result.js

@@ -484,7 +484,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("");
       });