Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add popover stories
Browse files Browse the repository at this point in the history
riccardoperra committed Nov 12, 2023
1 parent ad993bf commit de2994e
Showing 4 changed files with 183 additions and 3 deletions.
4 changes: 3 additions & 1 deletion packages/storybook/package.json
Original file line number Diff line number Diff line change
@@ -35,7 +35,9 @@
"vite-tsconfig-paths": "^4.2.1"
},
"dependencies": {
"@kobalte/core": "^0.11.0",
"@kobalte/utils": "^0.9.0",
"@vanilla-extract/css": "^1.11.0",
"solid-js": "^1.8.5"
"solid-js": "^1.7.3"
}
}
3 changes: 2 additions & 1 deletion packages/storybook/src/stories/Checkbox.stories.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,8 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

export const CheckboxDefault: Story = {
export const CheckboxStory: Story = {
name: "Checkbox",
args: {
label: "My label",
},
52 changes: 52 additions & 0 deletions packages/storybook/src/stories/Popover.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type { Meta, StoryObj } from "storybook-solidjs";

import { Button, Popover, PopoverContent, PopoverTrigger } from "@codeui/kit";
import { DocsItemsContainer } from "./components/Section.jsx";
import { As } from "@kobalte/core";

// More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
const meta = {
title: "DesignSystem/Popover",
component: Popover,
tags: ["autodocs"],
argTypes: {},
} satisfies Meta<typeof Popover>;

export default meta;

type Story = StoryObj<typeof meta>;

export const PopoverStory: Story = {
name: "Popover",
render: props => (
<Popover {...props}>
<PopoverTrigger asChild>
<As component={Button} theme={"secondary"}>
Open
</As>
</PopoverTrigger>
<PopoverContent title={"Title"}>
About Kobalte A UI toolkit for building accessible web apps and design systems
with SolidJS.
</PopoverContent>
</Popover>
),
};

export const CustomPosition: Story = {
render: () => (
<DocsItemsContainer>
<Popover placement={"bottom-start"}>
<PopoverTrigger asChild>
<As component={Button} theme={"secondary"}>
Custom position
</As>
</PopoverTrigger>
<PopoverContent title={"Title"}>
About Kobalte A UI toolkit for building accessible web apps and design systems
with SolidJS.
</PopoverContent>
</Popover>
</DocsItemsContainer>
),
};
127 changes: 126 additions & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit de2994e

Please sign in to comment.