umwd-components 0.1.39 → 0.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/WebsitePlaceholder.js +14 -11
  2. package/dist/esm/components/WebsitePlaceholder.js +14 -11
  3. package/package.json +1 -1
  4. package/src/components/WebsitePlaceholder.js +42 -33
  5. package/src/stories/WebsitePlaceholder.stories.js +11 -2
package/dist/cjs/components/WebsitePlaceholder.js CHANGED
@@ -13,6 +13,7 @@ var React = require('react');
13
13
  var PropTypes = require('prop-types');
14
14
  var material = require('@mui/material');
15
15
  var Image = require('next/image');
16
+ require('@mui/icons-material');
16
17
 
17
18
  function WebsitePlaceholder({
18
19
  title,
@@ -20,29 +21,31 @@ function WebsitePlaceholder({
20
21
  logo
21
22
  }) {
22
23
  const theme = material.useTheme();
23
- console.log(theme.palette.primary.main);
24
+ const [visible, setVisible] = React.useState(true);
24
25
  const handleKeydown = e => {
25
- console.log(e);
26
+ console.log("handleKeydown", e);
27
+ if (e.key === "W") {
28
+ setVisible(false);
29
+ }
26
30
  };
27
31
  return /*#__PURE__*/React.createElement(material.Box, {
28
- sx: {
32
+ sx: [visible && {
29
33
  display: "grid",
30
34
  justifyItems: "center",
31
35
  alignItems: "center",
32
36
  backgroundColor: theme.palette.primary.main,
33
37
  height: "100vh",
38
+ maxHeight: "100vh",
34
39
  width: "100vw",
35
40
  overflow: "hidden",
36
41
  position: "fixed",
37
42
  top: 0,
38
43
  left: 0,
39
- zIndex: 1000,
44
+ zIndex: 9000,
40
45
  isolation: "isolate"
41
- },
42
- onKeyDown: e => {
43
- handleKeydown(e);
44
- }
45
- }, /*#__PURE__*/React.createElement(material.Typography, {
46
+ }],
47
+ onKeyDown: e => handleKeydown()
48
+ }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
46
49
  variant: "h1",
47
50
  align: "center"
48
51
  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
@@ -53,13 +56,13 @@ function WebsitePlaceholder({
53
56
  }), /*#__PURE__*/React.createElement(material.Typography, {
54
57
  variant: "h3",
55
58
  align: "center"
56
- }, announcement));
59
+ }, announcement)));
57
60
  }
