Core Organism Component: Footer #108
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 29, 2018
arcticicestudio
commented
It is required to implement the utility function to get Git version information during build time. References: https://semver.org https://www.npmjs.com/package/semver GH-106
The function converts the output from the Git "describe --always" command (1) to a SemVer (2) compatible version. If the passed string ) not a valid SemVer version `null` will be returned instead of the object that contains detailed information about the passed string. References: (1) https://git-scm.com/docs/git-describe (2) https://semver.org GH-106
These tests have been disabled because they'll be covered by E2E tests with Cypress later on. They were also skipped due to problems with mocking transitive modules and components. GH-106
Wrapped the social media URLs of the project `links` data object into a `organization` object for a better logical distinction with the `community` object. GH-106
This includes the official logo of Arctic Ice Studio, more UI icons as well as several social media & community sites and services: - Discord (1) - GitHub (2) - Keybase (3) - Reddit (4) - Slack (5) - Spectrum (6) - Twitter (7) References: (1) https://discordapp.com (2) https://github.com (3) https://keybase.io (4) https://reddit.com (5) https://slack.com (6) https://spectrum.chat (7) https://twitter.com https://akveo.github.io/eva-icons https://simpleicons.org Associated epic: GH-74 GH-106
This is not necessary to support the Open Graph Protocol metadata and can lead to problems with other specifications. GH-106`
A SVG vector graphic divider component consisting of three overlapping waves that is placed as last child within the last section/component of a page to render the wave as divider for the footer (rendered through the `Baselayout` component). GH-106
It includes all links and category headings that'll be rendered as sitemap in the footer. GH-106
It represents the HTML `<footer>` element and is an essential part of Nord Docs providing a sitemap, the Arctic Ice Studio organization branding logo and caption, networking & social media links as well as the copyright paragraph including version information. > Layout The footer uses a CSS flexbox (1) and grid (2) layout consisting of two container components with the maximum of flexible space between both. The left-side container contains the branding and link components while the right-side container contains the sitemap like documented in the sections below. >> Sitemap To allow users to simply navigate around the site, next to the main header, the component provides the quickly accessible sitemap. This container uses the flexbox layout where each base route of the site is added as one category represented as a column. Each of these consists of an heading, the name of the route, and the corresponding sub-routes. As of now the following base routes are included: - "Nord" — links to `/` and includes all sections of the main landing page. - "Ports" — links to `/ports` and includes all sections of the Nord port projects. - "Docs" — links to `/docs` and includes all sections of Nord's documentation. - "Blog" — links to `/blog` and includes all sections of Nord's blog. - "Community" — links to `/community` and includes all sections of the Nord community channels. >> Organization Branding To represent Arctic Ice Studio's organization branding, the left-sided container contains the logo with the caption that links to the organization website. It's placed in one line with the category heading of the sitemap like documented in the section above. >>> Social Media & Networking Links The left-side container also contains the social media & networking links where each link is represented through the icon of the corresponding site/service. They are placed in one line with a flexible layout to adust based on the available width. >> Version Information The last elements of the left-side container is a paragraph providing version information about the site like the currently running version number (with "commits ahead" metadata when required) and the build & deployment date. It also has additional Git metadata added as `data-` attributes and `<time>` HTML element. > Responsive Design For reduced width views (responsive design) the footer adjusts several styles and composed components. For really small view ports the grid layout switches to a flexbox layout. References: (1) https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox (2) https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids Associated epic: GH-63 GH-106
All pages that are wrapped in the `BaseLayout` component will now render the new `Footer` core organism component. The last component/element of each page must render the SVG divider vector graphic component (`WaveFooter`) to ensure a smooth transition to the footer. GH-106
Codecov Report
@@ Coverage Diff @@
## develop #108 +/- ##
===========================================
- Coverage 76.24% 73.82% -2.43%
===========================================
Files 94 122 +28
Lines 362 531 +169
Branches 37 56 +19
===========================================
+ Hits 276 392 +116
- Misses 86 139 +53
Continue to review full report at Codecov.
|
svengreb
approved these changes
Dec 29, 2018
arcticicestudio
deleted the
feature/gh-106-core-organism-component-footer
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.