Skip to content

Commit 3b131b1

Browse files
arcticicestudioarcticicestudio
committed
Implemented new SVG components for logos and section dividers
Includes logos for all port projects and a new "wobbly wave" divider. GH-119
1 parent eaf1a13 commit 3b131b1

34 files changed

+1429
-2
lines changed

‎src/assets/images/icons/eva-icons/cloud-download-fill.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/images/icons/eva-icons/cloud-download-outline.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/images/icons/eva-icons/pricetags-fill.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/icons/eva-icons/pricetags-outline.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/images/icons/eva-icons/search.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/atoms/core/vectors/divider/WaveWobblyDeep.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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 DividerSvg from "./DividerSvg";
13+
14+
/**
15+
* A "deep wobbly" vector wave to render a visual differentiation to the next section.
16+
*
17+
* @author Arctic Ice Studio <[email protected]>
18+
* @author Sven Greb <[email protected]>
19+
* @since 0.9.0
20+
*/
21+
const WavePorts = props => (
22+
<DividerSvg {...props} viewBox="0 0 1920 500" xmlns="http://www.w3.org/2000/svg">
23+
<path d="M1920 .997c-1.8 1.275-18.636 12.149-50.506 32.62-47.804 30.707-90.085 5.886-146.8 5.886-67.738 0-106.575 45.78-123.324 62.768-37.817 38.361-36.688 62.127-84.319 117.216-47.63 55.09-119.357 37.4-159.562 66.341-46.542 33.507 10.573 96.433-37.008 128.508s-111.701-82.728-192.652-46.99c-80.95 35.739-48.65 119.128-166.048 119.269-117.928-.18-85.608-83.53-166.558-119.269-80.95-35.738-155.159 62.634-202.74 30.6-47.58-32.035 19.632-78.652-26.91-112.118-40.215-28.94-111.931-11.262-159.562-66.34-47.631-55.08-46.472-78.876-84.289-117.217-16.76-16.988-55.586-62.768-123.324-62.768-56.726 0-100.884 25.398-146.81-5.876C18.97 12.778 2.44 1.901 0 .997V501h1920V.997z" />
24+
</DividerSvg>
25+
);
26+
27+
export default WavePorts;

‎src/components/atoms/core/vectors/divider/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import WaveSmooth2 from "./WaveSmooth2";
2424
import WaveSmoothFlat from "./WaveSmoothFlat";
2525
import WaveSwaying from "./WaveSwaying";
2626
import WaveWobbly from "./WaveWobbly";
27+
import WaveWobblyDeep from "./WaveWobblyDeep";
2728

