umwd-components 0.1.87 → 0.1.90

package/dist/cjs/components/ColumnsSection.js

@@ -0,0 +1,66 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var getIcon = require('../lib/getIcon.js');
+
+function ColumnsSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    column,
+    maxWidth
+  } = data;
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
+    sx: {
+      width: "100%"
+    },
+    useFlexGap: true
+  }, column.map(column => {
+    const Icon = getIcon.default(column.icon);
+    return /*#__PURE__*/React.createElement(material.Paper, {
+      sx: {
+        p: 2
+      }
+    }, /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h5",
+      sx: {
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      }
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2,
+        width: "50px",
+        height: "50px",
+        fill: "currentColor",
+        stroke: "none"
+      }
+    }), column.heading), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, column.text));
+  })));
+}
+
+exports.ColumnsSection = ColumnsSection;

package/dist/cjs/components/FeaturesSection.js

@@ -15,10 +15,12 @@ function FeatureSection(_ref) {
     data
   } = _ref;
   const {
-    feature
+    feature,
+    maxWidth
   } = data;
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -28,7 +30,13 @@ function FeatureSection(_ref) {
     justifyContent: "stretch",
     flexWrap: "wrap",
     sx: {
-      width: "100%"
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
     },
     useFlexGap: true
   }, feature.map(feature => {
@@ -40,9 +48,9 @@ function FeatureSection(_ref) {
         flexDirection: "column",
         justifyContent: "space-between",
         flex: 1,
-        minWidth: "350px"
+        minWidth: 275
       }
-    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
+    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Box, {
       sx: {
         height: 140,
         display: "grid",
@@ -83,7 +91,7 @@ function FeatureSection(_ref) {
       }
     }, /*#__PURE__*/React.createElement(material.Button, {
       size: "small"
-    }, "Share"), /*#__PURE__*/React.createElement(material.Button, {
+    }, "Contact"), /*#__PURE__*/React.createElement(material.Button, {
       size: "small"
     }, "Learn More")));
   })));

package/dist/cjs/components/FleetSection.js

@@ -18,10 +18,12 @@ function FleetSection(_ref) {
     data
   } = _ref;
   const {
-    airplane
+    airplane,
+    maxWidth
   } = data;
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -31,7 +33,13 @@ function FleetSection(_ref) {
     justifyContent: "stretch",
     flexWrap: "wrap",
     sx: {
-      width: "100%"
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
     },
     useFlexGap: true
   }, airplane.map(airplane => /*#__PURE__*/React.createElement(material.Card, {
@@ -41,7 +49,7 @@ function FleetSection(_ref) {
       flexDirection: "column",
       justifyContent: "space-between",
       flex: 1,
-      minWidth: "350px"
+      minWidth: 275
     }
   }, /*#__PURE__*/React.createElement(material.CardHeader, {
     title: airplane.name,

package/dist/cjs/components/Footer.js

@@ -13,6 +13,7 @@ var React = require('react');
 var material = require('@mui/material');
 var Link = require('next/link');
 var Image = require('next/image');
+var getIcon = require('../lib/getIcon.js');
 var PropTypes = require('prop-types');
 
 Footer.propTypes = {
@@ -143,11 +144,17 @@ function Footer(_ref) {
       color: "primary.contrastText"
     }
   }, company_socials.map((company_social, index) => {
+    const Icon = getIcon.default(company_social.icon);
     return /*#__PURE__*/React.createElement(material.IconButton, {
       key: index,
       color: "inherit",
       href: company_social.url
-    }, company_social.icon);
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2
+      }
+    }));
   })))), /*#__PURE__*/React.createElement(material.Grid, {
     item: true,
     xs: 12

package/dist/cjs/components/Page.js

@@ -16,6 +16,7 @@ var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
 var FleetSection = require('./FleetSection.js');
 var IconSection = require('./IconSection.js');
+var ColumnsSection = require('./ColumnsSection.js');
 var material = require('@mui/material');
 var ContactForm = require('./ContactForm.js');
 
@@ -51,6 +52,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.columns-section":
+      return /*#__PURE__*/React.createElement(ColumnsSection.ColumnsSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/cjs/components/TextImageSection.js

@@ -42,6 +42,7 @@ function TextImageSection(_ref) {
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
@@ -60,10 +61,17 @@ function TextImageSection(_ref) {
     }
   }, title), /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,
-    direction: reverse ? "row-reverse" : "row"
+    direction: reverse ? "row-reverse" : "row",
+    gap: 2,
+    sx: {
+      width: "100%",
+      [theme.breakpoints.down("sm")]: {
+        flexDirection: "column"
+      }
+    }
   }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
-      width: text !== null && text !== undefined ? "50%" : "100%",
+      minWidth: 275,
       height: "100%",
       overflow: "hidden",
       display: "flex",
@@ -77,7 +85,10 @@ function TextImageSection(_ref) {
     src: image.url
   })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
