diff --git a/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap b/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap index d1150e6d7a..620758002a 100644 --- a/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap +++ b/src/app/components/NavBar/__snapshots__/index.spec.tsx.snap @@ -1,5 +1,1063 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`content in browser assignable user renders 1`] = ` +.c1 { + overflow: visible; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 6rem; + max-width: 128rem; + margin: 0 auto; +} + +.c1 { + overflow: visible; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 6rem; + max-width: 128rem; + margin: 0 auto; +} + +.c1 { + overflow: visible; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 6rem; + max-width: 128rem; + margin: 0 auto; +} + +.c1 { + overflow: visible; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 6rem; + max-width: 128rem; + margin: 0 auto; +} + +.c2 { + display: block; + width: auto; + height: 3.5rem; +} + +.c2 { + display: block; + width: auto; + height: 3.5rem; +} + +.c2 { + display: block; + width: auto; + height: 3.5rem; +} + +.c2 { + display: block; + width: auto; + height: 3.5rem; +} + +.c4 { + -webkit-animation: 100ms bcCCNc ease-out; + animation: 100ms bcCCNc ease-out; + overflow: visible; + position: relative; + height: 100%; +} + +.c4 { + -webkit-animation: 100ms bcCCNc ease-out; + animation: 100ms bcCCNc ease-out; + overflow: visible; + position: relative; + height: 100%; +} + +.c4 { + -webkit-animation: 100ms bcCCNc ease-out; + animation: 100ms bcCCNc ease-out; + overflow: visible; + position: relative; + height: 100%; +} + +.c9 { + display: none; + width: auto; + height: 2.8rem; + position: absolute; + left: 1.6rem; + top: 1.2000000000000002rem; +} + +.c9 { + display: none; + width: auto; + height: 2.8rem; + position: absolute; + left: 1.6rem; + top: 1.2000000000000002rem; +} + +.c9 { + display: none; + width: auto; + height: 2.8rem; + position: absolute; + left: 1.6rem; + top: 1.2000000000000002rem; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + line-height: 1.6rem; + font-size: 1.4rem; + color: #fff; + background-color: #007297; + cursor: pointer; + margin-top: 1.25rem; +} + +.c6:hover { + box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3); +} + +.c6 svg { + width: 1.5rem; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + line-height: 1.6rem; + font-size: 1.4rem; + color: #fff; + background-color: #007297; + cursor: pointer; + margin-top: 1.25rem; +} + +.c6:hover { + box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3); +} + +.c6 svg { + width: 1.5rem; +} + +.c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + line-height: 1.6rem; + font-size: 1.4rem; + color: #fff; + background-color: #007297; + cursor: pointer; + margin-top: 1.25rem; +} + +.c6:hover { + box-shadow: 0 0 0.2rem 0.2rem rgba(0,0,0,0.3); +} + +.c6 svg { + width: 1.5rem; +} + +.c10 { + color: #424242; + font-size: 1.8rem; + line-height: 2.5rem; + -webkit-letter-spacing: -0.02rem; + -moz-letter-spacing: -0.02rem; + -ms-letter-spacing: -0.02rem; + letter-spacing: -0.02rem; + padding: 1rem 0 1rem 0; + margin: 0; + padding-bottom: 0; + display: none; +} + +.c10 { + color: #424242; + font-size: 1.8rem; + line-height: 2.5rem; + -webkit-letter-spacing: -0.02rem; + -moz-letter-spacing: -0.02rem; + -ms-letter-spacing: -0.02rem; + letter-spacing: -0.02rem; + padding: 1rem 0 1rem 0; + margin: 0; + padding-bottom: 0; + display: none; +} + +.c10 { + color: #424242; + font-size: 1.8rem; + line-height: 2.5rem; + -webkit-letter-spacing: -0.02rem; + -moz-letter-spacing: -0.02rem; + -ms-letter-spacing: -0.02rem; + letter-spacing: -0.02rem; + padding: 1rem 0 1rem 0; + margin: 0; + padding-bottom: 0; + display: none; +} + +.c11 { + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + box-shadow: 0 0.5rem 0.5rem 0 rgba(0,0,0,0.1); + margin: 0; + padding: 0.6rem 0; + background: #fff; + top: 100%; + right: 0; + border-top: 0.4rem solid #63a524; +} + +.c11 > li { + overflow: visible; + display: block; +} + +.c11 > li a { + overflow: visible; + white-space: nowrap; + display: block; + padding: 0 1rem; + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c11 > li a:hover { + color: #0064A0; +} + +.c3.focus-within .c11, +.c3:hover .c11 { + height: unset; + width: unset; + -webkit-clip: unset; + clip: unset; + overflow: visible; +} + +.c3:focus-within .c11 { + height: unset; + width: unset; + -webkit-clip: unset; + clip: unset; + overflow: visible; +} + +.c11 { + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + box-shadow: 0 0.5rem 0.5rem 0 rgba(0,0,0,0.1); + margin: 0; + padding: 0.6rem 0; + background: #fff; + top: 100%; + right: 0; + border-top: 0.4rem solid #63a524; +} + +.c11 > li { + overflow: visible; + display: block; +} + +.c11 > li a { + overflow: visible; + white-space: nowrap; + display: block; + padding: 0 1rem; + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c11 > li a:hover { + color: #0064A0; +} + +.c3.focus-within .c11, +.c3:hover .c11 { + height: unset; + width: unset; + -webkit-clip: unset; + clip: unset; + overflow: visible; +} + +.c3:focus-within .c11 { + height: unset; + width: unset; + -webkit-clip: unset; + clip: unset; + overflow: visible; +} + +.c11 { + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + box-shadow: 0 0.5rem 0.5rem 0 rgba(0,0,0,0.1); + margin: 0; + padding: 0.6rem 0; + background: #fff; + top: 100%; + right: 0; + border-top: 0.4rem solid #63a524; +} + +.c11 > li { + overflow: visible; + display: block; +} + +.c11 > li a { + overflow: visible; + white-space: nowrap; + display: block; + padding: 0 1rem; + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c11 > li a:hover { + color: #0064A0; +} + +.c3.focus-within .c11, +.c3:hover .c11 { + height: unset; + width: unset; + -webkit-clip: unset; + clip: unset; + overflow: visible; +} + +.c3:focus-within .c11 { + height: unset; + width: unset; + -webkit-clip: unset; + clip: unset; + overflow: visible; +} + +.c8 { + overflow: visible; + margin-bottom: 0.8rem; +} + +.c8 { + overflow: visible; + margin-bottom: 0.8rem; +} + +.c8 { + overflow: visible; + margin-bottom: 0.8rem; +} + +.c12 { + cursor: pointer; + border: none; + padding: 0; + background: none; + position: fixed; + height: 5.2rem; + width: 5.2rem; + top: 0; + right: 0; + color: #5e6062; + display: none; +} + +.c12 { + cursor: pointer; + border: none; + padding: 0; + background: none; + position: fixed; + height: 5.2rem; + width: 5.2rem; + top: 0; + right: 0; + color: #5e6062; + display: none; +} + +.c12 { + cursor: pointer; + border: none; + padding: 0; + background: none; + position: fixed; + height: 5.2rem; + width: 5.2rem; + top: 0; + right: 0; + color: #5e6062; + display: none; +} + +.c0 { + overflow: visible; + z-index: 70; + background: #fff; + position: relative; + padding: 0 3.2rem; + box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1); +} + +.c0 { + overflow: visible; + z-index: 70; + background: #fff; + position: relative; + padding: 0 3.2rem; + box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1); +} + +.c0 { + overflow: visible; + z-index: 70; + background: #fff; + position: relative; + padding: 0 3.2rem; + box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1); +} + +.c0 { + overflow: visible; + z-index: 70; + background: #fff; + position: relative; + padding: 0 3.2rem; + box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1); +} + +@media screen and (max-width:75em) { + .c1 { + height: 5.2rem; + } +} + +@media print { + .c1 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c1 { + height: 5.2rem; + } +} + +@media print { + .c1 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c1 { + height: 5.2rem; + } +} + +@media print { + .c1 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c1 { + height: 5.2rem; + } +} + +@media print { + .c1 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c2 { + height: 2.8rem; + } +} + +@media screen and (max-width:75em) { + .c2 { + height: 2.8rem; + } +} + +@media screen and (max-width:75em) { + .c2 { + height: 2.8rem; + } +} + +@media screen and (max-width:75em) { + .c2 { + height: 2.8rem; + } +} + +@media screen and (max-width:75em) { + .c4 { + height: auto; + } +} + +@media screen and (max-width:75em) { + .c4 { + height: auto; + } +} + +@media screen and (max-width:75em) { + .c4 { + height: auto; + } +} + +@media screen and (max-width:75em) { + .c9 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c9 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c9 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c6 { + margin-top: 0; + } +} + +@media screen and (max-width:75em) { + .c6 { + margin-top: 0; + } +} + +@media screen and (max-width:75em) { + .c6 { + margin-top: 0; + } +} + +@media screen and (max-width:75em) { + .c10 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c10 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c10 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c11 { + position: static; + box-shadow: none; + border: none; + background: none; + } +} + +@media screen and (max-width:75em) { + .c11 { + position: static; + box-shadow: none; + border: none; + background: none; + } +} + +@media screen and (max-width:75em) { + .c11 { + position: static; + box-shadow: none; + border: none; + background: none; + } +} + +@media screen and (max-width:75em) { + .c8 { + background: rgba(255,255,255,0); + -webkit-transition: background 200ms; + transition: background 200ms; + position: fixed; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + top: 0; + left: 0; + height: 0; + width: 0; + overflow: hidden; + margin-bottom: 0; + } + + .c8:focus, + .c8.focus-within, + .c5:focus ~ .c8 { + padding-top: calc(20vh + 5vw); + background: rgba(255,255,255,0.98); + height: auto; + width: auto; + right: 0; + bottom: -100%; + } + + .c8:focus-within { + padding-top: calc(20vh + 5vw); + background: rgba(255,255,255,0.98); + height: auto; + width: auto; + right: 0; + bottom: -100%; + } + + .c8 > div { + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + overflow: visible; + } +} + +@media screen and (max-width:75em) { + .c8 { + background: rgba(255,255,255,0); + -webkit-transition: background 200ms; + transition: background 200ms; + position: fixed; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + top: 0; + left: 0; + height: 0; + width: 0; + overflow: hidden; + margin-bottom: 0; + } + + .c8:focus, + .c8.focus-within, + .c5:focus ~ .c8 { + padding-top: calc(20vh + 5vw); + background: rgba(255,255,255,0.98); + height: auto; + width: auto; + right: 0; + bottom: -100%; + } + + .c8:focus-within { + padding-top: calc(20vh + 5vw); + background: rgba(255,255,255,0.98); + height: auto; + width: auto; + right: 0; + bottom: -100%; + } + + .c8 > div { + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + overflow: visible; + } +} + +@media screen and (max-width:75em) { + .c8 { + background: rgba(255,255,255,0); + -webkit-transition: background 200ms; + transition: background 200ms; + position: fixed; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + top: 0; + left: 0; + height: 0; + width: 0; + overflow: hidden; + margin-bottom: 0; + } + + .c8:focus, + .c8.focus-within, + .c5:focus ~ .c8 { + padding-top: calc(20vh + 5vw); + background: rgba(255,255,255,0.98); + height: auto; + width: auto; + right: 0; + bottom: -100%; + } + + .c8:focus-within { + padding-top: calc(20vh + 5vw); + background: rgba(255,255,255,0.98); + height: auto; + width: auto; + right: 0; + bottom: -100%; + } + + .c8 > div { + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + overflow: visible; + } +} + +@media screen and (max-width:75em) { + .c5:focus ~ .c12, + .c7:focus ~ .c12, + .c7.focus-within ~ .c12, + .c7:focus-within ~ .c12 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c5:focus ~ .c12, + .c7:focus ~ .c12, + .c7.focus-within ~ .c12, + .c7:focus-within ~ .c12 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c5:focus ~ .c12, + .c7:focus ~ .c12, + .c7.focus-within ~ .c12, + .c7:focus-within ~ .c12 { + display: block; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +
+
+ + OpenStax Logo + +
+
+ ", + } + } + fill="currentColor" + viewBox="0 0 448 512" + xmlns="http://www.w3.org/2000/svg" + /> +
+
+ +
+

+ Hi +

+ +
  • + + Account Profile + +
    • +
  • + + Log out + +
    • +     +
    +
    + +
    +
    +
    +`; + exports[`content in browser matches snapshot for logged out 1`] = ` .c1 { overflow: visible; @@ -77,6 +1135,31 @@ exports[`content in browser matches snapshot for logged out 1`] = ` margin: 0 auto; } +.c1 { + overflow: visible; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 6rem; + max-width: 128rem; + margin: 0 auto; +} + +.c2 { + display: block; + width: auto; + height: 3.5rem; +} + .c2 { display: block; width: auto; @@ -164,6 +1247,27 @@ exports[`content in browser matches snapshot for logged out 1`] = ` box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1); } +.c0 { + overflow: visible; + z-index: 70; + background: #fff; + position: relative; + padding: 0 3.2rem; + box-shadow: 0 0.2rem 0.2rem 0 rgba(0,0,0,0.1); +} + +@media screen and (max-width:75em) { + .c1 { + height: 5.2rem; + } +} + +@media print { + .c1 { + display: none; + } +} + @media screen and (max-width:75em) { .c1 { height: 5.2rem; @@ -236,6 +1340,12 @@ exports[`content in browser matches snapshot for logged out 1`] = ` } } +@media screen and (max-width:75em) { + .c2 { + height: 2.8rem; + } +} + @media screen and (max-width:75em) { .c3 { font-size: 1.4rem; @@ -280,6 +1390,12 @@ exports[`content in browser matches snapshot for logged out 1`] = ` } } +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} +
    { }); }); + describe('assignable user', () => { + beforeEach(() => { + // Assignable students do not have first and last names + store.dispatch(receiveUser({...user, firstName: '', lastName: '' })); + }); + + it('renders', () => { + const component = renderer.create(render()); + const tree = component.toJSON(); + component.unmount(); + + expect(tree).toMatchSnapshot(); + }); + }); + it('matches snapshot for logged out', () => { store.dispatch(receiveLoggedOut()); diff --git a/src/app/components/NavBar/index.tsx b/src/app/components/NavBar/index.tsx index 90f12774f3..79f5e3dfef 100644 --- a/src/app/components/NavBar/index.tsx +++ b/src/app/components/NavBar/index.tsx @@ -9,6 +9,7 @@ import * as selectNavigation from '../../navigation/selectors'; import { AppState } from '../../types'; import OnScroll, { OnScrollCallback } from '../OnScroll'; import * as Styled from './styled'; +import UserIcon from '../../../assets/UserIcon'; export { maxNavWidth, navDesktopHeight, navMobileHeight } from './styled'; @@ -83,7 +84,7 @@ export const Dropdown: FunctionComponent<{user: User, currentPath: string}> = ({ const DropdownToggle: FunctionComponent<{ user: User }> = ({ user: { firstName, lastName }, }) => { - const initials = (firstName[0] + lastName[0]).toUpperCase(); + const renderEl = firstName && lastName ? (firstName[0] + lastName[0]).toUpperCase() : ; return ( = ({ aria-haspopup='true' aria-controls='dropdown-menu' > - {initials} + {renderEl} ); }; diff --git a/src/app/components/NavBar/styled.tsx b/src/app/components/NavBar/styled.tsx index 0dd6d694a5..4e0c30fedf 100644 --- a/src/app/components/NavBar/styled.tsx +++ b/src/app/components/NavBar/styled.tsx @@ -165,6 +165,10 @@ export const DropdownToggle = styled.div` ${theme.breakpoints.mobile(css` margin-top: 0; `)} + + svg { + width: 1.5rem; + } `; // tslint:disable-next-line:variable-name diff --git a/src/assets/UserIcon.tsx b/src/assets/UserIcon.tsx new file mode 100644 index 0000000000..ff6845070e --- /dev/null +++ b/src/assets/UserIcon.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +// tslint:disable:max-line-length +// tslint:disable-next-line:variable-name +const SvgComponent = () => ( + `, + }} + > +); +export default SvgComponent;