umwd-components 0.1.26 → 0.1.27

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 (7) hide show
  1. package/dist/cjs/components/NavBar.js +22 -3
  2. package/dist/cjs/components/TextImageBlock.js +3 -0
  3. package/dist/esm/components/NavBar.js +22 -3
  4. package/dist/esm/components/TextImageBlock.js +3 -0
  5. package/package.json +1 -1
  6. package/src/components/NavBar.js +145 -101
  7. package/src/components/TextImageBlock.js +2 -0
package/dist/cjs/components/NavBar.js CHANGED
@@ -14,7 +14,22 @@ var Link = require('next/link');
14
14
  var material = require('@mui/material');
15
15
  var CloseIcon = require('@mui/icons-material/Close');
16
16
  var MoreVertIcon = require('@mui/icons-material/MoreVert');
17
+ var navigation = require('next/navigation');
18
+ var PropTypes = require('prop-types');
17
19
 
20
+ NavBar.propTypes = {
21
+ site_title: PropTypes.string,
22
+ logo: PropTypes.shape({
23
+ url: PropTypes.string.isRequired,
24
+ width: PropTypes.string,
25
+ height: PropTypes.string,
26
+ alt: PropTypes.string
27
+ }).isRequired,
28
+ pages: PropTypes.arrayOf(PropTypes.shape({
29
+ name: PropTypes.string.isRequired,
30
+ url: PropTypes.string.isRequired
31
+ })).isRequired
32
+ };
18
33
  function NavBar({
19
34
  site_title,
20
35
  logo,
@@ -29,6 +44,7 @@ function NavBar({
29
44
  const handleCloseMobileMenu = e => {
30
45
  setMobileNavOpen(false);
31
46
  };
47
+ const router = navigation.useRouter();
32
48
  return /*#__PURE__*/React.createElement(material.AppBar, {
33
49
  position: "sticky"
34
50
  }, /*#__PURE__*/React.createElement(material.Container, {
@@ -86,8 +102,10 @@ function NavBar({
86
102
  }
87
103
  }, pages.map(page => {
88
104
  return /*#__PURE__*/React.createElement(material.Button, {
89
- key: page.name
90
- /* onClick={() => page.action()} */,
105
+ key: page.name,
106
+ onClick: () => {
107
+ router.push(page.url);
108
+ },
91
109
  sx: {
92
110
  my: 2,
93
111
  color: "primary.contrastText",
@@ -229,7 +247,8 @@ function NavBar({
229
247
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
230
248
  key: page.name,
231
249
  onClick: () => {
232
- /* page.action(); */handleCloseMobileMenu();
250
+ router.push(page.url);
251
+ handleCloseMobileMenu();
233
252
  }
234
253
  }, /*#__PURE__*/React.createElement(material.ListItemText, {
235
254
  primary: page.name
package/dist/cjs/components/TextImageBlock.js CHANGED
@@ -24,6 +24,9 @@ function TextImageBlock({
24
24
  }) {
25
25
  reverse = Boolean(reverse);
26
26
  maxWidth = maxWidth || "100%";
27
+
28
+ /* TODO Text_content should deal with linebreaks */
29
+
27
30
  return /*#__PURE__*/React.createElement(material.Grid, {
28
31
  container: true,
29
32
  sx: [{
package/dist/esm/components/NavBar.js CHANGED
@@ -10,7 +10,22 @@ import Link from 'next/link';
10
10
  import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
11
11
  import CloseIcon from '@mui/icons-material/Close';
12
12
  import MoreVertIcon from '@mui/icons-material/MoreVert';
13
+ import { useRouter } from 'next/navigation';
14
+ import PropTypes from 'prop-types';
13
15
 
16
+ NavBar.propTypes = {
17
+ site_title: PropTypes.string,
18
+ logo: PropTypes.shape({
19
+ url: PropTypes.string.isRequired,
20
+ width: PropTypes.string,
21
+ height: PropTypes.string,
22
+ alt: PropTypes.string
23
+ }).isRequired,
24
+ pages: PropTypes.arrayOf(PropTypes.shape({
25
+ name: PropTypes.string.isRequired,
26
+ url: PropTypes.string.isRequired
27
+ })).isRequired
28
+ };
14
29
  function NavBar({
15
30
  site_title,
16
31
  logo,
@@ -25,6 +40,7 @@ function NavBar({
25
40
  const handleCloseMobileMenu = e => {
26
41
  setMobileNavOpen(false);
27
42
  };
43
+ const router = useRouter();
28
44
  return /*#__PURE__*/React.createElement(AppBar, {
29
45
  position: "sticky"
30
46
  }, /*#__PURE__*/React.createElement(Container, {
@@ -82,8 +98,10 @@ function NavBar({
82
98
  }
83
99
  }, pages.map(page => {
84
100
  return /*#__PURE__*/React.createElement(Button, {
85
- key: page.name
86
- /* onClick={() => page.action()} */,
101
+ key: page.name,
102
+ onClick: () => {
103
+ router.push(page.url);
104
+ },
87
105
  sx: {
88
106
  my: 2,
89
107
  color: "primary.contrastText",
@@ -225,7 +243,8 @@ function NavBar({
225
243
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
226
244
  key: page.name,
227
245
  onClick: () => {
228
- /* page.action(); */handleCloseMobileMenu();
246
+ router.push(page.url);
247
+ handleCloseMobileMenu();
229
248
  }
230
249
  }, /*#__PURE__*/React.createElement(ListItemText, {
231
250
  primary: page.name
package/dist/esm/components/TextImageBlock.js CHANGED
@@ -20,6 +20,9 @@ function TextImageBlock({
20
20
  }) {
21
21
  reverse = Boolean(reverse);
22
22
  maxWidth = maxWidth || "100%";
23
+
24
+ /* TODO Text_content should deal with linebreaks */
25
+
23
26
  return /*#__PURE__*/React.createElement(Grid, {
24
27
  container: true,
25
28
  sx: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.26",
3
+ "version": "0.1.27",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/NavBar.js CHANGED
@@ -1,4 +1,4 @@
1
- 'use client';
1
+ "use client";
2
2
 
3
3
  import React from "react";
4
4
  import Link from "next/link";
@@ -14,14 +14,33 @@ import {
14
14
  List,
15
15
  ListItem,
16
16
  Divider,
17
- ListItemText
17
+ ListItemText,
18
18
  } from "@mui/material";
19
19
 
20
20
  import CloseIcon from "@mui/icons-material/Close";
21
21
  import MoreVertIcon from "@mui/icons-material/MoreVert";
22
+ import { useRouter } from "next/navigation";
22
23
 
23
- function NavBar({site_title, logo, pages}){
24
- // handleMobileMenu
24
+ import PropTypes from "prop-types";
25
+
26
+ NavBar.propTypes = {
27
+ site_title: PropTypes.string,
28
+ logo: PropTypes.shape({
29
+ url: PropTypes.string.isRequired,
30
+ width: PropTypes.string,
31
+ height: PropTypes.string,
32
+ alt: PropTypes.string,
33
+ }).isRequired,
34
+ pages: PropTypes.arrayOf(
35
+ PropTypes.shape({
36
+ name: PropTypes.string.isRequired,
37
+ url: PropTypes.string.isRequired,
38
+ })
39
+ ).isRequired,
40
+ };
41
+
42
+ function NavBar({ site_title, logo, pages }) {
43
+ // handleMobileMenu
25
44
 
26
45
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
27
46
 
@@ -33,37 +52,43 @@ function NavBar({site_title, logo, pages}){
33
52
  setMobileNavOpen(false);
34
53
  };
35
54
 
55
+ const router = useRouter();
56
+
36
57
  return (
37
58
  <AppBar position="sticky">
38
59
  <Container maxWidth="xl">
39
- <Toolbar disableGutters sx={{py:1}}>
60
+ <Toolbar disableGutters sx={{ py: 1 }}>
40
61
  {/* logo and site title for big screens */}
41
- <Link href="/" style={{textDecoration: "none", color: "unset"}}>
62
+ <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
42
63
  <Box
43
- sx={{ display: { xs: "none", md: "flex" }, cursor: "pointer", alignItems: "center"}}
44
- ><Box sx={{ display: "flex", mr: 1 }}>
45
- <img
46
- src={logo.url}
47
- width={logo.width || "32px"}
48
- height={logo.height || "32px"}
49
- alt="site logo"
50
- style={{maxWidth: "60px", maxHeight: "60px"}}
51
- />
52
- </Box>
53
- {site_title !== undefined && (
54
- <Typography
55
-
56
- variant="h6"
57
- noWrap
58
- component="h1"
59
- sx={{
60
- display: "flex",
61
- textDecoration: "none",
62
- }}
63
- >
64
- {site_title}
65
- </Typography>
66
- )}
64
+ sx={{
65
+ display: { xs: "none", md: "flex" },
66
+ cursor: "pointer",
67
+ alignItems: "center",
68
+ }}
69
+ >
70
+ <Box sx={{ display: "flex", mr: 1 }}>
71
+ <img
72
+ src={logo.url}
73
+ width={logo.width || "32px"}
74
+ height={logo.height || "32px"}
75
+ alt="site logo"
76
+ style={{ maxWidth: "60px", maxHeight: "60px" }}
77
+ />
78
+ </Box>
79
+ {site_title !== undefined && (
80
+ <Typography
81
+ variant="h6"
82
+ noWrap
83
+ component="h1"
84
+ sx={{
85
+ display: "flex",
86
+ textDecoration: "none",
87
+ }}
88
+ >
89
+ {site_title}
90
+ </Typography>
91
+ )}
67
92
  </Box>
68
93
  </Link>
69
94
 
@@ -75,49 +100,58 @@ function NavBar({site_title, logo, pages}){
75
100
  alignItems: "center",
76
101
  }}
77
102
  >
78
-
79
-
80
103
  {pages.map((page) => {
81
104
  return (
82
- <Button
83
- key={page.name}
84
- /* onClick={() => page.action()} */
85
- sx={{ my: 2, color: "primary.contrastText", display: "block" }}
86
- >
87
- {page.name}
88
- </Button>
89
- )})}
90
-
105
+ <Button
106
+ key={page.name}
107
+ onClick={() => {
108
+ router.push(page.url);
109
+ }}
110
+ sx={{
111
+ my: 2,
112
+ color: "primary.contrastText",
113
+ display: "block",
114
+ }}
115
+ >
116
+ {page.name}
117
+ </Button>
118
+ );
119
+ })}
91
120
  </Box>
92
121
 
93
122
  {/* small screen logo and site title */}
94
- <Link href="/" style={{textDecoration: "none", color: "unset"}}>
95
- <Box sx={{ display: { xs: "flex", md: "none" }, alignItems:"center"}}>
96
-
97
- {logo.url !== undefined && <Box sx={{ display: "flex", mr: 1 }}>
123
+ <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
124
+ <Box
125
+ sx={{ display: { xs: "flex", md: "none" }, alignItems: "center" }}
126
+ >
127
+ {logo.url !== undefined && (
128
+ <Box sx={{ display: "flex", mr: 1 }}>
98
129
  <img
99
130
  src={logo.url}
100
131
  width={logo.width || "32px"}
101
132
  height={logo.height || "32px"}
102
133
  alt={logo.alt || "site logo"}
103
- style={{maxWidth: "60px", maxHeight: "60px"}}
134
+ style={{ maxWidth: "60px", maxHeight: "60px" }}
104
135
  />
105
- </Box>}
106
- {site_title !== undefined && <Typography
107
- variant="h5"
108
- noWrap
109
- component="h1"
110
- sx={{
111
- display: "flex",
112
- flexGrow: 1,
113
- }}
114
- >
115
- {site_title}
116
- </Typography>}
136
+ </Box>
137
+ )}
138
+ {site_title !== undefined && (
139
+ <Typography
140
+ variant="h5"
141
+ noWrap
142
+ component="h1"
143
+ sx={{
144
+ display: "flex",
145
+ flexGrow: 1,
146
+ }}
147
+ >
148
+ {site_title}
149
+ </Typography>
150
+ )}
117
151
  </Box>
118
152
  </Link>
119
153
  {/* spacer box */}
120
- <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box>
154
+ <Box sx={{ display: { xs: "flex", md: "none" }, flexGrow: 1 }}></Box>
121
155
 
122
156
  {/* small screen nav menu */}
123
157
 
@@ -145,33 +179,43 @@ function NavBar({site_title, logo, pages}){
145
179
  >
146
180
  <AppBar position="sticky">
147
181
  <Container maxWidth="xl">
148
- <Toolbar disableGutters sx={{py:1, justifyContent:"space-between"}}>
149
- <Link href="/" style={{textDecoration: "none", color: "unset"}}>
150
- <Box sx={{display: "flex", flexDirection: "row", alignItems: "center"}}>
151
- <Box sx={{ display: "flex", mr: 1 }}>
152
- <img
153
- src={logo.url}
154
- alt={logo.alt || "logo"}
155
- width={logo.width || "32px"}
156
- height={logo.height || "32px"}
157
- style={{maxWidth: "60px", maxHeight: "60px"}}
158
- />
159
- </Box>
160
- <Typography
161
- variant="h5"
162
- noWrap
163
- component="h1"
164
- sx={{
165
- display: "flex",
166
- flexGrow: 1,
167
- }}
182
+ <Toolbar
183
+ disableGutters
184
+ sx={{ py: 1, justifyContent: "space-between" }}
185
+ >
186
+ <Link
187
+ href="/"
188
+ style={{ textDecoration: "none", color: "unset" }}
168
189
  >
169
-
170
- {site_title !== undefined && site_title}
171
-
172
- </Typography>
173
- </Box>
174
- </Link>
190
+ <Box
191
+ sx={{
192
+ display: "flex",
193
+ flexDirection: "row",
194
+ alignItems: "center",
195
+ }}
196
+ >
197
+ <Box sx={{ display: "flex", mr: 1 }}>
198
+ <img
199
+ src={logo.url}
200
+ alt={logo.alt || "logo"}
201
+ width={logo.width || "32px"}
202
+ height={logo.height || "32px"}
203
+ style={{ maxWidth: "60px", maxHeight: "60px" }}
204
+ />
205
+ </Box>
206
+ <Typography
207
+ variant="h5"
208
+ noWrap
209
+ component="h1"
210
+ sx={{
211
+ display: "flex",
212
+ flexGrow: 1,
213
+ }}
214
+ >
215
+ {site_title !== undefined && site_title}
216
+ </Typography>
217
+ </Box>
218
+ </Link>
175
219
  <Button
176
220
  onClick={handleCloseMobileMenu}
177
221
  sx={{
@@ -192,22 +236,22 @@ function NavBar({site_title, logo, pages}){
192
236
  </Container>
193
237
  </AppBar>
194
238
  <List>
195
- {pages.map((page) =>
196
- {
197
- return (
198
- <>
199
- <ListItem
200
- key={page.name}
201
- onClick={() => {/* page.action(); */handleCloseMobileMenu();}}
202
- >
203
- <ListItemText primary={page.name} />
204
- </ListItem>
205
- <Divider />
206
- </>
207
- )})}
208
-
209
-
210
-
239
+ {pages.map((page) => {
240
+ return (
241
+ <>
242
+ <ListItem
243
+ key={page.name}
244
+ onClick={() => {
245
+ router.push(page.url);
246
+ handleCloseMobileMenu();
247
+ }}
248
+ >
249
+ <ListItemText primary={page.name} />
250
+ </ListItem>
251
+ <Divider />
252
+ </>
253
+ );
254
+ })}
211
255
  </List>
212
256
  </Dialog>
213
257
  </Box>
package/src/components/TextImageBlock.js CHANGED
@@ -17,6 +17,8 @@ function TextImageBlock({
17
17
 
18
18
  maxWidth = maxWidth || "100%";
19
19
 
20
+ /* TODO Text_content should deal with linebreaks */
21
+
20
22
  return (
21
23
  <Grid
22
24
  container