Merge branch 'release/0.8.0'

CHANGELOG.md

@@ -8,6 +8,34 @@
 
 <!-- lint disable no-duplicate-headings -->
 
+# 0.8.0
+
+![Release Date: 2019-02-03](https://img.shields.io/badge/Release_Date-2019--02--03-88c0d0.svg?style=flat-square&colorA=4c566a) [![Project Board](https://img.shields.io/badge/Project_Board-0.8.0-88c0d0.svg?style=flat-square&colorA=4c566a&logo=github&logoColor=eceff4)](https://github.com/arcticicestudio/nord-docs/projects/10) [![Milestone](https://img.shields.io/badge/Milestone-0.8.0-88c0d0.svg?style=flat-square&colorA=4c566a&logo=github&logoColor=eceff4)](https://github.com/arcticicestudio/nord-docs/milestone/8)
+
+This version mainly focused on the [sections of the docs page][gh-117] to represent Nord's documentation categories and their topics. The implementation was limited to the “landing” page components and style and currently doesn't include any documentation, the actual docs will be implemented and imported later on using the [GraphQL API and MDX][gh-24].
+
+## Features
+
+<p align="center"><img src="https://user-images.githubusercontent.com/7836623/48676311-39475300-eb65-11e8-9654-16c24c1c9a94.png" width="12%"/></p>
+
+The following issues are related to the [“Components” design concept][gh-63].
+
+**Community Page Sections** — #117 ⇄ #118 (⊶ a0b9f5bc)
+↠ Implemented all docs page sections including required changes to other components.
+All sections follow the [“Responsive Web” design concept][gh-52] to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.
+
+<p align="center"><img src="https://user-images.githubusercontent.com/7836623/52166394-eb2a0080-270c-11e9-9979-17aeee02043d.png"/></p>
+
+### Hero
+
+The first section is the “hero” of the docs page that renders a description about the page's purpose.
+
+### Contents Cards
+
+The 2nd section is about Nord's documentation contents where each category is represented as card rendered in a two-column grid layout. Each card contains a topic icon, colorized with a accent color from Nord's palettes and a short summary about the topic's links.
+
+As of now there are two cards for the categories “Getting Started” and “References” that provide links to the various topics.
+
 # 0.7.0
 
 ![Release Date: 2019-01-26](https://img.shields.io/badge/Release_Date-2019--01--26-88c0d0.svg?style=flat-square&colorA=4c566a) [![Project Board](https://img.shields.io/badge/Project_Board-0.7.0-88c0d0.svg?style=flat-square&colorA=4c566a&logo=github&logoColor=eceff4)](https://github.com/arcticicestudio/nord-docs/projects/9) [![Milestone](https://img.shields.io/badge/Milestone-0.7.0-88c0d0.svg?style=flat-square&colorA=4c566a&logo=github&logoColor=eceff4)](https://github.com/arcticicestudio/nord-docs/milestone/7)
@@ -941,6 +969,7 @@ Note that packages marked with an double exclamation mark `‼` have been affect
 [gh-110]: https://github.com/arcticicestudio/nord-docs/issues/110
 [gh-112]: https://github.com/arcticicestudio/nord-docs/issues/112
 [gh-115]: https://github.com/arcticicestudio/nord-docs/issues/112
+[gh-117]: https://github.com/arcticicestudio/nord-docs/issues/117
 [gh-arcland]: https://github.com/arcticicestudio/arctic-landscape
 [gh-arcocfrac]: https://www.npmjs.com/package/arctic-ocean-fractal
 [gh-axios]: https://github.com/axios/axios

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nord-docs",
   "title": "Nord Docs",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "The official Nord website and documentation",
   "author": {
     "name": "Arctic Ice Studio",

src/components/atoms/core/vectors/icons/ArrowForward.jsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as ArrowForwardSVGFill } from "assets/images/icons/eva-icons/arrow-forward-fill.svg";
+import { ReactComponent as ArrowForwardSVGOutline } from "assets/images/icons/eva-icons/arrow-forward-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const ArrowForwardIconFill = styled(ArrowForwardSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const ArrowForwardIconOutline = styled(ArrowForwardSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "arrow forward" icon from "Eva Icons" as styled SVG vector graphic component.
+ * The "outline" variant can be used by passing the `outlined` boolean prop.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.8.0
+ * @see https://akveo.github.io/eva-icons
+ */
+const ArrowForward = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <ArrowForwardIconFill className={className} svgRef={svgRef} />
+  ) : (
+    <ArrowForwardIconOutline className={className} svgRef={svgRef} />
+  );
+
+ArrowForward.propTypes = iconPropTypes;
+
+ArrowForward.defaultProps = iconDefaultProps;
+
+export default ArrowForward;

src/components/atoms/core/vectors/icons/BookOpen.jsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as BookOpenSVGFill } from "assets/images/icons/eva-icons/book-open-fill.svg";
+import { ReactComponent as BookOpenSVGOutline } from "assets/images/icons/eva-icons/book-open-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const BookOpenIconFill = styled(BookOpenSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const BookOpenIconOutline = styled(BookOpenSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "book open" icon from "Eva Icons" as styled SVG vector graphic component.
+ * The "outline" variant can be used by passing the `outlined` boolean prop.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.8.0
+ * @see https://akveo.github.io/eva-icons
+ */
+const BookOpen = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <BookOpenIconFill className={className} svgRef={svgRef} />
+  ) : (
+    <BookOpenIconOutline className={className} svgRef={svgRef} />
+  );
+
+BookOpen.propTypes = iconPropTypes;
+
+BookOpen.defaultProps = iconDefaultProps;
+
+export default BookOpen;

