Feature/embed buttons and footer

app/javascript/components/button/button-styles.scss

@@ -16,6 +16,7 @@ $button-height: rem(40px);
   color: $white;
   cursor: pointer;
   transition: background-color 150ms ease-out;
+  text-decoration: none;
 
   &:hover {
     background-color: darken($green-gfw, 10%);

app/javascript/pages/country/widget/components/widget-header/widget-header-component.js

@@ -107,8 +107,7 @@ class WidgetHeader extends PureComponent {
                 {widgetSize !== 'small' && !isDeviceTouch && 'SHOW ON MAP'}
               </Button>
             )}
-          {!embed &&
-            settingsConfig &&
+          {settingsConfig &&
             !isEmpty(settingsConfig.options) && (
               <Tooltip
                 theme="light"

app/javascript/pages/country/widget/components/widget-header/widget-header.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import compact from 'lodash/compact';
 import moment from 'moment';
 
 import shareActions from 'components/share/share-actions';
@@ -17,9 +16,10 @@ const actions = {
 
 const mapStateToProps = ({ location, modalMeta }, ownProps) => {
   const { locationNames, widget, title, settingsConfig } = ownProps;
-  const locationUrl = compact(
-    Object.keys(location.payload).map(key => location.payload[key])
-  ).join('/');
+  const locationUrl = `${location.payload.country}${
+    location.payload.region ? `/${location.payload.region}` : ''
+  }${location.payload.subRegion ? `/${location.payload.subRegion}` : ''}`;
+
   const embedUrl = `${
     window.location.origin
   }/country/embed/${widget}/${locationUrl}${
@@ -42,11 +42,13 @@ const mapStateToProps = ({ location, modalMeta }, ownProps) => {
       subtitle: `${title} in ${
         locationNames.current ? locationNames.current.label : ''
       }`,
-      shareUrl: `http://${window.location.host}${window.location.pathname}?${
-        location && location.category && location.query.category
-          ? `category=${location.query.category}&`
+      shareUrl: `http://${
+        window.location.host
+      }/country/${locationUrl}?widget=${widget}${
+        location.query && location.query[widget]
+          ? `&${widget}=${location.query[widget]}`
           : ''
-      }${`widget=${widget}`}#${widget}`,
+      }#${widget}`,
       embedUrl,
       embedSettings:
         settingsConfig.config.size === 'small'

app/javascript/pages/country/widget/components/widget-horizontal-bar-chart/custom-tick-component.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { format } from 'd3-format';
+import Link from 'redux-first-router-link';
 
 const CustomTick = ({ x, y, index, yAxisDotFill, data, settings }) => {
-  const { region, path, rank, total } = data[index];
+  const { region, path, rank, total, extLink } = data[index];
   const { page, pageSize } = settings;
   const number = rank || index + 1 + pageSize * page;
   return (
@@ -19,10 +20,17 @@ const CustomTick = ({ x, y, index, yAxisDotFill, data, settings }) => {
         {number}
       </text>
       <text x="8" y="-16" textAnchor="start" fontSize="12px" fill="#555555">
-        <a href={path}>
-          {region} - {format('.1f')(total)}%{' '}
-          {index === 0 ? 'are plantations' : ''}
-        </a>
+        {extLink ? (
+          <a href={path} target="_blank" rel="noopener nofollower">
+            {region} - {format('.1f')(total)}%{' '}
+            {index === 0 ? 'are plantations' : ''}
+          </a>
+        ) : (
+          <Link to={path}>
+            {region} - {format('.1f')(total)}%{' '}
+            {index === 0 ? 'are plantations' : ''}
+          </Link>
+        )}
       </text>
     </g>
   );

app/javascript/pages/country/widget/components/widget-numbered-list/widget-numbered-list-component.jsx

@@ -14,7 +14,8 @@ class WidgetNumberedList extends PureComponent {
       data,
       settings,
       handlePageChange,
-      linksDisabled
+      linksDisabled,
+      linksExt
     } = this.props;
     const { page, pageSize, unit, unitFormat } = settings;
     const pageData = pageSize
@@ -25,12 +26,9 @@ class WidgetNumberedList extends PureComponent {
       <div className={`c-widget-numbered-list ${className}`}>
         <ul className="list">
           {data.length > 0 &&
-            pageData.map((item, index) => (
-              <li key={`${item.label}-${item.id}`}>
-                <Link
-                  className={`list-item ${linksDisabled ? 'disabled' : ''}`}
-                  to={item.path}
-                >
+            pageData.map((item, index) => {
+              const linkContent = (
+                <div className="list-item">
                   <div className="item-label">
                     <div
                       className="item-bubble"
@@ -46,9 +44,29 @@ class WidgetNumberedList extends PureComponent {
                       : format(item.value < 1 ? '.2f' : '.3s')(item.value)}
                     {unit}
                   </div>
-                </Link>
-              </li>
-            ))}
+                </div>
+              );
+              return (
+                <li key={`${item.label}-${item.id}`}>
+                  {linksExt ? (
+                    <a
+                      href={`http://${window.location.host}${item.path}`}
+                      target="_blank"
+                      rel="noopener nofollower"
+                    >
+                      {linkContent}
+                    </a>
+                  ) : (
+                    <Link
+                      className={`${linksDisabled ? 'disabled' : ''}`}
+                      to={item.path}
+                    >
+                      {linkContent}
+                    </Link>
+                  )}
+                </li>
+              );
+            })}
         </ul>
         {handlePageChange &&
           data.length > settings.pageSize && (
@@ -68,7 +86,8 @@ WidgetNumberedList.propTypes = {
   settings: PropTypes.object.isRequired,
   handlePageChange: PropTypes.func,
   className: PropTypes.string,
-  linksDisabled: PropTypes.bool
+  linksDisabled: PropTypes.bool,
+  linksExt: PropTypes.bool
 };
 
 export default WidgetNumberedList;

app/javascript/pages/country/widget/widget-component.jsx

@@ -6,6 +6,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import Loader from 'components/loader/loader';
 import NoContent from 'components/no-content';
+import Button from 'components/button';
 import WidgetHeader from 'pages/country/widget/components/widget-header';
 import WidgetSettingsStatement from 'pages/country/widget/components/widget-settings-statement';
 
@@ -81,18 +82,20 @@ class Widget extends PureComponent {
       settingsConfig.settings &&
       settingsConfig.settings.layers &&
       settingsConfig.settings.layers.length;
-
+    const onMap = active && haveMapLayers;
     return (
       <div
         className={`c-widget ${settingsConfig.config.size || ''}`}
-        style={
-          active && haveMapLayers
-            ? {
-              borderColor: highlightColor,
-              boxShadow: `0 0px 0px 1px ${highlightColor}`
-            }
-            : {}
-        }
+        style={{
+          ...(!!onMap && {
+            borderColor: highlightColor,
+            boxShadow: `0 0px 0px 1px ${highlightColor}`
+          }),
+          ...(!!embed && {
+            border: 0,
+            borderRadius: 0
+          })
+        }}
         id={widget}
       >
         <WidgetHeader
@@ -126,6 +129,24 @@ class Widget extends PureComponent {
           {!error && <WidgetComponent {...this.props} {...settingsConfig} />}
         </div>
         <WidgetSettingsStatement settings={settingsConfig.settings} />
+        {embed &&
+          (!query || (query && !query.hideGfw)) && (
+            <div className="embed-footer">
+              <p>For more info</p>
+              <Button
+                className="embed-btn"
+                extLink={`http://globalforestwatch.org/country/${
+                  location.country
+                }${location.region ? `/${location.region}` : ''}${
+                  location.subRegion ? `/${location.subRegion}` : ''
+                }?widget=${widget}${
+                  query && query[widget] ? `&${widget}=${query[widget]}` : ''
+                }#${widget}`}
+              >
+                EXPLORE ON GFW
+              </Button>
+            </div>
+          )}
       </div>
     );
   }

app/javascript/pages/country/widget/widget-styles.scss

@@ -28,4 +28,22 @@
     position: relative;
     height: 100%;
   }
+
+  .embed-footer {
+    border-top: solid 1px $border;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: rem(20px);
+    margin-top: rem(20px);
+
+    p {
+      opacity: 0.7;
+    }
+  }
+
+  .embed-btn {
+    width: rem(160px);
+    margin-left: rem(10px);
+  }
 }

app/javascript/pages/country/widget/widgets/widget-economic-impact/widget-economic-impact-component.js

@@ -10,7 +10,14 @@ import './widget-economic-impact-styles.scss';
 
 class WidgetEconomicImpact extends PureComponent {
   render() {
-    const { chartData, chartConfig, rankData, sentence, settings } = this.props;
+    const {
+      chartData,
+      chartConfig,
+      rankData,
+      sentence,
+      settings,
+      embed
+    } = this.props;
 
     return (
       <div className="c-widget-economic-impact">
@@ -35,6 +42,7 @@ class WidgetEconomicImpact extends PureComponent {
                     ? value => formatUSD(value)
                     : null
               }}
+              linkExt={embed}
             />
           )}
         </div>
@@ -48,7 +56,8 @@ WidgetEconomicImpact.propTypes = {
   chartConfig: PropTypes.object,
   rankData: PropTypes.array,
   sentence: PropTypes.string,
-  settings: PropTypes.object
+  settings: PropTypes.object,
+  embed: PropTypes.bool
 };
 
 export default WidgetEconomicImpact;

app/javascript/pages/country/widget/widgets/widget-fao-deforestation/widget-fao-deforestation-component.js

@@ -19,7 +19,7 @@ class WidgetFAODeforestation extends PureComponent {
               className="locations-list"
               data={data}
               settings={settings}
-              linksDisabled={embed}
+              linksExt={embed}
             />
           )}
       </div>

app/javascript/pages/country/widget/widgets/widget-fao-reforestation/widget-fao-reforestation-component.js

@@ -19,7 +19,7 @@ class WidgetFAOReforestation extends PureComponent {
               className="locations-list"
               data={data}
               settings={settings}
-              linksDisabled={embed}
+              linkExt={embed}
             />
           )}
       </div>

app/javascript/pages/country/widget/widgets/widget-gain-located/widget-gain-located-component.js

@@ -20,7 +20,7 @@ class WidgetGainLocated extends PureComponent {
               data={data}
               settings={settings}
               handlePageChange={handlePageChange}
-              linksDisabled={embed}
+              linksExt={embed}
             />
           )}
       </div>

app/javascript/pages/country/widget/widgets/widget-loss-located/widget-loss-located-component.js

@@ -20,7 +20,7 @@ class WidgetLossLocated extends PureComponent {
               data={data}
               settings={settings}
               handlePageChange={handlePageChange}
-              linksDisabled={embed}
+              linksExt={embed}
             />
           )}
       </div>

app/javascript/pages/country/widget/widgets/widget-ranked-plantations/widget-ranked-plantations-selectors.js

@@ -15,6 +15,7 @@ const getLocation = state => state.location || null;
 const getLocationsMeta = state => state.meta || null;
 const getLocationNames = state => state.locationNames || null;
 const getColors = state => state.colors || null;
+const getEmbed = state => state.embed || null;
 
 const getPlanationKeys = createSelector(
   [getPlantations],
@@ -23,8 +24,15 @@ const getPlanationKeys = createSelector(
 );
 
 export const chartData = createSelector(
-  [getPlantations, getExtent, getPlanationKeys, getLocationsMeta, getLocation],
-  (plantations, extent, plantationKeys, meta, location) => {
+  [
+    getPlantations,
+    getExtent,
+    getPlanationKeys,
+    getLocationsMeta,
+    getLocation,
+    getEmbed
+  ],
+  (plantations, extent, plantationKeys, meta, location, embed) => {
     if (isEmpty(plantations) || isEmpty(meta) || isEmpty(extent)) return null;
     const groupedByRegion = groupBy(plantations, 'region');
     const regionData = Object.keys(groupedByRegion).map(r => {
@@ -46,13 +54,17 @@ export const chartData = createSelector(
         yKeys[key] = pPercentage || 0;
         yKeys[`${key} label`] = key;
       });
+
       return {
         region: regionLabel && regionLabel.label,
         ...yKeys,
         total: totalRegionPlantations / totalArea * 100,
-        path: `/country/${location.payload.country}/${
+        path: `${embed ? `http://${window.location.host}` : ''}/country/${
+          location.payload.country
+        }/${
           location.payload.region ? `${location.payload.region}/` : ''
-        }${regionId}${location.search ? `?${location.search}` : ''}`
+        }${regionId}${location.search ? `?${location.search}` : ''}`,
+        extLink: embed
       };
     });
     const dataParsed = sortByKey(regionData, 'total', true);

app/javascript/pages/country/widget/widgets/widget-ranked-plantations/widget-ranked-plantations.js

@@ -26,7 +26,8 @@ const mapStateToProps = (
     settings,
     location,
     locationNames,
-    colors
+    colors,
+    embed: ownProps.embed
   };
   return {
     data: chartData(selectorData),

app/javascript/pages/country/widget/widgets/widget-tree-gain/widget-tree-gain-component.js

@@ -8,7 +8,7 @@ import './widget-tree-gain-styles.scss';
 
 class WidgetTreeCoverGain extends PureComponent {
   render() {
-    const { data, sentence, settings } = this.props;
+    const { data, sentence, settings, embed } = this.props;
 
     return (
       <div className="c-widget-tree-cover-gain">
@@ -19,7 +19,7 @@ class WidgetTreeCoverGain extends PureComponent {
               className="ranking-list"
               data={data}
               settings={settings}
-              handlePageChange={() => {}}
+              linksExt={embed}
             />
           </div>
         )}
@@ -31,7 +31,8 @@ class WidgetTreeCoverGain extends PureComponent {
 WidgetTreeCoverGain.propTypes = {
   data: PropTypes.array,
   settings: PropTypes.object.isRequired,
-  sentence: PropTypes.string
+  sentence: PropTypes.string,
+  embed: PropTypes.bool
 };
 
 export default WidgetTreeCoverGain;