From 4029a3741ce6b743f6eae2bc13dd16313fbad557 Mon Sep 17 00:00:00 2001
From: Emma Blue <90632321+emmambd@users.noreply.github.com>
Date: Wed, 13 Mar 2024 13:29:20 -0400
Subject: [PATCH] feat: Add examples table for mixed_case_recommended_field
 (#1708)

* add table

* fix table to match #1695

* fix java doc error

* update caption styles

* web ui style update + add colons

---------

Co-authored-by: David Gamez Diaz <1192523+davidgamez@users.noreply.github.com>
Co-authored-by: Jingsi Lu <jingsi@mobilitydata.org>
---
 .../MixedCaseRecommendedFieldNotice.java      | 36 ++++++++++++++++++-
 main/src/main/resources/report.html           |  5 +++
 web/client/src/css/components/markdown.css    |  5 ++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/core/src/main/java/org/mobilitydata/gtfsvalidator/notice/MixedCaseRecommendedFieldNotice.java b/core/src/main/java/org/mobilitydata/gtfsvalidator/notice/MixedCaseRecommendedFieldNotice.java
index cf98007ca3..011030021c 100644
--- a/core/src/main/java/org/mobilitydata/gtfsvalidator/notice/MixedCaseRecommendedFieldNotice.java
+++ b/core/src/main/java/org/mobilitydata/gtfsvalidator/notice/MixedCaseRecommendedFieldNotice.java
@@ -15,7 +15,41 @@
  * (e.g. “JFK Airport”). Abbreviations may be problematic for accessibility by screen reader
  * software and voice user interfaces.
  *
- * @see org.mobilitydata.gtfsvalidator.annotation.MixedCase
+ * <table style="table-layout:auto; width:auto;">
+ *   <caption>Good examples:</caption>
+ *   <tr>
+ *     <th><code>Field Text</code></th>
+ *     <th><code>Dataset</code></th>
+ *   </tr>
+ *   <tr>
+ *     <td>"Schwerin, Hauptbahnhof"</td>
+ *     <td><a href="http://vbb.de/vbbgtfs">Verkehrsverbund Berlin-Brandenburg</a></td>
+ *   </tr>
+ *    <tr>
+ *     <td>"Red Hook/Atlantic Basin"</td>
+ *     <td><a href="http://nycferry.connexionz.net/rtt/public/utility/gtfs.aspx">NYC Ferry</a></td>
+ *   </tr>
+ *   <tr>
+ *     <td>"Campo Grande Norte"</td>
+ *     <td><a href="https://gateway.carris.pt/gateway/gtfs/api/v2.8/GTFS">Carris</a></td>
+ *   </tr>
+ * </table>
+ *
+ * <table style="table-layout:auto; width:auto;">
+ *   <caption>Bad examples:</caption>
+ *   <tr>
+ *     <th><code>Field Text</code></th>
+ *   </tr>
+ *   <tr>
+ *     <td>"GALLERIA MALL"</td>
+ *   </tr>
+ *   <tr>
+ *     <td>"3427 GG 17"</td>
+ *   </tr>
+ *   <tr>
+ *     <td>"21 Clark Rd Est"</td>
+ *   </tr>
+ * </table>
  */
 @GtfsValidationNotice(
     severity = WARNING,
diff --git a/main/src/main/resources/report.html b/main/src/main/resources/report.html
index 88cda2be8c..fa06e86da2 100644
--- a/main/src/main/resources/report.html
+++ b/main/src/main/resources/report.html
@@ -43,6 +43,11 @@
         width: 100%;
     }
 
+    table caption {
+        text-align: left;
+        margin: 0.5em 0;
+    }
+
     table th {
         text-align: left;
         border-bottom: 2px solid #000;
diff --git a/web/client/src/css/components/markdown.css b/web/client/src/css/components/markdown.css
index a541565c37..db4ce8e20a 100644
--- a/web/client/src/css/components/markdown.css
+++ b/web/client/src/css/components/markdown.css
@@ -63,9 +63,12 @@
 
   table {
     @apply my-2;
+    caption {
+      @apply text-left;
+    }
   }
 
-  th, td {
+  th, td,  {
     @apply align-baseline;
     @apply px-4 py-3;
     @apply text-left;