Merge pull request #108 from edx/ciduarte/AA-465

fix: remove unnecessary aria-label

.env.development

@@ -0,0 +1,19 @@
+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

.eslintignore

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

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: Default CI
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs
+      uses: actions/setup-node@v1
+      with:
+        node-version: 12
+    - 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@v1

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: Release CI
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - 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@v1
+      - 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

.gitignore

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

.travis.yml

@@ -1,19 +0,0 @@
-language: node_js
-node_js: 12
-before_install:
-- npm install -g npm@6
-install:
- - npm install
-script:
-- make validate-no-uncommitted-package-lock-changes
-- npm run lint
-- npm run i18n_extract
-- npm run test
-- npm run build
-after_success:
-- npx semantic-release
-- codecov
-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=

README.rst

@@ -52,8 +52,8 @@ Build the component::
 
    npm run build
 
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-footer.svg?branch=master
-   :target: https://travis-ci.org/edx/frontend-component-footer
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-footer.svg?branch=master
+   :target: https://travis-ci.com/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

example/index.jsx

@@ -1,22 +1,33 @@
+import 'babel-polyfill';
+
 import React from 'react';
-import { render } from 'react-dom';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+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 './index.scss';
-import Footer from '../src';
 
-const App = () => (
-  <div>
-    <IntlProvider locale="en">
-      <Footer
-        onLanguageSelected={() => {}}
-        supportedLanguages={[
-          { label: 'English', value: 'en' },
-          { label: 'Español', value: 'es' },
-        ]}
-      />
-    </IntlProvider>
-  </div>
-);
+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'),
+  );
+});
 
-render(<App />, document.getElementById('root'));
+initialize({
+  messages: []
+});

example/index.scss

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

package.json

@@ -38,28 +38,32 @@
     "@commitlint/config-angular": "8.2.0",
     "@commitlint/prompt": "8.2.0",
     "@commitlint/prompt-cli": "8.2.0",
-    "@edx/frontend-build": "^2.0.4",
-    "@edx/frontend-platform": "1.1.6",
-    "@edx/paragon": "7.1.5",
-    "codecov": "3.6.1",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-build": "5.4.0",
+    "@edx/frontend-platform": "1.8.0",
+    "@edx/paragon": "12.0.5",
+    "codecov": "3.7.2",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",
     "husky": "3.0.9",
     "prop-types": "15.7.2",
     "react": "16.10.2",
     "react-dom": "16.10.2",
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.1.2",
     "react-test-renderer": "16.10.2",
-    "reactifex": "1.1.1"
+    "reactifex": "1.1.1",
+    "redux": "^4.0.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.26",
+    "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.8.2",
     "@fortawesome/free-regular-svg-icons": "5.8.2",
     "@fortawesome/free-solid-svg-icons": "5.8.2",
-    "@fortawesome/react-fontawesome": "0.1.8"
+    "@fortawesome/react-fontawesome": "0.1.13"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^1.1.4",
+    "@edx/frontend-platform": "^1.8.0",
     "@edx/paragon": "^7.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0",

src/components/Footer.jsx

@@ -2,11 +2,16 @@ 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 messages from './Footer.messages';
-import FooterLogo from '../edx-openedx-logo-tag.png';
 import LanguageSelector from './LanguageSelector';
 
+ensureConfig([
+  'LOGO_TRADEMARK_URL',
+], 'Footer component');
+
 const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
 };
@@ -43,38 +48,40 @@ 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 d-flex">
+        <div className="container-fluid d-flex">
           <a
-            className="d-block mb-3"
+            className="d-block"
             href="https://open.edx.org"
             aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
           >
             <img
-              style={{ maxWidth: 150 }}
-              src={logo || FooterLogo}
+              style={{ maxHeight: 45 }}
+              src={logo || config.LOGO_TRADEMARK_URL}
               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,

src/components/Footer.test.jsx

