Skip to content

Commit 0c6e0f8

Browse files
arcticicestudioarcticicestudio
committed
Implement landing and doc page for "Nord Atom UI"
This includes the initial sections for features and basic documentation pages. GH-166
1 parent fc1ca7d commit 0c6e0f8

File tree

28 files changed

+1109
-38
lines changed

28 files changed

+1109
-38
lines changed

‎src/components/organisms/page/docs/ports/atom-ui/SectionContents/SectionContents.jsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import React from "react";
11+
12+
import { WaveFooter } from "atoms/core/vectors/divider";
13+
import Section, { Content } from "containers/core/Section";
14+
import { BookOpen, Zap } from "atoms/core/vectors/icons";
15+
import { ROUTE_DOCS_PORTS_ATOM_UI } from "config/routes/mappings";
16+
import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/atom-ui/topics";
17+
import { sectionIdFor } from "utils";
18+
import { colors } from "styles/theme";
19+
20+
import { ContentsCard, CardGrid } from "../../../shared";
21+
22+
const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_ATOM_UI, 1);
23+
24+
/**
25+
* The component that represents the contents section of the docs page for the "Nord Atom UI" port project.
26+
*
27+
* @author Arctic Ice Studio <[email protected]>
28+
* @author Sven Greb <[email protected]>
29+
* @since 0.19.0
30+
*/
31+
const SectionContents = () => (
32+
<Section id={SECTION_ID} variant="tertiary">
33+
<Content centered>
34+
<CardGrid>
35+
<ContentsCard
36+
accentColor={colors.nord8}
37+
logoComponent={Zap}
38+
svgType="stroke"
39+
title="Getting Started"
40+
topics={topicsGettingStarted}
41+
>
42+
Learn how to install, activate, customize and develop the package.
43+
</ContentsCard>
44+
<ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
45+
Learn about supported packages and how to deal with occurring problems.
46+
</ContentsCard>
47+
</CardGrid>
48+
</Content>
49+
<WaveFooter />
50+
</Section>
51+
);
52+
53+
export default SectionContents;

‎src/components/organisms/page/docs/ports/atom-ui/SectionContents/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
export { default } from "./SectionContents";

‎src/components/organisms/page/docs/ports/atom-ui/SectionHero/SectionHero.jsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import React from "react";
11+
12+
import Section, { Content } from "containers/core/Section";
13+
import { ROUTE_DOCS_PORTS_ATOM_UI } from "config/routes/mappings";
14+
import { sectionIdFor } from "utils";
15+
16+
import { Headline, Subline } from "../../../shared";
17+
18+
const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_ATOM_UI, 0);
19+
20+
/**
21+
* The component that represents the hero section of the docs page for the "Nord Atom UI" port project.
22+
*
23+
* @author Arctic Ice Studio <[email protected]>
24+
* @author Sven Greb <[email protected]>
25+
* @since 0.19.0
26+
*/
27+
const SectionHero = () => (
28+
<Section id={SECTION_ID} variant="tertiary">
29+
<Content centered>
30+
<Headline>Nord Atom UI</Headline>
31+
<Subline>
32+
Documentations to get to know the theme and supported features, how to use the package, customize it to fit your
33+
needs or find solution for possible problems.
34+
</Subline>
35+
</Content>
36+
</Section>
37+
);
38+
39+
export default SectionHero;

‎src/components/organisms/page/docs/ports/atom-ui/SectionHero/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
export { default } from "./SectionHero";

‎src/components/organisms/page/docs/ports/atom-ui/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import SectionContents from "./SectionContents";
11+
import SectionHero from "./SectionHero";
12+
13+
export { SectionContents, SectionHero };

