umwd-components 0.1.43 → 0.1.45

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/Footer.js +31 -15
  2. package/dist/cjs/components/NavBar.js +39 -31
  3. package/dist/esm/components/Footer.js +32 -16
  4. package/dist/esm/components/NavBar.js +40 -32
  5. package/package.json +1 -1
  6. package/src/components/Footer.js +32 -15
  7. package/src/stories/Footer.stories.js +80 -0
package/dist/cjs/components/Footer.js CHANGED
@@ -16,7 +16,12 @@ var PropTypes = require('prop-types');
16
16
 
17
17
  Footer.propTypes = {
18
18
  site_title: PropTypes.string.isRequired,
19
- site_logo: PropTypes.string,
19
+ logo: PropTypes.shape({
20
+ url: PropTypes.string.isRequired,
21
+ width: PropTypes.number.isRequired,
22
+ height: PropTypes.number.isRequired,
23
+ alt: PropTypes.string
24
+ }),
20
25
  company_name: PropTypes.string.isRequired,
21
26
  parent_company_name: PropTypes.string,
22
27
  company_address: PropTypes.shape({
@@ -38,7 +43,7 @@ Footer.propTypes = {
38
43
  };
39
44
  function Footer({
40
45
  site_title,
41
- site_logo,
46
+ logo,
42
47
  company_name,
43
48
  parent_company_name,
44
49
  company_address,
@@ -65,7 +70,7 @@ function Footer({
65
70
  xs: 12,
66
71
  sm: 4,
67
72
  align: "center"
68
- }, /*#__PURE__*/React.createElement(Link, {
73
+ }, /*#__PURE__*/React.createElement(material.Link, {
69
74
  href: "/"
70
75
  }, /*#__PURE__*/React.createElement(material.Box, {
71
76
  sx: {
@@ -79,12 +84,13 @@ function Footer({
79
84
  justifyContent: "center"
80
85
  }
81
86
  }, /*#__PURE__*/React.createElement(material.Typography, {
82
- variant: "h6"
83
- }, site_title), site_logo && /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Image, {
84
- src: site_logo,
85
- width: 64,
86
- height: 64,
87
- alt: "site logo"
87
+ variant: "h6",
88
+ color: "#ffffff"
89
+ }, site_title), logo && /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Image, {
90
+ src: logo.url,
91
+ width: logo.width,
92
+ height: logo.height,
93
+ alt: logo.alt || "site logo"
88
94
  }))))), /*#__PURE__*/React.createElement(material.Grid, {
89
95
  item: true,
90
96
  xs: 12,
@@ -140,10 +146,15 @@ function Footer({
140
146
  alignItems: "center"
141
147
  }
142
148
  }, /*#__PURE__*/React.createElement(Link, {
143
- href: disclaimer_link
149
+ href: disclaimer_link,
150
+ passHref: true,
151
+ legacyBehavior: true
152
+ }, /*#__PURE__*/React.createElement(material.Link, {
153
+ target: "_blank"
144
154
  }, /*#__PURE__*/React.createElement(material.Typography, {
145
- variant: "body1"
146
- }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(material.Grid, {
155
+ variant: "body1",
156
+ color: "#ffffff"
157
+ }, "Disclaimer")))), privacypolicy_link && /*#__PURE__*/React.createElement(material.Grid, {
147
158
  item: true,
148
159
  xs: 12,
149
160
  sm: 4,
@@ -153,10 +164,15 @@ function Footer({
153
164
  alignItems: "center"
154
165
  }
155
166
  }, /*#__PURE__*/React.createElement(Link, {
156
- href: privacypolicy_link
167
+ href: privacypolicy_link,
168
+ passHref: true,
169
+ legacyBehavior: true
170
+ }, /*#__PURE__*/React.createElement(material.Link, {
171
+ target: "_blank"
157
172
  }, /*#__PURE__*/React.createElement(material.Typography, {
158
- variant: "body1"
159
- }, "Privacy Policy"))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
173
+ variant: "body1",
174
+ color: "#ffffff"
175
+ }, "Privacy Policy")))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(material.Grid, {
160
176
  item: true,
161
177
  xs: 12
162
178
  }, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
package/dist/cjs/components/NavBar.js CHANGED
@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
  var Link = require('next/link');
14
+ var Image = require('next/image');
14
15
  var material = require('@mui/material');
15
16
  var CloseIcon = require('@mui/icons-material/Close');
16
17
  var MoreVertIcon = require('@mui/icons-material/MoreVert');
@@ -80,21 +81,15 @@ function NavBar({
80
81
  cursor: "pointer",
81
82
  alignItems: "center"
82
83
  }
83
- }, /*#__PURE__*/React.createElement(material.Box, {
84
- sx: {
85
- display: "flex",
86
- mr: 1
87
- }
88
- }, /*#__PURE__*/React.createElement("img", {
84
+ }, /*#__PURE__*/React.createElement(Image, {
89
85
  src: logo.url,
90
- width: logo.width || "32px",
91
- height: logo.height || "32px",
92
- alt: "site logo",
86
+ width: logo.height >= 50 ? logo.width / logo.height * 50 : logo.width,
87
+ height: logo.height,
88
+ alt: logo.alt || "site logo",
93
89
  style: {
94
- maxWidth: "60px",
95
- maxHeight: "60px"
90
+ maxHeight: "50px"
96
91
  }
97
- })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
92
+ }), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
98
93
  variant: "h6",
99
94
  noWrap: true,
100
95
  component: "h1",
@@ -102,7 +97,12 @@ function NavBar({
102
97
  display: "flex",
103
98
  textDecoration: "none"
104
99
  }
105
- }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
100
+ }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
101
+ sx: {
102
+ display: "block",
103
+ width: "30px"
104
+ }
105
+ }), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
106
106
  sx: {
107
107
  flexGrow: 1,
108
108
  display: {
@@ -123,7 +123,31 @@ function NavBar({
123
123
  display: "block"
124
124
  }
125
125
  }, page.name);
126
- })), /*#__PURE__*/React.createElement(Link, {
126
+ })), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
127
+ sx: {
128
+ flexGrow: 1,
129
+ display: {
130
+ xs: "none",
131
+ md: "flex"
132
+ }
133
+ }
134
+ }, /*#__PURE__*/React.createElement(material.Tabs, {
135
+ value: currentTab,
136
+ onChange: (event, newValue) => handleChange(event, newValue),
137
+ "aria-label": "wrapped label tabs example",
138
+ textColor: "secondary",
139
+ indicatorColor: "secondary",
140
+ variant: "fullWidth"
141
+ }, tabs.length > 0 && tabs.map(tab => {
142
+ return /*#__PURE__*/React.createElement(material.Tab, {
143
+ key: tab.name,
144
+ value: tab.name,
145
+ label: tab.name,
146
+ onClick: () => {
147
+ router.push(tab.url);
148
+ }
149
+ });
150
+ }))), /*#__PURE__*/React.createElement(Link, {
127
151
  href: "/",
128
152
  style: {
129
153
  textDecoration: "none",
@@ -264,23 +288,7 @@ function NavBar({
264
288
  }, /*#__PURE__*/React.createElement(material.ListItemText, {
265
289
  primary: page.name
266
290
  })), /*#__PURE__*/React.createElement(material.Divider, null));
267
- }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Tabs, {
268
- value: currentTab,
269
- onChange: (event, newValue) => handleChange(event, newValue),
270
- "aria-label": "wrapped label tabs example",
271
- textColor: "secondary",
272
- indicatorColor: "secondary",
273
- variant: "fullWidth"
274
- }, tabs.length > 0 && tabs.map(tab => {
275
- return /*#__PURE__*/React.createElement(material.Tab, {
276
- key: tab.name,
277
- value: tab.name,
278
- label: tab.name,
279
- onClick: () => {
280
- router.push(tab.url);
281
- }
282
- });
283
- }))));
291
+ })))))));
284
292
  }
