umwd-components 0.1.91 → 0.1.93

package/dist/cjs/components/ColumnsSection.js

@@ -18,25 +18,28 @@ function ColumnsSection(_ref) {
     column,
     maxWidth
   } = data;
+
+  // TODO make suitable for multiple column layouts
+
   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
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2
   }, column.map(column => {
     const Icon = getIcon.default(column.icon);
-    return /*#__PURE__*/React.createElement(material.Paper, {
+    return /*#__PURE__*/React.createElement(material.Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      key: column.id
+    }, /*#__PURE__*/React.createElement(material.Paper, {
       sx: {
-        p: 2
+        p: 2,
+        height: "100%"
       }
     }, /*#__PURE__*/React.createElement(material.Typography, {
       variant: "h5",
@@ -59,7 +62,7 @@ function ColumnsSection(_ref) {
       variant: "body2",
       color: "text.secondary",
       component: "div"
-    }, column.text));
+    }, column.text)));
   })));
 }
 

package/dist/cjs/components/HeroSection.js

@@ -38,7 +38,7 @@ function HeroSection(_ref) {
       overflow: "hidden",
       minHeight: "600px"
     }
-  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+  }, bgImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     alt: "Background",
     style: {
       position: "absolute",

package/dist/cjs/components/Page.js

@@ -19,6 +19,7 @@ var IconSection = require('./IconSection.js');
 var ColumnsSection = require('./ColumnsSection.js');
 var material = require('@mui/material');
 var ContactForm = require('./ContactForm.js');
+var PersonaliaSection = require('./PersonaliaSection.js');
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -57,6 +58,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.personalia-section":
+      return /*#__PURE__*/React.createElement(PersonaliaSection.PersonaliaSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/cjs/components/PersonaliaSection.js

@@ -0,0 +1,87 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var StrapiImage = require('./StrapiImage.js');
+var Link = require('next/link');
+var iconsMaterial = require('@mui/icons-material');
+
+function PersonaliaSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    partner,
+    maxWidth
+  } = data;
+  material.useTheme();
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, partner.map(partner => {
+    var _partner$links;
+    return /*#__PURE__*/React.createElement(material.Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      key: partner.id
+    }, /*#__PURE__*/React.createElement(material.Paper, {
+      sx: {
+        p: 2,
+        height: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(material.Grid, {
+      container: true
+    }, /*#__PURE__*/React.createElement(material.Grid, {
+      item: true,
+      xs: 9
+    }, /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h5",
+      sx: {
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      }
+    }, partner.name), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, partner.function), ((_partner$links = partner.links) === null || _partner$links === void 0 ? void 0 : _partner$links.length) > 0 && partner.links.map(link => {
+      return (
+        /*#__PURE__*/
+        // TODO use and create MuiLink Component
+        React.createElement(Link, {
+          href: link.url,
+          key: link.id
+        }, link.text)
+      );
+    }), partner.linkedIn && /*#__PURE__*/React.createElement(material.Typography, null, /*#__PURE__*/React.createElement(material.IconButton, null, /*#__PURE__*/React.createElement(iconsMaterial.LinkedIn, null))), partner.email && /*#__PURE__*/React.createElement(material.Typography, null, partner.email)), /*#__PURE__*/React.createElement(material.Grid, {
+      item: true,
+      xs: 3
+    }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+      src: partner.photo.url,
+      alt: partner.photo.alternativeText,
+      width: partner.photo.width,
+      height: partner.photo.height,
+      style: {
+        objectFit: "contain",
+        width: "100%",
+        height: "100%"
+      }
+    })))));
+  })));
+}
+
+exports.PersonaliaSection = PersonaliaSection;

package/dist/cjs/components/TextImageSection.js

@@ -44,7 +44,7 @@ function TextImageSection(_ref) {
 
   const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: maxWidth || "lg",
+    maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
       my: 1
     }

package/dist/esm/components/ColumnsSection.js

@@ -5,7 +5,7 @@
  */
   
 import React__default from 'react';
