Skip to content

Commit

Permalink
Fix/167 bc header refactoring (#178)
Browse files Browse the repository at this point in the history
* fix: refactor BC header component

* fix: stick support section to the bottom of the side menu

* fix: create disable style for unused menu entries

* fix: change hover style for disabled menu options

* fix: remove duplicated css properties

* fix: update conditional render, now using ternary operator
  • Loading branch information
mgaseta authored and DerekRoberts committed May 14, 2024
1 parent 3ebefc0 commit 58dec22
Show file tree
Hide file tree
Showing 5 changed files with 304 additions and 243 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`the Header component should match the snapshot 1`] = `
<header
aria-label="Seed Planning and Registry System"
aria-label=" Seed Planning and Registry System"
className="cds--header spar-header"
data-testid="header"
>
Expand Down Expand Up @@ -785,9 +785,6 @@ exports[`the Header component should match the snapshot 1`] = `
</ul>
</nav>
</div>
<div
className="overlay-element"
/>
<div
className="cds--side-nav__overlay"
/>
Expand Down Expand Up @@ -1177,17 +1174,14 @@ exports[`the Header component should match the snapshot 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
/>
<path
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
d="M14.4,10.1L13,8.8V6.5c0-2.6-1.9-4.7-4.5-5v-1h-1v1C5,1.8,3,3.9,3,6.5v2.3l-1.4,1.3c-0.1,0.1-0.2,0.2-0.1,0.4V12 c0,0.3,0.2,0.5,0.4,0.5c0,0,0,0,0.1,0h3.5C5.5,13.9,6.6,15,8,15s2.5-1.1,2.5-2.5H14c0.3,0,0.5-0.2,0.5-0.4c0,0,0,0,0-0.1v-1.5 C14.5,10.4,14.4,10.2,14.4,10.1z M8,14c-0.8,0-1.5-0.7-1.5-1.5h3C9.5,13.3,8.8,14,8,14z M13.5,11.5h-11v-0.8l1.3-1.4 C3.9,9.3,4,9.1,4,9V6.5c0-2.2,1.8-4,4-4s4,1.8,4,4V9c0,0.1,0.1,0.3,0.1,0.4l1.4,1.3V11.5z"
/>
</svg>
</div>
<span
className="cds--side-nav__link-text"
>
Settings
Notifications
</span>
</a>
</li>
Expand All @@ -1212,14 +1206,17 @@ exports[`the Header component should match the snapshot 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.4,10.1L13,8.8V6.5c0-2.6-1.9-4.7-4.5-5v-1h-1v1C5,1.8,3,3.9,3,6.5v2.3l-1.4,1.3c-0.1,0.1-0.2,0.2-0.1,0.4V12 c0,0.3,0.2,0.5,0.4,0.5c0,0,0,0,0.1,0h3.5C5.5,13.9,6.6,15,8,15s2.5-1.1,2.5-2.5H14c0.3,0,0.5-0.2,0.5-0.4c0,0,0,0,0-0.1v-1.5 C14.5,10.4,14.4,10.2,14.4,10.1z M8,14c-0.8,0-1.5-0.7-1.5-1.5h3C9.5,13.3,8.8,14,8,14z M13.5,11.5h-11v-0.8l1.3-1.4 C3.9,9.3,4,9.1,4,9V6.5c0-2.2,1.8-4,4-4s4,1.8,4,4V9c0,0.1,0.1,0.3,0.1,0.4l1.4,1.3V11.5z"
d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3 c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1 C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4 c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4 c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4 c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8 L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6 C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
/>
<path
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
/>
</svg>
</div>
<span
className="cds--side-nav__link-text"
>
Notifications
Settings
</span>
</a>
</li>
Expand Down
123 changes: 123 additions & 0 deletions frontend/src/components/BCHeader/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import { env } from '../../env';

export const VERSION: string = `Version: ${env.REACT_APP_NRSPARWEBAPP_VERSION}`;

export const HOME_LINK = '/dashboard';

export const clearPanelState = {
notifications: false,
myProfile: false
};

export const listItems = [
{
name: 'Main activities',
items: [
{
name: 'Dashboard',
icon: 'Dashboard',
link: '/dashboard',
disabled: false
},
{
name: 'Seedlots',
icon: 'SoilMoistureField',
link: '/seedlot',
disabled: false
},
{
name: 'Seedlings',
icon: 'CropGrowth',
link: '#',
disabled: true
},
{
name: 'Nurseries',
icon: 'CropHealth',
link: '#',
disabled: true
},
{
name: 'Orchards',
icon: 'MapBoundaryVegetation',
link: '#',
disabled: true
},
{
name: 'Reports',
icon: 'Report',
link: '#',
disabled: true
},
{
name: 'Tests',
icon: 'Chemistry',
link: '#',
disabled: true
},
{
name: 'Parent tree',
icon: 'Tree',
link: '#',
disabled: true
},
{
name: 'Tree seed center',
icon: 'Enterprise',
link: '#',
disabled: true
},
{
name: 'Financial',
icon: 'Money',
link: '#',
disabled: true
}
]
},
{
name: 'Management',
items: [
{
name: 'Notifications',
icon: 'Notification',
link: '#',
disabled: true
},
{
name: 'Settings',
icon: 'Settings',
link: '#',
disabled: true
}
]
},
{
name: 'Support',
items: [
{
name: 'Need help?',
icon: 'Help',
link: '#',
disabled: true
}
]
}
];

export const componentTexts = {
headerTitle: 'SPAR',
completeTitle: ' Seed Planning and Registry System',
openMenu: 'Open menu',
sideMenuAriaLabel: 'Side menu',
searchAriaLabel: 'Search',
notifications: {
title: 'Notifications',
headerAriaLabel: 'Notifications Tab'
},
profile: {
title: 'My Profile',
headerAriaLabel: 'My Profile Tab',
controllerAriaLabel: 'User Settings'
}
};
15 changes: 15 additions & 0 deletions frontend/src/components/BCHeader/definitions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export type ListItem = {
name: string;
icon: string;
link: string;
disabled: boolean;
};

export type ListItems = {
name: string;
items: ListItem[];
};

export type RightPanelType = {
[panel: string]: boolean;
};
Loading

0 comments on commit 58dec22

Please sign in to comment.