Skip to content

Commit 4a3cc56

Browse files
droshevdroshev
authored
Merge pull request #43 from SAP/feature/Issue#13-refactor-breadcrumb-megaMenu-SideNav
Issue#13: adds link and url options for Breadcrumb, SideNav and MegaMenu
2 parents 5a9f600 + a936af5 commit 4a3cc56

File tree

8 files changed

+478
-336
lines changed

8 files changed

+478
-336
lines changed

‎src/App.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ $fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/';
4848
border: 1px solid #ccc;
4949
}
5050

51-
.fd-side-nav--icons {
51+
.fd-side-nav.fd-side-nav--icons {
5252
max-width: 65px;
5353
}
5454

‎src/Breadcrumb/Breadcrumb.Component.js‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,53 @@
1-
import React from 'react'
2-
import { Breadcrumb, BreadcrumbItem } from '../'
3-
import { DocsTile, DocsText, Separator, Header, Description, Import } from '../'
1+
import React from 'react';
2+
import { Breadcrumb, BreadcrumbItem } from '../';
3+
import { DocsTile, DocsText, Separator, Header, Description, Import } from '../';
44

55
export const BreadcrumbComponent = () => {
6-
const breadcrumbCode = `<Breadcrumb>
6+
const breadcrumbHrefCode = `<Breadcrumb>
77
<BreadcrumbItem url="#" name="Link Text"/>
88
<BreadcrumbItem url="#" name="Link Text"/>
99
<BreadcrumbItem url="#" name="Link Text"/>
10-
</Breadcrumb>`
10+
</Breadcrumb>`;
11+
12+
const breadcrumbLinkCode = ` <Breadcrumb>
13+
<BreadcrumbItem link="/" name="Link Text" />
14+
<BreadcrumbItem link="/" name="Link Text" />
15+
<BreadcrumbItem link="/" name="Link Text" />
16+
</Breadcrumb>`;
1117

1218
return (
1319
<div>
14-
1520
<Header>Breadcrumb</Header>
16-
<Description>The breadcrumb allows users to see the current page and navigation path to that page. Users can navigate to previous levels in the path. When clicking on the current page, a dropdown allows users to access other pages at that same level.
21+
<Description>
22+
The breadcrumb allows users to see the current page and navigation path to that page. Users can navigate
23+
to previous levels in the path. When clicking on the current page, a dropdown allows users to access
24+
other pages at that same level.
1725
</Description>
1826
<Import module="Breadcrumb, BreadcrumbItem" path="/fundamental-react/src/" />
1927

2028
<Separator />
2129

30+
<Description>An example using url (href attribute)</Description>
31+
<DocsTile>
32+
<Breadcrumb>
33+
<BreadcrumbItem url="#" name="Link Text" />
34+
<BreadcrumbItem url="#" name="Link Text" />
35+
<BreadcrumbItem url="#" name="Link Text" />
36+
</Breadcrumb>
37+
</DocsTile>
38+
<DocsText>{breadcrumbHrefCode}</DocsText>
39+
40+
<Separator />
41+
42+
<Description>An example using link (routerLink)</Description>
2243
<DocsTile>
2344
<Breadcrumb>
24-
<BreadcrumbItem url="#" name="Link Text"/>
25-
<BreadcrumbItem url="#" name="Link Text"/>
26-
<BreadcrumbItem url="#" name="Link Text"/>
45+
<BreadcrumbItem link="/" name="Link Text" />
46+
<BreadcrumbItem link="/" name="Link Text" />
47+
<BreadcrumbItem link="/" name="Link Text" />
2748
</Breadcrumb>
2849
</DocsTile>
29-
<DocsText>{breadcrumbCode}</DocsText>
50+
<DocsText>{breadcrumbLinkCode}</DocsText>
3051
</div>
3152
);
32-
}
53+
};

‎src/Breadcrumb/Breadcrumb.js‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,41 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { BrowserRouter, Link } from 'react-router-dom'
3+
import { BrowserRouter, Link } from 'react-router-dom';
44

