Community Page Sections

package.json

@@ -85,7 +85,9 @@
   "dependencies": {
     "arctic-landscape": ">=0.1.0 <1.0.0",
     "arctic-ocean-fractal": ">=0.1.0 <1.0.0",
+    "axios": "0.18.0",
     "body-scroll-lock": "2.6.1",
+    "date-fns": "2.0.0-alpha.27",
     "gatsby": "2.0.75",
     "gatsby-plugin-canonical-urls": "2.0.8",
     "gatsby-plugin-catch-links": "2.0.9",

src/components/atoms/core/Button/Button.jsx

@@ -29,7 +29,7 @@ const BaseButton = styled.button`
  * @since 0.6.0
  * @see https://developer.mozilla.org/de/docs/Web/HTML/Element/button
  */
-const Button = ({ children, dashed, disabled, ghost, href, onClick, outlined, quiet, to, variant }) => {
+const Button = ({ children, dashed, disabled, ghost, href, onClick, outlined, quiet, to, variant, ...passProps }) => {
   if (href) {
     return (
       <BaseButton
@@ -41,6 +41,7 @@ const Button = ({ children, dashed, disabled, ghost, href, onClick, outlined, qu
         outlined={outlined}
         quiet={quiet}
         variant={variant}
+        {...passProps}
       >
         {children}
       </BaseButton>
@@ -57,6 +58,7 @@ const Button = ({ children, dashed, disabled, ghost, href, onClick, outlined, qu
         quiet={quiet}
         to={to}
         variant={variant}
+        {...passProps}
       >
         {children}
       </BaseButton>
@@ -71,6 +73,7 @@ const Button = ({ children, dashed, disabled, ghost, href, onClick, outlined, qu
       outlined={outlined}
       quiet={quiet}
       variant={variant}
+      {...passProps}
     >
       {children}
     </BaseButton>

src/components/atoms/core/HTMLElements/index.js

@@ -17,6 +17,6 @@
 
 import { A, Code } from "./inline-text-semantics";
 import { H1, H2, H3, H4, H5, H6 } from "./sectioning";
-import { P, Pre } from "./text";
+import { Hr, P, Pre } from "./text";
 
-export { A, Code, H1, H2, H3, H4, H5, H6, P, Pre };
+export { A, Code, H1, H2, H3, H4, H5, H6, Hr, P, Pre };

src/components/atoms/core/HTMLElements/text/Hr.jsx

@@ -0,0 +1,36 @@
+/*
+ * 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
+ */
+
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord4,
+  [MODE_DARK_NIGHT_FROST]: colors.nord2
+});
+
+/**
+ * A base HTML component that represents a visual thematic break between paragraph-level elements.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.7.0
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
+ */
+const Hr = styled.hr`
+  background-color: ${backgroundColor};
+  border: 0;
+  height: ${({ size }) => size || 1}px;
+  margin: ${({ spacing }) => spacing || 5}em auto;
+  width: ${({ spreadPercent }) => spreadPercent || 35}%;
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+export default Hr;

src/components/atoms/core/HTMLElements/text/index.js

@@ -15,7 +15,8 @@
  * @since 0.3.0
  */
 
+import Hr from "./Hr";
 import P from "./P";
 import Pre from "./Pre";
 
-export { P, Pre };
+export { Hr, P, Pre };

src/components/atoms/core/vectors/divider/WaveSwaying.jsx

@@ -0,0 +1,28 @@
+/*
+ * 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
+ */
+
+import React from "react";
+
+import DividerSvg from "./DividerSvg";
+
+/**
+ * A SVG vector graphic divider component rendering a "swaying" wave form.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.7.0
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ */
+const WaveSwaying = props => (
+  <DividerSvg {...props} viewBox="0 0 1440 94" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 .91c37.102-3.789 72.529 8.207 112.12 35.083 104.792 71.133 186.932 18.896 299.41-18.297 112.476-37.193 128.544 64.109 218.349 43.87 89.805-20.238 155.519-61.91 327.519-21.16s253.141 66.825 357.309 36.95c49.177-14.104 85.113-37.259 125.293-57.88V94H0V.91z" />
+  </DividerSvg>
+);
+
+export default WaveSwaying;

src/components/atoms/core/vectors/divider/WaveWobbly.jsx

@@ -0,0 +1,28 @@
+/*
+ * 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
+ */
+
+import React from "react";
+
+import DividerSvg from "./DividerSvg";
+
+/**
+ * A SVG vector graphic divider component rendering a "wobbly" wave form.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.7.0
+ * @see https://developer.mozilla.org/de/docs/Web/SVG
+ */
+const WaveWobbly = props => (
+  <DividerSvg {...props} viewBox="0 0 2463.834 324" xmlns="http://www.w3.org/2000/svg">
+    <path d="M449.979 194.247c116.719-64.927 202.059-74.405 277.129 8.894S854.826 70.9 945.537 63.955s132.559 75.705 222.363 55.469 213.11-152.42 385.11-111.672c172 40.747 160.191 200.818 264.359 170.945 104.167-29.873 125.46-98.789 203.364-79.848 64.65 15.721 100.484 121.061 177.736 86.945C2451.397 74.1 2463.834 324 2463.834 324H0s63.247-148.374 251.034-95.148c91.928 26.056 122.236 8.066 198.945-34.605z" />
+  </DividerSvg>
+);
+
+export default WaveWobbly;

src/components/atoms/core/vectors/divider/index.js

@@ -22,5 +22,17 @@ import WaveRough from "./WaveRough";
 import WaveSmooth from "./WaveSmooth";
 import WaveSmooth2 from "./WaveSmooth2";
 import WaveSmoothFlat from "./WaveSmoothFlat";
+import WaveSwaying from "./WaveSwaying";
+import WaveWobbly from "./WaveWobbly";
 
-export { LinesWavyIntersecting, WaveFooter, WaveRoaring, WaveRough, WaveSmooth, WaveSmooth2, WaveSmoothFlat };
+export {
+  LinesWavyIntersecting,
+  WaveFooter,
+  WaveRoaring,
+  WaveRough,
+  WaveSmooth,
+  WaveSmooth2,
+  WaveSmoothFlat,
+  WaveSwaying,
+  WaveWobbly
+};

src/components/containers/core/Section/Content.jsx

@@ -21,6 +21,7 @@ import CoreContent from "containers/core/Content";
 const Content = styled(CoreContent)`
   padding-top: ${({ compact }) => !compact && "2.5em"};
   padding-bottom: ${({ compact }) => !compact && "2.5em"};
+  position: ${({ decorated }) => decorated && "relative"};
 
   ${({ theme }) => theme.media.tabletLandscape`
     padding-top: ${({ compact }) => !compact && "5em"};

src/components/containers/core/Section/Section.jsx

@@ -12,12 +12,18 @@ import styled from "styled-components";
 
 import { motion } from "styles/theme";
 
-import { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor } from "../shared/styles";
+import {
+  baseBackgroundColor,
+  primaryBackgroundColor,
+  secondaryBackgroundColor,
+  tertiaryBackgroundColor
+} from "../shared/styles";
 
 const variants = {
   base: baseBackgroundColor,
   primary: primaryBackgroundColor,
-  secondary: secondaryBackgroundColor
+  secondary: secondaryBackgroundColor,
+  tertiary: tertiaryBackgroundColor
 };
 
 /**

src/components/containers/core/shared/styles.js

@@ -31,4 +31,9 @@ const secondaryBackgroundColor = themedMode({
   [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST]
 });
 
-export { baseBackgroundColor, primaryBackgroundColor, secondaryBackgroundColor };
+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 };

src/components/organisms/page/community/SectionChat/SectionChat.jsx

@@ -0,0 +1,63 @@
+/*
+ * 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
+ */
+
+import React from "react";
+
+import Link from "atoms/core/Link";
+import { Content } from "containers/core/Section";
+import { ROUTE_COMMUNITY } from "config/routes/mappings";
+import { sectionIdFor } from "utils";
+import { Discord, Keybase, Slack, Spectrum } from "atoms/core/vectors/icons";
+import { links } from "data/project";
+
+import { Section } from "../../shared";
+import { ChatCard, Grid } from "./styled";
+import WaveDivider from "./styled/WaveDivider";
+
+const SECTION_ID = sectionIdFor(ROUTE_COMMUNITY, 1);
+
+/**
+ * The component that represents the chat channel section of the community page.
+ * All logos and colors are based on the official branding guidelines of the respective brand.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.7.0
+ * @see https://slack.com/media-kit
+ * @see https://www.redditinc.com/press#publish
+ */
+const SectionChannelCards = () => (
+  <Section gapWidth={1} id={SECTION_ID} variant="primary">
+    <Content centered decorated>
+      <Grid>
+        <ChatCard logoColor="#7b16ff" logoComponent={Spectrum} title="Spectrum" url={links.community.spectrum.url}>
+          A simple, powerful real-time chat platform to build, grow, manage and measure any kind of online communities
+          by providing a modern, scaling and easy to use cross-device app.
+        </ChatCard>
+        <ChatCard logoColor="#4c8eff" logoComponent={Keybase} title="Keybase" url={links.community.keybase.url}>
+          Keybase is a open source security platform powered by public-key cryptography providing end-to-end encrypted
+          chats, file shares, team tools and many more features across all devices.
+        </ChatCard>
+        <ChatCard logoColor="#36c5f0" logoComponent={Slack} title="Slack">
+          Slack is is where work flows &mdash; a cloud-based collaboration hub for communities that provides
+          integrations, tools and services to keep teams connected and allows to easily store and share information,
+          discussions and important documents in one searchable place to get things done.
+        </ChatCard>
+        <ChatCard logoColor="#7289DA" logoComponent={Discord} title="Discord">
+          Discord is a all-in-one voice, text and video chat for communities mainly focused on gaming and{" "}
+          <Link href="https://discordapp.com/open-source">open source software development</Link> that serves as a
+          modern, crystal clear and secure communication channel across all devices.
+        </ChatCard>
+      </Grid>
+    </Content>
+    <WaveDivider />
+  </Section>
+);
+
+export default SectionChannelCards;

src/components/organisms/page/community/SectionLanding/index.js → src/components/organisms/page/community/SectionChat/index.js

@@ -7,4 +7,4 @@
  * License:    MIT
  */
 
-export { default } from "./SectionLanding";
+export { default } from "./SectionChat";

src/components/organisms/page/community/SectionChat/styled/ChatCard/Action.jsx

@@ -0,0 +1,28 @@
+/*
+ * 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
+ */
+
+import styled from "styled-components";
+
+import { CardAction } from "../../../shared";
+
+/**
+ * A container component for an card item action.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.7.0
+ */
+const Action = styled(CardAction)`
+  ${({ theme }) => theme.media.tabletPortrait`
+    display: flex;
+    align-items: flex-end;
+  `};
+`;
+
+export default Action;