umwd-components 0.1.38 → 0.1.39

package/dist/cjs/components/WebsitePlaceholder.js

@@ -0,0 +1,70 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var material = require('@mui/material');
+var Image = require('next/image');
+
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo
+}) {
+  const theme = material.useTheme();
+  console.log(theme.palette.primary.main);
+  const handleKeydown = e => {
+    console.log(e);
+  };
+  return /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "grid",
+      justifyItems: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.primary.main,
+      height: "100vh",
+      width: "100vw",
+      overflow: "hidden",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 1000,
+      isolation: "isolate"
+    },
+    onKeyDown: e => {
+      handleKeydown(e);
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    align: "center"
+  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "200",
+    height: logo.height || "200"
+  }), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h3",
+    align: "center"
+  }, announcement));
+}
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  backgroundColor: PropTypes.string
+};
+
+exports.default = WebsitePlaceholder;

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var TextImageBlock = require('./components/TextImageBlock.js');
 var Page = require('./components/Page.js');
 var Footer = require('./components/Footer.js');
 var ContactForm = require('./components/ContactForm.js');
+var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
 
 
 
@@ -27,3 +28,4 @@ exports.TextImageBlock = TextImageBlock.default;
 exports.Page = Page.default;
 exports.Footer = Footer.default;
 exports.ContactForm = ContactForm.default;
+exports.WebsitePlaceholder = WebsitePlaceholder.default;

package/dist/esm/components/WebsitePlaceholder.js

@@ -0,0 +1,66 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme, Box, Typography } from '@mui/material';
+import Image from 'next/image';
+
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo
+}) {
+  const theme = useTheme();
+  console.log(theme.palette.primary.main);
+  const handleKeydown = e => {
+    console.log(e);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "grid",
+      justifyItems: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.primary.main,
+      height: "100vh",
+      width: "100vw",
+      overflow: "hidden",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      zIndex: 1000,
+      isolation: "isolate"
+    },
+    onKeyDown: e => {
+      handleKeydown(e);
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1",
+    align: "center"
+  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
+    src: logo.url,
+    alt: logo.alt || "logo",
+    width: logo.width || "200",
+    height: logo.height || "200"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h3",
+    align: "center"
+  }, announcement));
+}
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string
+  }),
+  backgroundColor: PropTypes.string
+};
+
+export { WebsitePlaceholder as default };

package/dist/esm/index.js

@@ -13,3 +13,4 @@ export { default as TextImageBlock } from './components/TextImageBlock.js';
 export { default as Page } from './components/Page.js';
 export { default as Footer } from './components/Footer.js';
 export { default as ContactForm } from './components/ContactForm.js';
+export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';

package/package.json

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

package/src/components/WebsitePlaceholder.js

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Typography, Box, useTheme } from "@mui/material";
+import Image from "next/image";
+
+function WebsitePlaceholder({ title, announcement, logo }) {
+  const theme = useTheme();
+
+  console.log(theme.palette.primary.main);
+
+  const handleKeydown = (e) => {
+    console.log(e);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "grid",
+        justifyItems: "center",
+        alignItems: "center",
+        backgroundColor: theme.palette.primary.main,
+        height: "100vh",
+        width: "100vw",
+        overflow: "hidden",
+        position: "fixed",
+        top: 0,
+        left: 0,
+        zIndex: 1000,
+        isolation: "isolate",
+      }}
+      onKeyDown={(e) => {
+        handleKeydown(e);
+      }}
+    >
+      <Typography variant="h1" align="center">
+        {title}
+      </Typography>
+      {logo?.url && (
+        <Image
+          src={logo.url}
+          alt={logo.alt || "logo"}
+          width={logo.width || "200"}
+          height={logo.height || "200"}
+        />
+      )}
+      <Typography variant="h3" align="center">
+        {announcement}
+      </Typography>
+    </Box>
+  );
+}
+
+WebsitePlaceholder.propTypes = {
+  title: PropTypes.string.isRequired,
+  announcement: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+  }),
+  backgroundColor: PropTypes.string,
+};
+
+export default WebsitePlaceholder;

package/src/index.js

@@ -8,3 +8,4 @@ export { default as TextImageBlock } from "./components/TextImageBlock";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
 export { default as ContactForm } from "./components/ContactForm";
+export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";

package/src/stories/WebsitePlaceholder.stories.js

@@ -0,0 +1,38 @@
+import WebsitePlaceholder from "../components/WebsitePlaceholder";
+import React from "react";
+
+export default {
+  title: "UMWD/WebsitePlaceholder",
+  component: WebsitePlaceholder,
+  // argTypes: { numberOfChildren: { type: "number" } },
+};
+
+const Template = ({ title, announcement, logo, ...args }) => (
+  <WebsitePlaceholder title={title} announcement={announcement} logo={logo} />
+);
+
+export const HelloWorld = Template.bind({});
+
+export const HelloMars = Template.bind({});
+
+HelloWorld.args = {
+  title: "A New Website Near You!",
+  logo: {
+    url: "https://via.placeholder.com/850",
+    width: 850,
+    height: 850,
+    alt: "Hello World",
+  },
+  announcement: "Coming Soon!",
+  backgroundColor: "lightgrey",
+};
+
+HelloMars.args = {
+  title: "A Martian Near You!",
+  logo: {
+    url: "https://via.placeholder.com/850",
+    alt: "Hello Mars",
+  },
+  announcement: "In cinama's this summer!",
+  backgroundColor: "slategrey",
+};