Transition: Nord Slack

content/docs/ports/slack/installation/index.mdx

@@ -0,0 +1,85 @@
+import Link from "atoms/core/Link";
+import { useClipboard } from "use-clipboard-copy";
+import { Clipboard } from "atoms/core/vectors/icons";
+import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Kbd } from "atoms/core/html-elements";
+import { ClipboardIcon, ColorValueInput, ColorValueInputBox } from "organisms/page/ports/slack/SectionSetup/styled";
+import { ReactComponent as Plugin } from "assets/images/illustrations/plugin.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running with one line of code."
+};
+
+export const ColorValues = function() {
+  const clipboard = useClipboard();
+  function handleTextInputFocus({ target }) {
+    target.select();
+  }
+  function handleClipboardCopy() {
+    clipboard.copy();
+  }
+  return (
+    <>
+      <ColorValueInputBox onClick={handleClipboardCopy} aria-label="Copy to clipboard" title="Copy to clipboard">
+        <ClipboardIcon outlined svgComponent={Clipboard} />
+        <ColorValueInput
+          readOnly
+          type="text"
+          value="#2E3440,#3B4252,#88C0D0,#2E3440,#3B4252,#D8DEE9,#A3BE8C,#81A1C1"
+          ref={clipboard.target}
+          onFocus={handleTextInputFocus}
+        />
+      </ColorValueInputBox>
+    </>
+  );
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <Plugin />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+Thanks to [Slack's simply shareable custom themes][slk-help-themes], _Nord Slack_ can be installed with one line of code.
+
+1. [Sign in][slk-help-sign_in] to the Slack workspace you’d like to customize.
+2. [Open Slack](slack://open) and click on the workspace name to go to the **Preferences** or via <Kbd>Ctrl</Kbd>/<Kbd>⌘</Kbd>+<Kbd>,</Kbd>.
+3. Switch to the **Sidebar** section and scroll down to the text field in the **Custom Theme** section at the bottom.
+   - If the text field is not visible, click on the „Customize your theme and share it with others“ link to toggle it.
+4. Copy Nord's color values from the text field below and paste it into Slack's custom theme text field to install and automatically apply the custom theme.
+
+<SpaceBox mTop={4} mBottom={4}>
+  <ColorValues />
+</SpaceBox>
+
+<Image
+  alt="Screenshot showing the workspace preferences UI to install and activate custom themes"
+  dropShadow
+  fluid={props.images["slack-theme-config.png"]}
+  rounded
+>
+  <span>
+    The workspace preferences UI to{" "}
+    <Link href="https://get.slack.help/hc/en-us/articles/205166337-Customize-your-Slack-theme">
+      install and activate custom themes
+    </Link>
+    .
+  </span>
+</Image>
+
+See the official [Slack Help Center][slk-help] for more details and documentations.
+
+</ShrinkedWidth>
+
+[slk-help-sign_in]: https://get.slack.help/hc/articles/212681477-Sign-in-to-Slack
+[slk-help-themes]: https://get.slack.help/hc/articles/205166337-Customize-your-Slack-theme
+[slk-help]: https://get.slack.help/hc

package.json

@@ -137,6 +137,7 @@
     "styled-theming": "2.2.0",
     "subscribe-ui-event": "2.0.5",
     "typeface-rubik": "0.0.72",
-    "typeface-source-code-pro": "0.0.71"
+    "typeface-source-code-pro": "0.0.71",
+    "use-clipboard-copy": "0.1.1"
   }
 }

src/components/atoms/core/vectors/icons/Clipboard.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 ClipboardSVGFill } from "assets/images/icons/eva-icons/clipboard-fill.svg";
+import { ReactComponent as ClipboardSVGOutline } from "assets/images/icons/eva-icons/clipboard-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const ClipboardIconFill = styled(ClipboardSVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const ClipboardIconOutline = styled(ClipboardSVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "clipboard" 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>
+ * @see https://akveo.github.io/eva-icons
+ * @since 0.21.0
+ */
+const Clipboard = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <ClipboardIconOutline className={className} svgRef={svgRef} />
+  ) : (
+    <ClipboardIconFill className={className} svgRef={svgRef} />
+  );
+
+Clipboard.propTypes = iconPropTypes;
+
+Clipboard.defaultProps = iconDefaultProps;
+
+export default Clipboard;