2829
export {
2930
LinesWavyIntersecting,
@@ -34,5 +35,6 @@ export {
3435
WaveSmooth2,
3536
WaveSmoothFlat,
3637
WaveSwaying,
37-
WaveWobbly
38+
WaveWobbly,
39+
WaveWobblyDeep
3840
};

‎src/components/atoms/core/vectors/icons/CloudDownload.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
import styled from "styled-components";
12+
13+
import { ReactComponent as CloudDownloadSvgFill } from "assets/images/icons/eva-icons/cloud-download-fill.svg";
14+
import { ReactComponent as CloudDownloadSvgOutline } from "assets/images/icons/eva-icons/cloud-download-outline.svg";
15+
16+
import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
17+
18+
const CloudDownloadIconFill = styled(CloudDownloadSvgFill)`
19+
${themeModeFillColorStyles};
20+
`;
21+
22+
const CloudDownloadIconOutline = styled(CloudDownloadSvgOutline)`
23+
${themeModeFillColorStyles};
24+
`;
25+
26+
/**
27+
* The "cloud download" icon from "Eva Icons" as styled SVG vector graphic component.
28+
* The "outline" variant can be used by passing the `outlined` boolean prop.
29+
* By default, it uses the fill color and transition based on the current active global theme mode.
30+
*
31+
* @author Arctic Ice Studio <[email protected]>
32+
* @author Sven Greb <[email protected]>
33+
* @since 0.9.0
34+
* @see https://akveo.github.io/eva-icons
35+
*/
36+
const CloudDownload = ({ className, outlined, svgRef }) =>
37+
outlined ? (
38+
<CloudDownloadIconOutline className={className} svgRef={svgRef} />
39+
) : (
40+
<CloudDownloadIconFill className={className} svgRef={svgRef} />
41+
);
42+
43+
CloudDownload.propTypes = iconPropTypes;
44+
45+
CloudDownload.defaultProps = iconDefaultProps;
46+
47+
export default CloudDownload;

‎src/components/atoms/core/vectors/icons/PriceTags.jsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
import styled from "styled-components";
12+
13+
import { ReactComponent as PriceTagsSvgFill } from "assets/images/icons/eva-icons/pricetags-fill.svg";
14+
import { ReactComponent as PriceTagsSvgOutline } from "assets/images/icons/eva-icons/pricetags-outline.svg";
15+
16+
import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
17+
18+
const PriceTagsIconFill = styled(PriceTagsSvgFill)`
19+
${themeModeFillColorStyles};
20+
`;
21+
22+
const PriceTagsIconOutline = styled(PriceTagsSvgOutline)`
23+
${themeModeFillColorStyles};
24+
`;
25+
26+
/**
27+
* The "pricetags" icon from "Eva Icons" as styled SVG vector graphic component.
28+
* The "outline" variant can be used by passing the `outlined` boolean prop.
29+
* By default, it uses the fill color and transition based on the current active global theme mode.
30+
*
31+
* @author Arctic Ice Studio <[email protected]>
32+
* @author Sven Greb <[email protected]>
33+
* @since 0.9.0
34+
* @see https://akveo.github.io/eva-icons
35+
*/
36+
const PriceTags = ({ className, outlined, svgRef }) =>
37+
outlined ? (
38+
<PriceTagsIconOutline className={className} svgRef={svgRef} />
39+
) : (
40+
<PriceTagsIconFill className={className} svgRef={svgRef} />
41+
);
42+
43+
PriceTags.propTypes = iconPropTypes;
44+
45+
PriceTags.defaultProps = iconDefaultProps;
46+
47+
export default PriceTags;

‎src/components/atoms/core/vectors/icons/Search.jsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
import styled from "styled-components";
12+
13+
import { ReactComponent as SearchSVG } from "assets/images/icons/eva-icons/search.svg";
14+
15+
import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared";
16+
17+
const SearchIcon = styled(SearchSVG)`
18+
${themeModeFillColorStyles};
19+
`;
20+
21+
/**
22+
* The "search" icon from "Eva Icons" as styled SVG vector graphic component.
23+
* By default, it uses the fill color and transition based on the current active global theme mode.
24+
*
25+
* @author Arctic Ice Studio <[email protected]>
26+
* @author Sven Greb <[email protected]>
27+
* @since 0.9.0
28+
* @see https://akveo.github.io/eva-icons
29+
*/
30+
const Search = ({ className, svgRef }) => <SearchIcon className={className} svgRef={svgRef} />;
31+
32+
Search.propTypes = iconPropTypes;
33+
34+
Search.defaultProps = iconDefaultProps;
35+
36+
export default Search;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
import ArrowForward from "./ArrowForward";
1919
import BookOpen from "./BookOpen";
20+
import CloudDownload from "./CloudDownload";
2021
import Code from "./Code";
2122
import CodeDownload from "./CodeDownload";
2223
import Compass from "./Compass";
@@ -28,7 +29,9 @@ import Layout from "./Layout";
2829
import Menu from "./Menu";
2930
import Moon from "./Moon";
3031
import Pantone from "./Pantone";
32+
import PriceTags from "./PriceTags";
3133
import Reddit from "./Reddit";
34+
import Search from "./Search";
3235
import Slack from "./Slack";
3336
import Spectrum from "./Spectrum";
3437
import StackOverflow from "./StackOverflow";
@@ -40,6 +43,7 @@ import Zap from "./Zap";
4043
export {
4144
ArrowForward,
4245
BookOpen,
46+
CloudDownload,
4347
Code,
4448
CodeDownload,
4549
Compass,
@@ -51,7 +55,9 @@ export {
5155
Menu,
5256
Moon,
5357
Pantone,
58+
PriceTags,
5459
Reddit,
60+
Search,
5561
Slack,
5662
Spectrum,
5763
StackOverflow,

‎src/components/atoms/core/vectors/logos/Atom.jsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
import PropTypes from "prop-types";
12+
13+
import { colors } from "styles/theme";
14+
15+
/**
16+
* The Atom logo as SVG vector graphic component.
17+
*
18+
* @author Arctic Ice Studio <[email protected]>
19+
* @author Sven Greb <[email protected]>
20+
* @since 0.9.0
21+
*/
22+
const Atom = ({ fillColor, svgRef, ...passProps }) => (
23+
<svg {...passProps} ref={svgRef} viewBox="0 0 46 42.449" xmlns="http://www.w3.org/2000/svg">
24+
<path
25+
d="M14.765.003c-.524-.016-1.018.034-1.35.145-1.607.558-2.618 1.761-3.18 3.77-.48 1.748-.467 4.896.037 7.634.088.477.179.91.2.981.027.098-.146.155-.907.332-3.717.859-6.433 2.144-8.067 3.808-.73.741-1.138 1.39-1.373 2.208-.166.568-.166 1.695 0 2.253.457 1.538 1.742 2.985 3.775 4.265 1.407.883 1.83.981 2.287.521.213-.216.26-.321.26-.581 0-.505-.152-.708-.815-1.094-4.161-2.366-4.893-4.744-2.114-6.861 1.41-1.072 3.382-1.918 6.034-2.574 1.164-.288 1.424-.325 1.424-.169 0 .209.856 2.979 1.299 4.18l.457 1.248-.603 1.177C9.725 25.946 8.182 30.736 8 34.24c-.152 2.698.328 4.631 1.505 5.827 1.286 1.303 3.095 1.58 5.422.826.879-.288 2.622-1.185 3.636-1.881.73-.498.896-.643.991-.903.099-.261.099-.345 0-.615-.145-.409-.45-.637-.862-.637-.267 0-.453.089-1.147.562-1.565 1.08-3.041 1.753-4.262 1.962-1.691.291-2.777-.463-3.274-2.252-.217-.778-.203-3.268.034-4.553.359-2.051.988-4.175 1.887-6.414.531-1.329 1.546-3.554 1.685-3.696.068-.081.159.044.386.578 1.164 2.642 2.936 5.865 4.674 8.477 4.137 6.221 8.674 10.266 12.165 10.848l-.037.007c1.532.25 2.828-.132 3.829-1.146.818-.839 1.353-2.023 1.661-3.663.186-1.028.186-3.91 0-5.308-.565-4.19-2.077-8.987-4.337-13.772-.353-.75-.548-.937-1.005-.937a.905.905 0 0 0-.924.899c0 .175.174.646.464 1.272 2.784 6.006 4.278 11.817 4.127 16.026-.092 2.502-.711 4.015-1.881 4.593-.612.308-1.391.298-2.411-.041-4.695-1.606-11.055-9.646-15.151-19.161l-.406-.95.596-1.025c.669-1.167 2.361-3.777 3.142-4.85l.524-.71h1.383c8.399 0 16.713 1.922 21.121 4.87.9.602 1.981 1.698 2.307 2.341.237.45.257.568.257 1.16 0 .581-.02.723-.212 1.078-.542 1.049-1.962 2.138-3.796 2.916-.85.361-1.079.602-1.079 1.096 0 .419.274.771.681.896.263.079.352.065.821-.124 2.956-1.185 4.989-3.021 5.402-4.881.118-.505.111-1.447-.004-1.938-.224-.961-1.015-2.188-1.918-3.018-4.039-3.666-12.6-6.03-22.758-6.273l-.724-.024.849-.962a46.79 46.79 0 0 1 1.826-2.008c2.89-2.971 5.572-4.918 7.916-5.727.747-.267.896-.298 1.671-.298.721 0 .896.021 1.208.183.422.203.896.7 1.14 1.168.477.959.636 2.64.409 4.429-.077.616-.139 1.326-.139 1.573 0 .412.014.477.247.68.192.183.324.227.575.227.402 0 .774-.213.883-.507.332-.866.504-3.937.291-5.232-.332-1.988-1.174-3.329-2.517-3.978-2.368-1.162-5.812-.027-9.831 3.232-2.097 1.706-4.867 4.602-6.771 7.074l-.186.22-1.126.068c-.947.054-2.489.206-4.279.422l-.385.047-.169-.957c-.325-1.906-.352-2.193-.352-4.019 0-1.603.023-1.911.176-2.552.372-1.622 1.113-2.629 2.087-2.839 1.339-.286 3.003.392 5.34 2.146.748.567 1.658.083 1.543-.812-.044-.391-.403-.727-1.59-1.531-.995-.68-2.114-1.238-3.027-1.51C15.851.102 15.3.028 14.776.01l-.011-.007zm1.785 13.765c0 .037-.314.531-.71 1.12a48.832 48.832 0 0 0-1.244 1.918c-.285.467-.559.893-.616.957-.075.084-.187-.142-.524-1.231-.484-1.502-.69-2.314-.629-2.381.104-.109 3.723-.488 3.723-.383zm7.334 5.688a2.653 2.653 0 0 0 0 5.306 2.655 2.655 0 0 0 2.656-2.651 2.656 2.656 0 0 0-2.656-2.655z"
26+
fill={fillColor}
27+
/>
28+
</svg>
29+
);
30+
31+
Atom.propTypes = {
32+
fillColor: PropTypes.string,
33+
svgRef: PropTypes.func
34+
};
35+
36+
Atom.defaultProps = {
37+
fillColor: colors.nord8,
38+
svgRef: () => {}
39+
};
40+
41+
export default Atom;

‎src/components/atoms/core/vectors/logos/Brackets.jsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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+
import PropTypes from "prop-types";
12+
13+
import { colors } from "styles/theme";
14+
15+
/**
16+
* The Brackets logo as SVG vector graphic component.
17+
*
18+
* @author Arctic Ice Studio <[email protected]>
19+
* @author Sven Greb <[email protected]>
20+
* @since 0.9.0
21+
*/
22+
const Brackets = ({ fillColors, svgRef, ...passProps }) => (
23+
<svg {...passProps} ref={svgRef} viewBox="0 0 46 46" xmlns="http://www.w3.org/2000/svg">
24+
<path
25+
d="M22.999 0h.006C35.704 0 46 10.295 46 23v.006C46 35.701 35.704 46 23.004 46h-.006C10.296 46 0 35.701 0 23.005V23C0 10.295 10.296 0 22.999 0"
26+
fill={fillColors.circle}
27+
/>
28+
<path
29+
d="M9.199 10.732v24.532h12.266v-4.598H13.8V15.333h7.665v-4.601m15.35 0v24.532H24.532v-4.598h7.683V15.333h-7.683v-4.601"
30+
fill={fillColors.brackets}
31+
/>
32+
</svg>
33+
);
34+
35+
Brackets.propTypes = {
36+
fillColors: PropTypes.shape({
37+
brackets: PropTypes.string,
38+
circle: PropTypes.string
39+
}),
40+
svgRef: PropTypes.func
41+
};
42+
43+
Brackets.defaultProps = {
44+
fillColors: {
45+
brackets: colors.nord8,
46+
circle: colors.nord4
47+
},
48+
svgRef: () => {}
49+
};
50+
51+
export default Brackets;

‎src/components/atoms/core/vectors/logos/Coda.jsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
import PropTypes from "prop-types";
12+
13+
import { colors } from "styles/theme";
14+
15+
/**
16+
* The Coda logo as SVG vector graphic component.
17+
*
18+
* @author Arctic Ice Studio <[email protected]>
19+
* @author Sven Greb <[email protected]>
20+
* @since 0.9.0
21+
*/
22+
const Coda = ({ fillColor, svgRef, ...passProps }) => (
23+
<svg {...passProps} ref={svgRef} viewBox="0 0 37.669 46" xmlns="http://www.w3.org/2000/svg">
24+
<path
25+
d="M32.207 35.731C43.904 21.943 33.175 0 33.175 0l1.502 3.643L33.175 0C19.607 14.945 8.79 10.739 2.334 23.979c-2.69 5.525-3.055 10.429-1.093 14.715.985 2.15 2.237 3.741 3.756 4.774C8.445 29.071 25.883 18.91 25.883 18.91 9.965 33.303 9.894 45.442 9.894 45.442l1.841.416-1.841-.416s10.623 4.058 22.313-9.711z"
26+
fill={fillColor}
27+
/>
28+
</svg>
29+
);
30+
31+
Coda.propTypes = {
32+
fillColor: PropTypes.string,
33+
svgRef: PropTypes.func
34+
};
35+
36+
Coda.defaultProps = {
37+
fillColor: colors.nord8,
38+
svgRef: () => {}
39+
};
40+
41+
export default Coda;

0 commit comments

Comments
 (0)