umwd-components 0.1.31 → 0.1.32

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/NavBar.js +29 -6
  2. package/dist/esm/components/NavBar.js +30 -7
  3. package/package.json +1 -1
  4. package/src/components/NavBar.js +86 -46
  5. package/src/stories/Navbar.stories.js +29 -0
package/dist/cjs/components/NavBar.js CHANGED
@@ -28,16 +28,23 @@ NavBar.propTypes = {
28
28
  pages: PropTypes.arrayOf(PropTypes.shape({
29
29
  name: PropTypes.string.isRequired,
30
30
  url: PropTypes.string.isRequired
31
- })).isRequired
31
+ })),
32
+ tabs: PropTypes.arrayOf(PropTypes.shape({
33
+ name: PropTypes.string.isRequired,
34
+ url: PropTypes.string.isRequired
35
+ }))
32
36
  };
33
37
  function NavBar({
34
38
  site_title,
35
39
  logo,
36
- pages
40
+ pages = [],
41
+ tabs = [],
42
+ maxWidth = "xl"
37
43
  }) {
38
44
  // handleMobileMenu
39
45
 
40
46
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
47
+ React.useState(tabs[0].name || "");
41
48
  const handleOpenMobileMenu = e => {
42
49
  setMobileNavOpen(true);
43
50
  };
@@ -48,7 +55,7 @@ function NavBar({
48
55
  return /*#__PURE__*/React.createElement(material.AppBar, {
49
56
  position: "sticky"
50
57
  }, /*#__PURE__*/React.createElement(material.Container, {
51
- maxWidth: "xl"
58
+ maxWidth: maxWidth
52
59
  }, /*#__PURE__*/React.createElement(material.Toolbar, {
53
60
  disableGutters: true,
54
61
  sx: {
@@ -91,7 +98,7 @@ function NavBar({
91
98
  display: "flex",
92
99
  textDecoration: "none"
93
100
  }
94
- }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
101
+ }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
95
102
  sx: {
96
103
  flexGrow: 1,
97
104
  display: {
@@ -243,7 +250,7 @@ function NavBar({
243
250
  sx: {
244
251
  color: "primary.contrastText"
245
252
  }
246
- }))))), /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
253
+ }))))), pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
247
254
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
248
255
  key: page.name,
249
256
  onClick: () => {
@@ -253,7 +260,23 @@ function NavBar({
253
260
  }, /*#__PURE__*/React.createElement(material.ListItemText, {
254
261
  primary: page.name
255
262
  })), /*#__PURE__*/React.createElement(material.Divider, null));
256
- })))))));
263
+ }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Tabs, {
264
+ value: "one"
265
+ /* onChange={handleChange} */,
266
+ "aria-label": "wrapped label tabs example",
267
+ textColor: "secondary",
268
+ indicatorColor: "secondary",
269
+ variant: "fullWidth"
270
+ }, tabs.length > 0 && tabs.map(tab => {
271
+ return /*#__PURE__*/React.createElement(material.Tab, {
272
+ key: tab.name,
273
+ value: tab.name,
274
+ label: tab.name,
275
+ onClick: () => {
276
+ router.push(tab.url);
277
+ }
278
+ });
279
+ }))));
257
280
  }
258
281
 
259
282
  exports.default = NavBar;
package/dist/esm/components/NavBar.js CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  import React from 'react';
9
9
  import Link from 'next/link';
10
- import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
10
+ import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider, Tabs, Tab } from '@mui/material';
11
11
  import CloseIcon from '@mui/icons-material/Close';
12
12
  import MoreVertIcon from '@mui/icons-material/MoreVert';
13
13
  import { useRouter } from 'next/navigation';
@@ -24,16 +24,23 @@ NavBar.propTypes = {
24
24
  pages: PropTypes.arrayOf(PropTypes.shape({
25
25
  name: PropTypes.string.isRequired,
26
26
  url: PropTypes.string.isRequired
27
- })).isRequired
27
+ })),
28
+ tabs: PropTypes.arrayOf(PropTypes.shape({
29
+ name: PropTypes.string.isRequired,
30
+ url: PropTypes.string.isRequired
31
+ }))
28
32
  };
