cmspageblocks 1.0.2 → 1.0.7

package/build/index.js

@@ -1167,13 +1167,9 @@ var classnames = {exports: {}};
 
 var classNames = classnames.exports;
 
-function Text (_ref) {
-  var options = _ref.options;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: options.content
-    }
-  });
+function Button(_ref) {
+  _ref.options;
+  return /*#__PURE__*/React__default["default"].createElement("div", null, "Button");
 }
 
 function Image (_ref) {
@@ -3085,7 +3081,7 @@ function _taggedTemplateLiteral(strings, raw) {
 }
 
 var _templateObject$2;
-var SliderContainer = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}\n"])));
+var SliderContainer = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}\n  ul li {\n    padding: 0;\n  }\n\n"])));
 
 function ImageSlider(_ref) {
   var options = _ref.options;
@@ -3093,6 +3089,7 @@ function ImageSlider(_ref) {
     showThumbs: false,
     swipeable: true
   }, options.content.map(function (slide) {
+    if (!slide.active) return;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: slide.image[0].reference
     }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -3102,6 +3099,41 @@ function ImageSlider(_ref) {
   })));
 }
 
+function HouseMap(_ref) {
+  _ref.latitude;
+      _ref.longitude;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null) // <MapContainer
+  //   center={[latitude, longitude]}
+  //   zoom={10}
+  //   scrollWheelZoom={false}
+  // >
+  //   <TileLayer
+  //     attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+  //     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  //   />
+  //   <Marker position={[latitude, longitude]}>
+  //     {/* <Popup>
+  //   A pretty CSS3 popup. <br /> Easily customizable.
+  // </Popup> */}
+  //   </Marker>
+  // </MapContainer>
+  ;
+}
+
+function SearchBar(_ref) {
+  _ref.options;
+  return /*#__PURE__*/React__default["default"].createElement("div", null, "SearchBar");
+}
+
+function Text (_ref) {
+  var options = _ref.options;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: options.content
+    }
+  });
+}
+
 var _templateObject$1, _templateObject2$1;
 var BREAKPOINTS = {
   DESKTOP: 992,
@@ -3133,6 +3165,30 @@ function Block(_ref) {
       pageBlock.content;
 
   switch (options.type) {
+    case 'button':
+      return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+        options: options,
+        key: pageBlock.id
+      }, /*#__PURE__*/React__default["default"].createElement(Button, {
+        options: options
+      }));
+
+    case 'map':
+      return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+        options: options,
+        key: pageBlock.id
+      }, /*#__PURE__*/React__default["default"].createElement(HouseMap, {
+        options: options
+      }));
+
+    case 'searchbar':
+      return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+        options: options,
+        key: pageBlock.id
+      }, /*#__PURE__*/React__default["default"].createElement(SearchBar, {
+        options: options
+      }));
+
     case 'text':
       return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
         options: options,