-      width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
+      /* width:
+        image?.url !== null && image?.url !== undefined
+          ? "50%"
+          : "100%", */
       height: "100%",
       overflow: "hidden",
       display: "flex",

package/dist/cjs/lib/AmbulanceIcon.js

@@ -0,0 +1,45 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var SvgIcon = require('@mui/material/SvgIcon');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function AmbulanceIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement(SvgIcon, props, /*#__PURE__*/React__namespace.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M20,8h-3V7c0-1.1-0.9-2-2-2H3C1.9,5,1,5.9,1,7v10h2c0,1.7,1.3,3,3,3s3-1.3,3-3h6c0,1.7,1.3,3,3,3s3-1.3,3-3h2v-5L20,8z\r M6,18.5c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S6.8,18.5,6,18.5z M12.2,11.3h-1.7V13H8.1v-1.7H6.5V9h1.7V7.3h2.3\r V9h1.7V11.3z M18,18.5c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.8,18.5,18,18.5z M17,12V9.5h2.5l2,2.5H17z"
+  })));
+}
+
+exports.default = AmbulanceIcon;

package/dist/cjs/lib/getIcon.js

@@ -28,6 +28,12 @@ var PropaneTankIcon = require('@mui/icons-material/PropaneTank');
 var MasksIcon = require('@mui/icons-material/Masks');
 var BoltIcon = require('@mui/icons-material/Bolt');
 var BedIcon = require('@mui/icons-material/Bed');
+var AmbulanceIcon = require('./AmbulanceIcon.js');
+var LinkedInIcon = require('@mui/icons-material/LinkedIn');
+var FaceBookIcon = require('@mui/icons-material/Facebook');
+var TwitterIcon = require('@mui/icons-material/Twitter');
+var LocalShippingIcon = require('@mui/icons-material/LocalShipping');
+var InstagramIcon = require('@mui/icons-material/Instagram');
 
 function getIcon(icon) {
   switch (icon) {
@@ -71,6 +77,18 @@ function getIcon(icon) {
       return BoltIcon;
     case "BedIcon":
       return BedIcon;
+    case "AmbulanceIcon":
+      return AmbulanceIcon.default;
+    case "LinkedInIcon":
+      return LinkedInIcon;
+    case "FaceBookIcon":
+      return FaceBookIcon;
+    case "TwitterIcon":
+      return TwitterIcon;
+    case "LocalShippingIcon":
+      return LocalShippingIcon;
+    case "InstagramIcon":
+      return InstagramIcon;
     default:
       return null;
   }

package/dist/esm/components/BulletList.js

@@ -5,7 +5,7 @@
  * @license MIT
  */
   
-import React from 'react';
+import React__default from 'react';
 import PropTypes from 'prop-types';
 import { Stack, Typography, SvgIcon } from '@mui/material';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
@@ -16,9 +16,9 @@ function BulletList(_ref) {
     bulletSVG
   } = _ref;
   console.log("bulletSVG2", bulletSVG);
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2
-  }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(Typography, {
+  }, bullets.map((bullet, index) => /*#__PURE__*/React__default.createElement(Typography, {
     key: index,
     sx: {
       verticalAlign: "center",
@@ -26,11 +26,11 @@ function BulletList(_ref) {
       justifyContent: "flex-start",
       display: "inline-flex"
     }
-  }, bulletSVG ? /*#__PURE__*/React.createElement(SvgIcon, {
+  }, bulletSVG ? /*#__PURE__*/React__default.createElement(SvgIcon, {
     sx: {
       mr: 1
     }
-  }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
+  }, bulletSVG) : /*#__PURE__*/React__default.createElement(FiberManualRecordIcon, null), bullet)));
 }
 BulletList.propTypes = {
   bullets: PropTypes.arrayOf(PropTypes.string).isRequired

package/dist/esm/components/Button.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
   
-import React from 'react';
+import React__default from 'react';
 import PropTypes from 'prop-types';
 
 function Button(_ref) {
@@ -26,7 +26,7 @@ function Button(_ref) {
     padding: "".concat(0.5 * scale, "rem ").concat(1 * scale, "rem"),
     border: "none"
   };
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React__default.createElement("button", {
     style: style,
     onClick: onClick
   }, label);

package/dist/esm/components/ColumnsSection.js

@@ -0,0 +1,64 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default from 'react';
+import { Container, Stack, Paper, Typography } from '@mui/material';
+import getIcon from '../lib/getIcon.js';
+
+function ColumnsSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    column,
+    maxWidth
+  } = data;
+  return /*#__PURE__*/React__default.createElement(Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    spacing: 2,
+    direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
+    sx: {
+      width: "100%"
+    },
+    useFlexGap: true
+  }, column.map(column => {
+    const Icon = getIcon(column.icon);
+    return /*#__PURE__*/React__default.createElement(Paper, {
+      sx: {
+        p: 2
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "h5",
+      sx: {
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      }
+    }, Icon !== null && /*#__PURE__*/React__default.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2,
+        width: "50px",
+        height: "50px",
+        fill: "currentColor",
+        stroke: "none"
+      }
+    }), column.heading), /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, column.text));
+  })));
+}
+
+export { ColumnsSection };

