From 966f2ebff40ea8caf0fd5f274d43b4262d562afe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:26:39 +0200
Subject: [PATCH] fix(docs): show headings and icons in post cards (#2022)

---
 .../cypress/snapshots/components/card.snapshot.ts    |  2 +-
 .../components/alert/alert.snapshot.stories.ts       |  2 +-
 .../src/stories/components/button/button.stories.ts  |  2 +-
 .../src/stories/components/card/card.stories.ts      |  8 ++++----
 .../src/stories/components/table/table.stories.ts    | 12 ++++++------
 .../src/stories/components/toast/toast.stories.ts    |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/documentation/cypress/snapshots/components/card.snapshot.ts b/packages/documentation/cypress/snapshots/components/card.snapshot.ts
index ae94a1e6d1..58912ee507 100644
--- a/packages/documentation/cypress/snapshots/components/card.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/card.snapshot.ts
@@ -1,7 +1,7 @@
 describe('Card', () => {
   it('default', () => {
     cy.visit('/iframe.html?id=snapshots--card');
-    cy.get('.card', { timeout: 30000 }).should('be.visible');
+    cy.get('.card post-icon', { timeout: 30000 }).should('be.visible');
     cy.percySnapshot('Cards', { widths: [1440] });
   });
 });
diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
index 1dde310040..a9abe74154 100644
--- a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -36,7 +36,7 @@ export const Alert: Story = {
           : null}
                     ${args.icon !== 'null'
                       ? html`
-                        <post-icon aria-hidden="true" class="alert-icon" name=${args.icon}/>
+                        <post-icon aria-hidden="true" class="alert-icon" name=${args.icon}></post-icon>
                       `
                       : null}
                     ${args.action
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 259646fe84..6c06858e21 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -221,7 +221,7 @@ const Template = {
       `;
     } else {
       const icon = html`
-        <post-icon aria-hidden="true" name=${args.icon}/>
+        <post-icon aria-hidden="true" name=${args.icon}></post-icon>
       `;
       const iconOnlyContent = html`
         <span class="visually-hidden">${args.text}</span>
diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts
index 30ae00b986..e3f6a9ccdc 100644
--- a/packages/documentation/src/stories/components/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/card/card.stories.ts
@@ -354,10 +354,10 @@ export const CustomContent: Story = {
     showHeader: true,
     showFooter: true,
     customHeader: `<div class="card-header d-flex">
-  <post-icon aria-hidden="true" class="fs-small-huge" name="3217"/>
+  <post-icon aria-hidden="true" class="fs-small-huge" name="3217"></post-icon>
   <h3 class="fw-bold mb-0 me-auto">Detaloj de la Uzanto</h3>
   <a href="#" aria-labelledby="detaloj-title">
-    <post-icon aria-hidden="true" class="fs-large" name="3020"/>
+    <post-icon aria-hidden="true" class="fs-large" name="3020"></post-icon>
     <span class="visually-hidden">Administrado de kontoj</span>
   </a>
 </div>`,
@@ -367,14 +367,14 @@ export const CustomContent: Story = {
       Mr<br>Pronomo Familinomo<br>Strato 1<br>1234 Urbo
     </address>
     <a href="#">
-      <post-icon aria-label="Redaktu adreson" class="fs-large" name="3193"/>
+      <post-icon aria-label="Redaktu adreson" class="fs-large" name="3193"></post-icon>
       <span class="visually-hidden">Redaktu adreson</span>
     </a>
   </li>
   <li class="list-group-item d-flex align-items-center justify-content-between">
     <p class="mb-0">Lingvo: <span class="fw-bold">Germana</span></p>
     <a href="#">
-      <post-icon aria-label="Redakti lingvon" class="fs-large" name="3193"/>
+      <post-icon aria-label="Redakti lingvon" class="fs-large" name="3193"></post-icon>
       <span class="visually-hidden">Redakti lingvon</span>
     </a>
   </li>
diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
index 3863617f9b..cf48fcbbdb 100644
--- a/packages/documentation/src/stories/components/table/table.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.stories.ts
@@ -181,11 +181,11 @@ export const TableWithButtons: Story = {
         <td>
           <button class="btn btn-secondary btn-icon btn-md">
             <span class="visually-hidden">Edit</span>
-            <post-icon aria-hidden="true" name="2012"/>
+            <post-icon aria-hidden="true" name="2012"></post-icon>
           </button>
           <button class="btn btn-primary btn-icon btn-md ms-2">
             <span class="visually-hidden">Edit</span>
-            <post-icon aria-hidden="true" name="3193"/>
+            <post-icon aria-hidden="true" name="3193"></post-icon>
           </button>
         </td>
       </tr>
@@ -196,11 +196,11 @@ export const TableWithButtons: Story = {
         <td>
           <button class="btn btn-secondary btn-icon btn-md">
             <span class="visually-hidden">Edit</span>
-            <post-icon aria-hidden="true" name="2012"/>
+            <post-icon aria-hidden="true" name="2012"></post-icon>
           </button>
           <button class="btn btn-primary btn-icon btn-md ms-2">
             <span class="visually-hidden">Edit</span>
-            <post-icon aria-hidden="true" name="3193"/>
+            <post-icon aria-hidden="true" name="3193"></post-icon>
           </button>
         </td>
       </tr>
@@ -211,11 +211,11 @@ export const TableWithButtons: Story = {
         <td>
           <button class="btn btn-secondary btn-icon btn-md">
             <span class="visually-hidden">Edit</span>
-            <post-icon aria-hidden="true" name="2012"/>
+            <post-icon aria-hidden="true" name="2012"></post-icon>
           </button>
           <button class="btn btn-primary btn-icon btn-md ms-2">
             <span class="visually-hidden">Edit</span>
-            <post-icon aria-hidden="true" name="3193"/>
+            <post-icon aria-hidden="true" name="3193"></post-icon>
           </button>
         </td>
       </tr>
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
index 3c3fbc327d..5d9ec93480 100644
--- a/packages/documentation/src/stories/components/toast/toast.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.stories.ts
@@ -370,7 +370,7 @@ function render(args: Args, context: StoryContext) {
   const toastIcon =
     !args.noIcon && args.icon !== 'null'
       ? html`
-        <post-icon aria-hidden="true" name=${args.icon}/>
+        <post-icon aria-hidden="true" name=${args.icon}></post-icon>
       `
       : null;