refactor(primevue): use new accordion component

antoinezanardi · Sep 8, 2024 · cf2f549 · cf2f549
1 parent 794157f
commit cf2f549
Show file tree

Hide file tree

Showing 7 changed files with 68,098 additions and 68,097 deletions.
diff --git a/app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue b/app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue
@@ -16,49 +16,58 @@
 
     <PrimeVueDivider/>
 
-    <div
-      v-if="!roles"
-      id="loading-roles-container"
-      class="flex flex-col items-center justify-center"
+    <ClientOnly
+      :fallback="$t('components.AboutAvailableRoles.loadingRoles')"
+      fallback-tag="span"
     >
-      <TextProgressSpinner
-        id="loading-roles-spinner"
-        :text="$t('components.AboutAvailableRoles.loadingRoles')"
-      />
-    </div>
+      <div
+        v-if="!roles"
+        id="loading-roles-container"
+        class="flex flex-col items-center justify-center"
+      >
+        <TextProgressSpinner
+          id="loading-roles-spinner"
+          :text="$t('components.AboutAvailableRoles.loadingRoles')"
+        />
+      </div>
 
-    <div v-else>
-      <p id="about-available-roles-first-section">
-        {{ availableRolesText }}
-      </p>
+      <div v-else>
+        <p id="about-available-roles-first-section">
+          {{ availableRolesText }}
+        </p>
 
-      <PrimeVueAccordion
-        class="w-full"
-        multiple
-      >
-        <PrimeVueAccordionTab
-          v-for="role in roles"
-          :key="role.name"
-          :pt="{ 'headerAction': { 'aria-label': getAvailableRoleAccordionHeaderAriaLabel(role.name) } }"
+        <PrimeVueAccordion
+          class="w-full"
+          multiple
         >
-          <template #header>
-            <div class="available-role-image-header flex items-center">
-              <RoleImage
-                :alt="getAvailableRoleHeaderImageAlt(role.name)"
-                :role-name="role.name"
-                sizes="40"
-              />
+          <PrimeVueAccordionPanel
+            v-for="role in roles"
+            :key="role.name"
+            :value="role.name"
+          >
+            <PrimeVueAccordionHeader
+              :aria-label="getAvailableRoleAccordionHeaderAriaLabel(role.name)"
+            >
+              <div class="available-role-image-header flex items-center">
+                <RoleImage
+                  :alt="getAvailableRoleHeaderImageAlt(role.name)"
+                  :role-name="role.name"
+                  sizes="40"
+                />
 
-              <div class="ms-2">
-                {{ getRoleNameLabel(role.name) }}
+                <div class="ms-2">
+                  {{ getRoleNameLabel(role.name) }}
+                </div>
               </div>
-            </div>
-          </template>
+            </PrimeVueAccordionHeader>
 
-          <AboutAvailableRoleDescription :role="role"/>
-        </PrimeVueAccordionTab>
-      </PrimeVueAccordion>
-    </div>
+            <PrimeVueAccordionContent>
+              <AboutAvailableRoleDescription :role="role"/>
+            </PrimeVueAccordionContent>
+          </PrimeVueAccordionPanel>
+        </PrimeVueAccordion>
+      </div>
+    </ClientOnly>
   </div>
 </template>
 