5-
export const Breadcrumb = (props) => {
5+
export const Breadcrumb = props => {
66
const { children } = props;
7-
return (
8-
<ul className="fd-breadcrumb">
9-
{children}
10-
</ul>
11-
);
12-
}
7+
return <ul className="fd-breadcrumb">{children}</ul>;
8+
};
139

14-
export const BreadcrumbItem = (props) => {
15-
const { url, name } = props;
10+
export const BreadcrumbItem = props => {
11+
const { url, link, name } = props;
1612
return (
17-
<BrowserRouter>
18-
<li className="fd-breadcrumb__item">
19-
<Link className="fd-breadcrumb__link" to={{ pathname: url }} >{name}</Link>
20-
</li>
21-
</BrowserRouter>
13+
<React.Fragment>
14+
{link ? (
15+
<BrowserRouter>
16+
<li className="fd-breadcrumb__item">
17+
<Link className="fd-breadcrumb__link" to={{ pathname: link }}>
18+
{name}
19+
</Link>
20+
</li>
21+
</BrowserRouter>
22+
) : null}
23+
24+
{url ? (
25+
<BrowserRouter>
26+
<li className="fd-breadcrumb__item">
27+
<a className="fd-breadcrumb__link" href={url}>
28+
{name}
29+
</a>
30+
</li>
31+
</BrowserRouter>
32+
) : null}
33+
</React.Fragment>
2234
);
23-
}
35+
};
2436

2537
BreadcrumbItem.propTypes = {
26-
url: PropTypes.string.isRequired,
38+
url: PropTypes.string,
39+
link: PropTypes.string,
2740
name: PropTypes.string.isRequired
28-
}
41+
};

‎src/Icon/Icon.Component.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties
44
import { Playground } from '../documentation/Playground/Playground';
55

