Skip to content

Commit

Permalink
Merge pull request #728 from thejackshelton/dot-notation
Browse files Browse the repository at this point in the history 
search & replace + docs fix
  • Loading branch information
@thejackshelton
thejackshelton authored Apr 28, 2024
2 parents 20077cf + 39fa29b commit fc5a00b
Show file tree
Hide file tree
Showing 23 changed files with 359 additions and 470 deletions.
10 changes: 0 additions & 10 deletions apps/website/src/components/mdx-components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@ import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard
import { Note } from '../note/note';
import { Showcase } from '../showcase/showcase';
import { StatusBanner } from '../status-banner/status-banner';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@qwik-ui/styled';

export const components: Record<string, Component> = {
p: component$<PropsOf<'p'>>(({ ...props }) => {
Expand Down Expand Up @@ -129,10 +123,6 @@ export const components: Record<string, Component> = {
</div>
);
}),
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
AnatomyTable,
APITable,
CodeSnippet,
Expand Down
60 changes: 27 additions & 33 deletions apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,57 @@
import { component$ } from '@builder.io/qwik';
import {
AccordionContent,
AccordionHeader,
AccordionItem,
AccordionRoot,
AccordionTrigger,
} from '@qwik-ui/headless';
import { Accordion } from '@qwik-ui/headless';

export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<AccordionRoot class="w-full">
<AccordionItem class="border-b">
<AccordionHeader as="h4">
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<Accordion.Root class="w-full">
<Accordion.Item class="border-b">
<Accordion.Header as="h4">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>I'm an h4</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">My Heading is an h4!</p>
</AccordionContent>
</AccordionItem>
<AccordionItem class="border-b">
<AccordionHeader as="h5">
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h5">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>I'm an h5</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">My Heading is an h5!</p>
</AccordionContent>
</AccordionItem>
<AccordionItem class="border-b">
<AccordionHeader as="h6">
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h6">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>I'm an h6</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">My Heading is an h6!</p>
</AccordionContent>
</AccordionItem>
</AccordionRoot>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
Expand Down
56 changes: 25 additions & 31 deletions apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,60 @@
import { component$ } from '@builder.io/qwik';
import {
AccordionContent,
AccordionHeader,
AccordionItem,
AccordionRoot,
AccordionTrigger,
} from '@qwik-ui/headless';
import { Accordion } from '@qwik-ui/headless';

export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<AccordionRoot class="w-full">
<AccordionItem class="border-b">
<AccordionHeader as="h3">
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<Accordion.Root class="w-full">
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>Not open by default.</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">I wasn't open by default!</p>
</AccordionContent>
</AccordionItem>
<AccordionItem defaultValue>
<AccordionHeader as="h3">
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
</Accordion.Content>
</Accordion.Item>
<Accordion.Item defaultValue>
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>I'm open!</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
You can open me by default by putting the <strong>defaultValue</strong>{' '}
prop on the Accordion Item.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem class="border-b">
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<h3>
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
<span>Not open by default.</span>
<span class="flex pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</Accordion.Trigger>
</h3>
<AccordionContent>
<Accordion.Content>
<p class="pb-4">I wasn't open by default!</p>
</AccordionContent>
</AccordionItem>
</AccordionRoot>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
Expand Down
56 changes: 25 additions & 31 deletions apps/website/src/routes/docs/headless/accordion/examples/disabled.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,51 @@
import { component$ } from '@builder.io/qwik';
import {
AccordionContent,
AccordionHeader,
AccordionItem,
AccordionRoot,
AccordionTrigger,
} from '@qwik-ui/headless';
import { Accordion } from '@qwik-ui/headless';

// disabled
export default component$(() => {
return (
<>
<div class="flex w-full justify-center">
<AccordionRoot class="w-full">
<AccordionItem class="border-b">
<AccordionHeader as="h3">
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<Accordion.Root class="w-full">
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<span>I'm enabled!</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Hey, I'm enabled! This is because I don't use the{' '}
<strong>disabled</strong> prop on the trigger.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem class="border-b">
<AccordionHeader as="h3">
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<Accordion.Header as="h3">
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
<span>I'm enabled!</span>
<span class="pl-2">
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
+
</p>
</span>
</AccordionTrigger>
</AccordionHeader>
<AccordionContent>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
<p class="pb-4">
Hey, I'm enabled! This is because I don't use the{' '}
<strong>disabled</strong> prop on the trigger.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem class="border-b">
</Accordion.Content>
</Accordion.Item>
<Accordion.Item class="border-b">
<h3>
<AccordionTrigger
<Accordion.Trigger
disabled
class="group flex w-full items-center justify-between py-4 text-left hover:bg-accent/50 aria-disabled:cursor-not-allowed aria-expanded:rounded-none"
>
Expand All @@ -66,13 +60,13 @@ export default component$(() => {
+
</p>
</span>
</AccordionTrigger>
</Accordion.Trigger>
</h3>
<AccordionContent>
<Accordion.Content>
<p class="pb-4">You shouldn't be able to see this!</p>
</AccordionContent>
</AccordionItem>
</AccordionRoot>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
</>
);
Expand Down
26 changes: 10 additions & 16 deletions apps/website/src/routes/docs/headless/accordion/examples/dynamic.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import { component$, useSignal, useStore } from '@builder.io/qwik';
import {
AccordionContent,
AccordionHeader,
AccordionItem,
AccordionRoot,
AccordionTrigger,
} from '@qwik-ui/headless';
import { Accordion } from '@qwik-ui/headless';

interface DynamicAccordionProps {
itemIndexToDelete?: number;
Expand Down Expand Up @@ -53,20 +47,20 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
</label>
</div>

<AccordionRoot class="w-full">
<Accordion.Root class="w-full">
{itemStore.map(({ label, id }, index) => {
return (
<AccordionItem id={`${id}`} key={id} class="border-b">
<AccordionHeader>
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
<Accordion.Item id={`${id}`} key={id} class="border-b">
<Accordion.Header>
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
{label}
</AccordionTrigger>
</AccordionHeader>
<AccordionContent class="py-4 pt-0">index: {index}</AccordionContent>
</AccordionItem>
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content class="py-4 pt-0">index: {index}</Accordion.Content>
</Accordion.Item>
);
})}
</AccordionRoot>
</Accordion.Root>
<div class="flex gap-2 md:gap-4">
<button
style={{ color: 'green', marginTop: '1rem' }}
Expand Down
Loading

0 comments on commit fc5a00b

Please sign in to comment.