From ad6114fbc6b0e779d622c221672a5436d56fa5a8 Mon Sep 17 00:00:00 2001 From: Paul Schilling Date: Fri, 11 Aug 2023 11:17:31 +0200 Subject: [PATCH] [#1645] improve design of product page - make cta button text configurable - remove mobile-view button from product detail template (unnecessary duplication) - break up overflowing links in text field - fix data-migration test by using appropriate models --- .../migrations/0058_product_button_text.py | 24 +++++++++++++++++++ src/open_inwoner/pdc/models/product.py | 7 ++++++ .../pdc/tests/test_data_migrations.py | 11 +++++---- src/open_inwoner/pdc/tests/test_product.py | 22 +++++++++++++++++ .../scss/components/Typography/Link.scss | 2 ++ .../templates/pages/product/detail.html | 10 -------- src/open_inwoner/utils/ckeditor.py | 7 +++--- 7 files changed, 65 insertions(+), 18 deletions(-) create mode 100644 src/open_inwoner/pdc/migrations/0058_product_button_text.py diff --git a/src/open_inwoner/pdc/migrations/0058_product_button_text.py b/src/open_inwoner/pdc/migrations/0058_product_button_text.py new file mode 100644 index 0000000000..95aa48b452 --- /dev/null +++ b/src/open_inwoner/pdc/migrations/0058_product_button_text.py @@ -0,0 +1,24 @@ +# Generated by Django 3.2.15 on 2023-08-11 09:16 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("pdc", "0057_auto_20230623_1523"), + ] + + operations = [ + migrations.AddField( + model_name="product", + name="button_text", + field=models.CharField( + blank=True, + default="Aanvraag starten", + help_text="The text displayed on the button.", + max_length=64, + verbose_name="CTA Button text", + ), + ), + ] diff --git a/src/open_inwoner/pdc/models/product.py b/src/open_inwoner/pdc/models/product.py index a09afe3aea..f1d72acc81 100644 --- a/src/open_inwoner/pdc/models/product.py +++ b/src/open_inwoner/pdc/models/product.py @@ -79,6 +79,13 @@ class Product(models.Model): default="", help_text=_("Action link to request the product."), ) + button_text = models.CharField( + verbose_name=_("CTA Button text"), + max_length=64, + blank=True, + default=_("Aanvraag starten"), + help_text=_("The text displayed on the button."), + ) form = OpenFormsSlugField( _("Request form"), blank=True, diff --git a/src/open_inwoner/pdc/tests/test_data_migrations.py b/src/open_inwoner/pdc/tests/test_data_migrations.py index 87f42bed10..f55d5a669c 100644 --- a/src/open_inwoner/pdc/tests/test_data_migrations.py +++ b/src/open_inwoner/pdc/tests/test_data_migrations.py @@ -2,7 +2,6 @@ from open_inwoner.utils.tests.test_migrations import TestMigrations -from ..models import Category, Product from ..models.product import ProductLocation @@ -92,14 +91,16 @@ def setUpBeforeMigration(self, apps): self.product.categories.add(self.category_initial) def test_products_still_have_category(self): - # swap our migration models for real objects - product = Product.objects.get(id=self.product.id) + Product = self.apps.get_model("pdc", "Product") + Category = self.apps.get_model("pdc", "Category") + category_initial = Category.objects.get(id=self.category_initial.id) category_extra = Category.objects.get(id=self.category_extra.id) - product.categories.add(category_extra) + product = Product.objects.get(id=self.product.id) + product.categories.add(category_extra, through_defaults={"order": 1}) self.assertEqual( list(product.categories.all()), - [category_extra, category_initial], + [category_initial, category_extra], ) diff --git a/src/open_inwoner/pdc/tests/test_product.py b/src/open_inwoner/pdc/tests/test_product.py index 8d3cb32311..89cdce5e0e 100644 --- a/src/open_inwoner/pdc/tests/test_product.py +++ b/src/open_inwoner/pdc/tests/test_product.py @@ -228,6 +228,28 @@ def test_button_is_not_rendered_inside_content_when_no_form_or_link(self): self.assertFalse(cta_button) + def test_button_text_change(self): + """ + Assert that button text can be modified + aria-labels are changed accordingly + """ + product = ProductFactory( + content="Some content [CTABUTTON]", + link="http://www.example.com", + button_text="click me!", + ) + + response = self.app.get( + reverse("products:product_detail", kwargs={"slug": product.slug}) + ) + + cta_button = response.pyquery(".grid__main")[0].find_class("cta-button")[0] + cta_button_span = cta_button.getchildren()[0] + + self.assertEqual(cta_button.tag, "a") + self.assertEqual(cta_button.attrib["title"], "click me!") + self.assertEqual(cta_button.attrib["aria-label"], "click me!") + self.assertEqual(cta_button_span.attrib["aria-label"], "click me!") + def test_sidemenu_button_is_not_rendered_when_cta_inside_product_content(self): product = ProductFactory( content="Some content \[CTABUTTON\]", link="http://www.example.com" diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss index eee948553d..14eee75787 100644 --- a/src/open_inwoner/scss/components/Typography/Link.scss +++ b/src/open_inwoner/scss/components/Typography/Link.scss @@ -47,6 +47,8 @@ color: var(--color-black); } + word-wrap: break-word; + &--secondary { color: var(--color-secondary); } diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html index 4de142f73a..c264aae885 100644 --- a/src/open_inwoner/templates/pages/product/detail.html +++ b/src/open_inwoner/templates/pages/product/detail.html @@ -40,16 +40,6 @@

{% endif %} - {% if product.form %} - {% button_row mobile=True %} - {% button href=product.form_link text=_("Aanvraag starten") primary=True icon="arrow_forward" icon_position="before" %} - {% endbutton_row %} - {% elif product.link %} - {% button_row mobile=True %} - {% button href=product.link text=_("Aanvraag starten") primary=True icon="arrow_forward" icon_position="before" %} - {% endbutton_row %} - {% endif %} -
{% if object.question_set.exists %} {% faq object.question_set.all %} diff --git a/src/open_inwoner/utils/ckeditor.py b/src/open_inwoner/utils/ckeditor.py index 2b0406bb97..5422d7aecd 100644 --- a/src/open_inwoner/utils/ckeditor.py +++ b/src/open_inwoner/utils/ckeditor.py @@ -61,7 +61,7 @@ def get_product_rendered_content(product): # icon icon = soup.new_tag("span") icon.attrs.update( - {"aria-label": _("Aanvraag starten"), "class": "material-icons"} + {"aria-label": product.button_text, "class": "material-icons"} ) icon.append("arrow_forward") @@ -72,11 +72,12 @@ def get_product_rendered_content(product): { "class": "button button--textless button--icon button--icon-before button--primary cta-button", "href": (product.link if product.link else product.form_link), - "title": _("Aanvraag starten"), + "title": product.button_text, + "aria-label": product.button_text, } ) element.append(icon) - element.append(_("Aanvraag starten")) + element.append(product.button_text) if product.link: element.attrs.update({"target": "_blank"})