Compare commits

..

3 Commits

Author SHA1 Message Date
Adam Butterworth
4a820357ee feat: make this the open edx footer
BREAKING CHANGE: This footer now serves as the Open edX footer. For the edX footer see edx/frontend-component-footer-edx on github
2019-09-27 10:19:34 -04:00
Adam Butterworth
c99c06ba87 feat: refactor build and dev server
BREAKING CHANGE: The footer is now  transpiled from es6 preserving modules. To use this package in a project it must now be transpiled by the requiring project via webpack or other configuration
2019-09-26 18:11:03 -04:00
Adam Butterworth
637282d20b feat: simplify prop api and bake in many values 2019-09-26 15:35:05 -04:00
41 changed files with 19754 additions and 24462 deletions

View File

@@ -1,19 +0,0 @@
ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
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
LOGIN_URL=http://localhost:18000/login
LOGOUT_URL=http://localhost:18000/login
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

View File

@@ -1,4 +1,3 @@
coverage
dist
example
node_modules

View File

@@ -1,4 +0,0 @@
// eslint-disable-next-line import/no-extraneous-dependencies
const { createConfig } = require('@edx/frontend-build');
module.exports = createConfig('eslint');

View File

@@ -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 }}

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -1,13 +0,0 @@
#check package-lock file version
name: Lockfile Version check
on:
push:
branches:
- master
pull_request:
jobs:
version-check:
uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

View File

@@ -1,39 +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
env:
GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
run: npx semantic-release

View File

@@ -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

2
.gitignore vendored
View File

@@ -8,5 +8,3 @@ temp
src/i18n/transifex_input.json
temp/babel-plugin-react-intl
/.vscode
module.config.js

1
.nvmrc
View File

@@ -1 +0,0 @@
18

16
.travis.yml Normal file
View File

@@ -0,0 +1,16 @@
language: node_js
node_js: 12
install:
- npm install
script:
- npm run lint
- npm run i18n_extract
- npm run test
- npm run build
after_success:
- npx semantic-release
- npm run coveralls
env:
global:
- secure: dxQadqP6tsoJzHcqs/Hs5AjE42z45q8ZeWKP5HcjbXoJURB4gc1uIxLky0FA6ZpulaTgRVTLcWQbx9yOODc9PQuFnFEDWlCg5EP8tONzeu7BVlJvV5eakgGUhl9w2pekBKsTGhK5dDg2y2D8bGfIL55UX81uiWeytp8s/y8QNs/FNXx9ScJnfhnC+2RfW52fB7iW12F1VYdQfVe43o5PsHze+YhB3FU/ztGe3iMaQiq9QplZWpvqQMpI7pTjyUAX8ITiiPS6UvLFObgpXpfjZdgd+yveFoi3z8o8F0NkmzBphFeSYFjFZE0qJ8bnGNIZldanMeuUgHmDeTwVmKQFhH2LqqnfcdGgW6UsKcHkSN1G51zzad2dEwAHrgxj1NkMp3JfEed2C7Kvntl6KRjVDmYZqHJvt+e+AHNbpjzblOW8tYMIrdz0TeJdk4D9pP3B3tRCtP6fvQ3GLzAMnaCrSsN6hZ9YVxWku8sg8WNEDHl14sZsdgk312MlHIdiUw97FHGrqx/NCix4IkUlCBDbKYbKzbZp20FfzZcwNRNH74+k6xpOnMGSfq8gByEhm9y02MBL76HiAI2VGct2La1ExaUfoikYGoNaZpFcZyOZKo6PYTYHpiUJmqrEnDyVQEOOXUaVsxWXwnYq/mU4nOEPKCRbNpPoksZdNxf6jlmMi8s=
- secure: lrlV0WQaXTRJ2lqDkFZ+1RkRb7YM/STOViOHUNboXb5+1ReVwY0wklFDVk/Qigp3jkbqWfzkBmEjSDVGDLD61QjpGY4BsxZ/Jn3+KUdo0n82Ym6cI/je1fH2gqDLi4U8bylmnkI5oEjV/1txDxkj4hF5w/Leo/oGue3xQohpi//ihhm/PxzExj+QiDqyZPZ5RQZeqLfPEU3Wff04vLE5bRmy1nDTZrgm5Wb1n5ItGsyrUyrCGuAM9kIEun65Snb8hxCuU9pSm1w/xF73iOGLiiC8KZhLu6SxSKoC872ai1GpUXNIqA8kpVeH0Erf5opMtqJT3jTTan/VOFQEoOeAKhR0ga+5rfK2jkhhN77B98dGVndNCfBpDlgQxVv42H6riFk3payZT262QiUqDejiBDtSPTokTGxf7xFtQkQQahhxVXzC2HRKEkDTXNSP8cvk2JJ4zCcUgxJpycudLMuC/Xv0upK+Q0caItBrHxfVNnRKkjKqlDxRhA8nXTY8d2n19FNi7wahCECbyweJJ76EaJaa/Ib6remUBrbGLoQ2PkaSMBHAcn3+7+H/6x11b2s1RHj5qyfIyrvZcDDyNuxdXwpOkhtrkwZsjgtOfXL6IuxW5FExgPPr8B9nNwJJKdTxyxgfqtwBR5+m9nrMixzT6AMe95torZ6eX40gKZ/O9EU=

