Merge pull request #3676 from Vizzuality/feat/widget-embed-trase-styles

Trase branded widget styles

app/javascript/app/layouts/root/component.jsx

@@ -29,14 +29,18 @@ const PageComponent = universal(
 
 class App extends PureComponent {
   render() {
-    const { route, loggedIn, metadata, isGFW } = this.props;
+    const { route, loggedIn, metadata, isGFW, isTrase } = this.props;
     const { component, embed } = route;
     const isMapPage = component === 'map';
     return (
       <MediaQuery minWidth={SCREEN_M}>
         {isDesktop => (
           <div
-            className={cx('l-root', { '-map': isMapPage }, { '-embed': embed })}
+            className={cx(
+              'l-root',
+              { '-map': isMapPage },
+              { '-embed': embed, '-trase': isTrase }
+            )}
           >
             {!embed &&
               route.headerOptions && (
@@ -60,11 +64,16 @@ class App extends PureComponent {
               />
             )}
             <div className="page">
-              <PageComponent path={route.component} sections={route.sections} />
+              <PageComponent
+                path={route.component}
+                sections={route.sections}
+                isTrase={isTrase}
+              />
             </div>
             {!embed && <MyGFWProvider />}
             {embed &&
-              !isGFW && (
+              !isGFW &&
+              !isTrase && (
                 <div className="embed-footer">
                   <p>For more info</p>
                   <Button
@@ -87,6 +96,7 @@ App.propTypes = {
   route: PropTypes.object.isRequired,
   loggedIn: PropTypes.bool,
   isGFW: PropTypes.bool,
+  isTrase: PropTypes.bool,
   metadata: PropTypes.object
 };
 

app/javascript/app/layouts/root/selectors.js

@@ -15,7 +15,12 @@ const selectPageLocation = state =>
 
 export const getIsGFW = createSelector(
   selectQuery,
-  query => query && query.gfw
+  query => query && query.gfw && JSON.parse(query.gfw)
+);
+
+export const getIsTrase = createSelector(
+  selectQuery,
+  query => query && query.trase && JSON.parse(query.trase)
 );
 
 export const getMetadata = createSelector(
@@ -59,5 +64,6 @@ export const getPageProps = createStructuredSelector({
   loggedIn: selectLoggedIn,
   route: selectPageLocation,
   metadata: getMetadata,
-  isGFW: getIsGFW
+  isGFW: getIsGFW,
+  isTrase: getIsTrase
 });

app/javascript/app/layouts/root/styles.scss

@@ -61,6 +61,12 @@
         min-height: calc(100vh - 60px);
       }
     }
+
+    &.-trase {
+      .c-loader {
+        display: none;
+      }
+    }
   }
 
   .embed-footer {

app/javascript/components/widgets/components/widget/components/widget-footer/component.jsx

@@ -6,16 +6,31 @@ import './styles.scss';
 
 class WidgetFooter extends PureComponent {
   render() {
-    const { statement, simple } = this.props;
+    const { statement, simple, showAttributionLink } = this.props;
     return statement ? (
-      <div className={cx('c-widget-footer', { simple })}>{statement}</div>
+      <div className={cx('c-widget-footer', { simple })}>
+        {statement}
+        {showAttributionLink && (
+          <span>
+            Source:{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.globalforestwatch.org"
+            >
+              Global Forest Watch
+            </a>
+          </span>
+        )}
+      </div>
     ) : null;
   }
 }
 
 WidgetFooter.propTypes = {
+  simple: PropTypes.bool,
   statement: PropTypes.string,
-  simple: PropTypes.bool
+  showAttributionLink: PropTypes.bool
 };
 
 export default WidgetFooter;

app/javascript/components/widgets/components/widget/components/widget-footer/selectors.js

@@ -1,4 +1,5 @@
 import { createSelector, createStructuredSelector } from 'reselect';
+import { getIsTrase } from 'app/layouts/root/selectors';
 import compact from 'lodash/compact';
 
 // get list data
@@ -56,5 +57,6 @@ export const getStatement = createSelector(
 );
 
 export const getWidgetFooterProps = createStructuredSelector({
-  statement: getStatement
+  statement: getStatement,
+  showAttributionLink: getIsTrase
 });

app/javascript/pages/dashboards/embed/embed-component.js

@@ -1,20 +1,23 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
+import cx from 'classnames';
 import Widgets from 'components/widgets';
 import CountryDataProvider from 'providers/country-data-provider';
 import WhitelistsProvider from 'providers/whitelists-provider';
 import Share from 'components/modals/share';
 import ModalMeta from 'components/modals/meta';
 
 import './embed-styles.scss';
+import './trase-embed-styles.scss';
 
 class Embed extends PureComponent {
   render() {
+    const { isTrase, widgets } = this.props;
     return (
-      <div className="c-embed">
+      <div className={cx('c-embed', { '-trase': isTrase })}>
         <div className="widget-wrapper">
-          <Widgets widgets={this.props.widgets} embed />
+          <Widgets widgets={widgets} embed />
         </div>
         <Share />
         <ModalMeta />
@@ -26,6 +29,7 @@ class Embed extends PureComponent {
 }
 
 Embed.propTypes = {
+  isTrase: PropTypes.bool,
   widgets: PropTypes.array
 };
 

app/javascript/pages/dashboards/embed/trase-embed-styles.scss

@@ -0,0 +1,86 @@
+// Don't delete this file without removing
+// public/trase-fonts directory
+// -trase class from app/layouts/root/styles.scss
+
+/* stylelint-disable */
+
+@font-face {
+  font-family: 'DecimaMonoPro';
+  font-weight: 400;
+  src:
+    url('/trase-fonts/DecimaMonoPro.woff2') format('woff2'),
+    url('/trase-fonts/DecimaMonoPro.woff') format('woff'),
+    url('/trase-fonts/DecimaMonoPro.otf') format('embedded-opentype'),
+    url('/trase-fonts/DecimaMonoPro.otf');
+}
+
+@font-face {
+  font-family: 'DecimaMonoPro';
+  font-weight: 700;
+  src:
+    url('/trase-fonts/DecimaMonoPro-Bold.woff2') format('woff2'),
+    url('/trase-fonts/DecimaMonoPro-Bold.woff') format('woff'),
+    url('/trase-fonts/DecimaMonoPro-Bold.otf') format('embedded-opentype'),
+    url('/trase-fonts/DecimaMonoPro-Bold.otf');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-weight: 300;
+  src: url('/trase-fonts/Merriweather-Light.ttf');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-weight: 400;
+  src: url('/trase-fonts/Merriweather-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Merriweather';
+  font-weight: 700;
+  src: url('/trase-fonts/Merriweather-Bold.ttf');
+}
+
+$charcoal-grey: #34444c;
+$trase-font-family-1: 'DecimaMonoPro';
+$trase-font-family-2: 'Merriweather';
+
+// Custom class for TRASE/GFW integration
+// READ COMMENT FROM TOP
+.c-embed.-trase {
+  .c-widget-header {
+    .options {
+      display: none;
+    }
+
+    .title {
+      font-family: $trase-font-family-1;
+      font-weight: 700;
+      color: $charcoal-grey;
+    }
+  }
+
+  .container .sentence {
+    font-family: $trase-font-family-2;
+    color: $charcoal-grey;
+  }
+
+  text {
+    filter: none;
+    fill: $charcoal-grey;
+  }
+
+  .c-widget-footer {
+    display: flex;
+    justify-content: space-between;
+    font-family: $trase-font-family-2;
+    color: $charcoal-grey;
+    font-weight: 300;
+
+    a {
+      color: $charcoal-grey;
+      font-weight: 700;
+    }
+  }
+}