Show a visible link to the docs of each package

Author: javiereguiluz

ux.symfony.com/assets/icons/fluent-emoji-flat/open-book.svg

@@ -15,6 +15,27 @@
     opacity: 1;
   }
 
+  &.DocsLink-sm {
+    border-radius: var(--border-radius-sm, .5rem);
+    height: 52px;
+    opacity: 1;
+    padding: var(--space-small, .25rem) var(--space-large, 1rem);
+    transform: translateY(50%);
+
+    p {
+      margin-bottom: 0;
+    }
+
+    svg {
+      fill: none;
+      position: relative;
+      bottom: 2px;
+    }
+
+    &:hover {
+      transform: translateY(50%);
+    }
+  }
 }
 .DocsLink_content {
   display: flex;

ux.symfony.com/assets/styles/components/_DocsLink.scss

@@ -17,9 +17,10 @@
 #[AsTwigComponent]
 class DocsLink
 {
+    public string $size = 'md';
     public string $url;
     public string $title;
-    public string $text;
+    public ?string $text = null;
 
     public ?string $icon = null;
 
@@ -28,4 +29,10 @@ public function isExternal(): bool
     {
         return !str_starts_with($this->url, 'https://symfony.com');
     }
+
+    #[ExposeInTemplate]
+    public function isSmall(): bool
+    {
+        return 'sm' === $this->size;
+    }
 }

ux.symfony.com/src/Twig/Components/DocsLink.php

@@ -1,17 +1,29 @@
-<div {{ attributes.defaults({class: 'DocsLink'}) }}>
+<div {{ attributes.defaults({class: 'DocsLink DocsLink-' ~ size }) }}>
     <div class="DocsLink_content">
-        <p class="DocsLink_title ubuntu-header">
-            <a href="{{ url }}" class="DocsLink_link"
-               rel="{{ isExternal ? 'external noopened noreferrer' }}"
-            >{{ title }}</a>
-            {% if icon|default %}
-                <twig:ux:icon name="{{ icon }}" class="Icon DocsLink_arrow"/>
-            {% elseif isExternal %}
-                <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);" class="Icon DocsLink_arrow"/>
-            {% endif %}
-        </p>
-        <div class="DocsLink_description">
-            <p>{{ text }}</p>
-        </div>
+        {% if isSmall %}
+            <p class="d-flex align-items-center">
+                <twig:ux:icon name="fluent-emoji-flat:open-book" class="Icon me-2" font-size="32"/>
+                <a href="{{ url }}" class="DocsLink_link"
+                   rel="{{ isExternal ? 'external noopened noreferrer' }}"
+                >{{ title }}</a>
+            </p>
+        {% else %}
+            <p class="DocsLink_title ubuntu-header">
+                <a href="{{ url }}" class="DocsLink_link"
+                   rel="{{ isExternal ? 'external noopened noreferrer' }}"
+                >{{ title }}</a>
+                {% if icon|default %}
+                    <twig:ux:icon name="{{ icon }}" class="Icon DocsLink_arrow"/>
+                {% elseif isExternal %}
+                    <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);" class="Icon DocsLink_arrow"/>
+                {% endif %}
+            </p>
+        {% endif %}
+
+        {% if text %}
+            <div class="DocsLink_description">
+                <p>{{ text }}</p>
+            </div>
+        {% endif %}
     </div>
 </div>

ux.symfony.com/templates/components/DocsLink.html.twig

@@ -12,15 +12,21 @@
             </p>
         </div>
 
-        {% if command is not defined or command %}
-            <div class="d-flex justify-content-center">
+        <div class="d-flex justify-content-center">
+            {% if command is not defined or command %}
                 <twig:TerminalCommand
                     aria-label="Composer command to install {{ package.humanName }}"
                     command="{{ package.composerRequireCommand }}"
                     style="--color-accent: {{ package.color }}; transform: translateY(50%);"
                 />
-            </div>
-        {% endif %}
+            {% endif %}
 
+            <twig:DocsLink
+                class="ms-3"
+                size="sm"
+                title="Read the docs"
+                url="{{ package.officialDocsUrl }}"
+            />
+        </div>
     </div>
 </div>