✨ Added {{search}} theme helper

closes: https://github.com/TryGhost/Team/issues/1732

- adds a theme helper which outputs a working search button with a standard icon
- the icon adopts whatever the current color is from css, and has a set of default styles
- styles can be overridden with !important or the data attribute
- alternatively, any element in a theme may be turned into a search button by adding data-ghost-search
- this is meant to be a simple tool for non-theme-developers to easily add a search icon to their themes in a way that doesn't require css or html knowledge

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

@@ -4,26 +4,11 @@ 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>`;
+    // We want this to output as one line, but splitting for readability
+    const svg = '<button class="gh-search-icon" aria-label="search" data-ghost-search '
+              + 'style="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;">'
+              + '<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);
 }

ghost/core/core/shared/labs.js

@@ -17,7 +17,8 @@ const messages = {
 const GA_FEATURES = [
     'newsletterPaywall',
     'freeTrial',
-    'compExpiring'
+    'compExpiring',
+    'searchHelper'
 ];
 
 // NOTE: this allowlist is meant to be used to filter out any unexpected
@@ -30,8 +31,7 @@ const ALPHA_FEATURES = [
     'auditLog',
     'urlCache',
     'beforeAfterCard',
-    'memberAttribution',
-    'searchHelper'
+    'memberAttribution'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];

ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap

@@ -619,7 +619,7 @@ exports[`Settings API Edit Can edit a setting 2: [headers] 1`] = `
 Object {
   "access-control-allow-origin": "http://127.0.0.1:2369",
   "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
-  "content-length": "3365",
+  "content-length": "3387",
   "content-type": "application/json; charset=utf-8",
   "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
   "vary": "Origin, Accept-Encoding",

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

@@ -27,26 +27,7 @@ describe('Search helper', function () {
     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>`;
+            const expected = '<button class="gh-search-icon" aria-label="search" data-ghost-search style="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;"><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);
         });