View File

@@ -1,9 +1,8 @@
[main]
host = https://www.transifex.com
[o:open-edx:p:edx-platform:r:frontend-component-footer]
[edx-platform.frontend-component-footer]
file_filter = src/i18n/messages/<lang>.json
source_file = src/i18n/transifex_input.json
source_lang = en
type = KEYVALUEJSON
type = KEYVALUEJSON

14
Makefile Normal file → Executable file
View File

@@ -1,9 +1,11 @@
export TRANSIFEX_RESOURCE = frontend-component-footer
transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
transifex_resource = frontend-component-footer
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
@@ -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:

View File

@@ -1,96 +1,64 @@
#########################
frontend-component-footer
#########################
=========================
|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
|Build Status| |Coveralls| |npm_version| |npm_downloads| |license|
|semantic-release|
********
Overview
********
frontend-component-footer is a library containing a site footer
component for use when building Open edX frontend applications.
A generic footer for Open edX micro-frontend applications. It includes a logo and an optional language selector dropdown.
************
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/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx>`_
Environment Variables
=====================
This component requires that the following environment variable be set by the consuming micro-frontend.
* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
* ``LOGO_TRADEMARK_URL`` - This is a URL to a logo for use in the footer. This is a different environment variable than ``LOGO_URL`` (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.
************
Installation
************
To install this footer into your Open edX micro-frontend, run the following command in your MFE:
``npm i --save @edx/frontend-component-footer``
This will make the component available to be imported into your application.
*****
Usage
*****
-----
This library has the following exports:
To install frontend-component-footer into your project::
* ``(default)``: The footer 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/footer.scss``: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.
npm i --save @edx/frontend-component-footer
<Footer /> component props
==========================
Component Usage::
* onLanguageSelected: Provides the footer with an event handler for when the user selects a
language from its dropdown.
* supportedLanguages: An array of objects representing available languages. See example below for object shape.
import Footer from '@edx/frontend-component-footer';
import footerMessages from '@edx/frontend-component-footer/src/i18n/index';
Examples
========
...
Component Usage Example::
<Footer
handleAllTrackEvents={(eventName, properties) => {/* track click event */}}
onLanguageSelected={(languageCode) => {/* set language */}}
supportedLanguages={[
{ label: 'English', value: 'en'},
{ label: 'Español', value: 'es' },
]}
/>
import Footer, { messages } from '@edx/frontend-component-footer';
- handleAllTrackEvents (required)
- onLanguageSelected (optional)
- supportedLanguages (optional)
...
Styles (project.scss)::
<Footer
onLanguageSelected={(languageCode) => {/* set language */}}
supportedLanguages={[
{ label: 'English', value: 'en'},
{ label: 'Español', value: 'es' },
]}
/>
@import '@edx/frontend-component-footer/src/footer.scss';
* `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
***********
Requirements
------------
This component uses ``@edx/frontend-i18n``. Any containing app must provide ``@edx/frontend-i18n`` as a peer dependency, and be wrapped inside an ``IntlProvider`` element, whether or not your consuming application is actually localized. For a basic default locale (English) version, follow the ``IntlProvider`` example in the sample application in `src/index.jsx <src/index.jsx>`__.
Development
***********
-----------
Install dependencies::
Start the dev server::
npm i
npm i && npm start
Start the development server::
Build the component::
npm start
npm run build
Build a production distribution::
npm run build
.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-footer.svg?branch=master
:target: https://travis-ci.com/edx/frontend-component-footer
.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-footer
:target: @edx/frontend-component-footer
.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-footer.svg?branch=master
:target: https://travis-ci.org/edx/frontend-component-footer
.. |Coveralls| image:: https://img.shields.io/coveralls/edx/frontend-component-footer.svg?branch=master
:target: https://coveralls.io/github/edx/frontend-component-footer
.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-footer.svg
:target: @edx/frontend-component-footer
.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-footer.svg

