Core Organism Component: Header #75
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
arcticicestudio
commented
Dec 13, 2018
arcticicestudio
commented
- react-pose (1) - subscribe-ui-event (2) References: (1) https://www.npmjs.com/package/react-pose (2) https://www.npmjs.com/package/subscribe-ui-event Associated epic: GH-63 GH-64
The drop down of the navigation link slide menu will start right below the header and take up the available height and width to cover the full screen. The added package's purpose provides methods to remove all scroll listeners from the underlying content (body) as soon as the animation starts. This prevents users from scrolling the content below the menu when the menu itself overflows the Y-axis and shows a scroll bar. Associated epics: GH-63, GH-2 GH-64
This commit adds some icons of the awesome "Eva Icons" (1) project and the official Nord logo as SVG components. They are loaded with the SVGR webpack loader added in #72. References: (1) https://akveo.github.io/eva-icons GH-64
Since Nord Docs makes use of the responsive design best practice to set breakpoints based on the content, this commit updates the currently used breakpoint upper and lower boundary values to fit the compnents that'll implement for this feature. GH-64
To allow aliased imports in tests with Jest, ESLint must be aware of the "modulePath" field of the "jest.config.js" file. The installed ESLint plugin allows to define the path to the config file so ESLint can resolve used paths in tests. This is used for test util functions. Associated epic: GH-38 GH-64
It renders the passed components with the global theme and modes provided through the `Root` core container component. This is necessary for all styled components that make use of any theme properties either simple values or functions. Associated epic: 38 GH-64
It sets the basic maximum width for the wrapped content when the width is similar to a desktop screen or larger. It also ensures that the content spreads to the available width and allows to dynamically align the content in the center. GH-64
Note that the target routes are not implemented yet. This is just a preparatory action. GH-64
This commit implements the `ms` shorthand function for polished's (1) `modularScale` helper with pre-configured base and ratio values. References: (1) https://polished.js.org Associated epic: #2 GH-64
The function simplifies and uniforms the management of the CSS `z-index` for all components independent of the position in the tree without the risk of number collisions. GH-64
The currently used version of "Gatsby Link" (1) uses the `innerRef` prop to allow `ref` access to the underlying DOM element (necessary for animations). In order to wrap animated components the `ref` is necessary and is therefore now forwarded. The legacy behavior of "Gatsby Link" is about to change in the future to the `React.forwardRef` API. See gatsbyjs/gatsby#9892 for more details. References: (1) https://www.gatsbyjs.org/docs/gatsby-link Associated epic: GH-69 GH-64
To simplify the usage with animations all motion speed values have been changed from seconds unit to milliseconds. GH-64
This commit implements the various local styled atom components the `Header` organism component consists of. This includes the main HTML `header` element with flexbox layout that contains two containers. The first left-sided container is the branding logo and caption while the second one provides the navigation link list and global theme mode switch button. The navigation link list will be replaced with a slide menu when reaching the CSS breakpoint. This menu will slide down starting right below the `header` and provides the navigation links for shrinked width views. The global theme mode switch consists of the `MoonIcon` and `SunIcon` components which are animated to "rise up and go down" when toggled. All components will adhere to maximum content width based on the `Content` core container component. Associated epic: GH-63 GH-64
> Layout The header uses a CSS flexbox layout consisting of two container components with the maximum of flexible space between both. The containers contain the branding component and the navigation like documented in the sections below. > Navigation To allows users to simply navigate around the site, the component provides the quickly accessible navigation. It is placed in the right-sided container. As of now the following link items are included: - "Ports" - links to `/ports`, the landing page for all Nord port projects. - "Docs" - links to `/docs`, the landing page for Nord's documentation. - "Blog" - links to `/blog`, the landing page for Nord's blog. - "Community" - links to `/community`, the landing page of the Nord community channels. > Branding To represent Nord's branding, the left-sided container consists of the Nord logo and a caption/label. It links to Nord Docs landing page to allow quick access to the root (`/`) page. > Theme Mode Switcher The user action component mentioned in the introduction paragraph above allows to toggle between the available global theme modes. Both modes are represented through icons where a sun is used for "bright snow flurry" and a moon for "dark night frost" mode. They are implemented using the awesome "React Pose" (1) project to animate the "rising up" and "going down" sequences. The icons fly out and in" within the bounds f the component that takes the form of a button. Like documented in the Iconography design concept (2), the awesome "Eva Icons" (3) project will is used where the "moon" and "sun" icons represent the both available theme modes. > Responsive Design For reduced width views (responsive design) the header adjusts several styles and composed components. >> Slide Menu The main navigation link list will be hidden and replaced by the user action element (button) that toggles an animated slide down menu containing the navigation links. The drop down will start right below the header and takes up the available height and width to cover the full screen. As soon as the animation starts all scroll events will be removed from the underlying content (body) using the "body-scroll-lock" (4) project. This prevents users from scrolling the content below the menu when the menu itself overflows the Y-axis and shows a scroll bar. >> Behavior To allow quick access while also being inconspicuous, the component is "sticky" at the top of the site, but will collapse as soon as the user scrolls down. It'll only switch into expanded mode when at top of the site. In expanded mode, the height of the header is larger and the caption/label of the logo is visible. As soon as switching into collapsed mode the height decreases and the caption fades out with a smooth transition animation. To achieve the resizing animation based on the scroll position the "subscribe-ui-event" (5) project is used to listen to scroll events. It provides throttling by default, only calls `document.body.scrollTop` and `window.innerWidth` once and uses `requestAnimationFrame` for the best performance. References: (1) https://popmotion.io/pose (2) #74 (3) https://akveo.github.io/eva-icons (4) https://www.npmjs.com/package/body-scroll-lock (5) https://www.npmjs.com/package/subscribe-ui-event Associated epic: GH-63 GH-64
To prevent syntax errors for React components loaded via SVGR
("unexpected syntax token <") all SVG files must be mocked with the
`ReactComponent` named import. Also the "assets" import alias has been
removed to prevent path loading errors for SVG files.
GH-64
svengreb
approved these changes
Dec 13, 2018
arcticicestudio
deleted the
feature/gh-64-core-organism-component-header
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.