Add icons (#1616)

* added lock icon * fixed flow errors * added the capability to add an icon * passing an icon to the custom dates and using custom styling to position it. also updated snapshots * added cursor pointer to the print button and updated test snapshots * updated checkout button snapshots * moved schedule icon to a variable to increase performance
NewSpring · Dec 19, 2016 · 5b15277 · 5b15277
1 parent 396c21b
commit 5b15277
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 7 deletions.
diff --git a/.types/file-saver.js b/.types/file-saver.js
@@ -0,0 +1,3 @@
+declare module "file-saver" {
+  declare var exports: any;
+}
diff --git a/imports/blocks/checkout-buttons/buttons/Primary.js b/imports/blocks/checkout-buttons/buttons/Primary.js
@@ -60,9 +60,8 @@ const PrimaryButton = ({
       data-id={dataId}
       style={style}
     >
-      {message}
+      {message} <span className="icon-lock" />
     </button>
-
   );
 };
 

diff --git a/imports/blocks/checkout-buttons/buttons/__tests__/__snapshots__/Primary.js.snap b/imports/blocks/checkout-buttons/buttons/__tests__/__snapshots__/Primary.js.snap
@@ -7,6 +7,9 @@ exports[`ButtonText overrides if signed in and override 1`] = `
   style={undefined}
   value={undefined}>
   Give Later
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -19,6 +22,9 @@ exports[`ButtonText says \`Give Now\` if signed in and no override 1`] = `
   style={undefined}
   value={undefined}>
   Review Contribution
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -31,6 +37,9 @@ exports[`ButtonText says \`Review Your Gift\` if signed in 1`] = `
   style={undefined}
   value={undefined}>
   Review Contribution
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -43,6 +52,9 @@ exports[`ButtonText says \`Sign In\` if not userId 1`] = `
   style={undefined}
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -55,6 +67,9 @@ exports[`PrimaryButton has default styles when disabled but not logged in 1`] =
   style={undefined}
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -67,6 +82,9 @@ exports[`PrimaryButton has disabled style when disabled and logged in 1`] = `
   style={undefined}
   value={undefined}>
   Review Contribution
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -79,6 +97,9 @@ exports[`PrimaryButton has enabled styles when enabled 1`] = `
   style={undefined}
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -91,6 +112,9 @@ exports[`PrimaryButton overrides classes with theme if theme 1`] = `
   style={undefined}
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -107,6 +131,9 @@ exports[`PrimaryButton passes a style object 1`] = `
   }
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -119,6 +146,9 @@ exports[`PrimaryButton passes a value 1`] = `
   style={undefined}
   value="test">
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -131,6 +161,9 @@ exports[`PrimaryButton passes the onClick function 1`] = `
   style={undefined}
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 
@@ -143,6 +176,9 @@ exports[`PrimaryButton renders with minimum props 1`] = `
   style={undefined}
   value={undefined}>
   Sign In
+   
+  <span
+    className="icon-lock" />
 </button>
 `;
 

diff --git a/imports/components/tags/index.js b/imports/components/tags/index.js
@@ -17,6 +17,7 @@ class TagWithoutData extends Component {
     urlKey: PropTypes.string,
     router: PropTypes.object,
     location: PropTypes.object,
+    icon: PropTypes.any,
   }
 
   static defaultProps = {
@@ -121,7 +122,7 @@ class TagWithoutData extends Component {
         style={style}
         onClick={this.onClick}
       >
-        {label || val}
+        {label || val}{this.props.icon ? this.props.icon : ""}
       </span>
     );
   }

diff --git a/imports/pages/give/history/Filter.js b/imports/pages/give/history/Filter.js
@@ -2,8 +2,6 @@
 import { Component, PropTypes } from "react";
 import moment from "moment";
 
-// import Date from "../../../blocks/add-to-cart/Schedule/Date";
-
 import TagSelect from "../../../components/forms/TagSelect";
 import Tag from "../../../components/tags";
 import Date from "../../../blocks/add-to-cart/Schedule/Date";
@@ -15,6 +13,8 @@ const DATE_RANGES = [
   { label: "All Time", value: "AllTime" },
 ];
 
+const scheduleIcon = <span className="icon-calendar push-half-left" style={{ position: "relative", top: "-2px" }} />;
+
 export default class Filter extends Component {
 
   static propTypes = {
@@ -297,6 +297,7 @@ export default class Filter extends Component {
                   onClick={this.startClick}
                   active={this.state.customStartActive}
                   className={this.state.customDateDisabled && "tag--disabled"}
+                  icon={!this.state.customStartActive && scheduleIcon}
                 />
                 <Tag
                   key={2}
@@ -305,6 +306,7 @@ export default class Filter extends Component {
                   onClick={this.startClick}
                   active={this.state.customEndActive}
                   className={this.state.customDateDisabled && "tag--disabled"}
+                  icon={!this.state.customEndActive && scheduleIcon}
                 />
               </div>
             </div>

diff --git a/imports/pages/give/history/Layout.js b/imports/pages/give/history/Layout.js
@@ -151,6 +151,7 @@ export default ({
         bottom: "175px",
         left: "58.33%",
         zIndex: 10,
+        cursor: "pointer",
       }}
     >
       <div

diff --git a/imports/pages/give/history/__tests__/__snapshots__/Filter.js.snap b/imports/pages/give/history/__tests__/__snapshots__/Filter.js.snap
@@ -69,12 +69,32 @@ exports[`test doesn't render family members if there are none 1`] = `
         <withRouter(Connect(TagWithoutData))
           active={false}
           className={false}
