Changing tabs to use the configuration-block template

This re-adds the data-language and makes them work identically.

Author: weaverryan

src/Directive/ConfigurationBlockDirective.php

@@ -66,6 +66,7 @@ public function processSub(Parser $parser, ?Node $document, string $variable, st
             'directives/configuration-block.html.twig',
             [
                 'blocks' => $blocks,
+                'title' => 'Configuration formats',
             ]
         );
 

src/Directive/TabsDirective.php

@@ -28,7 +28,7 @@ public function processSub(Parser $parser, ?Node $document, string $variable, st
             throw new \RuntimeException(sprintf('The "tabs" directive requires a title: ".. tabs:: Title".'));
         }
 
-        $tabs = [];
+        $blocks = [];
         foreach ($document->getNodes() as $groupTabNode) {
             if (!$groupTabNode instanceof GroupTabNode) {
                 throw new \RuntimeException(sprintf('Only ".. group-tab::" content can appear within the "tab" directive.'));
@@ -39,18 +39,19 @@ public function processSub(Parser $parser, ?Node $document, string $variable, st
                 $content .= $node->render();
             }
 
-            $tabs[] = [
+            $blocks[] = [
                 'hash' => hash('sha1', $groupTabNode->getTabName()),
-                'tabName' => $groupTabNode->getTabName(),
-                'content' => $content,
+                'language_label' => $groupTabNode->getTabName(),
+                'language' => $groupTabNode->getSluggedTabName(),
+                'code' => $content,
             ];
          }
 
         $wrapperDiv = $parser->renderTemplate(
-            'directives/tabs.html.twig',
+            'directives/configuration-block.html.twig',
             [
+                'blocks' => $blocks,
                 'title' => $tabsTitle,
-                'tabs' => $tabs,
             ]
         );
 

src/Node/GroupTabNode.php

@@ -33,4 +33,9 @@ public function getTabName(): string
     {
         return $this->tabName;
     }
+
+    public function getSluggedTabName(): string
+    {
+        return strtolower(str_replace(' ', '-', $this->tabName));
+    }
 }

src/Templates/default/html/directives/configuration-block.html.twig

@@ -1,5 +1,5 @@
 <div class="configuration-block">
-    <div role="tablist" aria-label="Configuration formats" class="configuration-tabs configuration-tabs-length-{{ blocks|length }}">
+    <div role="tablist" aria-label="{{ title }}" class="configuration-tabs configuration-tabs-length-{{ blocks|length }}">
         {% for block in blocks %}
             <button role="tab" type="button" data-language="{{ block.language }}"
                 aria-controls="{{ 'configuration-block-tabpanel-' ~ block.hash }}" aria-selected="{{ loop.first ? 'true' : 'false' }}"

src/Templates/default/html/directives/tabs.html.twig

@@ -1,15 +1,14 @@
 <div class="configuration-block">
-    <div role="tablist" aria-label="UX Installation"
-         class="configuration-tabs configuration-tabs-length-2">
-        <button role="tab" type="button" aria-controls="tab-tabpanel-97a055193fa707f2025ee25bb469c74aa29b2c6c" aria-selected="true" data-active="true">
+    <div role="tablist" aria-label="UX Installation" class="configuration-tabs configuration-tabs-length-2">
+        <button role="tab" type="button" data-language="webpack-encore" aria-controls="configuration-block-tabpanel-97a055193fa707f2025ee25bb469c74aa29b2c6c" aria-selected="true" data-active="true">
             <span>Webpack Encore</span>
         </button>
-        <button role="tab" type="button" aria-controls="tab-tabpanel-1865de6b2b585de79e8700d7968050722e562c44" aria-selected="false" tabindex="-1">
+        <button role="tab" type="button" data-language="assetmapper" aria-controls="configuration-block-tabpanel-1865de6b2b585de79e8700d7968050722e562c44" aria-selected="false" tabindex="-1">
             <span>AssetMapper</span>
         </button>
     </div>
 
-    <div role="tabpanel" id="tab-tabpanel-97a055193fa707f2025ee25bb469c74aa29b2c6c" aria-label="Webpack Encore" class="configuration-codeblock" style="">
+    <div role="tabpanel" id="configuration-block-tabpanel-97a055193fa707f2025ee25bb469c74aa29b2c6c" aria-label="Webpack Encore" class="configuration-codeblock" data-language="webpack-encore" style="">
         <p>Webpack Encore stuff!</p>
         <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-yaml">
             <div class="codeblock-scroll">
@@ -18,7 +17,7 @@
             </div>
         </div>
     </div>
-    <div role="tabpanel" id="tab-tabpanel-1865de6b2b585de79e8700d7968050722e562c44" aria-label="AssetMapper" class="configuration-codeblock" style="display: none">
+    <div role="tabpanel" id="configuration-block-tabpanel-1865de6b2b585de79e8700d7968050722e562c44" aria-label="AssetMapper" class="configuration-codeblock" data-language="assetmapper" style="display: none">
         <p>AssetMapper stuff!</p>
         <p>And another paragraph.</p>
     </div>