Extract specific components to be shared between other components

GH-140

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

@@ -17,7 +17,7 @@ import { topicsGettingStarted, topicsReferences } from "data/components/organism
 import { sectionIdFor } from "utils";
 import { colors } from "styles/theme";
 
-import { ContentsCard, Grid } from "./styled";
+import { ContentsCard, CardGrid } from "../shared";
 
 const SECTION_ID = sectionIdFor(ROUTE_DOCS, 1);
 
@@ -31,7 +31,7 @@ const SECTION_ID = sectionIdFor(ROUTE_DOCS, 1);
 const SectionContents = () => (
   <Section id={SECTION_ID} variant="tertiary">
     <Content centered>
-      <Grid>
+      <CardGrid>
         <ContentsCard
           accentColor={colors.nord8}
           logoComponent={Zap}
@@ -44,7 +44,7 @@ const SectionContents = () => (
         <ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
           Learn about the design guidelines, detailed technical views and all port projects of Nord.
         </ContentsCard>
-      </Grid>
+      </CardGrid>
     </Content>
     <WaveFooter />
   </Section>

src/components/organisms/page/docs/SectionHero/SectionHero.jsx

@@ -13,7 +13,7 @@ import Section, { Content } from "containers/core/Section";
 import { ROUTE_DOCS } from "config/routes/mappings";
 import { sectionIdFor } from "utils";
 
-import { Headline, Subline } from "./styled";
+import { Headline, Subline } from "../shared";
 
 const SECTION_ID = sectionIdFor(ROUTE_DOCS, 0);
 

src/components/organisms/page/docs/shared/CardGrid.jsx

@@ -0,0 +1,29 @@
+/*
+ * 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";
+
+/**
+ * A configurable and responsive grid for card components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const Grid = styled.div`
+  display: grid;
+  grid-gap: 4em;
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    grid-template-columns: repeat(2, 1fr);
+    ${({ isExtended }) => isExtended && "grid-template-rows: repeat(2, auto)"};
+  `};
+`;
+
+export default Grid;

src/components/organisms/page/docs/shared/CardItemIcon.jsx

@@ -19,7 +19,7 @@ import { cardIconPropTypes } from "./propTypes";
  * @author Sven Greb <[email protected]>
  * @since 0.8.0
  */
-const CardItemIcon = ({ accentColor, iconComponent: SvgIcon, svgType, ...passProps }) => {
+const CardItemIcon = ({ accentColor, iconComponent: SvgIcon, iconOutlined, svgType, ...passProps }) => {
   const Icon = styled(SvgIcon)`
     width: 1.8em;
     ${svgType === "stroke" ? `stroke: ${accentColor}` : `fill: ${accentColor}`};
@@ -28,7 +28,7 @@ const CardItemIcon = ({ accentColor, iconComponent: SvgIcon, svgType, ...passPro
       margin-right: 1em;
     `};
   `;
-  return <Icon {...passProps} />;
+  return <Icon outlined={iconOutlined} {...passProps} />;
 };
 
 CardItemIcon.propTypes = cardIconPropTypes;

src/components/organisms/page/docs/shared/ContentsCard.jsx

@@ -0,0 +1,87 @@
+/*
+ * 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 PropTypes from "prop-types";
+
+import { A, H3, P } from "atoms/core/html-elements";
+
+import ArrowIcon from "./ArrowIcon";
+import Card from "./Card";
+import Icon from "./CardIcon";
+import Topic from "./CardItem";
+import TopicContent from "./CardItemContent";
+import TopicIcon from "./CardItemIcon";
+import Topics from "./CardItems";
+import TopicTag from "./CardItemTag";
+import TopicTitle from "./CardItemTitle";
+import { cardBasePropTypes } from "./propTypes";
+
+/**
+ * A card component that renders information about a docs category and its topics.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const ContentsCard = ({ accentColor, children, topics, logoComponent: SvgLogo, svgType, title, ...passProps }) => {
+  const renderedTopics = topics.map(
+    ({ url, title: topicTitle, iconComponent: SvgIcon, iconOutlined, svgType: topicIconSvgType }) => (
+      <Topic key={topicTitle} as={url && A} href={url} inProgress={!url}>
+        <TopicContent>
+          <TopicIcon
+            accentColor={accentColor}
+            iconComponent={SvgIcon}
+            outlined={iconOutlined}
+            svgType={topicIconSvgType}
+          />
+          <TopicTitle color={accentColor} inProgress={!url}>
+            {topicTitle}
+          </TopicTitle>
+        </TopicContent>
+        {!url ? <TopicTag accentColor={accentColor}>In Progress</TopicTag> : <ArrowIcon />}
+      </Topic>
+    )
+  );
+  return (
+    <Card {...passProps}>
+      <Icon accentColor={accentColor} iconComponent={SvgLogo} svgType={svgType} />
+      <div>
+        <H3>{title}</H3>
+        <P>{children}</P>
+      </div>
+      <Topics>{renderedTopics}</Topics>
+    </Card>
+  );
+};
+
+ContentsCard.propTypes = {
+  ...cardBasePropTypes,
+  accentColor: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  svgType: PropTypes.string,
+  topics: PropTypes.arrayOf(
+    PropTypes.shape({
+      iconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.node]).isRequired,
+      iconOutlined: PropTypes.bool,
+      svgType: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string
+    })
+  ).isRequired
+};
+
+ContentsCard.defaultProps = {
+  svgType: "fill",
+  topics: {
+    iconOutlined: false
+  }
+};
+
+export default ContentsCard;

src/components/organisms/page/docs/shared/Headline.jsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { H1 } from "atoms/core/html-elements";
+import { media, motion, ms } from "styles/theme";
+
+/**
+ * A component that represents the large headline of a documentation page.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const Headline = styled(H1)`
+  font-weight: bold;
+  margin-bottom: 0.8em;
+  font-size: ${ms(6)};
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  text-align: center;
+
+  ${media.tabletLandscape`
+    font-size: ${ms(7)};
+  `};
+
+  ${media.desktop`
+    font-size: ${ms(8)};
+  `};
+`;
+
+export default Headline;

src/components/organisms/page/docs/shared/Subline.jsx

@@ -0,0 +1,30 @@
+/*
+ * 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 { P } from "atoms/core/html-elements";
+import { motion, ms } from "styles/theme";
+
+/**
+ * A component that represents the subline of a documentation page headline.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.8.0
+ */
+const Subline = styled(P)`
+  font-size: ${ms(2)};
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  max-width: 65%;
+  margin: 0 auto;
+  text-align: center;
+`;
+
+export default Subline;

src/components/organisms/page/docs/shared/index.js

@@ -8,25 +8,33 @@
  */
 
 import ArrowIcon from "./ArrowIcon";
-import CardIcon from "./CardIcon";
 import BaseCard from "./BaseCard";
 import Card from "./Card";
+import CardGrid from "./CardGrid";
+import CardIcon from "./CardIcon";
 import CardItem from "./CardItem";
 import CardItemContent from "./CardItemContent";
 import CardItemIcon from "./CardItemIcon";
 import CardItems from "./CardItems";
 import CardItemTag from "./CardItemTag";
 import CardItemTitle from "./CardItemTitle";
+import ContentsCard from "./ContentsCard";
+import Headline from "./Headline";
+import Subline from "./Subline";
 
 export {
   ArrowIcon,
   CardIcon,
   BaseCard,
   Card,
+  CardGrid,
   CardItem,
   CardItemContent,
   CardItemIcon,
   CardItems,
   CardItemTag,
-  CardItemTitle
+  CardItemTitle,
+  ContentsCard,
+  Headline,
+  Subline
 };