MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add collapsible library groups in app (#5739)

Browse Source 
* feat: add collapsible library groups in app

* feat: use accordion rather than custom

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
kk
2026-04-16 16:44:52 +03:00
committed by GitHub
parent 7b5c746757
commit 3c2cc7568d
4 changed files with 88 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/ui/src/stories/base/Accordion.stories.ts
View File

@@ -156,6 +156,35 @@ export const NestedContent: StoryObj = {
}),
}
export const Divider: StoryObj = {
render: () => ({
components: { Accordion },
template: /*html*/ `
<div class="flex flex-col gap-4">
<Accordion divider open-by-default>
<template #title>
<span class="text-base font-semibold text-contrast">Category A</span>
</template>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 1</span>
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 2</span>
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 3</span>
</div>
</Accordion>
<Accordion divider>
<template #title>
<span class="text-base font-semibold text-contrast">Category B</span>
</template>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 4</span>
<span class="px-3 py-2 bg-bg-raised rounded text-sm">Item 5</span>
</div>
</Accordion>
</div>
`,
}),
}
export const AllStates: StoryObj = {
render: () => ({
components: { Accordion },