feat(Icons): add Spotify, iTunes and Website icons (#676)

Co-authored-by: anthony lee <[email protected]>

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"))
 };

catalog/pages/icons/index.md

@@ -193,6 +193,22 @@ rows:
     <div style={iconLabelStyle}>Youtube Icon</div>
   </Column>
 </Row>
+<Row>
+  <Column medium={3}>
+    <div style={iconStyle}><WebsiteIcon size={26} color="#000"><title>Website Icon</title></WebsiteIcon></div>
+    <div style={iconLabelStyle}>Website Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><SpotifyIcon size={26} color="#000"><title>Spotify Icon</title></SpotifyIcon></div>
+    <div style={iconLabelStyle}>Spotify Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><ItunesIcon size={26} color="#000"><title>Itunes Icon</title></ItunesIcon></div>
+    <div style={iconLabelStyle}>Itunes Icon</div>
+  </Column>
+</Row>
 
 <Row>
   <Column medium={3}>

src/components/Icons/Itunes.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const ItunesIcon = ({ size, color, children, ...props }) => (
+  <svg {...props} viewBox="0 0 24 24" width={size} height={size} fill={color}>
+    {children}
+    <g
+      id="Logos/Social/Fill/Itunes-24"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <polygon id="Fill-1" points="0 0 24 0 24 24 0 24" />
+      <g
+        id="itunes"
+        transform="translate(1.000000, 1.000000)"
+        fill={color}
+        fillRule="nonzero"
+      >
+        <path
+          d="M10.9762924,0.122100606 C5.10470391,0.122100606 0.345079004,4.88172551 0.345079004,10.753314 C0.345079004,16.6249438 5.10470391,21.3845687 10.9762924,21.3845687 C16.8479222,21.3845687 21.6075471,16.624985 21.6075471,10.753314 C21.6075471,4.88172551 16.8479222,0.122100606 10.9762924,0.122100606 Z M10.9762924,1.29547792 C16.1991392,1.29547792 20.434211,5.53054967 20.434211,10.7533553 C20.434211,15.9762021 16.1991392,20.2112738 10.9762924,20.2112738 C5.75348682,20.2112738 1.52728274,15.9762021 1.52728274,10.7533553 C1.52728274,5.53054967 5.75348682,1.29547792 10.9762924,1.29547792 L10.9762924,1.29547792 Z"
+          id="Shape"
+        />
+        <path
+          d="M15.4064527,3.66190639 L8.03408457,5.65543935 L8.02554687,5.65543935 L8.02554687,8.654194 L8.03408457,8.654194 L8.03408457,14.0160363 C7.71154913,13.8219376 7.31613389,13.7066992 6.891311,13.7066992 C5.79695899,13.7066992 4.91514216,14.4667197 4.91514216,15.3993916 C4.91514216,16.3323521 5.79720646,17.0835875 6.891311,17.0835875 C7.98541554,17.0835875 8.91532397,16.3315685 8.87630626,15.3994328 L8.85621997,14.9209915 L8.80755094,8.43918413 L14.6332751,6.86663828 L14.6332751,12.7869371 C14.293128,12.5524183 13.8589426,12.4088859 13.3873891,12.4088859 C12.2930371,12.4088859 11.4109316,13.1689064 11.4109316,14.1015783 C11.4109316,15.0345388 12.2930371,15.785733 13.3873891,15.785733 C14.4817412,15.785733 15.4015033,15.0345388 15.4015033,14.1015783 C15.4015033,14.0927931 15.401792,14.0845441 15.4015033,14.0757177 L15.4067414,6.6601661 L15.4067414,3.66190639 L15.4064527,3.66190639 L15.4064527,3.66190639 Z"
+          id="Path"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+ItunesIcon.displayName = "ItunesIcon";
+
+ItunesIcon.defaultProps = {
+  color: "currentColor",
+  children: null
+};
+
+ItunesIcon.propTypes = {
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default ItunesIcon;

src/components/Icons/Spotify.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const SpotifyIcon = ({ size, color, children, ...props }) => (
+  <svg {...props} viewBox="0 0 24 24" width={size} height={size} fill={color}>
+    {children}
+    <g
+      id="Logos/Social/Fill/Spotify-24"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <polygon id="Fill-1" points="0 0 24 0 24 24 0 24" />
+      <path
+        d="M17.9153601,10.8652186 C14.6919265,8.95090933 9.37494477,8.77489462 6.29779205,9.70882342 C5.80354179,9.85880611 5.28099065,9.57985742 5.13124679,9.08572657 C4.98150293,8.59123748 5.26021279,8.06904458 5.75470189,7.91882307 C9.28705683,6.84661405 15.1591894,7.05367613 18.8700668,9.25648711 C19.3145218,9.52038976 19.460325,10.0944079 19.1969,10.5381465 C18.9332362,10.9826015 18.3587404,11.1291212 17.9153601,10.8652186 Z M17.809799,13.70056 C17.5836309,14.0675161 17.1038296,14.1826302 16.7373512,13.9572979 C14.0499624,12.3054584 9.95206764,11.8268512 6.77269742,12.7919468 C6.36036445,12.9164945 5.92498477,12.6841169 5.79972057,12.2725004 C5.67553109,11.8602868 5.90802813,11.4256236 6.31964463,11.30024 C9.95158998,10.1980583 14.4667136,10.7318343 17.5533,12.6287093 C17.9197784,12.8543998 18.0351313,13.3344399 17.809799,13.70056 Z M16.5861744,16.4235339 C16.4064579,16.7182451 16.022784,16.8105513 15.7291475,16.6309542 C13.3808915,15.1957298 10.4251818,14.871643 6.94429385,15.6666945 C6.60886283,15.7435965 6.27450653,15.5334297 6.19796281,15.1979986 C6.12118028,14.862687 6.33063062,14.5283307 6.66677812,14.451787 C10.4760517,13.5810277 13.7435487,13.9557456 16.3793511,15.5663876 C16.6732264,15.7458653 16.7657715,16.129778 16.5861744,16.4235339 Z M12,2 C6.47726974,2 2,6.47715033 2,11.9998806 C2,17.5232079 6.47726974,22 12,22 C17.5229691,22 22,17.5232079 22,11.9998806 C22,6.47715033 17.5229691,2 12,2 L12,2 Z"
+        id="Spotify_Icon_RGB_Black"
+        fill={color}
+      />
+    </g>
+  </svg>
+);
+
+SpotifyIcon.displayName = "SpotifyIcon";
+
+SpotifyIcon.defaultProps = {
+  color: "currentColor",
+  children: null
+};
+
+SpotifyIcon.propTypes = {
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default SpotifyIcon;

src/components/Icons/Website.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const WebsiteIcon = ({ size, color, children, ...props }) => (
+  <svg {...props} viewBox="0 0 24 24" width={size} height={size} fill={color}>
+    {children}
+    <g
+      id="Logos/Social/Fill/Website-24"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <polygon id="Fill-1" points="0 0 24 0 24 24 0 24" />
+      <g
+        id="Group"
+        transform="translate(1.000000, 2.000000)"
+        fill={color}
+        fillRule="nonzero"
+      >
+        <path
+          d="M12.6691529,20.1490264 C13.7252353,18.283676 14.4759436,16.2613129 14.892792,14.1586766 L20.2098902,14.1586766 C18.8799242,17.3089179 16.038575,19.5660812 12.6691529,20.1490264 L12.6691529,20.1490264 Z"
+          id="Path"
+        />
+        <path
+          d="M9.9183763,19.2911127 C10.1239633,19.6733159 10.5228751,19.9117014 10.9568627,19.9117014 C11.3908504,19.9117014 11.7897622,19.6733159 11.9953492,19.2911127 C12.8623885,17.6789552 13.4929587,15.9504339 13.8676784,14.1586766 L8.04604706,14.1586766 C8.42076679,15.9504339 9.05133696,17.6789552 9.9183763,19.2911127 L9.9183763,19.2911127 Z"
+          id="Path"
+        />
+        <path
+          d="M9.24474527,20.1490264 C5.87532313,19.5660813 3.03397375,17.308918 1.70400767,14.1586766 L7.02110571,14.1586766 C7.43795423,16.2613129 8.18866277,18.2836761 9.24474527,20.1490264 L9.24474527,20.1490264 Z"
+          id="Path"
+        />
+        <path
+          d="M15.0655137,7.35016837 C15.3464951,9.27467237 15.3464951,11.229782 15.0655137,13.154286 L20.5722431,13.154286 C21.1434398,11.2617397 21.1434398,9.24271466 20.5722431,7.35016837 L15.0655137,7.35016837 Z"
+          id="Path"
+        />
+        <path
+          d="M14.0498902,13.154286 C14.3458297,11.2308971 14.3458297,9.27355726 14.0498902,7.35016837 L7.86383547,7.35016837 C7.56789599,9.27355726 7.56789599,11.2308971 7.86383547,13.154286 L14.0498902,13.154286 Z"
+          id="Path"
+        />
+        <path
+          d="M6.84821176,13.154286 C6.56723035,11.229782 6.56723035,9.27467237 6.84821176,7.35016837 L1.34148218,7.35016837 C0.770285507,9.24271466 0.770285507,11.2617397 1.34148218,13.154286 L6.84821176,13.154286 Z"
+          id="Path"
+        />
+        <path
+          d="M12.6691529,0.355462484 C13.7252335,2.22080751 14.4759419,4.24316471 14.892792,6.34579503 L20.2098902,6.34579503 C18.8799195,3.19556042 16.0385711,0.938404235 12.6691529,0.355462484 L12.6691529,0.355462484 Z"
+          id="Path"
+        />
+        <path
+          d="M9.9183763,1.21335895 C9.05133696,2.82551643 8.42076679,4.55403778 8.04604706,6.34579503 L13.8676784,6.34579503 C13.4929571,4.55404372 12.862387,2.82552828 11.9953492,1.21337621 C11.7897653,0.831171298 11.3908556,0.592778866 10.9568679,0.592778866 C10.5228802,0.592778866 10.1239665,0.831157459 9.9183763,1.21335895 L9.9183763,1.21335895 Z"
+          id="Path"
+        />
+        <path
+          d="M1.70400767,6.34579503 L7.02110571,6.34579503 C7.437956,4.24316468 8.18866449,2.22080747 9.24474527,0.355462484 C5.87532694,0.938404127 3.0339784,3.19556033 1.70400767,6.34579503 L1.70400767,6.34579503 Z"
+          id="Path"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+WebsiteIcon.displayName = "WebsiteIcon";
+
+WebsiteIcon.defaultProps = {
+  color: "currentColor",
+  children: null
+};
+
+WebsiteIcon.propTypes = {
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default WebsiteIcon;

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 = <title>Itunes Icon</title>;
+
+  it("renders correctly", () => {
+    const component = renderer.create(
+      <ItunesIcon size={22}>{children}</ItunesIcon>
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when a color prop is passed", () => {
+    const component = renderer.create(
+      <ItunesIcon color={tm.primary.base} size={22}>
+        {children}
+      </ItunesIcon>
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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 = <title>Spotify Icon</title>;
+
+  it("renders correctly", () => {
+    const component = renderer.create(
+      <SpotifyIcon size={22}>{children}</SpotifyIcon>
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when a color prop is passed", () => {
+    const component = renderer.create(
+      <SpotifyIcon color={tm.primary.base} size={22}>
+        {children}
+      </SpotifyIcon>
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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 = <title>Website Icon</title>;
+
+  it("renders correctly", () => {
+    const component = renderer.create(
+      <WebsiteIcon size={22}>{children}</WebsiteIcon>
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when a color prop is passed", () => {
+    const component = renderer.create(
+      <WebsiteIcon color={tm.primary.base} size={22}>
+        {children}
+      </WebsiteIcon>
+    );
+
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});

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`] = `
+<svg
+  fill="currentColor"
+  height={22}
+  viewBox="0 0 24 24"
+  width={22}
+>
+  <title>
+    Itunes Icon
+  </title>
+  <g
+    fill="none"
+    fillRule="evenodd"
+    id="Logos/Social/Fill/Spotify-24"
+    stroke="none"
+    strokeWidth="1"
+  >
+    <polygon
+      id="Fill-1"
+      points="0 0 24 0 24 24 0 24"
+    />
+    <path
+      d="M17.9153601,10.8652186 C14.6919265,8.95090933 9.37494477,8.77489462 6.29779205,9.70882342 C5.80354179,9.85880611 5.28099065,9.57985742 5.13124679,9.08572657 C4.98150293,8.59123748 5.26021279,8.06904458 5.75470189,7.91882307 C9.28705683,6.84661405 15.1591894,7.05367613 18.8700668,9.25648711 C19.3145218,9.52038976 19.460325,10.0944079 19.1969,10.5381465 C18.9332362,10.9826015 18.3587404,11.1291212 17.9153601,10.8652186 Z M17.809799,13.70056 C17.5836309,14.0675161 17.1038296,14.1826302 16.7373512,13.9572979 C14.0499624,12.3054584 9.95206764,11.8268512 6.77269742,12.7919468 C6.36036445,12.9164945 5.92498477,12.6841169 5.79972057,12.2725004 C5.67553109,11.8602868 5.90802813,11.4256236 6.31964463,11.30024 C9.95158998,10.1980583 14.4667136,10.7318343 17.5533,12.6287093 C17.9197784,12.8543998 18.0351313,13.3344399 17.809799,13.70056 Z M16.5861744,16.4235339 C16.4064579,16.7182451 16.022784,16.8105513 15.7291475,16.6309542 C13.3808915,15.1957298 10.4251818,14.871643 6.94429385,15.6666945 C6.60886283,15.7435965 6.27450653,15.5334297 6.19796281,15.1979986 C6.12118028,14.862687 6.33063062,14.5283307 6.66677812,14.451787 C10.4760517,13.5810277 13.7435487,13.9557456 16.3793511,15.5663876 C16.6732264,15.7458653 16.7657715,16.129778 16.5861744,16.4235339 Z M12,2 C6.47726974,2 2,6.47715033 2,11.9998806 C2,17.5232079 6.47726974,22 12,22 C17.5229691,22 22,17.5232079 22,11.9998806 C22,6.47715033 17.5229691,2 12,2 L12,2 Z"
+      fill="currentColor"
+      id="Spotify_Icon_RGB_Black"
+    />
+  </g>
+</svg>
+`;
+
+exports[`ItunesIcon renders correctly when a color prop is passed 1`] = `
+<svg
+  fill="#026cdf"
+  height={22}
+  viewBox="0 0 24 24"
+  width={22}
+>
+  <title>
+    Itunes Icon
+  </title>
+  <g
+    fill="none"
+    fillRule="evenodd"
+    id="Logos/Social/Fill/Spotify-24"
+    stroke="none"
+    strokeWidth="1"
+  >
+    <polygon
+      id="Fill-1"
+      points="0 0 24 0 24 24 0 24"
+    />
+    <path
+      d="M17.9153601,10.8652186 C14.6919265,8.95090933 9.37494477,8.77489462 6.29779205,9.70882342 C5.80354179,9.85880611 5.28099065,9.57985742 5.13124679,9.08572657 C4.98150293,8.59123748 5.26021279,8.06904458 5.75470189,7.91882307 C9.28705683,6.84661405 15.1591894,7.05367613 18.8700668,9.25648711 C19.3145218,9.52038976 19.460325,10.0944079 19.1969,10.5381465 C18.9332362,10.9826015 18.3587404,11.1291212 17.9153601,10.8652186 Z M17.809799,13.70056 C17.5836309,14.0675161 17.1038296,14.1826302 16.7373512,13.9572979 C14.0499624,12.3054584 9.95206764,11.8268512 6.77269742,12.7919468 C6.36036445,12.9164945 5.92498477,12.6841169 5.79972057,12.2725004 C5.67553109,11.8602868 5.90802813,11.4256236 6.31964463,11.30024 C9.95158998,10.1980583 14.4667136,10.7318343 17.5533,12.6287093 C17.9197784,12.8543998 18.0351313,13.3344399 17.809799,13.70056 Z M16.5861744,16.4235339 C16.4064579,16.7182451 16.022784,16.8105513 15.7291475,16.6309542 C13.3808915,15.1957298 10.4251818,14.871643 6.94429385,15.6666945 C6.60886283,15.7435965 6.27450653,15.5334297 6.19796281,15.1979986 C6.12118028,14.862687 6.33063062,14.5283307 6.66677812,14.451787 C10.4760517,13.5810277 13.7435487,13.9557456 16.3793511,15.5663876 C16.6732264,15.7458653 16.7657715,16.129778 16.5861744,16.4235339 Z M12,2 C6.47726974,2 2,6.47715033 2,11.9998806 C2,17.5232079 6.47726974,22 12,22 C17.5229691,22 22,17.5232079 22,11.9998806 C22,6.47715033 17.5229691,2 12,2 L12,2 Z"
+      fill="#026cdf"
+      id="Spotify_Icon_RGB_Black"
+    />
+  </g>
+</svg>
+`;