Implement style variants for core Header to match page

To match the core `Header` component to the style of the current page this commit implements a prop to configure the style variant. It can be passed to the `BaseLayout` component to make it configurable per page. GH-117
nordtheme · Feb 2, 2019 · 757a117 · 757a117
1 parent 354fa4f
commit 757a117
Show file tree

Hide file tree

Showing 16 changed files with 151 additions and 61 deletions.
diff --git a/src/components/containers/core/Page/Page.jsx b/src/components/containers/core/Page/Page.jsx
@@ -11,7 +11,19 @@ import styled from "styled-components";
 
 import { motion } from "styles/theme";
 
-import { baseBackgroundColor } from "../shared/styles";
+import {
+  baseBackgroundColor,
+  primaryBackgroundColor,
+  secondaryBackgroundColor,
+  tertiaryBackgroundColor
+} from "../shared/styles";
+
+const variants = {
+  base: baseBackgroundColor,
+  primary: primaryBackgroundColor,
+  secondary: secondaryBackgroundColor,
+  tertiary: tertiaryBackgroundColor
+};
 
 /**
  * A basic wrapper component for page content.
@@ -22,7 +34,7 @@ import { baseBackgroundColor } from "../shared/styles";
  * @since 0.3.0
  */
 const Page = styled.main`
-  background-color: ${baseBackgroundColor};
+  background-color: ${({ variant }) => variants[variant]};
   transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
 `;
 

diff --git a/src/components/layouts/core/BaseLayout/BaseLayout.jsx b/src/components/layouts/core/BaseLayout/BaseLayout.jsx
@@ -23,20 +23,25 @@ import SiteMetadata from "atoms/core/SiteMetadata";
  * @author Sven Greb <[email protected]>
  * @since 0.3.0
  */
