Merge branch 'test' into 311-phila-ui-refresh

Author: theronhalsey

apps/oem-flood-finder/cdk/package.json

@@ -11,17 +11,17 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@phila/constructs": "^0.8.0",
-    "aws-cdk-lib": "^2.252.0",
-    "cdk-nag": "^2.38.2",
-    "constructs": "^10.6.0",
-    "source-map-support": "^0.5.21"
+    "@phila/constructs": "catalog:",
+    "aws-cdk-lib": "catalog:",
+    "cdk-nag": "catalog:",
+    "constructs": "catalog:",
+    "source-map-support": "catalog:"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "aws-cdk": "^2.1120.0",
-    "ts-node": "^10.9.0",
-    "typescript": "^6.0.3"
+    "aws-cdk": "catalog:",
+    "ts-node": "catalog:",
+    "typescript": "catalog:"
   }
 }

apps/oem-flood-finder/frontend/package.json

@@ -16,17 +16,14 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@phila/phila-ui-bottom-sheet": "0.1.0-beta.13",
-    "@phila/phila-ui-button": "2.3.0-beta.9",
-    "@phila/phila-ui-charts": "0.1.0-beta.12",
-    "@phila/phila-ui-checkbox": "0.1.1-beta.9",
-    "@phila/phila-ui-collapse-panel": "0.2.0-beta.8",
-    "@phila/phila-ui-core": "3.0.0-beta.8",
-    "@phila/phila-ui-link": "1.1.0-beta.8",
-    "@phila/phila-ui-logo": "0.1.3-beta.8",
-    "@phila/phila-ui-table": "1.0.0-beta.8",
-    "@phila/phila-ui-tabs": "1.0.0-beta.9",
-    "@phila/phila-ui-tags": "0.1.0-beta.9",
+    "@phila/phila-ui-core": "catalog:",
+    "@phila/phila-ui-button": "catalog:",
+    "@phila/phila-ui-tabs": "catalog:",
+    "@phila/phila-ui-tags": "catalog:",
+    "@phila/phila-ui-charts": "catalog:",
+    "@phila/phila-ui-link": "catalog:",
+    "@phila/phila-ui-logo": "catalog:",
+    "@phila/phila-ui-table": "catalog:",
     "@pinboard/ui": "workspace:*",
     "hls.js": "^1.6.15",
     "vue": "catalog:",
@@ -36,10 +33,11 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "npm-run-all2": "^8.0.4",
-    "typescript": "^6.0.3",
-    "vite": "^7.3.1",
-    "vite-plugin-vue-devtools": "^8.0.5"
+    "@vitejs/plugin-vue": "catalog:",
+    "npm-run-all2": "catalog:",
+    "prettier": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:"
   }
 }

apps/oem-flood-finder/frontend/src/App.vue

@@ -1,20 +1,10 @@
 <script setup lang="ts">
-import { PinboardShell, NavbarInfo, PinboardComposables } from '@pinboard/ui'
-import '@pinboard/ui/style.css'
-import { BottomSheet } from '@phila/phila-ui-bottom-sheet'
-import { CloseButton } from '@phila/phila-ui-button'
+import { PinboardShell } from '@pinboard/ui'
 import { useEverbridgeNotifications } from './composables/useEverbridgeNotifications'
 import type { AlertBanner } from './types'
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useTemplateRef,
-  watch,
-  type ComputedRef,
-} from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, type ComputedRef } from 'vue'
+
+const feedbackHref = 'https://phila.formstack.com/forms/oem_flood_monitoring_map_feedback'
 
 const { everbridgeNotifications } = useEverbridgeNotifications(1)
 
@@ -35,92 +25,16 @@ const alertBanner: ComputedRef<AlertBanner | null> = computed(() => {
   }
   return null
 })
-
-const infoSheetOpen = ref(false)
-
-/* Capture-phase click on the wrapper runs before the inner Tooltip's
- * bubble-phase listener, so stopPropagation suppresses the tooltip and
- * we open the bottom sheet instead. */
-function openInfoSheet(event: Event) {
-  event.preventDefault()
-  event.stopPropagation()
-  infoSheetOpen.value = true
-}
-
-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()
-const navbarInfo = useTemplateRef<InstanceType<typeof NavbarInfo>>('navbarInfo')
-
-onMounted(async () => {
-  await router.isReady()
-
-  if (route.path === '/') {
-    if (isMobile.value) {
-      infoSheetOpen.value = true
-    } else {
-      navbarInfo.value?.show()
-    }
-  }
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('pointermove', onSheetPointerMove)
-  document.removeEventListener('pointerup', onSheetPointerUp)
-  document.removeEventListener('pointercancel', onSheetPointerUp)
-})
 </script>
 
 <template>
   <PinboardShell
     title="Flood Monitoring Map"
+    info-title="About this tool"
+    info-message="This map allows residents to keep an eye on water levels in parts of the city and make informed decisions prior to, during, and after a flooding event."
+    info-link-text="Learn more"
+    info-href="resources"
+    :translations="false"
     :logo="{
       variant: 'city',
       layout: 'single-line',