View File

@@ -1,3 +1,35 @@
const { createConfig } = require('@edx/frontend-build');
module.exports = createConfig('babel-preserve-modules');
// These preset packages are included by frontend-build.
// TODO: Add to frontend-build and leverage that config.
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
View File

@@ -0,0 +1,3 @@
module.exports = {
extends: ['@commitlint/config-angular'],
};

View File

@@ -1,33 +1,25 @@
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 Footer from '@edx/frontend-component-footer';
import { render } from 'react-dom';
import { IntlProvider } from '@edx/frontend-i18n';
import './index.scss';
import Footer from '../src';
subscribe(APP_READY, () => {
ReactDOM.render(
<AppProvider>
<AppContext.Provider value={{
authenticatedUser: null,
config: getConfig(),
}}>
<Footer
onLanguageSelected={() => {}}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</AppContext.Provider>
</AppProvider>,
document.getElementById('root'),
);
});
const App = () => (
<div>
<IntlProvider locale="en">
<Footer
/* eslint-disable-next-line no-unused-vars */
handleAllTrackEvents={(eventName, properties) => {}}
/* eslint-disable-next-line no-unused-vars */
onLanguageSelected={(languageCode) => {}}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</IntlProvider>
</div>
);
initialize({
messages: []
});
render(<App />, document.getElementById('root'));

View File

@@ -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-footer/footer";
@import "~@edx/paragon/scss/core/core.scss";
@import "../src/footer";

