diff --git a/.gitignore b/.gitignore index b841e9a96..4e3544788 100644 --- a/.gitignore +++ b/.gitignore @@ -66,3 +66,4 @@ typings/ /asset-manifest.json .DS_Store +stats.json diff --git a/app/assets/images/malibu-logo.jpg b/app/assets/images/malibu-logo.jpg new file mode 100644 index 000000000..11248c214 Binary files /dev/null and b/app/assets/images/malibu-logo.jpg differ diff --git a/app/assets/images/user-icon.svg b/app/assets/images/user-icon.svg new file mode 100644 index 000000000..1feb2b311 --- /dev/null +++ b/app/assets/images/user-icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/app/assets/images/user.svg b/app/assets/images/user.svg new file mode 100644 index 000000000..1d6f3a0e2 --- /dev/null +++ b/app/assets/images/user.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 6e6112838..c8b8a22bf 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -4,6 +4,12 @@ @import "./base/z-index.scss"; @import "./base/colors.scss"; +@import "./base/normalize.scss"; +@import "./base/typography.scss"; + +:root { + --container-width: 1280px; +} *, *::after, @@ -19,6 +25,7 @@ html { body { margin: 0; + background-color: var(--white); } img { @@ -30,49 +37,6 @@ a { font-weight: normal; } -/* Menu */ -#main-navigation { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 10; - transform: translateY(-100%); - background-color: black; - transition: all 0.5s; -} - -#main-navigation ul { - list-style: none; - padding: 0; - max-width: 400px; - margin: 0 auto; - text-align: center; -} - -#main-navigation li { - padding: 10px 0; - color: white; -} - -#main-navigation li a { - color: white; - font-size: 32px; - text-transform: uppercase; - font-family: var(--title-font); - text-decoration: none; - transition: all 0.5s; -} - -#main-navigation li a:hover { - border-bottom: 1px solid white; -} - -#main-navigation:target { - transform: translateY(0); -} - #breaking-news-container { min-height: 71px; @@ -82,79 +46,11 @@ a { } .container { - max-width: 1000px; + max-width: var(--container-width); margin: 0 auto; padding: 0 16px; } -h1 { - font-family: var(--title-font); - font-size: 30px; - font-weight: 800; - margin: 10px 0; - text-align: center; - text-transform: uppercase; -} - -h1 span { - font-family: var(--content-font); - font-size: 24px; - font-style: italic; - font-weight: 400; - margin: 0 5px; - text-transform: none; -} - -.toggle { - display: block; - width: 28px; - height: 30px; - margin: 30px auto 10px; -} - -.toggle span::after, -.toggle span::before { - content: ""; - position: absolute; - left: 0; - top: -9px; -} - -.toggle span::after { - top: 9px; -} - -.toggle span { - position: relative; - display: block; -} - -.toggle span, -.toggle span::after, -.toggle span::before { - width: 100%; - height: 5px; - background-color: black; - transition: all 0.3s; - backface-visibility: hidden; - border-radius: 2px; -} - -/* on activation */ -.toggle.on span { - background-color: transparent; -} - -.toggle.on span::before { - background-color: white; - transform: rotate(45deg) translate(5px, 5px); -} - -.toggle.on span::after { - background-color: white; - transform: rotate(-45deg) translate(7px, -8px); -} - .app-loading { width: 100%; height: 300px; @@ -184,7 +80,7 @@ h1 span { } } -.story-grid-item h2 { +.story-grid-item h3 { font-size: 16px; text-align: center; height: 100px; @@ -261,3 +157,20 @@ h1 span { } } } + +.topbar-wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.sticky-header { + position: sticky; + top: 0; + z-index: 1; +} + +.logo-wrapper { + line-height: 0; + padding: 16px 0; +} diff --git a/app/assets/stylesheets/base/colors.scss b/app/assets/stylesheets/base/colors.scss index 0e0f776a1..7cc03479b 100644 --- a/app/assets/stylesheets/base/colors.scss +++ b/app/assets/stylesheets/base/colors.scss @@ -1,6 +1,15 @@ :root { --white: #ffffff; - --rgbBlack: 0, 0, 0; + --rgb-black: 0, 0, 0; + --brand-primary: #2cc7a4; + --brand-primary-dark: #108167; + --brand-secondary: #1e1e1e; + --grey-light: #e8e8e8; + --grey-dark: #9c9c9c; + + --meta-color: var(--brand-primary); + --title-color: var(--brand-secondary); + --border-color: var(--grey-light); --malibu-gray9: #9c9c9c; --torch-red: #ff0033; --lime-green: #4bb543; diff --git a/app/assets/stylesheets/base/normalize.scss b/app/assets/stylesheets/base/normalize.scss new file mode 100644 index 000000000..59db9346d --- /dev/null +++ b/app/assets/stylesheets/base/normalize.scss @@ -0,0 +1,343 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss new file mode 100644 index 000000000..3e8414ce1 --- /dev/null +++ b/app/assets/stylesheets/base/typography.scss @@ -0,0 +1,54 @@ +:root { + --base-smallest: 1.2rem; + --base-smaller: 1.4rem; + --base-regular: 1.3rem; + --base-small: 1.5rem; + --base: 1.6rem; + --base-medium: 1.8rem; + --base-large: 2rem; + --base-larger: 2.4rem; + --medium: 2.6rem; + --large: 3.2rem; + --jumbo: 5.4rem; + + --regular: 400; + --semi-bold: 600; + --bold: 700; +} + +a { + text-decoration: none; + color: inherit; +} + +html { + font-size: 62.5%; +} + +body { + font-family: var(--content-font); + font-weight: var(--regular); + font-size: var(--base); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; +} +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol { + margin: 0; + padding: 0; + font-family: var(--content-font); +} + +p, +li { + font-size: var(--base); +} diff --git a/app/assets/stylesheets/base/z-index.scss b/app/assets/stylesheets/base/z-index.scss index 412433a78..9ec4e2b1f 100644 --- a/app/assets/stylesheets/base/z-index.scss +++ b/app/assets/stylesheets/base/z-index.scss @@ -1,4 +1,8 @@ :root { - --z-level-1: 100; - --modal: var(--z-level-1); + --zlevel-1: -1; + --zlevel0: 1; + --zlevel1: 2; + --zlevel2: 3; + --zlevel3: 4; + --zlevel100: 100; } diff --git a/app/assets/stylesheets/modal.scss b/app/assets/stylesheets/modal.scss index 46bdf35b3..da392fd7e 100644 --- a/app/assets/stylesheets/modal.scss +++ b/app/assets/stylesheets/modal.scss @@ -12,8 +12,8 @@ left: 0; right: 0; bottom: 0; - z-index: var(--modal); - background: rgba(var(--rgbBlack), 0.5); + background: rgba(var(--rgb-black), 0.5); + z-index: var( --zlevel3); } .modal-content { diff --git a/app/client/app.js b/app/client/app.js index e3056f988..f8af58baa 100644 --- a/app/client/app.js +++ b/app/client/app.js @@ -1,9 +1,9 @@ /* eslint-disable global-require */ -import wretch from "wretch"; import { startApp } from "@quintype/framework/client/start"; +import wretch from "wretch"; + import { renderApplication, preRenderApplication } from "./render"; import { REDUCERS } from "../isomorphic/components/store/reducers"; - import "../../app/assets/stylesheets/app.scss"; const opts = { diff --git a/app/client/render.js b/app/client/render.js index 762435d39..a77de85e8 100644 --- a/app/client/render.js +++ b/app/client/render.js @@ -3,8 +3,9 @@ import get from "lodash/get"; import { pickComponent } from "../isomorphic/pick-component"; import { BreakingNewsView } from "../isomorphic/components/breaking-news-view"; -import { Header } from "../isomorphic/components/header"; import { Footer } from "../isomorphic/components/layouts/footer"; +import { NavbarSearch } from "../isomorphic/components/header/navbar-search"; +import { NavBar } from "../isomorphic/components/header/nav-bar"; export function preRenderApplication(store) { const hydrate = { hydrate: !global.qtLoadedFromShell }; @@ -16,7 +17,8 @@ export function preRenderApplication(store) { updateInterval: breakingNewsInterval * 1000 }; - renderComponent(Header, "header", store, hydrate); + renderComponent(NavbarSearch, "search-bar", store, hydrate); + renderComponent(NavBar, "nav-bar", store, hydrate); breakingNewsConfig.is_enable && renderBreakingNews("breaking-news-container", store, BreakingNewsView, breakingNewsbaseProps); renderComponent(Footer, "footer", store, hydrate); diff --git a/app/isomorphic/components/atoms/hamburger-menu/hamburger-menu.m.css b/app/isomorphic/components/atoms/hamburger-menu/hamburger-menu.m.css new file mode 100644 index 000000000..9553ca087 --- /dev/null +++ b/app/isomorphic/components/atoms/hamburger-menu/hamburger-menu.m.css @@ -0,0 +1,37 @@ +.hamburger { + background-color: transparent; + border: 0; + box-shadow: none; + cursor: pointer; + padding: 0; + margin: 12px 0; +} + +.hamburger:focus { + outline: none; +} + +.line { + background-color: var(--brand-secondary); + display: block; + height: 3px; + width: 22px; + transition: all 0.1s ease-in; + border-radius: 2px; +} + +.line:nth-child(2) { + margin: 4px 0; +} + +.hamburger.is-open span:nth-child(1) { + transform: translateY(4px) rotate(45deg); +} + +.hamburger.is-open span:nth-child(2) { + opacity: 0; +} + +.hamburger.is-open span:nth-child(3) { + transform: translateY(-10px) rotate(-45deg); +} diff --git a/app/isomorphic/components/atoms/hamburger-menu/index.js b/app/isomorphic/components/atoms/hamburger-menu/index.js new file mode 100644 index 000000000..f2c1b5c49 --- /dev/null +++ b/app/isomorphic/components/atoms/hamburger-menu/index.js @@ -0,0 +1,22 @@ +import React from "react"; +import PT from "prop-types"; + +import "./hamburger-menu.m.css"; + +export const HamburgerMenu = ({ onMenuToggle, isMegaMenuOpen }) => ( + +); + +HamburgerMenu.propTypes = { + onMenuToggle: PT.func, + isMegaMenuOpen: PT.bool +}; + +export default HamburgerMenu; diff --git a/app/isomorphic/components/atoms/icons/arrow-down.svg b/app/isomorphic/components/atoms/icons/arrow-down.svg new file mode 100644 index 000000000..f0dc531a8 --- /dev/null +++ b/app/isomorphic/components/atoms/icons/arrow-down.svg @@ -0,0 +1 @@ + diff --git a/app/isomorphic/components/atoms/icons/google.js b/app/isomorphic/components/atoms/icons/google.js index ea5d4f0b5..d0f9ae638 100644 --- a/app/isomorphic/components/atoms/icons/google.js +++ b/app/isomorphic/components/atoms/icons/google.js @@ -1,5 +1,5 @@ import React from "react"; -import { number } from "prop-types"; +import PT from "prop-types"; export const Google = ({ width = 13, height = 13 }) => { return ( @@ -25,6 +25,6 @@ export const Google = ({ width = 13, height = 13 }) => { }; Google.propTypes = { - width: number, - height: number + width: PT.number, + height: PT.number }; diff --git a/app/isomorphic/components/breaking-news-view.js b/app/isomorphic/components/breaking-news-view.js index d53a62305..ce8a6e56a 100644 --- a/app/isomorphic/components/breaking-news-view.js +++ b/app/isomorphic/components/breaking-news-view.js @@ -49,7 +49,7 @@ export const BreakingNewsViewBase = ({ breakingNews = [], breakingNewsConfig = { } return ( -
+
BREAKING NEWS
{renderBreakingNewsMarquee(breakingNewsItem, breakingNewsConfig)} diff --git a/app/isomorphic/components/breaking-news.m.css b/app/isomorphic/components/breaking-news.m.css index ea2e8d433..4464065b9 100644 --- a/app/isomorphic/components/breaking-news.m.css +++ b/app/isomorphic/components/breaking-news.m.css @@ -20,14 +20,13 @@ background-color: white; display: inline-flex; justify-content: center; - padding: 4px; align-items: center; margin-right: 14px; font-weight: bold; flex-shrink: 0; @media screen and (min-width: 768px) { font-size: 16px; - padding: 4px 16px; + padding: 4px 0; } } diff --git a/app/isomorphic/components/collection-templates/four-col-grid/index.js b/app/isomorphic/components/collection-templates/four-col-grid/index.js index f8cefd39e..d917beed2 100644 --- a/app/isomorphic/components/collection-templates/four-col-grid/index.js +++ b/app/isomorphic/components/collection-templates/four-col-grid/index.js @@ -8,7 +8,7 @@ import "./four-col-grid.m.css"; export function FourColGrid({ collection, stories }) { return (
-

{collection.name}

+

{collection.name}

); diff --git a/app/isomorphic/components/header/app-logo/app-logo.m.css b/app/isomorphic/components/header/app-logo/app-logo.m.css new file mode 100644 index 000000000..61c2b626d --- /dev/null +++ b/app/isomorphic/components/header/app-logo/app-logo.m.css @@ -0,0 +1,4 @@ +.publisher-logo { + height: 66px; + max-width: 100%; +} diff --git a/app/isomorphic/components/header/app-logo/index.js b/app/isomorphic/components/header/app-logo/index.js index ac959855b..25541e429 100644 --- a/app/isomorphic/components/header/app-logo/index.js +++ b/app/isomorphic/components/header/app-logo/index.js @@ -1,26 +1,22 @@ import React from "react"; import { Link } from "@quintype/components"; -import assetify from "@quintype/framework/assetify"; -import "./styles.m.css"; +import "./app-logo.m.css"; -import logo from "./publisher-logo.png"; - -function AppLogo() { - return ( -
- - Logo - -
- ); -} +const AppLogo = () => ( +

+ + Logo + +

+); export { AppLogo }; diff --git a/app/isomorphic/components/header/app-logo/publisher-logo.png b/app/isomorphic/components/header/app-logo/publisher-logo.png deleted file mode 100644 index 60e957fc2..000000000 Binary files a/app/isomorphic/components/header/app-logo/publisher-logo.png and /dev/null differ diff --git a/app/isomorphic/components/header/app-logo/styles.m.css b/app/isomorphic/components/header/app-logo/styles.m.css deleted file mode 100644 index 927adeb25..000000000 --- a/app/isomorphic/components/header/app-logo/styles.m.css +++ /dev/null @@ -1,3 +0,0 @@ -.publisher-logo { - height: 60px; -} diff --git a/app/isomorphic/components/header/header.m.css b/app/isomorphic/components/header/header.m.css deleted file mode 100644 index 7fbf62808..000000000 --- a/app/isomorphic/components/header/header.m.css +++ /dev/null @@ -1,11 +0,0 @@ -.container { - display: flex; - justify-content: space-between; - padding: 10px 0; - background-color: #fff; - margin-bottom: 10px; -} - -.blue { - background: blue; -} diff --git a/app/isomorphic/components/header/helper-components.js b/app/isomorphic/components/header/helper-components.js deleted file mode 100644 index 5563c4671..000000000 --- a/app/isomorphic/components/header/helper-components.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import PT from "prop-types"; -import { Link } from "@quintype/components"; - -function MenuItem(props) { - // TODO: Add submenu support - return props.item.isExternalLink ? ( - - {props.item.title} - - ) : ( - {props.item.title} - ); -} - -MenuItem.propTypes = { - item: PT.shape({ - isExternalLink: PT.bool, - completeUrl: PT.string, - title: PT.string - }) -}; - -export { MenuItem }; diff --git a/app/isomorphic/components/header/index.js b/app/isomorphic/components/header/index.js index 9b4e62271..f0fa7a420 100644 --- a/app/isomorphic/components/header/index.js +++ b/app/isomorphic/components/header/index.js @@ -1,26 +1,9 @@ import React from "react"; -import get from "lodash/get"; -import { connect } from "react-redux"; -import { NavBar } from "./nav-bar"; - -import "./header.m.css"; +import { TopBar } from "./top-bar"; // Common wrapper for navigation. We could add OffcanvasMenu, Navbar etc components here. -class HeaderBase extends React.Component { - render() { - return ( -
- -
- ); - } -} -const mapStateToProps = state => ({ - menu: get(state, ["qt", "data", "navigationMenu"], []), - enableLogin: get(state, ["qt", "config", "publisher-attributes", "enableLogin"], false), - isLoginOpen: get(state, ["isLoginOpen"], false) -}); +const Header = () => ; -export const Header = connect(mapStateToProps, () => ({}))(HeaderBase); +export { Header }; diff --git a/app/isomorphic/components/header/menu-item/index.js b/app/isomorphic/components/header/menu-item/index.js new file mode 100644 index 000000000..8d3cf58d1 --- /dev/null +++ b/app/isomorphic/components/header/menu-item/index.js @@ -0,0 +1,37 @@ +import React from "react"; +import PT from "prop-types"; +import { Link } from "@quintype/components"; + +import "./menu-item.m.css"; + +const MenuItem = ({ item, toggleHandler }) => { + if (item["item-type"] === "placeholder") { + return {item.title}; + } else if (item["item-type"] === "link") { + return ( + + {item.title} + + ); + } else { + return ( + + {item.title} + + ); + } +}; + +MenuItem.propTypes = { + item: PT.object, + showIcon: PT.bool +}; + +export { MenuItem }; diff --git a/app/isomorphic/components/header/menu-item/menu-item.m.css b/app/isomorphic/components/header/menu-item/menu-item.m.css new file mode 100644 index 000000000..fd6f499a0 --- /dev/null +++ b/app/isomorphic/components/header/menu-item/menu-item.m.css @@ -0,0 +1,18 @@ +.menu-link { + padding: 14px 6px 14px 6px; + display: flex; + align-items: center; + color: var(--brand-secondary); +} + +.menu-link:hover { + color: var(--rgb-black); +} + +.arrow-down { + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 8px solid var(--brand-secondary); + margin: 4px 4px 0; + cursor: pointer; +} diff --git a/app/isomorphic/components/header/nav-bar/__snapshots__/index.test.js.snap b/app/isomorphic/components/header/nav-bar/__snapshots__/index.test.js.snap index 67df6111d..1996c6b70 100644 --- a/app/isomorphic/components/header/nav-bar/__snapshots__/index.test.js.snap +++ b/app/isomorphic/components/header/nav-bar/__snapshots__/index.test.js.snap @@ -1,119 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Navbar renders the navbar when menu.default is a valid array 1`] = ` - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- - -`; +exports[`Navbar renders the navbar when menu.default is a valid array 1`] = `undefined`; -exports[`Navbar renders the navbar when menu.default is empty array 1`] = ` - - -
    -
  • - -
    • -
