alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
3 import { expect } from "storybook/test";
4 import LanguageBar from "./LanguageBar.svelte";
5
6 const languages = [
7 { name: "TypeScript", percentage: 58, share: 58.2 },
8 { name: "Svelte", percentage: 31, share: 30.7 },
9 { name: "CSS", percentage: 10, share: 10.1 },
10 { name: "Other", percentage: 0, share: 0.4 }
11 ];
12 type PlayContext = Pick<
13 StoryContext<Record<string, unknown>>,
14 "canvas" | "canvasElement" | "userEvent"
15 >;
16
17 const expandBreakdown = async ({ canvas, canvasElement, userEvent }: PlayContext) => {
18 const details = canvasElement.querySelector("details");
19 const summary = details?.querySelector("summary");
20 if (!(summary instanceof HTMLElement)) throw new Error("language summary was not rendered");
21 await userEvent.click(summary);
22 await expect(details).toHaveAttribute("open");
23 await expect(canvas.getByText("TypeScript")).toBeVisible();
24 };
25
26 const { Story } = defineMeta({
27 title: "Repo/LanguageBar",
28 component: LanguageBar,
29 tags: ["autodocs"],
30 args: { languages }
31 });
32</script>
33
34<Story name="Collapsed language bar" />
35<Story name="Expanded percentage breakdown" play={expandBreakdown} />
36<Story
37 name="Sub-percent slice"
38 args={{ languages: [{ name: "Other", percentage: 0, share: 0.4 }] }}
39/>
40<Story name="No languages" args={{ languages: [] }} />