Adeyemi AdetunjiandRotimi Best
cbf6ae7e63
* feat: remove tinymce & replace org sidebar * chore: PR Fixes * chore: move ui font into src dir * remove files in vite config * use google font import for loading font * remove custom font * more fonts update * remove font bold * more removals of font bold * fix import * checkpoint * chore: checkpoint (add course & lms shadcn sidebar) * minor css improvements and try out font sans * chore: replace carbon components with shadcn's * chore: replace carbon components with shadcn _ v3 * chore: ui fixes & storybook update * feat: UI cleanup * fix: quick ui fixes * chore: update pnpm-lock.yaml with new dependencies and versions; fix output.css formatting * chore: add isloading to button * feat: add loading state to button stories * chore: feedback fixes * fix: feedback fixes * chore: remove console * fix: PR comments * fix: PR comments --------- Co-authored-by: Rotimi Best <[email protected]>
53 lines
1.7 KiB
Svelte
53 lines
1.7 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@cio/ui/base/collapsible';
|
|
import { Button } from '@cio/ui';
|
|
import { FIELDS } from './fields';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Atom/Collapsible',
|
|
component: Collapsible,
|
|
parameters: {
|
|
layout: 'centered',
|
|
controls: {
|
|
include: FIELDS
|
|
}
|
|
},
|
|
tags: ['autodocs']
|
|
});
|
|
</script>
|
|
|
|
<Story name="Default">
|
|
{#snippet template()}
|
|
<Collapsible class="w-[350px] space-y-2">
|
|
<div class="flex items-center justify-between space-x-4 px-4">
|
|
<h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
|
|
<CollapsibleTrigger>
|
|
<Button.Root variant="ghost" size="sm" class="w-9 p-0">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="h-4 w-4"
|
|
>
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
<span class="sr-only">Toggle</span>
|
|
</Button.Root>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
|
|
<CollapsibleContent class="space-y-2">
|
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
|
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
{/snippet}
|
|
</Story>
|