7380 tips to protect free text

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

@@ -0,0 +1,19 @@
+# Generated by Django 3.1.11 on 2021-10-07 18:28
+
+from django.db import migrations
+import wagtail.core.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailpages', '0041_productpage_time_researched'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='productpage',
+            name='tips_to_protect_yourself',
+            field=wagtail.core.fields.RichTextField(blank=True),
+        ),
+    ]

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

@@ -444,6 +444,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 = RichTextField(
+        features=['bold', 'italic', 'link'],
+        blank=True
+    )
     mozilla_says = models.BooleanField(
         null=True,
         blank=True,
@@ -635,8 +639,8 @@ def get_export_fields(self):
             "Has privacy policy": self.privacy_policy,
             "Privacy policy help text": self.privacy_policy_helptext,
             "Mozilla Says": self.mozilla_says,
-            "Time Researched ": "time_researched",
-
+            "Time Researched": self.time_researched,
+            "Tips to protect yourself": self.tips_to_protect_yourself
         }
 
     def get_status_for_airtable(self):
@@ -687,9 +691,9 @@ def get_voting_json(self):
                 FieldPanel('blurb'),
                 ImageChooserPanel('image'),
                 FieldPanel('worst_case'),
+                FieldPanel('tips_to_protect_yourself'),
                 FieldPanel('mozilla_says'),
                 FieldPanel('time_researched')
-
             ],
             heading='General Product Details',
             classname='collapsible'
@@ -816,6 +820,7 @@ def get_voting_json(self):
         TranslatableField('privacy_policy_helptext'),
         SynchronizedField('mozilla_says'),
         SynchronizedField('time_researched'),
+        TranslatableField('tips_to_protect_yourself')
     ]
 
     @property

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 %}" />
@@ -84,6 +84,16 @@ <h2 class="h3-heading">{% trans "What could happen if something goes wrong?" %}<
         </div>
       </div>
 
+      {% if product.tips_to_protect_yourself %}
+      <div class="row tw-my-5 tips-to-protect-yourself">
+        <div class="col-12 tw-py-5 tips">
+          <h2 class="h3-heading">{% trans "Tips to protect yourself" %}</h2>
+          {{ product.tips_to_protect_yourself | richtext }}
+        </div>
+      </div>
+      {% endif %}
+
+
       <div id="product-research" data-is-wagtail-page="true">
       <div id="creepiness-vote">
         <div class="row">

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

@@ -201,6 +201,45 @@
       }
     }
   }
+  .tips-to-protect-yourself {
+    border: 1px solid $gray-20;
+    .tips {
+      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;
+          }
+        }
+      }
+
+      .rich-text {
+        p {
+          display: list-item;
+          list-style-type: disc;
+          list-style-position: inside;
+          padding-left: 0.5em;
+          margin-bottom: 0em;
+        }
+      }
+    }
+    // Removing padding from container so div can sit slightly outwards from rest of content.
+    @media (min-width: $pni-product-breakpoint-larger) {
+      margin-right: -2em;
+      margin-left: -2em;
+      padding-left: 1em;
+    }
+  }
 
   .subheading-divider {
     padding: 0em 0.5em 0em 0.5em;