285
293
 
286
294
  exports.default = NavBar;
package/dist/esm/components/Footer.js CHANGED
@@ -5,14 +5,19 @@
5
5
  */
6
6
 
7
7
  import React from 'react';
8
- import { AppBar, Container, Toolbar, Grid, Box, Typography, Stack, IconButton, Divider } from '@mui/material';
9
- import Link from 'next/link';
8
+ import { AppBar, Container, Toolbar, Grid, Link, Box, Typography, Stack, IconButton, Divider } from '@mui/material';
9
+ import Link$1 from 'next/link';
10
10
  import Image from 'next/image';
11
11
  import PropTypes from 'prop-types';
12
12
 
13
13
  Footer.propTypes = {
14
14
  site_title: PropTypes.string.isRequired,
15
- site_logo: PropTypes.string,
15
+ logo: PropTypes.shape({
16
+ url: PropTypes.string.isRequired,
17
+ width: PropTypes.number.isRequired,
18
+ height: PropTypes.number.isRequired,
19
+ alt: PropTypes.string
20
+ }),
16
21
  company_name: PropTypes.string.isRequired,
17
22
  parent_company_name: PropTypes.string,
18
23
  company_address: PropTypes.shape({
@@ -34,7 +39,7 @@ Footer.propTypes = {
34
39
  };
35
40
  function Footer({
36
41
  site_title,
37
- site_logo,
42
+ logo,
38
43
  company_name,
39
44
  parent_company_name,
40
45
  company_address,
@@ -75,12 +80,13 @@ function Footer({
75
80
  justifyContent: "center"
76
81
  }
77
82
  }, /*#__PURE__*/React.createElement(Typography, {
78
- variant: "h6"
79
- }, site_title), site_logo && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Image, {
80
- src: site_logo,
81
- width: 64,
82
- height: 64,
83
- alt: "site logo"
83
+ variant: "h6",
84
+ color: "#ffffff"
85
+ }, site_title), logo && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Image, {
86
+ src: logo.url,
87
+ width: logo.width,
88
+ height: logo.height,
89
+ alt: logo.alt || "site logo"
84
90
  }))))), /*#__PURE__*/React.createElement(Grid, {
85
91
  item: true,
86
92
  xs: 12,
@@ -135,11 +141,16 @@ function Footer({
135
141
  justifyContent: "center",
136
142
  alignItems: "center"
137
143
  }
144
+ }, /*#__PURE__*/React.createElement(Link$1, {
145
+ href: disclaimer_link,
146
+ passHref: true,
147
+ legacyBehavior: true
138
148
  }, /*#__PURE__*/React.createElement(Link, {
139
- href: disclaimer_link
149
+ target: "_blank"
140
150
  }, /*#__PURE__*/React.createElement(Typography, {
141
- variant: "body1"
142
- }, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(Grid, {
151
+ variant: "body1",
152
+ color: "#ffffff"
153
+ }, "Disclaimer")))), privacypolicy_link && /*#__PURE__*/React.createElement(Grid, {
143
154
  item: true,
144
155
  xs: 12,
145
156
  sm: 4,
@@ -148,11 +159,16 @@ function Footer({
148
159
  justifyContent: "center",
149
160
  alignItems: "center"
150
161
  }
162
+ }, /*#__PURE__*/React.createElement(Link$1, {
163
+ href: privacypolicy_link,
164
+ passHref: true,
165
+ legacyBehavior: true
151
166
  }, /*#__PURE__*/React.createElement(Link, {
152
- href: privacypolicy_link
167
+ target: "_blank"
153
168
  }, /*#__PURE__*/React.createElement(Typography, {
154
- variant: "body1"
155
- }, "Privacy Policy"))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(Grid, {
169
+ variant: "body1",
170
+ color: "#ffffff"
171
+ }, "Privacy Policy")))), Boolean(disclaimer_link || privacypolicy_link) && /*#__PURE__*/React.createElement(Grid, {
156
172
  item: true,
157
173
  xs: 12
158
174
  }, /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(Grid, {
package/dist/esm/components/NavBar.js CHANGED
@@ -7,7 +7,8 @@
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, Tabs, Tab } from '@mui/material';
10
+ import Image from 'next/image';
11
+ import { AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
11
12
  import CloseIcon from '@mui/icons-material/Close';
12
13
  import MoreVertIcon from '@mui/icons-material/MoreVert';
13
14
  import { useRouter } from 'next/navigation';
@@ -76,21 +77,15 @@ function NavBar({
76
77
  cursor: "pointer",
77
78
  alignItems: "center"
78
79
  }
79
- }, /*#__PURE__*/React.createElement(Box, {
80
- sx: {
81
- display: "flex",
82
- mr: 1
83
- }
84
- }, /*#__PURE__*/React.createElement("img", {
80
+ }, /*#__PURE__*/React.createElement(Image, {
85
81
  src: logo.url,
86
- width: logo.width || "32px",
87
- height: logo.height || "32px",
88
- alt: "site logo",
82
+ width: logo.height >= 50 ? logo.width / logo.height * 50 : logo.width,
83
+ height: logo.height,
84
+ alt: logo.alt || "site logo",
89
85
  style: {
90
- maxWidth: "60px",
91
- maxHeight: "60px"
86
+ maxHeight: "50px"
92
87
  }
93
- })), site_title !== undefined && /*#__PURE__*/React.createElement(Typography, {
88
+ }), site_title !== undefined && /*#__PURE__*/React.createElement(Typography, {
94
89
  variant: "h6",
95
90
  noWrap: true,
96
91
  component: "h1",
@@ -98,7 +93,12 @@ function NavBar({
98
93
  display: "flex",
99
94
  textDecoration: "none"
100
95
  }
101
- }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(Box, {
96
+ }, site_title))), /*#__PURE__*/React.createElement(Box, {
97
+ sx: {
98
+ display: "block",
99
+ width: "30px"
100
+ }
101
+ }), pages.length > 0 && /*#__PURE__*/React.createElement(Box, {
102
102
  sx: {
103
103
  flexGrow: 1,
104
104
  display: {
@@ -119,7 +119,31 @@ function NavBar({
119
119
  display: "block"
120
120
  }
121
121
  }, page.name);
122
- })), /*#__PURE__*/React.createElement(Link, {
122
+ })), tabs.length > 0 && /*#__PURE__*/React.createElement(Box, {
123
+ sx: {
124
+ flexGrow: 1,
125
+ display: {
126
+ xs: "none",
127
+ md: "flex"
128
+ }
129
+ }
130
+ }, /*#__PURE__*/React.createElement(Tabs, {
131
+ value: currentTab,
132
+ onChange: (event, newValue) => handleChange(event, newValue),
133
+ "aria-label": "wrapped label tabs example",
134
+ textColor: "secondary",
135
+ indicatorColor: "secondary",
136
+ variant: "fullWidth"
137
+ }, tabs.length > 0 && tabs.map(tab => {
138
+ return /*#__PURE__*/React.createElement(Tab, {
139
+ key: tab.name,
140
+ value: tab.name,
141
+ label: tab.name,
142
+ onClick: () => {
143
+ router.push(tab.url);
144
+ }
145
+ });
146
+ }))), /*#__PURE__*/React.createElement(Link, {
123
147
  href: "/",
124
148
  style: {
125
149
  textDecoration: "none",
@@ -260,23 +284,7 @@ function NavBar({
260
284
  }, /*#__PURE__*/React.createElement(ListItemText, {
261
285
  primary: page.name
262
286
  })), /*#__PURE__*/React.createElement(Divider, null));
263
- }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(Tabs, {
264
- value: currentTab,
265
- onChange: (event, newValue) => handleChange(event, newValue),
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(Tab, {
272
- key: tab.name,
273
- value: tab.name,
274
- label: tab.name,
275
- onClick: () => {
276
- router.push(tab.url);
277
- }
278
- });
279
- }))));
287
+ })))))));
280
288
  }
