Adds lil booklet, contact, and troubleshoot images (#49)

* add booklet-image * add contact and troubleshoot images * make all images' size configurable
mapbox · Aug 10, 2018 · 710e346 · 710e346
1 parent 82613b8
commit 710e346
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 6 deletions.
diff --git a/src/components/book-image/book-image.js b/src/components/book-image/book-image.js
@@ -1,14 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class BookImage extends React.Component {
   render() {
+    const { props } = this;
     return (
       <svg
         id="Layer_1"
         data-name="Layer 1"
         xmlns="http://www.w3.org/2000/svg"
-        width="108"
-        height="108"
+        width={props.width}
+        height={props.height}
         viewBox="0 0 108 108"
       >
         <title>help</title>
@@ -35,3 +37,8 @@ export default class BookImage extends React.Component {
     );
   }
 }
+
+BookImage.propTypes = {
+  width: PropTypes.string.isRequired,
+  height: PropTypes.string.isRequired
+};
diff --git a/src/components/booklet-image/booklet-image.js b/src/components/booklet-image/booklet-image.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class BookletImage extends React.Component {
+  render() {
+    const { props } = this;
+    return (
+      <svg
+        id="Layer_1"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.width}
+        height={props.height}
+        viewBox="0 0 108 108"
+      >
+        <title>help</title>
+        <circle cx="53" cy="55" r="45" fill="#83e5af" />
+        <path
+          d="M63.2378,70H39.8685a5.8873,5.8873,0,0,0-5.7527,4.8416,6.137,6.137,0,0,0-.1092.8683A5.8982,5.8982,0,0,0,39.7622,82H63.77A5.341,5.341,0,0,0,69,76.5544V64A5.8847,5.8847,0,0,1,63.2378,70Z"
+          fill="#30aa67"
+        />
+        <rect
+          x="39"
+          y="38"
+          width="34"
+          height="39"
+          rx="4.7443"
+          ry="4.7443"
+          fill="#3dbc7d"
+        />
+        <path
+          d="M63.2378,70.2569A5.7919,5.7919,0,0,0,69,64.4358V32.2566A4.2566,4.2566,0,0,0,64.7434,28H38.2566A4.2566,4.2566,0,0,0,34,32.2566V75h.107a5.9177,5.9177,0,0,1,5.8179-4.7431"
+          fill="#4bd18b"
+        />
+        <rect
+          x="39"
+          y="33"
+          width="25"
+          height="15"
+          rx="2.1365"
+          ry="2.1365"
+          fill="#3dbc7d"
+        />
+      </svg>
+    );
+  }
+}
+
+BookletImage.propTypes = {
+  width: PropTypes.string.isRequired,
+  height: PropTypes.string.isRequired
+};
diff --git a/src/components/booklet-image/index.js b/src/components/booklet-image/index.js
@@ -0,0 +1,3 @@
+import main from './booklet-image';
+
+export default main;
diff --git a/src/components/contact-image/contact-image.js b/src/components/contact-image/contact-image.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ContactImage extends React.Component {
+  render() {
+    const { props } = this;
+    return (
+      <svg
+        id="Layer_1"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.width}
+        height={props.height}
+        viewBox="0 0 108 108"
+      >
+        <title>help</title>
+        <circle cx="53" cy="54" r="45" fill="#ada0ea" />
+        <rect
+          x="25.7418"
+          y="44.8515"
+          width="31.0206"
+          height="28.5389"
+          rx="8.6736"
+          ry="8.6736"
+          transform="translate(0.6265 -0.4322) rotate(0.6049)"
+          fill="#9179e8"
+        />
+        <polygon
+          points="29.114 79.175 55.156 56 29 55.724 29.114 79.175"
+          fill="#9179e8"
+        />
+        <rect
+          x="34.5315"
+          y="32.6076"
+          width="44.6696"
+          height="33.5022"
+          rx="8.6082"
+          ry="8.6082"
+          transform="translate(0.5243 -0.5976) rotate(0.6049)"
+          fill="#784def"
+        />
+        <polygon
+          points="69.805 75.432 39.181 47 70.534 47.331 69.805 75.432"
+          fill="#784def"
+        />
+        <circle
+          cx="45"
+          cy="49"
+          r="3"
+          transform="translate(-4.4724 93.4802) rotate(-89.3951)"
+          fill="#fff"
+        />
+        <circle
+          cx="56"
+          cy="49"
+          r="3"
+          transform="translate(6.4115 104.4796) rotate(-89.3951)"
+          fill="#fff"
+        />
+        <circle
+          cx="67"
+          cy="49"
+          r="3"
+          transform="translate(17.2954 115.4789) rotate(-89.3951)"
+          fill="#fff"
+        />
+      </svg>
+    );
+  }
+}
+
+ContactImage.propTypes = {
+  width: PropTypes.string.isRequired,
+  height: PropTypes.string.isRequired
+};
diff --git a/src/components/contact-image/index.js b/src/components/contact-image/index.js
@@ -0,0 +1,3 @@
+import main from './contact-image';
+
+export default main;
diff --git a/src/components/note/__tests__/note-test-cases.js b/src/components/note/__tests__/note-test-cases.js
@@ -1,16 +1,46 @@
 import React from 'react';
 import Note from '../note';
 import BookImage from '../../book-image/book-image';