29
33
  function NavBar({
30
34
  site_title,
31
35
  logo,
32
- pages
36
+ pages = [],
37
+ tabs = [],
38
+ maxWidth = "xl"
33
39
  }) {
34
40
  // handleMobileMenu
35
41
 
36
42
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
43
+ React.useState(tabs[0].name || "");
37
44
  const handleOpenMobileMenu = e => {
38
45
  setMobileNavOpen(true);
39
46
  };
@@ -44,7 +51,7 @@ function NavBar({
44
51
  return /*#__PURE__*/React.createElement(AppBar, {
45
52
  position: "sticky"
46
53
  }, /*#__PURE__*/React.createElement(Container, {
47
- maxWidth: "xl"
54
+ maxWidth: maxWidth
48
55
  }, /*#__PURE__*/React.createElement(Toolbar, {
49
56
  disableGutters: true,
50
57
  sx: {
@@ -87,7 +94,7 @@ function NavBar({
87
94
  display: "flex",
88
95
  textDecoration: "none"
89
96
  }
90
- }, site_title))), /*#__PURE__*/React.createElement(Box, {
97
+ }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(Box, {
91
98
  sx: {
92
99
  flexGrow: 1,
93
100
  display: {
@@ -239,7 +246,7 @@ function NavBar({
239
246
  sx: {
240
247
  color: "primary.contrastText"
241
248
  }
242
- }))))), /*#__PURE__*/React.createElement(List, null, pages.map(page => {
249
+ }))))), pages.length > 0 && /*#__PURE__*/React.createElement(List, null, pages.map(page => {
243
250
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
244
251
  key: page.name,
245
252
  onClick: () => {
@@ -249,7 +256,23 @@ function NavBar({
249
256
  }, /*#__PURE__*/React.createElement(ListItemText, {
250
257
  primary: page.name
251
258
  })), /*#__PURE__*/React.createElement(Divider, null));
252
- })))))));
259
+ }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(Tabs, {
260
+ value: "one"
261
+ /* onChange={handleChange} */,
262
+ "aria-label": "wrapped label tabs example",
263
+ textColor: "secondary",
264
+ indicatorColor: "secondary",
265
+ variant: "fullWidth"
266
+ }, tabs.length > 0 && tabs.map(tab => {
267
+ return /*#__PURE__*/React.createElement(Tab, {
268
+ key: tab.name,
269
+ value: tab.name,
270
+ label: tab.name,
271
+ onClick: () => {
272
+ router.push(tab.url);
273
+ }
274
+ });
275
+ }))));
253
276
  }
254
277
 
255
278
  export { NavBar as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.31",
3
+ "version": "0.1.32",
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
@@ -15,6 +15,8 @@ import {
15
15
  ListItem,
16
16
  Divider,
17
17
  ListItemText,
18
+ Tabs,
19
+ Tab,
18
20
  } from "@mui/material";
19
21
 
20
22
  import CloseIcon from "@mui/icons-material/Close";
@@ -36,14 +38,22 @@ NavBar.propTypes = {
36
38
  name: PropTypes.string.isRequired,
37
39
  url: PropTypes.string.isRequired,
38
40
  })
39
- ).isRequired,
41
+ ),
42
+ tabs: PropTypes.arrayOf(
43
+ PropTypes.shape({
44
+ name: PropTypes.string.isRequired,
45
+ url: PropTypes.string.isRequired,
46
+ })
47
+ ),
40
48
  };
41
49
 