package/dist/esm/components/ContactForm.js

@@ -5,7 +5,7 @@
  * @license MIT
  */
   
-import React from 'react';
+import React__default from 'react';
 import { Container, Stack, Typography, Paper, Button, TextField } from '@mui/material';
 import isEmail from 'validator/lib/isEmail';
 
@@ -16,20 +16,20 @@ function ContactForm(_ref) {
   const {
     maxWidth
   } = data;
-  const [formValues, setFormValues] = React.useState({
+  const [formValues, setFormValues] = React__default.useState({
     name: "",
     email: "",
     subject: "",
     message: ""
   });
-  const [formErrors, setFormErrors] = React.useState({});
+  const [formErrors, setFormErrors] = React__default.useState({});
 
   // Setting button text on form submission
-  React.useState("Send");
+  React__default.useState("Send");
 
   // Setting success or failure messages states
-  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);
-  const [showFailureMessage, setShowFailureMessage] = React.useState(false);
+  const [showSuccessMessage, setShowSuccessMessage] = React__default.useState(false);
+  const [showFailureMessage, setShowFailureMessage] = React__default.useState(false);
   const handleChange = e => {
     const {
       name,
@@ -122,45 +122,45 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
       my: 1
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2,
     sx: {
       width: "100%"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6",
     align: "center"
-  }, "Write us"), /*#__PURE__*/React.createElement(Typography, {
+  }, "Write us"), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body1",
     align: "center"
-  }, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__PURE__*/React.createElement(Paper, {
+  }, "We're open for any suggestion or just to have a chat"), showSuccessMessage && /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
       p: 2
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h6"
-  }, "Thank you!"), /*#__PURE__*/React.createElement(Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React.createElement(Paper, {
+  }, "Thank you!"), /*#__PURE__*/React__default.createElement(Typography, null, "Your e-mail has been successfully sent!"))), showFailureMessage && /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
       p: 2
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2
-  }, /*#__PURE__*/React.createElement(Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Typography, null, "I am sorry, something went wrong, you could email me directly on info@jellepaulus.nl"), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained"
-  }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React.createElement(Paper, {
+  }, "try again")))), !showSuccessMessage && !showFailureMessage && /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
       p: 2
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React__default.createElement(TextField, {
     id: "name",
     name: "name",
     label: "Name",
@@ -170,7 +170,7 @@ function ContactForm(_ref) {
     onChange: handleChange,
     error: formErrors.name != undefined ? true : false,
     helperText: formErrors.name
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }), /*#__PURE__*/React__default.createElement(TextField, {
     id: "email",
     name: "email",
     label: "Email",
@@ -180,7 +180,7 @@ function ContactForm(_ref) {
     onChange: handleChange,
     error: formErrors.email != undefined ? true : false,
     helperText: formErrors.email
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }), /*#__PURE__*/React__default.createElement(TextField, {
     id: "subject",
     name: "subject",
     label: "Subject",
@@ -190,7 +190,7 @@ function ContactForm(_ref) {
     onChange: handleChange,
     error: formErrors.subject != undefined,
     helperText: formErrors.subject
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }), /*#__PURE__*/React__default.createElement(TextField, {
     id: "message",
     name: "message",
     label: "Message",
@@ -202,15 +202,15 @@ function ContactForm(_ref) {
     onChange: handleChange,
     error: formErrors.message != undefined,
     helperText: formErrors.message
-  }), /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     spacing: 2,
     justifyContent: "end"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "outlined",
     color: "primary",
     onClick: handleClear
-  }, "Clear"), /*#__PURE__*/React.createElement(Button, {
+  }, "Clear"), /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     onClick: handleSubmit
   }, "Send")))));