UXCapture for Meetup log in Nav (#638)

* add react bindings to logo * upgrade mwp-app-render * update yarn and node engine versions in package.json and travis * update snaps * update to latest version of mwp * Upgrade MWP and update snaps * latest non-beta mwp * Add uxCapture prop to Nav to opt-in to marks * upgrade mwp * upgrade mwp * trigger new PR build * upgrade to latest mwp beta and use new UXCaptureImageLoad component * latest mwp beta * latest mwp * latestm mwp beta * latest mwp beta * latest mwp-beta * latest MWP
meetuparchive · Oct 2, 2018 · e8f307b · e8f307b
1 parent c18aeed
commit e8f307b
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 72 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,7 @@
 sudo: false
 language: node_js
 node_js:
-  - "8.9"
+  - "8.11"
 cache:
   yarn: true
   directories:
@@ -19,6 +19,9 @@ env:
 
 before_install:
   - echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.9.4
+  - export PATH=$HOME/.yarn/bin:$PATH
+  - yarn --version
 
 before_script:
   - npm rebuild node-sass #need to rebuild here https://github.com/sass/node-sass/issues/1387#issuecomment-185451183

diff --git a/package.json b/package.json
@@ -4,7 +4,10 @@
   "license": "UNLICENSED",
   "description": "Meetup Web UI Component Library",
   "author": "Meetup",
-  "engine": "node >=6.5.0",
+  "engines": {
+    "node": "^8.11.4",
+    "yarn": "1.9.4"
+  },
   "scripts": {
     "build": "babel src --out-dir lib --ignore test.js,test.jsx,story.jsx --source-maps",
     "build:watch": "yarn build --watch",
@@ -109,8 +112,10 @@
     "js-joda": "1.8.2",
     "lint-staged": "7.2.0",
     "meetup-web-mocks": "1.0.242",
-    "mwp-config": "16.0.2422",
-    "mwp-i18n": "16.0.2418",
+    "mwp-app-render": "17.2.2710",
+    "mwp-config": "17.2.2710",
+    "mwp-i18n": "17.2.2710",
+    "mwp-router": "17.2.2710",
     "node-sass": "4.5.3",
     "npm-run-all": "4.0.2",
     "prettier": "1.13.5",
@@ -119,6 +124,7 @@
     "raw-loader": "0.5.1",
     "react": "16.3.1",
     "react-dom": "16.3.1",
+    "react-helmet": "5.2.0",
     "react-intl": "2.4.0",
     "react-redux": "5.0.7",
     "react-router": "4.3.1",

diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx
@@ -1,7 +1,10 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import * as React from 'react';
 import cx from 'classnames';
 
+import UXCaptureInlineMark from 'mwp-app-render/lib/components/uxcapture/UXCaptureInlineMark';
+import UXCaptureImageLoad from 'mwp-app-render/lib/components/uxcapture/UXCaptureImageLoad';
+
 import swarmLogo from '../../assets/svg/logo--mSwarm--2color.svg';
 import scriptLogo from '../../assets/svg/logo--script.svg';
 import Flex from '../layout/Flex';
@@ -126,6 +129,7 @@ export class Nav extends React.Component {
 			localeCode,
 			className,
 			markAllAsReadOnOpen, // eslint-disable-line no-unused-vars
+			uxCapture,
 			...other
 		} = this.props;
 		const {
@@ -363,6 +367,24 @@ export class Nav extends React.Component {
 			);
 		});
 
+		const scriptLogoAttr = {
+			src: scriptLogo,
+			alt: logo.logoAccessible,
+			height: '44px',
+		};
+
+		const scriptLogoIcon = uxCapture ? (
+			<React.Fragment>
+				<UXCaptureImageLoad
+					mark="ux-image-onload-script-logo"
+					{...scriptLogoAttr}
+				/>
+				<UXCaptureInlineMark mark="ux-image-inline-script-logo" />
+			</React.Fragment>
+		) : (
+			<img {...scriptLogoAttr} />
+		);
+
 		return (
 			<nav
 				aria-label="Header navigation"
@@ -395,13 +417,7 @@ export class Nav extends React.Component {
 							linkTo={logo.link}
 							className="logo logo--script align--left"
 							linkClassName="display--inlineBlock"
-							icon={
-								<img
-									src={scriptLogo}
-									alt={logo.logoAccessible}
-									height="44px"
-								/>
-							}
+							icon={scriptLogoIcon}
 						/>
 					)}
 
@@ -427,6 +443,7 @@ export class Nav extends React.Component {
 
 Nav.defaultProps = {
 	localeCode: 'en-US',
+	uxCapture: false,
 };
 
 Nav.propTypes = {
@@ -442,6 +459,9 @@ Nav.propTypes = {
 	/** The locale code of the current user */
 	localeCode: PropTypes.string,
 	markAllAsReadOnOpen: PropTypes.bool,
+
+	/** Add uxCapture marks in the nav */
+	uxCapture: PropTypes.bool,
 };
 
 export default Nav;
diff --git a/src/navigation/Nav.test.jsx b/src/navigation/Nav.test.jsx
@@ -167,4 +167,14 @@ describe('Nav', () => {
 			})
 		).toMatchSnapshot();
 	});
+
+	describe('uxCapture', () => {
+		it('renders the uxCapture markup when supplied prop', () => {
+			expect(
+				wrapper({
+					uxCapture: true,
+				})
+			).toMatchSnapshot();
+		});
+	});
 });
diff --git a/src/navigation/__snapshots__/Nav.test.jsx.snap b/src/navigation/__snapshots__/Nav.test.jsx.snap
@@ -4066,3 +4066,66 @@ exports[`Nav should match the snapshot without a logo photo 1`] = `
   </Flex>
 </nav>
 `;
+
+exports[`Nav uxCapture renders the uxCapture markup when supplied prop 1`] = `
+<nav
+  aria-label="Header navigation"
+  className="padding--all globalNav"
+  groups={
+    Object {
+      "label": "Groups",
+      "link": "meetup.com/groups",
+      "list": Array [
+        Object {
+          "name": "Mason Mocks",
+          "urlname": "/mason-mocks",
+        },
+        Object {
+          "name": "Chicken Scratch",
+          "urlname": "/chicken-scratch",
+        },
+      ],
+    }
+  }
+  role="navigation"
+>
+  <Flex
+    align="top"
+    className="span--100 navBar"
+    justify="spaceBetween"
+  >
+    <NavItem
+      className="logo logo--script align--left"
+      icon={
+        <React.Fragment>
+          <UXCaptureImageLoad
+            alt="Meetup Logo"
+            height="44px"
+            mark="ux-image-onload-script-logo"
+            src=""
+          />
+          <UXCaptureInlineMark
+            mark="ux-image-inline-script-logo"
+          />
+        </React.Fragment>
+      }
+      linkClassName="display--inlineBlock"
+      linkTo="meetup.com"
+    />
+    <NavItem
+      className="navItem--unauthenticated navItem--login"
+      key="0"
+      label="Login"
+      linkTo="meetup.com/login"
+      shrink={true}
+    />
+    <NavItem
+      className="navItem--unauthenticated"
+      key="1"
+      label="Sign up"
+      onAction={[Function]}
+      shrink={true}
+    />
+  </Flex>
+</nav>
+`;