umwd-components 0.1.30 → 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 (8) hide show
  1. package/dist/cjs/components/Footer.js +9 -10
  2. package/dist/cjs/components/NavBar.js +29 -6
  3. package/dist/esm/components/Footer.js +9 -10
  4. package/dist/esm/components/NavBar.js +30 -7
  5. package/package.json +1 -1
  6. package/src/components/Footer.js +21 -18
  7. package/src/components/NavBar.js +86 -46
  8. package/src/stories/Navbar.stories.js +29 -0
package/dist/cjs/components/Footer.js CHANGED
@@ -113,22 +113,21 @@ function Footer({
113
113
  xs: 12,
114
114
  sm: 4,
115
115
  align: "center"
116
- }, /*#__PURE__*/React.createElement(material.Typography, {
116
+ }, company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
117
117
  variant: "h6"
118
- }, "Socials"), company_socials && /*#__PURE__*/React.createElement(material.Stack, {
118
+ }, "Socials"), /*#__PURE__*/React.createElement(material.Stack, {
119
119
  spacing: 2,
120
120
  sx: {
121
121
  width: "min-content",
122
122
  color: "primary.contrastText"
123
123
  }
124
124
  }, company_socials.map((company_social, index) => {
125
- if (company_social.url === undefined || company_social.icon === undefined) {
126
- return /*#__PURE__*/React.createElement(material.IconButton, {
127
- color: "inherit",
128
- href: company_social.url
129
- }, company_social.icon);
130
- }
131
- }))), /*#__PURE__*/React.createElement(material.Grid, {
125
+ return /*#__PURE__*/React.createElement(material.IconButton, {
126
+ key: index,
127
+ color: "inherit",
128
+ href: company_social.url
129
+ }, company_social.icon);
130
+ })))), /*#__PURE__*/React.createElement(material.Grid, {
132
131
  item: true,
133
132
  xs: 12
134
133
  }, /*#__PURE__*/React.createElement(material.Divider, null)), disclaimer_link && /*#__PURE__*/React.createElement(material.Grid, {
@@ -157,7 +156,7 @@ function Footer({
157
156
  href: privacypolicy_link
158
157
  }, /*#__PURE__*/React.createElement(material.Typography, {
159
158
  variant: "body1"
160
- }, "Privacy Policy"))), /*#__PURE__*/React.createElement(material.Grid, {
159
+ }, "Privacy Policy"))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
161
160
  item: true,
162
161
  xs: 12
163
162
  }, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
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/Footer.js CHANGED
@@ -109,22 +109,21 @@ function Footer({
109
109
  xs: 12,
110
110
  sm: 4,
111
111
  align: "center"
112
- }, /*#__PURE__*/React.createElement(Typography, {
112
+ }, company_socials.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
113
113
  variant: "h6"
114
- }, "Socials"), company_socials && /*#__PURE__*/React.createElement(Stack, {
114
+ }, "Socials"), /*#__PURE__*/React.createElement(Stack, {
115
115
  spacing: 2,
116
116
  sx: {
117
117
  width: "min-content",
118
118
  color: "primary.contrastText"
119
119
  }
120
120
  }, company_socials.map((company_social, index) => {
121
- if (company_social.url === undefined || company_social.icon === undefined) {
122
- return /*#__PURE__*/React.createElement(IconButton, {
123
- color: "inherit",
124
- href: company_social.url
125
- }, company_social.icon);
126
- }
127
- }))), /*#__PURE__*/React.createElement(Grid, {
121
+ return /*#__PURE__*/React.createElement(IconButton, {
122
+ key: index,
123
+ color: "inherit",
124
+ href: company_social.url
125
+ }, company_social.icon);
126
+ })))), /*#__PURE__*/React.createElement(Grid, {
128
127
  item: true,
129
128
  xs: 12
130
129
  }, /*#__PURE__*/React.createElement(Divider, null)), disclaimer_link && /*#__PURE__*/React.createElement(Grid, {
@@ -153,7 +152,7 @@ function Footer({
153
152
  href: privacypolicy_link
154
153
  }, /*#__PURE__*/React.createElement(Typography, {
155
154
  variant: "body1"
156
- }, "Privacy Policy"))), /*#__PURE__*/React.createElement(Grid, {
155
+ }, "Privacy Policy"))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(Grid, {
157
156
  item: true,
158
157
  xs: 12
159
158
  }, /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(Grid, {
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.30",
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/Footer.js CHANGED
@@ -110,25 +110,26 @@ function Footer({
110
110
  <Typography variant="body1"></Typography>
111
111
  </Grid>
112
112
  <Grid item xs={12} sm={4} align="center">
113
- <Typography variant="h6">Socials</Typography>
114
- {company_socials && (
115
- <Stack
116
- spacing={2}
117
- sx={{ width: "min-content", color: "primary.contrastText" }}
118
- >
119
- {company_socials.map((company_social, index) => {
120
- if (
121
- company_social.url === undefined ||
122
- company_social.icon === undefined
123
- ) {
113
+ {company_socials.length > 0 && (
114
+ <>
115
+ <Typography variant="h6">Socials</Typography>
116
+ <Stack
117
+ spacing={2}
118
+ sx={{ width: "min-content", color: "primary.contrastText" }}
119
+ >
120
+ {company_socials.map((company_social, index) => {
124
121
  return (
125
- <IconButton color="inherit" href={company_social.url}>
122
+ <IconButton
123
+ key={index}
124
+ color="inherit"
125
+ href={company_social.url}
126
+ >
126
127
  {company_social.icon}
127
128
  </IconButton>
128
129
  );
129
- }
130
- })}
131
- </Stack>
130
+ })}
131
+ </Stack>
132
+ </>
132
133
  )}
133
134
  </Grid>
134
135
  <Grid item xs={12}>
@@ -180,9 +181,11 @@ function Footer({
180
181
  >
181
182
  <CookieConsentButton />
182
183
  </Grid> */}
183
- <Grid item xs={12}>
184
- <Divider />
185
- </Grid>
184
+ {Boolean(disclaimer_link || privacypolicy_link) && (
185
+ <Grid item xs={12}>
186
+ <Divider />
187
+ </Grid>
188
+ )}
186
189
  <Grid
187
190
  item
188
191
  xs={12}
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
+ };