Merge aa7ac54 into cf63be7

vtex-apps · Mar 26, 2019 · dc5498d · dc5498d
2 parents cf63be7 + aa7ac54
commit dc5498d
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,12 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fix
+
+- Fix proptypes warnings.
+
 ## [2.6.14] - 2019-03-18
+
 ### Added
+
 - sectionLinks now contains the prop `target` in links where is possible to use one of the values `[_self_, _blank_]`. That will define the value for target attribute. `<a href="/" target="_self">`
 
 ## [2.6.13] - 2019-03-14
+
 ### Changed
+
 - Change language files to most generic.
 
 ## [2.6.12] - 2019-03-07

diff --git a/react/__tests__/__snapshots__/Footer.test.js.snap b/react/__tests__/__snapshots__/Footer.test.js.snap
@@ -162,9 +162,6 @@ exports[`<Footer /> component should match the snapshot 1`] = `
           <div
             class="listContainer pl0 w-100 mt0-ns"
           >
-            <span
-              class="listTitle t-small ma0 db ttu"
-            />
             <ul
               class="list list flex flex-column flex-wrap pa0 mb0 mt3"
             >

diff --git a/react/components/Accordion.js b/react/components/Accordion.js
@@ -10,7 +10,7 @@ import footer from '../footer.css'
 class Accordion extends Component {
   static propTypes = {
     /** Title shown in Accordion */
-    title: PropTypes.string.isRequired,
+    title: PropTypes.string,
     /** Accordion children. Components shown inside Collapse */
     children: PropTypes.node.isRequired,
     /** Internationalization */
@@ -22,7 +22,9 @@ class Accordion extends Component {
   }
 
   translate = id => {
-    return this.props.intl.messages[id] ? this.props.intl.formatMessage({ id }) : id
+    return this.props.intl.messages[id]
+      ? this.props.intl.formatMessage({ id })
+      : id
   }
 
   render() {

diff --git a/react/components/FooterLinkList.js b/react/components/FooterLinkList.js
@@ -4,23 +4,25 @@ import React from 'react'
 import footerList from './footerList'
 import footer from '../footer.css'
 
-
-export const FooterLinkItem = ({ url, title, target }) => (
-  <a
-    className={`${footer.listLink} dib no-underline underline-hover mb0 mt2 w-100 t-small truncate c-muted-1 pointer`}
-    href={url}
-    target={target ? target : '_self'}
-  >
-    {title}
-  </a>
-)
+export const FooterLinkItem = ({ url, title, target }) =>
+  title ? (
+    <a
+      className={`${
+        footer.listLink
+      } dib no-underline underline-hover mb0 mt2 w-100 t-small truncate c-muted-1 pointer`}
+      href={url}
+      target={target ? target : '_self'}
+    >
+      {title}
+    </a>
+  ) : null
 
 FooterLinkItem.displayName = 'FooterLinkItem'
 
 FooterLinkItem.propTypes = {
   url: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  target: PropTypes.oneOf(['_self', '_blank'])
+  title: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank']),
 }
 
 export default footerList(FooterLinkItem)
diff --git a/react/components/FooterLinksMatrix.js b/react/components/FooterLinksMatrix.js
@@ -12,7 +12,7 @@ export default class FooterLinksMatrix extends Component {
     links: PropTypes.arrayOf(
       PropTypes.shape({
         /** Link section title */
-        title: PropTypes.string.isRequired,
+        title: PropTypes.string,
         /** Link section links */
         links: objectLikeLinkArray,
       })

diff --git a/react/components/FooterPaymentFormMatrix.js b/react/components/FooterPaymentFormMatrix.js
@@ -11,7 +11,7 @@ export default class FooterPaymentFormMatrix extends Component {
     paymentForms: PropTypes.arrayOf(
       PropTypes.shape({
         /** Payment form title */
-        title: PropTypes.string.isRequired,
+        title: PropTypes.string,
         /** Payment types */
         paymentTypes: PropTypes.arrayOf(PropTypes.string.isRequired),
       })
@@ -29,7 +29,8 @@ export default class FooterPaymentFormMatrix extends Component {
           {paymentForms.map((paymentFormsItem, index) => (
             <div
               key={`payment-container-${index}`}
-              className={footer.paymentMatrixItem}>
+              className={footer.paymentMatrixItem}
+            >
               <FooterPaymentFormList
                 horizontal
                 titleId={paymentFormsItem.title}

diff --git a/react/components/footerList.js b/react/components/footerList.js
@@ -28,7 +28,11 @@ export default WrappedComponent => {
     }
 
     formatMessage(id) {
-      return this.props.intl.messages[id] && this.props.intl.formatMessage({ id }) || id
+      return (
+        (this.props.intl.messages[id] &&
+          this.props.intl.formatMessage({ id })) ||
+        id
+      )
     }
 
     render() {
@@ -44,27 +48,33 @@ export default WrappedComponent => {
       if (!list || list.length === 0) return null
 
       const titleClasses = classNames(`${footer.listTitle} t-small ma0 db`, {
-        'ttu': !titleCapitals,
+        ttu: !titleCapitals,
       })
 
-      const listContainerClasses = classNames(`${footer.listContainer} pl0 w-100 mt0-ns`, {
-        [`${footer.listContainerRightAligned} ml-auto-m`]: alignRight,
-        [`${footer.listContainerHorizontal} w-auto-m`]: horizontal,
-      })
+      const listContainerClasses = classNames(
+        `${footer.listContainer} pl0 w-100 mt0-ns`,
+        {
+          [`${footer.listContainerRightAligned} ml-auto-m`]: alignRight,
+          [`${footer.listContainerHorizontal} w-auto-m`]: horizontal,
+        }
+      )
 
-      const listClasses = classNames(`${footer.list} list flex flex-column flex-wrap pa0 mb0 mt3`, {
-        [`${footer.listHorizontal} flex-row flex-wrap`]: horizontal,
-      })
+      const listClasses = classNames(
+        `${footer.list} list flex flex-column flex-wrap pa0 mb0 mt3`,
+        {
+          [`${footer.listHorizontal} flex-row flex-wrap`]: horizontal,
+        }
+      )
 
       const listItemClasses = classNames(`${footer.listItem} mr0 mr3`, {
         [`${footer.listItemHorizontal}`]: horizontal,
       })
 
       return (
         <div className={listContainerClasses}>
-          <span className={titleClasses}>
-            {this.formatMessage(titleId)}
-          </span>
+          {titleId && (
+            <span className={titleClasses}>{this.formatMessage(titleId)}</span>
+          )}
           <ul className={listClasses}>
             {list.map((item, index) => (
               <li key={index} className={listItemClasses}>

diff --git a/react/index.js b/react/index.js
@@ -26,7 +26,7 @@ export default class Footer extends Component {
     sectionLinks: PropTypes.arrayOf(
       PropTypes.shape({
         /** Link section title */
-        title: PropTypes.string.isRequired,
+        title: PropTypes.string,
         /** Link  section links */
         links: objectLikeLinkArray,
       })
@@ -37,7 +37,7 @@ export default class Footer extends Component {
     paymentForms: PropTypes.arrayOf(
       PropTypes.shape({
         /** Payment Form title */
-        title: PropTypes.string.isRequired,
+        title: PropTypes.string,
         /** Payment Types */
         paymentTypes: PropTypes.arrayOf(PropTypes.string),
       })