From 88bf282e6db39610c2293de55d6e7a58560f99a8 Mon Sep 17 00:00:00 2001
From: Sarah German <sgerman@gitlab.com>
Date: Wed, 24 Aug 2022 18:06:38 -0500
Subject: Add a Nanoc filter to improve tabs usability

---
 Rules                               |  1 +
 content/frontend/default/default.js |  5 ++---
 lib/filters/tabs.rb                 | 22 ++++++++++++++++++++++
 spec/lib/filters/tabs_spec.rb       | 28 ++++++++++++++++++++++++++++
 4 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 lib/filters/tabs.rb
 create mode 100644 spec/lib/filters/tabs_spec.rb

diff --git a/Rules b/Rules
index d263a129..359d35e2 100644
--- a/Rules
+++ b/Rules
@@ -98,6 +98,7 @@ compile '/**/*.md' do
     filter :admonition
     filter :icons
     filter :introduced_in
+    filter :tabs
 
     if item[:layout].nil?
       layout '/default.*'
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index 5290ab52..22a41b7b 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -86,10 +86,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const tabTitles = [];
     const tabContents = [];
 
-    const tabTitleElement = tabset.firstElementChild.tagName;
-    tabset.querySelectorAll(`${tabTitleElement}`).forEach((tab) => {
+    tabset.querySelectorAll('.tab-title').forEach((tab) => {
       tabTitles.push(tab.innerText);
-      tabContents.push(getNextUntil(tab, tabTitleElement));
+      tabContents.push(getNextUntil(tab, '.tab-title'));
     });
 
     return new Vue({
diff --git a/lib/filters/tabs.rb b/lib/filters/tabs.rb
new file mode 100644
index 00000000..08385383
--- /dev/null
+++ b/lib/filters/tabs.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class TabsFilter < Nanoc::Filter
+  identifier :tabs
+
+  TABSET_PATTERN = %r{<p>::Tabs</p>(?<tabs_wrapper>.*?)<p>::EndTabs</p>}mx.freeze
+  TAB_TITLE_PATTERN = %r{<p>:::TabTitle\s(?<tab_title>.*?)</p>}mx.freeze
+
+  def run(content, params = {})
+    new_content = content.gsub(TAB_TITLE_PATTERN) { generateTitles(Regexp.last_match[:tab_title]) }
+    new_content.gsub(TABSET_PATTERN) { generateWrapper(Regexp.last_match[:tabs_wrapper]) }
+  end
+
+  def generateTitles(content)
+    %(<div class="tab-title">#{content}</div>)
+  end
+
+  def generateWrapper(content)
+    %(<div class="js-tabs">#{content}</div>)
+  end
+
+end
diff --git a/spec/lib/filters/tabs_spec.rb b/spec/lib/filters/tabs_spec.rb
new file mode 100644
index 00000000..6ae64b0a
--- /dev/null
+++ b/spec/lib/filters/tabs_spec.rb
@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+require 'filters/tabs'
+
+describe TabsFilter do
+  describe '#run' do
+    let(:content) { nil }
+
+    subject(:run) { described_class.new.run(content) }
+
+    context 'Tab titles' do
+      let(:content) { '<p>:::TabTitle Cats</p>' }
+
+      it 'returns correct HTML' do
+        expect(run).to eq('<div class="tab-title">Cats</div>')
+      end
+    end
+
+    context 'Tab wrapper' do
+      let(:content) { '<p>::Tabs</p>Tabs content<p>::EndTabs</p>' }
+
+      it 'returns correct HTML' do
+        expect(run).to eq("<div class=\"js-tabs\">Tabs content</div>")
+      end
+    end
+
+  end
+end
-- 
cgit v1.2.3