Render logo as amp-img if in AMP page

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "vtex",
+  "env": {
+    "browser": true,
+    "jest": true
+  }
+}

.travis.yml

@@ -6,10 +6,7 @@ node_js:
   - "8"
 install:
   - yarn install
-  - cd react
-  - yarn install
-  - cd ..
+  - yarn --cwd react install
 script:
   - yarn lint:locales
-  - cd react
-  - yarn test
+  - yarn --cwd react test

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- Render logo as `amp-img` if in AMP page.
 
 ## [3.68.7] - 2019-09-10
 ### Changed

package.json

@@ -7,7 +7,11 @@
     "@types/classnames": "^2.2.9",
     "@types/ramda": "^0.26.18",
     "@types/react": "^16.8.23",
-    "@vtex/intl-equalizer": "^2.2.1"
+    "@vtex/intl-equalizer": "^2.2.1",
+    "eslint": "^6.4.0",
+    "eslint-config-vtex": "^11.0.0",
+    "prettier": "^1.18.2",
+    "typescript": "^3.6.3"
   },
   "dependencies": {
     "react": "^16.8.6"

react/components/Logo/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link, useRuntime } from 'vtex.render-runtime'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import * as Amp from 'react-amphtml'
 
 import Placeholder from './Placeholder'
 
@@ -16,8 +17,20 @@ const wrapWithLink = (href, element) =>
 /**
  * Logo of the store
  */
-const Logo = ({ href, url, width, height, title, mobileWidth, mobileHeight }) => {
-  const { account, hints: { mobile } } = useRuntime()
+const Logo = ({
+  url,
+  href,
+  width,
+  height,
+  title,
+  mobileWidth,
+  mobileHeight,
+}) => {
+  const {
+    amp,
+    account,
+    hints: { mobile },
+  } = useRuntime()
 
   const logoClassNames = classNames('store-logo', styles.logoContainer, {
     [styles.sizeDesktop]: !mobile,
@@ -27,16 +40,37 @@ const Logo = ({ href, url, width, height, title, mobileWidth, mobileHeight }) =>
   const imgWidth = mobile && mobileWidth ? mobileWidth : width
   const imgHeight = mobile && mobileHeight ? mobileHeight : height
 
+  const imageUrl = url.replace(/{{account}}/g, account)
+
+  let image = null
+
+  if (amp && url) {
+    image = (
+      <Amp.AmpImg
+        specName="default"
+        width={imgWidth}
+        height={imgHeight}
+        alt={title}
+        src={imageUrl}
+        className={styles.logoImage}
+      />
+    )
+  } else if (url) {
+    image = (
+      <img
+        src={imageUrl}
+        width={imgWidth}
+        height={imgHeight}
+        alt={title}
+        className={styles.logoImage}
+      />
+    )
+  }
+
   const logo = (
     <span className={`${logoClassNames} pv4 ph6`}>
       {url ? (
-        <img
-          src={url.replace(/{{account}}/g, account)}
-          width={imgWidth}
-          height={imgHeight}
-          alt={title}
-          className={styles.logoImage}
-          />
+        image
       ) : (
         <Placeholder width={width} height={height} title={title} />
       )}
@@ -52,9 +86,9 @@ Logo.propTypes = {
   /** Title to be displayed as alt text */
   title: PropTypes.string.isRequired,
   /** Logo's width */
-  width: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Logo's height */
-  height: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
 Logo.schema = {
@@ -104,7 +138,7 @@ Logo.schema = {
       type: 'number',
       isLayout: true,
     },
-  }
+  },
 }
 
 export default Logo

react/package.json

@@ -19,6 +19,7 @@
     "prop-types": "^15.6.2",
     "ramda": "^0.25.0",
     "react": "^16.3.2",
+    "react-amphtml": "^4.0.1",
     "react-apollo": "~2.5.2",
     "react-content-loader": "^3.1.2",
     "react-dom": "^16.8.3",
@@ -41,7 +42,7 @@
     "@vtex/test-tools": "^1.1.0",
     "apollo-cache-inmemory": "^1.4.3",
     "eslint": "^6.0.0",
-    "eslint-config-vtex-react": "^4.0.0",
+    "eslint-config-vtex-react": "^5.0.1",
     "prettier": "^1.16.4",
     "typescript": "3.5.2"
   },