diff --git a/config/eslint/flat-configs/eslint.vue-config.mjs b/config/eslint/flat-configs/eslint.vue-config.mjs
@@ -220,6 +220,7 @@ const ESLINT_VUE_CONFIG = {
           "VueDraggable",
           "VueCountdown",
           "VueEllipseProgress",
+          "ClientOnly",
         ],
       },
     ],

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -138,7 +138,9 @@ export default defineNuxtConfig({
         "Menu",
         "ProgressSpinner",
         "Accordion",
-        "AccordionTab",
+        "AccordionPanel",
+        "AccordionHeader",
+        "AccordionContent",
         "Badge",
         "InputGroup",
         "InputText",

diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "docker:production-example:start": "docker compose -f docker/werewolves-assistant-production-example/docker-compose.yml up -d",
     "docker:production-example:stop": "docker compose -f docker/werewolves-assistant-production-example/docker-compose.yml down",
     "docker:production-example:reset": "npm run docker:production-example:stop && npm run docker:production-example:start",
-    "playwright:codegen": "npx playwright codegen http://localhost:3000",
+    "playwright:codegen": "npx playwright codegen http://localhost:4000",
     "script:create-branch": "scripts/create-git-branch.sh",
     "script:create-pull-request": "scripts/create-pull-request.sh",
     "script:check-acceptance-features-shard": "scripts/check-acceptance-features-shard.sh tests/acceptance",

diff --git a/tests/acceptance/features/about/features/about.feature b/tests/acceptance/features/about/features/about.feature
@@ -29,28 +29,28 @@ Feature: ❓ About Page
     Given the user is on about page
 
     When the progressbar with name "Loading roles…" is hidden
-    Then the button with name "Illustration of the Werewolf" should be visible
-    And the button with name "Illustration of the Three Brothers" should be visible
-    And the button with name "Illustration of the Witch" should be visible
-    And the button with name "Illustration of the Actor" should be visible
+    Then the button with name "Click to expand the description of the Werewolf role" should be visible
+    And the button with name "Click to expand the description of the Three Brothers role" should be visible
+    And the button with name "Click to expand the description of the Witch role" should be visible
+    And the button with name "Click to expand the description of the Actor role" should be visible
     And the img with name "Illustration of the Werewolf role on the left description" should be hidden
-    And the text "Each night, they devour a Villager. During the day, they try to conceal their nocturnal identity to escape public vengeance." under the region with name "Illustration of the Werewolf" should be hidden
+    And the text "Each night, they devour a Villager. During the day, they try to conceal their nocturnal identity to escape public vengeance." under the region with name "Click to expand the description of the Werewolf role" should be hidden
 
-    When the user clicks on the button with name "Illustration of the Werewolf"
-    Then the text "Each night, they devour a Villager. During the day, they try to conceal their nocturnal identity to escape public vengeance." under the region with name "Illustration of the Werewolf" should be visible
-    And the text "Base Game" under the region with name "Illustration of the Werewolf" should be visible
+    When the user clicks on the button with name "Click to expand the description of the Werewolf role"
+    Then the text "Each night, they devour a Villager. During the day, they try to conceal their nocturnal identity to escape public vengeance." under the region with name "Click to expand the description of the Werewolf role" should be visible
+    And the text "Base Game" under the region with name "Click to expand the description of the Werewolf role" should be visible
     And the img with name "Illustration of the Werewolf role on the left description" should be visible
 
-    When the user clicks on the button with name "Illustration of the Pied Piper"
-    Then the text "Each night, they devour a Villager. During the day, they try to conceal their nocturnal identity to escape public vengeance." under the region with name "Illustration of the Werewolf" should be visible
+    When the user clicks on the button with name "Click to expand the description of the Pied Piper role"
+    Then the text "Each night, they devour a Villager. During the day, they try to conceal their nocturnal identity to escape public vengeance." under the region with name "Click to expand the description of the Werewolf role" should be visible
     And the img with name "Illustration of the Werewolf role on the left description" should be visible
-    And the text "Base Game" under the region with name "Illustration of the Werewolf" should be visible
-    And the text "Ignominiously chased from the village, he returned years later under the guise of a false identity to exact his terrible revenge." under the region with name "Illustration of the Pied Piper" should be visible
+    And the text "Base Game" under the region with name "Click to expand the description of the Werewolf role" should be visible
+    And the text "Ignominiously chased from the village, he returned years later under the guise of a false identity to exact his terrible revenge." under the region with name "Click to expand the description of the Pied Piper role" should be visible
     And the img with name "Illustration of the Pied Piper role on the left description" should be visible
-    And the text "Lonely" under the region with name "Illustration of the Pied Piper" should be visible
-    And the text "New Moon Expansion" under the region with name "Illustration of the Pied Piper" should be visible
+    And the text "Lonely" under the region with name "Click to expand the description of the Pied Piper role" should be visible
+    And the text "New Moon Expansion" under the region with name "Click to expand the description of the Pied Piper role" should be visible
 
-    When the user clicks on the button with name "Illustration of the Pied Piper"
+    When the user clicks on the button with name "Click to expand the description of the Pied Piper role"
     Then the img with name "Illustration of the Pied Piper role on the left description" should be hidden
 
   Scenario: ❓ User goes on YouTube to watch a tutorial by clicking on the link