-import { Container, Stack, Paper, Typography } from '@mui/material';
+import { Container, Grid, Paper, Typography } from '@mui/material';
 import getIcon from '../lib/getIcon.js';
 
 function ColumnsSection(_ref) {
@@ -16,25 +16,28 @@ function ColumnsSection(_ref) {
     column,
     maxWidth
   } = data;
+
+  // TODO make suitable for multiple column layouts
+
   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
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2
   }, column.map(column => {
     const Icon = getIcon(column.icon);
-    return /*#__PURE__*/React__default.createElement(Paper, {
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      key: column.id
+    }, /*#__PURE__*/React__default.createElement(Paper, {
       sx: {
-        p: 2
+        p: 2,
+        height: "100%"
       }
     }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "h5",
@@ -57,7 +60,7 @@ function ColumnsSection(_ref) {
       variant: "body2",
       color: "text.secondary",
       component: "div"
-    }, column.text));
+    }, column.text)));
   })));
 }
 

package/dist/esm/components/HeroSection.js

@@ -36,7 +36,7 @@ function HeroSection(_ref) {
       overflow: "hidden",
       minHeight: "600px"
     }
-  }, /*#__PURE__*/React__default.createElement(StrapiImage, {
+  }, bgImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
     alt: "Background",
     style: {
       position: "absolute",

package/dist/esm/components/Page.js

@@ -15,6 +15,7 @@ import { IconSection } from './IconSection.js';
 import { ColumnsSection } from './ColumnsSection.js';
 import { Box } from '@mui/material';
 import ContactForm from './ContactForm.js';
+import { PersonaliaSection } from './PersonaliaSection.js';
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -53,6 +54,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.personalia-section":
+      return /*#__PURE__*/React__default.createElement(PersonaliaSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/esm/components/PersonaliaSection.js

@@ -0,0 +1,85 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default from 'react';
+import { useTheme, Container, Grid, Paper, Typography, IconButton } from '@mui/material';
+import { StrapiImage } from './StrapiImage.js';
+import Link from 'next/link';
+import { LinkedIn } from '@mui/icons-material';
+
+function PersonaliaSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    partner,
+    maxWidth
+  } = data;
+  useTheme();
+  return /*#__PURE__*/React__default.createElement(Container, {
+    maxWidth: maxWidth || "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, partner.map(partner => {
+    var _partner$links;
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 12,
+      md: 6,
+      key: partner.id
+    }, /*#__PURE__*/React__default.createElement(Paper, {
+      sx: {
+        p: 2,
+        height: "100%"
+      }
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      container: true
+    }, /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 9
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "h5",
+      sx: {
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      }
+    }, partner.name), /*#__PURE__*/React__default.createElement(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, partner.function), ((_partner$links = partner.links) === null || _partner$links === void 0 ? void 0 : _partner$links.length) > 0 && partner.links.map(link => {
+      return (
+        /*#__PURE__*/
+        // TODO use and create MuiLink Component
+        React__default.createElement(Link, {
+          href: link.url,
+          key: link.id
+        }, link.text)
+      );
+    }), partner.linkedIn && /*#__PURE__*/React__default.createElement(Typography, null, /*#__PURE__*/React__default.createElement(IconButton, null, /*#__PURE__*/React__default.createElement(LinkedIn, null))), partner.email && /*#__PURE__*/React__default.createElement(Typography, null, partner.email)), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true,
+      xs: 3
+    }, /*#__PURE__*/React__default.createElement(StrapiImage, {
+      src: partner.photo.url,
+      alt: partner.photo.alternativeText,
+      width: partner.photo.width,
+      height: partner.photo.height,
+      style: {
+        objectFit: "contain",
+        width: "100%",
+        height: "100%"
+      }
+    })))));
+  })));
+}
+
+export { PersonaliaSection };

package/dist/esm/components/TextImageSection.js

