Skip to content

Commit

Permalink
docs(headless): add dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
GregOnNet committed May 12, 2023
1 parent 2cb9985 commit ea24c61
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 8 deletions.
1 change: 1 addition & 0 deletions apps/website/src/_state/component-statuses.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
headless: {
Accordion: 'Planned',
Carousel: 'Planned',
Dialog: 'Planned',
Select: 'Draft',
Tabs: 'Planned',
Toggle: 'Planned',
Expand Down
146 changes: 146 additions & 0 deletions apps/website/src/routes/docs/headless/(components)/dialog/examples.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import { component$, Slot } from '@builder.io/qwik';
import { Accordion, AccordionItem, Checkbox, Dialog } from '@qwik-ui/headless';
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';

export const Example01 = component$(() => {
return (
<PreviewCodeExample>
<div q:slot="actualComponent">
<Dialog.Root>
<Dialog.Trigger>
<button>Open Dialog</button>
</Dialog.Trigger>
<Dialog.Portal>Hallo Welt</Dialog.Portal>
</Dialog.Root>
</div>

<div q:slot="codeExample">
<Slot />
</div>
</PreviewCodeExample>
);
});

export const Example02 = component$(() => {
return (
<PreviewCodeExample>
<div q:slot="actualComponent">
<Accordion class="bg-slate-100 dark:bg-gray-700 w-80 rounded-xl border-slate-200 dark:border-gray-600 border-[1px] overflow-hidden">
<AccordionItem
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left"
label="Is Qwik production-ready?"
>
<p class="bg-slate-200 dark:bg-gray-900 p-4">
Yes, Qwik just hit a major milestone and launched v1.0! All API
features are considered stable. Start building the future, today!
</p>
</AccordionItem>
<AccordionItem
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left"
label="Is there a UI library I can use with Qwik?"
>
<p class="bg-slate-200 dark:bg-gray-900 p-4">
You're looking at one right now!
</p>
</AccordionItem>
<AccordionItem
class="px-4 py-2 w-full hover:bg-slate-300 dark:hover:bg-gray-800 border-slate-200 dark:border-gray-600 border-[1px] text-left"
label="How can I contribute to Qwik UI?"
>
<p class="bg-slate-200 dark:bg-gray-900 p-4">
We're glad you asked. Come join us at the Qwikifiers Discord
server or find the{` `}
<a
class="text-[var(--qwik-light-blue)] inline"
href="https://github.com/qwikifiers/qwik-ui"
>
Qwik UI repository
</a>
{` `}
on GitHub!
</p>
</AccordionItem>
</Accordion>
</div>

<div q:slot="codeExample">
<Slot />
</div>
</PreviewCodeExample>
);
});

export const Example03 = component$(() => {
return (
<PreviewCodeExample>
<div q:slot="actualComponent">
<Accordion class="mt-4 p-4 bg-slate-800">
<AccordionItem label="Availability">
<ul>
<li>
<Checkbox.Label class="flex" for="in-stock">
<Checkbox.Root id="in-stock" />
In stock
</Checkbox.Label>
</li>
<li>
<Checkbox.Label class="flex" for="out-of-stock">
<Checkbox.Root id="out-of-stock" />
Out of stock
</Checkbox.Label>
</li>
<li>
<Checkbox.Label class="flex" for="coming-soon">
<Checkbox.Root id="coming-soon" />
Coming soon
</Checkbox.Label>
</li>
</ul>
</AccordionItem>
<AccordionItem label="Promotions">
<ul>
<li>
<Checkbox.Label class="flex" for="fifty-off">
<Checkbox.Root id="fifty-off" />
50% off on selected products
</Checkbox.Label>
</li>
<li>
<Checkbox.Label class="flex" for="winter-special">
<Checkbox.Root id="winter-special" />
Winter specials
</Checkbox.Label>
</li>
</ul>
</AccordionItem>
<AccordionItem label="Category">
<ul>
<li>
<Checkbox.Label class="flex" for="books">
<Checkbox.Root id="books" />
Books
</Checkbox.Label>
</li>
<li>
<Checkbox.Label class="flex" for="stationery">
<Checkbox.Root id="stationery" />
Stationery
</Checkbox.Label>
</li>
<li>
<Checkbox.Label class="flex" for="storage">
<Checkbox.Root id="storage" />
Storage
</Checkbox.Label>
</li>
</ul>
</AccordionItem>
</Accordion>
</div>

<div q:slot="codeExample">
<Slot />
</div>
</PreviewCodeExample>
);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: Qwik UI | Dialog
---

import { Dialog } from '@qwik-ui/headless';
import { Example01 } from './examples';
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';

# Dialog

#### A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. ([Definition comes from Radix-UI](https://www.radix-ui.com/docs/primitives/components/dialog))

{' '}

<Example01>
```tsx
<Dialog.Root>
<Dialog.Trigger>
<button>Open Dialog</button>
</Dialog.Trigger>
<Dialog.Portal>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
aliquid architecto delectus deleniti dolor
</p>
</Dialog.Portal>

</Dialog.Root>
```
</Example01>

## Accessibility

### Keyboard interaction

<KeyboardInteractionTable
keyDescriptors={[
{
keyTitle: 'Escape',
description: 'Closes the dialog.',
},
]}
/>
1 change: 1 addition & 0 deletions apps/website/src/routes/docs/headless/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

- [Accordion](/docs/headless/accordion)
- [Carousel](/docs/headless/carousel)
- [Dialog](/docs/headless/dialog)
- [Select](/docs/headless/select)
- [Tabs](/docs/headless/tabs)
- [Toggle](/docs/headless/toggle)
Expand Down
16 changes: 8 additions & 8 deletions packages/kit-headless/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
export * from './components/accordion/accordion';
export * from './components/badge/badge';
export * from './components/breadcrumb';
export * from './components/button-group/button-group';
export * from './components/card';
export * as Carousel from './components/carousel/carousel';
export * from './components/carousel/use';
export * from './components/pagination/pagination';
export * as Checkbox from './components/checkbox/checkbox';
export * from './components/collapse/collapse';
export * as Dialog from './components/dialog/dialog';
export * from './components/drawer';
export * from './components/input-phone';
export * as Input from './components/input/input';
export * from './components/spinner/spinner';
export * from './components/menu/menu';
export * from './components/navigation-bar/navigation-bar';
export * from './components/pagination/pagination';
export * from './components/popover';
export * from './components/rating/rating';
export * as Select from './components/select/select';
export * from './components/slider';
export * from './components/spinner/spinner';
export * from './components/tabs/tabs';
export * from './components/tooltip/tooltip';
export * as Checkbox from './components/checkbox/checkbox';
export * as CheckboxProps from './components/checkbox/checkbox';
export * from './components/select/select';
export * from './components/slider';
export * from './components/breadcrumb';
export * from './components/navigation-bar/navigation-bar';

0 comments on commit ea24c61

Please sign in to comment.