src/components/atoms/core/vectors/icons/Code.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as CodeSVG } from "assets/images/icons/eva-icons/code.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const CodeIcon = styled(CodeSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "code" icon from "Eva Icons" as styled SVG vector graphic component.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.8.0
+ * @see https://akveo.github.io/eva-icons
+ */
+const Code = ({ className, svgRef }) => <CodeIcon className={className} svgRef={svgRef} />;
+
+Code.propTypes = iconPropTypes;
+
+Code.defaultProps = iconDefaultProps;
+
+export default Code;

src/components/atoms/core/vectors/icons/CodeDownload.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as CodeDownloadSVG } from "assets/images/icons/eva-icons/code-download.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const CodeDownloadIcon = styled(CodeDownloadSVG)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "code download" icon from "Eva Icons" as styled SVG vector graphic component.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.8.0
+ * @see https://akveo.github.io/eva-icons
+ */
+const CodeDownload = ({ className, svgRef }) => <CodeDownloadIcon className={className} svgRef={svgRef} />;
+
+CodeDownload.propTypes = iconPropTypes;
+
+CodeDownload.defaultProps = iconDefaultProps;
+
+export default CodeDownload;

src/components/atoms/core/vectors/icons/Compass.jsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as CompassSVGFill } from "assets/images/icons/eva-icons/compass-fill.svg";
+import { ReactComponent as CompassSVGOutline } from "assets/images/icons/eva-icons/compass-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const CompassIconFill = styled(CompassSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const CompassIconOutline = styled(CompassSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "compass" icon from "Eva Icons" as styled SVG vector graphic component.
+ * The "outline" variant can be used by passing the `outlined` boolean prop.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.8.0
+ * @see https://akveo.github.io/eva-icons
+ */
+const Compass = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <CompassIconFill className={className} svgRef={svgRef} />
+  ) : (
+    <CompassIconOutline className={className} svgRef={svgRef} />
+  );
+
+Compass.propTypes = iconPropTypes;
+
+Compass.defaultProps = iconDefaultProps;
+
+export default Compass;

src/components/atoms/core/vectors/icons/Layout.jsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import styled from "styled-components";
+
+import { ReactComponent as LayoutSVGFill } from "assets/images/icons/eva-icons/layout-fill.svg";
+import { ReactComponent as LayoutSVGOutline } from "assets/images/icons/eva-icons/layout-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const LayoutIconFill = styled(LayoutSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const LayoutIconOutline = styled(LayoutSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "layout" icon from "Eva Icons" as styled SVG vector graphic component.
+ * The "outline" variant can be used by passing the `outlined` boolean prop.
+ * By default, it uses the fill color and transition based on the current active global theme mode.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.8.0
+ * @see https://akveo.github.io/eva-icons
+ */
+const Layout = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <LayoutIconFill className={className} svgRef={svgRef} />
+  ) : (
+    <LayoutIconOutline className={className} svgRef={svgRef} />
+  );
+
+Layout.propTypes = iconPropTypes;
+
+Layout.defaultProps = iconDefaultProps;
+
+export default Layout;