Added beta search helper implementation (#15236)

refs: TryGhost/Team#1732

- We're testing out the feasibility of having a {{search}} helper that outputs an pre-styled icon to trigger search.

ghost/admin/app/services/feature.js

@@ -62,6 +62,7 @@ export default class FeatureService extends Service {
     @feature('newsletterPaywall') newsletterPaywall;
     @feature('freeTrial') freeTrial;
     @feature('memberAttribution') memberAttribution;
+    @feature('searchHelper') searchHelper;
 
     _user = null;
 

ghost/admin/app/templates/settings/labs.hbs

@@ -252,6 +252,19 @@
                         </div>
                     </div>
                 </div>
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Search helper</h4>
+                            <p class="gh-expandable-description">
+                               Enable the <code>&#123;&#123;search&#125;&#125;</code> handlebars helper.
+                            </p>
+                        </div>
+                        <div class="for-switch">
+                           <GhFeatureFlag @flag="searchHelper" />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {{/if}}

ghost/core/core/frontend/helpers/search.js

@@ -0,0 +1,42 @@
+// # search helper
+
+const {SafeString} = require('../services/handlebars');
+const {labs} = require('../services/proxy');
+
+function search() {
+    const svg = `<style>.gh-search-icon {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                width: 32px;
+                height: 32px;
+                padding: 0;
+                border: 0;
+                color: inherit;
+                background-color: transparent;
+                cursor: pointer;
+                outline: none;
+            }</style>
+            <button class="gh-search-icon" aria-label="search" data-ghost-search>
+                <svg width="20" height="20" fill="none" viewBox="0 0 24 24">
+                    <path d="M14.949 14.949a1 1 0 0 1 1.414 0l6.344 6.344a1 1 0 0 1-1.414 1.414l-6.344-6.344a1 1 0 0 1 0-1.414Z"
+                    fill="currentColor"/>
+                    <path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-9 7a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z" fill="currentColor"/>
+                </svg>
+            </button>`;
+
+    return new SafeString(svg);
+}
+
+module.exports = function searchLabsWrapper() {
+    let self = this;
+    let args = arguments;
+
+    return labs.enabledHelper({
+        flagKey: 'searchHelper',
+        flagName: 'Search helper',
+        helperName: 'search'
+    }, () => {
+        return search.apply(self, args); // eslint-disable-line camelcase
+    });
+};

ghost/core/core/shared/labs.js

@@ -29,7 +29,8 @@ const ALPHA_FEATURES = [
     'urlCache',
     'beforeAfterCard',
     'freeTrial',
-    'memberAttribution'
+    'memberAttribution',
+    'searchHelper'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];

ghost/core/test/unit/frontend/helpers/search.test.js

@@ -0,0 +1,54 @@
+const should = require('should');
+const sinon = require('sinon');
+const searchHelper = require('../../../../core/frontend/helpers/search');
+const handlebars = require('../../../../core/frontend/services/theme-engine/engine').handlebars;
+const labs = require('../../../../core/shared/labs');
+
+describe('Search helper', function () {
+    before(function () {
+        handlebars.registerHelper('search', searchHelper);
+    });
+
+    beforeEach(function () {
+        sinon.stub(labs, 'isSet').returns(true);
+    });
+
+    afterEach(function () {
+        sinon.restore();
+    });
+
+    function shouldCompileToExpected(templateString, expected) {
+        const template = handlebars.compile(templateString);
+        const result = template();
+
+        result.should.eql(expected);
+    }
+
+    describe('{{search}}', function () {
+        it('outputs the exact svg string for the search icon', function () {
+            const templateString = '{{search}}';
+            const expected = `<style>.gh-search-icon {
+                display: inline-flex;
+                justify-content: center;
+                align-items: center;
+                width: 32px;
+                height: 32px;
+                padding: 0;
+                border: 0;
+                color: inherit;
+                background-color: transparent;
+                cursor: pointer;
+                outline: none;
+            }</style>
+            <button class="gh-search-icon" aria-label="search" data-ghost-search>
+                <svg width="20" height="20" fill="none" viewBox="0 0 24 24">
+                    <path d="M14.949 14.949a1 1 0 0 1 1.414 0l6.344 6.344a1 1 0 0 1-1.414 1.414l-6.344-6.344a1 1 0 0 1 0-1.414Z"
+                    fill="currentColor"/>
+                    <path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-9 7a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z" fill="currentColor"/>
+                </svg>
+            </button>`;
+
+            shouldCompileToExpected(templateString, expected);
+        });
+    });
+});

ghost/core/test/unit/frontend/services/theme-engine/handlebars/helpers.test.js

@@ -13,7 +13,7 @@ describe('Helpers', function () {
         'next_post', 'page_url', 'pagination', 'plural', 'post_class', 'prev_post', 'price', 'raw', 'reading_time', 't', 'tags', 'title','total_members', 'total_paid_members', 'twitter_url',
         'url', 'comment_count'
     ];
-    const experimentalHelpers = ['match', 'tiers', 'comments'];
+    const experimentalHelpers = ['match', 'tiers', 'comments', 'search'];
 
     const expectedHelpers = _.concat(hbsHelpers, ghostHelpers, experimentalHelpers);