Merge pull request #14 from keyholeco/event-tracking

Add ability to pass in event tracking parameters to Keychain components

src/molecules/Button/index.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './button.styl'
 
+import { eventTrackPropShape, eventTrackPropToAttributes } from '../../utils'
+
 export const buttonSizes = ['small', 'medium', 'big']
 export const buttonColors = [
   'default',
@@ -38,6 +40,7 @@ export const Button = (props) => {
         style={props.style}
         className={classNames}
         disabled={props.disabled}
+        {...eventTrackPropToAttributes(props.eventTrack)}
       >
         {props.children}
       </a>
@@ -49,6 +52,7 @@ export const Button = (props) => {
       style={props.style}
       className={classNames}
       disabled={props.disabled}
+      {...eventTrackPropToAttributes(props.eventTrack)}
     >
       {props.children}
     </button>
@@ -62,16 +66,15 @@ Button.propTypes = {
   target: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.object,
-
   plain: PropTypes.bool,
   rounded: PropTypes.bool,
   disabled: PropTypes.bool,
   straight: PropTypes.bool,
   outline: PropTypes.bool,
   caps: PropTypes.bool,
-
   size: PropTypes.oneOf(buttonSizes),
   color: PropTypes.oneOf(buttonColors),
+  eventTrack: PropTypes.shape(eventTrackPropShape),
 }
 
 Button.defaultProps = {

src/organisms/Header/HeaderBox.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './headerBox.styl'
 
+import { eventTrackPropShape, eventTrackPropToAttributes } from '../../utils'
+
 import Icon from '../../atoms/Icon'
 import Type from '../../atoms/Type'
 
@@ -18,6 +20,7 @@ const HeaderBox = (props) => {
       `}
       style={styles}
       onClick={props.onClick}
+      {...eventTrackPropToAttributes(props.eventTrack)}
     >
       <Type className="kc-headerBox__label" weight={400}>
         {props.label}
@@ -35,6 +38,7 @@ HeaderBox.propTypes = {
   onClick: PropTypes.func,
   label: PropTypes.string.isRequired,
   open: PropTypes.bool,
+  eventTrack: PropTypes.shape(eventTrackPropShape),
 }
 
 HeaderBox.defaultProps = {
@@ -76,6 +80,7 @@ const HeaderBoxDropdownLink = (props) => (
     href={props.href}
     onClick={props.onClick}
     style={props.style}
+    {...eventTrackPropToAttributes(props.eventTrack)}
   >
     <Type className="kc-headerBoxDropdown__label" weight={400}>
       {props.label}
@@ -89,6 +94,7 @@ HeaderBoxDropdownLink.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
   label: PropTypes.string,
+  eventTrack: PropTypes.shape(eventTrackPropShape),
 }
 
 HeaderBoxDropdownLink.defaultProps = {

src/organisms/Header/HeaderLogo.js

@@ -1,8 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import KeyholeLogo from '../../atoms/KeyholeLogo'
 import './headerLogo.styl'
 
+import { eventTrackPropShape, eventTrackPropToAttributes } from '../../utils'
+
+import KeyholeLogo from '../../atoms/KeyholeLogo'
+
 export const HeaderLogo = (props) => {
   if (props.theme === 'custom') {
     if (props.href && props.src) {
@@ -15,6 +18,7 @@ export const HeaderLogo = (props) => {
           `}
           style={props.style}
           onClick={props.onClick}
+          {...eventTrackPropToAttributes(props.eventTrack)}
         >
           <img src={props.src} className="kc-headerLogo__image" />
           {props.children || null}
@@ -31,6 +35,7 @@ export const HeaderLogo = (props) => {
           `}
           style={props.style}
           onClick={props.onClick}
+          {...eventTrackPropToAttributes(props.eventTrack)}
         >
           <img src={props.src} className="kc-headerLogo__image" />
           {props.children || null}
@@ -46,6 +51,7 @@ export const HeaderLogo = (props) => {
         `}
         style={props.style}
         onClick={props.onClick}
+        {...eventTrackPropToAttributes(props.eventTrack)}
       >
         {props.children || null}
       </div>
@@ -61,6 +67,7 @@ export const HeaderLogo = (props) => {
       `}
       style={props.style}
       onClick={props.onClick}
+      {...eventTrackPropToAttributes(props.eventTrack)}
     >
       <KeyholeLogo
         className={`
@@ -82,6 +89,7 @@ HeaderLogo.propTypes = {
   href: PropTypes.string,
   src: PropTypes.string,
   onClick: PropTypes.func,
+  eventTrack: PropTypes.shape(eventTrackPropShape),
 }
 
 HeaderLogo.defaultProps = {

src/organisms/Header/HeaderNavigation.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './headerNavigation.styl'
 
+import { eventTrackPropShape, eventTrackPropToAttributes } from '../../utils'
+
 import Icon, { iconTypes, iconSizes } from '../../atoms/Icon'
 import Type from '../../atoms/Type'
 
@@ -31,6 +33,7 @@ const HeaderNavigationLink = (props) => (
     href={props.href}
     onClick={props.onClick}
     style={props.style}
+    {...eventTrackPropToAttributes(props.eventTrack)}
   >
     <Icon className="kc-headerNavigation__icon" icon={props.icon} />
     <Type className="kc-headerNavigation__label" caps>
@@ -50,6 +53,7 @@ HeaderNavigationLink.propTypes = {
   iconType: PropTypes.oneOf(iconTypes),
   iconSize: PropTypes.oneOf(iconSizes),
   iconFixed: PropTypes.bool,
+  eventTrack: PropTypes.shape(eventTrackPropShape),
 }
 
 HeaderNavigationLink.defaultProps = {

src/utils.js

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types'
+
 export const ucFirst = (str) => {
   if (str === 'youtube') return 'YouTube'
   return typeof str === 'string' ? str.charAt(0).toUpperCase() + str.slice(1) : str
@@ -43,3 +45,25 @@ export const lightOrDark = (x) => {
 
   return 'dark'
 }
+
+export const eventTrackPropShape = {
+  category: PropTypes.string.isRequired,
+  action: PropTypes.string.isRequired,
+  properties: PropTypes.object,
+  value: PropTypes.number,
+}
+
+export const eventTrackPropToAttributes = (eventTrack) => {
+  const obj = {}
+  if (eventTrack) {
+    if (eventTrack.category) obj['data-eventtrack-category'] = eventTrack.category
+    if (eventTrack.action) obj['data-eventtrack-action'] = eventTrack.action
+    if (eventTrack.value) obj['data-eventtrack-value'] = eventTrack.value
+    if (eventTrack.properties) {
+      Object.keys(eventTrack.properties).forEach((key) => {
+        obj[`data-eventtrack-${key}`] = eventTrack.properties[key]
+      })
+    }
+  }
+  return obj
+}