58
61
  WebsitePlaceholder.propTypes = {
59
62
  title: PropTypes.string.isRequired,
60
63
  announcement: PropTypes.string.isRequired,
61
64
  logo: PropTypes.shape({
62
- src: PropTypes.string.isRequired,
65
+ url: PropTypes.string.isRequired,
63
66
  alt: PropTypes.string,
64
67
  width: PropTypes.string,
65
68
  height: PropTypes.string
package/dist/esm/components/WebsitePlaceholder.js CHANGED
@@ -9,6 +9,7 @@ import React from 'react';
9
9
  import PropTypes from 'prop-types';
10
10
  import { useTheme, Box, Typography } from '@mui/material';
11
11
  import Image from 'next/image';
12
+ import '@mui/icons-material';
12
13
 
13
14
  function WebsitePlaceholder({
14
15
  title,
@@ -16,29 +17,31 @@ function WebsitePlaceholder({
16
17
  logo
17
18
  }) {
18
19
  const theme = useTheme();
19
- console.log(theme.palette.primary.main);
20
+ const [visible, setVisible] = React.useState(true);
20
21
  const handleKeydown = e => {
21
- console.log(e);
22
+ console.log("handleKeydown", e);
23
+ if (e.key === "W") {
24
+ setVisible(false);
25
+ }
22
26
  };
23
27
  return /*#__PURE__*/React.createElement(Box, {
24
- sx: {
28
+ sx: [visible && {
25
29
  display: "grid",
26
30
  justifyItems: "center",
27
31
  alignItems: "center",
28
32
  backgroundColor: theme.palette.primary.main,
29
33
  height: "100vh",
34
+ maxHeight: "100vh",
30
35
  width: "100vw",
31
36
  overflow: "hidden",
32
37
  position: "fixed",
33
38
  top: 0,
34
39
  left: 0,
35
- zIndex: 1000,
40
+ zIndex: 9000,
36
41
  isolation: "isolate"
37
- },
38
- onKeyDown: e => {
39
- handleKeydown(e);
40
- }
41
- }, /*#__PURE__*/React.createElement(Typography, {
42
+ }],
43
+ onKeyDown: e => handleKeydown()
44
+ }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
42
45
  variant: "h1",
43
46
  align: "center"
44
47
  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
@@ -49,13 +52,13 @@ function WebsitePlaceholder({
49
52
  }), /*#__PURE__*/React.createElement(Typography, {
50
53
  variant: "h3",
51
54
  align: "center"
52
- }, announcement));
55
+ }, announcement)));
53
56
  }
54
57
  WebsitePlaceholder.propTypes = {
55
58
  title: PropTypes.string.isRequired,
56
59
  announcement: PropTypes.string.isRequired,
57
60
  logo: PropTypes.shape({
58
- src: PropTypes.string.isRequired,
61
+ url: PropTypes.string.isRequired,
59
62
  alt: PropTypes.string,
60
63
  width: PropTypes.string,
61
64
  height: PropTypes.string
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.39",
3
+ "version": "0.1.40",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/WebsitePlaceholder.js CHANGED
@@ -4,50 +4,59 @@ import React from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import { Typography, Box, useTheme } from "@mui/material";
6
6
  import Image from "next/image";
7
+ import { Visibility } from "@mui/icons-material";
7
8
 
8
9
  function WebsitePlaceholder({ title, announcement, logo }) {
9
10
  const theme = useTheme();
10
11
 
11
- console.log(theme.palette.primary.main);
12
+ const [visible, setVisible] = React.useState(true);
12
13
 
13
14
  const handleKeydown = (e) => {
14
- console.log(e);
15
+ console.log("handleKeydown", e);
16
+ if (e.key === "W") {
17
+ setVisible(false);
18
+ }
15
19
  };
16
20
 
17
21
  return (
18
22
  <Box
19
- sx={{
20
- display: "grid",
21
- justifyItems: "center",
22
- alignItems: "center",
23
- backgroundColor: theme.palette.primary.main,
24
- height: "100vh",
25
- width: "100vw",
26
- overflow: "hidden",
27
- position: "fixed",
28
- top: 0,
29
- left: 0,
30
- zIndex: 1000,
31
- isolation: "isolate",
32
- }}
33
- onKeyDown={(e) => {
34
- handleKeydown(e);
35
- }}
23
+ sx={[
24
+ visible && {
25
+ display: "grid",
26
+ justifyItems: "center",
27
+ alignItems: "center",
28
+ backgroundColor: theme.palette.primary.main,
29
+ height: "100vh",
30
+ maxHeight: "100vh",
31
+ width: "100vw",
32
+ overflow: "hidden",
33
+ position: "fixed",
34
+ top: 0,
35
+ left: 0,
36
+ zIndex: 9000,
37
+ isolation: "isolate",
38
+ },
39
+ ]}
40
+ onKeyDown={(e) => handleKeydown()}
36
41
  >
37
- <Typography variant="h1" align="center">
38
- {title}
39
- </Typography>
40
- {logo?.url && (
41
- <Image
42
- src={logo.url}
43
- alt={logo.alt || "logo"}
44
- width={logo.width || "200"}
45
- height={logo.height || "200"}
46
- />
42
+ {visible && (
43
+ <>
44
+ <Typography variant="h1" align="center">
45
+ {title}
46
+ </Typography>
47
+ {logo?.url && (
48
+ <Image
49
+ src={logo.url}
50
+ alt={logo.alt || "logo"}
51
+ width={logo.width || "200"}
52
+ height={logo.height || "200"}
53
+ />
54
+ )}
55
+ <Typography variant="h3" align="center">
56
+ {announcement}
57
+ </Typography>
58
+ </>
47
59
  )}
48
- <Typography variant="h3" align="center">
49
- {announcement}
50
- </Typography>
51
60
  </Box>
52
61
  );
53
62
  }
@@ -56,7 +65,7 @@ WebsitePlaceholder.propTypes = {
56
65
  title: PropTypes.string.isRequired,
57
66
  announcement: PropTypes.string.isRequired,
58
67
  logo: PropTypes.shape({
59
- src: PropTypes.string.isRequired,
68
+ url: PropTypes.string.isRequired,
60
69
  alt: PropTypes.string,
61
70
  width: PropTypes.string,
62
71
  height: PropTypes.string,
package/src/stories/WebsitePlaceholder.stories.js CHANGED
@@ -1,14 +1,23 @@
1
1
  import WebsitePlaceholder from "../components/WebsitePlaceholder";
2
2
  import React from "react";
3
+ import { Box } from "@mui/material";
3
4
 
4
5
  export default {
5
6
  title: "UMWD/WebsitePlaceholder",
6
7
  component: WebsitePlaceholder,
7
- // argTypes: { numberOfChildren: { type: "number" } },
8
8
  };
9
9
 
10
10
  const Template = ({ title, announcement, logo, ...args }) => (
11
- <WebsitePlaceholder title={title} announcement={announcement} logo={logo} />
11
+ <>
12
+ <WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
13
+ <Box sx={{ height: "300px" }}></Box>
14
+ <Box sx={{ height: "300px" }}></Box>
15
+ <Box sx={{ height: "300px" }}></Box>
16
+ <Box sx={{ height: "300px" }}></Box>
17
+ <Box sx={{ height: "300px" }}></Box>
18
+ <Box sx={{ height: "300px" }}></Box>
19
+ </WebsitePlaceholder>
20
+ </>
12
21
  );
13
22
 
14
23
  export const HelloWorld = Template.bind({});