WIP: tips to protect yourself streamfield

network-api/networkapi/wagtailpages/migrations/0039_productpage_tips_to_protect_yourself.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.1.11 on 2021-09-27 21:40
+
+from django.db import migrations
+import wagtail.core.blocks
+import wagtail.core.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailpages', '0038_auto_20210924_2002'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='productpage',
+            name='tips_to_protect_yourself',
+            field=wagtail.core.fields.StreamField([('tip', wagtail.core.blocks.RichTextBlock(features=['bold', 'italic', 'link']))], blank=True),
+        ),
+    ]

network-api/networkapi/wagtailpages/pagemodels/products.py

@@ -16,10 +16,12 @@
 
 from modelcluster.fields import ParentalKey
 
-from wagtail.admin.edit_handlers import InlinePanel, FieldPanel, MultiFieldPanel, PageChooserPanel
+from wagtail.admin.edit_handlers import InlinePanel, FieldPanel, MultiFieldPanel, PageChooserPanel, StreamFieldPanel
 from wagtail.contrib.routable_page.models import RoutablePageMixin, route
 from wagtail.core.models import Locale, Orderable, Page, TranslatableMixin
-from wagtail.core.fields import RichTextField
+from wagtail.core.fields import StreamField, RichTextField
+from wagtail.core import blocks
+
 
 from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.search import index
@@ -421,6 +423,10 @@ class ProductPage(AirtableMixin, FoundationMetadataPageMixin, Page):
         help_text="What's the worst thing that could happen by using this product?",
         blank=True,
     )
+    tips_to_protect_yourself = StreamField(
+        [('tip', blocks.RichTextBlock(features=['bold', 'italic', 'link']))],
+        blank=True
+    )
     mozilla_says = models.BooleanField(
         null=True,
         blank=True,
@@ -541,6 +547,7 @@ def map_import_fields(cls):
             "Product link": "product_url",
             "Price": "price",
             "Worst case": "worst_case",
+            "Tips to protect yourself": "tips_to_protect_yourself",
             "Signup requires email": "signup_requires_email",
             "Signup requires phone number": "signup_requires_phone",
             "Signup requires 3rd party account": "signup_requires_third_party_account",
@@ -586,6 +593,7 @@ def get_export_fields(self):
             "Product link": self.product_url if self.product_url else '',
             "Price": self.price,
             "Worst case": self.worst_case,
+            "Tips to protect yourself": self.tips_to_protect_yourself,
             "Signup requires email": self.signup_requires_email,
             "Signup requires phone number": self.signup_requires_phone,
             "Signup requires 3rd party account": self.signup_requires_third_party_account,
@@ -657,6 +665,7 @@ def get_voting_json(self):
                 FieldPanel('blurb'),
                 ImageChooserPanel('image'),
                 FieldPanel('worst_case'),
+                StreamFieldPanel('tips_to_protect_yourself'),
                 FieldPanel('mozilla_says')
             ],
             heading='General Product Details',
@@ -761,6 +770,7 @@ def get_voting_json(self):
         TranslatableField('price'),
         SynchronizedField('image'),
         TranslatableField('worst_case'),
+        TranslatableField('tips_to_protect_yourself'),
         SynchronizedField('signup_requires_email'),
         SynchronizedField('signup_requires_phone'),
         SynchronizedField('signup_requires_third_party_account'),

network-api/networkapi/wagtailpages/templates/buyersguide/product_page.html

@@ -1,6 +1,6 @@
 {% extends "buyersguide/bg_base.html" %}
 
-{% load bg_selector_tags env l10n i18n localization static wagtailimages_tags %}
+{% load bg_selector_tags env l10n i18n localization static wagtailimages_tags wagtailcore_tags %}
 
 {% block head_extra %}
   <meta property="og:title" content="{% blocktrans context "This can be localized. This is a reference to the “*batteries not included” mention on toys." %}privacy not included - {{ product.title }}{% endblocktrans %}" />
@@ -88,6 +88,23 @@ <h2 class="h3-heading">{% trans "What could happen if something goes wrong" %}</
         </div>
       </div>
 
+      {% if product.tips_to_protect_yourself %}
+
+      <div class="row mb-4 tips-to-protect-yourself">
+        <div class="col-12 tips py-3">
+          <h2 class="h3-heading">{% trans "Tips to protect yourself" %}</h2>
+          <ul class="pl-4">
+            {% for item in product.tips_to_protect_yourself %}
+              {% with update=item %}
+                <li> {{update}} </li>
+              {% endwith %}
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+
+      {% endif %}
+
       <div id="product-research" data-is-wagtail-page="true">
         <div class="row">
           <div class="col-12">

source/sass/buyers-guide/views/product.scss

@@ -202,6 +202,35 @@
     }
   }
 
+  .tips-to-protect-yourself {
+    border: 1px solid $gray-20;
+
+    h2 {
+      display: inline-block;
+
+      &:before {
+        content: "";
+        display: inline-block;
+        width: 29px;
+        height: 27px;
+        background: url(../_images/buyers-guide/protect-tip-icon.svg) center /
+          contain no-repeat;
+        position: relative;
+        top: 4px;
+        margin-right: 0.5rem;
+
+        @media (min-width: $pni-product-breakpoint-larger) {
+          margin-right: 1rem;
+        }
+      }
+    }
+    p {
+      margin-bottom: 0.5rem;
+      a {
+        text-decoration: none;
+      }
+    }
+  }
   .subheading-divider {
     padding: 0em 0.5em 0em 0.5em;
     @media (max-width: $bp-md) {