66
export const IconComponent = () => {
7-
const iconsCode = ` <Icon glyph="cart" size="s" />
8-
<Icon glyph="cart" />
9-
<Icon glyph="cart" size="m" />
10-
<Icon glyph="cart" size="l" />
11-
<Icon glyph="cart" size="xl" />`
7+
const iconsCode = `<Icon glyph="cart" size="s" />
8+
<Icon glyph="cart" />
9+
<Icon glyph="cart" size="m" />
10+
<Icon glyph="cart" size="l" />
11+
<Icon glyph="cart" size="xl" />`
1212

1313
let listOfIcons = [
1414
'accelerated',

‎src/MegaMenu/MegaMenu.Component.js‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { MegaMenu, MegaMenuList, MegaMenuGroup } from '../'
66
export const MegaMenuComponent = () => {
77
const defaultMegaMenuCode = `<MegaMenu>
88
<MegaMenuGroup title="Group Title">
9-
<MegaMenuList links=
9+
<MegaMenuList items=
1010
{[
1111
{ id: 'item_1', url: '#', name: 'Link Item' },
1212
{ id: 'item_2', url: '#', name: 'Link Item', hasChild: true, child: [
@@ -21,17 +21,17 @@ export const MegaMenuComponent = () => {
2121
</MegaMenuList>
2222
</MegaMenuGroup>
2323
<MegaMenuGroup title="Group Title">
24-
<MegaMenuList links=
24+
<MegaMenuList items=
2525
{[
26-
{ id: 'item_6', url: '#', name: 'Link Item' },
27-
{ id: 'item_7', url: '#', name: 'Link Item' },
28-
{ id: 'item_8', url: '#', name: 'Link Item', hasChild: true, child: [
29-
{ id: 'subitem_81', url: '#', name: 'Link' },
30-
{ id: 'subitem_82', url: '#', name: 'Link' },
31-
{ id: 'subitem_83', url: '#', name: 'Link' },
32-
{ id: 'subitem_84', url: '#', name: 'Link' }]
26+
{ id: 'item_6', link: '#', name: 'Link Item' },
27+
{ id: 'item_7', link: '#', name: 'Link Item' },
28+
{ id: 'item_8', link: '#', name: 'Link Item', hasChild: true, child: [
29+
{ id: 'subitem_81', link: '#', name: 'Link' },
30+
{ id: 'subitem_82', link: '#', name: 'Link' },
31+
{ id: 'subitem_83', link: '#', name: 'Link' },
32+
{ id: 'subitem_84', link: '#', name: 'Link' }]
3333
},
34-
{ id: 'item_9', url: '#', name: 'Link Item' },
34+
{ id: 'item_9', link: '#', name: 'Link Item' },
3535
3636
]}>
3737
</MegaMenuList>
@@ -49,12 +49,13 @@ export const MegaMenuComponent = () => {
4949

5050
<Properties type="Inputs" properties=
5151
{[
52-
{ name: 'links', description: 'Array - an array of objects with keys \'id\', \'url\', \'name\', \'hasChild\', and \'child\' setting the attributes of the links.' },
53-
{ name: 'id', description: 'String - the \'id\' of the link.' },
54-
{ name: 'url', description: 'String - the \'url\' of the link.' },
55-
{ name: 'name', description: 'String - the \'name\' of the link.' },
56-
{ name: 'hasChild', description: 'Bool - when set to \'true\' enables a second level of navigation.' },
57-
{ name: 'child', description: 'Array - an array of objects with keys \'id\', \'url\', and \'name\' setting the attributes of the sublinks' }
52+
{ name: 'items', description: 'array - an array of objects with keys \'id\', \'url\' or \'link\', \'name\', \'hasChild\', and \'child\' setting the attributes of the items.' },
53+
{ name: 'id', description: 'string - the \'id\' of the link.' },
54+
{ name: 'url', description: "string - href attribute of <a> tag. Use either 'url' or 'link'." },
55+
{ name: 'link', description: "string - a router link. Use either 'url' or 'link'." },
56+
{ name: 'name', description: 'string - the \'name\' of the link.' },
57+
{ name: 'hasChild', description: 'bool - when set to \'true\' enables a second level of navigation.' },
58+
{ name: 'child', description: 'array - an array of objects with keys \'id\', \'url\' or \'link\', and \'name\' setting the attributes of the subitems.' }
5859

5960
]} />
6061

@@ -64,7 +65,7 @@ export const MegaMenuComponent = () => {
6465
<DocsTile>
6566
<MegaMenu>
6667
<MegaMenuGroup title="Group Title">
67-
<MegaMenuList links=
68+
<MegaMenuList items=
6869
{[
6970
{ id: 'item_1', url: '#', name: 'Link Item' },
7071
{ id: 'item_2', url: '#', name: 'Link Item', hasChild: true, child: [
@@ -79,17 +80,17 @@ export const MegaMenuComponent = () => {
7980
</MegaMenuList>
8081
</MegaMenuGroup>
8182
<MegaMenuGroup title="Group Title">
82-
<MegaMenuList links=
83+
<MegaMenuList items=
8384
{[
84-
{ id: 'item_6', url: '#', name: 'Link Item' },
85-
{ id: 'item_7', url: '#', name: 'Link Item' },
86-
{ id: 'item_8', url: '#', name: 'Link Item', hasChild: true, child: [
87-
{ id: 'subitem_81', url: '#', name: 'Link' },
88-
{ id: 'subitem_82', url: '#', name: 'Link' },
89-
{ id: 'subitem_83', url: '#', name: 'Link' },
90-
{ id: 'subitem_84', url: '#', name: 'Link' }]
85+
{ id: 'item_6', link: '#', name: 'Link Item' },
86+
{ id: 'item_7', link: '#', name: 'Link Item' },
87+
{ id: 'item_8', link: '#', name: 'Link Item', hasChild: true, child: [
88+
{ id: 'subitem_81', link: '#', name: 'Link' },
89+
{ id: 'subitem_82', link: '#', name: 'Link' },
90+
{ id: 'subitem_83', link: '#', name: 'Link' },
91+
{ id: 'subitem_84', link: '#', name: 'Link' }]
9192
},
92-
{ id: 'item_9', url: '#', name: 'Link Item' },
93+
{ id: 'item_9', link: '#', name: 'Link Item' },
9394

9495
]}>
9596
</MegaMenuList>

0 commit comments

Comments
 (0)