- - -`; - -exports[`Navbar renders the navbar with default vaules 1`] = ` - - -
    -
  • - -
    • -
- - -`; +exports[`Navbar renders the navbar when menu.default is empty array 1`] = `undefined`; diff --git a/app/isomorphic/components/header/nav-bar/index.js b/app/isomorphic/components/header/nav-bar/index.js index d75bd6403..d2d64b166 100644 --- a/app/isomorphic/components/header/nav-bar/index.js +++ b/app/isomorphic/components/header/nav-bar/index.js @@ -1,23 +1,50 @@ -import React, { useState, useEffect, Suspense } from "react"; +import React, { Fragment, useEffect, useState, Suspense, lazy } from "react"; import { useDispatch, useSelector } from "react-redux"; import get from "lodash/get"; -import { object, bool } from "prop-types"; +import assetify from "@quintype/framework/assetify"; -import { MEMBER_UPDATED } from "../../store/actions"; -import { NavbarSearch } from "../navbar-search"; -import { MenuItem } from "../helper-components"; -import { AppLogo } from "../app-logo"; +import { OPEN_HAMBURGER_MENU, OPEN_SEARCHBAR, MEMBER_UPDATED } from "../../store/actions"; +import { MenuItem } from "../menu-item"; +import HamburgerMenu from "../../atoms/hamburger-menu"; import MessageWrapper from "../../molecules/forms/message-wrapper"; -import { Modal } from "../../login/Modal"; +import { Modal } from "../../login/modal"; +import UserIcon from "../../../../assets/images/user-icon.svg"; +import User from "../../../../assets/images/user.svg"; -import "./styles.m.css"; +import "./navbar.m.css"; -const NavBar = ({ menu, enableLogin }) => { +const NavBar = () => { // Import account modal dynamically - const AccountModal = React.lazy(() => import("../../login/AccountModal")); + const AccountModal = lazy(() => import("../../login/AccountModal")); const [showAccountModal, setShowAccountModal] = useState(false); const [message, setMessage] = useState(null); const dispatch = useDispatch(); + const [showUserHandler, setUserHandler] = useState(false); + const enableLogin = useSelector(state => get(state, ["qt", "config", "publisher-attributes", "enableLogin"], true)); + const isHamburgerMenuOpen = useSelector(state => get(state, ["isHamburgerMenuOpen"], false)); + const menu = useSelector(state => get(state, ["qt", "data", "navigationMenu", "homeMenu"], [])); + const hamburgerMenu = useSelector(state => get(state, ["qt", "data", "navigationMenu", "hamburgerMenu"], [])); + + const displayStyle = isHamburgerMenuOpen ? "flex" : "none"; + + const toggleHandler = () => { + dispatch({ + type: OPEN_HAMBURGER_MENU, + isHamburgerMenuOpen: !isHamburgerMenuOpen + }); + dispatch({ + type: OPEN_SEARCHBAR, + isSearchBarOpen: false + }); + }; + + const userAccountHandler = () => { + setUserHandler(!showUserHandler); + dispatch({ + type: OPEN_SEARCHBAR, + isSearchBarOpen: false + }); + }; const getCurrentUser = async () => { // Import current user function only when this function is called @@ -42,10 +69,65 @@ const NavBar = ({ menu, enableLogin }) => { }) .finally(() => { setShowAccountModal(false); + setUserHandler(false); }); }; + const userBtnClick = () => { + setShowAccountModal(true); + dispatch({ + type: OPEN_SEARCHBAR, + isSearchBarOpen: false + }); + }; + + const getNavbarMenu = menu => { + return ( +
    + {menu.length > 0 && + menu.map(item => { + return ( +
  • + + dispatch({ + type: OPEN_SEARCHBAR, + isSearchBarOpen: false + }) + } + /> +
    • + ); + })} +
+ ); + }; + + const getDropdownList = () => { + if (!isHamburgerMenuOpen) { + return null; + } + return ( + +
toggleHandler()}>
+
    + toggleHandler()} isMegaMenuOpen={isHamburgerMenuOpen} /> + {hamburgerMenu.length > 0 && + hamburgerMenu.map(item => { + return ( +
  • + toggleHandler()} /> +
    • + ); + })} +
+ + ); + }; + const member = useSelector(state => get(state, ["member"], null)); + const imageUrl = member && member["avatar-url"] ? member["avatar-url"] : assetify(User); useEffect(() => { getCurrentUser(); @@ -65,26 +147,47 @@ const NavBar = ({ menu, enableLogin }) => { }, []); return ( - - -
    - {get(menu, ["default"], []).map((item, index) => { - return ( -
  • - -
    • - ); - })} - {enableLogin && ( -
  • +
    • +
+ ) : ( + )} {message && ( setMessage(null)}> )} - - - + +
); }; -NavBar.propTypes = { - menu: object, - enableLogin: bool, - isLoginOpen: bool -}; - export { NavBar }; diff --git a/app/isomorphic/components/header/nav-bar/navbar.m.css b/app/isomorphic/components/header/nav-bar/navbar.m.css new file mode 100644 index 000000000..111e3668d --- /dev/null +++ b/app/isomorphic/components/header/nav-bar/navbar.m.css @@ -0,0 +1,126 @@ +.navbar { + list-style-type: none; + margin: 0 12px; + display: flex; + overflow: auto; + font-family: var(--title-font); +} + +.main-wrapper { + background-color: var(--brand-primary); + position: relative; + box-shadow: -1px 12px 13px -11px rgba(var(--rgb-black), 0.42); + margin-bottom: 16px; +} + +.wrapper { + display: flex; + justify-content: space-between; + align-items: center; + height: 42px; + position: relative; +} + +.toggle-btn { + position: relative; +} + +.dropdown { + display: flex; + line-height: 0; + flex-shrink: 0; + align-items: center; + margin-right: 8px; +} + +.dropdown-content { + position: absolute; + background-color: var(--white); + min-width: 220px; + box-shadow: 0px 8px 16px 0px rgba(var(--rgb-black), 0.2); + padding: 12px 16px; + z-index: var( --zlevel2); + top: 0; + display: flex; + flex-direction: column; + max-height: 100vh; + overflow: scroll; + + :global .hamburger-menu { + align-self: flex-end; + } + + :global .menu-link { + padding: 16px 0; + margin-bottom: 12px; + width: 100%; + } + + :global .menu-link:last-child { + margin-bottom: 0px; + } + + :global .menu-link:hover { + color: var(--brand-primary-dark); + } +} + +.dropdown-menu { + padding: 12px; +} + +.navbar::-webkit-scrollbar { + width: 0px; + height: 0px; + z-index: var(--zlevel3); +} + +.navbar::-webkit-scrollbar-thumb { + background: var(--brand-primary); + border-radius: 0px; +} + +.overlay { + left: 0; + right: 0; + background-color: var(--brand-secondary); + width: 100vw; + height: 100vh; + top: 0; + position: fixed; + z-index: var(--zlevel1); + opacity: 0.4; +} + +.user-profile { + flex-shrink: 0; +} + +.user-btn { + background-color: transparent; + border: none; + padding: 0; +} + +.member-img { + height: 24px; + width: 24px; + border-radius: 50%; + cursor: pointer; + object-fit: cover; +} + +.user-account { + right: 0; + top: 42px; + margin-right: 16px; +} + +.user-account-item { + cursor: pointer; + padding: 8px 0; +} + +.user-account-item:hover { + color: var(--brand-primary-dark); +} diff --git a/app/isomorphic/components/header/nav-bar/styles.m.css b/app/isomorphic/components/header/nav-bar/styles.m.css deleted file mode 100644 index 645f6c613..000000000 --- a/app/isomorphic/components/header/nav-bar/styles.m.css +++ /dev/null @@ -1,15 +0,0 @@ -.navbar { - list-style-type: none; - margin: 0; - padding: 0 30px; - display: flex; -} -.menu-item { - cursor: pointer; - padding: 12px; -} -@media only screen and (max-width: 768px) { - .desktop-view { - display: none; - } -} diff --git a/app/isomorphic/components/header/navbar-search/index.js b/app/isomorphic/components/header/navbar-search/index.js index 545661a7d..3d1ca9ad4 100644 --- a/app/isomorphic/components/header/navbar-search/index.js +++ b/app/isomorphic/components/header/navbar-search/index.js @@ -1,11 +1,14 @@ import React from "react"; import { SearchBox } from "@quintype/components"; +import { useDispatch, useSelector } from "react-redux"; +import get from "lodash/get"; -import "./styles.m.css"; - +import { OPEN_SEARCHBAR } from "../../store/actions"; import { Search } from "../../atoms/icons/search"; import { CloseIcon } from "../../atoms/icons/close-icon"; +import "./navbar-search.m.css"; + function DrawForm({ children }) { return [