-const BaseLayout = ({ children, pathName }) => (
+const BaseLayout = ({ children, headerVariant, pathName }) => (
   <Root>
     <Fragment>
       <SiteMetadata pathName={pathName} />
-      <Header />
-      <Page>{children}</Page>
+      <Header variant={headerVariant} />
+      <Page variant={headerVariant}>{children}</Page>
       <Footer />
     </Fragment>
   </Root>
 );
 
 BaseLayout.propTypes = {
   children: PropTypes.node.isRequired,
+  headerVariant: PropTypes.string,
   pathName: PropTypes.string.isRequired
 };
 
+BaseLayout.defaultProps = {
+  headerVariant: "base"
+};
+
 export default BaseLayout;
diff --git a/src/components/organisms/core/Header/Header.jsx b/src/components/organisms/core/Header/Header.jsx
@@ -45,26 +45,30 @@ import {
 } from "./styled";
 
 /**
- * Populates and renders the list of navigation links.
+ * The populated and rendered list of navigation links.
  *
  * @since 0.3.0
  */
-const renderNavListItems = navigationItems.map(({ title, url }) => (
-  <NavLink key={`${title}-${url}`} to={url}>
-    {title}
-  </NavLink>
-));
+const RenderedNavListItems = React.memo(props =>
+  navigationItems.map(({ title, url }) => (
+    <NavLink key={`${title}-${url}`} to={url} {...props}>
+      {title}
+    </NavLink>
+  ))
+); // eslint-disable-line function-paren-newline
 
 /**
- * Populates and renders the list of slide menu navigation links.
+ * The populateed and rendered list of slide menu navigation links.
  *
  * @since 0.3.0
  */
-const renderSlideMenuNavListItems = navigationItems.map(({ title, url }) => (
-  <SlideMenuNavLink key={`${title}-${url}`} initialPose={SLIDE_MENU_NAV_LINK_INITIAL_POSE} to={url}>
-    {title}
-  </SlideMenuNavLink>
-));
+const RenderedSlideMenuNavListItems = React.memo(props =>
+  navigationItems.map(({ title, url }) => (
+    <SlideMenuNavLink key={`${title}-${url}`} initialPose={SLIDE_MENU_NAV_LINK_INITIAL_POSE} to={url} {...props}>
+      {title}
+    </SlideMenuNavLink>
+  ))
+); // eslint-disable-line function-paren-newline
 
 /**
  * The header component that provides Nord's branding caption and logo, the main navigation and a button to toggle
@@ -97,13 +101,19 @@ export default class Header extends PureComponent {
     /**
      * The height from the top in pixels where the header will switch to pinned mode.
      */
-    pinStart: PropTypes.number
+    pinStart: PropTypes.number,
+
+    /**
+     * The name of the style variant.
+     */
+    variant: PropTypes.string
   };
 
   static defaultProps = {
     height: HEADER_HEIGHT,
     heightPinned: HEADER_HEIGHT_PINNED,
-    pinStart: 0
+    pinStart: 0,
+    variant: "base"
   };
 
   state = {
@@ -193,13 +203,19 @@ export default class Header extends PureComponent {
   };
 
   render() {
-    const { height, heightPinned } = this.props;
+    const { height, heightPinned, variant } = this.props;
     const { isSlideMenuOpen, isPinned } = this.state;
 
     return (
       <Fragment>
-        <TopContentPusher height={height} />
-        <StyledHeader height={height} heightPinned={heightPinned} isPinned={isPinned} isSlideMenuOpen={isSlideMenuOpen}>
+        <TopContentPusher height={height} variant={variant} />
+        <StyledHeader
+          height={height}
+          heightPinned={heightPinned}
+          isPinned={isPinned}
+          isSlideMenuOpen={isSlideMenuOpen}
+          variant={variant}
+        >
           <ContentBox centered>
             <LogoBannerBox>
               <A to={ROUTE_ROOT}>
@@ -208,13 +224,15 @@ export default class Header extends PureComponent {
               <LogoCaption isPinned={isPinned}>Nord</LogoCaption>
             </LogoBannerBox>
             <Nav>
-              <NavList>{renderNavListItems}</NavList>
-              <SlideMenuToggle onClick={this.handleSlideMenuToggle}>
+              <NavList>
+                <RenderedNavListItems variant={variant} />
+              </NavList>
+              <SlideMenuToggle onClick={this.handleSlideMenuToggle} variant={variant}>
                 <Menu />
               </SlideMenuToggle>
               <GlobalThemeMode>
                 {({ toggleThemeMode, mode }) => (
-                  <ThemeModeSwitch onClick={toggleThemeMode}>
+                  <ThemeModeSwitch onClick={toggleThemeMode} variant={variant}>
                     <PoseGroup preEnterPose={THEME_MODE_SWITCH_ICON_INITIAL_POSE}>
                       {mode === MODE_BRIGHT_SNOW_FLURRY ? (
                         <MoonIcon key="moon" />
@@ -232,8 +250,11 @@ export default class Header extends PureComponent {
             isOpen={isSlideMenuOpen}
             isPinned={isPinned}
             pose={isSlideMenuOpen ? SLIDE_MENU_NAV_LINK_OPEN_POSE : SLIDE_MENU_NAV_LINK_CLOSED_POSE}
+            variant={variant}
           >
-            <SlideMenuNavList>{renderSlideMenuNavListItems}</SlideMenuNavList>
+            <SlideMenuNavList>
+              <RenderedSlideMenuNavListItems variant={variant} />
+            </SlideMenuNavList>
           </SlideMenuBox>
         </StyledHeader>
       </Fragment>

diff --git a/src/components/organisms/core/Header/shared/styles.js b/src/components/organisms/core/Header/shared/styles.js
@@ -18,6 +18,20 @@ import { rgba } from "polished";
 
 import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
 
+import {
+  baseBackgroundColor,
+  primaryBackgroundColor,
+  secondaryBackgroundColor,
+  tertiaryBackgroundColor
+} from "../../../shared/styles";
+
+const backgroundColorVariants = {
+  base: baseBackgroundColor,
+  primary: primaryBackgroundColor,
+  secondary: secondaryBackgroundColor,
+  tertiary: tertiaryBackgroundColor
+};
+
 /**
  * The factor with which the branding logo is multiplied by the height of the header based on the pin mode.
  *
@@ -39,19 +53,28 @@ const HEADER_HEIGHT = 80;
  */
 const HEADER_HEIGHT_PINNED = 56;
 
-const backgroundColor = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
-  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
-});
-
-const linkBackgroundColorHover = themedMode({
-  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.4),
-  [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.8)
-});
+const linkBackgroundColorHoverVariants = {
+  base: themedMode({
+    [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.4),
+    [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.8)
+  }),
+  primary: themedMode({
+    [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.6),
+    [MODE_DARK_NIGHT_FROST]: colors.nord3
+  }),
+  secondary: themedMode({
+    [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.8),
+    [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.6)
+  }),
+  tertiary: themedMode({
+    [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord5, 0.75),
+    [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.5)
+  })
+};
 
 export {
-  backgroundColor,
-  linkBackgroundColorHover,
+  backgroundColorVariants,
+  linkBackgroundColorHoverVariants,
   HEADER_BRAND_LOGO_SHRINK_FACTOR,
   HEADER_HEIGHT,
   HEADER_HEIGHT_PINNED

diff --git a/src/components/organisms/core/Header/styled/Header.jsx b/src/components/organisms/core/Header/styled/Header.jsx
@@ -20,7 +20,7 @@ import {
   Z_INDEX_ELEMENTS
 } from "styles/theme";
 
-import { backgroundColor } from "../shared/styles";
+import { backgroundColorVariants } from "../shared/styles";
 
 const dropShadow = themedMode({
   [MODE_BRIGHT_SNOW_FLURRY]: `0 5px 10px 0 ${colors.shadow.minimal[MODE_BRIGHT_SNOW_FLURRY]}`,
@@ -42,7 +42,7 @@ const Header = styled.header`
   height: ${({ height, heightPinned, isPinned }) => (isPinned ? `${em(heightPinned)}` : `${em(height)}`)};
   width: 100%;
   z-index: ${zIndexFor(Z_INDEX_ELEMENTS.HEADER)};
-  background-color: ${backgroundColor};
+  background-color: ${({ variant }) => backgroundColorVariants[variant]};
   box-shadow: ${({ isPinned }) => isPinned && dropShadow};
   transition: height ${motion.speed.duration.transition.area.medium}ms ease-in-out,
     box-shadow ${motion.speed.duration.transition.area.medium}ms ease-in-out,

diff --git a/src/components/organisms/core/Header/styled/NavLink.jsx b/src/components/organisms/core/Header/styled/NavLink.jsx
@@ -12,7 +12,7 @@ import styled from "styled-components";
 import { A } from "atoms/core/HTMLElements";
 import { motion } from "styles/theme";
 
-import { linkBackgroundColorHover } from "../shared/styles";
+import { linkBackgroundColorHoverVariants } from "../shared/styles";
 
 /**
  * A navigation link.
@@ -29,7 +29,7 @@ const NavLink = styled(A)`
   &:active,
   &:focus,
   &:hover {
-    background-color: ${linkBackgroundColorHover};
+    background-color: ${({ variant }) => linkBackgroundColorHoverVariants[variant]};
   }
 `;
 

diff --git a/src/components/organisms/core/Header/styled/SlideMenuBox.jsx b/src/components/organisms/core/Header/styled/SlideMenuBox.jsx
@@ -5,7 +5,7 @@ import { em } from "polished";
 import { motion, zIndexFor, Z_INDEX_ELEMENTS } from "styles/theme";
 import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "organisms/core/Header";
 
-import { backgroundColor } from "../shared/styles";
+import { backgroundColorVariants } from "../shared/styles";
 import { slideMenuNavigationPoseConfig } from "./poseConfig";
 
 /**
@@ -19,7 +19,7 @@ const SlideMenuBox = styled(posed.div(slideMenuNavigationPoseConfig))`
   position: absolute;
   top: ${({ isPinned }) => (isPinned ? em(HEADER_HEIGHT_PINNED) : em(HEADER_HEIGHT))};
   width: 100%;
-  background-color: ${backgroundColor};
+  background-color: ${({ variant }) => backgroundColorVariants[variant]};
   text-align: center;
   z-index: ${zIndexFor(Z_INDEX_ELEMENTS.HEADER_COMPACT_SLIDE_MENU)};
   overflow-y: auto;

diff --git a/src/components/organisms/core/Header/styled/SlideMenuToggle.jsx b/src/components/organisms/core/Header/styled/SlideMenuToggle.jsx
@@ -11,7 +11,7 @@ import styled from "styled-components";
 
 import { motion, ms } from "styles/theme";
 
-import { linkBackgroundColorHover } from "../shared/styles";
+import { linkBackgroundColorHoverVariants } from "../shared/styles";
 
 /**
  * A button to toggle the navigation link slide menu.
@@ -36,7 +36,7 @@ const SlideMenuToggle = styled.button`
   }
 
   &:hover:not(:disabled) {
-    background-color: ${linkBackgroundColorHover};
+    background-color: ${({ variant }) => linkBackgroundColorHoverVariants[variant]};
   }
 
   > * {

diff --git a/src/components/organisms/core/Header/styled/ThemeModeSwitch.jsx b/src/components/organisms/core/Header/styled/ThemeModeSwitch.jsx
@@ -12,7 +12,7 @@ import { stripUnit } from "polished";
 
 import { motion, ms } from "styles/theme";
 
-import { linkBackgroundColorHover } from "../shared/styles";
+import { linkBackgroundColorHoverVariants } from "../shared/styles";
 
 /**
  * A button to toggle between the global theme modes.
@@ -41,7 +41,7 @@ const ThemeModeSwitch = styled.button`
   }
 
   &:hover:not(:disabled) {
-    background-color: ${linkBackgroundColorHover};
+    background-color: ${({ variant }) => linkBackgroundColorHoverVariants[variant]};
   }
 
   > * {

diff --git a/src/components/organisms/core/Header/styled/TopContentPusher.jsx b/src/components/organisms/core/Header/styled/TopContentPusher.jsx
@@ -10,6 +10,8 @@
 import styled from "styled-components";
 import { em } from "polished";
 
+import { backgroundColorVariants } from "../shared/styles";
+
 /**
  * A spacing container to prevent content from slipping under the header.
  * It inherits the dynamic size of the header through the `height` prop to match the expanded and collapsed states.
@@ -21,7 +23,7 @@ import { em } from "polished";
 const TopContentPusher = styled.div`
   height: ${({ height }) => em(height)};
   position: relative;
-  background-color: transparent;
+  background-color: ${({ variant }) => backgroundColorVariants[variant]};
 `;
 
 export default TopContentPusher;
diff --git a/src/components/organisms/shared/styles.js b/src/components/organisms/shared/styles.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Provides shared container component styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+
+import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const baseBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
+});
+
+const primaryBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.primary[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.primary[MODE_DARK_NIGHT_FROST]
+});
+
+const secondaryBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST]
+});
+
+const tertiaryBackgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.tertiary[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.tertiary[MODE_DARK_NIGHT_FROST]
+});
+
+export { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor, tertiaryBackgroundColor };
diff --git a/src/styles/theme/colors/background.js b/src/styles/theme/colors/background.js
@@ -32,7 +32,7 @@ const sectioningSecondary = {
  * @since 0.6.0
  */
 const tertiarySecondary = {
-  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.08, nord.nord5),
+  [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.08, nord.nord4),
   [MODE_DARK_NIGHT_FROST]: darken(0.045, nord.nord0)
 };