Skip to content

Commit 199f171

Browse files
sheerryysheerryy
authored
Breadcrumb components added
1 parent 9a6aa72 commit 199f171

9 files changed

Lines changed: 283 additions & 0 deletions

File tree

‎components/_asset/tailwind.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,16 @@
158158
@apply bg-gray-800;
159159
}
160160

161+
/* styles for breadcrumbs */
162+
163+
.text-fade {
164+
@apply text-gray-500
165+
}
166+
167+
.react-ui-breadcrumb a:hover {
168+
@apply underline;
169+
}
170+
161171
/* styles for button types */
162172

163173
.divider-with-text {

‎components/breadcrumb/Breadcrumb.test.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react';
2+
import { shallow, mount } from 'enzyme';
3+
4+
import { Breadcrumb, BreadcrumbItem } from './index';
5+
6+
describe('Breadcrumb', () => {
7+
it('should render correctly', () => {
8+
const component = shallow(<Breadcrumb />);
9+
10+
expect(component).toMatchSnapshot();
11+
});
12+
13+
it('should render correctly with BreadcrumbItem', () => {
14+
const component = mount(
15+
<Breadcrumb>
16+
<BreadcrumbItem>
17+
<a href="#">crumb 1</a>
18+
</BreadcrumbItem>
19+
</Breadcrumb>,
20+
);
21+
22+
expect(component).toMatchSnapshot();
23+
});
24+
25+
it('should render correctly with BreadcrumbItem and string separator', () => {
26+
const component = mount(
27+
<Breadcrumb separator={'///'}>
28+
<BreadcrumbItem>
29+
<a href="#">crumb 1</a>
30+
</BreadcrumbItem>
31+
</Breadcrumb>,
32+
);
33+
34+
expect(component).toMatchSnapshot();
35+
});
36+
});

‎components/breadcrumb/Breadcrumb.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as React from 'react';
2+
import classnames from 'classnames';
3+
4+
import Separator from './Separator';
5+
6+
export interface PropTypes {
7+
className?: string;
8+
separator?: string;
9+
style?: React.CSSProperties;
10+
children?: React.ReactNode | React.ReactNode[];
11+
}
12+
13+
const Component = ({
14+
style,
15+
children,
16+
className,
17+
separator = '/',
18+
...restProps
19+
}: PropTypes): React.ReactElement => {
20+
const crumbs = Array.isArray(children) ? (
21+
children.map((element, index) => {
22+
const lastItem = index === children.length - 1;
23+
return (
24+
<span
25+
key={index}
26+
className={classnames(lastItem ? 'text-primary' : 'text-fade')}
27+
>
28+
{element}
29+
{lastItem ? null : <Separator>{separator}</Separator>}
30+
</span>
31+
);
32+
})
33+
) : (
34+
<span className={classnames('text-primary')}>{children}</span>
35+
);
36+
37+
return (
38+
<div
39+
className={classnames(
40+
'm-0',
41+
'p-2',
42+
'box-border',
43+
'font-medium',
44+
'react-ui-breadcrumb',
45+
className,
46+
)}
47+
style={style}
48+
{...restProps}
49+
>
50+
{crumbs}
51+
</div>
52+
);
53+
};
54+
55+
export default Component;

‎components/breadcrumb/Item.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import classnames from 'classnames';
3+
4+
export interface PropTypes {
5+
className?: string;
6+
children: React.ReactNode;
7+
style?: React.CSSProperties;
8+
}
9+
10+
const Component = ({
11+
style,
12+
children,
13+
className,
14+
...restProps
15+
}: PropTypes): React.ReactElement => {
16+
return (
17+
<span
18+
className={classnames('react-ui-breadcrumb-item', className)}
19+
style={style}
20+
{...restProps}
21+
>
22+
{children}
23+
</span>
24+
);
25+
};
26+
27+
export default Component;

‎components/breadcrumb/Separator.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import classnames from 'classnames';
3+
4+
export interface PropTypes {
5+
className?: string;
6+
children?: React.ReactNode;
7+
style?: React.CSSProperties;
8+
}
9+
10+
const Component = ({
11+
style,
12+
children,
13+
className,
14+
...restProps
15+
}: PropTypes): React.ReactElement => {
16+
return (
17+
<span
18+
className={classnames('mx-2', 'react-ui-breadcrumb-separator', className)}
19+
style={style}
20+
{...restProps}
21+
>
22+
{children || '/'}
23+
</span>
24+
);
25+
};
26+
27+
export default Component;

‎components/breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Breadcrumb should render correctly 1`] = `
4+
<div
5+
className="m-0 p-2 box-border font-medium react-ui-breadcrumb"
6+
>
7+
<span
8+
className="text-primary"
9+
/>
10+
</div>
11+
`;
12+
13+
exports[`Breadcrumb should render correctly with BreadcrumbItem 1`] = `
14+
<Component>
15+
<div
16+
className="m-0 p-2 box-border font-medium react-ui-breadcrumb"
17+
>
18+
<span
19+
className="text-primary"
20+
>
21+
<Component>
22+
<span
23+
className="react-ui-breadcrumb-item"
24+
>
25+
<a
26+
href="#"
27+
>
28+
crumb 1
29+
</a>
30+
</span>
31+
</Component>
32+
</span>
33+
</div>
34+
</Component>
35+
`;
36+
37+
exports[`Breadcrumb should render correctly with BreadcrumbItem and string separator 1`] = `
38+
<Component
39+
separator="///"
40+
>
41+
<div
42+
className="m-0 p-2 box-border font-medium react-ui-breadcrumb"
43+
>
44+
<span
45+
className="text-primary"
46+
>
47+
<Component>
48+
<span
49+
className="react-ui-breadcrumb-item"
50+
>
51+
<a
52+
href="#"
53+
>
54+
crumb 1
55+
</a>
56+
</span>
57+
</Component>
58+
</span>
59+
</div>
60+
</Component>
61+
`;

‎components/breadcrumb/index.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Item from './Item';
2+
import Origin from './Breadcrumb';
3+
import Separator from './Separator';
4+
5+
type Type = typeof Origin;
6+
7+
interface ComponentInterface extends Type {
8+
Item: typeof Item;
9+
Separator: typeof Separator;
10+
}
11+
12+
const Component: ComponentInterface = Origin as ComponentInterface;
13+
14+
Component.Item = Item;
15+
Component.Separator = Separator;
16+
17+
export { default as BreadcrumbItem } from './Item';
18+
export { default as Breadcrumb } from './Breadcrumb';
19+
export { default as BreadcrumbSeparator } from './Separator';
20+
21+
export default Component;

‎components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export { default as Badge } from './badge';
66

77
export { default as Button } from './button';
88

9+
export { default as Breadcrumb } from './breadcrumb';
10+
911
export { default as Card } from './card';
1012

1113
export { default as Col } from './col';

‎stories/breadcrumb.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from 'react';
2+
3+
import { Breadcrumb } from '../components';
4+
5+
export default {
6+
title: 'Breadcrumb',
7+
component: Breadcrumb,
8+
};
9+
10+
export const single = (): React.ReactElement => (
11+
<Breadcrumb className="">
12+
<Breadcrumb.Item>
13+
<a href="#">crumb 1</a>
14+
</Breadcrumb.Item>
15+
</Breadcrumb>
16+
);
17+
18+
export const multiple = (): React.ReactElement => (
19+
<Breadcrumb className="">
20+
<Breadcrumb.Item>
21+
<a href="#">crumb 1</a>
22+
</Breadcrumb.Item>
23+
<Breadcrumb.Item>
24+
<a href="#">crumb 2</a>
25+
</Breadcrumb.Item>
26+
<Breadcrumb.Item>
27+
<a href="#">crumb 3</a>
28+
</Breadcrumb.Item>
29+
</Breadcrumb>
30+
);
31+
32+
export const customSeparator = (): React.ReactElement => (
33+
<Breadcrumb separator="//" className="">
34+
<Breadcrumb.Item>
35+
<a href="#">crumb 1</a>
36+
</Breadcrumb.Item>
37+
<Breadcrumb.Item>
38+
<a href="#">crumb 2</a>
39+
</Breadcrumb.Item>
40+
<Breadcrumb.Item>
41+
<a href="#">crumb 3</a>
42+
</Breadcrumb.Item>
43+
</Breadcrumb>
44+
);

0 commit comments

Comments
 (0)