[BUGFIX] Display value of card-footer,

Also support links in footer
phpDocumentor · Apr 21, 2024 · 925b2ea · 925b2ea
1 parent 1af4aad
commit 925b2ea
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 3 deletions.
diff --git a/packages/guides-theme-bootstrap/src/Bootstrap/Directives/CardFooterDirective.php b/packages/guides-theme-bootstrap/src/Bootstrap/Directives/CardFooterDirective.php
@@ -15,12 +15,16 @@
 
 use phpDocumentor\Guides\Bootstrap\Nodes\Card\CardFooterNode;
 use phpDocumentor\Guides\Nodes\CollectionNode;
+use phpDocumentor\Guides\Nodes\Inline\AbstractLinkInlineNode;
 use phpDocumentor\Guides\Nodes\InlineCompoundNode;
 use phpDocumentor\Guides\Nodes\Node;
 use phpDocumentor\Guides\RestructuredText\Directives\SubDirective;
 use phpDocumentor\Guides\RestructuredText\Parser\BlockContext;
 use phpDocumentor\Guides\RestructuredText\Parser\Directive;
 
+use function array_merge;
+use function explode;
+
 class CardFooterDirective extends SubDirective
 {
     public function getName(): string
@@ -33,10 +37,33 @@ protected function processSub(
         CollectionNode $collectionNode,
         Directive $directive,
     ): Node|null {
+        $contentItems = [];
+        $buttonStyle = null;
+        if ($directive->hasOption('button-style')) {
+            $buttonStyle = $directive->getOption('button-style')->toString();
+            if ($buttonStyle === '') {
+                $buttonStyle = 'btn btn-primary';
+            }
+
+            $buttonStyle = explode(' ', $buttonStyle);
+        }
+
+        if ($directive->getDataNode() !== null) {
+            $content = $directive->getDataNode();
+            foreach ($content->getChildren() as $contentItem) {
+                if ($buttonStyle !== null && $contentItem instanceof AbstractLinkInlineNode) {
+                    $contentItem->setClasses(array_merge($contentItem->getClasses(), $buttonStyle));
+                }
+
+                $contentItems[] = $contentItem;
+            }
+        }
+
         return new CardFooterNode(
             $this->getName(),
             $directive->getData(),
-            $directive->getDataNode() ?? new InlineCompoundNode(),
+            new InlineCompoundNode($contentItems),
+            $collectionNode->getChildren(),
         );
     }
 }
diff --git a/packages/guides/resources/template/html/inline/link.html.twig b/packages/guides/resources/template/html/inline/link.html.twig
@@ -1,5 +1,8 @@
 {%- if node.url -%}
-    <a href="{{- node.url -}}"{% for key, value in attributes %} {{- key -}}="{{- value -}}"{% endfor %}>
+    <a href="{{- node.url -}}"
+        {%- for key, value in attributes %} {{- key -}}="{{- value -}}"{% endfor -%}
+        {%- if node.classes %} class="{{ node.classesString }}"{% endif -%}
+    >
     {{- node.value -}}
     </a>
 {%- else -%}

diff --git a/tests/Integration/tests/bootstrap/bootstrap-card-group/expected/index.html b/tests/Integration/tests/bootstrap/bootstrap-card-group/expected/index.html
@@ -77,5 +77,74 @@ <h1>Document Title</h1>
                                 </div>
     </div>
 </div>
