Merge pull request #129 from CityOfPhiladelphia/test

Test

Author: theronhalsey

.beads/issues.jsonl

@@ -1,4 +1,4 @@
-import { ref, computed, onBeforeMount, type Ref, type ComputedRef } from 'vue'
+import { ref, computed, markRaw, onBeforeMount, type Ref, type ComputedRef } from 'vue'
 import { IconWater, IconCamera } from '@phila/phila-ui-core/icons'
 import { PinboardUtilities } from '@pinboard/ui'
 import type { MapCardProps } from '@phila/phila-ui-cards'
@@ -66,13 +66,13 @@ export function useLocations(): {
 
 function getLocationTags(loc: LocationPanelDTO): NonNullable<MapCardProps['tags']> {
   if (loc.deviceType === 'Camera') {
-    return [{ text: 'Camera', color: 'purple' as const, icon: IconCamera }]
+    return [{ text: 'Camera', color: 'purple' as const, icon: markRaw(IconCamera) }]
   }
   const gaugeValue =
     Number.isNaN(loc.gaugeHeight) || loc.gaugeHeight === -9999.9
       ? 'No data'
       : `${loc.gaugeHeight} ${loc.gaugeHeightUnit}`
-  return [{ text: 'Gauge', color: 'blue' as const, icon: IconWater }, { text: gaugeValue }]
+  return [{ text: 'Gauge', color: 'blue' as const, icon: markRaw(IconWater) }, { text: gaugeValue }]
 }
 
 async function getLocationsProxy(errorMessageRef: Ref) {

apps/oem-flood-finder/frontend/src/composables/useLocations.ts

@@ -10,6 +10,7 @@ app.use(router)
 app.use(i18n)
 app.use(
   createPinboard({
+    appId: 'oem-flood',
     title: '',
     map: {
       center: [-75.12, 39.98],

apps/oem-flood-finder/frontend/src/main.ts

@@ -13,6 +13,7 @@ import {
   MapIconTextPin,
   MapNavigationControl,
   BasemapToggle,
+  GeolocationButton,
   FillLayer,
   MapCheckboxLegend,
   PinboardComposables,
@@ -160,6 +161,10 @@ function handleDeselect(id: string) {
   visitedIds.value.add(id)
 }
 
+function handleGeolocate(data: { latitude: number; longitude: number; accuracy: number }) {
+  userLocation.value = { latitude: data.latitude, longitude: data.longitude }
+}
+
 function asOemLocation(location: PinboardTypes.BasicLocation) {
   return location as OemLocation
 }
@@ -201,6 +206,15 @@ function asOemLocation(location: PinboardTypes.BasicLocation) {
     >
       <MapNavigationControl v-if="!isMobile" position="bottom-right" />
       <BasemapToggle position="top-right" :teleport-to="isMobile ? mobileControlsTarget : null" />
+      <!-- No @error handler by design: GeolocationButton shows its own callout
+           when location is blocked; other geolocation errors are non-blocking
+           since the finder works without location. -->
+      <GeolocationButton
+        :position="isMobile ? 'top-right' : 'bottom-right'"
+        :teleport-to="isMobile ? mobileControlsTarget : undefined"
+        :show-location-marker="false"
+        @located="handleGeolocate"
+      />
 
       <FillLayer
         v-for="id in FLOOD_LAYER_IDS"

apps/oem-flood-finder/frontend/src/views/FinderView.vue

@@ -16,6 +16,7 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
+    "@phila/phila-ui-bottom-sheet": "0.1.0-beta.14",
     "@phila/phila-ui-button": "2.3.0-beta.9",
     "@phila/phila-ui-core": "3.0.0-beta.8",
     "@phila/phila-ui-tags": "0.1.0-beta.9",

apps/primary-care-finder/frontend/package.json

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { PinboardShell, languages } from '@pinboard/ui'
+import { PinboardShell, PinboardComposables, languages } from '@pinboard/ui'
 import '@pinboard/ui/style.css'
+import { BottomSheet } from '@phila/phila-ui-bottom-sheet'
+import { CloseButton } from '@phila/phila-ui-button'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useLocale } from './composables/useLocale'
 
@@ -10,6 +14,73 @@ init()
 
 const feedbackHref =
   'https://www.phila.gov/departments/department-of-public-health/about-us/contact-us/#send-us-a-message'
+
+const infoSheetOpen = ref(false)
+
+function closeInfoSheet() {
+  infoSheetOpen.value = false
+  dragY.value = 0
+}
+
+/* Drag-down-to-dismiss. BottomSheet's built-in drag is snap-point based
+ * and a single snap point ([60]) clamps it to no movement, so we layer
+ * our own pointer tracking on top: translate the sheet to follow the
+ * pointer, dismiss past DRAG_DISMISS_THRESHOLD on release, otherwise
+ * spring back. Clicks (zero delta) pass through. */
+const DRAG_DISMISS_THRESHOLD = 160
+const dragY = ref(0)
+const isDraggingSheet = ref(false)
+let dragStartY = 0
+
+function onSheetPointerDown(e: PointerEvent) {
+  dragStartY = e.clientY
+  dragY.value = 0
+  isDraggingSheet.value = true
+  document.addEventListener('pointermove', onSheetPointerMove)
+  document.addEventListener('pointerup', onSheetPointerUp)
+  document.addEventListener('pointercancel', onSheetPointerUp)
+}
+
+function onSheetPointerMove(e: PointerEvent) {
+  if (!isDraggingSheet.value) return
+  dragY.value = Math.max(0, e.clientY - dragStartY)
+}
+
+function onSheetPointerUp() {
+  if (!isDraggingSheet.value) return
+  isDraggingSheet.value = false
+  document.removeEventListener('pointermove', onSheetPointerMove)
+  document.removeEventListener('pointerup', onSheetPointerUp)
+  document.removeEventListener('pointercancel', onSheetPointerUp)
+  if (dragY.value > DRAG_DISMISS_THRESHOLD) {
+    closeInfoSheet()
+  } else {
+    dragY.value = 0
+  }
+}
+
+const isMobile = PinboardComposables.useIsMobile()
+
+watch(isMobile, (mobile) => {
+  if (!mobile) infoSheetOpen.value = false
+})
+
+const route = useRoute()
+const router = useRouter()
+
+onMounted(async () => {
+  await router.isReady()
+
+  if (route.path === '/' && isMobile.value) {
+    infoSheetOpen.value = true
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointermove', onSheetPointerMove)
+  document.removeEventListener('pointerup', onSheetPointerUp)
+  document.removeEventListener('pointercancel', onSheetPointerUp)
+})
 </script>
 
 <template>
@@ -31,6 +102,28 @@ const feedbackHref =
   >
     <RouterView />
   </PinboardShell>
+
+  <Teleport to="body">
+    <Transition name="scrim-fade">
+      <div v-if="infoSheetOpen" class="info-sheet-scrim" @click="closeInfoSheet" />
+    </Transition>
+    <BottomSheet
+      v-if="infoSheetOpen"
+      v-model="infoSheetOpen"
+      class="info-sheet"
+      :class="{ 'info-sheet--dragging': isDraggingSheet }"
+      :style="{ zIndex: 101, '--drag-y': `${dragY}px` }"
+      :snap-points="[60]"
+      @pointerdown="onSheetPointerDown"
+    >
+      <CloseButton class="info-sheet-close" @click="closeInfoSheet" />
+      <h2 class="has-text-heading-5">{{ t('callout.title') }}</h2>
+      <span class="has-text-body-small">
+        {{ t('callout.message') }}
+        <RouterLink to="/info" @click="closeInfoSheet">{{ t('callout.linkText') }}</RouterLink>
+      </span>
+    </BottomSheet>
+  </Teleport>
 </template>
 
 <style>
@@ -49,4 +142,46 @@ const feedbackHref =
   overflow: visible !important;
   overflow-x: clip !important;
 }
+
+.info-sheet-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.25);
+}
+
+/* Sheet sizes to its content; snap-points value is ignored visually.
+ * --drag-y is set inline by the drag handler; transform-only transition
+ * springs the sheet back when the user releases under threshold, while
+ * keeping height static (animating to auto doesn't work cleanly). */
+.info-sheet .bottom-sheet {
+  height: auto !important;
+  max-height: 90dvh;
+  padding: 0 var(--spacing-m) 50px;
+  transform: translateY(var(--drag-y, 0px));
+  transition: transform 0.25s ease-out !important;
+}
+
+.info-sheet.info-sheet--dragging .bottom-sheet {
+  transition: none !important;
+}
+
+.scrim-fade-leave-active {
+  transition: opacity 0.25s ease-out;
+  pointer-events: none;
+}
+
+.scrim-fade-leave-to {
+  opacity: 0;
+}
+
+.info-sheet-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+}
+
+.info-sheet h2 {
+  margin-bottom: var(--spacing-s);
+}
 </style>

apps/primary-care-finder/frontend/src/App.vue

@@ -2,6 +2,7 @@
 import { PhilaLink } from '@pinboard/ui'
 import { IconPhone, IconLocationDot, IconGlobe } from '@phila/phila-ui-core/icons'
 import type { PrimaryCareLocation } from '@/types'
+import { formatFullAddress } from '@/utilities/formatAddress'
 import LocationTags from './LocationTags.vue'
 
 defineProps<{
@@ -17,22 +18,36 @@ function mapsUrl(location: PrimaryCareLocation): string {
 
 <template>
   <div class="card-content">
-    <strong class="card-heading">{{ location.name }}</strong>
+    <span class="card-heading has-text-label-default">{{ location.name }}</span>
     <span v-if="location.locationCardInfo.subheader" class="card-distance">
       {{ location.locationCardInfo.subheader }}
     </span>
     <LocationTags :location="location" class="card-tags" />
     <div class="card-links">
-      <PhilaLink
-        v-if="location.properties.med_phone_num"
-        :href="`tel:${location.properties.med_phone_num}`"
-        :icon="IconPhone"
-        size="small"
-        class="card-link"
-        @click.stop
-      >
-        {{ location.properties.med_phone_num }}
-      </PhilaLink>
+      <div class="card-links-primary">
+        <PhilaLink
+          v-if="location.properties.med_phone_num"
+          :href="`tel:${location.properties.med_phone_num}`"
+          :icon="IconPhone"
+          size="small"
+          class="card-link"
+          @click.stop
+        >
+          {{ location.properties.med_phone_num }}
+        </PhilaLink>
+        <PhilaLink
+          v-if="location.properties.website"
+          :href="location.properties.website"
+          :icon="IconGlobe"
+          size="small"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="card-link"
+          @click.stop
+        >
+          {{ $t('providerWebsite') }}
+        </PhilaLink>
+      </div>
       <PhilaLink
         v-if="location.properties.address"
         :href="mapsUrl(location)"
@@ -43,19 +58,7 @@ function mapsUrl(location: PrimaryCareLocation): string {
         class="card-link"
         @click.stop
       >
-        {{ location.properties.address }}
-      </PhilaLink>
-      <PhilaLink
-        v-if="location.properties.website"
-        :href="location.properties.website"
-        :icon="IconGlobe"
-        size="small"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="card-link card-link--full"
-        @click.stop
-      >
-        {{ $t('providerWebsite') }}
+        {{ formatFullAddress(location.properties) }}
       </PhilaLink>
     </div>
   </div>
@@ -69,36 +72,52 @@ function mapsUrl(location: PrimaryCareLocation): string {
   gap: 0.25rem;
 }
 
+/* The site name is a span, so it misses the design system's h1-h6 heading
+   balancing. Balance it here to match the detail panel's heading. */
 .card-heading {
-  font-size: var(--Heading-H5-font-heading-5-size);
-  line-height: var(--Heading-H5-font-heading-5-lineheight);
+  text-wrap: balance;
 }
 
 .card-distance {
-  font-size: 0.875rem;
+  font-size: var(--Body-Small-font-body-small-size);
   color: var(--Schemes-On-Surface-Variant, #666);
 }
 
+/* Two columns: the phone + website stack on the left, the address on the right —
+   the address wraps within its column and stays there at every width. */
 .card-links {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  align-items: start;
   justify-items: start;
   gap: 0.25rem 0.5rem;
   margin-top: 0.25rem;
 }
 
+.card-links-primary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+/* The link is a flex row (.phila-link). min-width:0 lets the grid column shrink and
+   flex-start keeps the icon at the top once the text wraps to a second line. */
 .card-link {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 0;
+  align-items: flex-start;
 }
 
-.card-link :deep(.phila-icon-core) {
-  color: var(--Schemes-On-Surface-Low);
+/* Let the link's text (the unclassed span ActionContent renders) wrap within its
+   column instead of forcing the column wider. */
+.card-link :deep(span:not(.phila-icon-core)) {
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
-.card-link--full {
-  grid-column: 1 / -1;
+.card-link :deep(.phila-icon-core) {
+  color: var(--Schemes-On-Surface-Low);
+  flex-shrink: 0;
 }
 
 .card-tags {