#99 Backport changes from Porto i/o

marzeelabs · Feb 27, 2019 · 17f0adf · 17f0adf
1 parent 2235407
commit 17f0adf
Show file tree

Hide file tree

Showing 46 changed files with 2,641 additions and 1,251 deletions.
diff --git a/components/Besugo.jsx b/components/Besugo.jsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import { hydrate } from 'react-dom';
 
+const SELECTORS = {
+  // iframe: 'iframe.nc-previewPane-frame', // Netlify-cms 1.9.2
+  iframe: '.css-1hcqc8j',
+};
+
 const Components = [];
 
 export default class BesugoComponent extends React.Component {
@@ -241,8 +246,7 @@ export default class BesugoComponent extends React.Component {
     });
 
     if (typeof CMS !== 'undefined') {
-      const selector = 'iframe.nc-previewPane-frame';
-      const iframe = document.querySelectorAll(selector)[0];
+      const iframe = document.querySelector(SELECTORS.iframe);
 
       if (iframe) {
         return fakePromise(iframe.contentWindow);
@@ -254,7 +258,7 @@ export default class BesugoComponent extends React.Component {
           // so we need to keep reapplying our listener.
           const observer = new MutationObserver((mutations) => {
             mutations.forEach((m) => {
-              const subframe = m.target.querySelectorAll(selector)[0];
+              const subframe = m.target.querySelector(SELECTORS.iframe);
               if (subframe) {
                 resolve(subframe.contentWindow);
               }

diff --git a/components/blog/Teaser.jsx b/components/blog/Teaser.jsx
@@ -3,16 +3,14 @@ import BesugoComponent from 'Besugo';
 
 import SrcSet from 'partials/SrcSet';
 
-const cns = 'teaser-text-side';
-
 export default class BlogTeaser extends BesugoComponent {
   static config = {
     tag: 'BlogTeaser',
   }
 
   static buildContainer(parserUtils) {
     const li = parserUtils.createNode('li');
-    parserUtils.setAttribute(li, 'class', `${cns}__wrapper`);
+    parserUtils.setAttribute(li, 'class', 'teaser-text-side__wrapper');
 
     return li;
   }
@@ -21,11 +19,11 @@ export default class BlogTeaser extends BesugoComponent {
     const data = this.props;
 
     return (
-      <div className={ `${cns}__container` }>
-        <div className={ `${cns}__image__wrapper` }>
+      <div className="teaser-text-side__container">
+        <div className="teaser-text-side__image__wrapper">
           <a href={ data.url }>
             <SrcSet
-              classname={ `${cns}__image` }
+              classname="teaser-text-side__image"
               src={ data.image }
               sizes="
                 (max-width: 729px) 100vw,
@@ -35,12 +33,12 @@ export default class BlogTeaser extends BesugoComponent {
           </a>
         </div>
 
-        <div className={ `${cns}__text__wrapper` }>
-          <p className={ `${cns}__text` }>
+        <div className="teaser-text-side__text__wrapper">
+          <p className="teaser-text-side__text">
             { data.title }
           </p>
 
-          <span className={ `${cns}__text__link` }>
+          <span className="teaser-text-side__text__link">
             <a href={ data.url } className="link__button-black-secondary">{ data.more }</a>
           </span>
         </div>

diff --git a/components/location/Amenity.jsx b/components/location/Amenity.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import BesugoComponent from 'Besugo';
 
-const cns = 'location-amenity';
-
 export default class Amenity extends BesugoComponent {
   static config = {
     tag: 'Amenity',
   }
 
   static buildContainer(parserUtils) {
     const li = parserUtils.createNode('li');
-    parserUtils.setAttribute(li, 'class', `${cns}__wrapper`);
+    parserUtils.setAttribute(li, 'class', 'location-amenity__wrapper');
 
     return li;
   }
@@ -21,7 +19,7 @@ export default class Amenity extends BesugoComponent {
     return (
       <div key={data.title}>
         <span className={ `icon icon-${data.icon}` } />
-        <span className={ `${cns}__title` }>
+        <span className="location-amenity__title">
           { data.title }
         </span>
       </div>

diff --git a/components/location/Location.jsx b/components/location/Location.jsx
@@ -6,14 +6,12 @@ import EndFooter from 'partials/EndFooter';
 import getData from 'partials/Reservation/getData';
 import ReservationSlider from 'partials/Reservation/Slider';
 import SlideShow from 'partials/SlideShow';
-import SrcSet, { SrcSetBg } from 'partials/SrcSet';
+import { SrcSetBg } from 'partials/SrcSet';
 import SVGElements from 'partials/SVGElements';
 import TopHeader from 'partials/TopHeader';
 
 import Amenity from 'location/Amenity';
 
-const cns = 'location';
-
 export default class Location extends BesugoComponent {
   static config = {
     tag: 'Location',
@@ -98,20 +96,20 @@ export default class Location extends BesugoComponent {
           nav: true,
           navAsThumbnails: true,
         } }
-        className={ `${cns}__gallery` }
+        className="location__gallery"
         sizes="100vw"
       />
     );
   }
 
   renderFeatures(data) {
     return !data.features.length && !data.features.size ? null : (
-      <div className={ `${cns}__amenities-wrapper` }>
-        <h1 className={ `${cns}__amenities-title` }>
+      <div className="location__amenities-wrapper">
+        <h1 className="location__amenities-title">
           { data.amenitiestitle }
         </h1>
 
-        <ul className={ `${cns}__amenities` }>
+        <ul className="location__amenities">
           { data.features.map(feature => (
             <li
               className="location-amenity__wrapper"
@@ -130,21 +128,21 @@ export default class Location extends BesugoComponent {
 
     return (
       <div className="page-main">
-        <div className={ `${cns}__header` }>
+        <div className="location__header">
           <SrcSetBg
-            className={ `${cns}__header-image` }
+            className="location__header-image"
             src={ data.header }
             sizes="120vw"
           />
-          <div className={ `${cns}__header-title-wrapper` }>
-            <h1 className={ `${cns}__header-title` }>
+          <div className="location__header-title-wrapper">
+            <h1 className="location__header-title">
               { data.name }
             </h1>
           </div>
         </div>
 
-        <div className={ `${cns}__content ${cns}__content--contained` }>
-          <div className={ `${cns}__description` }>
+        <div className="location__content location__content--contained">
+          <div className="location__description">
             { data.content }
           </div>
 
@@ -153,7 +151,7 @@ export default class Location extends BesugoComponent {
           { this.renderFeatures(data) }
 
           { data.map && (
-            <div className={ `${cns}__map` }>
+            <div className="location__map">
               <iframe
                 src={ data.map }
                 title="location-map"
@@ -165,17 +163,17 @@ export default class Location extends BesugoComponent {
           ) }
         </div>
 
-        <div className={ `${cns}__content ${cns}__content--contained` }>
+        <div className="location__content location__content--contained">
           { this.isPreview() ? null : (
-            <div className={ `${cns}__reservation` }>
-              <h1 className={ `${cns}__reservation-title` }>
+            <div className="location__reservation">
+              <h1 className="location__reservation-title">
                 { data.reservationtitle }
               </h1>
               <ReservationSlider { ...data } />
             </div>
           ) }
 
-          <div className={ `${cns}__catchphrase` }>
+          <div className="location__catchphrase">
             { data.catchphrase }
           </div>
         </div>

diff --git a/components/page/Simple.jsx b/components/page/Simple.jsx
@@ -7,7 +7,7 @@ import { SrcSetBg } from 'partials/SrcSet';
 import SVGElements from 'partials/SVGElements';
 import TopHeader from 'partials/TopHeader';
 
-const cns = 'page-simple';
+import classnames from 'classnames';
 
 export default class PageSimple extends BesugoComponent {
   static config = {
@@ -45,23 +45,28 @@ export default class PageSimple extends BesugoComponent {
   renderBlock() {
     const data = this.getData();
 
+    const headerClassName = classnames([
+      'page-simple__header',
+      { 'page-simple__header--no-bg': !data.image },
+    ]);
+
     return (
-      <div className="page-main">
-        <div className={ `${cns}__header` }>
+      <div className={ headerClassName }>
+        <div className="page-simple__header">
           { data.image && (
             <SrcSetBg
-              className={ `${cns}__header-image` }
+              className="page-simple__header-image"
               src={ data.image }
               sizes="120vw"
             />
           ) }
 
-          <div className={ `${cns}__header-title-wrapper` }>
-            <h1 className={ `${cns}__header-title` }>
+          <div className="page-simple__header-title-wrapper">
+            <h1 className="page-simple__header-title">
               { data.title }
             </h1>
             { data.subtitle && (
-              <h2 className={ `${cns}__header-subtitle` }>{ data.subtitle }</h2>
+              <h2 className="page-simple__header-subtitle">{ data.subtitle }</h2>
             ) }
           </div>
         </div>

diff --git a/components/partials/EndFooter.jsx b/components/partials/EndFooter.jsx
@@ -2,10 +2,9 @@ import React from 'react';
 import BesugoComponent from 'Besugo';
 import ReactHtmlParser from 'react-html-parser';
 
+import Link from 'partials/Link';
 import SocialIcons from 'partials/SocialIcons';
 
-const cns = 'footer';
-
 export default class EndFooter extends BesugoComponent {
   static config = {
     tag: 'EndFooter',
@@ -29,6 +28,7 @@ export default class EndFooter extends BesugoComponent {
       .map(link => ({
         label: link.getAttribute('label'),
         url: link.getAttribute('url'),
+        external: link.getAttribute('external') === 'true',
       }));
 
     const copyright = xplaceholder.getChildren('Copyright');
@@ -37,7 +37,7 @@ export default class EndFooter extends BesugoComponent {
 
   getData() {
     const data = Object.assign({
-      copyright: '\xA9 2018 Marzee Labs.',
+      copyright: '\xA9 2019 Marzee Labs.',
       links: [
         {
           label: 'About us',
@@ -65,26 +65,24 @@ export default class EndFooter extends BesugoComponent {
     const data = this.getData();
 
     return (
-      <footer className={ `${cns}` }>
-        <ul className={ `${cns}__menu` }>
+      <footer className="footer">
+        <ul className="footer__menu">
           { data.links.map(link => (
-            <li className={ `${cns}__menu-item` } key={ `link-${link.label}` }>
-              <a href={ link.url }>
-                { link.label }
-              </a>
+            <li className="footer__menu-item" key={ `link-${link.label}` }>
+              <Link { ...link } />
             </li>
           )) }
         </ul>
 
         <SocialIcons section="footer" { ...data } />
 
-        <div className={ `${cns}__copyright` }>
-          <a href={ data.homelink } className={ `${cns}__copyright-logo` }>
+        <div className="footer__copyright">
+          <a href={ data.homelink } className="footer__copyright-logo">
             <svg>
               <use xlinkHref="#logo-main" />
             </svg>
           </a>
-          <div className={ `${cns}__copyright-text` }>
+          <div className="footer__copyright-text">
             { data.copyright }
           </div>
         </div>

diff --git a/components/partials/Link.jsx b/components/partials/Link.jsx
@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react';
+
+export default class Link extends PureComponent {
+  render() {
+    const {
+      className,
+      label,
+      url,
+      external,
+    } = this.props;
+
+    if (external) {
+      return (
+        <a
+          className={ className }
+          href={ url }
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          { label }
+        </a>
+      );
+    }
+
+    return (
+      <a
+        className={ className }
+        href={ url }
+      >
+        { label }
+      </a>
+    );
+  }
+}
diff --git a/components/partials/LocaleSwitcher.jsx b/components/partials/LocaleSwitcher.jsx
@@ -1,7 +1,5 @@
 import React, { PureComponent } from 'react';
 
-const cns = 'locale-switcher';
-
 export default class LocaleSwitcher extends PureComponent {
   render() {
     const {
@@ -10,18 +8,18 @@ export default class LocaleSwitcher extends PureComponent {
     } = this.props;
 
     return !localeSwitches.length ? null : (
-      <li className={ `${cns}` }>
+      <li className="locale-switcher">
         { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
         <a>{ locale.toUpperCase() }</a>
 
-        <ul className={ `${cns}__list` }>
+        <ul className="locale-switcher__list">
           { localeSwitches.map(localeSwitch => (
             <li
-              className={ `${cns}__locale` }
+              className="locale-switcher__locale"
               key={ `locale-switcher-${localeSwitch.locale}` }
             >
               <a
-                className={ `${cns}__locale-link` }
+                className="locale-switcher__locale-link"
                 href={ localeSwitch.url }
               >
                 { localeSwitch.locale.toUpperCase() }