7380 tips to protect free text

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

@@ -0,0 +1,19 @@
+# Generated by Django 3.1.11 on 2021-10-06 19:24
+
+from django.db import migrations
+import wagtail.core.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailpages', '0040_auto_20210929_2116'),
+    ]
+
+    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

@@ -422,6 +422,7 @@ 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,
@@ -658,6 +659,7 @@ def get_voting_json(self):
                 FieldPanel('blurb'),
                 ImageChooserPanel('image'),
                 FieldPanel('worst_case'),
+                FieldPanel('tips_to_protect_yourself'),
                 FieldPanel('mozilla_says')
             ],
             heading='General Product Details',

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,16 @@ <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 py-3 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 class="row">
           <div class="col-12">

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

@@ -201,6 +201,40 @@
       }
     }
   }
+  .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;
+        }
+      }
+    }
+  }
 
   .subheading-divider {
     padding: 0em 0.5em 0em 0.5em;