Skip to content

Commit 3abe49d

Browse files
sarahbrngsarahbrng
committed
feat: add DBBreadcrumb component with documentation and examples for Angular, React, and Vue
1 parent 43ad908 commit 3abe49d

File tree

27 files changed

+581
-0
lines changed

27 files changed

+581
-0
lines changed

‎packages/components/scripts/post-build/components.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,9 @@ export const getComponents = (): Component[] => [
355355
{
356356
name: 'brand'
357357
},
358+
{
359+
name: 'breadcrumb'
360+
},
358361
{
359362
name: 'input',
360363
overwrites: {

‎packages/components/src/components/breadcrumb/agent/breadcrumb.agent.lite.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { DBBreadcrumb } from '../index';
2+
3+
export default function Breadcrumb() {
4+
return (
5+
<>
6+
<h1>DBBreadcrumb Documentation Examples</h1>
7+
8+
<h2>1. Default Breadcrumb</h2>
9+
<DBBreadcrumb>
10+
<li>
11+
<a href="#">Home</a>
12+
</li>
13+
<li>
14+
<a href="#">Category</a>
15+
</li>
16+
<li aria-current="page">Current Page</li>
17+
</DBBreadcrumb>
18+
19+
<h2>2. Long Breadcrumb Path</h2>
20+
<DBBreadcrumb>
21+
<li>
22+
<a href="#">Home</a>
23+
</li>
24+
<li>
25+
<a href="#">Category</a>
26+
</li>
27+
<li>
28+
<a href="#">Subcategory</a>
29+
</li>
30+
<li>
31+
<a href="#">Product Group</a>
32+
</li>
33+
<li aria-current="page">Current Product</li>
34+
</DBBreadcrumb>
35+
36+
<h2>3. Single Item</h2>
37+
<DBBreadcrumb>
38+
<li aria-current="page">Current Page</li>
39+
</DBBreadcrumb>
40+
</>
41+
);
42+
}

‎packages/components/src/components/breadcrumb/breadcrumb.lite.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {
2+
useDefaultProps,
3+
useMetadata,
4+
useRef,
5+
useStore
6+
} from '@builder.io/mitosis';
7+
import { cls } from '../../utils';
8+
import type { DBBreadcrumbProps, DBBreadcrumbState } from './model';
9+
10+
useMetadata({});
11+
12+
useDefaultProps<DBBreadcrumbProps>({
13+
size: 'small'
14+
});
15+
16+
export default function DBBreadcrumb(props: DBBreadcrumbProps) {
17+
const _ref = useRef<HTMLElement | any>(null);
18+
19+
const state = useStore<DBBreadcrumbState>({});
20+
21+
return (
22+
<nav
23+
ref={_ref}
24+
id={props.id}
25+
class={cls('db-breadcrumb', props.className)}
26+
data-size={props.size}
27+
aria-label="breadcrumb">
28+
<ol class="db-breadcrumb-list" role="list">
29+
{props.children}
30+
</ol>
31+
</nav>
32+
);
33+
}

‎packages/components/src/components/breadcrumb/breadcrumb.scss‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@charset "utf-8";
2+
@use "@db-ux/core-foundations/build/styles/fonts";
3+
@use "@db-ux/core-foundations/build/styles/variables";
4+
@use "@db-ux/core-foundations/build/styles/colors";
5+
@use "@db-ux/core-foundations/build/styles/helpers";
6+
7+
.db-breadcrumb {
8+
// Default: Small size
9+
.db-breadcrumb-list {
10+
display: flex;
11+
flex-wrap: wrap;
12+
align-items: flex-start;
13+
gap: variables.$db-spacing-fixed-3xs; // 2px gap for small
14+
list-style: none;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
// Breadcrumb items (li elements)
20+
li {
21+
display: flex;
22+
align-items: center;
23+
gap: variables.$db-spacing-fixed-3xs; // 2px between separator and item (small)
24+
25+
// Separator icon (chevron-right) before each item except the first
26+
&:not(:first-child)::before {
27+
content: "\203A"; // Unicode chevron right (›)
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
inline-size: variables.$db-sizing-sm; // 24px (small)
32+
block-size: variables.$db-sizing-sm;
33+
font-size: variables.$db-sizing-md; // 20px
34+
color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
35+
font-weight: 400;
36+
}
37+
38+
// Link and text styling (small)
39+
a,
40+
span {
41+
display: flex;
42+
align-items: center;
43+
padding: variables.$db-spacing-fixed-3xs
44+
variables.$db-spacing-fixed-2xs; // 2px 4px (small)
45+
border-radius: variables.$db-border-radius-xs; // 4px
46+
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
47+
color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
48+
font-size: variables.$db-sizing-sm; // 14px (body-sm)
49+
line-height: variables.$db-sizing-md; // 20px
50+
font-family: var(--db-font-family-sans);
51+
font-weight: 400;
52+
text-decoration: none;
53+
white-space: nowrap;
54+
transition: background-color 0.2s ease;
55+
56+
&:hover,
57+
&:focus {
58+
background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
59+
text-decoration: underline;
60+
}
61+
62+
&:active {
63+
background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
64+
}
65+
66+
@media screen and (prefers-reduced-motion: reduce) {
67+
transition: none;
68+
}
69+
}
70+
71+
// Current page (last item with aria-current="page")
72+
&[aria-current="page"] {
73+
a,
74+
span {
75+
font-weight: 700; // Bold for current item
76+
cursor: default;
77+
pointer-events: none;
78+
79+
&:hover,
80+
&:focus {
81+
background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
82+
text-decoration: none;
83+
}
84+
}
85+
}
86+
}
87+
88+
// Medium size variant
89+
&[data-size="medium"] {
90+
.db-breadcrumb-list {
91+
gap: variables.$db-spacing-fixed-2xs; // 4px gap for medium
92+
}
93+
94+
li {
95+
gap: variables.$db-spacing-fixed-2xs; // 4px between separator and item (medium)
96+
97+
&:not(:first-child)::before {
98+
inline-size: variables.$db-sizing-md +
99+
variables.$db-spacing-fixed-2xs; // 28px (medium)
100+
block-size: variables.$db-sizing-md +
101+
variables.$db-spacing-fixed-2xs;
102+
font-size: variables.$db-sizing-lg; // 24px
103+
}
104+
105+
a,
106+
span {
107+
padding: variables.$db-spacing-fixed-2xs
108+
variables.$db-spacing-fixed-xs; // 4px 8px (medium)
109+
font-size: variables.$db-sizing-md; // 16px (body-md)
110+
line-height: variables.$db-sizing-lg; // 24px
111+
}
112+
}
113+
}
114+
}

‎packages/components/src/components/breadcrumb/breadcrumb.spec.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import AxeBuilder from '@axe-core/playwright';
2+
import { expect, test } from '@playwright/experimental-ct-react';
3+
4+
import { DBBreadcrumb } from './index';
5+
// @ts-ignore - vue can only find it with .ts as file ending
6+
import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
7+
8+
const defaultBreadcrumb: any = (
9+
<DBBreadcrumb>
10+
<li>
11+
<a href="#">Home</a>
12+
</li>
13+
<li>
14+
<a href="#">Category</a>
15+
</li>
16+
<li aria-current="page">Current Page</li>
17+
</DBBreadcrumb>
18+
);
19+
20+
test.describe('DBBreadcrumb', () => {
21+
test('should render', async ({ mount }) => {
22+
const component = await mount(defaultBreadcrumb);
23+
await expect(component).toBeVisible();
24+
});
25+
26+
test('should have accessible role', async ({ mount }) => {
27+
const component = await mount(defaultBreadcrumb);
28+
await expect(component).toHaveAttribute('aria-label', 'breadcrumb');
29+
});
30+
31+
test('should not have basic accessibility issues', async ({ mount }) => {
32+
const component = await mount(defaultBreadcrumb);
33+
const accessibilityScanResults = await new AxeBuilder({
34+
page: component.page()
35+
})
36+
.include('.db-breadcrumb')
37+
.analyze();
38+
expect(accessibilityScanResults.violations).toEqual([]);
39+
});
40+
41+
test('should match screenshot', async ({ mount }) => {
42+
const component = await mount(defaultBreadcrumb);
43+
await component.page().setViewportSize(DEFAULT_VIEWPORT);
44+
await expect(component).toHaveScreenshot();
45+
});
46+
});

‎packages/components/src/components/breadcrumb/docs/Angular.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## Angular
2+
3+
For general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.
4+
5+
### Use component
6+
7+
```ts app.component.ts
8+
// app.component.ts
9+
import { Component } from "@angular/core";
10+
11+
@Component({
12+
selector: "app-root",
13+
template: `
14+
<db-breadcrumb>
15+
<li><a href="#">Home</a></li>
16+
<li><a href="#">Category</a></li>
17+
<li aria-current="page">Current Page</li>
18+
</db-breadcrumb>
19+
`
20+
})
21+
export class AppComponent {}
22+
```

‎packages/components/src/components/breadcrumb/docs/HTML.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## HTML
2+
3+
### Use component
4+
5+
```html
6+
<nav class="db-breadcrumb" aria-label="breadcrumb">
7+
<ol class="db-breadcrumb-list">
8+
<li><a href="#">Home</a></li>
9+
<li><a href="#">Category</a></li>
10+
<li aria-current="page">Current Page</li>
11+
</ol>
12+
</nav>
13+
```
14+
15+
### Import styles
16+
17+
```scss app.scss
18+
@use "@db-ux/core-components/build/css/breadcrumb";
19+
```

‎packages/components/src/components/breadcrumb/docs/Migration.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
## Migration Guide
2+
3+
### From v2.x to v3.x
4+
5+
Currently no migration needed as this is a new component in v3.x.
6+
7+
### Breaking Changes
8+
9+
- None (new component)
10+
11+
### New Features
12+
13+
- Added `DBBreadcrumb` component for navigation breadcrumbs
14+
- Supports semantic HTML structure with proper ARIA labels
15+
- Responsive design with flexbox layout

‎packages/components/src/components/breadcrumb/docs/React.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
## React
2+
3+
For general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.
4+
5+
### Use component
6+
7+
```tsx App.tsx
8+
// App.tsx
9+
import { DBBreadcrumb } from "@db-ux/react-core-components";
10+
11+
const App = () => (
12+
<DBBreadcrumb>
13+
<li>
14+
<a href="#">Home</a>
15+
</li>
16+
<li>
17+
<a href="#">Category</a>
18+
</li>
19+
<li aria-current="page">Current Page</li>
20+
</DBBreadcrumb>
21+
);
22+
23+
export default App;
24+
```

‎packages/components/src/components/breadcrumb/docs/Vue.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## Vue
2+
3+
For general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.
4+
5+
### Use component
6+
7+
```vue App.vue
8+
<template>
9+
<DBBreadcrumb>
10+
<li><a href="#">Home</a></li>
11+
<li><a href="#">Category</a></li>
12+
<li aria-current="page">Current Page</li>
13+
</DBBreadcrumb>
14+
</template>
15+
16+
<script setup lang="ts">
17+
import { DBBreadcrumb } from "@db-ux/v-core-components";
18+
</script>
19+
```

0 commit comments

Comments
 (0)