feat(help_pages): change includes to django-cotton components

cl/api/templates/cotton/court_endpoint.html

@@ -0,0 +1,4 @@
+{# court_endpoint.html #}
+<p>This API contains data about the courts we have in our database, and is joined into nearly every other API so that you can know where an event happened, a judge worked, etc.</p>
+<p>To look up field descriptions or options for filtering, ordering, or rendering, complete an HTTP <code>OPTIONS</code> request.</p>
+<p>You can generally cache this API. It does not change often.</p>

cl/api/templates/cotton/court_id_mappings.html

@@ -0,0 +1,16 @@
+{# court_id_mappings.html #}
+<c-data-table
+  safe
+  caption="CourtListener court IDs match the subdomains on PACER, except for the following mapping:"
+  :columns="[
+    { 'label': 'PACER Code', 'field': 'pacer_code' },
+    { 'label': 'CL ID', 'field': 'cl_id' },
+    { 'label': 'Description', 'field': 'description' }
+  ]"
+  :rows="[
+    { 'pacer_code': 'azb', 'cl_id': 'arb', 'description': 'Arizona Bankruptcy Court' },
+    { 'pacer_code': 'cofc', 'cl_id': 'uscfc', 'description': 'Court of Federal Claims' },
+    { 'pacer_code': 'neb', 'cl_id': 'nebraskab', 'description': 'Nebraska Bankruptcy' },
+    { 'pacer_code': 'nysb-mega', 'cl_id': 'nysb', 'description': 'Do not use \'mega\'' }
+  ]"
+></c-data-table>

cl/api/templates/cotton/docket_endpoint.html