@@ -3193,7 +3249,6 @@ function Row(_ref) {
 
 function CmsBlocks(_ref) {
   var content = _ref.content;
-  // console.log({ content });
   return /*#__PURE__*/React__default["default"].createElement(BlockContainer, null, content.page_rows.map(function (row, index) {
     return /*#__PURE__*/React__default["default"].createElement(Row, {
       content: row,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.2",
+  "version": "1.0.7",
   "description": "",
   "main": "build/index.js",
   "repository": {
@@ -30,7 +30,9 @@
   "dependencies": {
     "bukazu-portal-react": "^2.0.7",
     "classnames": "^2.3.1",
-    "react-google-maps": "^9.4.5",
+    "formik": "^2.2.9",
+    "leaflet": "^1.7.1",
+    "react-leaflet": "^3.2.2",
     "react-responsive-carousel": "^3.2.21",
     "styled-components": "^5.3.1"
   },
@@ -39,8 +41,9 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "babel-eslint": "^10.1.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.3.0",
@@ -51,7 +54,7 @@
     "rollup": "^2.58.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-import-css": "^3.0.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-replace": "^2.2.0",
     "webpack": "^5",
     "webpack-cli": "^4.6.0",

package/rollup.config.js

@@ -1,7 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
 import babel from 'rollup-plugin-babel';
 import json from '@rollup/plugin-json';
 import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
 
 export default {
   input: 'src/index.js',
@@ -17,7 +18,10 @@ export default {
       exclude: 'node_modules/**',
     }),
     commonjs(),
-    resolve(),
+    nodePolyfills,
+    nodeResolve({
+      // preferBuiltins: true,
+    }),
     json({
       namedExports: false,
     }),

package/src/components/Block.js

@@ -1,13 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import {Text, Image, ImageSlider} from './BlockTypes';
+import {Text, Image, ImageSlider, Button, Map, SearchBar} from './BlockTypes';
 import { BlockContainer } from '../Main.css'
 
 function Block({pageBlock}) {
   const { options, content } = pageBlock;
 
   switch(options.type) {
+    case 'button': return <Wrapper options={options} key={pageBlock.id}><Button options={options} /></Wrapper>
+    case 'map': return <Wrapper options={options} key={pageBlock.id}><Map options={options} /></Wrapper>
+    case 'searchbar': return <Wrapper options={options} key={pageBlock.id}><SearchBar options={options} /></Wrapper>
     case 'text': return <Wrapper options={options} key={pageBlock.id}><Text options={options} /></Wrapper>
     case 'image': return <Wrapper options={options}><Image options={options} /></Wrapper>
     case 'image_slider': return <Wrapper options={options} key={pageBlock.id}><ImageSlider options={options} /></Wrapper>
@@ -17,7 +20,6 @@ function Block({pageBlock}) {
 }
 
 function Wrapper({ children, options }) {
-
   let classes = '';
   Object.entries(options.classes).forEach(element => {
     classes += '';

package/src/components/BlockTypes/Button.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Button({options}) {
+  return (
+    <div>Button</div>
+  )
+}

package/src/components/BlockTypes/Form.js

@@ -0,0 +1,129 @@
+// import React from 'react';
+// import PropTypes from 'prop-types';
+// import { Formik } from 'formik';
+// import axios from 'axios';
+// import styled from 'styled-components';
+
+// const Form = ({ form }) => {
+//   return (
+//     <Formik
+//       onSubmit={(values, actions) => {
+//         setTimeout(() => {
+//           axios.post(`https://cms.burobork.nl/recieve/form/${form.id}`, {
+//             form: {
+//               locale: 'nl',
+//               content: values,
+//             },
+//           });
+//           alert('Form has been sent!');
+//           actions.setSubmitting(false);
+//         }, 1000);
+//       }}
+//       render={({ values, errors, handleBlur, handleChange, handleSubmit }) => (
+//         <FormContainer>
+//           <form onSubmit={handleSubmit}>
+//             {form.options.fields.map(field => {
+//               if (field.type === 'select') {
+//                 return (
+//                   <div key={field.model}>
+//                     <div htmlFor={field.model}>{field.label}</div>
+//                     <select
+//                       id={field.model}
+//                       onChange={handleChange}
+//                       onBlur={handleBlur}
+//                       value={values[field.model]}
+//                       name={field.model}
+//                     >
+//                       {field.values.map(opt => (
+//                         <option key={opt.option_value} value={opt.option_value}>
+//                           {opt.label}
+//                         </option>
+//                       ))}
+//                     </select>
+//                   </div>
+//                 );
+//               } else if (field.type === 'textarea') {
+//                 return <div key={field.model}>
+//                     <div htmlFor={field.model}>
+//                       {field.label}
+//                     </div>
+//                     <textarea id={field.model} onChange={handleChange} onBlur={handleBlur} value={values[field.model]} name={field.model} rows="5">
+
+//                     </textarea>
+//                   </div>;
+//               } else {
+//                 return (
+//                   <div key={field.model}>
+//                     <label htmlFor={field.model}>
+//                       {field.label}
+//                       <input
+//                         id={field.model}
+//                         type="text"
+//                         onChange={handleChange}
+//                         onBlur={handleBlur}
+//                         value={values[field.model]}
+//                         name={field.model}
+//                         required={field.required}
+//                       />
+//                     </label>
+//                     {errors[field.name] && (
+//                       <div id="feedback">{errors[field.name]}</div>
+//                     )}
+//                   </div>
+//                 );
+//               }
+//             })}
+//             <button type="submit">Verzenden</button>
+//           </form>
+//         </FormContainer>
+//       )}
+//     />
+//   );
+// };
+
+// Form.propTypes = {
+//   form: PropTypes.object.isRequired,
+// };
+
+// export default Form;
+
+// const FormContainer = styled.div`
+//   width: 100%;
+//   select {
+//     appearance: none;
+//     background: #fff;
+//     background-image: linear-gradient(45deg, transparent 50%, gray 50%),
+//       linear-gradient(135deg, gray 50%, transparent 50%),
+//       linear-gradient(to right, #ccc, #ccc);
+//     background-position: calc(100% - 20px) calc(1em),
+//       calc(100% - 15px) calc(1em), calc(100% - 2.5em);
+//     background-size: 5px 5px, 5px 5px, 1px 1.5em;
+//     background-repeat: no-repeat;
+//   }
+
+//   label {
+//     display: flex;
+//     flex-wrap: wrap;
+//     flex-direction: column;
+//     width: 100%;
+//     margin: 8px 0;
+//   }
+//   input,
+//   select,
+//   textarea {
+//     display: block;
+//     box-sizing: border-box;
+//     margin: 8px 0;
+//     padding: 8px;
+//     width: 100%;
+//     appearance: none;
+//     border: 1px solid rgba(0, 0, 0, 0.25);
+//   }
+//   button {
+//     border: 0;
+//     padding: 8px 16px;
+//     font-size: 1.4rem;
+//     line-height: 1.4;
+//     font-weight: bold;
+//   }
+// `;

package/src/components/BlockTypes/ImageSlide.css.js

@@ -2,4 +2,8 @@ import styled from 'styled-components'
 
 export const SliderContainer = styled.div`
 .carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}
+  ul li {
+    padding: 0;
+  }
+
 `;

package/src/components/BlockTypes/ImageSlider.js

@@ -7,6 +7,7 @@ export default function ImageSlider({options}) {
     <SliderContainer>
     <Carousel showThumbs={false} swipeable={true}>
       {options.content.map(slide => {
+      if (!slide.active) return;
        return ( <div key={slide.image[0].reference}>
         <img
               src={

package/src/components/BlockTypes/Map.js

@@ -0,0 +1,25 @@
+import React from "react";
+// import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+
+function HouseMap({ latitude, longitude }) {
+  return (
+    <></>
+    // <MapContainer
+    //   center={[latitude, longitude]}
+    //   zoom={10}
+    //   scrollWheelZoom={false}
+    // >
+    //   <TileLayer
+    //     attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+    //     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    //   />
+    //   <Marker position={[latitude, longitude]}>
+    //     {/* <Popup>
+    //   A pretty CSS3 popup. <br /> Easily customizable.
+    // </Popup> */}
+    //   </Marker>
+    // </MapContainer>
+  );
+}
+
+export default HouseMap;

package/src/components/BlockTypes/Portal.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Portal({options}) {
+  return (
+    <div>Portal</div>
+  )
+}

package/src/components/BlockTypes/SearchBar.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SearchBar({options}) {
+  return (
+    <div>SearchBar</div>
+  )
+}

package/src/components/BlockTypes/index.js

@@ -1,6 +1,20 @@
-import Text from './Text'
+import Button from './Button'
+// import Form from './Form'
+import Iframe from './Iframe'
 import Image from './Image'
 import ImageSlider from './ImageSlider'
-import Iframe from './Iframe'
+import Map from './Map'
+import Portal from './Portal'
+import SearchBar from './SearchBar'
+import Text from './Text'
 
-export { Text, Image, ImageSlider, Iframe }
+export {
+  Button,
+  Image,
+  ImageSlider,
+  Iframe,
+  Map,
+  Portal,
+  SearchBar,
+  Text
+}

package/src/components/Row.js

@@ -2,9 +2,11 @@ import React from 'react'
 import Block from './Block'
 
 export default function Row({ content }) {
-  return (<div className="row" style={content.options.style}>
-    {content.page_blocks.map(block => {
-          return <Block pageBlock={block} key={block.id} />
-        })}
-  </div>)
+  return (
+    <div className="row" style={content.options.style}>
+      {content.page_blocks.map(block => {
+            return <Block pageBlock={block} key={block.id} />
+          })}
+    </div>
+  )
 }

package/src/index.js

@@ -3,7 +3,6 @@ import Row from './components/Row'
 import { BlockContainer } from './Main.css'
 
 export default function CmsBlocks({ content }) {
-  // console.log({ content });
   return <BlockContainer>
     {content.page_rows.map((row, index) => {
       return <Row content={row} key={index}></Row>