fix: studio dropdown hover styles (#433)

Author: KristinAoki

example/index.js

@@ -7,6 +7,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';
 
 import './index.scss';
+import StudioHeader from '../src/studio-header/StudioHeader';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -32,7 +33,35 @@ subscribe(APP_READY, () => {
       }}>
         <Header />
       </AppContext.Provider>
-      <h5 className="mt-2">Logged in state</h5>
+      <h5 className="mt-2  mb-5">Logged in state</h5>
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
+          username: 'testuser',
+          roles: [],
+          administrator: false,
+        },
+        config: getConfig(),
+      }}>
+        <StudioHeader
+          number="run123"
+          org="testX"
+          title="Course Name"
+          isHiddenMainMenu={false}
+          mainMenuDropdowns={[
+            {
+              id: 'content-dropdown',
+              buttonTitle: 'Content',
+              items: [{
+                href: '#',
+                title: 'Outline',
+              }],
+            },
+          ]}
+          outlineLink="#"
+        />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state for Studio header</h5>
     </AppProvider>,
     document.getElementById('root'),
   );

src/index.scss

@@ -3,7 +3,7 @@ $blue: #007db8;
 $white: #fff;
 
 @import './Menu/menu.scss';
-@import './studio-header/header.scss';
+@import './studio-header/StudioHeader.scss';
 
 .dropdown-item a {
   text-decoration: none;
@@ -43,9 +43,9 @@ $white: #fff;
   .user-dropdown {
     .btn {
       height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
+      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      //   padding: 0 0.5rem;
+      // }
     }
   }
 }

src/studio-header/CourseLockUp.jsx

@@ -24,7 +24,7 @@ const CourseLockUp = ({
     )}
   >
     <a
-      className="course-title-lockup w-25 mr-2"
+      className="course-title-lockup mr-2"
       href={outlineLink}
       aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
       data-testid="course-lock-up-block"

src/studio-header/HeaderBody.jsx

@@ -44,7 +44,7 @@ const HeaderBody = ({
   );
 
   return (
-    <Container size="xl" className="px-4">
+    <Container size="xl" className="px-2.5">
       <ActionRow as="header">
         {isHiddenMainMenu ? (
           <Row className="flex-nowrap ml-4">
@@ -64,29 +64,31 @@ const HeaderBody = ({
                 Menu
               </Button>
             ) : (
-              <Row className="flex-nowrap m-0">
-                {renderBrandNav}
-                <CourseLockUp
-                  {...{
-                    outlineLink,
-                    number,
-                    org,
-                    title,
-                  }}
-                />
-              </Row>
+              <div className="w-25">
+                <Row className="m-0 flex-nowrap">
+                  {renderBrandNav}
+                  <CourseLockUp
+                    {...{
+                      outlineLink,
+                      number,
+                      org,
+                      title,
+                    }}
+                  />
+                </Row>
+              </div>
             )}
             {isMobile ? (
               <>
                 <ActionRow.Spacer />
                 {renderBrandNav}
               </>
             ) : (
-              <Nav data-testid="desktop-menu" className="ml-4">
+              <Nav data-testid="desktop-menu" className="ml-2">
                 {mainMenuDropdowns.map(dropdown => {
                   const { id, buttonTitle, items } = dropdown;
                   return (
-                    <NavDropdownMenu {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
                   );
                 })}
               </Nav>
@@ -113,9 +115,9 @@ const HeaderBody = ({
 HeaderBody.propTypes = {
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
+  setModalPopupTarget: PropTypes.func,
+  toggleModalPopup: PropTypes.func,
+  isModalPopupOpen: PropTypes.bool,
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string,
@@ -138,6 +140,9 @@ HeaderBody.propTypes = {
 };
 
 HeaderBody.defaultProps = {
+  setModalPopupTarget: null,
+  toggleModalPopup: null,
+  isModalPopupOpen: false,
   logo: null,
   logoAltText: null,
   number: '',

src/studio-header/MobileHeader.jsx

@@ -38,9 +38,6 @@ const MobileHeader = ({
 MobileHeader.propTypes = {
   studioBaseUrl: PropTypes.string.isRequired,
   logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
   number: PropTypes.string,
   org: PropTypes.string,
   title: PropTypes.string,

src/studio-header/NavDropdownMenu.jsx

@@ -13,10 +13,12 @@ const NavDropdownMenu = ({
   <DropdownButton
     id={id}
     title={buttonTitle}
-    variant="tertiary"
+    variant="outline-primary"
+    className="mr-2"
   >
     {items.map(item => (
       <Dropdown.Item
+        key={`${item.title}-dropdown-item`}
         href={item.href}
         className="small"
       >

src/studio-header/StudioHeader.jsx

@@ -36,14 +36,15 @@ const StudioHeader = ({
   };
 
   return (
-    <>
-      <Responsive maxWidth={768}>
+    <div className="studio-header">
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
+      <Responsive maxWidth={841}>
         <MobileHeader {...props} />
       </Responsive>
-      <Responsive minWidth={769}>
+      <Responsive minWidth={842}>
         <HeaderBody {...props} />
       </Responsive>
-    </>
+    </div>
   );
 };
 

src/studio-header/StudioHeader.scss

@@ -0,0 +1,49 @@
+$spacer: 1rem;
+$white: #FFFFFF;
+
+.studio-header {
+  position: relative;
+  z-index: 1000;
+
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: $white;
+
+  .btn-outline-primary {
+    border-color: $white;
+  }
+
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: $spacer 0;
+    margin-right: $spacer;
+
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+
+  .course-title-lockup {
+    @media only screen and (min-width: 769px) {
+      padding: .5rem;
+      padding-right: $spacer;
+      border-right: 1px solid #E5E5E5;
+      width: 70%;
+    }
+  
+    overflow: hidden;
+  
+    span {
+      color: #333333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.375rem;
+    }
+  }
+}