+            <div class="section" id="cards-with-buttons-in-the-footer">
+            <h2>Cards with buttons in the footer</h2>
+            <div class="row card-group row-cols-1 row-cols-md-3 g-4">
+    <div class="col">
+            <div class="card h-100">
+            <div class="card-body">
+        <h3 class="card-title">Primary Buttons</h3>
+        <div class="card-text">
+
+    <p>The Page Management Guide introduces TYPO3&#039;s Page Tree and explains how pages are created and managed.</p>
+
+        </div>
+    </div>
+                <div class="card-footer">
+                            <a href="https://example.org/" class="btn btn-primary">12-dev</a> <a href="https://example.org/" class="btn btn-primary">11.5</a> <a href="https://example.org/" class="btn btn-primary">10.4</a>
+                                </div>
+    </div>
+        </div><div class="col">
+            <div class="card h-100">
+            <div class="card-body">
+        <h3 class="card-title">Secondary Buttons</h3>
+        <div class="card-text">
+
+    <p>The Page Management Guide introduces TYPO3&#039;s Page Tree and explains how pages are created and managed.</p>
+
+        </div>
+    </div>
+                <div class="card-footer">
+                            <a href="https://example.org/" class="btn btn-secondary">12-dev</a> <a href="https://example.org/" class="btn btn-secondary">11.5</a> <a href="https://example.org/" class="btn btn-secondary">10.4</a>
+                                </div>
+    </div>
+        </div><div class="col">
+            <div class="card h-100">
+            <div class="card-body">
+        <h3 class="card-title">Link Buttons</h3>
+        <div class="card-text">
+
+    <p>The Page Management Guide introduces TYPO3&#039;s Page Tree and explains how pages are created and managed.</p>
+
+        </div>
+    </div>
+                <div class="card-footer">
+                            <a href="https://example.org/" class="btn btn-link">12-dev</a> <a href="https://example.org/" class="btn btn-link">11.5</a> <a href="https://example.org/" class="btn btn-link">10.4</a>
+                                </div>
+    </div>
+        </div><div class="col">
+            <div class="card h-100">
+            <div class="card-body">
+        <h3 class="card-title">Card with footer values</h3>
+        <div class="card-text">
+
+    <p>Button-style only has effect on content</p>
+
+        </div>
+    </div>
+                <div class="card-footer">
+
+
+
+<ul>
+    <li><a href="https://example.org/">12-dev</a></li>
+    <li><a href="https://example.org/">11.5</a></li>
+    <li><a href="https://example.org/">10.4</a></li>
+</ul>
+
+                    </div>
+    </div>
+        </div></div>
+    </div>
     </div>
                     <!-- content end -->
diff --git a/tests/Integration/tests/bootstrap/bootstrap-card-group/input/index.rst b/tests/Integration/tests/bootstrap/bootstrap-card-group/input/index.rst
@@ -57,3 +57,45 @@ Document Title
         sed diam voluptua.
 
         ..  card-footer:: :ref:`Read more <start>`
+
+Cards with buttons in the footer
+================================
+
+..  card-grid::
+    :columns: 1
+    :columns-md: 3
+    :gap: 4
+    :card-height: 100
+
+    ..  card:: Primary Buttons
+
+        The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.
+
+        ..  card-footer:: `12-dev <https://example.org/>`__ `11.5 <https://example.org/>`__ `10.4 <https://example.org/>`__
+            :button-style: btn btn-primary
+
+
+    ..  card:: Secondary Buttons
+
+        The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.
+
+        ..  card-footer:: `12-dev <https://example.org/>`__ `11.5 <https://example.org/>`__ `10.4 <https://example.org/>`__
+            :button-style: btn btn-secondary
+
+    ..  card:: Link Buttons
+
+        The Page Management Guide introduces TYPO3's Page Tree and explains how pages are created and managed.
+
+        ..  card-footer:: `12-dev <https://example.org/>`__ `11.5 <https://example.org/>`__ `10.4 <https://example.org/>`__
+            :button-style: btn btn-link
+
+    ..  card:: Card with footer values
+
+        Button-style only has effect on content
+
+        ..  card-footer::
+            :button-style: btn btn-primary
+
+            *   `12-dev <https://example.org/>`__
+            *   `11.5 <https://example.org/>`__
+            *   `10.4 <https://example.org/>`__
diff --git a/tests/Integration/tests/bootstrap/bootstrap-cards/expected/index.html b/tests/Integration/tests/bootstrap/bootstrap-cards/expected/index.html
@@ -36,7 +36,15 @@ <h3 class="card-title"><a href="#start">Linked Card Header</a></h3>
     </div>
                 <div class="card-footer">
 
-                                </div>
+
+
+<ul>
+    <li><a href="https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html">12-dev</a></li>
+    <li><a href="https://docs.typo3.org/m/typo3/tutorial-editors/11.5/en-us/Pages/Index.html">11.5</a></li>
+    <li><a href="https://docs.typo3.org/m/typo3/tutorial-editors/10.4/en-us/Pages/Index.html">10.4</a></li>
+</ul>
+
+                    </div>
     </div>
             <div class="card w-50">
             <div class="card-header">