umwd-components 0.1.27 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.27",
+  "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/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"),
     },
-  ]
+  ],
 };