src/components/atoms/core/vectors/icons/Copy.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 CopySVGFill } from "assets/images/icons/eva-icons/copy-fill.svg";
+import { ReactComponent as CopySVGOutline } from "assets/images/icons/eva-icons/copy-outline.svg";
+
+import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
+
+const CopyIconFill = styled(CopySVGFill)`
+  ${themeModeFillColorStyles};
+`;
+
+const CopyIconOutline = styled(CopySVGOutline)`
+  ${themeModeFillColorStyles};
+`;
+
+/**
+ * The "copy" 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>
+ * @see https://akveo.github.io/eva-icons
+ * @since 0.21.0
+ */
+const Copy = ({ className, outlined, svgRef }) =>
+  outlined ? (
+    <CopyIconOutline className={className} svgRef={svgRef} />
+  ) : (
+    <CopyIconFill className={className} svgRef={svgRef} />
+  );
+
+Copy.propTypes = iconPropTypes;
+
+Copy.defaultProps = iconDefaultProps;
+
+export default Copy;

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

@@ -20,10 +20,12 @@ import ArrowForward from "./ArrowForward";
 import BookOpen from "./BookOpen";
 import Brush from "./Brush";
 import Bulb from "./Bulb";
+import Clipboard from "./Clipboard";
 import CloudDownload from "./CloudDownload";
 import Code from "./Code";
 import CodeDownload from "./CodeDownload";
 import Compass from "./Compass";
+import Copy from "./Copy";
 import Discord from "./Discord";
 import GitHub from "./GitHub";
 import Heart from "./Heart";
@@ -52,10 +54,12 @@ export {
   BookOpen,
   Brush,
   Bulb,
+  Clipboard,
   CloudDownload,
   Code,
   CodeDownload,
   Compass,
+  Copy,
   Discord,
   GitHub,
   Heart,

src/components/organisms/page/docs/ports/slack/SectionContents/SectionContents.jsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { WaveFooter } from "atoms/core/vectors/divider";
+import Section, { Content } from "containers/core/Section";
+import { BookOpen, Zap } from "atoms/core/vectors/icons";
+import { ROUTE_DOCS_PORTS_SLACK } from "config/routes/mappings";
+import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/slack/topics";
+import { sectionIdFor } from "utils";
+import { colors } from "styles/theme";
+
+import { ContentsCard, CardGrid } from "../../../shared";
+
+const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_SLACK, 1);
+
+/**
+ * The component that represents the contents section of the docs page for the "Nord Slack" port project.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.21.0
+ */
+const SectionContents = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <CardGrid>
+        <ContentsCard
+          accentColor={colors.nord8}
+          logoComponent={Zap}
+          svgType="stroke"
+          title="Getting Started"
+          topics={topicsGettingStarted}
+        >
+          Learn how to install and activate the theme.
+        </ContentsCard>
+        <ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
+          Learn how to deal with occurring problems.
+        </ContentsCard>
+      </CardGrid>
+    </Content>
+    <WaveFooter />
+  </Section>
+);
+
+export default SectionContents;

src/components/organisms/page/docs/ports/slack/SectionContents/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+export { default } from "./SectionContents";

src/components/organisms/page/docs/ports/slack/SectionHero/SectionHero.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 Section, { Content } from "containers/core/Section";
+import { ROUTE_DOCS_PORTS_SLACK } from "config/routes/mappings";
+import { sectionIdFor } from "utils";
+
+import { Headline, Subline } from "../../../shared";
+
+const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_SLACK, 0);
+
+/**
+ * The component that represents the hero section of the docs page for the "Nord Slack" port project.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.21.0
+ */
+const SectionHero = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <Headline>Nord Slack</Headline>
+      <Subline>Documentations to get to know the theme and or find solution for possible problems.</Subline>
+    </Content>
+  </Section>
+);
+
+export default SectionHero;

src/components/organisms/page/docs/ports/slack/SectionHero/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+export { default } from "./SectionHero";

src/components/organisms/page/docs/ports/slack/index.js

@@ -0,0 +1,13 @@
+/*
+ * 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 SectionContents from "./SectionContents";
+import SectionHero from "./SectionHero";
+
+export { SectionContents, SectionHero };