cmspageblocks 1.0.45 → 1.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.45",
+  "version": "1.0.48",
   "description": "",
   "main": "build/index.js",
   "repository": {
@@ -34,10 +34,7 @@
     "classnames": "^2.3.1",
     "formik": "^2.2.9",
     "react-image-gallery": "^1.2.7",
-    "react-photo-gallery": "^8.0.0",
-    "react-responsive-carousel": "^3.2.21",
-    "react-slick": "^0.28.1",
-    "slick-carousel": "^1.8.1"
+    "react-responsive-carousel": "^3.2.21"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

package/src/components/BlockTypes/Form.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
 import styled from 'styled-components';
+import { ButtonStyle } from './Styling/ButtonStyle';
 
 const Form = ({ options }) => {
   const form = options.content;
@@ -22,19 +23,24 @@ const Form = ({ options }) => {
           }).then((resp) => {
             if (resp.ok === true) {
               alert('Form has been sent!');
-              actions.resetForm({ values: {} });              
+              actions.resetForm({ values: {} });
             } else {
-              alert('Please try again later.');              
+              alert('Please try again later.');
             }
           });
           actions.setSubmitting(false);
         }, 1000);
       }}
-      render={({ values, errors, handleBlur, handleChange, handleSubmit }) => (
+      render={({
+        values,
+        errors,
+        handleBlur,
+        handleChange,
+        handleSubmit,
+        isSubmitting,
+      }) => (
         <FormContainer>
-          <form
-            onSubmit={handleSubmit}
-          >
+          <form onSubmit={handleSubmit}>
             {form.options.fields.map((field) => {
               if (field.type === 'select') {
                 return (
@@ -91,9 +97,9 @@ const Form = ({ options }) => {
                 );
               }
             })}
-            <button type="submit" disabled={isSubmitting}>
+            <ButtonStyle type="submit" disabled={isSubmitting}>
               Verzenden
-            </button>
+            </ButtonStyle>
           </form>
         </FormContainer>
       )}
@@ -138,13 +144,5 @@ const FormContainer = styled.div`
     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;
-    background: ${(props) => props.theme.primaryColor};
-  }
+  }  
 `;

package/src/components/BlockTypes/ImageGallery/ImageGallery.js

@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
+import React from 'react'
 import Gallery from 'react-image-gallery';
-// import GridGallery from './GridGallery';
 import { NewGallery } from './ImageSlide.css';
 
 export default function ImageGallery({options}) {
@@ -13,7 +12,6 @@ export default function ImageGallery({options}) {
   return (
     <NewGallery>
       <Gallery items={items} showThumbnails={true} thumbnailPosition='right'></Gallery>
-      {/* <GridGallery options={options} /> */}
     </NewGallery>
   )
 }

package/src/components/BlockTypes/Styling/ButtonStyle.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+export const ButtonStyle = styled.button`
+  display: block;
+  padding: 12px 24px !important;
+  border-radius: 12px;
+  color: #fff !important;
+  color: ${(props) => (props.purple ? '#642C8F' : '#000')};
+  border: 2px solid
+    ${(props) =>
+      props.theme.primaryColor ? props.theme.primaryColor : '#642C8F'};
+  font-weight: bold;
+  text-decoration: none;
+  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
+  transition: all 0.5s ease;
+  width: fit-content;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  cursor: pointer;
+  &:before {
+    background-color: ${(props) =>
+      props.theme.primaryColor
+        ? props.theme.primaryColor
+        : props.theme.primaryColor} !important;
+    width: 100% !important;
+    position: absolute;
+    right: 0;
+    top: 0;
+    content: '';
+    height: 100% !important;
+    z-index: -1;
+    transition: all 0.5s ease;
+  }
+  &:hover {
+    border: 2px solid
+      ${(props) => (props.purple ? '#642C8F' : props.theme.primaryColor)};
+    box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.25);
+    color: ${(props) => props.theme.primaryColor} !important;
+    &:before {
+      width: 1px !important;
+      right: -1px;
+    }
+  }
+`;

package/src/components/BlockTypes/ImageGallery/GridGallery.js

@@ -1,33 +0,0 @@
-import React from 'react'
-import Gallery from 'react-photo-gallery'
-
-export default function GridGallery({ options }) {
-
-  const items = options.content.map(transform)
-
-  return (
-    <div>
-    <div style={{ columns: 3 }}>
-      {items.map((photo, index) => (
-        <img src={photo.original}></img>
-        ))}
-        </div>
-    <Gallery photos={items}>
-
-    </Gallery>
-    </div>
-  )
-}
-
-function transform(item) {
-  return {
-    src: `https://cdn.burobork.nl/${item.reference}`,
-    original: `https://cdn.burobork.nl/${item.reference}`,
-    thumbnail: `https://cdn.burobork.nl/${item.reference}`,
-    originalAlt: item.alt,
-    originalTitle: item.title,
-    lazyLoad: true,
-    height: 3,
-    width: 4,
-  }
-}