Tabbed paragraph changes (#283)

* Tabbed paragraph changes
- Make the intro rich text
- Allow external links in the buttons
- Update validation
* Update the mobile version of the button
* Ensure links are correctly underlined in tabbed paragraph block text

Author: helenb

tbx/core/blocks.py

@@ -605,17 +605,56 @@ class Meta:
         group = "Calls to action"
 
 
+class TabbedParagraphSectionsListBlock(blocks.ListBlock):
+    def clean(self, value):
+        result = super().clean(value)
+        errors = {}
+
+        for i in range(0, len(result)):
+            button_values = {
+                "button_link": result[i]["button_link"],
+                "button_text": result[i]["button_text"],
+                "button_url": result[i]["button_url"],
+            }
+
+            item_errors = ErrorList()
+
+            if button_values.get("button_link") and button_values.get("button_url"):
+                item_errors.append(
+                    ValidationError(
+                        "You must specify either a page link or a URL, not both."
+                    )
+                )
+
+            if button_values.get("button_text") and (
+                not button_values.get("button_link")
+                and not button_values.get("button_url")
+            ):
+                item_errors.append(
+                    "You must specify a button link or URL for the button text you have provided."
+                )
+
+            if item_errors:
+                errors[i] = item_errors
+
+        if errors:
+            raise blocks.ListBlockValidationError(block_errors=errors)
+
+        return result
+
+
 class TabbedParagraphBlock(blocks.StructBlock):
     title = blocks.CharBlock(max_length=255, required=False)
-    intro = blocks.TextBlock(label="Introduction", required=False)
-    tabbed_paragraph_sections = blocks.ListBlock(
+    intro = blocks.RichTextBlock(label="Introduction", required=False)
+    tabbed_paragraph_sections = TabbedParagraphSectionsListBlock(
         blocks.StructBlock(
             [
                 ("name", blocks.CharBlock()),
                 ("summary", blocks.TextBlock()),
                 ("text", blocks.RichTextBlock()),
                 ("button_text", blocks.CharBlock(required=False)),
                 ("button_link", blocks.PageChooserBlock(required=False)),
+                ("button_url", blocks.URLBlock(required=False)),
             ],
             help_text="Add a tabbed paragraph, with a name, summary, text and an optional page link & button text",
             icon="breadcrumb-expand",
@@ -627,30 +666,13 @@ class TabbedParagraphBlock(blocks.StructBlock):
     def clean(self, value):
         value = super().clean(value)
         errors = defaultdict(ErrorList)
-        non_block_errors = ErrorList()
 
         if value["intro"] and not value["title"]:
             message = "You cannot add an intro without also adding a title"
             errors["title"].append(ValidationError(message))
 
-        for tabbed_paragraph_section in value["tabbed_paragraph_sections"]:
-            button_values = {
-                "button_link": tabbed_paragraph_section["button_link"],
-                "button_text": tabbed_paragraph_section["button_text"],
-            }
-
-            if any(button_values.values()) and not all(button_values.values()):
-                message = "There must be a value for both button link and text, if one has a value."
-
-                for key, value in button_values.items():
-                    if not value:
-                        errors[key].append(message)
-                        non_block_errors.append(ValidationError(message))
-
-        if errors or non_block_errors:
-            raise blocks.StructBlockValidationError(
-                block_errors=errors, non_block_errors=non_block_errors
-            )
+        if errors:
+            raise blocks.StructBlockValidationError(block_errors=errors)
 
         return value
 

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/tabbed_paragraph_block.html

@@ -9,7 +9,7 @@
     {% endif %}
 
     {% if value.intro %}
-        <p class="tabbed-paragraph__intro">{{ value.intro }}</p>
+        <div class="tabbed-paragraph__intro rich-text">{{ value.intro }}</div>
     {% endif %}
 
     {# desktop - tabs #}
@@ -40,11 +40,19 @@
                 <div class="tabs__panel-summary">
                     {{ item.summary }}
                 </div>
-                <div class="tabs__panel-text">
+                <div class="tabs__panel-text rich-text">
                     {{ item.text|richtext }}
                 </div>
-                {% if item.button_text and item.button_link %}
-                    <a href="{% pageurl item.button_link %}" class="button tabs__panel-button">{{ item.button_text }}</a>
+                {% if item.button_text%}
+                    {% if item.button_link or item.button_url %}
+                        {% if item.button_link %}
+                            <a href="{% pageurl item.button_link %}" class="button tabs__panel-button">
+                        {% else %}
+                            <a href="{{ item.button_url }}" class="button tabs__panel-button">
+                        {% endif %}
+                        {{ item.button_text }}
+                        </a>
+                    {% endif %}
                 {% endif %}
             </div>
         {% endfor %}
@@ -67,11 +75,19 @@
                 <div class="tabs-mobile__summary-text">
                     {{ tab.summary }}
                 </div>
-                <div class="tabs-mobile__text">
+                <div class="tabs-mobile__text rich-text">
                     {{ tab.text|richtext }}
                 </div>
-                {% if tab.button_text and tab.button_link %}
-                    <a href="{% pageurl tab.button_link %}" class="button tabs-mobile__button">{{ tab.button_text }}</a>
+                {% if tab.button_text %}
+                    {% if tab.button_link or tab.button_url %}
+                        {% if tab.button_link %}
+                            <a href="{% pageurl tab.button_link %}" class="button tabs-mobile__button">
+                        {% else %}
+                            <a href="{{ tab.button_url }}" class="button tabs-mobile__button">
+                        {% endif %}
+                        {{ tab.button_text }}
+                        </a>
+                    {% endif %}
                 {% endif %}
             </div>
         </details>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/tabbed_paragraph_block.yaml

@@ -1,7 +1,7 @@
 context:
   value:
     title: Putting people at the heart of our process
-    intro: Cover the full spectrum of SEO, so whether you need a quick site health check, some training and support or a full SEO strategy, we can help.
+    intro: <p>Cover the full <a href="#">spectrum of SEO</a>, so whether you need a quick site health check, some training and support or a full SEO strategy, we can help.</p>
     tabbed_paragraph_sections:
       - name: Strategy and consultancy
         summary: Gathering insights into people’s needs and behaviours to inform and guide design solutions.