c35df7ef60
* feat: Add StudioHeader with optional AppMenu StudioHeader is a graft of Header with an additional optional AppMenu. Some Frontend Apps use Menus in their custom headers to provide more functionality in their apps. By adding this functionality in StudioHeader, it will be easier for frontend apps in Studio to adopt this component without it affecting the main Header component. * test: Add tests for StudioHeader and AppMenu * fix: Remove orderHistory * fix: Remove Responsive components * fix: Redefine User Menu for Studio The userMenu in StudioHeader will be used more for Studio related items such as Studio Home and Studio Maintenance. This requires new messages and reestablishing the url destinations of these menu items. * fix: Remove loggedOutItems * fix: Remove AUTHN_MINIMAL_HEADER items * fix: Remove unnecessary tests Anonymous sessions do not exist in the Studio. And Studio is not Mobile Ready. Tests of these kind are superfluous and have been removed. * feat: Turn mainMenu into an optional prop * test: Add test for optional mainMenu prop * feat: Update snapshots * fix: Remove ResponsiveContext * fix: Remove href and update appMenu prop Dropping the href because having a link that also works as a dropdown can be mildly confusing. Changing menu (type, href, content ) triplet to stick to the pattern; so we removed "menu". Also adding brackets around the triplet. Lastly, updating test and snapshot. Co-authored-by: Carlos Muniz <cmuniz@trcil.org>
426 lines
13 KiB
Plaintext
426 lines
13 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`<StudioHeader /> renders correctly 1`] = `
|
|
<header
|
|
className="site-header-desktop"
|
|
>
|
|
<a
|
|
className="nav-skip sr-only sr-only-focusable"
|
|
href="#main"
|
|
>
|
|
Skip to main content
|
|
</a>
|
|
<div
|
|
className="container-fluid null"
|
|
>
|
|
<div
|
|
className="nav-container position-relative d-flex align-items-center"
|
|
>
|
|
<img
|
|
alt="edX"
|
|
className="logo"
|
|
src="https://edx-cdn.org/v3/default/logo.svg"
|
|
/>
|
|
<nav
|
|
aria-label="Main"
|
|
className="nav main-nav"
|
|
/>
|
|
<nav
|
|
aria-label="Secondary"
|
|
className="nav secondary-menu-container align-items-center ml-auto"
|
|
>
|
|
<div
|
|
className="menu null"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<button
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
aria-label="Account menu for edX"
|
|
className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
|
|
onClick={[Function]}
|
|
>
|
|
<span
|
|
className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
|
|
style={
|
|
Object {
|
|
"height": "1.5em",
|
|
"width": "1.5em",
|
|
}
|
|
}
|
|
>
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="24px"
|
|
role="img"
|
|
style={
|
|
Object {
|
|
"height": "1.5em",
|
|
"width": "1.5em",
|
|
}
|
|
}
|
|
version="1.1"
|
|
viewBox="0 0 24 24"
|
|
width="24px"
|
|
>
|
|
<path
|
|
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
edX
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
`;
|
|
|
|
exports[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
|
|
<header
|
|
className="site-header-desktop"
|
|
>
|
|
<a
|
|
className="nav-skip sr-only sr-only-focusable"
|
|
href="#main"
|
|
>
|
|
Skip to main content
|
|
</a>
|
|
<div
|
|
className="container-fluid null"
|
|
>
|
|
<div
|
|
className="nav-container position-relative d-flex align-items-center"
|
|
>
|
|
<img
|
|
alt="edX"
|
|
className="logo"
|
|
src="https://edx-cdn.org/v3/default/logo.svg"
|
|
/>
|
|
<nav
|
|
aria-label="Main"
|
|
className="nav main-nav"
|
|
/>
|
|
<nav
|
|
aria-label="App"
|
|
className="nav app-nav"
|
|
>
|
|
<div
|
|
className="menu null"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<a
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
className="menu-trigger nav-link d-inline-flex align-items-center"
|
|
onClick={[Function]}
|
|
>
|
|
App Menu
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<nav
|
|
aria-label="Secondary"
|
|
className="nav secondary-menu-container align-items-center ml-auto"
|
|
>
|
|
<div
|
|
className="menu null"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<button
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
aria-label="Account menu for edX"
|
|
className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
|
|
onClick={[Function]}
|
|
>
|
|
<span
|
|
className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
|
|
style={
|
|
Object {
|
|
"height": "1.5em",
|
|
"width": "1.5em",
|
|
}
|
|
}
|
|
>
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="24px"
|
|
role="img"
|
|
style={
|
|
Object {
|
|
"height": "1.5em",
|
|
"width": "1.5em",
|
|
}
|
|
}
|
|
version="1.1"
|
|
viewBox="0 0 24 24"
|
|
width="24px"
|
|
>
|
|
<path
|
|
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
edX
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
`;
|
|
|
|
exports[`<StudioHeader /> renders correctly with the optional main menu 1`] = `
|
|
<header
|
|
className="site-header-desktop"
|
|
>
|
|
<a
|
|
className="nav-skip sr-only sr-only-focusable"
|
|
href="#main"
|
|
>
|
|
Skip to main content
|
|
</a>
|
|
<div
|
|
className="container-fluid null"
|
|
>
|
|
<div
|
|
className="nav-container position-relative d-flex align-items-center"
|
|
>
|
|
<img
|
|
alt="edX"
|
|
className="logo"
|
|
src="https://edx-cdn.org/v3/default/logo.svg"
|
|
/>
|
|
<nav
|
|
aria-label="Main"
|
|
className="nav main-nav"
|
|
>
|
|
<div
|
|
className="menu nav-item"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<a
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
className="menu-trigger nav-link d-inline-flex align-items-center"
|
|
href="https://menu-href-url.org"
|
|
onClick={[Function]}
|
|
>
|
|
Content 1
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div
|
|
className="menu nav-item"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<a
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
className="menu-trigger nav-link d-inline-flex align-items-center"
|
|
href="https://menu-href-url.org"
|
|
onClick={[Function]}
|
|
>
|
|
Content 2
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div
|
|
className="menu nav-item"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<a
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
className="menu-trigger nav-link d-inline-flex align-items-center"
|
|
href="https://menu-href-url.org"
|
|
onClick={[Function]}
|
|
>
|
|
Content 3
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<nav
|
|
aria-label="Secondary"
|
|
className="nav secondary-menu-container align-items-center ml-auto"
|
|
>
|
|
<div
|
|
className="menu null"
|
|
onKeyDown={[Function]}
|
|
onMouseEnter={[Function]}
|
|
onMouseLeave={[Function]}
|
|
>
|
|
<button
|
|
aria-expanded={false}
|
|
aria-haspopup="menu"
|
|
aria-label="Account menu for edX"
|
|
className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
|
|
onClick={[Function]}
|
|
>
|
|
<span
|
|
className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
|
|
style={
|
|
Object {
|
|
"height": "1.5em",
|
|
"width": "1.5em",
|
|
}
|
|
}
|
|
>
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="24px"
|
|
role="img"
|
|
style={
|
|
Object {
|
|
"height": "1.5em",
|
|
"width": "1.5em",
|
|
}
|
|
}
|
|
version="1.1"
|
|
viewBox="0 0 24 24"
|
|
width="24px"
|
|
>
|
|
<path
|
|
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
edX
|
|
|
|
<svg
|
|
aria-hidden={true}
|
|
focusable="false"
|
|
height="16px"
|
|
role="img"
|
|
version="1.1"
|
|
viewBox="0 0 16 16"
|
|
width="16px"
|
|
>
|
|
<path
|
|
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
|
fill="currentColor"
|
|
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
`;
|