Migrate Styleguide ad-hoc JS to use styles only

CHANGELOG.txt

@@ -105,6 +105,7 @@ Changelog
  * Maintenance: Remove `initTooltips` in favour of Stimulus controller (LB (Ben) Johnston)
  * Maintenance: Enhance the Stimulus `InitController` to allow for custom event dispatching when ready (Aditya, LB (Ben) Johnston)
  * Maintenance: Remove inline script usage for comment initialization and adopt an event listener/dispatch approach for better CSP compliance (Aditya, LB (Ben) Johnston)
+ * Maintenance: Migrate styleguide ad-hoc JavaScript to use styles only to avoid CSP issues (LB (Ben) Johnston)
 
 
 5.2.3 (xx.xx.xxxx) - IN DEVELOPMENT

docs/releases/6.0.md

@@ -144,6 +144,7 @@ Thank you to Thibaud Colas and Badr Fourane for their work on this feature.
  * Remove `initTooltips` in favour of Stimulus controller (LB (Ben) Johnston)
  * Enhance the Stimulus `InitController` to allow for custom event dispatching when ready (Aditya, LB (Ben) Johnston)
  * Remove inline script usage for comment initialization and adopt an event listener/dispatch approach for better CSP compliance (Aditya, LB (Ben) Johnston)
+ * Migrate styleguide ad-hoc JavaScript to use styles only to avoid CSP issues (LB (Ben) Johnston)
 
 ## Upgrade considerations - removal of deprecated features from Wagtail 4.2 - 5.1
 

wagtail/contrib/styleguide/.gitignore

@@ -1 +0,0 @@
-static/

wagtail/contrib/styleguide/static/wagtailstyleguide/css/animate-progress.css

@@ -0,0 +1,17 @@
+@keyframes animate-progress {
+  0% {
+    width: 20%;
+  }
+
+  60% {
+    width: 80%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+#progress-example .bar {
+  animation: animate-progress 4s infinite linear;
+}

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -581,19 +581,4 @@
     {% include "wagtailadmin/pages/_editor_js.html" %}
 
     {{ example_form.media.js }}
-
-    <script>
-        $(function(){
-            (function runprogress(){
-                var to = setTimeout(function(){
-                    runprogress();
-                    clearTimeout(to);
-                    setTimeout(function(){
-                        $('#progress-example .bar').css('width', '20%');
-                    }, 2000);
-                }, 3000);
-                $('#progress-example .bar').css('width', '80%');
-            })();
-        })
-    </script>
 {% endblock %}

wagtail/contrib/styleguide/views.py

@@ -13,6 +13,7 @@ from wagtail import hooks
 from wagtail.admin import messages
 from wagtail.admin.forms.search import SearchForm
 from wagtail.admin.rich_text import get_rich_text_editor_widget
+from wagtail.admin.staticfiles import versioned_static
 from wagtail.admin.views.generic import WagtailAdminTemplateMixin
 from wagtail.admin.widgets import (
     AdminAutoHeightTextInput,
@@ -91,6 +92,9 @@ class ExampleForm(forms.Form):
     document_chooser = forms.BooleanField(required=True)
     snippet_chooser = forms.BooleanField(required=True)
 
+    class Media:
+        css = {"all": [versioned_static("wagtailstyleguide/css/animate-progress.css")]}
+
 
 icon_id_pattern = re.compile(r"id=\"icon-([a-z0-9-]+)\"")
 icon_comment_pattern = re.compile(r"<!--!(.*?)-->")