@omniumretail/component-library 1.1.68 → 1.1.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bitbucket-pipelines.yml +3 -3
- package/dist/bundle.js +1 -1
- package/dist/main.css +1 -1
- package/dist/types/components/CategoryResponse/index.d.ts +1 -1
- package/dist/types/components/Header/Header.data.d.ts +1 -1
- package/dist/types/components/Header/Header.types.d.ts +2 -0
- package/dist/types/components/Header/index.d.ts +5 -1
- package/package.json +1 -1
- package/src/components/CategoryResponse/index.tsx +4 -5
- package/src/components/Header/Header.data.ts +2 -1
- package/src/components/Header/Header.stories.tsx +12 -0
- package/src/components/Header/Header.types.ts +2 -0
- package/src/components/Header/README.md +38 -0
- package/src/components/Header/index.tsx +45 -10
- package/src/components/Header/styles.module.scss +31 -10
package/dist/main.css
CHANGED
|
@@ -30,4 +30,4 @@
|
|
|
30
30
|
.nkyL3EtE9Zsnc5VOW43L{display:flex;flex-wrap:wrap;flex-direction:column}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th:before{display:none}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper{margin-bottom:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-cell{word-break:break-word}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr{cursor:pointer}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.nkyL3EtE9Zsnc5VOW43L .ant-space{align-self:flex-end}.nkyL3EtE9Zsnc5VOW43L .ant-select-selection-placeholder{color:var(--color-black)}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-selector:hover,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:focus,.nkyL3EtE9Zsnc5VOW43L .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.nkyL3EtE9Zsnc5VOW43L button[type=button].ant-pagination-item-link{margin-top:0 !important}.nkyL3EtE9Zsnc5VOW43L button[type=button]{margin-top:-50px}@media screen and (max-width: 1024px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:12px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:8px}}@media screen and (max-width: 767px){.nkyL3EtE9Zsnc5VOW43L .ant-table-thead>tr>th{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-tbody>tr>td{font-size:10px}.nkyL3EtE9Zsnc5VOW43L .ant-table-content table{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-content{width:100%}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-title,.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table .ant-table-header{word-break:break-all}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-thead>tr>th{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-tbody>tr>td{padding:4px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter{margin-inline-start:0px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-up{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-table-wrapper .ant-table-column-sorter-down{font-size:8px}.nkyL3EtE9Zsnc5VOW43L .ant-pagination{max-width:unset}}
|
|
31
31
|
.aZEBTQus3Y3MyodeDwkf{display:flex;flex-direction:column;align-items:center;justify-content:center}.cc1pbQlAgw2CmXVml3bs{height:300px;width:400px}.aTf_CXAsyp0tySsoZdD_{display:flex;justify-content:space-between;margin:10px 10px 0px 10px;font-size:20px}.kuu1hf_JTvYD55IW6Nxl{color:#ff4d4f}.N8ODEO3zDbY7gmecjTrp{color:#52c41a}.WIsL9Shu6c0mGJq9qSSz{margin-top:20px;border-radius:4px;overflow:hidden}.WIsL9Shu6c0mGJq9qSSz img{width:100%;height:auto}
|
|
32
32
|
.OJKeuXyOSPIeCCssVum2{display:flex;gap:32px}.jzxszvL7wzCV5nztJL0S{padding:12px}.OGA8oJw8RDyohcRftjmo{width:100%}.y2_7QVPOhjRZlAHCRWKf{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.Smkcs3LGp1uPuQge2GxE{margin-top:16px}Label{margin-bottom:8px}.djarlYFkE9Kb7wUjUnrY{height:36px}
|
|
33
|
-
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5
|
|
33
|
+
:root{--color-grey: #e4e4e4;--color-grey-100: #E5E5E5}.SF5f_Q_Ggz_4JHUHS2Xa{display:flex;align-items:center;padding:13px 20px;box-sizing:border-box;height:72px}.SF5f_Q_Ggz_4JHUHS2Xa *{box-sizing:border-box}.gSVYvBn1sLbcMsGI32b9{display:flex;flex-grow:1;align-items:flex-end;justify-content:center;max-width:calc(100% - 60px)}.gSVYvBn1sLbcMsGI32b9 img{max-width:196px}.gSVYvBn1sLbcMsGI32b9 .fVSt3bSZBcJGsOdA5nIN{font-weight:var(--font-weight-semibold);text-transform:uppercase;color:var(--color-black)}.BIBQmS_NwoMw2Ncq5yuN{cursor:pointer;padding:4px 4px 4px 0;font-size:20px;width:30px;display:flex;align-items:center;justify-content:center}.ZinSgUtysxITkbGRKdux{position:fixed;top:0;left:-100%;bottom:0;width:100%;max-width:430px;background-color:var(--color-white);padding-inline:15px;z-index:999;box-shadow:0 3px 12px rgba(0,0,0,.45);transition:.6s ease-out}.ZinSgUtysxITkbGRKdux.FW1pOdad0uN5LO9h5PgQ{left:0;transition:.3s ease-in}.ZfA8OEmbRzRsNqLAmdtn{background-color:rgba(0,0,0,.3);backdrop-filter:blur(1px);position:absolute;left:0;top:0;right:0;bottom:0;z-index:998;pointer-events:none;opacity:0;transition:.3s}.ZfA8OEmbRzRsNqLAmdtn.FW1pOdad0uN5LO9h5PgQ{opacity:1;pointer-events:all}.YKSQJmdRP_7tKwvQpeuV{width:calc(100% + 30px);margin-left:-15px;background-color:var(--color-orange);display:flex;align-items:center;justify-content:center}.ISssYC5Uz452JVWP0xDc img{max-width:160px}.E6YZPpa60LxA7qqIW7jQ{position:absolute;top:23px;right:15px;font-size:25px;cursor:pointer;color:var(--color-white)}.YYp3pzktjEDEyW8knAZQ{overflow-y:auto;height:calc(100% - 51px);margin:0;padding:0}.u7k2VQ30AQDk6mKA22GX{height:60px;padding:10px;display:flex;align-items:center;border-bottom:1px solid var(--color-black);cursor:pointer;transition:.3s;text-transform:uppercase;width:100%}.u7k2VQ30AQDk6mKA22GX:hover{background-color:var(--color-grey);color:var(--color-black)}.QQoDB9XPcAK18l2DIym4{list-style:none}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN{height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-bottom:0}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX{position:relative}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa{position:absolute;width:60px;height:100%;background:var(--color-black);right:0;display:flex;align-items:center;justify-content:center}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .NytmT59TmaWHc4FLM2wa:hover{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN>.u7k2VQ30AQDk6mKA22GX .zo7CFksIKx7Fahu4e4S_{color:var(--color-white)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E{background:var(--color-grey)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .NytmT59TmaWHc4FLM2wa{background-color:var(--color-orange)}.QQoDB9XPcAK18l2DIym4.wrXCksst57UpQuCNgGkN.yk4DnBgiUlzk23Yg_q6E .uLgjMU9sbvfaa0qKEguP{height:auto;opacity:1}.uLgjMU9sbvfaa0qKEguP{padding:0;width:100%;margin:0;background-color:var(--color-orange);color:var(--color-white);height:0;opacity:0;overflow:hidden;transition:height .3s ease,opacity .3s ease}.uLgjMU9sbvfaa0qKEguP .u7k2VQ30AQDk6mKA22GX{min-height:60px;height:auto;padding-inline:40px}.efnjUnudkE0UTVQ6wrgH{cursor:pointer}.u7k2VQ30AQDk6mKA22GX .fjNRYZMP1O0pTvBDBB3L span{margin-left:8px;transform:translateY(-2px);display:inline-block;font-size:var(--font-size-body-3);text-transform:capitalize}
|
|
@@ -6,7 +6,7 @@ interface CategoryResponse {
|
|
|
6
6
|
onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
|
|
7
7
|
onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
|
|
8
8
|
selectYesNoOption?: any;
|
|
9
|
-
addAction?: (questionId: string) => void;
|
|
9
|
+
addAction?: (questionId: string, questionAnswerId: string) => void;
|
|
10
10
|
addButtons?: boolean;
|
|
11
11
|
fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
|
|
12
12
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MenuItem } from './Header.types';
|
|
2
2
|
export declare const getMenuTopList: (onHome: () => void) => MenuItem[];
|
|
3
|
-
export declare const getMenuBottomList: (onProfile: () => void, onLogout: () => void) => MenuItem[];
|
|
3
|
+
export declare const getMenuBottomList: (onProfile: () => void, onLogout: () => void, userName?: string) => MenuItem[];
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
import { HeaderProps } from './Header.types';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Header component to display navigation bar with dropdown menus and action button.
|
|
4
|
+
* @param {HeaderProps} props - Properties passed to the component.
|
|
5
|
+
*/
|
|
6
|
+
export declare const Header: ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
7
|
export default Header;
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@ interface CategoryResponse {
|
|
|
16
16
|
onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
|
|
17
17
|
onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
|
|
18
18
|
selectYesNoOption?: any;
|
|
19
|
-
addAction?: (questionId: string) => void;
|
|
19
|
+
addAction?: (questionId: string, questionAnswerId:string) => void;
|
|
20
20
|
addButtons?: boolean;
|
|
21
21
|
fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
|
|
22
22
|
};
|
|
@@ -162,10 +162,9 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
162
162
|
imgWindow?.document.write(image.outerHTML);
|
|
163
163
|
};
|
|
164
164
|
|
|
165
|
-
const handleAddAction = (questionId: string) => {
|
|
165
|
+
const handleAddAction = (questionId: string, questionAnswerId: string) => {
|
|
166
166
|
if (props.addAction) {
|
|
167
|
-
|
|
168
|
-
props.addAction(questionId);
|
|
167
|
+
props.addAction(questionId, questionAnswerId);
|
|
169
168
|
}
|
|
170
169
|
};
|
|
171
170
|
|
|
@@ -346,7 +345,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
346
345
|
{form.getFieldValue(`Questions`)?.[index].Note ? t('components.categoryResponse.editNote') : t('components.categoryResponse.addNote')}
|
|
347
346
|
</Button>
|
|
348
347
|
|
|
349
|
-
<Button customClass={styles.actionsButtons} onClick={() => handleAddAction(question.Id)}>
|
|
348
|
+
<Button customClass={styles.actionsButtons} onClick={() => handleAddAction(question.QuestionId, question.Id)}>
|
|
350
349
|
{t('components.categoryResponse.createAction')}
|
|
351
350
|
</Button>
|
|
352
351
|
</div>
|
|
@@ -12,9 +12,10 @@ export const getMenuTopList = (
|
|
|
12
12
|
export const getMenuBottomList= (
|
|
13
13
|
onProfile: () => void,
|
|
14
14
|
onLogout: () => void,
|
|
15
|
+
userName?: string,
|
|
15
16
|
): MenuItem[] => [
|
|
16
17
|
{
|
|
17
|
-
name:
|
|
18
|
+
name: `Profile${userName ? ` <span>(${userName})</span>` : ''}`,
|
|
18
19
|
action: onProfile,
|
|
19
20
|
},
|
|
20
21
|
{
|
|
@@ -37,6 +37,16 @@ const mockMenu = [
|
|
|
37
37
|
action: () => mockAction(),
|
|
38
38
|
targetRoute: "reports",
|
|
39
39
|
dropdownMenu: [
|
|
40
|
+
{
|
|
41
|
+
name: "Análises",
|
|
42
|
+
action: () => mockAction(),
|
|
43
|
+
targetRoute: "analyse",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "Análises2",
|
|
47
|
+
action: () => mockAction(),
|
|
48
|
+
targetRoute: "analyse2",
|
|
49
|
+
}
|
|
40
50
|
]
|
|
41
51
|
}
|
|
42
52
|
];
|
|
@@ -47,5 +57,7 @@ Primary.args = {
|
|
|
47
57
|
logout: () => console.log('Logout'), // in here logout from auth0 should be passed
|
|
48
58
|
homeUrl: homeUrl,
|
|
49
59
|
profileUrl: profileUrl,
|
|
60
|
+
userName: 'Diogo Carvalho',
|
|
61
|
+
pageTitle: 'Page Title',
|
|
50
62
|
};
|
|
51
63
|
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Header Component
|
|
2
|
+
|
|
3
|
+
The `Header` component renders a navigation header with support for dropdown menus, dynamic routing, and an action button. It also supports conditional rendering based on user login and profile URL.
|
|
4
|
+
|
|
5
|
+
## Props
|
|
6
|
+
|
|
7
|
+
### `HeaderProps`
|
|
8
|
+
|
|
9
|
+
- `actionButton` (optional): An object with the following properties:
|
|
10
|
+
- `element`: A React component to be rendered as the action button (e.g., an icon).
|
|
11
|
+
- `action`: A function to be called when the action button is clicked.
|
|
12
|
+
- `visibility`: A boolean indicating whether the action button should be visible.
|
|
13
|
+
- `menuList` (optional): An array of menu items, where each item is an object with the following properties:
|
|
14
|
+
- `name`: The name of the menu item, which can include HTML content.
|
|
15
|
+
- `action`: A function to be called when the menu item is clicked.
|
|
16
|
+
- `targetRoute` (optional): The target route for the menu item.
|
|
17
|
+
- `dropdownMenu` (optional): An array of sub-menu items with the same structure.
|
|
18
|
+
- `logout` (optional): A function to be called when the user logs out.
|
|
19
|
+
- `homeUrl`: A string representing the URL for the home page.
|
|
20
|
+
- `profileUrl`: A string representing the URL for the profile page.
|
|
21
|
+
- `onLeavingPage` (optional): A function to be called before navigating away from the current page, with the target route as an argument. that is an example here: [APE Example](https://bitbucket.org/product_admin/staffperformanceevaluationcycle-restapi-omnium/src/master/frontend/src/Layout/index.tsx).
|
|
22
|
+
- `userName` (optional): A string representing the user's name, displayed next to the "Profile" menu item.
|
|
23
|
+
- `pageTitle` (optional): A string representing the page title, displayed in the header.
|
|
24
|
+
|
|
25
|
+
### Explanation of Code
|
|
26
|
+
|
|
27
|
+
#### State and Refs:
|
|
28
|
+
- `isMenuOpen`: Manages the state of the menu (open/closed).
|
|
29
|
+
- `activeDropdown`: Manages the state of the active dropdown menu.
|
|
30
|
+
- `headerRef` and `overlayRef`: Used for referencing the header and overlay elements.
|
|
31
|
+
|
|
32
|
+
#### Helper Functions:
|
|
33
|
+
- `onLogout`: Handles the logout functionality. If a logout function is provided, it is called; otherwise, it navigates to the home page.
|
|
34
|
+
- `onProfile`: Navigates to the profile URL.
|
|
35
|
+
- `onHome`: Navigates to the home URL.
|
|
36
|
+
- `onToggleMenu`: Toggles the menu open and closed state.
|
|
37
|
+
- `handleDropdownClick`: Toggles the active state of the dropdown menus.
|
|
38
|
+
- `renderMenu`: Renders the menu items, including handling clicks for navigation and dropdown menus.
|
|
@@ -1,17 +1,25 @@
|
|
|
1
1
|
import { useRef, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DownOutlined, UpOutlined, BarsOutlined, CloseOutlined } from '@ant-design/icons';
|
|
3
3
|
import omniumIcon from '../../assets/images/omnium-retail-logo.png';
|
|
4
|
+
import omniumWhiteIcon from '../../assets/images/omnium-retail-logo-white.png';
|
|
4
5
|
import styles from './styles.module.scss';
|
|
5
6
|
import classNames from 'classnames';
|
|
6
7
|
import { HeaderProps, MenuItem } from './Header.types';
|
|
7
8
|
import { getMenuTopList, getMenuBottomList } from './Header.data';
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Header component to display navigation bar with dropdown menus and action button.
|
|
12
|
+
* @param {HeaderProps} props - Properties passed to the component.
|
|
13
|
+
*/
|
|
14
|
+
export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, onLeavingPage, userName, pageTitle }: HeaderProps) => {
|
|
10
15
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
11
16
|
const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
|
|
12
17
|
const headerRef = useRef<HTMLDivElement>(null);
|
|
13
18
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
14
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Handle the logout action. If no logout function is provided, redirect to home as discussed in a meet
|
|
22
|
+
*/
|
|
15
23
|
const onLogout = () => {
|
|
16
24
|
if( logout ) {
|
|
17
25
|
logout();
|
|
@@ -20,10 +28,16 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
20
28
|
}
|
|
21
29
|
};
|
|
22
30
|
|
|
31
|
+
/**
|
|
32
|
+
* Navigate to the profile URL.
|
|
33
|
+
*/
|
|
23
34
|
const onProfile = () => {
|
|
24
35
|
window.location.href = profileUrl;
|
|
25
36
|
};
|
|
26
37
|
|
|
38
|
+
/**
|
|
39
|
+
* Navigate to the home URL.
|
|
40
|
+
*/
|
|
27
41
|
const onHome = () => {
|
|
28
42
|
window.location.href = homeUrl;
|
|
29
43
|
};
|
|
@@ -34,20 +48,34 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
34
48
|
|
|
35
49
|
const menuBottomList = getMenuBottomList(
|
|
36
50
|
onProfile,
|
|
37
|
-
onLogout
|
|
51
|
+
onLogout,
|
|
52
|
+
userName
|
|
38
53
|
);
|
|
39
54
|
|
|
40
55
|
const combinedMenuList = [...menuTopList, ...(menuList || []), ...menuBottomList];
|
|
41
56
|
|
|
57
|
+
/**
|
|
58
|
+
* Toggle the menu open and closed state.
|
|
59
|
+
*/
|
|
42
60
|
const onToggleMenu = () => {
|
|
43
61
|
setIsMenuOpen(!isMenuOpen);
|
|
44
62
|
};
|
|
45
63
|
|
|
64
|
+
/**
|
|
65
|
+
* Handle dropdown click to toggle the active dropdown menu.
|
|
66
|
+
* @param {any} e - The event object.
|
|
67
|
+
* @param {number} index - The index of the dropdown menu.
|
|
68
|
+
*/
|
|
46
69
|
const handleDropdownClick = (e: any, index: number) => {
|
|
47
70
|
e.stopPropagation();
|
|
48
71
|
setActiveDropdown(activeDropdown === index ? null : index);
|
|
49
72
|
};
|
|
50
73
|
|
|
74
|
+
/**
|
|
75
|
+
* Render the menu items, including dropdown menus.
|
|
76
|
+
* @param {MenuItem[]} menuList - The list of menu items to render.
|
|
77
|
+
* @returns {JSX.Element[]} The rendered menu items.
|
|
78
|
+
*/
|
|
51
79
|
const renderMenu = (menuList: MenuItem[]) => {
|
|
52
80
|
return menuList.map((link, index) => (
|
|
53
81
|
<li
|
|
@@ -68,13 +96,16 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
68
96
|
}
|
|
69
97
|
}}
|
|
70
98
|
>
|
|
71
|
-
|
|
99
|
+
<p
|
|
100
|
+
className={ styles.name }
|
|
101
|
+
dangerouslySetInnerHTML={{ __html: link.name }}></p>
|
|
102
|
+
|
|
72
103
|
{
|
|
73
104
|
link.dropdownMenu && link.dropdownMenu.length > 0 && <div className={styles.arrow} onClick={(event) => handleDropdownClick(event, index)}>
|
|
74
105
|
{
|
|
75
106
|
activeDropdown === index ?
|
|
76
|
-
<
|
|
77
|
-
<
|
|
107
|
+
<UpOutlined className={styles.arrowIcon} /> :
|
|
108
|
+
<DownOutlined className={styles.arrowIcon} />
|
|
78
109
|
}
|
|
79
110
|
</div>
|
|
80
111
|
}
|
|
@@ -105,13 +136,17 @@ export const Header = ({ menuList, actionButton, logout, homeUrl, profileUrl, on
|
|
|
105
136
|
<BarsOutlined onClick={onToggleMenu} className={ styles.toggleMenuOpen } />
|
|
106
137
|
|
|
107
138
|
<div className={styles.logoContainer}>
|
|
108
|
-
|
|
139
|
+
{
|
|
140
|
+
pageTitle
|
|
141
|
+
? <p className={ styles.title}>{pageTitle}</p>
|
|
142
|
+
: <img src={omniumIcon} alt="Omnium Retail Blue Logo" />
|
|
143
|
+
}
|
|
109
144
|
</div>
|
|
110
145
|
|
|
111
146
|
<div className={classNames(styles.menu, { [styles.active]: isMenuOpen })}>
|
|
112
|
-
<div className={styles.
|
|
113
|
-
<p className={styles.
|
|
114
|
-
|
|
147
|
+
<div className={styles.head}>
|
|
148
|
+
<p className={styles.logoWrapper}>
|
|
149
|
+
<img src={omniumWhiteIcon} alt="Omnium Retail White Logo" />
|
|
115
150
|
</p>
|
|
116
151
|
<CloseOutlined color={'#FFFFFF'} className={styles.toggleMenuClose} onClick={onToggleMenu} />
|
|
117
152
|
</div>
|
|
@@ -2,16 +2,14 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--color-grey: #e4e4e4;
|
|
4
4
|
--color-grey-100: #E5E5E5;
|
|
5
|
-
--color-white: #FFFFFF;
|
|
6
|
-
--color-black: #2C2D2E;
|
|
7
5
|
}
|
|
8
6
|
|
|
9
7
|
.header {
|
|
10
8
|
display: flex;
|
|
11
9
|
align-items: center;
|
|
12
10
|
padding: 13px 20px;
|
|
13
|
-
border-bottom: 2px solid var(--color-grey-100);
|
|
14
11
|
box-sizing: border-box;
|
|
12
|
+
height: 72px;
|
|
15
13
|
|
|
16
14
|
* {
|
|
17
15
|
box-sizing: border-box;
|
|
@@ -23,16 +21,27 @@
|
|
|
23
21
|
flex-grow: 1;
|
|
24
22
|
align-items: flex-end;
|
|
25
23
|
justify-content: center;
|
|
24
|
+
max-width: calc(100% - 60px);
|
|
26
25
|
|
|
27
26
|
img {
|
|
28
27
|
max-width: 196px;
|
|
29
28
|
}
|
|
29
|
+
|
|
30
|
+
.title {
|
|
31
|
+
font-weight: var(--font-weight-semibold);
|
|
32
|
+
text-transform: uppercase;
|
|
33
|
+
color: var(--color-black);
|
|
34
|
+
}
|
|
30
35
|
}
|
|
31
36
|
|
|
32
37
|
.toggleMenuOpen {
|
|
33
38
|
cursor: pointer;
|
|
34
39
|
padding: 4px 4px 4px 0;
|
|
35
40
|
font-size: 20px;
|
|
41
|
+
width: 30px;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
36
45
|
}
|
|
37
46
|
|
|
38
47
|
.menu {
|
|
@@ -41,7 +50,7 @@
|
|
|
41
50
|
left: -100%;
|
|
42
51
|
bottom: 0;
|
|
43
52
|
width: 100%;
|
|
44
|
-
max-width:
|
|
53
|
+
max-width: 430px;
|
|
45
54
|
background-color: var(--color-white);
|
|
46
55
|
padding-inline: 15px;
|
|
47
56
|
z-index: 999;
|
|
@@ -73,7 +82,7 @@
|
|
|
73
82
|
}
|
|
74
83
|
}
|
|
75
84
|
|
|
76
|
-
.
|
|
85
|
+
.head {
|
|
77
86
|
width: calc(100% + 30px);
|
|
78
87
|
margin-left: -15px;
|
|
79
88
|
background-color: var(--color-orange);
|
|
@@ -82,15 +91,15 @@
|
|
|
82
91
|
justify-content: center;
|
|
83
92
|
}
|
|
84
93
|
|
|
85
|
-
.
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
94
|
+
.logoWrapper {
|
|
95
|
+
img {
|
|
96
|
+
max-width: 160px;
|
|
97
|
+
}
|
|
89
98
|
}
|
|
90
99
|
|
|
91
100
|
.toggleMenuClose {
|
|
92
101
|
position: absolute;
|
|
93
|
-
top:
|
|
102
|
+
top: 23px;
|
|
94
103
|
right: 15px;
|
|
95
104
|
font-size: 25px;
|
|
96
105
|
cursor: pointer;
|
|
@@ -191,3 +200,15 @@
|
|
|
191
200
|
.actionButton {
|
|
192
201
|
cursor: pointer;
|
|
193
202
|
}
|
|
203
|
+
|
|
204
|
+
.listName {
|
|
205
|
+
.name {
|
|
206
|
+
span {
|
|
207
|
+
margin-left: 8px;
|
|
208
|
+
transform: translateY(-2px);
|
|
209
|
+
display: inline-block;
|
|
210
|
+
font-size: var(--font-size-body-3);
|
|
211
|
+
text-transform: capitalize;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|