42162
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,66 +1,66 @@
{
"name": "@edx/frontend-component-footer",
"version": "1.0.0-semantically-released",
"description": "Footer component for use when building Open edX frontend applications",
"description": "Site footer component for use when building edX frontend applications",
"main": "dist/index.js",
"publishConfig": {
"access": "public"
},
"scripts": {
"build": "make build",
"gc": "commit",
"commitmsg": "commitlint -e $GIT_PARAMS",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"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",
"precommit": "npm run lint",
"prepublishOnly": "npm run build",
"start": "fedx-scripts webpack-dev-server --progress",
"test": "fedx-scripts jest --coverage"
},
"files": [
"/dist"
],
"husky": {
"hooks": {
"pre-commit": "npm run lint"
}
"test": "fedx-scripts jest --coverage",
"snapshot": "fedx-scripts jest --updateSnapshot"
},
"repository": {
"type": "git",
"url": "git+https://github.com/openedx/frontend-component-footer.git"
"url": "git+https://github.com/edx/frontend-component-footer.git"
},
"author": "edX",
"license": "AGPL-3.0",
"bugs": {
"url": "https://github.com/openedx/frontend-component-footer/issues"
"url": "https://github.com/edx/frontend-component-footer/issues"
},
"homepage": "https://github.com/openedx/frontend-component-footer#readme",
"homepage": "https://github.com/edx/frontend-component-footer#readme",
"devDependencies": {
"@edx/brand": "npm:@edx/brand-openedx@1.2.0",
"@edx/browserslist-config": "^1.1.1",
"@edx/frontend-build": "12.7.0",
"@edx/paragon": "^20.19.0",
"@edx/reactifex": "^2.1.1",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.7",
"husky": "8.0.3",
"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",
"semantic-release": "19.0.5"
"@commitlint/cli": "^7.1.2",
"@commitlint/config-angular": "^6.0.2",
"@commitlint/prompt": "^6.0.2",
"@commitlint/prompt-cli": "^6.0.2",
"@edx/frontend-build": "^1.0.1",
"@edx/frontend-i18n": "^2.1.0",
"@edx/frontend-logging": "^2.0.2",
"@edx/paragon": "^7.1.3",
"coveralls": "^3.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"husky": "^0.14.3",
"prop-types": "^15.5.10",
"react": "^16.4.2",
"react-dom": "^16.2.0",
"react-test-renderer": "^16.6.0",
"reactifex": "^1.1.1"
},
"dependencies": {
"@edx/frontend-platform": "^4.0.1",
"@fortawesome/fontawesome-svg-core": "6.4.0",
"@fortawesome/free-brands-svg-icons": "6.4.0",
"@fortawesome/free-regular-svg-icons": "6.4.0",
"@fortawesome/free-solid-svg-icons": "6.4.0",
"@fortawesome/react-fontawesome": "0.2.0"
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-brands-svg-icons": "^5.8.1",
"@fortawesome/free-regular-svg-icons": "^5.8.1",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/react-fontawesome": "^0.1.4"
},
"peerDependencies": {
"@edx/frontend-i18n": "^2.1.0",
"@edx/frontend-logging": "^2.0.2",
"@edx/paragon": "^7.1.3",
"prop-types": "^15.5.10",
"react": "^16.9.0 || ^17.0.0",
"react-dom": "^16.9.0 || ^17.0.0"
"react": "^16.4.2",
"react-dom": "^16.2.0"
}
}

View File

@@ -1,33 +0,0 @@
{
"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"
}

View File

