feat: retheme with @edx/brand, use logo from config settings (#104)

.env.development

@@ -14,3 +14,7 @@ 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

.env.test

@@ -14,3 +14,7 @@ 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

.gitignore

@@ -6,4 +6,5 @@ node_modules
 temp
 src/i18n/transifex_input.json
 .vscode/
-*~
+*~
+module.config.js

example/index.js

@@ -4,9 +4,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
+import Header from '@edx/frontend-component-header';
 
 import './index.scss';
-import Header from '../src/';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(

example/index.scss

@@ -1,3 +1,6 @@
-@import "~@edx/paragon/scss/edx/theme.scss";
-@import "~@edx/paragon/scss/edx/fonts.scss";
-@import '../src/index.scss';
+@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";

package.json

@@ -38,9 +38,10 @@
     "@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.14",
-    "@edx/paragon": "7.1.5",
+    "@edx/brand": "npm:@edx/[email protected]",
+    "@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",
@@ -56,13 +57,13 @@
     "redux-saga": "1.1.3"
   },
   "dependencies": {
-    "@edx/frontend-enterprise": "^4.2.3",
-    "babel-polyfill": "^6.26.0",
+    "@edx/frontend-enterprise": "4.5.1",
+    "babel-polyfill": "6.26.0",
     "react-responsive": "8.0.3",
     "react-transition-group": "4.3.0"
   },
   "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/Avatar.jsx

@@ -12,7 +12,7 @@ function Avatar({
   const avatar = src ? (
     <img className="d-block w-100 h-100" src={src} alt={alt} />
   ) : (
-    <AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
+    <AvatarIcon style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
   );
 
   return (

src/DesktopHeader.jsx

@@ -22,7 +22,9 @@ 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 {
@@ -65,7 +67,7 @@ class DesktopHeader extends React.Component {
           data-hj-suppress
           tag="button"
           aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-light d-inline-flex align-items-center pl-2 pr-3"
+          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" />
@@ -107,7 +109,7 @@ class DesktopHeader extends React.Component {
       <header className="site-header-desktop">
         <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"

src/Header.jsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-
 import { AppContext } from '@edx/frontend-platform/react';
 import {
   APP_CONFIG_INITIALIZED,
@@ -11,22 +10,20 @@ import {
   getConfig,
   subscribe,
 } from '@edx/frontend-platform';
+import { useEnterpriseConfig } from '@edx/frontend-enterprise';
 
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
 
-import LogoSVG from './logo.svg';
-
 import messages from './Header.messages';
 
-import useEnterpriseConfig from './data/hooks/enterprise';
-
 ensureConfig([
   'LMS_BASE_URL',
   'LOGOUT_URL',
   'LOGIN_URL',
   'MARKETING_SITE_BASE_URL',
   'ORDER_HISTORY_URL',
+  'LOGO_TRADEMARK_URL',
 ], 'Header component');
 
 subscribe(APP_CONFIG_INITIALIZED, () => {
@@ -42,7 +39,7 @@ function Header({ intl }) {
   const {
     enterpriseLearnerPortalLink,
     enterpriseCustomerBrandingConfig,
-  } = useEnterpriseConfig(authenticatedUser, config);
+  } = useEnterpriseConfig(authenticatedUser, config.ENTERPRISE_LEARNER_PORTAL_HOSTNAME, config.LMS_BASE_URL);
 
   const mainMenu = [
     {
@@ -138,7 +135,7 @@ function Header({ intl }) {
   ];
 
   let props = {
-    logo: LogoSVG,
+    logo: config.LOGO_TRADEMARK_URL,
     logoAltText: 'edX',
     siteName: 'edX',
     logoDestination: getConfig().MINIMAL_HEADER ? null : `${config.LMS_BASE_URL}/dashboard`,
@@ -158,14 +155,14 @@ function Header({ intl }) {
   }
 
   return (
-    <React.Fragment>
+    <>
       <Responsive maxWidth={768}>
         <MobileHeader {...props} />
       </Responsive>
       <Responsive minWidth={769}>
         <DesktopHeader {...props} />
       </Responsive>
-    </React.Fragment>
+    </>
   );
 }