Added benefit fixtures (alpha)

ghost/portal/src/components/common/ProductsSection.js

@@ -1,5 +1,6 @@
 import React, {useContext, useEffect, useState} from 'react';
 import Switch from '../common/Switch';
+import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
 import {getAllProducts, getCurrencySymbol, getPriceString, getStripeAmount, isCookiesDisabled} from '../../utils/helpers';
 import AppContext from '../../AppContext';
 
@@ -140,8 +141,8 @@ export const ProductsSectionStyles = ({site}) => {
         }
 
         .gh-portal-product-description {
-            font-size: 1.4rem;
+            font-size: 1.3rem;
-            line-height: 1.5em;
+            line-height: 1.45em;
             text-align: center;
             color: var(--grey5);
             margin-bottom: 24px;
@@ -168,7 +169,7 @@ export const ProductsSectionStyles = ({site}) => {
             align-self: flex-end;
             font-size: 1.3rem;
             line-height: 1.6em;
-            color: var(--grey7);
+            color: var(--grey4);
             letter-spacing: 0.3px;
             margin-left: 2px;
         }
@@ -183,6 +184,37 @@ export const ProductsSectionStyles = ({site}) => {
             height: 18px;
         }
 
+        .gh-portal-product-benefits {
+            font-size: 1.3rem;
+            line-height: 1.45em;
+            margin: -8px 0 0;
+            padding: 20px 8px;
+            border-top: 1px solid var(--grey12);
+            color: var(--grey3);
+        }
+
+        .gh-portal-product-benefit {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 20px;
+        }
+
+        .gh-portal-benefit-checkmark {
+            width: 12px;
+            height: 12px;
+            min-width: 12px;
+            margin: 3px 6px 0 0;
+            overflow: visible;
+        }
+
+        .gh-portal-benefit-checkmark path {
+            stroke-width: 2.5px;
+        }
+
+        .gh-portal-benefit-title {
+            flex-grow: 1;
+        }
+
         @media (max-width: 480px) {
             .gh-portal-products {
                 margin: 0 -32px;
@@ -300,6 +332,21 @@ function Checkbox({name, id, onProductSelect, isChecked, disabled = false}) {
     );
 }
 
+function ProductBenefits({product}) {
+    if (!product.benefits || !product.benefits.length) {
+        return null;
+    }
+
+    return product.benefits.map((benefit) => {
+        return (
+            <div className="gh-portal-product-benefit">
+                <CheckmarkIcon className='gh-portal-benefit-checkmark' alt=''/>
+                <div className="gh-portal-benefit-title">{benefit.title}</div>
+            </div>
+        );
+    });
+}
+
 function ProductCardFooterAlternatePrice({price}) {
     const {site} = useContext(AppContext);
     const {portal_plans: portalPlans} = site;
@@ -350,6 +397,7 @@ function ProductCard({product}) {
                 }} />
                 <h4 className="gh-portal-product-name">{product.name}</h4>
                 <div className="gh-portal-product-description">{product.description}</div>
+                <div className="gh-portal-product-benefits"><ProductBenefits product={product} /></div>
             </div>
             <ProductCardFooter product={product} />
         </div>

ghost/portal/src/images/icons/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>check-1</title><path class="a" d="M23.25.749,8.158,22.308a2.2,2.2,0,0,1-3.569.059L.75,17.249"/></svg>

ghost/portal/src/utils/fixtures.js

@@ -73,6 +73,28 @@ const products = [
                 type: 'recurring',
                 interval: 'year'
             }
+        ],
+        benefits: [
+            {
+                id: 'a1',
+                title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
+            },
+            {
+                id: 'a2',
+                title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
+            },
+            {
+                id: 'a3',
+                title: 'Nullam hendrerit accumsan facilisis'
+            },
+            {
+                id: 'a4',
+                title: 'Vivamus vel elit lectus'
+            },
+            {
+                id: 'a5',
+                title: 'Maecenas tempus cursus metus'
+            }
         ]
     },
     {
@@ -124,6 +146,24 @@ const products = [
                 type: 'recurring',
                 interval: 'year'
             }
+        ],
+        benefits: [
+            {
+                id: 'b1',
+                title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
+            },
+            {
+                id: 'b2',
+                title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
+            },
+            {
+                id: 'b3',
+                title: 'Nullam hendrerit accumsan facilisis'
+            },
+            {
+                id: 'b4',
+                title: 'Vivamus vel elit lectus'
+            }
         ]
     },
     {
@@ -175,6 +215,20 @@ const products = [
                 type: 'recurring',
                 interval: 'year'
             }
+        ],
+        benefits: [
+            {
+                id: 'c1',
+                title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
+            },
+            {
+                id: 'c2',
+                title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
+            },
+            {
+                id: 'c3',
+                title: 'Nullam hendrerit accumsan facilisis'
+            }
         ]
     }
 ];
@@ -194,7 +248,7 @@ export const site = {
     portal_products: ['product_1', 'product_2', 'product_3'],
     products,
     prices,
-    allow_self_signup: false,
+    allow_self_signup: true,
     members_signup_access: 'all',
     free_price_name: 'Free',
     free_price_description: 'Free preview',