@@ -130,131 +44,9 @@ onBeforeUnmount(() => {
     }"
     :banner-title="alertBanner?.title"
     :banner-message="alertBanner?.body"
+    :feedback-href="feedbackHref"
+    :show-header-tooltip="true"
   >
-    <template #navbar-end>
-      <div v-if="isMobile" class="navbar-info-mobile-wrap" @click.capture.stop="openInfoSheet">
-        <NavbarInfo info-title="About this tool" label="About this tool" />
-      </div>
-      <NavbarInfo v-else ref="navbarInfo" info-title="About this tool" label="About this tool">
-        <span class="has-text-body-small">
-          This map allows residents to keep an eye on water levels in parts of the city and make
-          informed decisions prior to, during, and after a flooding event.
-          <a href="/resources">Learn more</a>
-        </span>
-      </NavbarInfo>
-    </template>
-
-    <template #sub-footer>
-      <a class="sub-footer-link" href="https://www.phila.gov/terms-of-use/">Terms of use</a>
-      <a class="sub-footer-link" href="https://www.phila.gov/open-records-policy/">Right to know</a>
-      <a class="sub-footer-link" href="https://www.phila.gov/privacypolicy/">Privacy Policy</a>
-      <a class="sub-footer-link" href="https://www.phila.gov/accessibility-policy/"
-        >Accessibility</a
-      >
-      <a
-        class="sub-footer-link"
-        target="_blank"
-        href="https://phila.formstack.com/forms/oem_flood_monitoring_map_feedback"
-        >Feedback</a
-      >
-    </template>
-
     <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">About this tool</h2>
-      <span class="has-text-body-small">
-        This map allows residents to keep an eye on water levels in parts of the city and make
-        informed decisions prior to, during, and after a flooding event.
-        <a href="/resources">Learn more</a>
-      </span>
-    </BottomSheet>
-  </Teleport>
 </template>
-
-<style>
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/*
- * Shim for design-token rename: the locally-linked map-core bundles CSS that
- * references --dimension-core-600 (post-revamp name), but the published
- * phila-ui-core consumed by @pinboard/ui only defines --scale-600. Without
- * this shim, .phila-input .content's height collapses to auto and the search
- * bar squishes. Remove once phila-ui-core ships with the renamed token.
- */
-:root {
-  --dimension-core-600: 3rem;
-}
-
-#app {
-  height: 100dvh;
-}
-
-.sub-footer-link {
-  font-weight: 400;
-}
-
-.phila-navbar-brand {
-  padding-left: var(--spacing-l);
-}
-
-.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/oem-flood-finder/frontend/src/i18n/en.ts

@@ -0,0 +1,59 @@
+export default {
+  tags: {},
+  contact: 'Contact',
+  website: 'Website',
+  location: 'Location',
+  callout: {
+    title: 'About this tool',
+    message:
+      'This map allows residents to keep an eye on water levels in parts of the city and make informed decisions prior to, during, and after a flooding event.',
+    linkText: 'Learn more',
+  },
+  app: {
+    name: 'Flood Monitoring Map',
+    subtitle: '',
+    noResults: '',
+    viewList: 'View list',
+    viewMap: 'View map',
+    aboutTitle: 'About this tool',
+    aboutBody: '',
+  },
+  error: {
+    fetchSites: 'Error retrieving primary care sites',
+  },
+  filters: {
+    sort: 'Sort',
+    distance: 'Distance',
+    name: 'Name (A–Z)',
+  },
+  searchPlaceholder: 'Search by address or keyword...',
+  introPage: {
+    section1Title: '',
+    p0: '',
+    p05: '',
+    p1: '',
+    ol1: {
+      li1: '',
+      li2: '',
+      li3: '',
+    },
+    section2Title: 'Insurance and cost',
+    p2: "These health centers take many forms of insurance. This includes Medicare and Medicaid. You can get care even if you don't have insurance. If you're uninsured, you'll pay a small fee based on your income and family size.",
+    section25Title: 'Need help getting health insurance?',
+    p25: "Philadelphia's BenePhilly program offers free support to help residents apply for health insurance. To learn more, visit",
+    section3Title: 'Language access',
+    p3: "All health centers offer phone interpretation services. Some also offer in-person interpretation. View each location's details for a list of all languages spoken by staff. You can also search for a specific language.",
+    section4Title: 'Establishing care',
+    p4: 'You may need to establish care with a provider before you can access some services. Call to schedule a new patient appointment to become a patient at a health center.',
+    section5Title: 'Updates to the finder',
+    p5: 'We update the information for each health center every three months. If something is wrong, you can let us know through our',
+    feedbackForm: 'feedback form',
+    period: '.',
+  },
+  cards: {
+    table1Intro:
+      'These services may be specialized for children or adults. You may also need to become a patient, or establish care, at a health center before you can access some services.',
+    table2Intro:
+      "The rest of the services aren't divided by age. Some are open to anyone, but you may need to establish care at this health center before accessing others.",
+  },
+}

apps/oem-flood-finder/frontend/src/i18n/index.ts

@@ -1,9 +1,11 @@
 import { createI18n } from 'vue-i18n'
 import { pinboardMessages, mergeDeep } from '@pinboard/ui'
+import en from './en'
 
 // oem stays English-only; it merges the shell defaults so @pinboard/ui's
 // useI18n() calls resolve. No app catalog yet, no language switcher.
-const messages = mergeDeep(pinboardMessages, { en: {} })
+const appMessages = { en }
+const messages = mergeDeep(pinboardMessages, appMessages)
 
 const i18n = createI18n({
   legacy: false,