umwd-components 0.1.27 → 0.1.29
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.
- package/.storybook/main.js +9 -2
- package/dist/cjs/components/Footer.js +173 -0
- package/dist/cjs/index.js +2 -0
- package/dist/esm/components/Footer.js +169 -0
- package/dist/esm/index.js +1 -0
- package/package.json +2 -1
- package/src/app/page.js +3 -0
- package/src/components/Footer.js +202 -0
- package/src/index.js +1 -0
- package/src/stories/Footer.stories.js +72 -0
- package/src/stories/Navbar.stories.js +5 -6
package/.storybook/main.js
CHANGED
|
@@ -7,12 +7,19 @@ const config = {
|
|
|
7
7
|
"@storybook/addon-interactions",
|
|
8
8
|
],
|
|
9
9
|
framework: {
|
|
10
|
-
name:
|
|
10
|
+
name: "@storybook/nextjs",
|
|
11
11
|
options: {},
|
|
12
12
|
},
|
|
13
13
|
docs: {
|
|
14
14
|
autodocs: "tag",
|
|
15
15
|
},
|
|
16
|
-
staticDirs: ["..\\public"]
|
|
16
|
+
staticDirs: ["..\\public"],
|
|
17
|
+
webpackFinal: async (config, { configType }) => {
|
|
18
|
+
config.resolve.alias = {
|
|
19
|
+
...config.resolve.alias,
|
|
20
|
+
"next/navigation": "next-router-mock",
|
|
21
|
+
};
|
|
22
|
+
return config;
|
|
23
|
+
},
|
|
17
24
|
};
|
|
18
25
|
export default config;
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* UMWD-Components
|
|
3
|
+
* @copyright Jelle Paulus
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
'use strict';
|
|
8
|
+
|
|
9
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
10
|
+
|
|
11
|
+
var material = require('@mui/material');
|
|
12
|
+
var Link = require('next/link');
|
|
13
|
+
var Image = require('next/image');
|
|
14
|
+
var PropTypes = require('prop-types');
|
|
15
|
+
|
|
16
|
+
Footer.propTypes = {
|
|
17
|
+
site_title: PropTypes.string.isRequired,
|
|
18
|
+
site_logo: PropTypes.string,
|
|
19
|
+
company_name: PropTypes.string.isRequired,
|
|
20
|
+
parent_company_name: PropTypes.string,
|
|
21
|
+
company_address: PropTypes.shape({
|
|
22
|
+
street: PropTypes.string,
|
|
23
|
+
street_number: PropTypes.string,
|
|
24
|
+
street_number_addition: PropTypes.string,
|
|
25
|
+
postal_code: PropTypes.string,
|
|
26
|
+
city: PropTypes.string
|
|
27
|
+
}),
|
|
28
|
+
CoC_number: PropTypes.string.isRequired,
|
|
29
|
+
VAT_number: PropTypes.string.isRequired,
|
|
30
|
+
company_socials: PropTypes.arrayOf(PropTypes.shape({
|
|
31
|
+
name: PropTypes.string.isRequired,
|
|
32
|
+
url: PropTypes.string.isRequired,
|
|
33
|
+
icon: PropTypes.elementType
|
|
34
|
+
})),
|
|
35
|
+
disclaimer_link: PropTypes.string,
|
|
36
|
+
privacypolicy_link: PropTypes.string
|
|
37
|
+
};
|
|
38
|
+
function Footer({
|
|
39
|
+
site_title,
|
|
40
|
+
site_logo,
|
|
41
|
+
company_name,
|
|
42
|
+
parent_company_name,
|
|
43
|
+
company_address,
|
|
44
|
+
CoC_number,
|
|
45
|
+
VAT_number,
|
|
46
|
+
company_socials,
|
|
47
|
+
disclaimer_link,
|
|
48
|
+
privacypolicy_link
|
|
49
|
+
}) {
|
|
50
|
+
return /*#__PURE__*/React.createElement(material.AppBar, {
|
|
51
|
+
position: "relative"
|
|
52
|
+
}, /*#__PURE__*/React.createElement(material.Container, {
|
|
53
|
+
maxWidth: "xl"
|
|
54
|
+
}, /*#__PURE__*/React.createElement(material.Toolbar, {
|
|
55
|
+
disableGutters: true
|
|
56
|
+
}, /*#__PURE__*/React.createElement(material.Grid, {
|
|
57
|
+
container: true,
|
|
58
|
+
sx: {
|
|
59
|
+
p: 2
|
|
60
|
+
},
|
|
61
|
+
spacing: 2
|
|
62
|
+
}, /*#__PURE__*/React.createElement(material.Grid, {
|
|
63
|
+
item: true,
|
|
64
|
+
xs: 12,
|
|
65
|
+
sm: 4,
|
|
66
|
+
align: "center"
|
|
67
|
+
}, /*#__PURE__*/React.createElement(Link, {
|
|
68
|
+
href: "/"
|
|
69
|
+
}, /*#__PURE__*/React.createElement(material.Box, {
|
|
70
|
+
sx: {
|
|
71
|
+
display: {
|
|
72
|
+
xs: "none",
|
|
73
|
+
md: "flex"
|
|
74
|
+
},
|
|
75
|
+
cursor: "pointer",
|
|
76
|
+
flexDirection: "column",
|
|
77
|
+
alignItems: "center",
|
|
78
|
+
justifyContent: "center"
|
|
79
|
+
}
|
|
80
|
+
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
81
|
+
variant: "h6"
|
|
82
|
+
}, site_title), site_logo && /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Image, {
|
|
83
|
+
src: site_logo,
|
|
84
|
+
width: 64,
|
|
85
|
+
height: 64,
|
|
86
|
+
alt: "site logo"
|
|
87
|
+
}))))), /*#__PURE__*/React.createElement(material.Grid, {
|
|
88
|
+
item: true,
|
|
89
|
+
xs: 12,
|
|
90
|
+
sm: 4,
|
|
91
|
+
align: "center"
|
|
92
|
+
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
93
|
+
variant: "h6"
|
|
94
|
+
}, "Contact Information"), /*#__PURE__*/React.createElement(material.Typography, {
|
|
95
|
+
variant: "h6"
|
|
96
|
+
}, company_name), parent_company_name && /*#__PURE__*/React.createElement(material.Typography, {
|
|
97
|
+
variant: "h6"
|
|
98
|
+
}, "By ", parent_company_name), company_address && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
|
|
99
|
+
variant: "body1"
|
|
100
|
+
}, company_address.street, " ", company_address.street_number, " ", company_address.street_number_addition && company_address.street_number_addition), /*#__PURE__*/React.createElement(material.Typography, {
|
|
101
|
+
variant: "body1"
|
|
102
|
+
}, company_address.postal_code, " ", company_address.city)), /*#__PURE__*/React.createElement(material.Typography, {
|
|
103
|
+
variant: "body1"
|
|
104
|
+
}, "CoC: ", CoC_number), /*#__PURE__*/React.createElement(material.Typography, {
|
|
105
|
+
variant: "body1"
|
|
106
|
+
}, "VAT: ", VAT_number), /*#__PURE__*/React.createElement(material.Typography, {
|
|
107
|
+
variant: "body1"
|
|
108
|
+
}), /*#__PURE__*/React.createElement(material.Typography, {
|
|
109
|
+
variant: "body1"
|
|
110
|
+
})), /*#__PURE__*/React.createElement(material.Grid, {
|
|
111
|
+
item: true,
|
|
112
|
+
xs: 12,
|
|
113
|
+
sm: 4,
|
|
114
|
+
align: "center"
|
|
115
|
+
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
116
|
+
variant: "h6"
|
|
117
|
+
}, "Socials"), company_socials && /*#__PURE__*/React.createElement(material.Stack, {
|
|
118
|
+
spacing: 2,
|
|
119
|
+
sx: {
|
|
120
|
+
width: "min-content",
|
|
121
|
+
color: "primary.contrastText"
|
|
122
|
+
}
|
|
123
|
+
}, company_socials.map((company_social, index) => {
|
|
124
|
+
if (company_social.url === undefined || company_social.icon === undefined) {
|
|
125
|
+
return /*#__PURE__*/React.createElement(material.IconButton, {
|
|
126
|
+
color: "inherit",
|
|
127
|
+
href: company_social.url
|
|
128
|
+
}, company_social.icon);
|
|
129
|
+
}
|
|
130
|
+
}))), /*#__PURE__*/React.createElement(material.Grid, {
|
|
131
|
+
item: true,
|
|
132
|
+
xs: 12
|
|
133
|
+
}, /*#__PURE__*/React.createElement(material.Divider, null)), disclaimer_link && /*#__PURE__*/React.createElement(material.Grid, {
|
|
134
|
+
item: true,
|
|
135
|
+
xs: 12,
|
|
136
|
+
sm: 4,
|
|
137
|
+
sx: {
|
|
138
|
+
display: "flex",
|
|
139
|
+
justifyContent: "center",
|
|
140
|
+
alignItems: "center"
|
|
141
|
+
}
|
|
142
|
+
}, /*#__PURE__*/React.createElement(Link, {
|
|
143
|
+
href: disclaimer_link
|
|
144
|
+
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
145
|
+
variant: "body1"
|
|
146
|
+
}, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(material.Grid, {
|
|
147
|
+
item: true,
|
|
148
|
+
xs: 12,
|
|
149
|
+
sm: 4,
|
|
150
|
+
sx: {
|
|
151
|
+
display: "flex",
|
|
152
|
+
justifyContent: "center",
|
|
153
|
+
alignItems: "center"
|
|
154
|
+
}
|
|
155
|
+
}, /*#__PURE__*/React.createElement(Link, {
|
|
156
|
+
href: privacypolicy_link
|
|
157
|
+
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
158
|
+
variant: "body1"
|
|
159
|
+
}, "Privacy Policy"))), /*#__PURE__*/React.createElement(material.Grid, {
|
|
160
|
+
item: true,
|
|
161
|
+
xs: 12
|
|
162
|
+
}, /*#__PURE__*/React.createElement(material.Divider, null)), /*#__PURE__*/React.createElement(material.Grid, {
|
|
163
|
+
item: true,
|
|
164
|
+
xs: 12,
|
|
165
|
+
sx: {
|
|
166
|
+
display: "flex",
|
|
167
|
+
justifyContent: "center",
|
|
168
|
+
alignItems: "center"
|
|
169
|
+
}
|
|
170
|
+
}, /*#__PURE__*/React.createElement(material.Typography, null, "Made possible by Atelier Paulus"))))));
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
exports.default = Footer;
|
package/dist/cjs/index.js
CHANGED
|
@@ -13,6 +13,7 @@ var Stack = require('./components/Stack.js');
|
|
|
13
13
|
var NavBar = require('./components/NavBar.js');
|
|
14
14
|
var TextImageBlock = require('./components/TextImageBlock.js');
|
|
15
15
|
var Page = require('./components/Page.js');
|
|
16
|
+
var Footer = require('./components/Footer.js');
|
|
16
17
|
|
|
17
18
|
|
|
18
19
|
|
|
@@ -23,3 +24,4 @@ exports.Stack = Stack.default;
|
|
|
23
24
|
exports.NavBar = NavBar.default;
|
|
24
25
|
exports.TextImageBlock = TextImageBlock.default;
|
|
25
26
|
exports.Page = Page.default;
|
|
27
|
+
exports.Footer = Footer.default;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* UMWD-Components
|
|
3
|
+
* @copyright Jelle Paulus
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { AppBar, Container, Toolbar, Grid, Box, Typography, Stack, IconButton, Divider } from '@mui/material';
|
|
8
|
+
import Link from 'next/link';
|
|
9
|
+
import Image from 'next/image';
|
|
10
|
+
import PropTypes from 'prop-types';
|
|
11
|
+
|
|
12
|
+
Footer.propTypes = {
|
|
13
|
+
site_title: PropTypes.string.isRequired,
|
|
14
|
+
site_logo: PropTypes.string,
|
|
15
|
+
company_name: PropTypes.string.isRequired,
|
|
16
|
+
parent_company_name: PropTypes.string,
|
|
17
|
+
company_address: PropTypes.shape({
|
|
18
|
+
street: PropTypes.string,
|
|
19
|
+
street_number: PropTypes.string,
|
|
20
|
+
street_number_addition: PropTypes.string,
|
|
21
|
+
postal_code: PropTypes.string,
|
|
22
|
+
city: PropTypes.string
|
|
23
|
+
}),
|
|
24
|
+
CoC_number: PropTypes.string.isRequired,
|
|
25
|
+
VAT_number: PropTypes.string.isRequired,
|
|
26
|
+
company_socials: PropTypes.arrayOf(PropTypes.shape({
|
|
27
|
+
name: PropTypes.string.isRequired,
|
|
28
|
+
url: PropTypes.string.isRequired,
|
|
29
|
+
icon: PropTypes.elementType
|
|
30
|
+
})),
|
|
31
|
+
disclaimer_link: PropTypes.string,
|
|
32
|
+
privacypolicy_link: PropTypes.string
|
|
33
|
+
};
|
|
34
|
+
function Footer({
|
|
35
|
+
site_title,
|
|
36
|
+
site_logo,
|
|
37
|
+
company_name,
|
|
38
|
+
parent_company_name,
|
|
39
|
+
company_address,
|
|
40
|
+
CoC_number,
|
|
41
|
+
VAT_number,
|
|
42
|
+
company_socials,
|
|
43
|
+
disclaimer_link,
|
|
44
|
+
privacypolicy_link
|
|
45
|
+
}) {
|
|
46
|
+
return /*#__PURE__*/React.createElement(AppBar, {
|
|
47
|
+
position: "relative"
|
|
48
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
49
|
+
maxWidth: "xl"
|
|
50
|
+
}, /*#__PURE__*/React.createElement(Toolbar, {
|
|
51
|
+
disableGutters: true
|
|
52
|
+
}, /*#__PURE__*/React.createElement(Grid, {
|
|
53
|
+
container: true,
|
|
54
|
+
sx: {
|
|
55
|
+
p: 2
|
|
56
|
+
},
|
|
57
|
+
spacing: 2
|
|
58
|
+
}, /*#__PURE__*/React.createElement(Grid, {
|
|
59
|
+
item: true,
|
|
60
|
+
xs: 12,
|
|
61
|
+
sm: 4,
|
|
62
|
+
align: "center"
|
|
63
|
+
}, /*#__PURE__*/React.createElement(Link, {
|
|
64
|
+
href: "/"
|
|
65
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
66
|
+
sx: {
|
|
67
|
+
display: {
|
|
68
|
+
xs: "none",
|
|
69
|
+
md: "flex"
|
|
70
|
+
},
|
|
71
|
+
cursor: "pointer",
|
|
72
|
+
flexDirection: "column",
|
|
73
|
+
alignItems: "center",
|
|
74
|
+
justifyContent: "center"
|
|
75
|
+
}
|
|
76
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
77
|
+
variant: "h6"
|
|
78
|
+
}, site_title), site_logo && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Image, {
|
|
79
|
+
src: site_logo,
|
|
80
|
+
width: 64,
|
|
81
|
+
height: 64,
|
|
82
|
+
alt: "site logo"
|
|
83
|
+
}))))), /*#__PURE__*/React.createElement(Grid, {
|
|
84
|
+
item: true,
|
|
85
|
+
xs: 12,
|
|
86
|
+
sm: 4,
|
|
87
|
+
align: "center"
|
|
88
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
89
|
+
variant: "h6"
|
|
90
|
+
}, "Contact Information"), /*#__PURE__*/React.createElement(Typography, {
|
|
91
|
+
variant: "h6"
|
|
92
|
+
}, company_name), parent_company_name && /*#__PURE__*/React.createElement(Typography, {
|
|
93
|
+
variant: "h6"
|
|
94
|
+
}, "By ", parent_company_name), company_address && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
|
|
95
|
+
variant: "body1"
|
|
96
|
+
}, company_address.street, " ", company_address.street_number, " ", company_address.street_number_addition && company_address.street_number_addition), /*#__PURE__*/React.createElement(Typography, {
|
|
97
|
+
variant: "body1"
|
|
98
|
+
}, company_address.postal_code, " ", company_address.city)), /*#__PURE__*/React.createElement(Typography, {
|
|
99
|
+
variant: "body1"
|
|
100
|
+
}, "CoC: ", CoC_number), /*#__PURE__*/React.createElement(Typography, {
|
|
101
|
+
variant: "body1"
|
|
102
|
+
}, "VAT: ", VAT_number), /*#__PURE__*/React.createElement(Typography, {
|
|
103
|
+
variant: "body1"
|
|
104
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
105
|
+
variant: "body1"
|
|
106
|
+
})), /*#__PURE__*/React.createElement(Grid, {
|
|
107
|
+
item: true,
|
|
108
|
+
xs: 12,
|
|
109
|
+
sm: 4,
|
|
110
|
+
align: "center"
|
|
111
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
112
|
+
variant: "h6"
|
|
113
|
+
}, "Socials"), company_socials && /*#__PURE__*/React.createElement(Stack, {
|
|
114
|
+
spacing: 2,
|
|
115
|
+
sx: {
|
|
116
|
+
width: "min-content",
|
|
117
|
+
color: "primary.contrastText"
|
|
118
|
+
}
|
|
119
|
+
}, company_socials.map((company_social, index) => {
|
|
120
|
+
if (company_social.url === undefined || company_social.icon === undefined) {
|
|
121
|
+
return /*#__PURE__*/React.createElement(IconButton, {
|
|
122
|
+
color: "inherit",
|
|
123
|
+
href: company_social.url
|
|
124
|
+
}, company_social.icon);
|
|
125
|
+
}
|
|
126
|
+
}))), /*#__PURE__*/React.createElement(Grid, {
|
|
127
|
+
item: true,
|
|
128
|
+
xs: 12
|
|
129
|
+
}, /*#__PURE__*/React.createElement(Divider, null)), disclaimer_link && /*#__PURE__*/React.createElement(Grid, {
|
|
130
|
+
item: true,
|
|
131
|
+
xs: 12,
|
|
132
|
+
sm: 4,
|
|
133
|
+
sx: {
|
|
134
|
+
display: "flex",
|
|
135
|
+
justifyContent: "center",
|
|
136
|
+
alignItems: "center"
|
|
137
|
+
}
|
|
138
|
+
}, /*#__PURE__*/React.createElement(Link, {
|
|
139
|
+
href: disclaimer_link
|
|
140
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
141
|
+
variant: "body1"
|
|
142
|
+
}, "Disclaimer"))), privacypolicy_link && /*#__PURE__*/React.createElement(Grid, {
|
|
143
|
+
item: true,
|
|
144
|
+
xs: 12,
|
|
145
|
+
sm: 4,
|
|
146
|
+
sx: {
|
|
147
|
+
display: "flex",
|
|
148
|
+
justifyContent: "center",
|
|
149
|
+
alignItems: "center"
|
|
150
|
+
}
|
|
151
|
+
}, /*#__PURE__*/React.createElement(Link, {
|
|
152
|
+
href: privacypolicy_link
|
|
153
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
154
|
+
variant: "body1"
|
|
155
|
+
}, "Privacy Policy"))), /*#__PURE__*/React.createElement(Grid, {
|
|
156
|
+
item: true,
|
|
157
|
+
xs: 12
|
|
158
|
+
}, /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(Grid, {
|
|
159
|
+
item: true,
|
|
160
|
+
xs: 12,
|
|
161
|
+
sx: {
|
|
162
|
+
display: "flex",
|
|
163
|
+
justifyContent: "center",
|
|
164
|
+
alignItems: "center"
|
|
165
|
+
}
|
|
166
|
+
}, /*#__PURE__*/React.createElement(Typography, null, "Made possible by Atelier Paulus"))))));
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
export { Footer as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -11,3 +11,4 @@ export { default as Stack } from './components/Stack.js';
|
|
|
11
11
|
export { default as NavBar } from './components/NavBar.js';
|
|
12
12
|
export { default as TextImageBlock } from './components/TextImageBlock.js';
|
|
13
13
|
export { default as Page } from './components/Page.js';
|
|
14
|
+
export { default as Footer } from './components/Footer.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "umwd-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.29",
|
|
4
4
|
"description": "UMWD Component library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
"react-dom": "^18.2.0"
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
+
"next-router-mock": "^0.9.12",
|
|
78
79
|
"react": "^18.2.0",
|
|
79
80
|
"react-dnd": "^16.0.1",
|
|
80
81
|
"react-dnd-html5-backend": "^16.0.1"
|
package/src/app/page.js
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import {
|
|
2
|
+
AppBar,
|
|
3
|
+
Container,
|
|
4
|
+
Toolbar,
|
|
5
|
+
Typography,
|
|
6
|
+
Box,
|
|
7
|
+
IconButton,
|
|
8
|
+
Grid,
|
|
9
|
+
Divider,
|
|
10
|
+
Stack,
|
|
11
|
+
} from "@mui/material";
|
|
12
|
+
import Link from "next/link";
|
|
13
|
+
import Image from "next/image";
|
|
14
|
+
|
|
15
|
+
import PropTypes from "prop-types";
|
|
16
|
+
|
|
17
|
+
Footer.propTypes = {
|
|
18
|
+
site_title: PropTypes.string.isRequired,
|
|
19
|
+
site_logo: PropTypes.string,
|
|
20
|
+
company_name: PropTypes.string.isRequired,
|
|
21
|
+
parent_company_name: PropTypes.string,
|
|
22
|
+
company_address: PropTypes.shape({
|
|
23
|
+
street: PropTypes.string,
|
|
24
|
+
street_number: PropTypes.string,
|
|
25
|
+
street_number_addition: PropTypes.string,
|
|
26
|
+
postal_code: PropTypes.string,
|
|
27
|
+
city: PropTypes.string,
|
|
28
|
+
}),
|
|
29
|
+
CoC_number: PropTypes.string.isRequired,
|
|
30
|
+
VAT_number: PropTypes.string.isRequired,
|
|
31
|
+
company_socials: PropTypes.arrayOf(
|
|
32
|
+
PropTypes.shape({
|
|
33
|
+
name: PropTypes.string.isRequired,
|
|
34
|
+
url: PropTypes.string.isRequired,
|
|
35
|
+
icon: PropTypes.elementType,
|
|
36
|
+
})
|
|
37
|
+
),
|
|
38
|
+
disclaimer_link: PropTypes.string,
|
|
39
|
+
privacypolicy_link: PropTypes.string,
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
function Footer({
|
|
43
|
+
site_title,
|
|
44
|
+
site_logo,
|
|
45
|
+
company_name,
|
|
46
|
+
parent_company_name,
|
|
47
|
+
company_address,
|
|
48
|
+
CoC_number,
|
|
49
|
+
VAT_number,
|
|
50
|
+
company_socials,
|
|
51
|
+
disclaimer_link,
|
|
52
|
+
privacypolicy_link,
|
|
53
|
+
}) {
|
|
54
|
+
return (
|
|
55
|
+
<AppBar position="relative">
|
|
56
|
+
<Container maxWidth="xl">
|
|
57
|
+
<Toolbar disableGutters>
|
|
58
|
+
<Grid container sx={{ p: 2 }} spacing={2}>
|
|
59
|
+
<Grid item xs={12} sm={4} align="center">
|
|
60
|
+
<Link href="/">
|
|
61
|
+
<Box
|
|
62
|
+
sx={{
|
|
63
|
+
display: { xs: "none", md: "flex" },
|
|
64
|
+
cursor: "pointer",
|
|
65
|
+
flexDirection: "column",
|
|
66
|
+
alignItems: "center",
|
|
67
|
+
justifyContent: "center",
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
<Typography variant="h6">{site_title}</Typography>
|
|
71
|
+
{site_logo && (
|
|
72
|
+
<Box>
|
|
73
|
+
<Image
|
|
74
|
+
src={site_logo}
|
|
75
|
+
width={64}
|
|
76
|
+
height={64}
|
|
77
|
+
alt="site logo"
|
|
78
|
+
/>
|
|
79
|
+
</Box>
|
|
80
|
+
)}
|
|
81
|
+
</Box>
|
|
82
|
+
</Link>
|
|
83
|
+
</Grid>
|
|
84
|
+
<Grid item xs={12} sm={4} align="center">
|
|
85
|
+
<Typography variant="h6">Contact Information</Typography>
|
|
86
|
+
<Typography variant="h6">{company_name}</Typography>
|
|
87
|
+
{parent_company_name && (
|
|
88
|
+
<Typography variant="h6">By {parent_company_name}</Typography>
|
|
89
|
+
)}
|
|
90
|
+
{company_address && (
|
|
91
|
+
<>
|
|
92
|
+
<Typography variant="body1">
|
|
93
|
+
{company_address.street} {company_address.street_number}{" "}
|
|
94
|
+
{company_address.street_number_addition &&
|
|
95
|
+
company_address.street_number_addition}
|
|
96
|
+
</Typography>
|
|
97
|
+
|
|
98
|
+
<Typography variant="body1">
|
|
99
|
+
{company_address.postal_code} {company_address.city}
|
|
100
|
+
</Typography>
|
|
101
|
+
</>
|
|
102
|
+
)}
|
|
103
|
+
|
|
104
|
+
<Typography variant="body1">CoC: {CoC_number}</Typography>
|
|
105
|
+
<Typography variant="body1">VAT: {VAT_number}</Typography>
|
|
106
|
+
|
|
107
|
+
<Typography variant="body1"></Typography>
|
|
108
|
+
<Typography variant="body1"></Typography>
|
|
109
|
+
</Grid>
|
|
110
|
+
<Grid item xs={12} sm={4} align="center">
|
|
111
|
+
<Typography variant="h6">Socials</Typography>
|
|
112
|
+
{company_socials && (
|
|
113
|
+
<Stack
|
|
114
|
+
spacing={2}
|
|
115
|
+
sx={{ width: "min-content", color: "primary.contrastText" }}
|
|
116
|
+
>
|
|
117
|
+
{company_socials.map((company_social, index) => {
|
|
118
|
+
if (
|
|
119
|
+
company_social.url === undefined ||
|
|
120
|
+
company_social.icon === undefined
|
|
121
|
+
) {
|
|
122
|
+
return (
|
|
123
|
+
<IconButton color="inherit" href={company_social.url}>
|
|
124
|
+
{company_social.icon}
|
|
125
|
+
</IconButton>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
})}
|
|
129
|
+
</Stack>
|
|
130
|
+
)}
|
|
131
|
+
</Grid>
|
|
132
|
+
<Grid item xs={12}>
|
|
133
|
+
<Divider />
|
|
134
|
+
</Grid>
|
|
135
|
+
{/* important links */}
|
|
136
|
+
{disclaimer_link && (
|
|
137
|
+
<Grid
|
|
138
|
+
item
|
|
139
|
+
xs={12}
|
|
140
|
+
sm={4}
|
|
141
|
+
sx={{
|
|
142
|
+
display: "flex",
|
|
143
|
+
justifyContent: "center",
|
|
144
|
+
alignItems: "center",
|
|
145
|
+
}}
|
|
146
|
+
>
|
|
147
|
+
<Link href={disclaimer_link}>
|
|
148
|
+
<Typography variant="body1">Disclaimer</Typography>
|
|
149
|
+
</Link>
|
|
150
|
+
</Grid>
|
|
151
|
+
)}
|
|
152
|
+
{privacypolicy_link && (
|
|
153
|
+
<Grid
|
|
154
|
+
item
|
|
155
|
+
xs={12}
|
|
156
|
+
sm={4}
|
|
157
|
+
sx={{
|
|
158
|
+
display: "flex",
|
|
159
|
+
justifyContent: "center",
|
|
160
|
+
alignItems: "center",
|
|
161
|
+
}}
|
|
162
|
+
>
|
|
163
|
+
<Link href={privacypolicy_link}>
|
|
164
|
+
<Typography variant="body1">Privacy Policy</Typography>
|
|
165
|
+
</Link>
|
|
166
|
+
</Grid>
|
|
167
|
+
)}
|
|
168
|
+
{/* TODO */}
|
|
169
|
+
{/* <Grid
|
|
170
|
+
item
|
|
171
|
+
xs={12}
|
|
172
|
+
sm={4}
|
|
173
|
+
sx={{
|
|
174
|
+
display: "flex",
|
|
175
|
+
justifyContent: "center",
|
|
176
|
+
alignItems: "center",
|
|
177
|
+
}}
|
|
178
|
+
>
|
|
179
|
+
<CookieConsentButton />
|
|
180
|
+
</Grid> */}
|
|
181
|
+
<Grid item xs={12}>
|
|
182
|
+
<Divider />
|
|
183
|
+
</Grid>
|
|
184
|
+
<Grid
|
|
185
|
+
item
|
|
186
|
+
xs={12}
|
|
187
|
+
sx={{
|
|
188
|
+
display: "flex",
|
|
189
|
+
justifyContent: "center",
|
|
190
|
+
alignItems: "center",
|
|
191
|
+
}}
|
|
192
|
+
>
|
|
193
|
+
<Typography>Made possible by Atelier Paulus</Typography>
|
|
194
|
+
</Grid>
|
|
195
|
+
</Grid>
|
|
196
|
+
</Toolbar>
|
|
197
|
+
</Container>
|
|
198
|
+
</AppBar>
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
export default Footer;
|
package/src/index.js
CHANGED
|
@@ -6,3 +6,4 @@ export { default as Stack } from "./components/Stack";
|
|
|
6
6
|
export { default as NavBar } from "./components/NavBar";
|
|
7
7
|
export { default as TextImageBlock } from "./components/TextImageBlock";
|
|
8
8
|
export { default as Page } from "./components/Page";
|
|
9
|
+
export { default as Footer } from "./components/Footer";
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import Footer from "../components/Footer";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
|
|
4
|
+
import InstagramIcon from "@mui/icons-material/Instagram";
|
|
5
|
+
import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
|
6
|
+
import PublicIcon from "@mui/icons-material/Public";
|
|
7
|
+
import TwitterIcon from "@mui/icons-material/Twitter";
|
|
8
|
+
import FacebookIcon from "@mui/icons-material/Facebook";
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: "UMWD/Footer",
|
|
12
|
+
component: Footer,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const Template = ({ ...args }) => {
|
|
16
|
+
console.log(thumbnail);
|
|
17
|
+
return <Footer {...args} />;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const Orefs = Template.bind({});
|
|
21
|
+
|
|
22
|
+
Orefs.args = {
|
|
23
|
+
site_title: "Orefs",
|
|
24
|
+
site_logo: thumbnail.src,
|
|
25
|
+
company_name: "Orefs",
|
|
26
|
+
parent_company_name: "Orefs",
|
|
27
|
+
company_address: {
|
|
28
|
+
street: "Molenkade",
|
|
29
|
+
street_number: "8",
|
|
30
|
+
street_number_addition: "A",
|
|
31
|
+
postal_code: "1115AB",
|
|
32
|
+
city: "Duivendrecht",
|
|
33
|
+
},
|
|
34
|
+
CoC_number: "12345678",
|
|
35
|
+
VAT_number: "NL123456789B01",
|
|
36
|
+
company_socials: [
|
|
37
|
+
{
|
|
38
|
+
name: "Facebook",
|
|
39
|
+
url: "https://www.facebook.com/",
|
|
40
|
+
icon: <FacebookIcon />,
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
//disclaimer_link: PropTypes.string,
|
|
44
|
+
//privacypolicy_link: PropTypes.string,
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
/*
|
|
48
|
+
Footer.propTypes = {
|
|
49
|
+
site_title: PropTypes.string.isRequired,
|
|
50
|
+
site_logo: PropTypes.string,
|
|
51
|
+
company_name: PropTypes.string.isRequired,
|
|
52
|
+
parent_company_name: PropTypes.string,
|
|
53
|
+
company_address: PropTypes.shape({
|
|
54
|
+
street: PropTypes.string,
|
|
55
|
+
street_number: PropTypes.string,
|
|
56
|
+
street_number_addition: PropTypes.string,
|
|
57
|
+
postal_code: PropTypes.string,
|
|
58
|
+
city: PropTypes.string,
|
|
59
|
+
}),
|
|
60
|
+
CoC_number: PropTypes.string.isRequired,
|
|
61
|
+
VAT_number: PropTypes.string.isRequired,
|
|
62
|
+
company_socials: PropTypes.arrayOf(
|
|
63
|
+
PropTypes.shape({
|
|
64
|
+
name: PropTypes.string.isRequired,
|
|
65
|
+
url: PropTypes.string.isRequired,
|
|
66
|
+
icon: PropTypes.elementType,
|
|
67
|
+
})
|
|
68
|
+
),
|
|
69
|
+
disclaimer_link: PropTypes.string,
|
|
70
|
+
privacypolicy_link: PropTypes.string,
|
|
71
|
+
};
|
|
72
|
+
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import NavBar from "../components/NavBar";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import thumbnail from "../../public/placeholders/thumbnail_100X100.png"
|
|
3
|
+
import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
6
|
title: "UMWD/NavBar",
|
|
@@ -9,10 +9,9 @@ export default {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
const Template = ({ ...args }) => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
)};
|
|
12
|
+
console.log(thumbnail);
|
|
13
|
+
return <NavBar {...args} />;
|
|
14
|
+
};
|
|
16
15
|
|
|
17
16
|
export const Orefs = Template.bind({});
|
|
18
17
|
|
|
@@ -35,5 +34,5 @@ Orefs.args = {
|
|
|
35
34
|
link: "/contact",
|
|
36
35
|
action: () => console.log("Contact"),
|
|
37
36
|
},
|
|
38
|
-
]
|
|
37
|
+
],
|
|
39
38
|
};
|