‎src/components/organisms/page/ports/atom-ui/SectionConfigurations/SectionConfigurations.jsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import React from "react";
11+
12+
import Button from "atoms/core/Button";
13+
import Link from "atoms/core/Link";
14+
import { Content } from "containers/core/Section";
15+
import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo";
16+
import { ROUTE_DOCS_PORTS_ATOM_UI_CONFIGURATION, ROUTE_PORTS_ATOM_UI } from "config/routes/mappings";
17+
import { sectionIdFor } from "utils";
18+
import { Image, Video } from "atoms/core/mdx-elements";
19+
import { usePortsAssetsPropTypes } from "hooks/shared/propTypes";
20+
21+
import { Section } from "../../../shared";
22+
import WaveDivider from "./styled/WaveDivider";
23+
24+
const SECTION_ID = sectionIdFor(ROUTE_PORTS_ATOM_UI, 4);
25+
26+
/**
27+
* The component that represents the theme configuration section for the landing page of the "Nord Atom UI" port
28+
* project.
29+
*
30+
* @author Arctic Ice Studio <[email protected]>
31+
* @author Sven Greb <[email protected]>
32+
* @since 0.19.0
33+
*/
34+
const SectionConfigurations = ({ assets }) => (
35+
<Section id={SECTION_ID}>
36+
<Content centered>
37+
<FeatureDuo columnRatio={[1, 2]}>
38+
<Text>
39+
<Headline>Configure it to fit your needs.</Headline>
40+
<Subline>
41+
Theme configurations like{" "}
42+
<Link to={`${ROUTE_DOCS_PORTS_ATOM_UI_CONFIGURATION}#full-width-tabs`}>full-width tabs</Link> or{" "}
43+
<Link to={`${ROUTE_DOCS_PORTS_ATOM_UI_CONFIGURATION}#darker-form-focus`}>darker form focus effects</Link>{" "}
44+
allow to customize the theme to match your personal preferences.
45+
</Subline>
46+
<Actions>
47+
<Button ghost href={ROUTE_DOCS_PORTS_ATOM_UI_CONFIGURATION} outlined quiet variant="primary">
48+
Learn More
49+
</Button>
50+
</Actions>
51+
</Text>
52+
<Visualization>
53+
<Image
54+
alt="Screenshot showing Atom with enabled full-width tab configuration"
55+
dropShadow
56+
fluid={assets.images["config-full-width-tabs-enabled.png"]}
57+
rounded
58+
>
59+
<span>
60+
Tabs with enabled <Link to={`${ROUTE_DOCS_PORTS_ATOM_UI_CONFIGURATION}#full-width-tabs`}>full-width</Link>
61+
configuration.
62+
</span>
63+
</Image>
64+
</Visualization>
65+
</FeatureDuo>
66+
<FeatureDuo columnRatio={[1, 2]}>
67+
<Text />
68+
<Visualization>
69+
<Image
70+
alt="Screenshot showing Atom's default tab style"
71+
dropShadow
72+
fluid={assets.images["config-full-width-tabs-disabled.png"]}
73+
rounded
74+
>
75+
<span>Default tab style.</span>
76+
</Image>
77+
</Visualization>
78+
</FeatureDuo>
79+
<FeatureDuo columnRatio={[2, 1]}>
80+
<Visualization>
81+
<Video
82+
dropShadow
83+
loop
84+
poster={assets.videoPosters["package-core-find-and-replace.mp4.png"]}
85+
rounded
86+
sources={[assets.videos["package-core-find-and-replace.mp4"]]}
87+
>
88+
<span>Default and darker form focusing effects.</span>
89+
</Video>
90+
</Visualization>
91+
<Text>
92+
<Subline>
93+
Adjust UI elements effects like the{" "}
94+
<Link to={`${ROUTE_DOCS_PORTS_ATOM_UI_CONFIGURATION}#darker-form-focus`}>focus of forms</Link> to adjust
95+
Atoms usage experience and appearance.
96+
</Subline>
97+
</Text>
98+
</FeatureDuo>
99+
</Content>
100+
<WaveDivider />
101+
</Section>
102+
);
103+
104+
SectionConfigurations.propTypes = usePortsAssetsPropTypes;
105+
106+
export default SectionConfigurations;

‎src/components/organisms/page/ports/atom-ui/SectionConfigurations/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
export { default } from "./SectionConfigurations";

‎src/components/organisms/page/ports/atom-ui/SectionConfigurations/styled/WaveDivider.jsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
3+
* Copyright (C) 2018-present Sven Greb <[email protected]>
4+
*
5+
* Project: Nord Docs
6+
* Repository: https://github.com/arcticicestudio/nord-docs
7+
* License: MIT
8+
*/
9+
10+
import styled from "styled-components";
11+
12+
import { WaveRough } from "atoms/core/vectors/divider";
13+
import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
14+
15+
const fillColor = themedMode({
16+
[MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY],
17+
[MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST]
18+
});
19+
20+
/**
21+
* A "rough" vector wave to render a visual differentiation to the next section.
22+
*
23+
* @author Arctic Ice Studio <[email protected]>
24+
* @author Sven Greb <[email protected]>
25+
* @since 0.19.0
26+
*/
27+
const WaveDivider = styled(WaveRough)`
28+
fill: ${fillColor};
29+
transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
30+
`;
31+
32+
export default WaveDivider;