@@ -1,18 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { ensureConfig } from '@edx/frontend-platform/config';
import { AppContext } from '@edx/frontend-platform/react';
import { injectIntl, intlShape } from '@edx/frontend-i18n';
import messages from './Footer.messages';
import FooterLogo from '../edx-openedx-logo-tag.png';
import LanguageSelector from './LanguageSelector';
ensureConfig([
'LMS_BASE_URL',
'LOGO_TRADEMARK_URL',
], 'Footer component');
const EVENT_NAMES = {
FOOTER_LINK: 'edx.bi.footer.link',
};
@@ -23,6 +16,14 @@ class SiteFooter extends React.Component {
this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
}
getLocalePrefix(locale) {
const twoLetterPrefix = locale.substring(0, 2).toLowerCase();
if (twoLetterPrefix === 'en') {
return '';
}
return `/${twoLetterPrefix}`;
}
externalLinkClickHandler(event) {
const label = event.currentTarget.getAttribute('href');
const eventName = EVENT_NAMES.FOOTER_LINK;
@@ -30,7 +31,7 @@ class SiteFooter extends React.Component {
category: 'outbound_link',
label,
};
sendTrackEvent(eventName, properties);
this.props.handleAllTrackEvents(eventName, properties);
}
render() {
@@ -41,40 +42,38 @@ class SiteFooter extends React.Component {
intl,
} = this.props;
const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
const { config } = this.context;
return (
<footer
role="contentinfo"
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
className="footer d-flex border-top py-3 px-4"
>
<div className="container-fluid d-flex">
<div className="container d-flex">
<a
className="d-block"
href={config.LMS_BASE_URL}
className="d-block mb-3"
href="https://open.edx.org"
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
>
<img
style={{ maxHeight: 45 }}
src={logo || config.LOGO_TRADEMARK_URL}
style={{ maxWidth: 150 }}
src={logo || FooterLogo}
alt={intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
<div className="flex-grow-1" />
{showLanguageSelector && (
{showLanguageSelector &&
<LanguageSelector
options={supportedLanguages}
onSubmit={onLanguageSelected}
/>
)}
}
</div>
</footer>
);
}
}
SiteFooter.contextType = AppContext;
SiteFooter.propTypes = {
intl: intlShape.isRequired,
logo: PropTypes.string,
@@ -83,6 +82,7 @@ SiteFooter.propTypes = {
label: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
})),
handleAllTrackEvents: PropTypes.func.isRequired,
};
SiteFooter.defaultProps = {

View File

@@ -1,4 +1,4 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
import { defineMessages } from '@edx/frontend-i18n';
const messages = defineMessages({
'footer.socialLinks.srText.facebook': {

View File

@@ -1,75 +1,49 @@
/* eslint-disable react/prop-types */
import React, { useMemo } from 'react';
import React from 'react';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { AppContext } from '@edx/frontend-platform/react';
import { IntlProvider } from '@edx/frontend-i18n';
import Footer from './Footer';
const FooterWithContext = ({ locale = 'es' }) => {
const contextValue = useMemo(() => ({
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}), []);
return (
<IntlProvider locale={locale}>
<AppContext.Provider
value={contextValue}
>
<Footer />
</AppContext.Provider>
</IntlProvider>
);
};
const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
const contextValue = useMemo(() => ({
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}), []);
return (
<IntlProvider locale="en">
<AppContext.Provider
value={contextValue}
>
<Footer
onLanguageSelected={languageSelected}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</AppContext.Provider>
</IntlProvider>
);
};
describe('<Footer />', () => {
describe('renders correctly', () => {
it('renders without a language selector', () => {
const mockHandleAllTrackEvents = jest.fn();
const tree = renderer
.create(<FooterWithContext locale="en" />)
.create((
<IntlProvider locale="en">
<Footer handleAllTrackEvents={mockHandleAllTrackEvents} />
</IntlProvider>
))
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders without a language selector in es', () => {
const mockHandleAllTrackEvents = jest.fn();
const tree = renderer
.create(<FooterWithContext locale="es" />)
.create((
<IntlProvider locale="es">
<Footer handleAllTrackEvents={mockHandleAllTrackEvents} />
</IntlProvider>
))
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders with a language selector', () => {
const mockHandleAllTrackEvents = jest.fn();
const tree = renderer
.create(<FooterWithLanguageSelector />)
.create((
<IntlProvider locale="en">
<Footer
handleAllTrackEvents={mockHandleAllTrackEvents}
onLanguageSelected={() => {}}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</IntlProvider>
))
.toJSON();
expect(tree).toMatchSnapshot();
});
@@ -77,8 +51,20 @@ describe('<Footer />', () => {
describe('handles language switching', () => {
it('calls onLanguageSelected prop when a language is changed', () => {
const mockHandleAllTrackEvents = jest.fn();
const mockHandleLanguageSelected = jest.fn();
const wrapper = mount(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
const wrapper = mount((
<IntlProvider locale="en">
<Footer
handleAllTrackEvents={mockHandleAllTrackEvents}
onLanguageSelected={mockHandleLanguageSelected}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</IntlProvider>
));
wrapper.find('form').simulate('submit', {
target: {

View File

@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-i18n';
const LanguageSelector = ({
intl, options, onSubmit, ...props
@@ -17,8 +17,8 @@ const LanguageSelector = ({
onSubmit={handleSubmit}
{...props}
>
{/* eslint-disable-next-line jsx-a11y/label-has-for */}
<div className="form-group">
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label htmlFor="site-footer-language-select" className="d-inline-block m-0">
<FormattedMessage
id="footer.languageForm.select.label"
@@ -32,7 +32,8 @@ const LanguageSelector = ({
name="site-footer-language-select"
defaultValue={intl.locale}
>
{options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
{options.map(({ value, label }) =>
<option key={value} value={value}>{label}</option>)}
</select>
<button className="btn btn-outline-primary btn-sm" type="submit">
<FormattedMessage

View File

@@ -2,23 +2,24 @@
exports[`<Footer /> renders correctly renders with a language selector 1`] = `
<footer
aria-label="edX Home"
className="footer d-flex border-top py-3 px-4"
role="contentinfo"
>
<div
className="container-fluid d-flex"
className="container d-flex"
>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
className="d-block mb-3"
href="https://open.edx.org"
>
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
src="test-file-stub"
style={
Object {
"maxHeight": 45,
"maxWidth": 150,
}
}
/>
@@ -37,7 +38,9 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
className="d-inline-block m-0"
htmlFor="site-footer-language-select"
>
Choose Language
<span>
Choose Language
</span>
</label>
<select
className="form-control-sm mx-2"
@@ -60,7 +63,9 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
className="btn btn-outline-primary btn-sm"
type="submit"
>
Apply
<span>
Apply
</span>
</button>
</div>
</form>
@@ -70,23 +75,24 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
exports[`<Footer /> renders correctly renders without a language selector 1`] = `
<footer
aria-label="edX Home"
className="footer d-flex border-top py-3 px-4"
role="contentinfo"
>
<div
className="container-fluid d-flex"
className="container d-flex"
>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
className="d-block mb-3"
href="https://open.edx.org"
>
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
src="test-file-stub"
style={
Object {
"maxHeight": 45,
"maxWidth": 150,
}
}
/>
@@ -100,23 +106,24 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
<footer
aria-label="edX Home"
className="footer d-flex border-top py-3 px-4"
role="contentinfo"
>
<div
className="container-fluid d-flex"
className="container d-flex"
>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
className="d-block mb-3"
href="https://open.edx.org"
>
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
src="test-file-stub"
style={
Object {
"maxHeight": 45,
"maxWidth": 150,
}
}
/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -1,34 +1,32 @@
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';
import dedeCAMessages from './messages/de_DE.json';
import ititCAMessages from './messages/it_IT.json';
import ptptCAMessages from './messages/pt_PT.json';
import caMessages from './messages/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 zhcnMessages from './messages/zh_CN.json';
import heMessages from './messages/he.json';
import idMessages from './messages/id.json';
import kokrMessages from './messages/ko_kr.json';
import plMessages from './messages/pl.json';
import ptbrMessages from './messages/pt_br.json';
import ruMessages from './messages/ru.json';
import thMessages from './messages/th.json';
import ukMessages from './messages/uk.json';
const messages = {
ar: arMessages,
'es-419': es419Messages,
fr: frMessages,
'zh-cn': zhcnMessages,
pt: ptMessages,
it: itMessages,
de: deMessages,
hi: hiMessages,
'fr-ca': frCAMessages,
ca: caMessages,
he: heMessages,
id: idMessages,
'ko-kr': kokrMessages,
pl: plMessages,
'pt-br': ptbrMessages,
ru: ruMessages,
th: thMessages,
uk: ukMessages,
'de-de': dedeCAMessages,
'it-it': ititCAMessages,
'pt-pt': ptptCAMessages,
};
export default messages;

View File

@@ -1 +0,0 @@
{}

View File

@@ -2,25 +2,3 @@ import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
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.BASE_URL = 'localhost:1995';
process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
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/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';

1275
stats.json Normal file

File diff suppressed because one or more lines are too long

View File

@@ -7,9 +7,4 @@ module.exports = createConfig('webpack-dev', {
path: path.resolve(__dirname, 'example/dist'),
publicPath: '/',
},
resolve: {
alias: {
'@edx/frontend-component-footer': path.resolve(__dirname, 'src'),
},
},
});