@@ -40,7 +40,7 @@ function TextImageSection(_ref) {
 
   const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
-    maxWidth: maxWidth || "lg",
+    maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
       my: 1
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.91",
+  "version": "0.1.93",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ColumnsSection.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {
   Stack,
+  Grid,
   Card,
   CardContent,
   Typography,
@@ -34,54 +35,51 @@ export function ColumnsSection({
 }) {
   const { column, maxWidth } = data;
 
+  // TODO make suitable for multiple column layouts
+
   return (
     <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
-      <Stack
-        spacing={2}
-        direction="row"
-        justifyContent="stretch"
-        flexWrap="wrap"
-        sx={{ width: "100%" }}
-        useFlexGap={true}
-      >
+      <Grid container spacing={2}>
         {column.map((column) => {
           const Icon = getIcon(column.icon) as React.ElementType | null;
           return (
-            <Paper sx={{ p: 2 }}>
-              <Typography
-                variant="h5"
-                sx={{
-                  mb: 2,
-                  display: "flex",
-                  justifyContent: "flex-start",
-                  alignItems: "center",
-                }}
-              >
-                {Icon !== null && (
-                  <Icon
-                    sx={{
-                      mr: 2,
-                      mt: 0.2,
-                      width: "50px",
-                      height: "50px",
-                      fill: "currentColor",
-                      stroke: "none",
-                    }}
-                  />
-                )}
-                {column.heading}
-              </Typography>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                component="div"
-              >
-                {column.text}
-              </Typography>
-            </Paper>
+            <Grid item xs={12} md={6} key={column.id}>
+              <Paper sx={{ p: 2, height: "100%" }}>
+                <Typography
+                  variant="h5"
+                  sx={{
+                    mb: 2,
+                    display: "flex",
+                    justifyContent: "flex-start",
+                    alignItems: "center",
+                  }}
+                >
+                  {Icon !== null && (
+                    <Icon
+                      sx={{
+                        mr: 2,
+                        mt: 0.2,
+                        width: "50px",
+                        height: "50px",
+                        fill: "currentColor",
+                        stroke: "none",
+                      }}
+                    />
+                  )}
+                  {column.heading}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  component="div"
+                >
+                  {column.text}
+                </Typography>
+              </Paper>
+            </Grid>
           );
         })}
-      </Stack>
+      </Grid>
     </Container>
   );
 }

package/src/components/HeroSection.tsx

@@ -24,8 +24,8 @@ interface HeroSectionProps {
     __component: string;
     heading: string;
     subHeading: string;
-    bgImage: ImageProps;
-    logoImage: ImageProps;
+    bgImage?: ImageProps;
+    logoImage?: ImageProps;
     link: LinkProps;
   };
 }
@@ -46,19 +46,21 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
           minHeight: "600px",
         }}
       >
-        <StrapiImage
-          alt="Background"
-          style={{
-            position: "absolute",
-            inset: 0,
-            objectFit: "cover",
-            width: "100%",
-            height: "100%",
-          }}
-          height={1080}
-          src={bgImage.url}
-          width={1920}
-        />
+        {bgImage && (
+          <StrapiImage
+            alt="Background"
+            style={{
+              position: "absolute",
+              inset: 0,
+              objectFit: "cover",
+              width: "100%",
+              height: "100%",
+            }}
+            height={1080}
+            src={bgImage.url}
+            width={1920}
+          />
+        )}
         <Stack
           spacing={2}
           alignItems="center"

package/src/components/Page.js

@@ -10,6 +10,7 @@ import { IconSection } from "./IconSection.tsx";
 import { ColumnsSection } from "./ColumnsSection.tsx";
 import { Box } from "@mui/material";
 import ContactForm from "./ContactForm.tsx";
+import { PersonaliaSection } from "./PersonaliaSection.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -27,6 +28,8 @@ function blockRenderer(block) {
       return <FleetSection key={block.id} data={block} />;
     case "layout.columns-section":
       return <ColumnsSection key={block.id} data={block} />;
+    case "layout.personalia-section":
+      return <PersonaliaSection key={block.id} data={block} />;
 
     default:
       return null;

