Skip to content

Commit dc13473

Browse files
ditadiditadi
committed
feat: add styled breadcrumb draft
1 parent 1b26020 commit dc13473

File tree

9 files changed

+246
-34
lines changed

9 files changed

+246
-34
lines changed

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const statusByComponent: ComponentKitsStatuses = {
1515
Avatar: ComponentStatus.Draft,
1616
Alert: ComponentStatus.Beta,
1717
Badge: ComponentStatus.Beta,
18+
Breadcrumb: ComponentStatus.Draft,
1819
Button: ComponentStatus.Beta,
1920
Card: ComponentStatus.Beta,
2021
Checkbox: ComponentStatus.Draft,

‎apps/website/src/routes/docs/styled/breadcrumb/BreadcrumbWrapper.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎apps/website/src/routes/docs/styled/breadcrumb/PathIcon.tsx

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎apps/website/src/routes/docs/styled/breadcrumb/examples/primary.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import {
3+
Breadcrumb,
4+
BreadcrumbItem,
5+
BreadcrumbLink,
6+
BreadcrumbList,
7+
BreadcrumbSeparator,
8+
BreadcrumbPage,
9+
} from '@qwik-ui/styled';
10+
11+
export default component$(() => {
12+
return (
13+
<Breadcrumb>
14+
<BreadcrumbList>
15+
<BreadcrumbItem>
16+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
17+
</BreadcrumbItem>
18+
<BreadcrumbSeparator />
19+
<BreadcrumbItem>
20+
<BreadcrumbLink href="/docs/styled/introduction/">Components</BreadcrumbLink>
21+
</BreadcrumbItem>
22+
<BreadcrumbSeparator />
23+
<BreadcrumbItem>
24+
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
25+
</BreadcrumbItem>
26+
</BreadcrumbList>
27+
</Breadcrumb>
28+
);
29+
});

‎apps/website/src/routes/docs/styled/breadcrumb/index.mdx

Lines changed: 123 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,129 @@ title: Qwik UI | Styled Breadcrumb Component
44

55
import { statusByComponent } from '~/_state/component-statuses';
66

7+
<StatusBanner status={statusByComponent.styled.Breadcrumb} />
8+
79
# Breadcrumb
810

9-
Much like a digital Hansel and Gretel, the Qwik UI Styled breadcrumb leaves a trail of modern markers, making navigation a breeze through the enchanting forest of pages
11+
Displays the path to the current resource using a hierarchy of links.
1012

11-
<StatusBanner status={statusByComponent.styled.Breadcrumb} />
13+
<Showcase name="primary" />
14+
15+
## Installation
16+
17+
### Run the following cli command or copy/paste the component code into your project
18+
19+
```sh
20+
qwik-ui add breadcrumb
21+
```
22+
23+
```tsx
24+
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
25+
import { cn } from '@qwik-ui/utils';
26+
import { LuChevronRight } from '@qwikest/icons/lucide';
27+
28+
export type BreadcrumbProps = PropsOf<'nav'>;
29+
const Breadcrumb = component$<BreadcrumbProps>(() => {
30+
return (
31+
<nav aria-label="breadcrumb">
32+
<Slot />
33+
</nav>
34+
);
35+
});
36+
37+
type BreadcrumbListProps = PropsOf<'ol'>;
38+
const BreadcrumbList = component$<BreadcrumbListProps>((props) => {
39+
return (
40+
<ol
41+
class={cn(
42+
'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
43+
props.class,
44+
)}
45+
{...props}
46+
>
47+
<Slot />
48+
</ol>
49+
);
50+
});
51+
52+
type BreadcrumbItemProps = PropsOf<'li'>;
53+
const BreadcrumbItem = component$<BreadcrumbItemProps>((props) => {
54+
return (
55+
<li class={cn('inline-flex items-center gap-1.5', props.class)} {...props}>
56+
<Slot />
57+
</li>
58+
);
59+
});
60+
61+
type BreadcrumbLinkProps = PropsOf<'a'> & { asChild?: boolean };
62+
const BreadcrumbLink = component$<BreadcrumbLinkProps>((props) => {
63+
const Comp = props.asChild ? Slot : 'a';
64+
return (
65+
<Comp class={cn('hover:text-foreground transition-colors', props.class)} {...props}>
66+
{!props.asChild && <Slot />}
67+
</Comp>
68+
);
69+
});
70+
71+
type BreadcrumbSeparatorProps = PropsOf<'li'>;
72+
const BreadcrumbSeparator = component$<BreadcrumbSeparatorProps>((props) => {
73+
return (
74+
<li
75+
role="presentation"
76+
aria-hidden="true"
77+
class={cn('[&>svg]:size-3.5', props.class)}
78+
{...props}
79+
>
80+
<LuChevronRight />
81+
</li>
82+
);
83+
});
84+
85+
type BreadcrumbPageProps = PropsOf<'span'>;
86+
const BreadcrumbPage = component$<BreadcrumbPageProps>((props) => {
87+
return (
88+
<span
89+
role="link"
90+
aria-disabled="true"
91+
aria-current="page"
92+
class={cn('text-foreground font-normal', props.class)}
93+
{...props}
94+
>
95+
<Slot />
96+
</span>
97+
);
98+
});
99+
100+
export {
101+
Breadcrumb,
102+
BreadcrumbList,
103+
BreadcrumbItem,
104+
BreadcrumbLink,
105+
BreadcrumbSeparator,
106+
BreadcrumbPage,
107+
};
108+
```
109+
110+
## Usage
111+
112+
```tsx
113+
import { Breadcrumb } from '@qwik-ui/styled';
114+
```
115+
116+
```tsx
117+
<Breadcrumb>
118+
<BreadcrumbList>
119+
<BreadcrumbItem>
120+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
121+
</BreadcrumbItem>
122+
<BreadcrumbSeparator />
123+
<BreadcrumbItem>
124+
<BreadcrumbLink href="/">Components</BreadcrumbLink>
125+
</BreadcrumbItem>
126+
<BreadcrumbSeparator />
127+
<BreadcrumbItem>
128+
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
129+
</BreadcrumbItem>
130+
</BreadcrumbList>
131+
</Breadcrumb>
132+
```

‎apps/website/src/routes/docs/styled/menu.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@
1414
## Components
1515

1616
- [Accordion](/docs/styled/accordion)
17-
- [Avatar](/docs/styled/avatar)
1817
- [Alert](/docs/styled/alert)
18+
- [Avatar](/docs/styled/avatar)
1919
- [Badge](/docs/styled/badge)
20+
- [Breadcrumb](/docs/styled/breadcrumb)
2021
- [Button](/docs/styled/button)
2122
- [Card](/docs/styled/card)
2223
- [Checkbox](/docs/styled/checkbox)

‎packages/kit-styled/components-registry.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@
2525
"componentFolder": "badge",
2626
"files": ["badge.tsx"]
2727
},
28+
{
29+
"displayName": "Breadcrumb",
30+
"type": "breadcrumb",
31+
"componentFolder": "breadcrumb",
32+
"files": ["breadcrumb.tsx"]
33+
},
2834
{
2935
"displayName": "Button",
3036
"type": "button",

‎packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
2+
import { cn } from '@qwik-ui/utils';
3+
import { LuChevronRight } from '@qwikest/icons/lucide';
4+
5+
export type BreadcrumbProps = PropsOf<'nav'>;
6+
const Breadcrumb = component$<BreadcrumbProps>(() => {
7+
return (
8+
<nav aria-label="breadcrumb">
9+
<Slot />
10+
</nav>
11+
);
12+
});
13+
14+
type BreadcrumbListProps = PropsOf<'ol'>;
15+
const BreadcrumbList = component$<BreadcrumbListProps>((props) => {
16+
return (
17+
<ol
18+
class={cn(
19+
'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
20+
props.class,
21+
)}
22+
{...props}
23+
>
24+
<Slot />
25+
</ol>
26+
);
27+
});
28+
29+
type BreadcrumbItemProps = PropsOf<'li'>;
30+
const BreadcrumbItem = component$<BreadcrumbItemProps>((props) => {
31+
return (
32+
<li class={cn('inline-flex items-center gap-1.5', props.class)} {...props}>
33+
<Slot />
34+
</li>
35+
);
36+
});
37+
38+
type BreadcrumbLinkProps = PropsOf<'a'> & { asChild?: boolean };
39+
const BreadcrumbLink = component$<BreadcrumbLinkProps>((props) => {
40+
const Comp = props.asChild ? Slot : 'a';
41+
return (
42+
<Comp class={cn('hover:text-foreground transition-colors', props.class)} {...props}>
43+
{!props.asChild && <Slot />}
44+
</Comp>
45+
);
46+
});
47+
48+
type BreadcrumbSeparatorProps = PropsOf<'li'>;
49+
const BreadcrumbSeparator = component$<BreadcrumbSeparatorProps>((props) => {
50+
return (
51+
<li
52+
role="presentation"
53+
aria-hidden="true"
54+
class={cn('[&>svg]:size-3.5', props.class)}
55+
{...props}
56+
>
57+
<LuChevronRight />
58+
</li>
59+
);
60+
});
61+
62+
type BreadcrumbPageProps = PropsOf<'span'>;
63+
const BreadcrumbPage = component$<BreadcrumbPageProps>((props) => {
64+
return (
65+
<span
66+
role="link"
67+
aria-disabled="true"
68+
aria-current="page"
69+
class={cn('text-foreground font-normal', props.class)}
70+
{...props}
71+
>
72+
<Slot />
73+
</span>
74+
);
75+
});
76+
77+
export {
78+
Breadcrumb,
79+
BreadcrumbList,
80+
BreadcrumbItem,
81+
BreadcrumbLink,
82+
BreadcrumbSeparator,
83+
BreadcrumbPage,
84+
};

‎packages/kit-styled/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from './components/accordion/accordion';
22
export * from './components/avatar/avatar';
33
export * from './components/alert/alert';
44
export * from './components/badge/badge';
5+
export * from './components/breadcrumb/breadcrumb';
56
export * from './components/button/button';
67
export * from './components/card/card';
78
export * from './components/checkbox/checkbox';

0 commit comments

Comments
 (0)