42
- function NavBar({ site_title, logo, pages }) {
50
+ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
43
51
  // handleMobileMenu
44
52
 
45
53
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
46
54
 
55
+ const [currentTab, setCurrentTab] = React.useState(tabs[0].name || "");
56
+
47
57
  const handleOpenMobileMenu = (e) => {
48
58
  setMobileNavOpen(true);
49
59
  };
@@ -56,7 +66,7 @@ function NavBar({ site_title, logo, pages }) {
56
66
 
57
67
  return (
58
68
  <AppBar position="sticky">
59
- <Container maxWidth="xl">
69
+ <Container maxWidth={maxWidth}>
60
70
  <Toolbar disableGutters sx={{ py: 1 }}>
61
71
  {/* logo and site title for big screens */}
62
72
  <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
@@ -93,31 +103,33 @@ function NavBar({ site_title, logo, pages }) {
93
103
  </Link>
94
104
 
95
105
  {/* Large screen menu */}
96
- <Box
97
- sx={{
98
- flexGrow: 1,
99
- display: { xs: "none", md: "flex" },
100
- alignItems: "center",
101
- }}
102
- >
103
- {pages.map((page) => {
104
- return (
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
- })}
120
- </Box>
106
+ {pages.length > 0 && (
107
+ <Box
108
+ sx={{
109
+ flexGrow: 1,
110
+ display: { xs: "none", md: "flex" },
111
+ alignItems: "center",
112
+ }}
113
+ >
114
+ {pages.map((page) => {
115
+ return (
116
+ <Button
117
+ key={page.name}
118
+ onClick={() => {
119
+ router.push(page.url);
120
+ }}
121
+ sx={{
122
+ my: 2,
123
+ color: "primary.contrastText",
124
+ display: "block",
125
+ }}
126
+ >
127
+ {page.name}
128
+ </Button>
129
+ );
130
+ })}
131
+ </Box>
132
+ )}
121
133
 
122
134
  {/* small screen logo and site title */}
123
135
  <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
@@ -235,27 +247,55 @@ function NavBar({ site_title, logo, pages }) {
235
247
  </Toolbar>
236
248
  </Container>
237
249
  </AppBar>
238
- <List>
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
- })}
255
- </List>
250
+ {pages.length > 0 && (
251
+ <List>
252
+ {pages.map((page) => {
253
+ return (
254
+ <>
255
+ <ListItem
256
+ key={page.name}
257
+ onClick={() => {
258
+ router.push(page.url);
259
+ handleCloseMobileMenu();
260
+ }}
261
+ >
262
+ <ListItemText primary={page.name} />
263
+ </ListItem>
264
+ <Divider />
265
+ </>
266
+ );
267
+ })}
268
+ </List>
269
+ )}
256
270
  </Dialog>
257
271
  </Box>
258
272
  </Toolbar>
273
+
274
+ {/* Tabs */}
275
+ {tabs.length > 0 && (
276
+ <Tabs
277
+ value={"one"}
278
+ /* onChange={handleChange} */
279
+ aria-label="wrapped label tabs example"
280
+ textColor="secondary"
281
+ indicatorColor="secondary"
282
+ variant="fullWidth"
283
+ >
284
+ {tabs.length > 0 &&
285
+ tabs.map((tab) => {
286
+ return (
287
+ <Tab
288
+ key={tab.name}
289
+ value={tab.name}
290
+ label={tab.name}
291
+ onClick={() => {
292
+ router.push(tab.url);
293
+ }}
294
+ />
295
+ );
296
+ })}
297
+ </Tabs>
298
+ )}
259
299
  </Container>
260
300
  </AppBar>
261
301
  );
package/src/stories/Navbar.stories.js CHANGED
@@ -36,3 +36,32 @@ Orefs.args = {
36
36
  },
37
37
  ],
38
38
  };
39
+
40
+ export const UMWD = Template.bind({});
41
+
42
+ UMWD.args = {
43
+ site_title: "UMWD",
44
+ logo: {
45
+ url: thumbnail.src,
46
+ width: 100,
47
+ height: 100,
48
+ alt: "Logo",
49
+ },
50
+ tabs: [
51
+ {
52
+ name: "Resources",
53
+ link: "/resources",
54
+ action: () => console.log("Resources"),
55
+ },
56
+ {
57
+ name: "Shop",
58
+ link: "/shop",
59
+ action: () => console.log("Shop"),
60
+ },
61
+ {
62
+ name: "Contact",
63
+ link: "/contact",
64
+ action: () => console.log("Contact"),
65
+ },
66
+ ],
67
+ };