header component (openedx#101)

* chore: use LearningHeader instead course header

* chore: remove course header debris

Author: leangseu-edx

package-lock.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
     "@edx/frontend-component-footer": "10.1.6",
+    "@edx/frontend-component-header": "^2.4.6",
     "@edx/frontend-platform": "^1.15.6",
     "@edx/paragon": "16.14.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

package.json

@@ -4,19 +4,19 @@ import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import Footer from '@edx/frontend-component-footer';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { selectors } from 'data/redux';
 
 import DemoWarning from 'containers/DemoWarning';
-import CourseHeader from 'containers/CourseHeader';
 import ListView from 'containers/ListView';
 
 import './App.scss';
 
 export const App = ({ courseMetadata, isEnabled }) => (
   <Router>
     <div>
-      <CourseHeader
+      <Header
         courseTitle={courseMetadata.title}
         courseNumber={courseMetadata.number}
         courseOrg={courseMetadata.org}

src/App.jsx

@@ -42,32 +42,6 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
   }
 }
 
-.course-header {
-  min-width: 0;
-  border-bottom: 1px solid black;
-
-  .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;
-      }
-    }
-  }
-}
-
-
 #paragon-portal-root {
   .pgn__modal-layer {
     .pgn__modal-close-container {

src/App.scss

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import Footer from '@edx/frontend-component-footer';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import ListView from 'containers/ListView';
 
@@ -16,11 +17,13 @@ jest.mock('data/redux', () => ({
   },
 }));
 
+jest.mock('@edx/frontend-component-header', () => ({
+  LearningHeader: 'Header',
+}));
 jest.mock('@edx/frontend-component-footer', () => 'Footer');
 
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
 jest.mock('containers/ListView', () => 'ListView');
-jest.mock('containers/CourseHeader', () => 'CourseHeader');
 
 const logo = 'fakeLogo.png';
 let el;
@@ -57,5 +60,16 @@ describe('App router component', () => {
     test('Footer logo drawn from env variable', () => {
       expect(router.find(Footer).props().logo).toEqual(logo);
     });
+
+    test('Header to use courseMetadata props', () => {
+      const {
+        courseTitle,
+        courseNumber,
+        courseOrg,
+      } = router.find(Header).props();
+      expect(courseTitle).toEqual(props.courseMetadata.title);
+      expect(courseNumber).toEqual(props.courseMetadata.number);
+      expect(courseOrg).toEqual(props.courseMetadata.org);
+    });
   });
 });

src/App.test.jsx

@@ -3,7 +3,7 @@
 exports[`App router component snapshot: disabled (show demo warning) 1`] = `
 <BrowserRouter>
   <div>
-    <CourseHeader
+    <Header
       courseNumber="course-number"
       courseOrg="course-org"
       courseTitle="course-title"
@@ -22,7 +22,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
 exports[`App router component snapshot: enabled 1`] = `
 <BrowserRouter>
   <div>
-    <CourseHeader
+    <Header
       courseNumber="course-number"
       courseOrg="course-org"
       courseTitle="course-title"