+import BookletImage from '../../booklet-image/booklet-image';
+import ContactImage from '../../contact-image/contact-image';
+import TroubleshootImage from '../../troubleshoot-image/troubleshoot-image';
 
 const testCases = {};
 const noRenderCases = {};
 
-testCases.basic = {
+testCases.basicBook = {
   component: Note,
   description: 'A basic note',
   props: {
     children: <div>Here is a little thing to note.</div>,
-    imageComponent: <BookImage />
+    imageComponent: <BookImage width="60" height="60" />
+  }
+};
+
+testCases.basicBooklet = {
+  component: Note,
+  description: 'A basic note with a booklet image',
+  props: {
+    children: <div>Here is a little thing to note.</div>,
+    imageComponent: <BookletImage width="60" height="60" />
+  }
+};
+
+testCases.basicContact = {
+  component: Note,
+  description: 'A basic note with a contact image',
+  props: {
+    children: <div>Here is a little thing to note.</div>,
+    imageComponent: <ContactImage width="60" height="60" />
+  }
+};
+
+testCases.basicTroubleshoot = {
+  component: Note,
+  description: 'A basic note with a troubleshoot image',
+  props: {
+    children: <div>Here is a little thing to note.</div>,
+    imageComponent: <TroubleshootImage width="60" height="60" />
   }
 };
 
@@ -19,7 +49,7 @@ testCases.basicThemed = {
   description: 'A basic themed note',
   props: {
     children: <div>Here is a little note with pretty colors.</div>,
-    imageComponent: <BookImage />,
+    imageComponent: <BookImage width="60" height="60" />,
     theme: {
       padding: '10px 10px 10px',
       background: 'pink',
@@ -59,7 +89,7 @@ testCases.customTitle = {
         </p>
       </div>
     ),
-    imageComponent: <BookImage />
+    imageComponent: <BookImage width="60" height="60" />
   }
 };
 

diff --git a/src/components/troubleshoot-image/index.js b/src/components/troubleshoot-image/index.js
@@ -0,0 +1,3 @@
+import main from './troubleshoot-image';
+
+export default main;
diff --git a/src/components/troubleshoot-image/troubleshoot-image.js b/src/components/troubleshoot-image/troubleshoot-image.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class TroubleshootImage extends React.Component {
+  render() {
+    const { props } = this;
+    return (
+      <svg
+        id="Layer_1"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.width}
+        height={props.height}
+        viewBox="0 0 108 108"
+      >
+        <title>help</title>
+        <circle cx="53" cy="55" r="45" fill="#ffb9a9" />
+        <path
+          d="M25.0084,35.8985H62.6662a0,0,0,0,1,0,0V77.808a0,0,0,0,1,0,0H30.7175a5.7091,5.7091,0,0,1-5.7091-5.7091v-36.2A0,0,0,0,1,25.0084,35.8985Z"
+          fill="#fff"
+        />
+        <path
+          d="M62.6662,35.8985H82.71a0,0,0,0,1,0,0v36.2a5.7091,5.7091,0,0,1-5.7091,5.7091H62.6662a0,0,0,0,1,0,0V35.8985A0,0,0,0,1,62.6662,35.8985Z"
+          fill="#fc7e5b"
+        />
+        <circle cx="43.607" cy="62.393" r="9.393" fill="#fc7e5b" />
+        <line
+          x1="37.5"
+          y1="62.3197"
+          x2="49.5"
+          y2="62.3197"
+          fill="none"
+          stroke="#fff"
+          strokeMiterlimit="10"
+          strokeWidth="3"
+        />
+        <line
+          x1="43.5179"
+          y1="56.5"
+          x2="43.5"
+          y2="67.5"
+          fill="none"
+          stroke="#fff"
+          strokeMiterlimit="10"
+          strokeWidth="3"
+        />
+        <path
+          d="M55.4484,48.6536H21.9706a1.6516,1.6516,0,0,1-1.536-2.2586l4.388-11.1038H62.6662l-5.718,12.4023A1.6516,1.6516,0,0,1,55.4484,48.6536Z"
+          fill="#d85a3d"
+        />
+        <path
+          d="M69.5624,48.6536H86.3467A1.6516,1.6516,0,0,0,87.8808,46.39L83.4536,35.2911H62.6662l5.3816,12.37A1.6516,1.6516,0,0,0,69.5624,48.6536Z"
+          fill="#d85a3d"
+        />
+      </svg>
+    );
+  }
+}
+
+TroubleshootImage.propTypes = {
+  width: PropTypes.string.isRequired,
+  height: PropTypes.string.isRequired
+};