+          icon={
+            <span
+              className="icon-calendar push-half-left"
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-2px",
+                }
+              } />
+          }
           label="Start Date"
           onClick={[Function]}
           val="StartDate" />
         <withRouter(Connect(TagWithoutData))
           active={false}
           className={false}
+          icon={
+            <span
+              className="icon-calendar push-half-left"
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-2px",
+                }
+              } />
+          }
           label="End Date"
           onClick={[Function]}
           val="EndDate" />
@@ -203,12 +223,32 @@ exports[`test renders family members when expanded is true 1`] = `
         <withRouter(Connect(TagWithoutData))
           active={false}
           className={false}
+          icon={
+            <span
+              className="icon-calendar push-half-left"
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-2px",
+                }
+              } />
+          }
           label="Start Date"
           onClick={[Function]}
           val="StartDate" />
         <withRouter(Connect(TagWithoutData))
           active={false}
           className={false}
+          icon={
+            <span
+              className="icon-calendar push-half-left"
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-2px",
+                }
+              } />
+          }
           label="End Date"
           onClick={[Function]}
           val="EndDate" />
@@ -365,12 +405,32 @@ exports[`test works with nickname 1`] = `
         <withRouter(Connect(TagWithoutData))
           active={false}
           className={false}
+          icon={
+            <span
+              className="icon-calendar push-half-left"
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-2px",
+                }
+              } />
+          }
           label="Start Date"
           onClick={[Function]}
           val="StartDate" />
         <withRouter(Connect(TagWithoutData))
           active={false}
           className={false}
+          icon={
+            <span
+              className="icon-calendar push-half-left"
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-2px",
+                }
+              } />
+          }
           label="End Date"
           onClick={[Function]}
           val="EndDate" />

diff --git a/imports/pages/give/history/__tests__/__snapshots__/Layout.js.snap b/imports/pages/give/history/__tests__/__snapshots__/Layout.js.snap
@@ -40,6 +40,7 @@ exports[`Layout renders no transactions if there are none and ready 1`] = `
     style={
       Object {
         "bottom": "175px",
+        "cursor": "pointer",
         "left": "58.33%",
         "zIndex": 10,
       }
@@ -100,6 +101,7 @@ exports[`Layout renders reloading if no transactions and not ready 1`] = `
     style={
       Object {
         "bottom": "175px",
+        "cursor": "pointer",
         "left": "58.33%",
         "zIndex": 10,
       }
@@ -213,6 +215,7 @@ exports[`Layout renders reloading version 1`] = `
     style={
       Object {
         "bottom": "175px",
+        "cursor": "pointer",
         "left": "58.33%",
         "zIndex": 10,
       }
@@ -314,6 +317,7 @@ exports[`Layout renders with negative transactions 1`] = `
     style={
       Object {
         "bottom": "175px",
+        "cursor": "pointer",
         "left": "58.33%",
         "zIndex": 10,
       }
@@ -419,6 +423,7 @@ exports[`Layout renders with props 1`] = `
     style={
       Object {
         "bottom": "175px",
+        "cursor": "pointer",
         "left": "58.33%",
         "zIndex": 10,
       }

diff --git a/imports/pages/give/history/index.js b/imports/pages/give/history/index.js
@@ -24,7 +24,7 @@ class TemplateWithoutData extends Component {
       family: PropTypes.array, // eslint-disable-line
     }),
     setRightProps: PropTypes.func,
-    currentVariables: PropTypes.obj,
+    currentVariables: PropTypes.object,
     getPDF: PropTypes.func,
   }
 
@@ -44,7 +44,7 @@ class TemplateWithoutData extends Component {
     });
   }
 
-  onPrintClick = (e) => {
+  onPrintClick = (e: Event) => {
     e.preventDefault();
 
     this.setState({ printLoading: true });