@@ -0,0 +1,88 @@
+{# docket_endpoint.html #}
+{% load extras %}
+
+<c-callout type="default" title="About Dockets">
+  <p>
+    <code>Docket</code> objects sit at the top of the object hierarchy. In our PACER database, dockets link together docket entries, parties, and attorneys.
+  </p>
+  <p>
+    In our case law database, dockets sit above <code>Opinion Clusters</code>. In our oral argument database, they sit above <code>Audio</code> objects.
+  </p>
+  <p>
+    To look up field descriptions or options for filtering, ordering, or rendering, complete an HTTP <code>OPTIONS</code> request:
+  </p>
+  <c-code disable_copy>
+curl -v \
+  -X OPTIONS \
+  --header 'Authorization: Token {% if user.is_authenticated %}{{ user.auth_token }}{% else %}&lt;your-token-here&gt;{% endif %}' \
+  "{% get_full_host %}{% url "docket-list" version=version %}"
+  </c-code>
+
+  <p>To look up a particular docket, use its ID:</p>
+  <c-code disable_copy>
+curl -v \
+  --header 'Authorization: Token {% if user.is_authenticated %}{{ user.auth_token }}{% else %}&lt;your-token-here&gt;{% endif %}' \
+  "{% get_full_host %}{% url "docket-detail" version=version pk="4214664" %}"
+  </c-code>
+
+  <p>
+    The response you get will not list the docket entries, parties, or attorneys for the docket (doing so doesn't scale), but will have many other metadata fields:
+  </p>
+  <c-code disable_copy>
+{
+  "resource_uri": "https://www.courtlistener.com/api/rest/{{ version }}/dockets/4214664/",
+  "id": 4214664,
+  "court": "https://www.courtlistener.com/api/rest/{{ version }}/courts/dcd/",
+  "court_id": "dcd",
+  "original_court_info": null,
+  "idb_data": null,
+  "clusters": [],
+  "audio_files": [],
+  "assigned_to": "https://www.courtlistener.com/api/rest/{{ version }}/people/1124/",
+  "referred_to": null,
+  "absolute_url": "/docket/4214664/national-veterans-legal-services-program-v-united-states/",
+  "date_created": "2016-08-20T07:25:37.448945-07:00",
+  "date_modified": "2024-05-20T03:59:23.387426-07:00",
+  "source": 9,
+  "appeal_from_str": "",
+  "assigned_to_str": "Paul L. Friedman",
+  "referred_to_str": "",
+  "panel_str": "",
+  "date_last_index": "2024-05-20T03:59:23.387429-07:00",
+  "date_cert_granted": null,
+  "date_cert_denied": null,
+  "date_argued": null,
+  "date_reargued": null,
+  "date_reargument_denied": null,
+  "date_filed": "2016-04-21",
+  "date_terminated": null,
+  "date_last_filing": "2024-05-15",
+  "case_name_short": "",
+  "case_name": "NATIONAL VETERANS LEGAL SERVICES PROGRAM v. United States",
+  "case_name_full": "",
+  "slug": "national-veterans-legal-services-program-v-united-states",
+  "docket_number": "1:16-cv-00745",
+  "docket_number_core": "1600745",
+  "pacer_case_id": "178502",
+  "cause": "28:1346 Tort Claim",
+  "nature_of_suit": "Other Statutory Actions",
+  "jury_demand": "None",
+  "jurisdiction_type": "U.S. Government Defendant",
+  "appellate_fee_status": "",
+  "appellate_case_type_information": "",
+  "mdl_status": "",
+  "filepath_ia": "https://www.archive.org/download/gov.uscourts.dcd.178502/gov.uscourts.dcd.178502.docket.xml",
+  "filepath_ia_json": "https://archive.org/download/gov.uscourts.dcd.178502/gov.uscourts.dcd.178502.docket.json",
+  "ia_upload_failure_count": null,
+  "ia_needs_upload": true,
+  "ia_date_first_change": "2018-09-30T00:00:00-07:00",
+  "date_blocked": null,
+  "blocked": false,
+  "appeal_from": null,
+  "tags": [
+    "https://www.courtlistener.com/api/rest/{{ version }}/tag/1316/"
+  ],
+  "panel": []
+}
+  </c-code>
+</c-callout>

cl/api/templates/cotton/v3_deprecated_warning.html

@@ -0,0 +1,8 @@
+{# v3_deprecated_warning.html #}
+<c-callout type="danger" title="">
+  <p>These notes are for a version of the API that is deprecated.
+    New implementations should use the <a class="underline" href="{% url "rest_docs" %}">latest version of the API</a>
+    and existing software <a class="underline" href="{% url "migration_guide" %}">should be upgraded</a>.
+    These notes are maintained to help with migrations.
+  </p>
+</c-callout>

cl/assets/tailwind/input.css

@@ -57,6 +57,17 @@
 @tailwind components;
 
 @layer components {
+  .alert {
+    @apply px-4 py-3 text-sm rounded-[10px] border;
+  }
+
+  .alert-warning {
+    @apply alert text-yellow-700 bg-yellow-100 border-yellow-500;
+  }
+
+   .alert-danger {
+    @apply alert bg-red-100 text-red-700 border-red-500;
+  }
   .btn {
     @apply py-2.5 px-3.5 rounded-lg w-fit text-sm font-normal flex gap-1 items-center;
   }

cl/assets/templates/cotton/callout.html

@@ -0,0 +1,8 @@
+{# callout.html #}
+
+<c-vars title="Listen Up!" type="warning" />
+
+<div class="alert alert-{{ type }}">
+    <strong class="font-semibold">{{ title }}</strong>
+    {{ slot }}
+</div>

cl/simple_pages/templates/components.html

@@ -21,10 +21,11 @@
         {'href': '#tabbed-cards', 'text': 'Tabbed cards'},
         {'href': '#data-table', 'text': 'Data table'},
         {'href': '#dialog', 'text': 'Dialog'},
+        {'href': '#callout', 'text': 'Callout'},
       ]},
-      {'href': '#misc', 'text': 'Other components', 'children': [
-        {'href': '#support-banner', 'text': 'Support plea banner'},
-      ]},
+      {'href': '#pure-markup', 'text': 'Pure markup', 'children': [
+      {'href': '#support-banner', 'text': 'Support plea banner'},
+    ]},
   ]"
 >
   <section class="max-w-full w-full" x-intersect.margin.-100px="show" id="main-title">
@@ -676,6 +677,54 @@ <h4 class="mt-3">Demo</h4>
     </c-expansion-panel>
   </c-layout-with-navigation.section>
 
+  {# CALLOUT #}
+  <section class="max-w-full w-full border-t-2 border-greyscale-200" x-intersect.margin.-100px="show" id="callout">
+    <h2 class="mt-6 mb-3">Callout</h2>
+    <p>Displays a highlighted message box for warnings, info, or other notices.</p>
+    <h4 class="mt-3">Demo</h4>
+    <c-callout type="default" title="Default">
+      This is a default callout. Use for general information.
+    </c-callout>
+    <c-callout type="warning" title="Warning!" class="mt-3">
+      This is a warning callout. You can use <strong>bold</strong> or <em>emphasis</em> inside.
+    </c-callout>
+    <c-callout type="danger" title="Danger!" class="mt-3">
+      This is a danger callout. Use for critical alerts.
+    </c-callout>
+    <c-library.list title="Props" only>
+      <c-library.item only>
+        <c-slot name="label"><code>type</code></c-slot>
+        <c-slot name="description">Type of callout. Options: <code>default</code>, <code>warning</code>, <code>danger</code>.</c-slot>
+      </c-library.item>
+      <c-library.item optional only>
+        <c-slot name="label"><code>title</code></c-slot>
+        <c-slot name="description">Title text displayed in bold at the top of the callout.</c-slot>
+      </c-library.item>
+    </c-library.list>
+    <c-library.list title="Slots" only>
+      <c-library.item only>
+        <c-slot name="label">Default</c-slot>
+        <c-slot name="description">Content of the callout.</c-slot>
+      </c-library.item>
+    </c-library.list>
+    <c-expansion-panel title="Code">
+      <c-code>
+&lt;c-callout type="default" title="Default"&gt;
+  This is a default callout. Use for general information.
+&lt;/c-callout&gt;
+
+&lt;c-callout type="warning" title="Warning!"&gt;
+  This is a warning callout. You can use &lt;strong&gt;bold&lt;/strong&gt; or &lt;em&gt;emphasis&lt;/em&gt; inside.
+&lt;/c-callout&gt;
+
+&lt;c-callout type="danger" title="Danger!"&gt;
+  This is a danger callout. Use for critical alerts.
+&lt;/c-callout&gt;
+      </c-code>
+    </c-expansion-panel>
+  </section>
+
+
   {# SUPPORT PLEA BANNER #}
   <c-layout-with-navigation.section class="border-t-2 border-greyscale-200" id="support-banner">
     <h2 class="mt-6 mb-3">Support plea banner</h2>