Add wifi/bluebooth info & add a type.scss for PNI (#5307)

* add wifi & bluebooth info, add a type.scss for PNI

* adjustment

* fixes

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

@@ -36,8 +36,17 @@
     <div class="product-detail bg-white py-3 py-md-4 px-md-5 {{section_class}}">
       <div class="row intro mb-4">
         <h1 class="h1-heading col-12">{{product.name}}</h1>
-        <a id="product-company-url" class="product-price small-link col-md-8 mb-1 mb-md-0" href="{{product.url}}" target="_blank">{{product.company}} {% if product.product_type == "general" %}${% endif %}{{product.price}}</a>
-        <div class="col-md-4 text-md-right">TODO: wifi and bluetooth</div>
+        <div class="col-12 d-flex flex-column flex-md-row justify-content-between">
+          <a id="product-company-url" class="product-price pni-product-intro-large mb-2 mb-md-0" href="{{product.url}}" target="_blank">{{product.company}} {% if product.product_type == "general" %}${% endif %}{{product.price}}</a>
+          <div>
+            {% if product.uses_wifi %}
+              <span class="connectivity-requirement use-wifi pni-product-intro-large">{% trans "Wi-Fi" %}</span>
+            {% endif %}
+            {% if product.uses_bluetooth %}
+              <span class="connectivity-requirement use-bluetooth pni-product-intro-large">{% trans "Bluetooth" %}</span>
+            {% endif %}
+          </div>
+        </div>
         <div class="col-12 mt-3">
           <p class="body-small">{% blocktrans with date=product.review_date|date:"SHORT_DATE_FORMAT" context "Short date format (e.g. 2003/12/31)" %}Review date: {{ date }}{% endblocktrans %}</p>
         </div>

source/sass/buyers-guide/bg-main.scss

@@ -47,6 +47,10 @@ html {
 @import "../global";
 @import "../utilities";
 
+// PNI specific
+
+@import "./type.scss";
+
 // Header
 
 @import "./components/header.scss";

source/sass/buyers-guide/type.scss

@@ -0,0 +1,6 @@
+// unoffiical text styles used only on PNI pages
+
+.pni-product-intro-large {
+  @include text-base-style($font-family-sans-serif, 400, $gray-60, $gray-60);
+  @include set-text-size(18px, 27px);
+}

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

@@ -50,22 +50,44 @@ $pni-product-breakpoint-larger: $bp-md;
     }
   }
 
-  .small-link {
-    font-size: 18px;
-    font-weight: 400;
-    color: $gray-60;
-  }
-
-  button.small-link {
-    border: none;
-    background: none;
-  }
-
   h3.body,
   h4 {
     font-family: "Nunito Sans";
   }
 
+  .connectivity-requirement {
+    display: inline-flex;
+    align-items: center;
+    color: $gray-60;
+
+    &:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+
+    &:before {
+      content: "";
+      display: inline-block;
+      height: 18px;
+      margin-right: 6px;
+    }
+
+    &.use-wifi {
+      &:before {
+        background: url(../_images/buyers-guide/icon-wifi.svg) center / contain
+          no-repeat;
+        width: 25px;
+      }
+    }
+
+    &.use-bluetooth {
+      &:before {
+        background: url(../_images/buyers-guide/icon-bluetooth.svg) center /
+          contain no-repeat;
+        width: 10px;
+      }
+    }
+  }
+
   .worst-case {
     h2 {
       display: inline-block;