@@ -2,6 +2,7 @@ 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 Footer from './Footer';
 
@@ -11,7 +12,16 @@ describe('<Footer />', () => {
       const tree = renderer
         .create((
           <IntlProvider locale="en">
-            <Footer />
+            <AppContext.Provider
+              value={{
+                authenticatedUser: null,
+                config: {
+                  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                },
+              }}
+            >
+              <Footer />
+            </AppContext.Provider>
           </IntlProvider>
         ))
         .toJSON();
@@ -21,7 +31,16 @@ describe('<Footer />', () => {
       const tree = renderer
         .create((
           <IntlProvider locale="es">
-            <Footer />
+            <AppContext.Provider
+              value={{
+                authenticatedUser: null,
+                config: {
+                  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                },
+              }}
+            >
+              <Footer />
+            </AppContext.Provider>
           </IntlProvider>
         ))
         .toJSON();
@@ -31,13 +50,22 @@ describe('<Footer />', () => {
       const tree = renderer
         .create((
           <IntlProvider locale="en">
-            <Footer
-              onLanguageSelected={() => {}}
-              supportedLanguages={[
-                { label: 'English', value: 'en' },
-                { label: 'Español', value: 'es' },
-              ]}
-            />
+            <AppContext.Provider
+              value={{
+                authenticatedUser: null,
+                config: {
+                  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                },
+              }}
+            >
+              <Footer
+                onLanguageSelected={() => {}}
+                supportedLanguages={[
+                  { label: 'English', value: 'en' },
+                  { label: 'Español', value: 'es' },
+                ]}
+              />
+            </AppContext.Provider>
           </IntlProvider>
         ))
         .toJSON();
@@ -50,13 +78,22 @@ describe('<Footer />', () => {
       const mockHandleLanguageSelected = jest.fn();
       const wrapper = mount((
         <IntlProvider locale="en">
-          <Footer
-            onLanguageSelected={mockHandleLanguageSelected}
-            supportedLanguages={[
-              { label: 'English', value: 'en' },
-              { label: 'Español', value: 'es' },
-            ]}
-          />
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+              },
+            }}
+          >
+            <Footer
+              onLanguageSelected={mockHandleLanguageSelected}
+              supportedLanguages={[
+                { label: 'English', value: 'en' },
+                { label: 'Español', value: 'es' },
+              ]}
+            />
+          </AppContext.Provider>
         </IntlProvider>
       ));
 

src/components/LanguageSelector.jsx

@@ -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,8 +32,7 @@ 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

src/components/__snapshots__/Footer.test.jsx.snap

@@ -2,24 +2,23 @@
 
 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 d-flex"
+    className="container-fluid d-flex"
   >
     <a
       aria-label="edX Home"
-      className="d-block mb-3"
+      className="d-block"
       href="https://open.edx.org"
     >
       <img
         alt="Powered by Open edX"
-        src="test-file-stub"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
           Object {
-            "maxWidth": 150,
+            "maxHeight": 45,
           }
         }
       />
@@ -75,24 +74,23 @@ 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 d-flex"
+    className="container-fluid d-flex"
   >
     <a
       aria-label="edX Home"
-      className="d-block mb-3"
+      className="d-block"
       href="https://open.edx.org"
     >
       <img
         alt="Powered by Open edX"
-        src="test-file-stub"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
           Object {
-            "maxWidth": 150,
+            "maxHeight": 45,
           }
         }
       />
@@ -106,24 +104,23 @@ 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 d-flex"
+    className="container-fluid d-flex"
   >
     <a
       aria-label="edX Home"
-      className="d-block mb-3"
+      className="d-block"
       href="https://open.edx.org"
     >
       <img
         alt="Powered by Open edX"
-        src="test-file-stub"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
           Object {
-            "maxWidth": 150,
+            "maxHeight": 45,
           }
         }
       />

src/setupTest.js

@@ -2,3 +2,25 @@ 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';

webpack.dev.config.js

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