Tweaked the configuration block directive

Author: javiereguiluz

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

@@ -1,9 +1,14 @@
 <div class="configuration-block">
-    <ul class="simple">
+    <ul class="configuration-tabs">
         {% for block in blocks %}
             <li>
-                <em>{{ block.language }}</em>
-                {{ block.code|raw }}
+                <a href="#" {{ loop.first ? 'data-active' }} data-language="{{ block.language }}">{{ block.language }}</a>
             </li>
         {% endfor %}
     </ul>
+
+    {% for block in blocks %}
+        <div class="configuration-codeblock" data-language="{{ block.language }}" style="{{ not loop.first ? 'display: none' }}">
+            {{ block.code|raw }}
+        </div>
+    {% endfor %}

tests/fixtures/expected/blocks/directives/configuration-block.html

@@ -1,23 +1,22 @@
 <div class="configuration-block">
-    <ul class="simple">
-                    <li>
-                <em>YAML</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
-    <div class="codeblock-scroll">
-        <pre class="codeblock-lines">1</pre>
-        <pre class="codeblock-code"><code><span class="hljs-comment"># app/config/services.yml</span>
-</code></pre>
+    <ul class="configuration-tabs">
+        <li> <a href="#" data-active data-language="YAML">YAML</a> </li>
+        <li> <a href="#" data-language="PHP">PHP</a> </li>
+    </ul>
+    <div class="configuration-codeblock" data-language="YAML" style="">
+        <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
+            <div class="codeblock-scroll">
+                <pre class="codeblock-lines">1</pre>
+                <pre class="codeblock-code"><code><span class="hljs-comment"># app/config/services.yml</span></code></pre>
+            </div>
+        </div>
     </div>
-</div>
-            </li>
-                    <li>
-                <em>PHP</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-php">
-    <div class="codeblock-scroll">
-        <pre class="codeblock-lines">1</pre>
-        <pre class="codeblock-code"><code><span class="hljs-comment">// config/routes.php</span>
-</code></pre>
+    <div class="configuration-codeblock" data-language="PHP" style="display: none">
+        <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-php">
+            <div class="codeblock-scroll">
+                <pre class="codeblock-lines">1</pre>
+                <pre class="codeblock-code"><code><span class="hljs-comment">// config/routes.php</span></code></pre>
+            </div>
+        </div>
     </div>
 </div>
-            </li>
-            </ul></div>

tests/fixtures/expected/main/datetime.html

@@ -190,10 +190,13 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </div>
 <p>And configuration blocks:</p>
 <div class="configuration-block">
-    <ul class="simple">
-                    <li>
-                <em>YAML</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
+    <ul class="configuration-tabs">
+        <li> <a href="#" data-active data-language="YAML">YAML</a> </li>
+        <li> <a href="#" data-language="XML">XML</a> </li>
+        <li> <a href="#" data-language="PHP">PHP</a> </li>
+    </ul>
+    <div class="configuration-codeblock" data-language="YAML" style="">
+        <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -212,10 +215,9 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </code></pre>
     </div>
 </div>
-            </li>
-                    <li>
-                <em>XML</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-xml">
+        </div>
+        <div class="configuration-codeblock" data-language="XML" style="display: none">
+            <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-xml">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -260,10 +262,9 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </code></pre>
     </div>
 </div>
-            </li>
-                    <li>
-                <em>PHP</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-php">
+        </div>
+        <div class="configuration-codeblock" data-language="PHP" style="display: none">
+            <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-php">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -288,8 +289,8 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </code></pre>
     </div>
 </div>
-            </li>
-            </ul></div>
+        </div>
+    </div>
 </div>
 </div>
 <div class="section">