Add Activos chips and product PH

css/main.css

@@ -95,5 +95,13 @@ h2.category-name {
     color: #596992;
     font-size: 1.1rem;
     margin-bottom: 0.2rem;
+}
+
+.product-body .chip {
+    background: linear-gradient(25deg, rgba(24,40,72,.8) 0%, rgba(24,40,72,.7) 100%);
+    color: white;
+}
 
+.product-body .chip.ph {
+    background: #3B5FBF!important;
 }

js/vademecum.js

@@ -1157,13 +1157,17 @@ const categories = [
   "Protección Solar",
 ]
 
-const Section = (title, paragraph) => (
+const Chip = (label, key, className) => (
+  <span className={`chip ${className||''}`} key={key}>{label}</span>
+);
+
+const Section = (title, paragraph, prepend) => (
   <div>
     <h4 className="section-name">
       { title }
     </h4>
     <p className="section-body">
-      { paragraph }
+      { prepend }{ paragraph }
     </p>
   </div>
 );
@@ -1183,6 +1187,9 @@ const Product = (product, key) => (
       {
         product.application && Section('Aplicación', product.application)
       }
+      {
+        product.actives && Section('Activos', product.actives.map((a, i) => Chip(a, i)), product.ph&&Chip(`PH ${product.ph}`, null, 'ph'))
+      }
     </div>
   </div>
 );

lib/vademecum.js

@@ -722,12 +722,19 @@ var products = {
 var dom = React.createElement;
 var categories = ["Higiene", "Máscaras", "Ácido Hialurónico", "Peeling", "Corporales", "Hombres", "Protección Intensiva", "Monodosis", "Activos Concentrados", "Protección Solar"];
 
-var Section = function Section(title, paragraph) {
+var Chip = function Chip(label, key, className) {
+  return dom("span", {
+    className: "chip ".concat(className || ''),
+    key: key
+  }, label);
+};
+
+var Section = function Section(title, paragraph, prepend) {
   return dom("div", null, dom("h4", {
     className: "section-name"
   }, title), dom("p", {
     className: "section-body"
-  }, paragraph));
+  }, prepend, paragraph));
 };
 
 var Product = function Product(product, key) {
@@ -739,7 +746,9 @@ var Product = function Product(product, key) {
     className: "product-body"
   }, dom("p", {
     className: "product-short-desc"
-  }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application)));
+  }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('Activos', product.actives.map(function (a, i) {
+    return Chip(a, i);
+  }), product.ph && Chip("PH ".concat(product.ph), null, 'ph'))));
 };
 
 var Category = function Category(categoryName, products) {