umwd-components 0.1.49 → 0.1.51

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 (6) hide show
  1. package/dist/cjs/components/WebsitePlaceholder.js +4 -1
  2. package/dist/esm/components/WebsitePlaceholder.js +4 -1
  3. package/package.json +1 -1
  4. package/src/components/WebsitePlaceholder.js +5 -1
  5. package/src/stories/WebsitePlaceholder.stories.js +19 -4
  6. package/src/styles/themes.js +2 -2
package/dist/cjs/components/WebsitePlaceholder.js CHANGED
@@ -23,6 +23,7 @@ function WebsitePlaceholder({
23
23
  children
24
24
  }) {
25
25
  const theme = material.useTheme();
26
+ console.log(theme.palette.mode);
26
27
 
27
28
  // const [keysPressed, setKeysPressed] = React.useState({});
28
29
  // let visible = true;
@@ -63,6 +64,7 @@ function WebsitePlaceholder({
63
64
  alignItems: "center",
64
65
  backgroundColor: theme.palette.primary.main,
65
66
  backgroundImage: `url(${theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl})`,
67
+ backgroundSize: "cover",
66
68
  height: "100vh",
67
69
  maxHeight: "100vh",
68
70
  width: "100vw",
@@ -95,7 +97,8 @@ WebsitePlaceholder.propTypes = {
95
97
  width: PropTypes.string,
96
98
  height: PropTypes.string
97
99
  }),
98
- backgroundColor: PropTypes.string
100
+ lmBackgroundUrl: PropTypes.string,
101
+ dmBackgroundUrl: PropTypes.string
99
102
  };
100
103
 
101
104
  exports.default = WebsitePlaceholder;
package/dist/esm/components/WebsitePlaceholder.js CHANGED
@@ -19,6 +19,7 @@ function WebsitePlaceholder({
19
19
  children
20
20
  }) {
21
21
  const theme = useTheme();
22
+ console.log(theme.palette.mode);
22
23
 
23
24
  // const [keysPressed, setKeysPressed] = React.useState({});
24
25
  // let visible = true;
@@ -59,6 +60,7 @@ function WebsitePlaceholder({
59
60
  alignItems: "center",
60
61
  backgroundColor: theme.palette.primary.main,
61
62
  backgroundImage: `url(${theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl})`,
63
+ backgroundSize: "cover",
62
64
  height: "100vh",
63
65
  maxHeight: "100vh",
64
66
  width: "100vw",
@@ -91,7 +93,8 @@ WebsitePlaceholder.propTypes = {
91
93
  width: PropTypes.string,
92
94
  height: PropTypes.string
93
95
  }),
94
- backgroundColor: PropTypes.string
96
+ lmBackgroundUrl: PropTypes.string,
97
+ dmBackgroundUrl: PropTypes.string
95
98
  };
96
99
 
97
100
  export { WebsitePlaceholder as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.49",
3
+ "version": "0.1.51",
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
@@ -15,6 +15,8 @@ function WebsitePlaceholder({
15
15
  }) {
16
16
  const theme = useTheme();
17
17
 
18
+ console.log(theme.palette.mode);
19
+
18
20
  // const [keysPressed, setKeysPressed] = React.useState({});
19
21
  // let visible = true;
20
22
 
@@ -68,6 +70,7 @@ function WebsitePlaceholder({
68
70
  backgroundImage: `url(${
69
71
  theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl
70
72
  })`,
73
+ backgroundSize: "cover",
71
74
  height: "100vh",
72
75
  maxHeight: "100vh",
73
76
  width: "100vw",
@@ -112,7 +115,8 @@ WebsitePlaceholder.propTypes = {
112
115
  width: PropTypes.string,
113
116
  height: PropTypes.string,
114
117
  }),
115
- backgroundColor: PropTypes.string,
118
+ lmBackgroundUrl: PropTypes.string,
119
+ dmBackgroundUrl: PropTypes.string,
116
120
  };
117
121
 
118
122
  export default WebsitePlaceholder;
package/src/stories/WebsitePlaceholder.stories.js CHANGED
@@ -7,10 +7,23 @@ export default {
7
7
  component: WebsitePlaceholder,
8
8
  };
9
9
 
10
- const Template = ({ title, announcement, logo, ...args }) => {
10
+ const Template = ({
11
+ title,
12
+ announcement,
13
+ logo,
14
+ lmBackgroundUrl,
15
+ dmBackgroundUrl,
16
+ ...args
17
+ }) => {
11
18
  return (
12
19
  <>
13
- <WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
20
+ <WebsitePlaceholder
21
+ title={title}
22
+ announcement={announcement}
23
+ logo={logo}
24
+ lmBackgroundUrl={lmBackgroundUrl}
25
+ dmBackgroundUrl={dmBackgroundUrl}
26
+ >
14
27
  <Box sx={{ height: "300px" }}>
15
28
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
16
29
  eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
@@ -149,7 +162,8 @@ HelloWorld.args = {
149
162
  alt: "Hello World",
150
163
  },
151
164
  announcement: "Coming Soon!",
152
- backgroundColor: "lightgrey",
165
+ lmBackgroundUrl: "https://via.placeholder.com/1920x1080",
166
+ dmBackgroundUrl: "https://via.placeholder.com/1920x1080",
153
167
  };
154
168
 
155
169
  HelloMars.args = {
@@ -159,5 +173,6 @@ HelloMars.args = {
159
173
  alt: "Hello Mars",
160
174
  },
161
175
  announcement: "In cinama's this summer!",
162
- backgroundColor: "slategrey",
176
+ lmBackgroundUrl: "https://via.placeholder.com/1920x1080",
177
+ dmBackgroundUrl: "https://via.placeholder.com/1920x1080",
163
178
  };
package/src/styles/themes.js CHANGED
@@ -16,7 +16,7 @@ const montserrat = Montserrat({
16
16
 
17
17
  export const darkTheme = createTheme({
18
18
  palette: {
19
- type: "dark",
19
+ mode: "dark",
20
20
  primary: {
21
21
  main: "#335e53",
22
22
  light: "#457f70",
@@ -107,7 +107,7 @@ export const darkTheme = createTheme({
107
107
 
108
108
  export const lightTheme = createTheme({
109
109
  palette: {
110
- type: "light",
110
+ mode: "light",
111
111
  primary: {
112
112
  main: "#335e53",
113
113
  light: "#457f70",