281
289
 
282
290
  export { NavBar as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.43",
3
+ "version": "0.1.45",
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
@@ -10,15 +10,22 @@ import {
10
10
  Grid,
11
11
  Divider,
12
12
  Stack,
13
+ Link,
13
14
  } from "@mui/material";
14
- import Link from "next/link";
15
+ import NextLink from "next/link";
16
+ import { Link as MUILink } from "@mui/material";
15
17
  import Image from "next/image";
16
18
 
17
19
  import PropTypes from "prop-types";
18
20
 
19
21
  Footer.propTypes = {
20
22
  site_title: PropTypes.string.isRequired,
21
- site_logo: PropTypes.string,
23
+ logo: PropTypes.shape({
24
+ url: PropTypes.string.isRequired,
25
+ width: PropTypes.number.isRequired,
26
+ height: PropTypes.number.isRequired,
27
+ alt: PropTypes.string,
28
+ }),
22
29
  company_name: PropTypes.string.isRequired,
23
30
  parent_company_name: PropTypes.string,
24
31
  company_address: PropTypes.shape({
@@ -43,7 +50,7 @@ Footer.propTypes = {
43
50
 
44
51
  function Footer({
45
52
  site_title,
46
- site_logo,
53
+ logo,
47
54
  company_name,
48
55
  parent_company_name,
49
56
  company_address,
@@ -69,14 +76,16 @@ function Footer({
69
76
  justifyContent: "center",
70
77
  }}
71
78
  >
72
- <Typography variant="h6">{site_title}</Typography>
73
- {site_logo && (
79
+ <Typography variant="h6" color="#ffffff">
80
+ {site_title}
81
+ </Typography>
82
+ {logo && (
74
83
  <Box>
75
84
  <Image
76
- src={site_logo}
77
- width={64}
78
- height={64}
79
- alt="site logo"
85
+ src={logo.url}
86
+ width={logo.width}
87
+ height={logo.height}
88
+ alt={logo.alt || "site logo"}
80
89
  />
81
90
  </Box>
82
91
  )}
@@ -147,9 +156,13 @@ function Footer({
147
156
  alignItems: "center",
148
157
  }}
149
158
  >
150
- <Link href={disclaimer_link}>
151
- <Typography variant="body1">Disclaimer</Typography>
152
- </Link>
159
+ <NextLink href={disclaimer_link} passHref legacyBehavior>
160
+ <MUILink target="_blank">
161
+ <Typography variant="body1" color="#ffffff">
162
+ Disclaimer
163
+ </Typography>
164
+ </MUILink>
165
+ </NextLink>
153
166
  </Grid>
154
167
  )}
155
168
  {privacypolicy_link && (
@@ -163,9 +176,13 @@ function Footer({
163
176
  alignItems: "center",
164
177
  }}
165
178
  >
166
- <Link href={privacypolicy_link}>
167
- <Typography variant="body1">Privacy Policy</Typography>
168
- </Link>
179
+ <NextLink href={privacypolicy_link} passHref legacyBehavior>
180
+ <MUILink target="_blank">
181
+ <Typography variant="body1" color="#ffffff">
182
+ Privacy Policy
183
+ </Typography>
184
+ </MUILink>
185
+ </NextLink>
169
186
  </Grid>
170
187
  )}
171
188
  {/* TODO */}
package/src/stories/Footer.stories.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import Footer from "../components/Footer";
2
2
  import React from "react";
3
3
  import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
4
+ import logo from "../../public/logo.png";
4
5
  import InstagramIcon from "@mui/icons-material/Instagram";
5
6
  import LinkedInIcon from "@mui/icons-material/LinkedIn";
6
7
  import PublicIcon from "@mui/icons-material/Public";
@@ -44,6 +45,85 @@ Orefs.args = {
44
45
  //privacypolicy_link: PropTypes.string,
45
46
  };
46
47
 
48
+ Orefs.args = {
49
+ site_title: "Orefs",
50
+ logo: {
51
+ url: thumbnail.src,
52
+ width: thumbnail.width,
53
+ height: thumbnail.height,
54
+ alt: "Logo",
55
+ },
56
+ company_name: "Orefs",
57
+ parent_company_name: "Orefs",
58
+ company_address: {
59
+ street: "Molenkade",
60
+ street_number: "8",
61
+ street_number_addition: "A",
62
+ postal_code: "1115AB",
63
+ city: "Duivendrecht",
64
+ },
65
+ CoC_number: "12345678",
66
+ VAT_number: "NL123456789B01",
67
+ company_socials: [
68
+ {
69
+ name: "Facebook",
70
+ url: "https://www.facebook.com/",
71
+ icon: <FacebookIcon />,
72
+ },
73
+ {
74
+ name: "Instagram",
75
+ url: "https://www.instagram.com/",
76
+ icon: <InstagramIcon />,
77
+ },
78
+ {
79
+ name: "LinkedIn",
80
+ url: "https://www.linkedin.com/",
81
+ icon: <LinkedInIcon />,
82
+ },
83
+ ],
84
+ };
85
+
86
+ export const AMH = Template.bind({});
87
+
88
+ AMH.args = {
89
+ site_title: "AeroMedical Holland",
90
+ logo: {
91
+ url: logo.src,
92
+ width: logo.width / 3,
93
+ height: logo.height / 3,
94
+ alt: "Logo",
95
+ },
96
+ company_name: "AeroMedical Holland",
97
+ company_address: {
98
+ street: "Straatnaam",
99
+ street_number: "33",
100
+ street_number_addition: "A",
101
+ postal_code: "3333BS",
102
+ city: "Plaatsnaam",
103
+ },
104
+ CoC_number: "12345678",
105
+ VAT_number: "NL123456789B01",
106
+ company_socials: [
107
+ {
108
+ name: "Facebook",
109
+ url: "https://www.facebook.com/",
110
+ icon: <FacebookIcon />,
111
+ },
112
+ {
113
+ name: "Instagram",
114
+ url: "https://www.instagram.com/",
115
+ icon: <InstagramIcon />,
116
+ },
117
+ {
118
+ name: "LinkedIn",
119
+ url: "https://www.linkedin.com/",
120
+ icon: <LinkedInIcon />,
121
+ },
122
+ ],
123
+ disclaimer_link: "#",
124
+ privacypolicy_link: "#",
125
+ };
126
+
47
127
  /*
48
128
  Footer.propTypes = {
49
129
  site_title: PropTypes.string.isRequired,