Skip to content

Commit da53e3e

Browse files
MarcusNotheisMarcusNotheis
authored
feat(SideNavigation): Initial Component Implementation (#132)
1 parent 7b57087 commit da53e3e

File tree

15 files changed

+1336
-0
lines changed

15 files changed

+1336
-0
lines changed

‎netlify.toml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Settings in the [build] context are global and are applied to all contexts
2+
# unless otherwise overridden by more specific contexts.
3+
[build]
4+
# Directory to change to before starting a build.
5+
# This is where we will look for package.json/.nvmrc/etc.
6+
base = "./"
7+
8+
# Directory (relative to root of your repo) that contains the deploy-ready
9+
# HTML files and assets generated by the build. If a base directory has
10+
# been specified, include it in the publish directory path.
11+
publish = ".out/"
12+
13+
# Default build command.
14+
command = "npm run build:storybook"
15+
16+
# Deploy Preview context: all deploys generated from a pull/merge request will
17+
# inherit these settings.
18+
[context.deploy-preview]
19+
SKIP_DOC_GENERATION=true

‎packages/main/src/components/SideNavigation/SideNavigation.jss.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { JSSTheme } from '../../interfaces/JSSTheme';
2+
3+
export const sideNavigationStyles = ({ parameters }: JSSTheme) => ({
4+
sideNavigation: {
5+
height: '100%',
6+
borderRight: `0.0625rem solid ${parameters.sapUiGroupContentBorderColor}`,
7+
backgroundColor: parameters.sapUiListBackground,
8+
display: 'flex',
9+
flexDirection: 'column',
10+
transition: 'width 500ms'
11+
},
12+
13+
expanded: {
14+
width: '15rem'
15+
},
16+
17+
condensed: {
18+
width: '2.75rem',
19+
'& $footerItemsSeparator': {
20+
marginLeft: '0.5rem',
21+
marginRight: '0.5rem'
22+
}
23+
},
24+
25+
collapsed: {
26+
width: '15rem',
27+
marginLeft: '-15.0625rem'
28+
},
29+
30+
footerItemsSeparator: {
31+
margin: '0.25rem 0.875rem',
32+
height: '0.125rem',
33+
backgroundColor: parameters.sapUiListBorderColor
34+
}
35+
});

‎packages/main/src/components/SideNavigation/SideNavigation.test.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { mountThemedComponent } from '@shared/tests/utils';
2+
import { SideNavigation } from '@ui5/webcomponents-react/lib/SideNavigation';
3+
import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem';
4+
import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState';
5+
import React from 'react';
6+
7+
describe('SideNavigation', () => {
8+
test('Expanded', () => {
9+
const wrapper = mountThemedComponent(
10+
<SideNavigation
11+
openState={SideNavigationOpenState.Expandend}
12+
selectedId={'sales-leads'}
13+
footerItems={[
14+
<SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
15+
<SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
16+
]}
17+
>
18+
<SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
19+
<SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
20+
<SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
21+
<SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
22+
<SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
23+
<SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
24+
<SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
25+
</SideNavigationListItem>
26+
<SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
27+
</SideNavigation>
28+
);
29+
expect(wrapper.render()).toMatchSnapshot();
30+
});
31+
32+
test('Expanded without Icons', () => {
33+
const wrapper = mountThemedComponent(
34+
<SideNavigation
35+
openState={SideNavigationOpenState.Expandend}
36+
selectedId={'sales-leads'}
37+
noIcons
38+
footerItems={[
39+
<SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
40+
<SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
41+
]}
42+
>
43+
<SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
44+
<SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
45+
<SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
46+
<SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
47+
<SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
48+
<SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
49+
<SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
50+
</SideNavigationListItem>
51+
<SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
52+
</SideNavigation>
53+
);
54+
expect(wrapper.render()).toMatchSnapshot();
55+
});
56+
57+
test('Condensed', () => {
58+
const wrapper = mountThemedComponent(
59+
<SideNavigation
60+
openState={SideNavigationOpenState.Condensed}
61+
selectedId={'sales-leads'}
62+
footerItems={[
63+
<SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
64+
<SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
65+
]}
66+
>
67+
<SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
68+
<SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
69+
<SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
70+
<SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
71+
<SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
72+
<SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
73+
<SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
74+
</SideNavigationListItem>
75+
<SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
76+
</SideNavigation>
77+
);
78+
expect(wrapper.render()).toMatchSnapshot();
79+
});
80+
test('Collapsed', () => {
81+
const wrapper = mountThemedComponent(
82+
<SideNavigation
83+
openState={SideNavigationOpenState.Collapsed}
84+
selectedId={'sales-leads'}
85+
footerItems={[
86+
<SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
87+
<SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
88+
]}
89+
>
90+
<SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
91+
<SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
92+
<SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
93+
<SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
94+
<SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
95+
<SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
96+
<SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
97+
</SideNavigationListItem>
98+
<SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
99+
</SideNavigation>
100+
);
101+
expect(wrapper.render()).toMatchSnapshot();
102+
});
103+
});

0 commit comments

Comments
 (0)