Merge branch '1690-badge-refactor' into 'main'

Refactor tier badges

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/4153

Merged-by: David O'Regan <doregan@gitlab.com>
Approved-by: David O'Regan <doregan@gitlab.com>
Approved-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

2 files changed, 25 insertions, 100 deletions

diff --git a/spec/frontend/search/google_search_spec.js b/spec/frontend/search/google_search_spec.js
index 431ca0c0..cbf7f53f 100644
--- a/spec/frontend/search/google_search_spec.js
+++ b/spec/frontend/search/google_search_spec.js
@@ -152,7 +152,7 @@ describe('content/frontend/search/recently_viewed.js', () => {
 
   it('should set a cookie with the current page URL and title', () => {
     // Set up the DOM
-    document.body.innerHTML = '<h1>Test Page</h1>';
+    document.title = 'Test Page | GitLab';
     const location = {
       ...window.location,
       pathname: '/test-page',
@@ -174,7 +174,7 @@ describe('content/frontend/search/recently_viewed.js', () => {
   });
 
   it('should limit the number of items in the history to RECENT_HISTORY_ITEMS', () => {
-    document.body.innerHTML = '<h1>Test Page</h1>';
+    document.title = 'Test Page | GitLab';
 
     // Set a cookie with RECENT_HISTORY_ITEMS pages in it, then track this page
     setCookie('pageHistory', JSON.stringify(mockHistoryCookie), 365);
@@ -188,7 +188,7 @@ describe('content/frontend/search/recently_viewed.js', () => {
   });
 
   it('should not add duplicate history items', () => {
-    document.body.innerHTML = '<h1>Test Page</h1>';
+    document.title = 'Test Page | GitLab';
 
     // Set a cookie with the current page URL
     const initialPageHistory = [{ path: '/test-page', title: 'Test Page' }];
@@ -204,15 +204,4 @@ describe('content/frontend/search/recently_viewed.js', () => {
     expect(pageHistory[0].path).toBe('/test-page');
     expect(pageHistory[0].title).toBe('Test Page');
   });
-
-  it('should not set a cookie if the page does not have a title', () => {
-    // Set up the DOM without a h1 element
-    document.body.innerHTML = '<p>Test Page</p>';
-
-    trackPageHistory();
-
-    // Check that the cookie was not set
-    const cookieValue = getCookie('pageHistory');
-    expect(cookieValue).toBeNull();
-  });
 });
diff --git a/spec/lib/filters/badges_spec.rb b/spec/lib/filters/badges_spec.rb
index aefbdefa..09d34353 100644
--- a/spec/lib/filters/badges_spec.rb
+++ b/spec/lib/filters/badges_spec.rb
@@ -12,23 +12,7 @@ describe BadgesFilter do
       let(:content) { '<strong>(FREE)</strong>' }
 
       it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger free"></span>')
-      end
-    end
-
-    context 'when <strong>(PREMIUM)</strong> badge' do
-      let(:content) { '<strong>(PREMIUM)</strong>' }
-
-      it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger premium"></span>')
-      end
-    end
-
-    context 'when <strong>(ULTIMATE)</strong> badge' do
-      let(:content) { '<strong>(ULTIMATE)</strong>' }
-
-      it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger ultimate"></span>')
+        expect(run).to eq('<span data-component="docs-badges"><span data-type="tier" data-value="free"></span></span>')
       end
     end
 
@@ -36,47 +20,31 @@ describe BadgesFilter do
       let(:content) { '<strong>(FREE SELF)</strong>' }
 
       it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger free-self"></span>')
-      end
-    end
-
-    context 'when <strong>(PREMIUM SELF)</strong> badge' do
-      let(:content) { '<strong>(PREMIUM SELF)</strong>' }
-
-      it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger premium-self"></span>')
-      end
-    end
-
-    context 'when <strong>(ULTIMATE SELF)</strong> badge' do
-      let(:content) { '<strong>(ULTIMATE SELF)</strong>' }
-
-      it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger ultimate-self"></span>')
+        expect(run).to eq('<span data-component="docs-badges"><span data-type="tier" data-value="free"></span><span data-type="offering" data-value="self"></span></span>')
       end
     end
 
-    context 'when <strong>(FREE SAAS)</strong> badge' do
-      let(:content) { '<strong>(FREE SAAS)</strong>' }
+    context 'when <strong>(FREE EXPERIMENT)</strong> badge' do
+      let(:content) { '<strong>(FREE EXPERIMENT)</strong>' }
 
       it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger free-saas"></span>')
+        expect(run).to eq('<span data-component="docs-badges"><span data-type="tier" data-value="free"></span><span data-type="status" data-value="experiment"></span></span>')
       end
     end
 
-    context 'when <strong>(PREMIUM SAAS)</strong> badge' do
-      let(:content) { '<strong>(PREMIUM SAAS)</strong>' }
+    context 'when <strong>(SAAS EXPERIMENT)</strong> badge' do
+      let(:content) { '<strong>(SAAS EXPERIMENT)</strong>' }
 
       it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger premium-saas"></span>')
+        expect(run).to eq('<span data-component="docs-badges"><span data-type="offering" data-value="saas"></span><span data-type="status" data-value="experiment"></span></span>')
       end
     end
 
-    context 'when <strong>(ULTIMATE SAAS)</strong> badge' do
-      let(:content) { '<strong>(ULTIMATE SAAS)</strong>' }
+    context 'when <strong>(BETA)</strong> badge' do
+      let(:content) { '<strong>(BETA)</strong>' }
 
       it 'returns correct HTML' do
-        expect(run).to eq('<span class="badge-trigger ultimate-saas"></span>')
+        expect(run).to eq('<span data-component="docs-badges"><span data-type="status" data-value="beta"></span></span>')
       end
     end
   end
@@ -90,23 +58,7 @@ describe BadgesFilter do
       let(:content) { '**(FREE)**' }
 
       it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger free"></span>')
-      end
-    end
-
-    context 'when **(PREMIUM)** badge' do
-      let(:content) { '**(PREMIUM)**' }
-
-      it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger premium"></span>')
-      end
-    end
-
-    context 'when **(ULTIMATE)** badge' do
-      let(:content) { '**(ULTIMATE)**' }
-
-      it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger ultimate"></span>')
+        expect(run_from_markdown).to eq('<span data-component="docs-badges"><span data-type="tier" data-value="free"></span></span>')
       end
     end
 
@@ -114,47 +66,31 @@ describe BadgesFilter do
       let(:content) { '**(FREE SELF)**' }
 
       it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger free-self"></span>')
-      end
-    end
-
-    context 'when **(PREMIUM SELF)** badge' do
-      let(:content) { '**(PREMIUM SELF)**' }
-
-      it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger premium-self"></span>')
-      end
-    end
-
-    context 'when **(ULTIMATE SELF)** badge' do
-      let(:content) { '**(ULTIMATE SELF)**' }
-
-      it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger ultimate-self"></span>')
+        expect(run_from_markdown).to eq('<span data-component="docs-badges"><span data-type="tier" data-value="free"></span><span data-type="offering" data-value="self"></span></span>')
       end
     end
 
-    context 'when **(FREE SAAS)** badge' do
-      let(:content) { '**(FREE SAAS)**' }
+    context 'when **(FREE EXPERIMENT)** badge' do
+      let(:content) { '**(FREE EXPERIMENT)**' }
 
       it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger free-saas"></span>')
+        expect(run_from_markdown).to eq('<span data-component="docs-badges"><span data-type="tier" data-value="free"></span><span data-type="status" data-value="experiment"></span></span>')
       end
     end
 
-    context 'when **(PREMIUM SAAS)** badge' do
-      let(:content) { '**(PREMIUM SAAS)**' }
+    context 'when **(SAAS EXPERIMENT)** badge' do
+      let(:content) { '**(SAAS EXPERIMENT)**' }
 
       it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger premium-saas"></span>')
+        expect(run_from_markdown).to eq('<span data-component="docs-badges"><span data-type="offering" data-value="saas"></span><span data-type="status" data-value="experiment"></span></span>')
       end
     end
 
-    context 'when **(ULTIMATE SAAS)** badge' do
-      let(:content) { '**(ULTIMATE SAAS)**' }
+    context 'when **(BETA)** badge' do
+      let(:content) { '**(BETA)**' }
 
       it 'returns correct HTML' do
-        expect(run_from_markdown).to eq('<span class="badge-trigger ultimate-saas"></span>')
+        expect(run_from_markdown).to eq('<span data-component="docs-badges"><span data-type="status" data-value="beta"></span></span>')
       end
     end
   end