‎src/components/organisms/page/ports/atom-ui/SectionHero/SectionHero.jsx

Lines changed: 54 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,74 @@
88
*/
99

1010
import React from "react";
11-
import { css } from "styled-components";
1211

13-
import { WaveFooter } from "atoms/core/vectors/divider";
14-
import { P } from "atoms/core/html-elements";
12+
import Button from "atoms/core/Button";
1513
import Link from "atoms/core/Link";
16-
import Section, { Content } from "containers/core/Section";
17-
import EmptyState from "molecules/core/EmptyState";
14+
import { Image } from "atoms/core/mdx-elements";
15+
import { Content } from "containers/core/Section";
16+
import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo";
17+
import {
18+
ROUTE_DOCS_PORTS_ATOM_UI,
19+
ROUTE_DOCS_PORTS_ATOM_UI_INSTALLATION,
20+
ROUTE_PORTS_ATOM_UI
21+
} from "config/routes/mappings";
1822
import { usePortsMetadata } from "hooks";
23+
import { usePortsAssetsPropTypes } from "hooks/shared/propTypes";
24+
import { sectionIdFor } from "utils";
1925

20-
import { emptyStateIllustrationStyles } from "../../../shared/styles";
26+
import { Section } from "../../../shared";
27+
import WaveDivider from "./styled/WaveDivider";
28+
29+
const SECTION_ID = sectionIdFor(ROUTE_PORTS_ATOM_UI, 0);
2130

2231
/**
2332
* The component that represents the hero section for the landing page of the "Nord Atom UI" port project.
2433
*
2534
* @author Arctic Ice Studio <[email protected]>
2635
* @author Sven Greb <[email protected]>
27-
* @since 0.9.0
36+
* @since 0.19.0
2837
*/
29-
export default function SectionHero() {
38+
const SectionHero = ({ assets }) => {
3039
const portMetadata = usePortsMetadata();
31-
const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-atom-ui");
40+
const { gitHubRepositoryUrl, projectUrl } = portMetadata.find(port => port.name === "nord-atom-ui");
3241

3342
return (
34-
<Section>
35-
<Content centered>
36-
<EmptyState
37-
headline="Oh, there's nothing here yet"
38-
illustrationStyles={emptyStateIllustrationStyles}
39-
illustrationVariant="iglooHemisphere"
40-
subline="Please check back later, we're working hard on this page!"
41-
/>
42-
<P
43-
css={css`
44-
text-align: center;
45-
`}
46-
>
47-
In the meantime, please see the official{" "}
48-
<Link href={gitHubRepositoryUrl} target="_blank" variant="minimal">
49-
repository on GitHub
50-
</Link>{" "}
51-
for information about Nord Atom UI.
52-
</P>
43+
<Section id={SECTION_ID}>
44+
<Content centered decorated>
45+
<FeatureDuo verticalOnly>
46+
<Text verticalOnly>
47+
<Headline large>Nord Atom UI</Headline>
48+
<Subline>
49+
An arctic, north-bluish clean and elegant <Link href={projectUrl}>Atom</Link> UI theme.
50+
</Subline>
51+
<Subline>Designed for a optimized fluent and clear workflow matching the Nord Atom Syntax theme.</Subline>
52+
<Actions>
53+
<Button to={ROUTE_DOCS_PORTS_ATOM_UI_INSTALLATION} variant="primary">
54+
Get Started
55+
</Button>
56+
<Button ghost outlined quiet to={ROUTE_DOCS_PORTS_ATOM_UI} variant="primary">
57+
Documentation
58+
</Button>
59+
<Button ghost href={gitHubRepositoryUrl} outlined quiet variant="primary">
60+
GitHub
61+
</Button>
62+
</Actions>
63+
</Text>
64+
<Visualization>
65+
<Image
66+
alt="Screenshot showing Atom with the floating command palette modal overlay with a big font type."
67+
dropShadow
68+
fluid={assets.images["overview-command-palette.png"]}
69+
rounded
70+
/>
71+
</Visualization>
72+
</FeatureDuo>
5373
</Content>
54-
<WaveFooter />
74+
<WaveDivider />
5575
</Section>
5676
);
57-
}
77+
};
78+
79+
SectionHero.propTypes = usePortsAssetsPropTypes;
80+
81+
export default SectionHero;

0 commit comments

Comments
 (0)