package/src/components/PersonaliaSection.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import {
+  Paper,
+  Typography,
+  Container,
+  Grid,
+  useTheme,
+  IconButton,
+} from "@mui/material";
+import getIcon from "../lib/getIcon.ts";
+import { StrapiImage } from "./StrapiImage.tsx";
+import Link from "next/link";
+import { LinkedIn } from "@mui/icons-material";
+
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+}
+
+interface LinkProps {
+  id: number;
+  url: string;
+  text: string;
+}
+
+interface PartnerProps {
+  id: number;
+  name: string;
+  function: string;
+  text: string;
+  photo: ImageProps;
+  email: string;
+  phone: string;
+  links: LinkProps[];
+  linkedIn: string;
+}
+
+interface PersonaliaSectionProps {
+  id: number;
+  __component: string;
+  title: string;
+  description: string;
+  partner: PartnerProps[];
+  maxWidth: MaxWidth;
+}
+
+export function PersonaliaSection({
+  data,
+}: {
+  readonly data: PersonaliaSectionProps;
+}) {
+  const { partner, maxWidth } = data;
+
+  const theme = useTheme();
+
+  return (
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
+      <Grid container spacing={2}>
+        {partner.map((partner) => {
+          return (
+            <Grid item xs={12} md={6} key={partner.id}>
+              <Paper sx={{ p: 2, height: "100%" }}>
+                <Grid container>
+                  <Grid item xs={9}>
+                    <Typography
+                      variant="h5"
+                      sx={{
+                        mb: 2,
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        alignItems: "center",
+                      }}
+                    >
+                      {partner.name}
+                    </Typography>
+                    <Typography
+                      variant="body2"
+                      color="text.secondary"
+                      component="div"
+                    >
+                      {partner.function}
+                    </Typography>
+                    {partner.links?.length > 0 &&
+                      partner.links.map((link) => {
+                        return (
+                          // TODO use and create MuiLink Component
+                          <Link href={link.url} key={link.id}>
+                            {link.text}
+                          </Link>
+                        );
+                      })}
+                    {partner.linkedIn && (
+                      <Typography>
+                        <IconButton>
+                          <LinkedIn />
+                        </IconButton>
+                      </Typography>
+                    )}
+                    {partner.email && <Typography>{partner.email}</Typography>}
+                  </Grid>
+                  <Grid item xs={3}>
+                    <StrapiImage
+                      src={partner.photo.url}
+                      alt={partner.photo.alternativeText}
+                      width={partner.photo.width}
+                      height={partner.photo.height}
+                      style={{
+                        objectFit: "contain",
+                        width: "100%",
+                        height: "100%",
+                      }}
+                    />
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Container>
+  );
+}

package/src/components/TextImageSection.tsx

@@ -51,7 +51,7 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
   const theme = useTheme();
 
   return (
-    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1 }}>
       <Paper sx={{ p: 2 }}>
         {title && (
           <Typography variant="h1" textAlign="center" sx={{ pb: 2 }}>

package/src/stories/Page.stories.js

@@ -235,6 +235,85 @@ AMH.args = {
         },
       ],
     },
+    {
+      id: 1,
+      __component: "layout.personalia-section",
+      title: "Personalia",
+      description: "Description or text for personalia component",
+      partner: [
+        {
+          id: 1,
+          name: "Brenda Groen",
+          function: "Medical Director",
+          /* 
+                TODO Figure out a parsing function for this
+                "text": [
+                  {
+                    "type": "paragraph",
+                    "children": [
+                      {
+                        "type": "text",
+                        "text": "Founding partner of the company. Medically trained as an Emergency Medicine doctor in the Netherlands. Has worked in the field of medical repatriation since 2015. "
+                      }
+                    ]
+                  },
+                  {
+                    "type": "paragraph",
+                    "children": [
+                      {
+                        "type": "text",
+                        "text": "Aviation medicine has its own complexity and challenges where all my knowledge as an Emergency Physician and also my personal experience in escorting patients safely back home, just blends perfectly together. Thus ensuring the highest level of medical care is provided by overseeing every transport our team will deliver."
+                      }
+                    ]
+                  }
+                ], */
+          email: "b.groen@aeromedicalholland.com",
+          phone: null,
+          linkedIn: "https://nl.linkedin.com/in/brenda-groen",
+          photo: {
+            id: 3,
+            alternativeText: null,
+            width: 820,
+            height: 860,
+            url: "/uploads/woman_in_circle_icon_8fc0f463c8.png",
+          },
+          links: [
+            {
+              id: 3,
+              url: "https://zoeken.bigregister.nl/zorgverlener/e77b403b-9800-48c0-a722-79d111ec0dc1",
+              text: "Registered at Dutch Ministry of Health, Welfare and Sport. ",
+              isExternal: true,
+            },
+          ],
+        },
+        {
+          id: 2,
+          name: "Harald Speek",
+          function: "Managing Director",
+          /* "text": [
+                  {
+                    "type": "paragraph",
+                    "children": [
+                      {
+                        "type": "text",
+                        "text": "Founding partner of the company. Medically trained as an Emergency Medicine nurse in the Netherlands. Has worked in the field of medical repatriation since ??."
+                      }
+                    ]
+                  }
+                ], */
+          email: "h.speek@aeromedicalholland.com",
+          phone: null,
+          linkedIn: null,
+          photo: {
+            id: 4,
+            alternativeText: null,
+            width: 1024,
+            height: 1024,
+            url: "/uploads/man_in_circle_icon_6c77b6d3e4.png",
+          },
+        },
+      ],
+    },
     {
       id: 1,
       __component: "layout.fleet-section",