Compare commits
1 Commits
v3.7.4
...
djoy/updat
| Author | SHA1 | Date | |
|---|---|---|---|
|
a5e3997014 |
33
.env
Normal file
33
.env
Normal file
@@ -0,0 +1,33 @@
|
||||
BASE_URL=localhost:1995
|
||||
SITE_NAME=Open edX
|
||||
LMS_BASE_URL=http://localhost:18000
|
||||
CREDENTIALS_BASE_URL=http://localhost:18150
|
||||
ECOMMERCE_BASE_URL=http://localhost:18130
|
||||
LOGIN_URL=http://localhost:18000/login
|
||||
LOGOUT_URL=http://localhost:18000/login
|
||||
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
|
||||
REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
|
||||
SEGMENT_KEY=ul
|
||||
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
|
||||
USER_INFO_COOKIE_NAME=edx-user-info
|
||||
CSRF_COOKIE_NAME=csrftoken
|
||||
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
|
||||
SITE_NAME=edX
|
||||
MARKETING_SITE_BASE_URL=http://localhost:18000
|
||||
ENTERPRISE_MARKETING_URL=http://example.com
|
||||
ENTERPRISE_MARKETING_UTM_CAMPAIGN=my_campaign
|
||||
ENTERPRISE_MARKETING_UTM_SOURCE=edX profile
|
||||
ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=Footer
|
||||
SUPPORT_URL=http://localhost:18000/support
|
||||
CONTACT_URL=http://localhost:18000/contact
|
||||
OPEN_SOURCE_URL=http://localhost:18000/openedx
|
||||
TERMS_OF_SERVICE_URL=http://localhost:18000/terms-of-service
|
||||
PRIVACY_POLICY_URL=http://localhost:18000/privacy-policy
|
||||
FACEBOOK_URL=https://www.facebook.com
|
||||
TWITTER_URL=https://twitter.com
|
||||
YOU_TUBE_URL=https://www.youtube.com
|
||||
LINKED_IN_URL=https://www.linkedin.com
|
||||
REDDIT_URL=https://www.reddit.com
|
||||
APPLE_APP_STORE_URL=https://www.apple.com/ios/app-store/
|
||||
GOOGLE_PLAY_URL=https://play.google.com/store
|
||||
ORDER_HISTORY_URL=localhost:1996/orders
|
||||
@@ -1,22 +0,0 @@
|
||||
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
|
||||
ACCOUNT_PROFILE_URL=http://localhost:1995
|
||||
ACCOUNT_SETTINGS_URL=http://localhost:1997
|
||||
BASE_URL=localhost:8080
|
||||
CREDENTIALS_BASE_URL=http://localhost:18150
|
||||
CSRF_TOKEN_API_PATH=/csrf/api/v1/token
|
||||
ECOMMERCE_BASE_URL=http://localhost:18130
|
||||
LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
|
||||
LMS_BASE_URL=http://localhost:18000
|
||||
STUDIO_BASE_URL=http://localhost:18010
|
||||
LOGIN_URL=http://localhost:18000/login
|
||||
LOGOUT_URL=http://localhost:18000/logout
|
||||
MARKETING_SITE_BASE_URL=http://localhost:18000
|
||||
ORDER_HISTORY_URL=localhost:1996/orders
|
||||
REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
|
||||
SEGMENT_KEY=null
|
||||
SITE_NAME=Open edX
|
||||
USER_INFO_COOKIE_NAME=edx-user-info
|
||||
LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
|
||||
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
|
||||
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
|
||||
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
|
||||
@@ -1,4 +0,0 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('eslint');
|
||||
19
.eslintrc.json
Normal file
19
.eslintrc.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "eslint-config-edx",
|
||||
"parser": "babel-eslint",
|
||||
"rules": {
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{
|
||||
"devDependencies": [
|
||||
"webpack.config.js",
|
||||
"**/*.test.jsx",
|
||||
"**/*.test.js"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
# Run the workflow that adds new tickets that are either:
|
||||
# - labelled "DEPR"
|
||||
# - title starts with "[DEPR]"
|
||||
# - body starts with "Proposal Date" (this is the first template field)
|
||||
# to the org-wide DEPR project board
|
||||
|
||||
name: Add newly created DEPR issues to the DEPR project board
|
||||
|
||||
on:
|
||||
issues:
|
||||
types: [opened]
|
||||
|
||||
jobs:
|
||||
routeissue:
|
||||
uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
|
||||
secrets:
|
||||
GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
|
||||
GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
|
||||
SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
|
||||
@@ -1,20 +0,0 @@
|
||||
# This workflow runs when a comment is made on the ticket
|
||||
# If the comment starts with "label: " it tries to apply
|
||||
# the label indicated in rest of comment.
|
||||
# If the comment starts with "remove label: ", it tries
|
||||
# to remove the indicated label.
|
||||
# Note: Labels are allowed to have spaces and this script does
|
||||
# not parse spaces (as often a space is legitimate), so the command
|
||||
# "label: really long lots of words label" will apply the
|
||||
# label "really long lots of words label"
|
||||
|
||||
name: Allows for the adding and removing of labels via comment
|
||||
|
||||
on:
|
||||
issue_comment:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
add_remove_labels:
|
||||
uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
|
||||
|
||||
36
.github/workflows/ci.yml
vendored
36
.github/workflows/ci.yml
vendored
@@ -1,36 +0,0 @@
|
||||
name: Default CI
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
pull_request:
|
||||
branches:
|
||||
- '**'
|
||||
jobs:
|
||||
tests:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Setup Nodejs Env
|
||||
run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
|
||||
- name: Setup Nodejs
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ env.NODE_VER }}
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Validate package-lock.json changes
|
||||
run: make validate-no-uncommitted-package-lock-changes
|
||||
- name: Lint
|
||||
run: npm run lint
|
||||
- name: Test
|
||||
run: npm run test
|
||||
- name: Build
|
||||
run: npm run build
|
||||
- name: i18n_extract
|
||||
run: npm run i18n_extract
|
||||
- name: Coverage
|
||||
uses: codecov/codecov-action@v3
|
||||
10
.github/workflows/commitlint.yml
vendored
10
.github/workflows/commitlint.yml
vendored
@@ -1,10 +0,0 @@
|
||||
# Run commitlint on the commit messages in a pull request.
|
||||
|
||||
name: Lint Commit Messages
|
||||
|
||||
on:
|
||||
- pull_request
|
||||
|
||||
jobs:
|
||||
commitlint:
|
||||
uses: openedx/.github/.github/workflows/commitlint.yml@master
|
||||
13
.github/workflows/lockfileversion-check.yml
vendored
13
.github/workflows/lockfileversion-check.yml
vendored
@@ -1,13 +0,0 @@
|
||||
#check package-lock file version
|
||||
|
||||
name: lockfileVersion check
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
pull_request:
|
||||
|
||||
jobs:
|
||||
version-check:
|
||||
uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
|
||||
41
.github/workflows/release.yml
vendored
41
.github/workflows/release.yml
vendored
@@ -1,41 +0,0 @@
|
||||
name: Release CI
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
jobs:
|
||||
release:
|
||||
name: Release
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Setup Nodejs Env
|
||||
run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ env.NODE_VER }}
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Validate package-lock.json changes
|
||||
run: make validate-no-uncommitted-package-lock-changes
|
||||
- name: Lint
|
||||
run: npm run lint
|
||||
- name: Test
|
||||
run: npm run test
|
||||
- name: i18n_extract
|
||||
run: npm run i18n_extract
|
||||
- name: Coverage
|
||||
uses: codecov/codecov-action@v3
|
||||
- name: Build
|
||||
run: npm run build
|
||||
- name: Release
|
||||
uses: cycjimmy/semantic-release-action@v3
|
||||
with:
|
||||
semantic_version: 16
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
|
||||
12
.github/workflows/self-assign-issue.yml
vendored
12
.github/workflows/self-assign-issue.yml
vendored
@@ -1,12 +0,0 @@
|
||||
# This workflow runs when a comment is made on the ticket
|
||||
# If the comment starts with "assign me" it assigns the author to the
|
||||
# ticket (case insensitive)
|
||||
|
||||
name: Assign comment author to ticket if they say "assign me"
|
||||
on:
|
||||
issue_comment:
|
||||
types: [created]
|
||||
|
||||
jobs:
|
||||
self_assign_by_comment:
|
||||
uses: openedx/.github/.github/workflows/self-assign-issue.yml@master
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -5,7 +5,3 @@ dist
|
||||
node_modules
|
||||
temp
|
||||
src/i18n/transifex_input.json
|
||||
module.config.js
|
||||
.idea/
|
||||
|
||||
.vscode
|
||||
|
||||
17
.travis.yml
Normal file
17
.travis.yml
Normal file
@@ -0,0 +1,17 @@
|
||||
language: node_js
|
||||
node_js: 12
|
||||
install:
|
||||
- npm install
|
||||
script:
|
||||
- npm run lint
|
||||
- npm run test
|
||||
- npm run build
|
||||
after_success:
|
||||
- npm run semantic-release
|
||||
- codecov
|
||||
env:
|
||||
global:
|
||||
# GH_TOKEN
|
||||
- secure: CFN/uOByWC+7S+AAXECLQ0mNgoiyCDl1ZB5AT5+/qP+xEVs0ysFKDWrD9W8KeQqHqCMPUKNt23nrgxwvFCkSx+n1MAnxZmOdVJWbzGbUB9TsqrwVUALkqof1MrRB8UFVEzIRaO60iRN/L3zVXML+4GsycYX6rHyptbAypxplpljDyKrY8tc/mM7AGZ9eVFGSq+7CXXmdvkhP9kLkH1tIYvR7wjTKvZHbHf6YRjIVCiyzxM4S/E9l8JRnbERp02XosRD62PUJXXk6EJVn6Qoub6CaPnpew5crW0iRF1UJs54U29zWd/S+LuW66WkLfJu7rDq6AFJNMtMNusJxwVkOv4X+p0oJDWZEhojW+/Wm10UAu8/g5oAqeePZEGiSbT3Hp1VqOc4FY/kmOLiM+L6oq/AA2XX6iiE8lA64IH5R8ApQamF4GTUYTvKHeLPgXnGJH7A95Xy9/+jmX9I9wJREMrHrkyPjoX/NTRdG+RrebB1+An9Bt9vAbG862gbOZfgTcuWHDOlG5gcA964Fr7RqR5a62yr45Gw+Q0lTrLj5mGAjjSpMRIAQzi9e7oXmoMZnvenu/WJAe5M+u+/gv82HeXcMwLvNNGSvz+0i1xNUOoX1zHG046oGKiX0Zu+l0JfNwihJTO7vJlaITmjhfOyufwpk74xEyrhf8nLF9e5Frec=
|
||||
# NPM_TOKEN
|
||||
- secure: fuV04Ctf0mgbw6nTJhsTzGZ6dyafZtGVj30ZkvSWsB9hUU8KDtl7wWVW9EayCQsSyyFgPY9RVav5olgC/zljAjDGg0nfF7n8uKIABA0TXdP683WZd06bVOmDXfL26B3yM83aW2xgHZN6VCCvCE8bLP1V6eV8nsr38gDgxVbHa0YasDMmvtYrog+IjxwjcJx7fD0RbYyi7iJC++pdw9kcFqOad28Us7L/jCn+rC3CmUT4kOwPjP5g1v5sB2FA7ouN5s1hUUTKuttV32VJgRP7wbZzoHeHX5BRGSqijdXNSaK5UwzqRnM1sGZkuNDZhJbSB3q90SQrPRgV+fRizwN8zs8Htb+Kk8+wGY6zNhmi9C+lUIv7UpDYbstMWYIf39+P/24Oj+vJBjMY30M9NWB8gt1OQ0dJUoK53v1+BMVmDB0doL6I53xwzUjQetvqOF0Wm3E3OrqJP00OJdzIcAeh2DzcIRW1SrBhI4HAsl7QJZNpRw11QzJ3K2iQSiWNd8qIuX+XJjzQdn1v09gCstvbP33Vn8tP1x0XTSi8wIhTDqE0bII/Sc80Jh76nu0ItQ8pmX4lGsER4C0N3Dp7Zz51yW7E70AWWLsUrMNdF0oHoP437ZRGPhYs5OI6x5AM2jlU8fJ5aUroEsYFCwkH0OO37THohpAQpApe9zL10miTEbw=
|
||||
@@ -1,9 +1,8 @@
|
||||
[main]
|
||||
host = https://www.transifex.com
|
||||
|
||||
[o:open-edx:p:edx-platform:r:frontend-component-header]
|
||||
[edx-platform.frontend-component-header]
|
||||
file_filter = src/i18n/messages/<lang>.json
|
||||
source_file = src/i18n/transifex_input.json
|
||||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
|
||||
type = KEYVALUEJSON
|
||||
|
||||
16
Makefile
16
Makefile
@@ -1,16 +1,18 @@
|
||||
export TRANSIFEX_RESOURCE = frontend-component-header
|
||||
transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
|
||||
transifex_resource = frontend-component-header
|
||||
transifex_langs = "ar,fr,es_419,zh_CN"
|
||||
|
||||
transifex_utils = ./node_modules/.bin/transifex-utils.js
|
||||
i18n = ./src/i18n
|
||||
transifex_input = $(i18n)/transifex_input.json
|
||||
tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
|
||||
tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
|
||||
|
||||
# This directory must match .babelrc .
|
||||
transifex_temp = ./temp/babel-plugin-react-intl
|
||||
|
||||
build:
|
||||
rm -rf ./dist
|
||||
./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
|
||||
./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
|
||||
@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
|
||||
@rm -rf dist/**/*.test.jsx
|
||||
@rm -rf dist/**/__snapshots__
|
||||
@@ -40,15 +42,15 @@ push_translations:
|
||||
# Pushing strings to Transifex...
|
||||
tx push -s
|
||||
# Fetching hashes from Transifex...
|
||||
./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
|
||||
./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
|
||||
# Writing out comments to file...
|
||||
$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
|
||||
$(transifex_utils) $(transifex_temp) --comments
|
||||
# Pushing comments to Transifex...
|
||||
./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
|
||||
./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
|
||||
|
||||
# Pulls translations from Transifex.
|
||||
pull_translations:
|
||||
tx pull -t -f --mode reviewed --languages=$(transifex_langs)
|
||||
tx pull -f --mode reviewed --language=$(transifex_langs)
|
||||
|
||||
# This target is used by Travis.
|
||||
validate-no-uncommitted-package-lock-changes:
|
||||
|
||||
76
README.rst
76
README.rst
@@ -1,79 +1,11 @@
|
||||
#########################
|
||||
frontend-component-header
|
||||
#########################
|
||||
=========================
|
||||
|
||||
|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
|
||||
|
||||
********
|
||||
Overview
|
||||
********
|
||||
|
||||
A generic header for Open edX micro-frontend applications.
|
||||
|
||||
************
|
||||
Requirements
|
||||
************
|
||||
|
||||
This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/master/src/index.jsx>`_
|
||||
|
||||
Environment Variables
|
||||
=====================
|
||||
|
||||
* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
|
||||
* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout.
|
||||
* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account.
|
||||
* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header.
|
||||
Defaults to "localhost" in development.
|
||||
* ``LOGO_URL`` - The URL of the site's logo. This logo is displayed in the header.
|
||||
* ``ORDER_HISTORY_URL`` - The URL of the order history page.
|
||||
* ``ACCOUNT_PROFILE_URL`` - The URL of the account profile page.
|
||||
* ``ACCOUNT_SETTINGS_URL`` - The URL of the account settings page.
|
||||
* ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
|
||||
menu items when truthy. This is intended to be used in micro-frontends like
|
||||
frontend-app-authentication in which these menus are considered distractions from the user's task.
|
||||
|
||||
************
|
||||
Installation
|
||||
************
|
||||
|
||||
To install this header into your Open edX micro-frontend, run the following command in your MFE:
|
||||
|
||||
``npm i --save @edx/frontend-component-header``
|
||||
|
||||
This will make the component available to be imported into your application.
|
||||
|
||||
*****
|
||||
Usage
|
||||
*****
|
||||
|
||||
This library has the following exports:
|
||||
|
||||
* ``(default)``: The header as a React component.
|
||||
* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
|
||||
* ``dist/index.scss``: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.
|
||||
|
||||
Examples
|
||||
========
|
||||
|
||||
* `An example of component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
|
||||
* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
|
||||
|
||||
|
||||
***********
|
||||
Development
|
||||
***********
|
||||
|
||||
Install dependencies::
|
||||
|
||||
npm i
|
||||
|
||||
Start the development server::
|
||||
|
||||
npm start
|
||||
|
||||
Build a production distribution::
|
||||
|
||||
npm run build
|
||||
This is the standard Open edX header for use in React applications. It has two exports:
|
||||
- **default**: The Header Component
|
||||
- **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
|
||||
|
||||
.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
|
||||
:target: https://travis-ci.com/edx/frontend-component-header
|
||||
|
||||
@@ -1,3 +1,33 @@
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('babel-preserve-modules');
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
'@babel/preset-react',
|
||||
],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
env: {
|
||||
i18n: {
|
||||
plugins: [
|
||||
[
|
||||
'react-intl',
|
||||
{
|
||||
messagesDir: './temp/babel-plugin-react-intl',
|
||||
moduleSourceName: '@edx/frontend-i18n',
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
test: {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
3
commitlint.config.js
Normal file
3
commitlint.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
extends: ['@commitlint/config-angular'],
|
||||
};
|
||||
10
example/.sassrc.js
Normal file
10
example/.sassrc.js
Normal file
@@ -0,0 +1,10 @@
|
||||
const path = require('path');
|
||||
|
||||
// Resolve ~tilda paths used in paragon to
|
||||
// node_modules. This is used to reference
|
||||
// bootstrap specifically.
|
||||
module.exports = {
|
||||
includePaths: [
|
||||
path.resolve(__dirname, '../node_modules'),
|
||||
],
|
||||
};
|
||||
12
example/index.html
Normal file
12
example/index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<title>Example</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,35 +2,39 @@ import 'babel-polyfill';
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
|
||||
import { AppContext, AppProvider } from '@edx/frontend-platform/react';
|
||||
import Header from '@edx/frontend-component-header';
|
||||
|
||||
import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
|
||||
import { NewRelicLoggingService } from '@edx/frontend-logging';
|
||||
import './index.scss';
|
||||
import SiteHeader from '../src/';
|
||||
|
||||
subscribe(APP_READY, () => {
|
||||
App.subscribe(APP_READY, () => {
|
||||
ReactDOM.render(
|
||||
<AppProvider>
|
||||
{/* We can fake out authentication by including another provider here with the data we want */}
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: null,
|
||||
config: getConfig(),
|
||||
authenticatedUser: {
|
||||
userId: null,
|
||||
username: null,
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: App.config
|
||||
}}>
|
||||
<Header />
|
||||
<SiteHeader />
|
||||
</AppContext.Provider>
|
||||
<h5 className="mt-2 mb-5">Logged out state</h5>
|
||||
|
||||
{/* We can fake out authentication by including another provider here with the data we want */}
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: {
|
||||
userId: '123abc',
|
||||
userId: null,
|
||||
username: 'testuser',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: getConfig(),
|
||||
config: App.config
|
||||
}}>
|
||||
<Header />
|
||||
<SiteHeader />
|
||||
</AppContext.Provider>
|
||||
<h5 className="mt-2">Logged in state</h5>
|
||||
</AppProvider>,
|
||||
@@ -38,6 +42,4 @@ subscribe(APP_READY, () => {
|
||||
);
|
||||
});
|
||||
|
||||
initialize({
|
||||
messages: []
|
||||
});
|
||||
App.initialize({ messages: [], loggingService: NewRelicLoggingService });
|
||||
|
||||
@@ -1,6 +1,2 @@
|
||||
@import "@edx/brand/paragon/fonts";
|
||||
@import "@edx/brand/paragon/variables";
|
||||
@import "@edx/paragon/scss/core/core";
|
||||
@import "@edx/brand/paragon/overrides";
|
||||
|
||||
@import "@edx/frontend-component-header/index";
|
||||
@import "~@edx/paragon/scss/core/core.scss";
|
||||
@import '../src/index.scss';
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('jest', {
|
||||
setupFilesAfterEnv: [
|
||||
'<rootDir>/src/setupTest.js',
|
||||
],
|
||||
});
|
||||
59169
package-lock.json
generated
59169
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
118
package.json
118
package.json
@@ -2,74 +2,96 @@
|
||||
"name": "@edx/frontend-component-header",
|
||||
"version": "1.0.0-semantically-released",
|
||||
"description": "The standard header for Open edX",
|
||||
"main": "dist/index.js",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"build": "make build",
|
||||
"i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
|
||||
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
|
||||
"snapshot": "fedx-scripts jest --updateSnapshot",
|
||||
"start": "fedx-scripts webpack-dev-server --progress",
|
||||
"test": "fedx-scripts jest --coverage"
|
||||
"i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
|
||||
"lint": "eslint --ext .js --ext .jsx .",
|
||||
"semantic-release": "semantic-release",
|
||||
"start": "parcel ./example/index.html --no-source-maps --out-dir example/dist",
|
||||
"test": "jest --coverage --passWithNoTests"
|
||||
},
|
||||
"files": [
|
||||
"/dist"
|
||||
"/dist",
|
||||
"/src"
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run lint"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/openedx/frontend-component-header.git"
|
||||
"url": "git+https://github.com/edx/frontend-component-header.git"
|
||||
},
|
||||
"author": "edX",
|
||||
"license": "AGPL-3.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/openedx/frontend-component-header/issues"
|
||||
"url": "https://github.com/edx/frontend-component-header/issues"
|
||||
},
|
||||
"homepage": "https://github.com/openedx/frontend-component-header#readme",
|
||||
"homepage": "https://github.com/edx/frontend-component-header#readme",
|
||||
"devDependencies": {
|
||||
"@edx/brand": "npm:@edx/brand-openedx@1.2.0",
|
||||
"@edx/browserslist-config": "^1.1.1",
|
||||
"@edx/frontend-build": "^12.4.19",
|
||||
"@edx/frontend-platform": "^3.0.1",
|
||||
"@edx/reactifex": "^2.1.1",
|
||||
"@testing-library/dom": "9.2.0",
|
||||
"@testing-library/jest-dom": "5.16.5",
|
||||
"@testing-library/react": "10.4.9",
|
||||
"enzyme": "3.11.0",
|
||||
"enzyme-adapter-react-16": "1.15.7",
|
||||
"husky": "8.0.3",
|
||||
"jest": "29.5.0",
|
||||
"jest-chain": "1.1.6",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"react-redux": "7.2.9",
|
||||
"react-router-dom": "5.3.4",
|
||||
"react-test-renderer": "16.14.0",
|
||||
"redux": "4.2.1",
|
||||
"redux-saga": "1.2.3"
|
||||
"@babel/cli": "7.6.0",
|
||||
"@babel/core": "7.6.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.5.5",
|
||||
"@babel/plugin-proposal-object-rest-spread": "7.5.5",
|
||||
"@babel/preset-env": "7.6.0",
|
||||
"@babel/preset-react": "7.0.0",
|
||||
"@edx/frontend-analytics": "3.0.0",
|
||||
"@edx/frontend-auth": "7.0.1",
|
||||
"@edx/frontend-base": "3.0.0",
|
||||
"@edx/frontend-i18n": "3.0.3",
|
||||
"@edx/frontend-logging": "3.0.1",
|
||||
"@edx/paragon": "7.1.4",
|
||||
"babel-eslint": "10.0.3",
|
||||
"babel-plugin-react-intl": "4.1.18",
|
||||
"dotenv": "8.1.0",
|
||||
"enzyme": "3.10.0",
|
||||
"enzyme-adapter-react-16": "1.14.0",
|
||||
"eslint": "6.3.0",
|
||||
"eslint-config-edx": "4.0.4",
|
||||
"jest": "24.9.0",
|
||||
"parcel-bundler": "1.12.3",
|
||||
"prop-types": "15.7.2",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
"react-redux": "7.1.1",
|
||||
"react-router-dom": "5.0.1",
|
||||
"react-test-renderer": "16.9.0",
|
||||
"reactifex": "1.1.1",
|
||||
"redux": "4.0.4",
|
||||
"redux-saga": "1.0.5",
|
||||
"sass": "1.22.12",
|
||||
"semantic-release": "15.13.24"
|
||||
},
|
||||
"dependencies": {
|
||||
"@edx/paragon": "20.30.1",
|
||||
"@fortawesome/fontawesome-svg-core": "6.3.0",
|
||||
"@fortawesome/free-brands-svg-icons": "6.3.0",
|
||||
"@fortawesome/free-regular-svg-icons": "6.3.0",
|
||||
"@fortawesome/free-solid-svg-icons": "6.3.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"react-responsive": "8.2.0",
|
||||
"react-transition-group": "4.4.5"
|
||||
"react-responsive": "8.0.1",
|
||||
"react-transition-group": "4.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@edx/frontend-platform": "^2.0.0 || ^3.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.9.0 || ^17.0.0",
|
||||
"react-dom": "^16.9.0 || ^17.0.0"
|
||||
"@edx/frontend-analytics": "^3.0.0",
|
||||
"@edx/frontend-base": "^3.0.0",
|
||||
"@edx/frontend-i18n": "^3.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.9.0"
|
||||
},
|
||||
"jest": {
|
||||
"transform": {
|
||||
"^.+\\.jsx?$": "babel-jest"
|
||||
},
|
||||
"collectCoverageFrom": [
|
||||
"src/**/*.{js,jsx}",
|
||||
"!**/node_modules/**",
|
||||
"!**/dist/**"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
|
||||
},
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!@edx)"
|
||||
],
|
||||
"setupFiles": [
|
||||
"./src/setupTest.js",
|
||||
"dotenv/config"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en-us" dir="ltr">
|
||||
<head>
|
||||
<title>Header</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +1,5 @@
|
||||
{
|
||||
"extends": [
|
||||
"config:base",
|
||||
"schedule:weekly",
|
||||
":automergeLinters",
|
||||
":automergeMinor",
|
||||
":automergeTesters",
|
||||
":enableVulnerabilityAlerts",
|
||||
":rebaseStalePrs",
|
||||
":semanticCommits",
|
||||
":updateNotScheduled"
|
||||
],
|
||||
"packageRules": [
|
||||
{
|
||||
"matchDepTypes": [
|
||||
"devDependencies"
|
||||
],
|
||||
"matchUpdateTypes": [
|
||||
"lockFileMaintenance",
|
||||
"minor",
|
||||
"patch",
|
||||
"pin"
|
||||
],
|
||||
"automerge": true
|
||||
},
|
||||
{
|
||||
"matchPackagePatterns": ["@edx"],
|
||||
"matchUpdateTypes": ["minor", "patch"],
|
||||
"automerge": true
|
||||
}
|
||||
],
|
||||
"timezone": "America/New_York"
|
||||
"config:base"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
|
||||
|
||||
import { AvatarIcon } from './Icons';
|
||||
|
||||
const Avatar = ({
|
||||
function Avatar({
|
||||
size,
|
||||
src,
|
||||
alt,
|
||||
className,
|
||||
}) => {
|
||||
}) {
|
||||
const avatar = src ? (
|
||||
<img className="d-block w-100 h-100" src={src} alt={alt} />
|
||||
) : (
|
||||
<AvatarIcon style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
|
||||
<AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -23,7 +23,7 @@ const Avatar = ({
|
||||
{avatar}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Avatar.propTypes = {
|
||||
src: PropTypes.string,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-i18n';
|
||||
|
||||
// Local Components
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
@@ -9,7 +8,7 @@ import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
|
||||
// i18n
|
||||
import messages from './Header.messages';
|
||||
import messages from './SiteHeader.messages';
|
||||
|
||||
// Assets
|
||||
import { CaretIcon } from './Icons';
|
||||
@@ -23,9 +22,7 @@ class DesktopHeader extends React.Component {
|
||||
const { mainMenu } = this.props;
|
||||
|
||||
// Nodes are accepted as a prop
|
||||
if (!Array.isArray(mainMenu)) {
|
||||
return mainMenu;
|
||||
}
|
||||
if (!Array.isArray(mainMenu)) return mainMenu;
|
||||
|
||||
return mainMenu.map((menuItem) => {
|
||||
const {
|
||||
@@ -54,24 +51,6 @@ class DesktopHeader extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
// Renders an optional App Menu for
|
||||
renderAppMenu() {
|
||||
const { appMenu } = this.props;
|
||||
const { content: appMenuContent, menuItems } = appMenu;
|
||||
return (
|
||||
<Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
|
||||
<MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center">
|
||||
{appMenuContent} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
</MenuTrigger>
|
||||
<MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
|
||||
{menuItems.map(({ type, href, content }) => (
|
||||
<a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
|
||||
))}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
renderUserMenu() {
|
||||
const {
|
||||
userMenu,
|
||||
@@ -85,7 +64,7 @@ class DesktopHeader extends React.Component {
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
|
||||
className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
|
||||
className="btn btn-light d-inline-flex align-items-center pl-2 pr-3"
|
||||
>
|
||||
<Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
|
||||
{username} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
@@ -120,31 +99,20 @@ class DesktopHeader extends React.Component {
|
||||
logoDestination,
|
||||
loggedIn,
|
||||
intl,
|
||||
appMenu,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
|
||||
|
||||
return (
|
||||
<header className="site-header-desktop">
|
||||
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
|
||||
<div className={`container-fluid ${logoClasses}`}>
|
||||
<div className="container-fluid">
|
||||
<div className="nav-container position-relative d-flex align-items-center">
|
||||
{logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
|
||||
{ logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
|
||||
<nav
|
||||
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
|
||||
className="nav main-nav"
|
||||
>
|
||||
{this.renderMainMenu()}
|
||||
</nav>
|
||||
{appMenu ? (
|
||||
<nav
|
||||
aria-label={intl.formatMessage(messages['header.label.app.nav'])}
|
||||
className="nav app-nav"
|
||||
>
|
||||
{this.renderAppMenu()}
|
||||
</nav>
|
||||
) : null}
|
||||
<nav
|
||||
aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
@@ -182,20 +150,6 @@ DesktopHeader.propTypes = {
|
||||
|
||||
// i18n
|
||||
intl: intlShape.isRequired,
|
||||
|
||||
// appMenu
|
||||
appMenu: PropTypes.shape(
|
||||
{
|
||||
content: PropTypes.string,
|
||||
menuItems: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
type: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
}),
|
||||
),
|
||||
},
|
||||
),
|
||||
};
|
||||
|
||||
DesktopHeader.defaultProps = {
|
||||
@@ -208,7 +162,6 @@ DesktopHeader.defaultProps = {
|
||||
avatar: null,
|
||||
username: null,
|
||||
loggedIn: false,
|
||||
appMenu: null,
|
||||
};
|
||||
|
||||
export default injectIntl(DesktopHeader);
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { Context as ResponsiveContext } from 'react-responsive';
|
||||
|
||||
import Header from './index';
|
||||
|
||||
const HeaderComponent = ({ width, contextValue }) => (
|
||||
<ResponsiveContext.Provider value={width}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider
|
||||
value={contextValue}
|
||||
>
|
||||
<Header />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
|
||||
describe('<Header />', () => {
|
||||
it('renders correctly for anonymous desktop', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: null,
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
};
|
||||
const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly for authenticated desktop', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
};
|
||||
const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly for anonymous mobile', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: null,
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
};
|
||||
const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly for authenticated mobile', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
};
|
||||
const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
export const MenuIcon = (props) => (
|
||||
export const MenuIcon = props => (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
@@ -14,7 +14,7 @@ export const MenuIcon = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const AvatarIcon = (props) => (
|
||||
export const AvatarIcon = props => (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
@@ -29,7 +29,7 @@ export const AvatarIcon = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CaretIcon = (props) => (
|
||||
export const CaretIcon = props => (
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
|
||||
23
src/Logo.jsx
23
src/Logo.jsx
@@ -1,25 +1,30 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Logo = ({ src, alt, ...attributes }) => (
|
||||
<img src={src} alt={alt} {...attributes} />
|
||||
);
|
||||
|
||||
function Logo({ src, alt, ...attributes }) {
|
||||
return (
|
||||
<img src={src} alt={alt} {...attributes} />
|
||||
);
|
||||
}
|
||||
|
||||
Logo.propTypes = {
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const LinkedLogo = ({
|
||||
function LinkedLogo({
|
||||
href,
|
||||
src,
|
||||
alt,
|
||||
...attributes
|
||||
}) => (
|
||||
<a href={href} {...attributes}>
|
||||
<img className="d-block" src={src} alt={alt} />
|
||||
</a>
|
||||
);
|
||||
}) {
|
||||
return (
|
||||
<a href={href} {...attributes}>
|
||||
<img className="d-block" src={src} alt={alt} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
LinkedLogo.propTypes = {
|
||||
href: PropTypes.string.isRequired,
|
||||
|
||||
@@ -2,10 +2,13 @@ import React from 'react';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const MenuTrigger = ({ tag, className, ...attributes }) => React.createElement(tag, {
|
||||
className: `menu-trigger ${className}`,
|
||||
...attributes,
|
||||
});
|
||||
|
||||
function MenuTrigger({ tag, className, ...attributes }) {
|
||||
return React.createElement(tag, {
|
||||
className: `menu-trigger ${className}`,
|
||||
...attributes,
|
||||
});
|
||||
}
|
||||
MenuTrigger.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
@@ -16,10 +19,13 @@ MenuTrigger.defaultProps = {
|
||||
};
|
||||
const MenuTriggerType = <MenuTrigger />.type;
|
||||
|
||||
const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
|
||||
className: ['menu-content', className].join(' '),
|
||||
...attributes,
|
||||
});
|
||||
|
||||
function MenuContent({ tag, className, ...attributes }) {
|
||||
return React.createElement(tag, {
|
||||
className: ['menu-content', className].join(' '),
|
||||
...attributes,
|
||||
});
|
||||
}
|
||||
MenuContent.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
@@ -29,17 +35,6 @@ MenuContent.defaultProps = {
|
||||
className: null,
|
||||
};
|
||||
|
||||
const menuPropTypes = {
|
||||
tag: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
onOpen: PropTypes.func,
|
||||
closeOnDocumentClick: PropTypes.bool,
|
||||
respondToPointerEvents: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
transitionTimeout: PropTypes.number,
|
||||
transitionClassName: PropTypes.string,
|
||||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
};
|
||||
|
||||
class Menu extends React.Component {
|
||||
constructor(props) {
|
||||
@@ -71,14 +66,10 @@ class Menu extends React.Component {
|
||||
|
||||
// Event handlers
|
||||
onDocumentClick(e) {
|
||||
if (!this.props.closeOnDocumentClick) {
|
||||
return;
|
||||
}
|
||||
if (!this.props.closeOnDocumentClick) return;
|
||||
|
||||
const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
|
||||
if (clickIsInMenu) {
|
||||
return;
|
||||
}
|
||||
if (clickIsInMenu) return;
|
||||
|
||||
this.close();
|
||||
}
|
||||
@@ -86,9 +77,7 @@ class Menu extends React.Component {
|
||||
onTriggerClick(e) {
|
||||
// Let the browser follow the link of the trigger if the menu
|
||||
// is already expanded and the trigger has an href attribute
|
||||
if (this.state.expanded && e.target.getAttribute('href')) {
|
||||
return;
|
||||
}
|
||||
if (this.state.expanded && e.target.getAttribute('href')) return;
|
||||
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
@@ -100,9 +89,7 @@ class Menu extends React.Component {
|
||||
}
|
||||
|
||||
onKeyDown(e) {
|
||||
if (!this.state.expanded) {
|
||||
return;
|
||||
}
|
||||
if (!this.state.expanded) return;
|
||||
switch (e.key) {
|
||||
case 'Escape': {
|
||||
e.preventDefault();
|
||||
@@ -144,19 +131,16 @@ class Menu extends React.Component {
|
||||
}
|
||||
|
||||
onMouseEnter() {
|
||||
if (!this.props.respondToPointerEvents) {
|
||||
return;
|
||||
}
|
||||
if (!this.props.respondToPointerEvents) return;
|
||||
this.open();
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
if (!this.props.respondToPointerEvents) {
|
||||
return;
|
||||
}
|
||||
if (!this.props.respondToPointerEvents) return;
|
||||
this.close();
|
||||
}
|
||||
|
||||
|
||||
// Internal functions
|
||||
|
||||
getFocusableElements() {
|
||||
@@ -167,7 +151,7 @@ class Menu extends React.Component {
|
||||
// Any extra props are attributes for the menu
|
||||
const attributes = {};
|
||||
Object.keys(this.props)
|
||||
.filter(property => menuPropTypes[property] === undefined)
|
||||
.filter(property => Menu.propTypes[property] === undefined)
|
||||
.forEach((property) => {
|
||||
attributes[property] = this.props[property];
|
||||
});
|
||||
@@ -189,9 +173,7 @@ class Menu extends React.Component {
|
||||
}
|
||||
|
||||
open() {
|
||||
if (this.props.onOpen) {
|
||||
this.props.onOpen();
|
||||
}
|
||||
if (this.props.onOpen) this.props.onOpen();
|
||||
this.setState({ expanded: true });
|
||||
// Listen to touchend and click events to ensure the menu
|
||||
// can be closed on mobile, pointer, and mixed input devices
|
||||
@@ -200,9 +182,7 @@ class Menu extends React.Component {
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
if (this.props.onClose) this.props.onClose();
|
||||
this.setState({ expanded: false });
|
||||
document.removeEventListener('touchend', this.onDocumentClick, true);
|
||||
document.removeEventListener('click', this.onDocumentClick, true);
|
||||
@@ -260,7 +240,18 @@ class Menu extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
Menu.propTypes = menuPropTypes;
|
||||
|
||||
Menu.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
onOpen: PropTypes.func,
|
||||
closeOnDocumentClick: PropTypes.bool,
|
||||
respondToPointerEvents: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
transitionTimeout: PropTypes.number,
|
||||
transitionClassName: PropTypes.string,
|
||||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
};
|
||||
Menu.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
@@ -272,4 +263,5 @@ Menu.defaultProps = {
|
||||
transitionClassName: 'menu-content',
|
||||
};
|
||||
|
||||
|
||||
export { Menu, MenuTrigger, MenuContent };
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-i18n';
|
||||
|
||||
// Local Components
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
@@ -9,7 +8,7 @@ import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
|
||||
// i18n
|
||||
import messages from './Header.messages';
|
||||
import messages from './SiteHeader.messages';
|
||||
|
||||
// Assets
|
||||
import { MenuIcon } from './Icons';
|
||||
@@ -23,9 +22,7 @@ class MobileHeader extends React.Component {
|
||||
const { mainMenu } = this.props;
|
||||
|
||||
// Nodes are accepted as a prop
|
||||
if (!Array.isArray(mainMenu)) {
|
||||
return mainMenu;
|
||||
}
|
||||
if (!Array.isArray(mainMenu)) return mainMenu;
|
||||
|
||||
return mainMenu.map((menuItem) => {
|
||||
const {
|
||||
@@ -92,22 +89,17 @@ class MobileHeader extends React.Component {
|
||||
stickyOnMobile,
|
||||
intl,
|
||||
mainMenu,
|
||||
userMenu,
|
||||
loggedOutItems,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
|
||||
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
|
||||
|
||||
return (
|
||||
<header
|
||||
aria-label={intl.formatMessage(messages['header.label.main.header'])}
|
||||
className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
|
||||
>
|
||||
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
|
||||
{mainMenu.length > 0 ? (
|
||||
<div className="w-100 d-flex justify-content-start">
|
||||
|
||||
<div className="w-100 d-flex justify-content-start">
|
||||
{mainMenu.length > 0 ?
|
||||
<Menu className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
@@ -124,29 +116,26 @@ class MobileHeader extends React.Component {
|
||||
>
|
||||
{this.renderMainMenu()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`w-100 d-flex ${logoClasses}`}>
|
||||
</Menu> : null }
|
||||
</div>
|
||||
<div className="w-100 d-flex justify-content-center">
|
||||
{ logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
|
||||
</div>
|
||||
{userMenu.length > 0 || loggedOutItems.length > 0 ? (
|
||||
<div className="w-100 d-flex justify-content-end align-items-center">
|
||||
<Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
>
|
||||
<Avatar size="1.5rem" src={avatar} alt={username} />
|
||||
</MenuTrigger>
|
||||
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
|
||||
{loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="w-100 d-flex justify-content-end align-items-center">
|
||||
<Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
>
|
||||
<Avatar size="1.5rem" src={avatar} alt={username} />
|
||||
</MenuTrigger>
|
||||
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
|
||||
{loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,36 +1,23 @@
|
||||
import React, { useContext } from 'react';
|
||||
import Responsive from 'react-responsive';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import {
|
||||
APP_CONFIG_INITIALIZED,
|
||||
ensureConfig,
|
||||
mergeConfig,
|
||||
getConfig,
|
||||
subscribe,
|
||||
} from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-i18n';
|
||||
import { App, AppContext } from '@edx/frontend-base';
|
||||
|
||||
import DesktopHeader from './DesktopHeader';
|
||||
import MobileHeader from './MobileHeader';
|
||||
|
||||
import messages from './Header.messages';
|
||||
import LogoSVG from './logo.svg';
|
||||
|
||||
ensureConfig([
|
||||
import messages from './SiteHeader.messages';
|
||||
|
||||
App.requireConfig([
|
||||
'LMS_BASE_URL',
|
||||
'LOGOUT_URL',
|
||||
'LOGIN_URL',
|
||||
'SITE_NAME',
|
||||
'LOGO_URL',
|
||||
'ORDER_HISTORY_URL',
|
||||
], 'Header component');
|
||||
|
||||
subscribe(APP_CONFIG_INITIALIZED, () => {
|
||||
mergeConfig({
|
||||
AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
|
||||
}, 'Header additional config');
|
||||
});
|
||||
|
||||
const Header = ({ intl }) => {
|
||||
function SiteHeader({ intl }) {
|
||||
const { authenticatedUser, config } = useContext(AppContext);
|
||||
|
||||
const mainMenu = [
|
||||
@@ -41,13 +28,7 @@ const Header = ({ intl }) => {
|
||||
},
|
||||
];
|
||||
|
||||
const orderHistoryItem = {
|
||||
type: 'item',
|
||||
href: config.ORDER_HISTORY_URL,
|
||||
content: intl.formatMessage(messages['header.user.menu.order.history']),
|
||||
};
|
||||
|
||||
const userMenu = authenticatedUser === null ? [] : [
|
||||
const userMenu = [
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.LMS_BASE_URL}/dashboard`,
|
||||
@@ -55,12 +36,12 @@ const Header = ({ intl }) => {
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.ACCOUNT_PROFILE_URL}/u/${authenticatedUser.username}`,
|
||||
href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
|
||||
content: intl.formatMessage(messages['header.user.menu.profile']),
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
href: config.ACCOUNT_SETTINGS_URL,
|
||||
href: `${config.LMS_BASE_URL}/account/settings`,
|
||||
content: intl.formatMessage(messages['header.user.menu.account.settings']),
|
||||
},
|
||||
{
|
||||
@@ -70,11 +51,6 @@ const Header = ({ intl }) => {
|
||||
},
|
||||
];
|
||||
|
||||
// Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
|
||||
if (config.ORDER_HISTORY_URL) {
|
||||
userMenu.splice(-1, 0, orderHistoryItem);
|
||||
}
|
||||
|
||||
const loggedOutItems = [
|
||||
{
|
||||
type: 'item',
|
||||
@@ -89,31 +65,32 @@ const Header = ({ intl }) => {
|
||||
];
|
||||
|
||||
const props = {
|
||||
logo: config.LOGO_URL,
|
||||
logo: LogoSVG,
|
||||
logoAltText: config.SITE_NAME,
|
||||
siteName: config.SITE_NAME,
|
||||
logoDestination: `${config.LMS_BASE_URL}/dashboard`,
|
||||
loggedIn: authenticatedUser !== null,
|
||||
username: authenticatedUser !== null ? authenticatedUser.username : null,
|
||||
avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
|
||||
mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
|
||||
userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
|
||||
loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,
|
||||
loggedIn: !!authenticatedUser.username,
|
||||
username: authenticatedUser.username,
|
||||
avatar: authenticatedUser.avatar,
|
||||
mainMenu,
|
||||
userMenu,
|
||||
loggedOutItems,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<React.Fragment>
|
||||
<Responsive maxWidth={768}>
|
||||
<MobileHeader {...props} />
|
||||
</Responsive>
|
||||
<Responsive minWidth={769}>
|
||||
<DesktopHeader {...props} />
|
||||
</Responsive>
|
||||
</>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
SiteHeader.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(Header);
|
||||
export default injectIntl(SiteHeader);
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
import { defineMessages } from '@edx/frontend-i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
'header.links.courses': {
|
||||
@@ -56,16 +56,6 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Sign Up',
|
||||
description: 'Link to registration',
|
||||
},
|
||||
'header.user.menu.studio.home': {
|
||||
id: 'header.user.menu.studio.home',
|
||||
defaultMessage: 'Studio Home',
|
||||
description: 'Link to the Studio Home',
|
||||
},
|
||||
'header.user.menu.studio.maintenance': {
|
||||
id: 'header.user.menu.studio.maintenance',
|
||||
defaultMessage: 'Maintenance',
|
||||
description: 'Link to the Studio Maintenance',
|
||||
},
|
||||
'header.label.account.nav': {
|
||||
id: 'header.label.account.nav',
|
||||
defaultMessage: 'Account',
|
||||
@@ -77,7 +67,7 @@ const messages = defineMessages({
|
||||
description: 'The aria label for the account menu trigger',
|
||||
},
|
||||
'header.label.account.menu.for': {
|
||||
id: 'header.label.account.menu.for',
|
||||
id: 'header.label.account.menu',
|
||||
defaultMessage: 'Account menu for {username}',
|
||||
description: 'The aria label for the account menu trigger when the username is displayed in it',
|
||||
},
|
||||
@@ -101,16 +91,6 @@ const messages = defineMessages({
|
||||
defaultMessage: 'Secondary',
|
||||
description: 'The aria label for the seconary nav',
|
||||
},
|
||||
'header.label.skip.nav': {
|
||||
id: 'header.label.skip.nav',
|
||||
defaultMessage: 'Skip to main content',
|
||||
description: 'A link used by screen readers to allow users to skip to the main content of the page.',
|
||||
},
|
||||
'header.label.app.nav': {
|
||||
id: 'header.label.app.nav',
|
||||
defaultMessage: 'App',
|
||||
description: 'The aria label for the app Nav',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
70
src/SiteHeader.test.jsx
Normal file
70
src/SiteHeader.test.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
|
||||
import React from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-i18n';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import { AppContext } from '@edx/frontend-base';
|
||||
import { Context as ResponsiveContext } from 'react-responsive';
|
||||
|
||||
import SiteHeader from './index';
|
||||
|
||||
describe('<SiteHeader />', () => {
|
||||
it('renders correctly for desktop', () => {
|
||||
const component = (
|
||||
<ResponsiveContext.Provider value={{ width: 1280 }}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: {
|
||||
userId: null,
|
||||
username: null,
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SiteHeader />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly for mobile', () => {
|
||||
const component = (
|
||||
<ResponsiveContext.Provider value={{ width: 500 }}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: {
|
||||
userId: null,
|
||||
username: null,
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SiteHeader />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,200 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import {
|
||||
APP_CONFIG_INITIALIZED,
|
||||
ensureConfig,
|
||||
getConfig,
|
||||
mergeConfig,
|
||||
subscribe,
|
||||
} from '@edx/frontend-platform';
|
||||
import { ActionRow } from '@edx/paragon';
|
||||
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
|
||||
import { CaretIcon } from './Icons';
|
||||
|
||||
import messages from './Header.messages';
|
||||
|
||||
ensureConfig([
|
||||
'STUDIO_BASE_URL',
|
||||
'LOGOUT_URL',
|
||||
'LOGIN_URL',
|
||||
'SITE_NAME',
|
||||
'LOGO_URL',
|
||||
'ORDER_HISTORY_URL',
|
||||
], 'StudioHeader component');
|
||||
|
||||
subscribe(APP_CONFIG_INITIALIZED, () => {
|
||||
mergeConfig({
|
||||
AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
|
||||
}, 'StudioHeader additional config');
|
||||
});
|
||||
|
||||
class StudioDesktopHeaderBase extends React.Component {
|
||||
constructor(props) { // eslint-disable-line no-useless-constructor
|
||||
super(props);
|
||||
}
|
||||
|
||||
renderUserMenu() {
|
||||
const {
|
||||
userMenu,
|
||||
avatar,
|
||||
username,
|
||||
intl,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
|
||||
className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
|
||||
>
|
||||
<Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
|
||||
{username} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
</MenuTrigger>
|
||||
<MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
|
||||
{userMenu.map(({ type, href, content }) => (
|
||||
<a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
|
||||
))}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
renderLoggedOutItems() {
|
||||
const { loggedOutItems } = this.props;
|
||||
|
||||
return loggedOutItems.map((item, i, arr) => (
|
||||
<a
|
||||
key={`${item.type}-${item.content}`}
|
||||
className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
|
||||
href={item.href}
|
||||
>
|
||||
{item.content}
|
||||
</a>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
loggedIn,
|
||||
intl,
|
||||
actionRowContent,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
|
||||
|
||||
return (
|
||||
<header className="site-header-desktop">
|
||||
<a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
|
||||
<div className={`container-fluid ${logoClasses}`}>
|
||||
<div className="nav-container position-relative d-flex align-items-center">
|
||||
{logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
|
||||
<ActionRow>
|
||||
{actionRowContent}
|
||||
<nav
|
||||
aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
>
|
||||
{loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
|
||||
</nav>
|
||||
</ActionRow>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
StudioDesktopHeaderBase.propTypes = {
|
||||
userMenu: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.oneOf(['item', 'menu']),
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
})),
|
||||
loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.oneOf(['item', 'menu']),
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
})),
|
||||
logo: PropTypes.string,
|
||||
logoAltText: PropTypes.string,
|
||||
logoDestination: PropTypes.string,
|
||||
avatar: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
loggedIn: PropTypes.bool,
|
||||
actionRowContent: PropTypes.element,
|
||||
|
||||
// i18n
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
StudioDesktopHeaderBase.defaultProps = {
|
||||
userMenu: [],
|
||||
loggedOutItems: [],
|
||||
logo: null,
|
||||
logoAltText: null,
|
||||
logoDestination: null,
|
||||
avatar: null,
|
||||
username: null,
|
||||
loggedIn: false,
|
||||
actionRowContent: null,
|
||||
};
|
||||
|
||||
const StudioDesktopHeader = injectIntl(StudioDesktopHeaderBase);
|
||||
|
||||
const StudioHeader = ({ intl, actionRowContent }) => {
|
||||
const { authenticatedUser, config } = useContext(AppContext);
|
||||
|
||||
const userMenu = authenticatedUser === null ? [] : [
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.STUDIO_BASE_URL}`,
|
||||
content: intl.formatMessage(messages['header.user.menu.studio.home']),
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.STUDIO_BASE_URL}/maintenance`,
|
||||
content: intl.formatMessage(messages['header.user.menu.studio.maintenance']),
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
href: config.LOGOUT_URL,
|
||||
content: intl.formatMessage(messages['header.user.menu.logout']),
|
||||
},
|
||||
];
|
||||
|
||||
const props = {
|
||||
logo: config.LOGO_URL,
|
||||
logoAltText: config.SITE_NAME,
|
||||
logoDestination: config.STUDIO_BASE_URL,
|
||||
loggedIn: authenticatedUser !== null,
|
||||
username: authenticatedUser !== null ? authenticatedUser.username : null,
|
||||
avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
|
||||
actionRowContent,
|
||||
userMenu,
|
||||
loggedOutItems: [],
|
||||
};
|
||||
|
||||
return <StudioDesktopHeader {...props} />;
|
||||
};
|
||||
|
||||
StudioHeader.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
actionRowContent: PropTypes.element,
|
||||
};
|
||||
|
||||
StudioHeader.defaultProps = {
|
||||
// eslint-disable-next-line react/jsx-no-useless-fragment
|
||||
actionRowContent: <></>,
|
||||
};
|
||||
|
||||
export default injectIntl(StudioHeader);
|
||||
@@ -1,108 +0,0 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React, { useMemo } from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import {
|
||||
ActionRow,
|
||||
Button,
|
||||
Dropdown,
|
||||
} from '@edx/paragon';
|
||||
|
||||
import { StudioHeader } from './index';
|
||||
|
||||
const StudioHeaderComponent = ({ contextValue, appMenu = null, mainMenu = [] }) => (
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider
|
||||
value={contextValue}
|
||||
>
|
||||
<StudioHeader appMenu={appMenu} mainMenu={mainMenu} />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
);
|
||||
|
||||
const StudioHeaderContext = ({ actionRowContent = null }) => {
|
||||
const headerContextValue = useMemo(() => ({
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
}), []);
|
||||
return (
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider
|
||||
value={headerContextValue}
|
||||
>
|
||||
<StudioHeader actionRowContent={actionRowContent} />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('<StudioHeader />', () => {
|
||||
it('renders correctly', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
};
|
||||
|
||||
const component = <StudioHeaderComponent contextValue={contextValue} />;
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly with optional action row content', () => {
|
||||
const actionRowContent = (
|
||||
<>
|
||||
<Dropdown>
|
||||
<Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
|
||||
Settings
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item as={Link} to="#">Dropdown Item 1</Dropdown.Item>
|
||||
<Dropdown.Item as={Link} to="#">Dropdown Item 2</Dropdown.Item>
|
||||
<Dropdown.Item as={Link} to="#">Dropdown Item 3</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<ActionRow.Spacer />
|
||||
<Button
|
||||
variant="tertiary"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Help Button"
|
||||
>Help
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
const component = <StudioHeaderContext actionRowContent={actionRowContent} />;
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
3
src/__mocks__/fileMock.js
Normal file
3
src/__mocks__/fileMock.js
Normal file
@@ -0,0 +1,3 @@
|
||||
// __mocks__/fileMock.js
|
||||
|
||||
module.exports = 'test-file-stub';
|
||||
@@ -1,443 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Header /> renders correctly for anonymous desktop 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"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18000/dashboard"
|
||||
>
|
||||
<img
|
||||
alt="edX"
|
||||
className="d-block"
|
||||
src="https://edx-cdn.org/v3/default/logo.svg"
|
||||
/>
|
||||
</a>
|
||||
<nav
|
||||
aria-label="Main"
|
||||
className="nav main-nav"
|
||||
>
|
||||
<a
|
||||
className="nav-link"
|
||||
href="http://localhost:18000/dashboard"
|
||||
>
|
||||
Courses
|
||||
</a>
|
||||
</nav>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
>
|
||||
<a
|
||||
className="btn mr-2 btn-link"
|
||||
href="http://localhost:18000/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
className="btn mr-2 btn-outline-primary"
|
||||
href="http://localhost:18000/register"
|
||||
>
|
||||
Sign Up
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
|
||||
exports[`<Header /> renders correctly for anonymous mobile 1`] = `
|
||||
<header
|
||||
aria-label="Main"
|
||||
className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
|
||||
>
|
||||
<a
|
||||
className="nav-skip sr-only sr-only-focusable"
|
||||
href="#main"
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-start"
|
||||
>
|
||||
<div
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Main Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Main Menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="5"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="11"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-center"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18000/dashboard"
|
||||
itemType="http://schema.org/Organization"
|
||||
>
|
||||
<img
|
||||
alt="edX"
|
||||
className="d-block"
|
||||
src="https://edx-cdn.org/v3/default/logo.svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-end align-items-center"
|
||||
>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Account Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Account Menu"
|
||||
>
|
||||
<span
|
||||
className="avatar overflow-hidden d-inline-flex rounded-circle null"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
|
||||
exports[`<Header /> renders correctly for authenticated desktop 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"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18000/dashboard"
|
||||
>
|
||||
<img
|
||||
alt="edX"
|
||||
className="d-block"
|
||||
src="https://edx-cdn.org/v3/default/logo.svg"
|
||||
/>
|
||||
</a>
|
||||
<nav
|
||||
aria-label="Main"
|
||||
className="nav main-nav"
|
||||
>
|
||||
<a
|
||||
className="nav-link"
|
||||
href="http://localhost:18000/dashboard"
|
||||
>
|
||||
Courses
|
||||
</a>
|
||||
</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[`<Header /> renders correctly for authenticated mobile 1`] = `
|
||||
<header
|
||||
aria-label="Main"
|
||||
className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
|
||||
>
|
||||
<a
|
||||
className="nav-skip sr-only sr-only-focusable"
|
||||
href="#main"
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-start"
|
||||
>
|
||||
<div
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Main Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Main Menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="5"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="11"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-center"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18000/dashboard"
|
||||
itemType="http://schema.org/Organization"
|
||||
>
|
||||
<img
|
||||
alt="edX"
|
||||
className="d-block"
|
||||
src="https://edx-cdn.org/v3/default/logo.svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-end align-items-center"
|
||||
>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Account Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Account Menu"
|
||||
>
|
||||
<span
|
||||
className="avatar overflow-hidden d-inline-flex rounded-circle null"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
186
src/__snapshots__/SiteHeader.test.jsx.snap
Normal file
186
src/__snapshots__/SiteHeader.test.jsx.snap
Normal file
@@ -0,0 +1,186 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SiteHeader /> renders correctly for desktop 1`] = `
|
||||
<header
|
||||
className="site-header-desktop"
|
||||
>
|
||||
<div
|
||||
className="container-fluid"
|
||||
>
|
||||
<div
|
||||
className="nav-container position-relative d-flex align-items-center"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18000/dashboard"
|
||||
>
|
||||
<img
|
||||
alt="edX"
|
||||
className="d-block"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
<nav
|
||||
aria-label="Main"
|
||||
className="nav main-nav"
|
||||
>
|
||||
<a
|
||||
className="nav-link"
|
||||
href="http://localhost:18000/dashboard"
|
||||
>
|
||||
Courses
|
||||
</a>
|
||||
</nav>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
>
|
||||
<a
|
||||
className="btn mr-2 btn-link"
|
||||
href="http://localhost:18000/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
className="btn mr-2 btn-outline-primary"
|
||||
href="http://localhost:18000/register"
|
||||
>
|
||||
Sign Up
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
|
||||
exports[`<SiteHeader /> renders correctly for mobile 1`] = `
|
||||
<header
|
||||
aria-label="Main"
|
||||
className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
|
||||
>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-start"
|
||||
>
|
||||
<div
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Main Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Main Menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="5"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="11"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-center"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18000/dashboard"
|
||||
itemType="http://schema.org/Organization"
|
||||
>
|
||||
<img
|
||||
alt="edX"
|
||||
className="d-block"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-end align-items-center"
|
||||
>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Account Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Account Menu"
|
||||
>
|
||||
<span
|
||||
className="avatar overflow-hidden d-inline-flex rounded-circle null"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="text-muted"
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"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>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
@@ -1,226 +0,0 @@
|
||||
// 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"
|
||||
/>
|
||||
<div
|
||||
className="pgn__action-row"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
|
||||
exports[`<StudioHeader /> renders correctly with optional action row content 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"
|
||||
/>
|
||||
<div
|
||||
className="pgn__action-row"
|
||||
>
|
||||
<div
|
||||
className="pgn__dropdown pgn__dropdown-light dropdown"
|
||||
data-testid="dropdown"
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup={true}
|
||||
className="dropdown-toggle btn btn-outline-primary"
|
||||
disabled={false}
|
||||
id="library-header-menu-dropdown"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
className="pgn__action-row-spacer"
|
||||
/>
|
||||
<a
|
||||
className="btn btn-tertiary"
|
||||
href="#"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
rel="noopener noreferrer"
|
||||
role="button"
|
||||
target="_blank"
|
||||
title="Help Button"
|
||||
>
|
||||
Help
|
||||
</a>
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
@@ -1,16 +0,0 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
registerSentenceCase: {
|
||||
id: 'general.register.sentenceCase',
|
||||
defaultMessage: 'Register',
|
||||
description: 'Text in a button, prompting the user to register.',
|
||||
},
|
||||
signInSentenceCase: {
|
||||
id: 'general.signIn.sentenceCase',
|
||||
defaultMessage: 'Sign in',
|
||||
description: 'Text in a button, prompting the user to log in.',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
@@ -1,28 +1,18 @@
|
||||
import arMessages from './messages/ar.json';
|
||||
import frMessages from './messages/fr.json';
|
||||
import es419Messages from './messages/es_419.json';
|
||||
import zhcnMessages from './messages/zh_CN.json';
|
||||
import ptMessages from './messages/pt.json';
|
||||
import itMessages from './messages/it.json';
|
||||
import ukMessages from './messages/uk.json';
|
||||
import deMessages from './messages/de.json';
|
||||
import ruMessages from './messages/ru.json';
|
||||
import hiMessages from './messages/hi.json';
|
||||
import frCAMessages from './messages/fr_CA.json';
|
||||
// no need to import en messages-- they are in the defaultMessage field
|
||||
import es419Messages from './messages/es_419.json';
|
||||
import frMessages from './messages/fr.json';
|
||||
import kokrMessages from './messages/ko_KR.json';
|
||||
import ptbrMessages from './messages/pt_BR.json';
|
||||
import zhcnMessages from './messages/zh_CN.json';
|
||||
|
||||
const messages = {
|
||||
ar: arMessages,
|
||||
'es-419': es419Messages,
|
||||
fr: frMessages,
|
||||
'zh-cn': zhcnMessages,
|
||||
pt: ptMessages,
|
||||
it: itMessages,
|
||||
de: deMessages,
|
||||
hi: hiMessages,
|
||||
'fr-ca': frCAMessages,
|
||||
ru: ruMessages,
|
||||
uk: ukMessages,
|
||||
'ko-kr': kokrMessages,
|
||||
'pt-br': ptbrMessages,
|
||||
};
|
||||
|
||||
export default messages;
|
||||
|
||||
@@ -1,33 +1,2 @@
|
||||
{
|
||||
"general.register.sentenceCase": "التسجيل",
|
||||
"general.signIn.sentenceCase": "تسجيل الدخول",
|
||||
"header.links.courses": "المساقات",
|
||||
"header.links.programs": "البرامج",
|
||||
"header.links.content.search": "اكتشف الجديد",
|
||||
"header.links.schools": "المدارس و الشركاء",
|
||||
"header.user.menu.dashboard": "لوحة المعلومات",
|
||||
"header.user.menu.profile": "الملف الشخصي",
|
||||
"header.user.menu.account.settings": "الحساب",
|
||||
"header.user.menu.order.history": "سجل الطلبيات",
|
||||
"header.user.menu.logout": "تسجيل الخروج",
|
||||
"header.user.menu.login": "تسجيل الدخول",
|
||||
"header.user.menu.register": "التسجيل",
|
||||
"header.user.menu.studio.home": "صفحة الاستوديو الرئيسية",
|
||||
"header.user.menu.studio.maintenance": "الصيانة",
|
||||
"header.label.account.nav": "الحساب",
|
||||
"header.label.account.menu": "قائمة الحساب",
|
||||
"header.label.account.menu.for": "قائمة حساب المستخدم {username}",
|
||||
"header.label.main.nav": "القا|مة الرئيسية",
|
||||
"header.label.main.menu": "القائمة الرئيسية",
|
||||
"header.label.main.header": "الرئيسية",
|
||||
"header.label.secondary.nav": "القائمة الثانوية",
|
||||
"header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
|
||||
"header.label.app.nav": "تطبيق",
|
||||
"header.menu.dashboard.label": "لوحة المعلومات",
|
||||
"header.help.label": "المساعدة",
|
||||
"header.menu.profile.label": "الملف الشخصي",
|
||||
"header.menu.account.label": "الحساب",
|
||||
"header.menu.orderHistory.label": "سجل الطلبيات",
|
||||
"header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
|
||||
"header.menu.signOut.label": "تسجيل الخروج"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
@@ -1,33 +1,2 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Registrarse",
|
||||
"general.signIn.sentenceCase": "Iniciar sesión",
|
||||
"header.links.courses": "Cursos",
|
||||
"header.links.programs": "Programas",
|
||||
"header.links.content.search": "Encontrar nuevo",
|
||||
"header.links.schools": "Escuelas y Socios",
|
||||
"header.user.menu.dashboard": "Panel de Control",
|
||||
"header.user.menu.profile": "Perfil",
|
||||
"header.user.menu.account.settings": "Cuenta",
|
||||
"header.user.menu.order.history": "Historial de órdenes",
|
||||
"header.user.menu.logout": "Cerrar sesión",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Registrarse",
|
||||
"header.user.menu.studio.home": "Inicio Studio",
|
||||
"header.user.menu.studio.maintenance": "Mantenimiento",
|
||||
"header.label.account.nav": "Cuenta",
|
||||
"header.label.account.menu": "Menú de la cuenta",
|
||||
"header.label.account.menu.for": "Menú de la cuenta para {username}",
|
||||
"header.label.main.nav": "Principal",
|
||||
"header.label.main.menu": "Menú Principal",
|
||||
"header.label.main.header": "Principal",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Ir al contenido principal",
|
||||
"header.label.app.nav": "Aplicación",
|
||||
"header.menu.dashboard.label": "Panel de Control",
|
||||
"header.help.label": "Ayuda",
|
||||
"header.menu.profile.label": "Perfil",
|
||||
"header.menu.account.label": "Cuenta",
|
||||
"header.menu.orderHistory.label": "Historial de órdenes",
|
||||
"header.navigation.skipNavLink": "Dirígete al contenido principal.",
|
||||
"header.menu.signOut.label": "Cerrar sesión"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,2 @@
|
||||
{
|
||||
"general.register.sentenceCase": "S'inscrire",
|
||||
"general.signIn.sentenceCase": "Connectez-vous",
|
||||
"header.links.courses": "Cours",
|
||||
"header.links.programs": "Programmes",
|
||||
"header.links.content.search": "Explorer les cours",
|
||||
"header.links.schools": "Écoles et partenaires",
|
||||
"header.user.menu.dashboard": "Tableau de bord",
|
||||
"header.user.menu.profile": "Profil",
|
||||
"header.user.menu.account.settings": "Compte",
|
||||
"header.user.menu.order.history": "Historique des commandes",
|
||||
"header.user.menu.logout": "Déconnexion",
|
||||
"header.user.menu.login": "Connexion",
|
||||
"header.user.menu.register": "S'inscrire",
|
||||
"header.user.menu.studio.home": "Accueil Studio",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Compte",
|
||||
"header.label.account.menu": "Menu du compte",
|
||||
"header.label.account.menu.for": "Menu du compte pour {username}",
|
||||
"header.label.main.nav": "Principal",
|
||||
"header.label.main.menu": "Menu Principal",
|
||||
"header.label.main.header": "Principal",
|
||||
"header.label.secondary.nav": "Secondaire",
|
||||
"header.label.skip.nav": "Passer au contenu principal",
|
||||
"header.label.app.nav": "Application",
|
||||
"header.menu.dashboard.label": "Tableau de bord",
|
||||
"header.help.label": "Aide",
|
||||
"header.menu.profile.label": "Profil",
|
||||
"header.menu.account.label": "Compte",
|
||||
"header.menu.orderHistory.label": "Historique des commandes",
|
||||
"header.navigation.skipNavLink": "Passer au contenu principal",
|
||||
"header.menu.signOut.label": "Se déconnecter"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Inscription",
|
||||
"general.signIn.sentenceCase": "Connexion",
|
||||
"header.links.courses": "Cours",
|
||||
"header.links.programs": "Programmes",
|
||||
"header.links.content.search": "Découvrir les nouveautés",
|
||||
"header.links.schools": "Écoles et Partenaires",
|
||||
"header.user.menu.dashboard": "Tableau de bord",
|
||||
"header.user.menu.profile": "Profil",
|
||||
"header.user.menu.account.settings": "Compte",
|
||||
"header.user.menu.order.history": "Historique des commandes",
|
||||
"header.user.menu.logout": "Déconnexion",
|
||||
"header.user.menu.login": "Connexion",
|
||||
"header.user.menu.register": "S'inscrire",
|
||||
"header.user.menu.studio.home": "Accueil Studio",
|
||||
"header.user.menu.studio.maintenance": "Entretien",
|
||||
"header.label.account.nav": "Compte",
|
||||
"header.label.account.menu": "Menu de compte",
|
||||
"header.label.account.menu.for": "Menu de compte pour {username}",
|
||||
"header.label.main.nav": "Principal",
|
||||
"header.label.main.menu": "Menu principal",
|
||||
"header.label.main.header": "Principal",
|
||||
"header.label.secondary.nav": "Secondaire",
|
||||
"header.label.skip.nav": "Passer au contenu de cette vue",
|
||||
"header.label.app.nav": "Application",
|
||||
"header.menu.dashboard.label": "Tableau de bord",
|
||||
"header.help.label": "Aide",
|
||||
"header.menu.profile.label": "Profil",
|
||||
"header.menu.account.label": "Compte",
|
||||
"header.menu.orderHistory.label": "Historique des commandes",
|
||||
"header.navigation.skipNavLink": "Passer au contenu principal.",
|
||||
"header.menu.signOut.label": "Se déconnecter"
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
2
src/i18n/messages/ko_KR.json
Normal file
2
src/i18n/messages/ko_KR.json
Normal file
@@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
2
src/i18n/messages/pt_BR.json
Normal file
2
src/i18n/messages/pt_BR.json
Normal file
@@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
@@ -1,33 +1,2 @@
|
||||
{
|
||||
"general.register.sentenceCase": "Register",
|
||||
"general.signIn.sentenceCase": "Sign in",
|
||||
"header.links.courses": "Courses",
|
||||
"header.links.programs": "Programs",
|
||||
"header.links.content.search": "Discover New",
|
||||
"header.links.schools": "Schools & Partners",
|
||||
"header.user.menu.dashboard": "Dashboard",
|
||||
"header.user.menu.profile": "Profile",
|
||||
"header.user.menu.account.settings": "Account",
|
||||
"header.user.menu.order.history": "Order History",
|
||||
"header.user.menu.logout": "Logout",
|
||||
"header.user.menu.login": "Login",
|
||||
"header.user.menu.register": "Sign Up",
|
||||
"header.user.menu.studio.home": "Studio Home",
|
||||
"header.user.menu.studio.maintenance": "Maintenance",
|
||||
"header.label.account.nav": "Account",
|
||||
"header.label.account.menu": "Account Menu",
|
||||
"header.label.account.menu.for": "Account menu for {username}",
|
||||
"header.label.main.nav": "Main",
|
||||
"header.label.main.menu": "Main Menu",
|
||||
"header.label.main.header": "Main",
|
||||
"header.label.secondary.nav": "Secondary",
|
||||
"header.label.skip.nav": "Skip to main content",
|
||||
"header.label.app.nav": "App",
|
||||
"header.menu.dashboard.label": "Dashboard",
|
||||
"header.help.label": "Help",
|
||||
"header.menu.profile.label": "Profile",
|
||||
"header.menu.account.label": "Account",
|
||||
"header.menu.orderHistory.label": "Order History",
|
||||
"header.navigation.skipNavLink": "Skip to main content.",
|
||||
"header.menu.signOut.label": "Sign Out"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import Header from './Header';
|
||||
import LearningHeader from './learning-header/LearningHeader';
|
||||
import SiteHeader from './SiteHeader';
|
||||
import messages from './i18n/index';
|
||||
import StudioHeader from './StudioHeader';
|
||||
|
||||
export { LearningHeader, messages, StudioHeader };
|
||||
export { messages };
|
||||
|
||||
export default Header;
|
||||
export default SiteHeader;
|
||||
|
||||
@@ -25,30 +25,6 @@ $white: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.learning-header {
|
||||
min-width: 0;
|
||||
|
||||
.course-title-lockup {
|
||||
min-width: 0;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
.btn {
|
||||
height: 3rem;
|
||||
@media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-header-mobile,
|
||||
.site-header-desktop {
|
||||
position: relative;
|
||||
@@ -56,8 +32,6 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.site-header-mobile {
|
||||
height: 3rem;
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
@@ -69,6 +43,7 @@ $white: #fff;
|
||||
|
||||
|
||||
.site-header-desktop {
|
||||
height: 3.75rem;
|
||||
box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
|
||||
background: $white;
|
||||
.nav-link {
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button } from '@edx/paragon';
|
||||
|
||||
import genericMessages from '../generic/messages';
|
||||
|
||||
const AnonymousUserMenu = ({ intl }) => (
|
||||
<div>
|
||||
<Button
|
||||
className="mr-3"
|
||||
variant="outline-primary"
|
||||
href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
|
||||
>
|
||||
{intl.formatMessage(genericMessages.registerSentenceCase)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
href={`${getLoginRedirectUrl(global.location.href)}`}
|
||||
>
|
||||
{intl.formatMessage(genericMessages.signInSentenceCase)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
AnonymousUserMenu.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(AnonymousUserMenu);
|
||||
@@ -1,57 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Dropdown } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
const AuthenticatedUserDropdown = ({ intl, username }) => {
|
||||
const dashboardMenuItem = (
|
||||
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
|
||||
{intl.formatMessage(messages.dashboard)}
|
||||
</Dropdown.Item>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
|
||||
<Dropdown className="user-dropdown">
|
||||
<Dropdown.Toggle variant="outline-primary">
|
||||
<FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
|
||||
<span data-hj-suppress className="d-none d-md-inline">
|
||||
{username}
|
||||
</span>
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu className="dropdown-menu-right">
|
||||
{dashboardMenuItem}
|
||||
<Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
|
||||
{intl.formatMessage(messages.profile)}
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
|
||||
{intl.formatMessage(messages.account)}
|
||||
</Dropdown.Item>
|
||||
{ getConfig().ORDER_HISTORY_URL && (
|
||||
<Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
|
||||
{intl.formatMessage(messages.orderHistory)}
|
||||
</Dropdown.Item>
|
||||
)}
|
||||
<Dropdown.Item href={getConfig().LOGOUT_URL}>
|
||||
{intl.formatMessage(messages.signOut)}
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
AuthenticatedUserDropdown.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
username: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(AuthenticatedUserDropdown);
|
||||
@@ -1,79 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
|
||||
import AnonymousUserMenu from './AnonymousUserMenu';
|
||||
import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
|
||||
import messages from './messages';
|
||||
|
||||
const LinkedLogo = ({
|
||||
href,
|
||||
src,
|
||||
alt,
|
||||
...attributes
|
||||
}) => (
|
||||
<a href={href} {...attributes}>
|
||||
<img className="d-block" src={src} alt={alt} />
|
||||
</a>
|
||||
);
|
||||
|
||||
LinkedLogo.propTypes = {
|
||||
href: PropTypes.string.isRequired,
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const LearningHeader = ({
|
||||
courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
|
||||
}) => {
|
||||
const { authenticatedUser } = useContext(AppContext);
|
||||
|
||||
const headerLogo = (
|
||||
<LinkedLogo
|
||||
className="logo"
|
||||
href={`${getConfig().LMS_BASE_URL}/dashboard`}
|
||||
src={getConfig().LOGO_URL}
|
||||
alt={getConfig().SITE_NAME}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<header className="learning-header">
|
||||
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
|
||||
<div className="container-xl py-2 d-flex align-items-center">
|
||||
{headerLogo}
|
||||
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
|
||||
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>
|
||||
<span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
|
||||
</div>
|
||||
{showUserDropdown && authenticatedUser && (
|
||||
<AuthenticatedUserDropdown
|
||||
username={authenticatedUser.username}
|
||||
/>
|
||||
)}
|
||||
{showUserDropdown && !authenticatedUser && (
|
||||
<AnonymousUserMenu />
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
LearningHeader.propTypes = {
|
||||
courseOrg: PropTypes.string,
|
||||
courseNumber: PropTypes.string,
|
||||
courseTitle: PropTypes.string,
|
||||
intl: intlShape.isRequired,
|
||||
showUserDropdown: PropTypes.bool,
|
||||
};
|
||||
|
||||
LearningHeader.defaultProps = {
|
||||
courseOrg: null,
|
||||
courseNumber: null,
|
||||
courseTitle: null,
|
||||
showUserDropdown: true,
|
||||
};
|
||||
|
||||
export default injectIntl(LearningHeader);
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
authenticatedUser, initializeMockApp, render, screen,
|
||||
} from '../setupTest';
|
||||
import { LearningHeader as Header } from '../index';
|
||||
|
||||
describe('Header', () => {
|
||||
beforeAll(async () => {
|
||||
// We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
|
||||
await initializeMockApp();
|
||||
});
|
||||
|
||||
it('displays user button', () => {
|
||||
render(<Header />);
|
||||
expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
|
||||
});
|
||||
|
||||
it('displays course data', () => {
|
||||
const courseData = {
|
||||
courseOrg: 'course-org',
|
||||
courseNumber: 'course-number',
|
||||
courseTitle: 'course-title',
|
||||
};
|
||||
render(<Header {...courseData} />);
|
||||
|
||||
expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
|
||||
expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,41 +0,0 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
dashboard: {
|
||||
id: 'header.menu.dashboard.label',
|
||||
defaultMessage: 'Dashboard',
|
||||
description: 'The text for the user menu Dashboard navigation link.',
|
||||
},
|
||||
help: {
|
||||
id: 'header.help.label',
|
||||
defaultMessage: 'Help',
|
||||
description: 'The text for the link to the Help Center',
|
||||
},
|
||||
profile: {
|
||||
id: 'header.menu.profile.label',
|
||||
defaultMessage: 'Profile',
|
||||
description: 'The text for the user menu Profile navigation link.',
|
||||
},
|
||||
account: {
|
||||
id: 'header.menu.account.label',
|
||||
defaultMessage: 'Account',
|
||||
description: 'The text for the user menu Account navigation link.',
|
||||
},
|
||||
orderHistory: {
|
||||
id: 'header.menu.orderHistory.label',
|
||||
defaultMessage: 'Order History',
|
||||
description: 'The text for the user menu Order History navigation link.',
|
||||
},
|
||||
skipNavLink: {
|
||||
id: 'header.navigation.skipNavLink',
|
||||
defaultMessage: 'Skip to main content.',
|
||||
description: 'A link used by screen readers to allow users to skip to the main content of the page.',
|
||||
},
|
||||
signOut: {
|
||||
id: 'header.menu.signOut.label',
|
||||
defaultMessage: 'Sign Out',
|
||||
description: 'The label for the user menu Sign Out action.',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
107
src/setupTest.js
107
src/setupTest.js
@@ -1,129 +1,26 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
|
||||
import Enzyme from 'enzyme';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
import '@testing-library/jest-dom';
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
import 'babel-polyfill';
|
||||
import 'jest-chain';
|
||||
import { getConfig, mergeConfig } from '@edx/frontend-platform';
|
||||
import { configure as configureLogging } from '@edx/frontend-platform/logging';
|
||||
import { configure as configureI18n } from '@edx/frontend-platform/i18n';
|
||||
import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
|
||||
import { render as rtlRender } from '@testing-library/react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import AppProvider from '@edx/frontend-platform/react/AppProvider';
|
||||
import appMessages from './i18n';
|
||||
|
||||
Enzyme.configure({ adapter: new Adapter() });
|
||||
|
||||
// These configuration values are usually set in webpack's EnvironmentPlugin however
|
||||
// Jest does not use webpack so we need to set these so for testing
|
||||
process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
|
||||
process.env.ACCOUNT_PROFILE_URL = 'http://localhost:1995';
|
||||
process.env.ACCOUNT_SETTINGS_URL = 'http://localhost:1997';
|
||||
process.env.BASE_URL = 'localhost:1995';
|
||||
process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
|
||||
process.env.CSRF_COOKIE_NAME = 'csrftoken';
|
||||
process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
|
||||
process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
|
||||
process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
|
||||
process.env.LMS_BASE_URL = 'http://localhost:18000';
|
||||
process.env.LOGIN_URL = 'http://localhost:18000/login';
|
||||
process.env.LOGOUT_URL = 'http://localhost:18000/logout';
|
||||
process.env.LOGOUT_URL = 'http://localhost:18000/login';
|
||||
process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
|
||||
process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
|
||||
process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
|
||||
process.env.SEGMENT_KEY = 'segment_whoa';
|
||||
process.env.SITE_NAME = 'edX';
|
||||
process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
|
||||
process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
|
||||
process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
|
||||
process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
|
||||
process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';
|
||||
|
||||
class MockLoggingService {
|
||||
logInfo = jest.fn();
|
||||
|
||||
logError = jest.fn();
|
||||
}
|
||||
|
||||
export const authenticatedUser = {
|
||||
userId: 'abc123',
|
||||
username: 'Mock User',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
};
|
||||
|
||||
export function initializeMockApp() {
|
||||
mergeConfig({
|
||||
INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
|
||||
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
|
||||
TWITTER_URL: process.env.TWITTER_URL || null,
|
||||
BASE_URL: process.env.BASE_URL || null,
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL || null,
|
||||
LOGIN_URL: process.env.LOGIN_URL || null,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL || null,
|
||||
REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT || null,
|
||||
ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME || null,
|
||||
CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH || null,
|
||||
LOGO_URL: process.env.LOGO_URL || null,
|
||||
SITE_NAME: process.env.SITE_NAME || null,
|
||||
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'Mock User',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
});
|
||||
|
||||
const loggingService = configureLogging(MockLoggingService, {
|
||||
config: getConfig(),
|
||||
});
|
||||
const authService = configureAuth(MockAuthService, {
|
||||
config: getConfig(),
|
||||
loggingService,
|
||||
});
|
||||
|
||||
// i18n doesn't have a service class to return.
|
||||
configureI18n({
|
||||
config: getConfig(),
|
||||
loggingService,
|
||||
messages: [appMessages],
|
||||
});
|
||||
|
||||
return { loggingService, authService };
|
||||
}
|
||||
|
||||
function render(
|
||||
ui,
|
||||
{
|
||||
store = null,
|
||||
...renderOptions
|
||||
} = {},
|
||||
) {
|
||||
const Wrapper = ({ children }) => (
|
||||
// eslint-disable-next-line react/jsx-filename-extension
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
{children}
|
||||
</AppProvider>
|
||||
</IntlProvider>
|
||||
);
|
||||
|
||||
Wrapper.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
|
||||
}
|
||||
|
||||
// Re-export everything.
|
||||
export * from '@testing-library/react';
|
||||
|
||||
// Override `render` method.
|
||||
export {
|
||||
render,
|
||||
};
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
const path = require('path');
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('webpack-dev', {
|
||||
entry: path.resolve(__dirname, 'example'),
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'example/dist'),
|
||||
publicPath: '/',
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@edx/frontend-component-header': path.resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user