Skip to content

Commit

Permalink
feat:actions for desktop panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@numbap
numbap committed Aug 11, 2023
1 parent 723fac3 commit f817a34
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 123 deletions.
56 changes: 30 additions & 26 deletions src/components/Header/Header.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,54 +109,57 @@ Default.args = {
{ key: "4", value: "Starting a business" },
],
mostRequested: [
{ key: "1", value: "View your record of employment" },
{ key: "2", value: "Apply for social insurance number" },
{ key: "3", value: "Hiring foreign workers" },
{ key: "4", value: "Immigrate as a skilled worker" },
{ key: "1", value: "Alpha your record of employment" },
{ key: "2", value: "Alpha for social insurance number" },
{ key: "3", value: "Alpha foreign workers" },
{ key: "4", value: "Alpha as a skilled worker" },
],
},
{
key: "profileKey",
value: "Travel and Tourism",
path: "/",
itemTitle: "Travel",
showIcon: false,
selected: false,
items: [
{ key: "1", value: "find a Job" },
{ key: "1", value: "Travel and Tourism" },
{ key: "2", value: "Training" },
{ key: "3", value: "Hiring and managing employees" },
{ key: "4", value: "Starting a business" },
],
mostRequested: [
{ key: "1", value: "View your record of employment" },
{ key: "2", value: "Apply for social insurance number" },
{ key: "3", value: "Hiring foreign workers" },
{ key: "4", value: "Immigrate as a skilled worker" },
{ key: "1", value: "Beta your record of employment" },
{ key: "2", value: "Beta for social insurance number" },
{ key: "3", value: "Beta foreign workers" },
{ key: "4", value: "Beta as a skilled worker" },
],
},
{
key: "securityKey",
value: "Business and Industry",
itemTitle: "Business",
path: "/",
showIcon: false,
selected: false,
items: [
{ key: "1", value: "find a Job" },
{ key: "1", value: "Business and Industry" },
{ key: "2", value: "Training" },
{ key: "3", value: "Hiring and managing employees" },
{ key: "4", value: "Starting a business" },
],
mostRequested: [
{ key: "1", value: "View your record of employment" },
{ key: "2", value: "Apply for social insurance number" },
{ key: "3", value: "Hiring foreign workers" },
{ key: "4", value: "Immigrate as a skilled worker" },
{ key: "1", value: "Gamma your record of employment" },
{ key: "2", value: "Gamma for social insurance number" },
{ key: "3", value: "Gamma foreign workers" },
{ key: "4", value: "Gamma as a skilled worker" },
],
},
{
key: "craAccountKey",
value: "Benefits",
path: "/",
itemTitle: "Benefits",
showIcon: false,
selected: false,
items: [
Expand All @@ -166,29 +169,30 @@ Default.args = {
{ key: "4", value: "Starting a business" },
],
mostRequested: [
{ key: "1", value: "View your record of employment" },
{ key: "2", value: "Apply for social insurance number" },
{ key: "3", value: "Hiring foreign workers" },
{ key: "4", value: "Immigrate as a skilled worker" },
{ key: "1", value: "Delta your record of employment" },
{ key: "2", value: "Delta for social insurance number" },
{ key: "3", value: "Delta foreign workers" },
{ key: "4", value: "Delta as a skilled worker" },
],
},
{
key: "outKey",
value: "Health",
path: "/",
itemTitle: "Health",
showIcon: true,
selected: false,
items: [
{ key: "1", value: "find a Job" },
{ key: "2", value: "Training" },
{ key: "3", value: "Hiring and managing employees" },
{ key: "4", value: "Starting a business" },
{ key: "1", value: "find a Health" },
{ key: "2", value: "Healing" },
{ key: "3", value: "Finding patients" },
{ key: "4", value: "Starting a hospital" },
],
mostRequested: [
{ key: "1", value: "View your record of employment" },
{ key: "2", value: "Apply for social insurance number" },
{ key: "3", value: "Hiring foreign workers" },
{ key: "4", value: "Immigrate as a skilled worker" },
{ key: "1", value: "Epsilon your record of employment" },
{ key: "2", value: "Epsilon for social insurance number" },
{ key: "3", value: "Epsilon foreign workers" },
{ key: "4", value: "Epsilon as a skilled worker" },
],
},
],
Expand Down
146 changes: 49 additions & 97 deletions src/components/Menu/MenuGlobal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@ export function MenuGlobal(props) {
} = props;

