chore: Merge branch 'header/router' into dev

Author: mydearxym

components/Navigator/BriefView.js

@@ -21,7 +21,7 @@ import MainEntries from './MainEntries'
 
 const CommunityLogoHolder = `${ICON_CMD}/community_logo_holder.svg`
 
-const BriefView = ({ community }) => (
+const BriefView = ({ community, curRoute }) => (
   <Wrapper>
     <Popover
       placement="bottomLeft"
@@ -44,7 +44,7 @@ const BriefView = ({ community }) => (
     </Popover>
     <Breadcrumbs>
       <BetaLogo src={`${ICON_CMD}/beta.svg`} />
-      <MainEntries />
+      <MainEntries curRoute={curRoute} />
     </Breadcrumbs>
   </Wrapper>
 )

components/Navigator/DigestView.js

@@ -14,7 +14,7 @@ import {
 
 import MainEntries from './MainEntries'
 
-const DigestView = () => (
+const DigestView = ({ curRoute }) => (
   <Breadcrumbs>
     <Logo />
     <Popover
@@ -31,7 +31,7 @@ const DigestView = () => (
       <LogoText href="/home/posts">coderplanets</LogoText>
     </Popover>
     <BetaLogo src={`${ICON_CMD}/beta.svg`} />
-    <MainEntries />
+    <MainEntries curRoute={curRoute} />
   </Breadcrumbs>
 )
 

components/Navigator/MainEntries.js

@@ -8,14 +8,20 @@ import DiscussLinker from '@components/DiscussLinker'
 import { Wrapper, DotDivider, SiteLink } from './styles/main_entries'
 
 const splitMargin = '8px'
-const MainEntries = () => (
+
+const MainEntries = ({ curRoute: { mainPath } }) => (
   <Wrapper>
     <Link href="/home/posts" prefetch passHref>
-      <SiteLink>首页</SiteLink>
+      <SiteLink testid="header-home-link">首页</SiteLink>
     </Link>
     <DotDivider space={splitMargin} />
     <Link href="/communities" prefetch passHref>
-      <SiteLink>社区</SiteLink>
+      <SiteLink
+        active={mainPath === 'communities'}
+        testid="header-communities-link"
+      >
+        社区
+      </SiteLink>
     </Link>
     <DotDivider space={splitMargin} />
     <Popover

components/Navigator/index.js

@@ -24,15 +24,15 @@ const Navigator = ({ curCommunity, layout, curRoute }) => {
     R.contains(mainPath, [ROUTE.USER, ROUTE.COMMUNITIES]) ||
     R.contains(subPath, [ROUTE.POST, ROUTE.JOB, ROUTE.VIDEO, ROUTE.REPO])
   ) {
-    return <DigestView />
+    return <DigestView curRoute={curRoute} />
   }
 
   return (
     <React.Fragment>
       {layout === C11N.DIGEST ? (
-        <DigestView />
+        <DigestView curRoute={curRoute} />
       ) : (
-        <BriefView community={curCommunity} />
+        <BriefView community={curCommunity} curRoute={curRoute} />
       )}
     </React.Fragment>
   )

components/Navigator/styles/main_entries.js

@@ -13,8 +13,17 @@ export const Wrapper = styled.div`
 export const DotDivider = styled(DotDividerBase)`
   background-color: ${theme('banner.desc')};
 `
-export const SiteLink = styled.a`
+export const SiteLink = styled.a.attrs(props => ({
+  'data-testid': props.testid,
+}))`
   color: ${theme('banner.desc')};
+  background: ${({ active }) =>
+    active ? theme('banner.numberHoverBg') : 'transparent'};
+  padding: ${({ active }) => (active ? '5px 3px 3px 3px' : '0')};
+  border-bottom: ${({ active }) => (active ? '2px solid' : 'none')};
+  border-bottom-color: ${({ active }) =>
+    active ? theme('tabs.headerActive') : ''};
+
   cursor: pointer;
   &:hover {
     text-decoration: underline;

containers/Header/styles/header.js

@@ -29,7 +29,6 @@ export const InnerWrapper = styled.div`
 export const RouterWrapper = styled.div`
   ${cs.flexGrow('align-center')};
   height: 100%;
-  margin-top: 1px;
 `
 export const HeaderSearchIcon = styled(HeaderSearchSVG).attrs(props => ({
   'data-testid': props.testid,

cypress/integration/communities-page.spec.js

@@ -0,0 +1,25 @@
+//
+describe('communities page layout', () => {
+  // beforeEach(() => {
+  before(() => {
+    cy.visit('/communities')
+  })
+
+  it('basic layout', () => {
+    cy.id('header').should('be.visible')
+
+    cy.id('header-search').should('be.visible')
+    cy.id('header-search-icon').should('be.visible')
+
+    cy.id('sidebar').should('be.visible')
+
+    cy.id('communities-banner').should('be.visible')
+    cy.id('footer').should('be.visible')
+  })
+
+  it('communities link should be highlight', () => {
+    cy.id('header-communities-link')
+      .should('not.have.css', 'background', 'transparent')
+      .and('have.css', 'padding', '5px 3px 3px')
+  })
+})

cypress/integration/layout.spec.js renamed to cypress/integration/home-page.spec.js

@@ -1,11 +1,14 @@
-describe('basic layout', () => {
+describe('home page layout', () => {
   // beforeEach(() => {
   before(() => {
     cy.visit('/home/posts')
   })
 
   it('basic layout shoud be visible', () => {
     cy.id('header').should('be.visible')
+    cy.id('header-search').should('be.visible')
+    cy.id('header-search-icon').should('be.visible')
+
     cy.id('sidebar').should('be.visible')
 
     cy.id('community-banner').should('be.visible')
@@ -14,18 +17,10 @@ describe('basic layout', () => {
     cy.id('footer').should('be.visible')
   })
 
-  it('header content', () => {
-    cy.id('header-search').should('be.visible')
-    cy.id('header-search-icon').should('be.visible')
-  })
-
-  it('communities page', () => {
-    cy.visit('/communities')
-    cy.id('header-search').should('be.visible')
-    cy.id('header-search-icon').should('be.visible')
-
-    cy.id('communities-banner').should('be.visible')
-
-    cy.id('footer').should('be.visible')
+  it('home link should not be highlight', () => {
+    cy.id('header-home-link')
+      // .should('have.css', 'background')
+      // .should('not.have.css', 'border-bottom')
+      .and('not.have.css', 'padding', '5px 3px 3px 3px')
   })
 })