Add LookBook previews for Case views

app/previews/flex/cases/index_preview.rb

@@ -0,0 +1,41 @@
+module Flex
+  module Cases
+    class IndexPreview < Lookbook::Preview
+      def default
+        render template: "flex/cases/index", locals: {
+          action_name: "index",
+          cases_path: "/cases",
+          closed_cases_path: "/cases/closed",
+          cases: [
+            { id: 1, created_at: "3/14/2025", path: "/cases/1" },
+            { id: 2, created_at: "3/15/2025", path: "/cases/2" },
+          ],
+          title: "Cases",
+        }
+      end
+
+      def empty
+        render template: "flex/cases/index", locals: {
+          action_name: "index",
+          cases_path: "/cases",
+          closed_cases_path: "/cases/closed",
+          cases: [],
+          title: "Cases",
+        }
+      end
+
+      def closed
+        render template: "flex/cases/index", locals: {
+          action_name: "closed",
+          cases_path: "/cases",
+          closed_cases_path: "/cases/closed",
+          cases: [
+            { id: 1, created_at: "3/14/2025", path: "/cases/1" },
+            { id: 2, created_at: "3/15/2025", path: "/cases/2" },
+          ],
+          title: "Cases",
+        }
+      end
+    end
+  end
+end

app/previews/flex/cases/show_preview.rb

@@ -0,0 +1,17 @@
+module Flex
+  module Cases
+    class ShowPreview < Lookbook::Preview
+      def default
+        render template: "flex/previews/cases/show", locals: {
+          status: :open
+        }
+      end
+
+      def closed
+        render template: "flex/previews/cases/show", locals: {
+          status: :closed
+        }
+      end
+    end
+  end
+end

app/views/flex/cases/index.html.erb

@@ -1,13 +1,13 @@
-<%= content_for :title, model_class.name.titleize %>
+<%= content_for :title, title %>
 
   <!-- Main content -->
   <main class="usa-section">
     <div class="grid-container">
-      <h1 class="usa-heading-xl"><%= model_class.name.titleize.sub('Case', ' Cases') %></h1>
+      <h1 class="usa-heading-xl"><%= title %></h1>
 
       <% tabs = [
-        { name: "Open", path: polymorphic_path(model_class), active: action_name == "index" },
-        { name: "Closed", path: polymorphic_path(model_class, action: "closed"), active: action_name == "closed" }
+        { name: "Open", path: cases_path, active: action_name == "index" },
+        { name: "Closed", path: closed_cases_path, active: action_name == "closed" }
       ] %>
 
       <nav class="display-flex border-bottom-1px border-base-light">
@@ -17,7 +17,7 @@
       </nav>
 
       <!-- Cases -->
-      <table class="usa-table usa-table--borderless usa-table--striped">
+      <table class="usa-table usa-table--borderless usa-table--striped width-full">
         <thead>
           <tr>
             <th scope="col">Case ID</th>
@@ -26,13 +26,13 @@
           </tr>
         </thead>
         <tbody>
-          <% if @cases.any? %>
-            <% @cases.each do |kase| %>
+          <% if cases.any? %>
+            <% cases.each do |kase| %>
               <tr>
-                <td><%= kase.id %></td>
-                <td><%= kase.created_at.strftime('%m/%d/%Y') %></td>
+                <td><%= kase[:id] %></td>
+                <td><%= kase[:created_at] %></td>
                 <td>
-                  <%= link_to "View", polymorphic_path(kase), class: "usa-button usa-button--outline" %>
+                  <%= link_to "View", kase[:path], class: "usa-button usa-button--outline" %>
                 </td>
               </tr>
             <% end %>

app/views/flex/cases/show.html.erb

@@ -4,16 +4,16 @@
     <nav class="usa-breadcrumb" aria-label="Breadcrumbs">
       <ol class="usa-breadcrumb__list">
         <li class="usa-breadcrumb__list-item">
-          <%= link_to "Cases", polymorphic_path(model_class), class: "usa-breadcrumb__link" %>
+          <%= link_to "Cases", cases_path, class: "usa-breadcrumb__link" %>
         </li>
         <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
-          <%= @case.id %>
+          <%= kase[:id] %>
         </li>
       </ol>
     </nav>
-    <h1 class="usa-heading-xl">Case ID: <%= @case.id %></h1>
+    <h1 class="usa-heading-xl">Case ID: <%= kase[:id] %></h1>
     <%= yield :case_summary %>
-    <p>Status: <%= render partial: "flex/cases/status_tag", locals: { status: @case.status } %></p>
+    <p>Status: <%= render partial: "flex/cases/status_tag", locals: { status: kase[:status] } %></p>
 
     <div class="grid-row grid-gap border-top-2px border-base-lighter padding-top-2">
       <div class="tablet:grid-col-3 margin-bottom-4 tablet:margin-bottom-0">

app/views/flex/previews/cases/show.html.erb

@@ -0,0 +1,15 @@
+<% content_for :case_summary do %>
+  <p><em>Customizable case summary</em></p>
+<% end %>
+
+<% content_for :case_details do %>
+  <em>Customizable case details</em>
+<% end %>
+
+<%= render template: 'flex/cases/show', locals: {
+  cases_path: "/cases",
+  kase: {
+    id: 1,
+    status: status,
+  },
+} %>

spec/dummy/app/views/passport_cases/index.html.erb

@@ -1 +1,10 @@
-<%= render template: 'flex/cases/index', locals: { model_class: PassportCase } %>
+<%= render template: 'flex/cases/index', locals: {
+  cases: @cases.map { |kase| {
+    id: kase.id,
+    created_at: kase.created_at.strftime("%m/%d/%Y"),
+    path: polymorphic_path(kase),
+  } },
+  cases_path: "/cases",
+  closed_cases_path: "/cases/closed",
+  title: "Passport Cases",
+} %>

spec/dummy/app/views/passport_cases/show.html.erb

@@ -8,4 +8,10 @@
   <button class="usa-button usa-button--outline">Reject</button>
 <% end %>
 
-<%= render template: 'flex/cases/show', locals: { model_class: PassportCase } %>
+<%= render template: 'flex/cases/show', locals: {
+  cases_path: passport_cases_path,
+  kase: {
+    id: @case.id,
+    status: @case.status,
+  },
+} %>