umwd-components 0.1.41 → 0.1.43

package/dist/cjs/components/WebsitePlaceholder.js

@@ -17,36 +17,31 @@ var Image = require('next/image');
 function WebsitePlaceholder({
   title,
   announcement,
-  logo
+  logo,
+  children
 }) {
   const theme = material.useTheme();
+
+  // const [keysPressed, setKeysPressed] = React.useState({});
+  // let visible = true;
+
   const [visible, setVisible] = React.useState(true);
-  const [keysPressed, setKeysPressed] = React.useState({});
+  let keysPressed = {};
   const keyDownHandler = event => {
-    // console.log("User pressed: ", event);
-    event.preventDefault();
-    const newPressedKeys = {
+    console.log("key down", event.key, keysPressed);
+    keysPressed = {
       ...keysPressed,
       [event.key]: true
     };
-    setKeysPressed(newPressedKeys);
-    console.log("newPressedKeys: ", newPressedKeys);
-    if (newPressedKeys["w"] && newPressedKeys["a"] && newPressedKeys["s"] && newPressedKeys["d"]) {
-      event.preventDefault();
-
-      // CONSOLE.log("User pressed WASD");
-
+    if (keysPressed["w"] === true && keysPressed["a"] === true && keysPressed["s"] === true && keysPressed["d"] === true) {
+      console.log("You found the easter egg!", visible);
+      // visible = Boolean(!visible);
       setVisible(!visible);
     }
   };
   const keyUpHandler = event => {
-    // console.log("User released: ", event);
-    event.preventDefault();
-    const newPressedKeys = {
-      ...keysPressed
-    };
-    delete newPressedKeys[event.key];
-    setKeysPressed(newPressedKeys);
+    console.log("key up", event.key);
+    keysPressed[event.key] = false;
   };
   React.useEffect(() => {
     document.addEventListener("keydown", keyDownHandler);
@@ -56,6 +51,9 @@ function WebsitePlaceholder({
       document.removeEventListener("keyup", keyUpHandler);
     };
   }, []);
+  React.useEffect(() => {
+    console.log("visible", visible);
+  }, [visible]);
   return /*#__PURE__*/React.createElement(material.Box, {
     sx: [visible && {
       display: "grid",
@@ -83,7 +81,7 @@ function WebsitePlaceholder({
   }), /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h3",
     align: "center"
-  }, announcement)));
+  }, announcement)), !visible && /*#__PURE__*/React.createElement(React.Fragment, null, children));
 }
 WebsitePlaceholder.propTypes = {
   title: PropTypes.string.isRequired,

package/dist/esm/components/WebsitePlaceholder.js

@@ -13,36 +13,31 @@ import Image from 'next/image';
 function WebsitePlaceholder({
   title,
   announcement,
-  logo
+  logo,
+  children
 }) {
   const theme = useTheme();
+
+  // const [keysPressed, setKeysPressed] = React.useState({});
+  // let visible = true;
+
   const [visible, setVisible] = React.useState(true);
-  const [keysPressed, setKeysPressed] = React.useState({});
+  let keysPressed = {};
   const keyDownHandler = event => {
-    // console.log("User pressed: ", event);
-    event.preventDefault();
-    const newPressedKeys = {
+    console.log("key down", event.key, keysPressed);
+    keysPressed = {
       ...keysPressed,
       [event.key]: true
     };
-    setKeysPressed(newPressedKeys);
-    console.log("newPressedKeys: ", newPressedKeys);
-    if (newPressedKeys["w"] && newPressedKeys["a"] && newPressedKeys["s"] && newPressedKeys["d"]) {
-      event.preventDefault();
-
-      // CONSOLE.log("User pressed WASD");
-
+    if (keysPressed["w"] === true && keysPressed["a"] === true && keysPressed["s"] === true && keysPressed["d"] === true) {
+      console.log("You found the easter egg!", visible);
+      // visible = Boolean(!visible);
       setVisible(!visible);
     }
   };
   const keyUpHandler = event => {
-    // console.log("User released: ", event);
-    event.preventDefault();
-    const newPressedKeys = {
-      ...keysPressed
-    };
-    delete newPressedKeys[event.key];
-    setKeysPressed(newPressedKeys);
+    console.log("key up", event.key);
+    keysPressed[event.key] = false;
   };
   React.useEffect(() => {
     document.addEventListener("keydown", keyDownHandler);
@@ -52,6 +47,9 @@ function WebsitePlaceholder({
       document.removeEventListener("keyup", keyUpHandler);
     };
   }, []);
+  React.useEffect(() => {
+    console.log("visible", visible);
+  }, [visible]);
   return /*#__PURE__*/React.createElement(Box, {
     sx: [visible && {
       display: "grid",
@@ -79,7 +77,7 @@ function WebsitePlaceholder({
   }), /*#__PURE__*/React.createElement(Typography, {
     variant: "h3",
     align: "center"
-  }, announcement)));
+  }, announcement)), !visible && /*#__PURE__*/React.createElement(React.Fragment, null, children));
 }
 WebsitePlaceholder.propTypes = {
   title: PropTypes.string.isRequired,

package/package.json

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

package/src/components/NavBar.js

@@ -2,6 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 
 import {
   Dialog,
@@ -83,7 +84,7 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
                 alignItems: "center",
               }}
             >
-              <Box sx={{ display: "flex", mr: 1 }}>
+              {/* <Box sx={{ display: "flex", mr: 1 }}>
                 <img
                   src={logo.url}
                   width={logo.width || "32px"}
@@ -91,7 +92,18 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
                   alt="site logo"
                   style={{ maxWidth: "60px", maxHeight: "60px" }}
                 />
-              </Box>
+              </Box> */}
+              <Image
+                src={logo.url}
+                width={
+                  logo.height >= 50
+                    ? (logo.width / logo.height) * 50
+                    : logo.width
+                }
+                height={logo.height}
+                alt={logo.alt || "site logo"}
+                style={{ maxHeight: "50px" }}
+              />
               {site_title !== undefined && (
                 <Typography
                   variant="h6"
@@ -108,6 +120,8 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
             </Box>
           </Link>
 
+          <Box sx={{ display: "block", width: "30px" }}></Box>
+
           {/* Large screen menu */}
           {pages.length > 0 && (
             <Box
@@ -137,6 +151,39 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
             </Box>
           )}
 
+          {/* Tabs */}
+          {tabs.length > 0 && (
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: { xs: "none", md: "flex" },
+              }}
+            >
+              <Tabs
+                value={currentTab}
+                onChange={(event, newValue) => handleChange(event, newValue)}
+                aria-label="wrapped label tabs example"
+                textColor="secondary"
+                indicatorColor="secondary"
+                variant="fullWidth"
+              >
+                {tabs.length > 0 &&
+                  tabs.map((tab) => {
+                    return (
+                      <Tab
+                        key={tab.name}
+                        value={tab.name}
+                        label={tab.name}
+                        onClick={() => {
+                          router.push(tab.url);
+                        }}
+                      />
+                    );
+                  })}
+              </Tabs>
+            </Box>
+          )}
+
           {/* small screen logo and site title */}
           <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
             <Box
@@ -276,32 +323,6 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
             </Dialog>
           </Box>
         </Toolbar>
-
-        {/* Tabs */}
-        {tabs.length > 0 && (
-          <Tabs
-            value={currentTab}
-            onChange={(event, newValue) => handleChange(event, newValue)}
-            aria-label="wrapped label tabs example"
-            textColor="secondary"
-            indicatorColor="secondary"
-            variant="fullWidth"
-          >
-            {tabs.length > 0 &&
-              tabs.map((tab) => {
-                return (
-                  <Tab
-                    key={tab.name}
-                    value={tab.name}
-                    label={tab.name}
-                    onClick={() => {
-                      router.push(tab.url);
-                    }}
-                  />
-                );
-              })}
-          </Tabs>
-        )}
       </Container>
     </AppBar>
   );

package/src/components/WebsitePlaceholder.js

@@ -5,46 +5,35 @@ import PropTypes from "prop-types";
 import { Typography, Box, useTheme } from "@mui/material";
 import Image from "next/image";
 
-function WebsitePlaceholder({ title, announcement, logo }) {
+function WebsitePlaceholder({ title, announcement, logo, children }) {
   const theme = useTheme();
 
+  // const [keysPressed, setKeysPressed] = React.useState({});
+  // let visible = true;
+
   const [visible, setVisible] = React.useState(true);
 
-  const [keysPressed, setKeysPressed] = React.useState({});
+  let keysPressed = {};
 
   const keyDownHandler = (event) => {
-    // console.log("User pressed: ", event);
-    event.preventDefault();
-
-    const newPressedKeys = { ...keysPressed, [event.key]: true };
-
-    setKeysPressed(newPressedKeys);
-
-    console.log("newPressedKeys: ", newPressedKeys);
+    console.log("key down", event.key, keysPressed);
+    keysPressed = { ...keysPressed, [event.key]: true };
 
     if (
-      newPressedKeys["w"] &&
-      newPressedKeys["a"] &&
-      newPressedKeys["s"] &&
-      newPressedKeys["d"]
+      keysPressed["w"] === true &&
+      keysPressed["a"] === true &&
+      keysPressed["s"] === true &&
+      keysPressed["d"] === true
     ) {
-      event.preventDefault();
-
-      // CONSOLE.log("User pressed WASD");
-
+      console.log("You found the easter egg!", visible);
+      // visible = Boolean(!visible);
       setVisible(!visible);
     }
   };
 
   const keyUpHandler = (event) => {
-    // console.log("User released: ", event);
-    event.preventDefault();
-
-    const newPressedKeys = { ...keysPressed };
-
-    delete newPressedKeys[event.key];
-
-    setKeysPressed(newPressedKeys);
+    console.log("key up", event.key);
+    keysPressed[event.key] = false;
   };
 
   React.useEffect(() => {
@@ -57,6 +46,10 @@ function WebsitePlaceholder({ title, announcement, logo }) {
     };
   }, []);
 
+  React.useEffect(() => {
+    console.log("visible", visible);
+  }, [visible]);
+
   return (
     <Box
       sx={[
@@ -95,6 +88,7 @@ function WebsitePlaceholder({ title, announcement, logo }) {
           </Typography>
         </>
       )}
+      {!visible && <>{children}</>}
     </Box>
   );
 }

package/src/stories/Navbar.stories.js

@@ -1,6 +1,7 @@
 import NavBar from "../components/NavBar";
 import React from "react";
 import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
+import logoText from "../../public/logo_text.png";
 
 export default {
   title: "UMWD/NavBar",
@@ -65,3 +66,31 @@ UMWD.args = {
     },
   ],
 };
+
+export const AMH = Template.bind({});
+
+AMH.args = {
+  logo: {
+    url: logoText.src,
+    width: logoText.width,
+    height: logoText.height,
+    alt: "Logo",
+  },
+  tabs: [
+    {
+      name: "Resources",
+      link: "/resources",
+      action: () => console.log("Services"),
+    },
+    {
+      name: "Shop",
+      link: "/shop",
+      action: () => console.log("About"),
+    },
+    {
+      name: "Contact",
+      link: "/contact",
+      action: () => console.log("Contact"),
+    },
+  ],
+};

package/src/stories/WebsitePlaceholder.stories.js

@@ -8,31 +8,129 @@ export default {
 };
 
 const Template = ({ title, announcement, logo, ...args }) => {
-  const [visible, setVisible] = React.useState(true);
-
-  const handleKeydown = (e) => {
-    console.log("handleKeydown", e);
-    setVisible(!visible);
-    if (e.key === "W") {
-      setVisible(false);
-    }
-  };
-
   return (
     <>
-      <WebsitePlaceholder
-        title={title}
-        announcement={announcement}
-        logo={logo}
-        onKeyDown={handleKeydown}
-        visible={visible}
-      >
-        <Box sx={{ height: "300px" }}></Box>
-        <Box sx={{ height: "300px" }}></Box>
-        <Box sx={{ height: "300px" }}></Box>
-        <Box sx={{ height: "300px" }}></Box>
-        <Box sx={{ height: "300px" }}></Box>
-        <Box sx={{ height: "300px" }}></Box>
+      <WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
+        <Box sx={{ height: "300px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
+          posuere morbi leo urna. Convallis aenean et tortor at risus viverra
+          adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
+          phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
+          tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
+          eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
+          nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
+          Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
+          eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
+          tellus pellentesque. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada. Phasellus faucibus scelerisque eleifend donec
+          pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
+          neque aliquam vestibulum. Varius duis at consectetur lorem donec.
+          Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
+          amet consectetur adipiscing elit. Convallis tellus id interdum velit
+          laoreet.
+        </Box>
+        <Box sx={{ height: "300px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
+          posuere morbi leo urna. Convallis aenean et tortor at risus viverra
+          adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
+          phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
+          tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
+          eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
+          nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
+          Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
+          eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
+          tellus pellentesque. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada. Phasellus faucibus scelerisque eleifend donec
+          pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
+          neque aliquam vestibulum. Varius duis at consectetur lorem donec.
+          Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
+          amet consectetur adipiscing elit. Convallis tellus id interdum velit
+          laoreet.
+        </Box>
+        <Box sx={{ height: "300px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
+          posuere morbi leo urna. Convallis aenean et tortor at risus viverra
+          adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
+          phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
+          tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
+          eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
+          nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
+          Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
+          eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
+          tellus pellentesque. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada. Phasellus faucibus scelerisque eleifend donec
+          pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
+          neque aliquam vestibulum. Varius duis at consectetur lorem donec.
+          Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
+          amet consectetur adipiscing elit. Convallis tellus id interdum velit
+          laoreet.
+        </Box>
+        <Box sx={{ height: "300px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
+          posuere morbi leo urna. Convallis aenean et tortor at risus viverra
+          adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
+          phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
+          tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
+          eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
+          nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
+          Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
+          eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
+          tellus pellentesque. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada. Phasellus faucibus scelerisque eleifend donec
+          pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
+          neque aliquam vestibulum. Varius duis at consectetur lorem donec.
+          Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
+          amet consectetur adipiscing elit. Convallis tellus id interdum velit
+          laoreet.
+        </Box>
+        <Box sx={{ height: "300px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
+          posuere morbi leo urna. Convallis aenean et tortor at risus viverra
+          adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
+          phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
+          tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
+          eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
+          nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
+          Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
+          eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
+          tellus pellentesque. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada. Phasellus faucibus scelerisque eleifend donec
+          pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
+          neque aliquam vestibulum. Varius duis at consectetur lorem donec.
+          Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
+          amet consectetur adipiscing elit. Convallis tellus id interdum velit
+          laoreet.
+        </Box>
+        <Box sx={{ height: "300px" }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
+          posuere morbi leo urna. Convallis aenean et tortor at risus viverra
+          adipiscing at in. Neque gravida in fermentum et sollicitudin ac orci
+          phasellus. Lobortis scelerisque fermentum dui faucibus. Ultricies
+          tristique nulla aliquet enim tortor at auctor urna nunc. Ornare massa
+          eget egestas purus viverra accumsan in nisl nisi. Sit amet commodo
+          nulla facilisi nullam vehicula ipsum. Risus viverra adipiscing at in.
+          Vulputate eu scelerisque felis imperdiet proin fermentum leo. Elit
+          eget gravida cum sociis natoque. Orci phasellus egestas tellus rutrum
+          tellus pellentesque. Pellentesque habitant morbi tristique senectus et
+          netus et malesuada. Phasellus faucibus scelerisque eleifend donec
+          pretium vulputate sapien nec. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam quis. Diam quam nulla porttitor massa id
+          neque aliquam vestibulum. Varius duis at consectetur lorem donec.
+          Blandit libero volutpat sed cras ornare arcu. Lorem ipsum dolor sit
+          amet consectetur adipiscing elit. Convallis tellus id interdum velit
+          laoreet.
+        </Box>
       </WebsitePlaceholder>
     </>
   );