Pass config via attributes

Author: colinrotherham

manage_breast_screening/core/jinja2/components/breast-diagram/macro.jinja

@@ -1,3 +1,3 @@
-{% macro app_breast_diagram(version, attributes) %}
-  {%- include 'components/breast-diagram/template.jinja' -%}
+{% macro app_breast_diagram(params) %}
+  {%- include "components/breast-diagram/template.jinja" -%}
 {% endmacro %}

manage_breast_screening/core/jinja2/components/breast-diagram/template.jinja

@@ -5,8 +5,18 @@
   <span>Left</span>
 </div>
 
-<figure class="app-breast-diagram__image-map nhsuk-u-width-full" data-module="app-image-map" {{- nhsukAttributes(attributes) }}>
-{% if version == 1 %}
+<figure
+  {{- nhsukAttributes({
+    "class": "app-breast-diagram__image-map nhsuk-u-width-full",
+    "data-module": "app-image-map",
+    "data-read-only": {
+      "value": "true" if params.read_only else false,
+      "optional": true
+    }
+  }) -}}
+
+  {{- nhsukAttributes(params.attributes) -}}>
+{% if params.version == 1 %}
 {% include "components/breast-diagram/v1.svg" %}
 {% endif %}
 </figure>

manage_breast_screening/mammograms/jinja2/mammograms/medical_information/breast_features/form.jinja

@@ -9,10 +9,23 @@
 
 {% from "components/breast-diagram/macro.jinja" import app_breast_diagram %}
 
-{% set form_attributes = { "data-module": "app-breast-diagram" } %}
+{% set form_attributes = {
+  "class": "app-breast-diagram",
+  "action": request.path,
+  "method": "post",
+  "data-module": "app-breast-diagram",
+  "data-debug": {
+    "value": "true" if "debug" in request.GET else false,
+    "optional": true
+  },
+  "novalidate": {
+    "value": true,
+    "optional": true
+  }
+} %}
 
 {% block page_content %}
-<div class="nhsuk-u-reading-width">
+  <div class="nhsuk-u-reading-width">
     {{ form_error_summary(form) }}
 
     <h1 class="nhsuk-heading-l">
@@ -24,7 +37,7 @@
       {{ heading }}
     </h1>
 
-    <form class="app-breast-diagram" action="{{ request.path }}" method="post" novalidate {{ nhsukAttributes(form_attributes) }}>
+    <form {{- nhsukAttributes(form_attributes) }}>
       {{ csrf_input }}
 
       <p class="nhsuk-body" id="breast-diagram-description">
@@ -35,12 +48,13 @@
         <h2 class="nhsuk-heading-m">Where is the feature?</h2>
       </div>
 
-      {{ app_breast_diagram(
-        version=diagram_version,
-        attributes={
+      {{ app_breast_diagram({
+        "read_only": false,
+        "version": diagram_version,
+        "attributes": {
           "aria-labelledby": "breast-diagram-description"
         }
-      ) }}
+      }) }}
 
       {{ form.features }}
 
@@ -100,5 +114,5 @@
         </a>
       </p>
     </form>
-</div>
+  </div>
 {% endblock %}