umwd-components 0.1.26 → 0.1.28

package/.storybook/main.js

@@ -7,12 +7,19 @@ const config = {
     "@storybook/addon-interactions",
   ],
   framework: {
-    name: '@storybook/nextjs',
+    name: "@storybook/nextjs",
     options: {},
   },
   docs: {
     autodocs: "tag",
   },
-  staticDirs: ["..\\public"]
+  staticDirs: ["..\\public"],
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "next/navigation": "next-router-mock",
+    };
+    return config;
+  },
 };
 export default config;

package/dist/cjs/components/NavBar.js

@@ -14,7 +14,22 @@ var Link = require('next/link');
 var material = require('@mui/material');
 var CloseIcon = require('@mui/icons-material/Close');
 var MoreVertIcon = require('@mui/icons-material/MoreVert');
+var navigation = require('next/navigation');
+var PropTypes = require('prop-types');
 
+NavBar.propTypes = {
+  site_title: PropTypes.string,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    alt: PropTypes.string
+  }).isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  })).isRequired
+};
 function NavBar({
   site_title,
   logo,
@@ -29,6 +44,7 @@ function NavBar({
   const handleCloseMobileMenu = e => {
     setMobileNavOpen(false);
   };
+  const router = navigation.useRouter();
   return /*#__PURE__*/React.createElement(material.AppBar, {
     position: "sticky"
   }, /*#__PURE__*/React.createElement(material.Container, {
@@ -86,8 +102,10 @@ function NavBar({
     }
   }, pages.map(page => {
     return /*#__PURE__*/React.createElement(material.Button, {
-      key: page.name
-      /* onClick={() => page.action()} */,
+      key: page.name,
+      onClick: () => {
+        router.push(page.url);
+      },
       sx: {
         my: 2,
         color: "primary.contrastText",
@@ -229,7 +247,8 @@ function NavBar({
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
       key: page.name,
       onClick: () => {
-        /* page.action();  */handleCloseMobileMenu();
+        router.push(page.url);
+        handleCloseMobileMenu();
       }
     }, /*#__PURE__*/React.createElement(material.ListItemText, {
       primary: page.name

package/dist/cjs/components/TextImageBlock.js

@@ -24,6 +24,9 @@ function TextImageBlock({
 }) {
   reverse = Boolean(reverse);
   maxWidth = maxWidth || "100%";
+
+  /* TODO Text_content should deal with linebreaks */
+
   return /*#__PURE__*/React.createElement(material.Grid, {
     container: true,
     sx: [{

package/dist/esm/components/NavBar.js

@@ -10,7 +10,22 @@ import Link from 'next/link';
 import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useRouter } from 'next/navigation';
+import PropTypes from 'prop-types';
 
+NavBar.propTypes = {
+  site_title: PropTypes.string,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    alt: PropTypes.string
+  }).isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  })).isRequired
+};
 function NavBar({
   site_title,
   logo,
@@ -25,6 +40,7 @@ function NavBar({
   const handleCloseMobileMenu = e => {
     setMobileNavOpen(false);
   };
+  const router = useRouter();
   return /*#__PURE__*/React.createElement(AppBar, {
     position: "sticky"
   }, /*#__PURE__*/React.createElement(Container, {
@@ -82,8 +98,10 @@ function NavBar({
     }
   }, pages.map(page => {
     return /*#__PURE__*/React.createElement(Button, {
-      key: page.name
-      /* onClick={() => page.action()} */,
+      key: page.name,
+      onClick: () => {
+        router.push(page.url);
+      },
       sx: {
         my: 2,
         color: "primary.contrastText",
@@ -225,7 +243,8 @@ function NavBar({
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
       key: page.name,
       onClick: () => {
-        /* page.action();  */handleCloseMobileMenu();
+        router.push(page.url);
+        handleCloseMobileMenu();
       }
     }, /*#__PURE__*/React.createElement(ListItemText, {
       primary: page.name

package/dist/esm/components/TextImageBlock.js

@@ -20,6 +20,9 @@ function TextImageBlock({
 }) {
   reverse = Boolean(reverse);
   maxWidth = maxWidth || "100%";
+
+  /* TODO Text_content should deal with linebreaks */
+
   return /*#__PURE__*/React.createElement(Grid, {
     container: true,
     sx: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -75,6 +75,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "next-router-mock": "^0.9.12",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1"

package/src/app/page.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <main></main>;
+}

package/src/components/Footer.js

@@ -0,0 +1,202 @@
+import {
+  AppBar,
+  Container,
+  Toolbar,
+  Typography,
+  Box,
+  IconButton,
+  Grid,
+  Divider,
+  Stack,
+} from "@mui/material";
+import Link from "next/link";
+import Image from "next/image";
+
+import PropTypes from "prop-types";
+
+Footer.propTypes = {
+  site_title: PropTypes.string.isRequired,
+  site_logo: PropTypes.string,
+  company_name: PropTypes.string.isRequired,
+  parent_company_name: PropTypes.string,
+  company_address: PropTypes.shape({
+    street: PropTypes.string,
+    street_number: PropTypes.string,
+    street_number_addition: PropTypes.string,
+    postal_code: PropTypes.string,
+    city: PropTypes.string,
+  }),
+  CoC_number: PropTypes.string.isRequired,
+  VAT_number: PropTypes.string.isRequired,
+  company_socials: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+      icon: PropTypes.elementType,
+    })
+  ),
+  disclaimer_link: PropTypes.string,
+  privacypolicy_link: PropTypes.string,
+};
+
+function Footer({
+  site_title,
+  site_logo,
+  company_name,
+  parent_company_name,
+  company_address,
+  CoC_number,
+  VAT_number,
+  company_socials,
+  disclaimer_link,
+  privacypolicy_link,
+}) {
+  return (
+    <AppBar position="relative">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Grid container sx={{ p: 2 }} spacing={2}>
+            <Grid item xs={12} sm={4} align="center">
+              <Link href="/">
+                <Box
+                  sx={{
+                    display: { xs: "none", md: "flex" },
+                    cursor: "pointer",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Typography variant="h6">{site_title}</Typography>
+                  {site_logo && (
+                    <Box>
+                      <Image
+                        src={site_logo}
+                        width={64}
+                        height={64}
+                        alt="site logo"
+                      />
+                    </Box>
+                  )}
+                </Box>
+              </Link>
+            </Grid>
+            <Grid item xs={12} sm={4} align="center">
+              <Typography variant="h6">Contact Information</Typography>
+              <Typography variant="h6">{company_name}</Typography>
+              {parent_company_name && (
+                <Typography variant="h6">By {parent_company_name}</Typography>
+              )}
+              {company_address && (
+                <>
+                  <Typography variant="body1">
+                    {company_address.street} {company_address.street_number}{" "}
+                    {company_address.street_number_addition &&
+                      company_address.street_number_addition}
+                  </Typography>
+
+                  <Typography variant="body1">
+                    {company_address.postal_code} {company_address.city}
+                  </Typography>
+                </>
+              )}
+
+              <Typography variant="body1">CoC: {CoC_number}</Typography>
+              <Typography variant="body1">VAT: {VAT_number}</Typography>
+
+              <Typography variant="body1"></Typography>
+              <Typography variant="body1"></Typography>
+            </Grid>
+            <Grid item xs={12} sm={4} align="center">
+              <Typography variant="h6">Socials</Typography>
+              {company_socials && (
+                <Stack
+                  spacing={2}
+                  sx={{ width: "min-content", color: "primary.contrastText" }}
+                >
+                  {company_socials.map((company_social, index) => {
+                    if (
+                      company_social.url === undefined ||
+                      company_social.icon === undefined
+                    ) {
+                      return (
+                        <IconButton color="inherit" href={company_social.url}>
+                          {company_social.icon}
+                        </IconButton>
+                      );
+                    }
+                  })}
+                </Stack>
+              )}
+            </Grid>
+            <Grid item xs={12}>
+              <Divider />
+            </Grid>
+            {/* important links */}
+            {disclaimer_link && (
+              <Grid
+                item
+                xs={12}
+                sm={4}
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Link href={disclaimer_link}>
+                  <Typography variant="body1">Disclaimer</Typography>
+                </Link>
+              </Grid>
+            )}
+            {privacypolicy_link && (
+              <Grid
+                item
+                xs={12}
+                sm={4}
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Link href={privacypolicy_link}>
+                  <Typography variant="body1">Privacy Policy</Typography>
+                </Link>
+              </Grid>
+            )}
+            {/* TODO */}
+            {/* <Grid
+              item
+              xs={12}
+              sm={4}
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <CookieConsentButton />
+            </Grid> */}
+            <Grid item xs={12}>
+              <Divider />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Typography>Made possible by Atelier Paulus</Typography>
+            </Grid>
+          </Grid>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+
+export default Footer;

package/src/components/NavBar.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import React from "react";
 import Link from "next/link";
@@ -14,14 +14,33 @@ import {
   List,
   ListItem,
   Divider,
-  ListItemText
+  ListItemText,
 } from "@mui/material";
 
 import CloseIcon from "@mui/icons-material/Close";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { useRouter } from "next/navigation";
 
-function NavBar({site_title, logo, pages}){
-   // handleMobileMenu
+import PropTypes from "prop-types";
+
+NavBar.propTypes = {
+  site_title: PropTypes.string,
+  logo: PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    alt: PropTypes.string,
+  }).isRequired,
+  pages: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+function NavBar({ site_title, logo, pages }) {
+  // handleMobileMenu
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
 
@@ -33,37 +52,43 @@ function NavBar({site_title, logo, pages}){
     setMobileNavOpen(false);
   };
 
+  const router = useRouter();
+
   return (
     <AppBar position="sticky">
       <Container maxWidth="xl">
-        <Toolbar disableGutters sx={{py:1}}>
+        <Toolbar disableGutters sx={{ py: 1 }}>
           {/* logo and site title for big screens */}
-          <Link href="/" style={{textDecoration: "none", color: "unset"}}>
+          <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
             <Box
-              sx={{ display: { xs: "none", md: "flex" }, cursor: "pointer", alignItems: "center"}}
-            ><Box sx={{ display: "flex", mr: 1 }}>
-                      <img
-                        src={logo.url}
-                        width={logo.width || "32px"}
-                        height={logo.height || "32px"}
-                        alt="site logo"
-                        style={{maxWidth: "60px", maxHeight: "60px"}}
-                      />
-                    </Box>
-                  {site_title !== undefined && (
-                    <Typography
-                      
-                      variant="h6"
-                      noWrap
-                      component="h1"
-                      sx={{
-                        display: "flex",
-                        textDecoration: "none",
-                      }}
-                    >
-                      {site_title}
-                    </Typography>
-                  )}
+              sx={{
+                display: { xs: "none", md: "flex" },
+                cursor: "pointer",
+                alignItems: "center",
+              }}
+            >
+              <Box sx={{ display: "flex", mr: 1 }}>
+                <img
+                  src={logo.url}
+                  width={logo.width || "32px"}
+                  height={logo.height || "32px"}
+                  alt="site logo"
+                  style={{ maxWidth: "60px", maxHeight: "60px" }}
+                />
+              </Box>
+              {site_title !== undefined && (
+                <Typography
+                  variant="h6"
+                  noWrap
+                  component="h1"
+                  sx={{
+                    display: "flex",
+                    textDecoration: "none",
+                  }}
+                >
+                  {site_title}
+                </Typography>
+              )}
             </Box>
           </Link>
 
@@ -75,49 +100,58 @@ function NavBar({site_title, logo, pages}){
               alignItems: "center",
             }}
           >
-            
-
             {pages.map((page) => {
               return (
-              <Button
-                key={page.name}
-                /* onClick={() => page.action()} */
-                sx={{ my: 2, color: "primary.contrastText", display: "block" }}
-              >
-                {page.name}
-              </Button>
-            )})}
-
+                <Button
+                  key={page.name}
+                  onClick={() => {
+                    router.push(page.url);
+                  }}
+                  sx={{
+                    my: 2,
+                    color: "primary.contrastText",
+                    display: "block",
+                  }}
+                >
+                  {page.name}
+                </Button>
+              );
+            })}
           </Box>
 
           {/* small screen logo and site title */}
-          <Link href="/" style={{textDecoration: "none", color: "unset"}}>
-            <Box sx={{ display: { xs: "flex", md: "none" }, alignItems:"center"}}>
-              
-                {logo.url !== undefined && <Box sx={{ display: "flex", mr: 1 }}>
+          <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
+            <Box
+              sx={{ display: { xs: "flex", md: "none" }, alignItems: "center" }}
+            >
+              {logo.url !== undefined && (
+                <Box sx={{ display: "flex", mr: 1 }}>
                   <img
                     src={logo.url}
                     width={logo.width || "32px"}
                     height={logo.height || "32px"}
                     alt={logo.alt || "site logo"}
-                    style={{maxWidth: "60px", maxHeight: "60px"}}
+                    style={{ maxWidth: "60px", maxHeight: "60px" }}
                   />
-                </Box>}
-              {site_title !== undefined && <Typography
-                variant="h5"
-                noWrap
-                component="h1"
-                sx={{
-                  display: "flex",
-                  flexGrow: 1,
-                }}
-              >
-                {site_title}
-              </Typography>}
+                </Box>
+              )}
+              {site_title !== undefined && (
+                <Typography
+                  variant="h5"
+                  noWrap
+                  component="h1"
+                  sx={{
+                    display: "flex",
+                    flexGrow: 1,
+                  }}
+                >
+                  {site_title}
+                </Typography>
+              )}
             </Box>
           </Link>
           {/* spacer box */}
-          <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box> 
+          <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box>
 
           {/* small screen nav menu */}
 
@@ -145,33 +179,43 @@ function NavBar({site_title, logo, pages}){
             >
               <AppBar position="sticky">
                 <Container maxWidth="xl">
-                  <Toolbar disableGutters sx={{py:1, justifyContent:"space-between"}}>
-                  <Link href="/" style={{textDecoration: "none", color: "unset"}}>
-                    <Box sx={{display: "flex", flexDirection: "row", alignItems: "center"}}>
-                    <Box sx={{ display: "flex", mr: 1 }}>
-                      <img
-                        src={logo.url}
-                        alt={logo.alt || "logo"}
-                        width={logo.width || "32px"}
-                        height={logo.height || "32px"}
-                        style={{maxWidth: "60px", maxHeight: "60px"}}
-                      />
-                    </Box>
-                    <Typography
-                      variant="h5"
-                      noWrap
-                      component="h1"
-                      sx={{
-                        display: "flex",
-                        flexGrow: 1,
-                      }}
+                  <Toolbar
+                    disableGutters
+                    sx={{ py: 1, justifyContent: "space-between" }}
+                  >
+                    <Link
+                      href="/"
+                      style={{ textDecoration: "none", color: "unset" }}
                     >
-                      
-                        {site_title !== undefined && site_title}
-                      
-                    </Typography>
-                    </Box>
-                  </Link>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          flexDirection: "row",
+                          alignItems: "center",
+                        }}
+                      >
+                        <Box sx={{ display: "flex", mr: 1 }}>
+                          <img
+                            src={logo.url}
+                            alt={logo.alt || "logo"}
+                            width={logo.width || "32px"}
+                            height={logo.height || "32px"}
+                            style={{ maxWidth: "60px", maxHeight: "60px" }}
+                          />
+                        </Box>
+                        <Typography
+                          variant="h5"
+                          noWrap
+                          component="h1"
+                          sx={{
+                            display: "flex",
+                            flexGrow: 1,
+                          }}
+                        >
+                          {site_title !== undefined && site_title}
+                        </Typography>
+                      </Box>
+                    </Link>
                     <Button
                       onClick={handleCloseMobileMenu}
                       sx={{
@@ -192,22 +236,22 @@ function NavBar({site_title, logo, pages}){
                 </Container>
               </AppBar>
               <List>
-                {pages.map((page) => 
-                {
-                return (
-                  <>
-                    <ListItem
-                      key={page.name}
-                      onClick={() => {/* page.action();  */handleCloseMobileMenu();}}
-                    >
-                      <ListItemText primary={page.name} />
-                    </ListItem>
-                    <Divider />
-                  </>
-                )})}
-                
-
-                    
+                {pages.map((page) => {
+                  return (
+                    <>
+                      <ListItem
+                        key={page.name}
+                        onClick={() => {
+                          router.push(page.url);
+                          handleCloseMobileMenu();
+                        }}
+                      >
+                        <ListItemText primary={page.name} />
+                      </ListItem>
+                      <Divider />
+                    </>
+                  );
+                })}
               </List>
             </Dialog>
           </Box>

package/src/components/TextImageBlock.js

@@ -17,6 +17,8 @@ function TextImageBlock({
 
   maxWidth = maxWidth || "100%";
 
+  /* TODO Text_content should deal with linebreaks */
+
   return (
     <Grid
       container

package/src/stories/Footer.stories.js

@@ -0,0 +1,72 @@
+import Footer from "../components/Footer";
+import React from "react";
+import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
+import InstagramIcon from "@mui/icons-material/Instagram";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import PublicIcon from "@mui/icons-material/Public";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import FacebookIcon from "@mui/icons-material/Facebook";
+
+export default {
+  title: "UMWD/Footer",
+  component: Footer,
+};
+
+const Template = ({ ...args }) => {
+  console.log(thumbnail);
+  return <Footer {...args} />;
+};
+
+export const Orefs = Template.bind({});
+
+Orefs.args = {
+  site_title: "Orefs",
+  site_logo: thumbnail.src,
+  company_name: "Orefs",
+  parent_company_name: "Orefs",
+  company_address: {
+    street: "Molenkade",
+    street_number: "8",
+    street_number_addition: "A",
+    postal_code: "1115AB",
+    city: "Duivendrecht",
+  },
+  CoC_number: "12345678",
+  VAT_number: "NL123456789B01",
+  company_socials: [
+    {
+      name: "Facebook",
+      url: "https://www.facebook.com/",
+      icon: <FacebookIcon />,
+    },
+  ],
+  //disclaimer_link: PropTypes.string,
+  //privacypolicy_link: PropTypes.string,
+};
+
+/* 
+Footer.propTypes = {
+  site_title: PropTypes.string.isRequired,
+  site_logo: PropTypes.string,
+  company_name: PropTypes.string.isRequired,
+  parent_company_name: PropTypes.string,
+  company_address: PropTypes.shape({
+    street: PropTypes.string,
+    street_number: PropTypes.string,
+    street_number_addition: PropTypes.string,
+    postal_code: PropTypes.string,
+    city: PropTypes.string,
+  }),
+  CoC_number: PropTypes.string.isRequired,
+  VAT_number: PropTypes.string.isRequired,
+  company_socials: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+      icon: PropTypes.elementType,
+    })
+  ),
+  disclaimer_link: PropTypes.string,
+  privacypolicy_link: PropTypes.string,
+};
+ */

package/src/stories/Navbar.stories.js

@@ -1,6 +1,6 @@
 import NavBar from "../components/NavBar";
 import React from "react";
-import thumbnail from "../../public/placeholders/thumbnail_100X100.png"
+import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
 
 export default {
   title: "UMWD/NavBar",
@@ -9,10 +9,9 @@ export default {
 };
 
 const Template = ({ ...args }) => {
-    console.log(thumbnail)
-    return (
-  <NavBar {...args} />
-)};
+  console.log(thumbnail);
+  return <NavBar {...args} />;
+};
 
 export const Orefs = Template.bind({});
 
@@ -35,5 +34,5 @@ Orefs.args = {
       link: "/contact",
       action: () => console.log("Contact"),
     },
-  ]
+  ],
 };