diff --git a/src/components/organisms/page/docs/DocsPage.jsx b/src/components/organisms/page/docs/DocsPage.jsx new file mode 100644 index 00000000..91d1aaa9 --- /dev/null +++ b/src/components/organisms/page/docs/DocsPage.jsx @@ -0,0 +1,23 @@ +/* + * 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 content wrapper component that applies page specific styles. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const DocsPage = styled.div` + font-family: ${({ theme }) => theme.typography.typefaces.straight}; +`; + +export default DocsPage; diff --git a/src/components/organisms/page/docs/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/SectionContents/SectionContents.jsx new file mode 100644 index 00000000..eaea8ffb --- /dev/null +++ b/src/components/organisms/page/docs/SectionContents/SectionContents.jsx @@ -0,0 +1,53 @@ +/* + * 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 { WaveFooter } from "atoms/core/vectors/divider"; +import Section, { Content } from "containers/core/Section"; +import { BookOpen, Zap } from "atoms/core/vectors/icons"; +import { ROUTE_DOCS } from "config/routes/mappings"; +import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/SectionContents/topics"; +import { sectionIdFor } from "utils"; +import { colors } from "styles/theme"; + +import { ContentsCard, Grid } from "./styled"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS, 1); + +/** + * The component that represents the contents section of the docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const SectionContents = () => ( +
+ + + + Get to know the color palettes, use the native swatches or start to integrate it in your own projects. + + + Learn about the design guideslines, detailed technical views and all port projects of Nord. + + + + +
+); + +export default SectionContents; diff --git a/src/components/organisms/page/docs/SectionContents/index.js b/src/components/organisms/page/docs/SectionContents/index.js new file mode 100644 index 00000000..a1d6d5e4 --- /dev/null +++ b/src/components/organisms/page/docs/SectionContents/index.js @@ -0,0 +1,10 @@ +/* + * 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 + */ + +export { default } from "./SectionContents"; diff --git a/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx b/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx new file mode 100644 index 00000000..37ff2f23 --- /dev/null +++ b/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx @@ -0,0 +1,57 @@ +/* + * 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 { A, H3, P } from "atoms/core/HTMLElements"; + +import { + ArrowIcon, + Card, + CardIcon as Icon, + CardItem as Topic, + CardItemContent as TopicContent, + CardItemIcon as TopicIcon, + CardItems as Topics, + CardItemTag as TopicTag, + CardItemTitle as TopicTitle +} from "../../../shared"; + +/** + * 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, svgType: topicIconSvgType }) => ( + + + + + {topicTitle} + + + {!url ? In Progress : } + + )); + return ( + + +
+

{title}

+

{children}

+
+ {renderedTopics} + + ); +}; + +export default ContentsCard; diff --git a/src/components/organisms/page/docs/SectionContents/styled/Grid.jsx b/src/components/organisms/page/docs/SectionContents/styled/Grid.jsx new file mode 100644 index 00000000..898bd875 --- /dev/null +++ b/src/components/organisms/page/docs/SectionContents/styled/Grid.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/SectionContents/styled/index.js b/src/components/organisms/page/docs/SectionContents/styled/index.js new file mode 100644 index 00000000..fb9dec10 --- /dev/null +++ b/src/components/organisms/page/docs/SectionContents/styled/index.js @@ -0,0 +1,13 @@ +/* + * 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 ContentsCard from "./ContentsCard/ContentsCard"; +import Grid from "./Grid"; + +export { ContentsCard, Grid }; diff --git a/src/components/organisms/page/docs/SectionHero/SectionHero.jsx b/src/components/organisms/page/docs/SectionHero/SectionHero.jsx new file mode 100644 index 00000000..ee6b61bd --- /dev/null +++ b/src/components/organisms/page/docs/SectionHero/SectionHero.jsx @@ -0,0 +1,39 @@ +/* + * 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 Section, { Content } from "containers/core/Section"; +import { ROUTE_DOCS } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Headline, Subline } from "./styled"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS, 0); + +/** + * The component that represents the hero section of the docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.3.0 + */ +const SectionHero = () => ( +
+ + Documentation + + Read about major concepts, dive into technical details, adapt design guidelines and learn all about Nord's + port projects. + + +
+); + +export default SectionHero; diff --git a/src/components/organisms/page/docs/SectionLanding/index.js b/src/components/organisms/page/docs/SectionHero/index.js similarity index 85% rename from src/components/organisms/page/docs/SectionLanding/index.js rename to src/components/organisms/page/docs/SectionHero/index.js index 7b475b16..f15e7dce 100644 --- a/src/components/organisms/page/docs/SectionLanding/index.js +++ b/src/components/organisms/page/docs/SectionHero/index.js @@ -7,4 +7,4 @@ * License: MIT */ -export { default } from "./SectionLanding"; +export { default } from "./SectionHero"; diff --git a/src/components/organisms/page/docs/SectionHero/styled/Headline.jsx b/src/components/organisms/page/docs/SectionHero/styled/Headline.jsx new file mode 100644 index 00000000..3efbedf9 --- /dev/null +++ b/src/components/organisms/page/docs/SectionHero/styled/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/HTMLElements"; +import { media, motion, ms } from "styles/theme"; + +/** + * A component that represents the large headline of the hero section. + * + * @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/SectionHero/styled/Subline.jsx b/src/components/organisms/page/docs/SectionHero/styled/Subline.jsx new file mode 100644 index 00000000..494e543a --- /dev/null +++ b/src/components/organisms/page/docs/SectionHero/styled/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/HTMLElements"; +import { motion, ms } from "styles/theme"; + +/** + * A component that represents the subline of the hero section's 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/SectionHero/styled/index.js b/src/components/organisms/page/docs/SectionHero/styled/index.js new file mode 100644 index 00000000..fcd78585 --- /dev/null +++ b/src/components/organisms/page/docs/SectionHero/styled/index.js @@ -0,0 +1,13 @@ +/* + * 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 Headline from "./Headline"; +import Subline from "./Subline"; + +export { Headline, Subline }; diff --git a/src/components/organisms/page/docs/SectionLanding/SectionLanding.jsx b/src/components/organisms/page/docs/SectionLanding/SectionLanding.jsx deleted file mode 100644 index ecb532a3..00000000 --- a/src/components/organisms/page/docs/SectionLanding/SectionLanding.jsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * 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 { WaveFooter } from "atoms/core/vectors/divider"; -import Section, { Content } from "containers/core/Section"; -import EmptyState from "molecules/core/EmptyState"; - -import { emptyStateIllustrationStyles } from "../../shared/styles"; - -/** - * The component that represents the landing section of the docs page. - * - * @author Arctic Ice Studio - * @author Sven Greb - * @since 0.3.0 - */ -const SectionLanding = () => ( -
- - - - -
-); - -export default SectionLanding; diff --git a/src/components/organisms/page/docs/index.js b/src/components/organisms/page/docs/index.js index 78ecc947..41459245 100644 --- a/src/components/organisms/page/docs/index.js +++ b/src/components/organisms/page/docs/index.js @@ -14,7 +14,8 @@ * @since 0.3.0 */ -import SectionLanding from "./SectionLanding"; +import DocsPage from "./DocsPage"; +import SectionContents from "./SectionContents"; +import SectionHero from "./SectionHero"; -/* eslint-disable-next-line import/prefer-default-export */ -export { SectionLanding }; +export { DocsPage, SectionContents, SectionHero }; diff --git a/src/components/organisms/page/docs/shared/ArrowIcon.jsx b/src/components/organisms/page/docs/shared/ArrowIcon.jsx new file mode 100644 index 00000000..728e077d --- /dev/null +++ b/src/components/organisms/page/docs/shared/ArrowIcon.jsx @@ -0,0 +1,32 @@ +/* + * 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 { ArrowForward } from "atoms/core/vectors/icons"; +import { ms } from "styles/theme"; + +/** + * An styled forward pointing arrow icon. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const ArrowIcon = styled(ArrowForward)` + display: none; + + ${({ theme }) => theme.media.tabletPortrait` + display: inline-block; + width: ${ms(1)}; + vertical-align: middle; + `}; +`; + +export default ArrowIcon; diff --git a/src/components/organisms/page/docs/shared/BaseCard.jsx b/src/components/organisms/page/docs/shared/BaseCard.jsx new file mode 100644 index 00000000..119e0402 --- /dev/null +++ b/src/components/organisms/page/docs/shared/BaseCard.jsx @@ -0,0 +1,46 @@ +/* + * 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 { rgba } from "polished"; + +import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const backgroundColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +const dropShadowColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.35), + [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.35) +}); + +/** + * A styled base card component. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const BaseCard = styled.div` + display: flex; + flex-direction: column; + text-align: center; + overflow: hidden; + width: 100%; + height: auto; + border-radius: 8px; + padding: 2em; + box-shadow: 0px 6px 9px 0px ${dropShadowColor}; + background-color: ${backgroundColor}; + transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out; +`; + +export default BaseCard; diff --git a/src/components/organisms/page/docs/shared/Card.jsx b/src/components/organisms/page/docs/shared/Card.jsx new file mode 100644 index 00000000..c3eea7a5 --- /dev/null +++ b/src/components/organisms/page/docs/shared/Card.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 BaseCard from "./BaseCard"; + +/** + * A styled card component. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const Card = styled(BaseCard)` + ${({ theme }) => theme.media.tabletPortrait` + display: grid; + grid-template-columns: auto 1fr; + grid-column-gap: 2em; + text-align: start; + `}; +`; + +export default Card; diff --git a/src/components/organisms/page/docs/shared/CardIcon.jsx b/src/components/organisms/page/docs/shared/CardIcon.jsx new file mode 100644 index 00000000..3bec8d6c --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardIcon.jsx @@ -0,0 +1,39 @@ +/* + * 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 styled from "styled-components"; +import { transparentize } from "polished"; + +/** + * A component that represents the icon of a card component. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardIcon = ({ accentColor, iconComponent: SvgIcon, svgType = "fill", ...passProps }) => { + const Icon = styled(SvgIcon)` + display: inline-flex; + width: 3em; + height: 3em; + border-radius: 50%; + padding: 0.4em; + margin: 0 auto 1em auto; + background-color: ${transparentize(0.6, accentColor)}; + ${svgType === "stroke" ? `stroke: ${accentColor}` : `fill: ${accentColor}`}; + + ${({ theme }) => theme.media.tabletPortrait` + margin-bottom: unset; + `}; + `; + return ; +}; + +export default CardIcon; diff --git a/src/components/organisms/page/docs/shared/CardItem.jsx b/src/components/organisms/page/docs/shared/CardItem.jsx new file mode 100644 index 00000000..b5c223cf --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardItem.jsx @@ -0,0 +1,47 @@ +/* + * 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 { colors, ms, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const backgroundColorHover = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.shadow.decent[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.shadow.decent[MODE_DARK_NIGHT_FROST] +}); + +/** + * A component that represents a card item. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardItem = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + padding: 1.5em; + font-size: ${ms(0)}; + border-radius: 8px; + transition: background-color ${motion.speed.duration.transition.area.small}ms ease-in-out; + + &:active, + &:focus, + &:hover { + background-color: ${({ inProgress }) => !inProgress && backgroundColorHover}; + } + + ${({ theme }) => theme.media.tabletPortrait` + flex-direction: row; + `}; +`; + +export default CardItem; diff --git a/src/components/organisms/page/docs/shared/CardItemContent.jsx b/src/components/organisms/page/docs/shared/CardItemContent.jsx new file mode 100644 index 00000000..50145fd7 --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardItemContent.jsx @@ -0,0 +1,27 @@ +/* + * 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 wrapper component for card item content. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardItemContent = styled.div` + ${({ theme }) => theme.media.tabletPortrait` + display: flex; + align-items: center; + justify-content: space-between; + `}; +`; + +export default CardItemContent; diff --git a/src/components/organisms/page/docs/shared/CardItemIcon.jsx b/src/components/organisms/page/docs/shared/CardItemIcon.jsx new file mode 100644 index 00000000..34c836fe --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardItemIcon.jsx @@ -0,0 +1,32 @@ +/* + * 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 styled from "styled-components"; + +/** + * A component that represents the icon of a card item. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardItemIcon = ({ accentColor, iconComponent: SvgIcon, svgType = "fill", ...passProps }) => { + const Icon = styled(SvgIcon)` + width: 1.8em; + ${svgType === "stroke" ? `stroke: ${accentColor}` : `fill: ${accentColor}`}; + + ${({ theme }) => theme.media.tabletPortrait` + margin-right: 1em; + `}; + `; + return ; +}; + +export default CardItemIcon; diff --git a/src/components/organisms/page/docs/shared/CardItemTag.jsx b/src/components/organisms/page/docs/shared/CardItemTag.jsx new file mode 100644 index 00000000..2ca7bef1 --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardItemTag.jsx @@ -0,0 +1,40 @@ +/* + * 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 { motion } from "styles/theme"; + +/** + * A component that represents the tag of an card item. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardItemTag = styled.div` + display: inline-flex; + padding: 0 0.4em; + margin-top: 1em; + font-size: 0.75em; + font-style: italic; + white-space: nowrap; + align-items: center; + justify-content: center; + border: 1px solid ${({ accentColor }) => accentColor}; + border-radius: 4px; + transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out, + color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + + ${({ theme }) => theme.media.tabletPortrait` + margin-top: unset; + `}; +`; + +export default CardItemTag; diff --git a/src/components/organisms/page/docs/shared/CardItemTitle.jsx b/src/components/organisms/page/docs/shared/CardItemTitle.jsx new file mode 100644 index 00000000..e88cb159 --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardItemTitle.jsx @@ -0,0 +1,32 @@ +/* + * 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 { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const inProgressColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST] +}); + +/** + * A component that represents the title of an card item. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardItemTitle = styled.div` + font-weight: 600; + color: ${({ inProgress }) => inProgress && inProgressColor}; + transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default CardItemTitle; diff --git a/src/components/organisms/page/docs/shared/CardItems.jsx b/src/components/organisms/page/docs/shared/CardItems.jsx new file mode 100644 index 00000000..8cabe75d --- /dev/null +++ b/src/components/organisms/page/docs/shared/CardItems.jsx @@ -0,0 +1,25 @@ +/* + * 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 container component for card items. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const CardItems = styled.div` + ${({ theme }) => theme.media.tabletPortrait` + grid-column: 1 / span 2; + `}; +`; + +export default CardItems; diff --git a/src/components/organisms/page/docs/shared/index.js b/src/components/organisms/page/docs/shared/index.js new file mode 100644 index 00000000..e772a087 --- /dev/null +++ b/src/components/organisms/page/docs/shared/index.js @@ -0,0 +1,32 @@ +/* + * 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 ArrowIcon from "./ArrowIcon"; +import CardIcon from "./CardIcon"; +import BaseCard from "./BaseCard"; +import Card from "./Card"; +import CardItem from "./CardItem"; +import CardItemContent from "./CardItemContent"; +import CardItemIcon from "./CardItemIcon"; +import CardItems from "./CardItems"; +import CardItemTag from "./CardItemTag"; +import CardItemTitle from "./CardItemTitle"; + +export { + ArrowIcon, + CardIcon, + BaseCard, + Card, + CardItem, + CardItemContent, + CardItemIcon, + CardItems, + CardItemTag, + CardItemTitle +}; diff --git a/src/data/components/organisms/page/docs/SectionContents/topics.js b/src/data/components/organisms/page/docs/SectionContents/topics.js new file mode 100644 index 00000000..7ccb0b55 --- /dev/null +++ b/src/data/components/organisms/page/docs/SectionContents/topics.js @@ -0,0 +1,57 @@ +/* + * 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 { Code, CodeDownload, Compass, Pantone, Layout, Terminal } from "atoms/core/vectors/icons"; + +/** + * The mapping of topics for the "Getting Started" contents cards. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const topicsGettingStarted = [ + { + iconComponent: Compass, + title: "Learn about the colors and palettes" + }, + { + iconComponent: Pantone, + title: "Use native swatches for your favorite applications" + }, + { + iconComponent: CodeDownload, + title: "Include Nord in your own project" + } +]; + +/** + * The mapping of topics for the "References" contents cards. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.8.0 + */ +const topicsReferences = [ + { + iconComponent: Layout, + title: "Modern and elegant UIs" + }, + { + iconComponent: Code, + title: "Beautiful code syntax" + }, + { + iconComponent: Terminal, + title: "Uniform shell & terminal styles", + svgType: "stroke" + } +]; + +export { topicsGettingStarted, topicsReferences }; diff --git a/src/pages/docs.jsx b/src/pages/docs.jsx index e649b054..bd2476fb 100644 --- a/src/pages/docs.jsx +++ b/src/pages/docs.jsx @@ -11,7 +11,7 @@ import React from "react"; import { locationPropTypes } from "data/pages/shared/propTypes"; import BaseLayout from "layouts/core/BaseLayout"; -import { SectionLanding } from "organisms/page/docs"; +import { DocsPage, SectionContents, SectionHero } from "organisms/page/docs"; /** * The component that represents the docs page. @@ -21,8 +21,11 @@ import { SectionLanding } from "organisms/page/docs"; * @since 0.3.0 */ const Docs = ({ location: { pathname } }) => ( - - + + + + + );