From ff6f8d367474229c8df8794bcbd3e0e1f5715c7a Mon Sep 17 00:00:00 2001 From: Anthony Lee Date: Fri, 21 Aug 2020 12:13:04 -0700 Subject: [PATCH] feat(Icons): add Spotify, iTunes and Website icons (#676) Co-authored-by: anthony lee --- catalog/pages/icons/index.js | 10 +- catalog/pages/icons/index.md | 16 ++ src/components/Icons/Itunes.js | 47 ++++++ src/components/Icons/Spotify.js | 37 +++++ src/components/Icons/Website.js | 75 ++++++++++ src/components/Icons/__tests__/Itunes.spec.js | 29 ++++ .../Icons/__tests__/Spotify.spec.js | 29 ++++ .../Icons/__tests__/Website.spec.js | 29 ++++ .../__snapshots__/Itunes.spec.js.snap | 61 ++++++++ .../__snapshots__/Spotify.spec.js.snap | 61 ++++++++ .../__snapshots__/Website.spec.js.snap | 137 ++++++++++++++++++ src/components/Icons/index.js | 3 + 12 files changed, 532 insertions(+), 2 deletions(-) create mode 100644 src/components/Icons/Itunes.js create mode 100644 src/components/Icons/Spotify.js create mode 100644 src/components/Icons/Website.js create mode 100644 src/components/Icons/__tests__/Itunes.spec.js create mode 100644 src/components/Icons/__tests__/Spotify.spec.js create mode 100644 src/components/Icons/__tests__/Website.spec.js create mode 100644 src/components/Icons/__tests__/__snapshots__/Itunes.spec.js.snap create mode 100644 src/components/Icons/__tests__/__snapshots__/Spotify.spec.js.snap create mode 100644 src/components/Icons/__tests__/__snapshots__/Website.spec.js.snap diff --git a/catalog/pages/icons/index.js b/catalog/pages/icons/index.js index 7baa2a392..5fe1eb2f0 100644 --- a/catalog/pages/icons/index.js +++ b/catalog/pages/icons/index.js @@ -56,7 +56,10 @@ import { PrintIcon, FavoriteIcon, LaunchIcon, - PlayCircularIcon + PlayCircularIcon, + SpotifyIcon, + ItunesIcon, + WebsiteIcon } from "../../../src/components/Icons/index"; import { Container, Row, Column } from "../../../src/components/Grid"; import { themes } from "../../../src/theme"; @@ -140,7 +143,10 @@ export default { PrintIcon, FavoriteIcon, LaunchIcon, - PlayCircularIcon + PlayCircularIcon, + SpotifyIcon, + ItunesIcon, + WebsiteIcon }, content: pageLoader(() => import("./index.md")) }; diff --git a/catalog/pages/icons/index.md b/catalog/pages/icons/index.md index 89e1ff1cb..c4d6524c3 100644 --- a/catalog/pages/icons/index.md +++ b/catalog/pages/icons/index.md @@ -193,6 +193,22 @@ rows:
Youtube Icon
+ + +
Website Icon
+
Website Icon
+ + + +
Spotify Icon
+
Spotify Icon
+ + + +
Itunes Icon
+
Itunes Icon
+ + diff --git a/src/components/Icons/Itunes.js b/src/components/Icons/Itunes.js new file mode 100644 index 000000000..931ceb347 --- /dev/null +++ b/src/components/Icons/Itunes.js @@ -0,0 +1,47 @@ +import React from "react"; +import { PropTypes } from "prop-types"; + +const ItunesIcon = ({ size, color, children, ...props }) => ( + + {children} + + + + + + + + +); + +ItunesIcon.displayName = "ItunesIcon"; + +ItunesIcon.defaultProps = { + color: "currentColor", + children: null +}; + +ItunesIcon.propTypes = { + size: PropTypes.number.isRequired, + color: PropTypes.string, + children: PropTypes.node +}; + +export default ItunesIcon; diff --git a/src/components/Icons/Spotify.js b/src/components/Icons/Spotify.js new file mode 100644 index 000000000..e2adc6e5b --- /dev/null +++ b/src/components/Icons/Spotify.js @@ -0,0 +1,37 @@ +import React from "react"; +import { PropTypes } from "prop-types"; + +const SpotifyIcon = ({ size, color, children, ...props }) => ( + + {children} + + + + + +); + +SpotifyIcon.displayName = "SpotifyIcon"; + +SpotifyIcon.defaultProps = { + color: "currentColor", + children: null +}; + +SpotifyIcon.propTypes = { + size: PropTypes.number.isRequired, + color: PropTypes.string, + children: PropTypes.node +}; + +export default SpotifyIcon; diff --git a/src/components/Icons/Website.js b/src/components/Icons/Website.js new file mode 100644 index 000000000..71168e25f --- /dev/null +++ b/src/components/Icons/Website.js @@ -0,0 +1,75 @@ +import React from "react"; +import { PropTypes } from "prop-types"; + +const WebsiteIcon = ({ size, color, children, ...props }) => ( + + {children} + + + + + + + + + + + + + + + +); + +WebsiteIcon.displayName = "WebsiteIcon"; + +WebsiteIcon.defaultProps = { + color: "currentColor", + children: null +}; + +WebsiteIcon.propTypes = { + size: PropTypes.number.isRequired, + color: PropTypes.string, + children: PropTypes.node +}; + +export default WebsiteIcon; diff --git a/src/components/Icons/__tests__/Itunes.spec.js b/src/components/Icons/__tests__/Itunes.spec.js new file mode 100644 index 000000000..433372eab --- /dev/null +++ b/src/components/Icons/__tests__/Itunes.spec.js @@ -0,0 +1,29 @@ +import React from "react"; +import renderer from "react-test-renderer"; + +import ItunesIcon from "../Spotify"; +import themes from "../../../theme/colorThemes"; + +const { tm } = themes; + +describe("ItunesIcon", () => { + const children = Itunes Icon; + + it("renders correctly", () => { + const component = renderer.create( + {children} + ); + + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders correctly when a color prop is passed", () => { + const component = renderer.create( + + {children} + + ); + + expect(component.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/src/components/Icons/__tests__/Spotify.spec.js b/src/components/Icons/__tests__/Spotify.spec.js new file mode 100644 index 000000000..49cf993f4 --- /dev/null +++ b/src/components/Icons/__tests__/Spotify.spec.js @@ -0,0 +1,29 @@ +import React from "react"; +import renderer from "react-test-renderer"; + +import SpotifyIcon from "../Spotify"; +import themes from "../../../theme/colorThemes"; + +const { tm } = themes; + +describe("SpotifyIcon", () => { + const children = Spotify Icon; + + it("renders correctly", () => { + const component = renderer.create( + {children} + ); + + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders correctly when a color prop is passed", () => { + const component = renderer.create( + + {children} + + ); + + expect(component.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/src/components/Icons/__tests__/Website.spec.js b/src/components/Icons/__tests__/Website.spec.js new file mode 100644 index 000000000..7034201b5 --- /dev/null +++ b/src/components/Icons/__tests__/Website.spec.js @@ -0,0 +1,29 @@ +import React from "react"; +import renderer from "react-test-renderer"; + +import WebsiteIcon from "../Website"; +import themes from "../../../theme/colorThemes"; + +const { tm } = themes; + +describe("WebsiteIcon", () => { + const children = Website Icon; + + it("renders correctly", () => { + const component = renderer.create( + {children} + ); + + expect(component.toJSON()).toMatchSnapshot(); + }); + + it("renders correctly when a color prop is passed", () => { + const component = renderer.create( + + {children} + + ); + + expect(component.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/src/components/Icons/__tests__/__snapshots__/Itunes.spec.js.snap b/src/components/Icons/__tests__/__snapshots__/Itunes.spec.js.snap new file mode 100644 index 000000000..03d2fbe33 --- /dev/null +++ b/src/components/Icons/__tests__/__snapshots__/Itunes.spec.js.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ItunesIcon renders correctly 1`] = ` + + + Itunes Icon + + + + + + +`; + +exports[`ItunesIcon renders correctly when a color prop is passed 1`] = ` + + + Itunes Icon + + + + + + +`; diff --git a/src/components/Icons/__tests__/__snapshots__/Spotify.spec.js.snap b/src/components/Icons/__tests__/__snapshots__/Spotify.spec.js.snap new file mode 100644 index 000000000..f160e0878 --- /dev/null +++ b/src/components/Icons/__tests__/__snapshots__/Spotify.spec.js.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SpotifyIcon renders correctly 1`] = ` + + + Spotify Icon + + + + + + +`; + +exports[`SpotifyIcon renders correctly when a color prop is passed 1`] = ` + + + Spotify Icon + + + + + + +`; diff --git a/src/components/Icons/__tests__/__snapshots__/Website.spec.js.snap b/src/components/Icons/__tests__/__snapshots__/Website.spec.js.snap new file mode 100644 index 000000000..a73e7f5f2 --- /dev/null +++ b/src/components/Icons/__tests__/__snapshots__/Website.spec.js.snap @@ -0,0 +1,137 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`WebsiteIcon renders correctly 1`] = ` + + + Website Icon + + + + + + + + + + + + + + + + +`; + +exports[`WebsiteIcon renders correctly when a color prop is passed 1`] = ` + + + Website Icon + + + + + + + + + + + + + + + + +`; diff --git a/src/components/Icons/index.js b/src/components/Icons/index.js index 7adc6c8ab..0087d0d85 100644 --- a/src/components/Icons/index.js +++ b/src/components/Icons/index.js @@ -87,3 +87,6 @@ export { default as FraudulentActivityIcon } from "./FraudulentActivity"; export { default as PrintIcon } from "./Print"; export { default as LaunchIcon } from "./Launch"; export { default as PlayCircularIcon } from "./PlayCircular"; +export { default as ItunesIcon } from "./Itunes"; +export { default as WebsiteIcon } from "./Website"; +export { default as SpotifyIcon } from "./Spotify";