diff --git a/src/components/organisms/page/docs/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/SectionContents/SectionContents.jsx index 8f183d91..d0c58557 100644 --- a/src/components/organisms/page/docs/SectionContents/SectionContents.jsx +++ b/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 = () => (
- + ( Learn about the design guidelines, detailed technical views and all port projects of Nord. - +
diff --git a/src/components/organisms/page/docs/SectionHero/SectionHero.jsx b/src/components/organisms/page/docs/SectionHero/SectionHero.jsx index ee6b61bd..b316e5bf 100644 --- a/src/components/organisms/page/docs/SectionHero/SectionHero.jsx +++ b/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); diff --git a/src/components/organisms/page/docs/shared/CardGrid.jsx b/src/components/organisms/page/docs/shared/CardGrid.jsx new file mode 100644 index 00000000..898bd875 --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardGrid.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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; diff --git a/src/components/organisms/page/docs/shared/CardItemIcon.jsx b/src/components/organisms/page/docs/shared/CardItemIcon.jsx index cdb3fc18..c7202e19 100644 --- a/src/components/organisms/page/docs/shared/CardItemIcon.jsx +++ b/src/components/organisms/page/docs/shared/CardItemIcon.jsx @@ -19,7 +19,7 @@ import { cardIconPropTypes } from "./propTypes"; * @author Sven Greb * @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 ; + return ; }; CardItemIcon.propTypes = cardIconPropTypes; diff --git a/src/components/organisms/page/docs/shared/ContentsCard.jsx b/src/components/organisms/page/docs/shared/ContentsCard.jsx new file mode 100644 index 00000000..bcf6274d --- /dev/null +++ b/src/components/organisms/page/docs/shared/ContentsCard.jsx @@ -0,0 +1,87 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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 }) => ( + + + + + {topicTitle} + + + {!url ? In Progress : } + + ) + ); + return ( + + +
+

{title}

+

{children}

+
+ {renderedTopics} + + ); +}; + +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; diff --git a/src/components/organisms/page/docs/shared/Headline.jsx b/src/components/organisms/page/docs/shared/Headline.jsx new file mode 100644 index 00000000..748d347d --- /dev/null +++ b/src/components/organisms/page/docs/shared/Headline.jsx @@ -0,0 +1,38 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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; diff --git a/src/components/organisms/page/docs/shared/Subline.jsx b/src/components/organisms/page/docs/shared/Subline.jsx new file mode 100644 index 00000000..ff903955 --- /dev/null +++ b/src/components/organisms/page/docs/shared/Subline.jsx @@ -0,0 +1,30 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * 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 + * @author Sven Greb + * @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; diff --git a/src/components/organisms/page/docs/shared/index.js b/src/components/organisms/page/docs/shared/index.js index e772a087..4e2cab18 100644 --- a/src/components/organisms/page/docs/shared/index.js +++ b/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 };