Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(primevue): use new accordion component #834

Merged
merged 1 commit into from
Sep 8, 2024
Merged

refactor(primevue): use new accordion component #834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 45 additions & 36 deletions app/components/pages/about/AboutAvailableRoles/AboutAvailableRoles.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
1 change: 1 addition & 0 deletions config/eslint/flat-configs/eslint.vue-config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@ const ESLINT_VUE_CONFIG = {
"VueDraggable",
"VueCountdown",
"VueEllipseProgress",
"ClientOnly",
],
},
],
Expand Down
4 changes: 3 additions & 1 deletion nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,9 @@ export default defineNuxtConfig({
"Menu",
"ProgressSpinner",
"Accordion",
"AccordionTab",
"AccordionPanel",
"AccordionHeader",
"AccordionContent",
"Badge",
"InputGroup",
"InputText",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
30 changes: 15 additions & 15 deletions tests/acceptance/features/about/features/about.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading
Loading