const [showDropdown, setShowDropdown] = useState(true);
const [menuItem, setMenuItem] = useState({ top: null, mostRequested: false });
const [menuItem, setMenuItem] = useState({ top: 0, mostRequested: false });
const [expandedPanel, setExpandedPanel] = useState({
itemTitle: null,
items: [],
mostRequested: [],
value: "",
});
const dropdown = useRef(null);

console.log(
Expand Down Expand Up @@ -93,13 +99,17 @@ export function MenuGlobal(props) {
globalMenuProps={props.globalMenuProps}
menuItem={menuItem}
setMenuItem={setMenuItem}
expandedPanel={expandedPanel}
setExpandedPanel={setExpandedPanel}
/>
) : (
<MobileMenu
setShowDropdown={setShowDropdown}
globalMenuProps={props.globalMenuProps}
menuItem={menuItem}
setMenuItem={setMenuItem}
expandedPanel={expandedPanel}
setExpandedPanel={setExpandedPanel}
/>
)}
</>
Expand Down Expand Up @@ -141,101 +151,41 @@ const DesktopMenu = (props) => (
<div className="ds-flex ds-flex-row ds-border-t ds-border-gray">
<div className="ds-bg-white ds-border-black ds-z-100 ds-bg-[#444] ds-text-white ds-w-96">
<ul>
<li className="text-lg ds-border-1.5 ds-border-[#555] ds-bg-[#444] hover:ds-text-black hover:ds-bg-white ds-py-3.5 ds-px-7">
ssss
</li>
<li className="text-lg ds-border-1.5 ds-border-[#555] ds-bg-[#444] hover:ds-text-black hover:ds-bg-white ds-py-3.5 ds-px-7">
ssss
</li>
<li className="text-lg ds-border-1.5 ds-border-[#555] ds-bg-[#444] hover:ds-text-black hover:ds-bg-white ds-py-3.5 ds-px-7">
ssss
</li>
<li className="text-lg ds-border-1.5 ds-border-[#555] ds-bg-[#444] hover:ds-text-black hover:ds-bg-white ds-py-3.5 ds-px-7">
ssss
</li>
{props.globalMenuProps.menuList.map((x, i) => (
<li className="text-lg ds-border-1.5 ds-border-[#555] ds-bg-[#444] hover:ds-text-black hover:ds-bg-white ds-py-3.5 ds-px-7">
<div
onClick={() => {
props.setExpandedPanel((prev) => {
return { ...prev, ...x };
});
}}
>
{x.value}
</div>
</li>
))}
</ul>
</div>
<div className="ds-mb-[24px] ds-pl-[39px] ds-mb-[25px] ds-bg-white ds-border-t-1 ds-border-solid ds-border-gray-200 ds-shadow-lg ds-text-black ds-min-h-[815px] ds-pt-0 ds-top-0 ds-w-full">
<div className="">
<ul>
<li className="ds-mb-[24px] ds-text-[32px] ds-px-[6px] ds-font-bold ds-underline ds-underline-offset-1 ds-text-[#284162]">
<a href="#">Jobs</a>
<a href="#">{props.expandedPanel.itemTitle}</a>
</li>
<div className="ds-flex ds-flex-row">
<div>
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/jobs/opportunities.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Find a job
</a>
</li>
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/jobs/training.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Training
</a>
</li>
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/business/hire.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Hiring and managing employees
</a>
</li>
<li
role="presentation"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/start-business"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Starting a business
</a>
</li>
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/jobs/workplace.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Workplace standards
</a>
</li>
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/finance/pensions.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Pensions and retirement
</a>
</li>
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/benefits/ei.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
Employment Insurance benefits and leave
</a>
</li>
{props.expandedPanel.items.map((x) => (
<li role="presentation" className="ds-py-1.5 ">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/services/jobs/opportunities.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
{x.value}
</a>
</li>
))}
</div>
<div>
<li role="separator" aria-orientation="vertical"></li>
Expand All @@ -258,16 +208,18 @@ const DesktopMenu = (props) => (
aria-orientation="vertical"
className="ds-list-disc ds-pl-[39px]"
>
<li role="presentation" className="ds-py-1.5">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/employment-social-development/programs/ei/ei-list/ei-roe/access-roe.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
View your Records of Employment
</a>
</li>
{props.expandedPanel.mostRequested.map((x) => (
<li role="presentation" className="ds-py-1.5">
<a
role="menuitem"
tabindex="-1"
href="https://www.canada.ca/en/employment-social-development/programs/ei/ei-list/ei-roe/access-roe.html"
className="ds-text-[#284162] ds-underline ds-text-[18px]"
>
{x.value}
</a>
</li>
))}
<li role="presentation" className="ds-py-1.5">
<a
role="menuitem"
Expand Down

0 comments on commit f817a34

Please sign in to comment.