umwd-components 0.1.44 → 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 (5) hide show
  1. package/dist/cjs/components/Footer.js +31 -15
  2. package/dist/esm/components/Footer.js +32 -16
  3. package/package.json +1 -1
  4. package/src/components/Footer.js +32 -15
  5. 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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.44",
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,