Skip to content

Commit

Permalink
fix: sync with v5.8.0 of openedx header
Browse files Browse the repository at this point in the history
  • Loading branch information
hinakhadim committed Nov 20, 2024
1 parent 346a636 commit 7f00e20
Show file tree
Hide file tree
Showing 14 changed files with 1,041 additions and 889 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ on:
jobs:
tests:
runs-on: ubuntu-latest
strategy:
matrix:
node: [18, 20]
steps:
- name: Checkout
uses: actions/checkout@v4
Expand Down
5 changes: 2 additions & 3 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ name: Release CI
on:
push:
branches:
- master
- alpha
- redwood/indigo
jobs:
release:
name: Release
Expand Down Expand Up @@ -42,4 +41,4 @@ jobs:
semantic_version: 16
env:
GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
1,654 changes: 859 additions & 795 deletions package-lock.json

Large diffs are not rendered by default.

19 changes: 13 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@edx/frontend-component-header",
"version": "1.0.0-semantically-released",
"name": "@edly-io/indigo-frontend-component-header",
"version": "2.0.0",
"description": "The standard header for Open edX",
"main": "dist/index.js",
"publishConfig": {
Expand All @@ -24,14 +24,14 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/openedx/frontend-component-header.git"
"url": "git+https://github.com/edly-io/frontend-component-header.git"
},
"author": "edX",
"license": "AGPL-3.0",
"bugs": {
"url": "https://github.com/openedx/frontend-component-header/issues"
"url": "https://github.com/edly-io/frontend-component-header/issues"
},
"homepage": "https://github.com/openedx/frontend-component-header#readme",
"homepage": "https://github.com/edly-io/frontend-component-header#readme",
"devDependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/browserslist-config": "^1.1.1",
Expand Down Expand Up @@ -66,7 +66,8 @@
"classnames": "^2.5.1",
"jest-environment-jsdom": "^29.7.0",
"react-responsive": "8.2.0",
"react-transition-group": "4.4.5"
"react-transition-group": "4.4.5",
"universal-cookie": "^7.2.0"
},
"peerDependencies": {
"@edx/frontend-platform": "^7.0.0 || ^8.0.0",
Expand All @@ -75,5 +76,11 @@
"react": "^16.9.0 || ^17.0.0",
"react-dom": "^16.9.0 || ^17.0.0",
"react-router-dom": "^6.14.2"
},
"release": {
"tagFormat": "indigo-${version}",
"branches": [
"redwood/indigo"
]
}
}
4 changes: 2 additions & 2 deletions src/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,10 @@ const Header = ({

return (
<>
<Responsive maxWidth={769}>
<Responsive maxWidth={991}>
<MobileHeaderSlot props={props} />
</Responsive>
<Responsive minWidth={769}>
<Responsive minWidth={992}>
<DesktopHeaderSlot props={props} />
</Responsive>
</>
Expand Down
58 changes: 58 additions & 0 deletions src/ThemeToggleButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import Cookies from 'universal-cookie';
import { Icon } from '@openedx/paragon';
import { WbSunny, Nightlight } from '@openedx/paragon/icons';

const themeCookie = 'indigo-toggle-dark';
const themeCookieExpiry = 90; // days

const ThemeToggleButton = () => {
const cookies = new Cookies();
const isThemeToggleEnabled = getConfig().INDIGO_ENABLE_DARK_TOGGLE;

const getCookieExpiry = () => {
const today = new Date();
return new Date(today.getFullYear(), today.getMonth(), today.getDate() + themeCookieExpiry);
};

const getCookieOptions = (serverURL) => ({ domain: serverURL.hostname, path: '/', expires: getCookieExpiry() });

const onToggleTheme = () => {
const serverURL = new URL(getConfig().LMS_BASE_URL);
let theme = '';

if (cookies.get(themeCookie) === 'dark') {
document.body.classList.remove('indigo-dark-theme');
theme = 'light';
} else {
document.body.classList.add('indigo-dark-theme');
theme = 'dark';
}
cookies.set(themeCookie, theme, getCookieOptions(serverURL));

const learningMFEUnitIframe = document.getElementById('unit-iframe');
if (learningMFEUnitIframe) {
learningMFEUnitIframe.contentWindow.postMessage({ 'indigo-toggle-dark': theme }, serverURL.origin);
}
};

if (!isThemeToggleEnabled) {
return <div />;
}

return (
<div className="theme-toggle-button">
<div className="light-theme-icon"><Icon src={WbSunny} /></div>
<div className="toggle-switch">
<label htmlFor="theme-toggle-checkbox" className="switch">
<input id="theme-toggle-checkbox" defaultChecked={cookies.get(themeCookie) === 'dark'} onChange={onToggleTheme} type="checkbox" />
<span className="slider round" />
</label>
</div>
<div className="dark-theme-icon"><Icon src={Nightlight} /></div>
</div>
);
};

export default ThemeToggleButton;
116 changes: 50 additions & 66 deletions src/__snapshots__/Header.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
aria-label="Secondary"
className="nav secondary-menu-container align-items-center ml-auto"
>
<div
className="mr-3"
>
<div />
</div>
<a
className="btn mr-2 btn-link"
href="http://localhost:18000/login"
Expand Down Expand Up @@ -72,7 +77,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
Skip to main content
</a>
<div
className="w-100 d-flex justify-content-start"
className="w-100 d-flex justify-content-start sr-only"
>
<div
className="menu position-static"
Expand Down Expand Up @@ -129,7 +134,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
</div>
</div>
<div
className="w-100 d-flex justify-content-center"
className="logo-holder w-100 justify-content-center"
>
<a
className="logo"
Expand All @@ -143,8 +148,9 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
/>
</a>
</div>
<div />
<div
className="w-100 d-flex justify-content-end align-items-center"
className="mobile-menu"
>
<nav
aria-label="Secondary"
Expand All @@ -157,40 +163,26 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
aria-expanded={false}
aria-haspopup="menu"
aria-label="Account Menu"
className="menu-trigger icon-button"
className="menu-trigger null"
onClick={[Function]}
title="Account Menu"
>
<span
className="avatar overflow-hidden d-inline-flex rounded-circle null"
style={
{
"height": "1.5rem",
"width": "1.5rem",
}
}
<div
className="hamburger-menu"
>
<svg
aria-hidden={true}
focusable="false"
height="24px"
role="img"
style={
{
"height": "1.5rem",
"width": "1.5rem",
}
}
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>
<span
className="line"
/>
<span
className="line"
/>
<span
className="line"
/>
<span
className="line"
/>
</div>
</button>
</nav>
</div>
Expand Down Expand Up @@ -239,6 +231,11 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
aria-label="Secondary"
className="nav secondary-menu-container align-items-center ml-auto"
>
<div
className="mr-3"
>
<div />
</div>
<div
className="menu null"
onKeyDown={[Function]}
Expand Down Expand Up @@ -319,7 +316,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
Skip to main content
</a>
<div
className="w-100 d-flex justify-content-start"
className="w-100 d-flex justify-content-start sr-only"
>
<div
className="menu position-static"
Expand Down Expand Up @@ -376,7 +373,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
</div>
</div>
<div
className="w-100 d-flex justify-content-center"
className="logo-holder w-100 justify-content-center"
>
<a
className="logo"
Expand All @@ -390,8 +387,9 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
/>
</a>
</div>
<div />
<div
className="w-100 d-flex justify-content-end align-items-center"
className="mobile-menu"
>
<nav
aria-label="Secondary"
Expand All @@ -404,40 +402,26 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
aria-expanded={false}
aria-haspopup="menu"
aria-label="Account Menu"
className="menu-trigger icon-button"
className="menu-trigger null"
onClick={[Function]}
title="Account Menu"
>
<span
className="avatar overflow-hidden d-inline-flex rounded-circle null"
style={
{
"height": "1.5rem",
"width": "1.5rem",
}
}
<div
className="hamburger-menu"
>
<svg
aria-hidden={true}
focusable="false"
height="24px"
role="img"
style={
{
"height": "1.5rem",
"width": "1.5rem",
}
}
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>
<span
className="line"
/>
<span
className="line"
/>
<span
className="line"
/>
<span
className="line"
/>
</div>
</button>
</nav>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/desktop-header/DesktopHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import ThemeToggleButton from '../ThemeToggleButton';

// Local Components
import { Menu, MenuTrigger, MenuContent } from '../Menu';
Expand Down Expand Up @@ -93,6 +94,7 @@ class DesktopHeader extends React.Component {
aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
className="nav secondary-menu-container align-items-center ml-auto"
>
<div className="mr-3"><ThemeToggleButton /></div>
{loggedIn
? (
<>
Expand Down
Loading

0 comments on commit 7f00e20

Please sign in to comment.