umwd-components 0.1.44 → 0.1.46

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 (12) hide show
  1. package/.storybook/main.js +1 -0
  2. package/.storybook/preview.js +22 -0
  3. package/dist/cjs/components/Footer.js +31 -15
  4. package/dist/cjs/components/NavBar.js +16 -4
  5. package/dist/esm/components/Footer.js +32 -16
  6. package/dist/esm/components/NavBar.js +16 -4
  7. package/package.json +4 -1
  8. package/src/components/Footer.js +32 -15
  9. package/src/components/NavBar.js +27 -2
  10. package/src/stories/Footer.stories.js +80 -0
  11. package/src/stories/Navbar.stories.js +4 -0
  12. package/src/styles/themes.js +203 -0
package/.storybook/main.js CHANGED
@@ -5,6 +5,7 @@ const config = {
5
5
  "@storybook/addon-essentials",
6
6
  "@storybook/addon-onboarding",
7
7
  "@storybook/addon-interactions",
8
+ "@storybook/addon-themes",
8
9
  ],
9
10
  framework: {
10
11
  name: "@storybook/nextjs",
package/.storybook/preview.js CHANGED
@@ -1,4 +1,14 @@
1
1
  /** @type { import('@storybook/react').Preview } */
2
+ import "@fontsource/roboto/300.css";
3
+ import "@fontsource/roboto/400.css";
4
+ import "@fontsource/roboto/500.css";
5
+ import "@fontsource/roboto/700.css";
6
+ import "@fontsource/material-icons";
7
+
8
+ import { CssBaseline, ThemeProvider } from "@mui/material";
9
+ import { withThemeFromJSXProvider } from "@storybook/addon-themes";
10
+ import { lightTheme, darkTheme } from "../src/styles/themes.js";
11
+
2
12
  const preview = {
3
13
  parameters: {
4
14
  actions: { argTypesRegex: "^on[A-Z].*" },
@@ -12,4 +22,16 @@ const preview = {
12
22
  },
13
23
  };
14
24
 
25
+ export const decorators = [
26
+ withThemeFromJSXProvider({
27
+ themes: {
28
+ light: lightTheme,
29
+ dark: darkTheme,
30
+ },
31
+ defaultTheme: "light",
32
+ Provider: ThemeProvider,
33
+ GlobalStyles: CssBaseline,
34
+ }),
35
+ ];
36
+
15
37
  export default preview;
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
@@ -17,6 +17,7 @@ var CloseIcon = require('@mui/icons-material/Close');
17
17
  var MoreVertIcon = require('@mui/icons-material/MoreVert');
18
18
  var navigation = require('next/navigation');
19
19
  var PropTypes = require('prop-types');
20
+ var styles = require('@mui/material/styles');
20
21
 
21
22
  NavBar.propTypes = {
22
23
  site_title: PropTypes.string,
@@ -33,17 +34,20 @@ NavBar.propTypes = {
33
34
  tabs: PropTypes.arrayOf(PropTypes.shape({
34
35
  name: PropTypes.string.isRequired,
35
36
  url: PropTypes.string.isRequired
36
- }))
37
+ })),
38
+ prominent: PropTypes.bool
37
39
  };
38
40
  function NavBar({
39
41
  site_title,
40
42
  logo,
41
43
  pages = [],
42
44
  tabs = [],
43
- maxWidth = "xl"
45
+ maxWidth = "xl",
46
+ prominent = false
44
47
  }) {
45
48
  // handleMobileMenu
46
49
 
50
+ const theme = styles.useTheme();
47
51
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
48
52
  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
49
53
  const handleOpenMobileMenu = e => {
@@ -63,9 +67,17 @@ function NavBar({
63
67
  maxWidth: maxWidth
64
68
  }, /*#__PURE__*/React.createElement(material.Toolbar, {
65
69
  disableGutters: true,
66
- sx: {
70
+ sx: [{
67
71
  py: 1
68
- }
72
+ }, prominent && {
73
+ alignItems: "flex-start",
74
+ paddingTop: theme.spacing(4),
75
+ paddingBottom: theme.spacing(4),
76
+ // Override media queries injected by theme.mixins.toolbar
77
+ "@media all": {
78
+ minHeight: 128
79
+ }
80
+ }]
69
81
  }, /*#__PURE__*/React.createElement(Link, {
70
82
  href: "/",
71
83
  style: {
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
@@ -13,6 +13,7 @@ import CloseIcon from '@mui/icons-material/Close';
13
13
  import MoreVertIcon from '@mui/icons-material/MoreVert';
14
14
  import { useRouter } from 'next/navigation';
15
15
  import PropTypes from 'prop-types';
16
+ import { useTheme } from '@mui/material/styles';
16
17
 
17
18
  NavBar.propTypes = {
18
19
  site_title: PropTypes.string,
@@ -29,17 +30,20 @@ NavBar.propTypes = {
29
30
  tabs: PropTypes.arrayOf(PropTypes.shape({
30
31
  name: PropTypes.string.isRequired,
31
32
  url: PropTypes.string.isRequired
32
- }))
33
+ })),
34
+ prominent: PropTypes.bool
33
35
  };
34
36
  function NavBar({
35
37
  site_title,
36
38
  logo,
37
39
  pages = [],
38
40
  tabs = [],
39
- maxWidth = "xl"
41
+ maxWidth = "xl",
42
+ prominent = false
40
43
  }) {
41
44
  // handleMobileMenu
42
45
 
46
+ const theme = useTheme();
43
47
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
44
48
  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
45
49
  const handleOpenMobileMenu = e => {
@@ -59,9 +63,17 @@ function NavBar({
59
63
  maxWidth: maxWidth
60
64
  }, /*#__PURE__*/React.createElement(Toolbar, {
61
65
  disableGutters: true,
62
- sx: {
66
+ sx: [{
63
67
  py: 1
64
- }
68
+ }, prominent && {
69
+ alignItems: "flex-start",
70
+ paddingTop: theme.spacing(4),
71
+ paddingBottom: theme.spacing(4),
72
+ // Override media queries injected by theme.mixins.toolbar
73
+ "@media all": {
74
+ minHeight: 128
75
+ }
76
+ }]
65
77
  }, /*#__PURE__*/React.createElement(Link, {
66
78
  href: "/",
67
79
  style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.44",
3
+ "version": "0.1.46",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -44,6 +44,7 @@
44
44
  "@storybook/addon-interactions": "^7.6.7",
45
45
  "@storybook/addon-links": "^7.6.7",
46
46
  "@storybook/addon-onboarding": "^1.0.10",
47
+ "@storybook/addon-themes": "^7.6.17",
47
48
  "@storybook/blocks": "^7.6.7",
48
49
  "@storybook/nextjs": "^7.6.16",
49
50
  "@storybook/react": "^7.6.7",
@@ -76,6 +77,8 @@
76
77
  "validator": "^13.11.0"
77
78
  },
78
79
  "dependencies": {
80
+ "@fontsource/material-icons": "^5.0.15",
81
+ "@fontsource/roboto": "^5.0.12",
79
82
  "next-router-mock": "^0.9.12",
80
83
  "react": "^18.2.0",
81
84
  "react-dnd": "^16.0.1",
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/components/NavBar.js CHANGED
@@ -25,6 +25,7 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
25
25
  import { useRouter } from "next/navigation";
26
26
 
27
27
  import PropTypes from "prop-types";
28
+ import { useTheme } from "@mui/material/styles";
28
29
 
29
30
  NavBar.propTypes = {
30
31
  site_title: PropTypes.string,
@@ -46,11 +47,21 @@ NavBar.propTypes = {
46
47
  url: PropTypes.string.isRequired,
47
48
  })
48
49
  ),
50
+ prominent: PropTypes.bool,
49
51
  };
50
52
 
51
- function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
53
+ function NavBar({
54
+ site_title,
55
+ logo,
56
+ pages = [],
57
+ tabs = [],
58
+ maxWidth = "xl",
59
+ prominent = false,
60
+ }) {
52
61
  // handleMobileMenu
53
62
 
63
+ const theme = useTheme();
64
+
54
65
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
55
66
 
56
67
  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
@@ -74,7 +85,21 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
74
85
  return (
75
86
  <AppBar position="sticky">
76
87
  <Container maxWidth={maxWidth}>
77
- <Toolbar disableGutters sx={{ py: 1 }}>
88
+ <Toolbar
89
+ disableGutters
90
+ sx={[
91
+ { py: 1 },
92
+ prominent && {
93
+ alignItems: "flex-start",
94
+ paddingTop: theme.spacing(4),
95
+ paddingBottom: theme.spacing(4),
96
+ // Override media queries injected by theme.mixins.toolbar
97
+ "@media all": {
98
+ minHeight: 128,
99
+ },
100
+ },
101
+ ]}
102
+ >
78
103
  {/* logo and site title for big screens */}
79
104
  <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
80
105
  <Box
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,
package/src/stories/Navbar.stories.js CHANGED
@@ -2,6 +2,7 @@ import NavBar from "../components/NavBar";
2
2
  import React from "react";
3
3
  import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
4
4
  import logoText from "../../public/logo_text.png";
5
+ import { useTheme } from "@mui/material";
5
6
 
6
7
  export default {
7
8
  title: "UMWD/NavBar",
@@ -11,6 +12,7 @@ export default {
11
12
 
12
13
  const Template = ({ ...args }) => {
13
14
  console.log(thumbnail);
15
+
14
16
  return <NavBar {...args} />;
15
17
  };
16
18
 
@@ -93,4 +95,6 @@ AMH.args = {
93
95
  action: () => console.log("Contact"),
94
96
  },
95
97
  ],
98
+ maxWidth: "lg",
99
+ prominent: true,
96
100
  };
package/src/styles/themes.js ADDED
@@ -0,0 +1,203 @@
1
+ import { createTheme } from "@mui/material/styles";
2
+ import { Roboto } from "next/font/google";
3
+ import { Montserrat } from "next/font/google";
4
+
5
+ const roboto = Roboto({
6
+ weight: ["100", "300", "400", "500", "700"],
7
+ subsets: ["latin"],
8
+ display: "swap",
9
+ });
10
+
11
+ const montserrat = Montserrat({
12
+ weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
13
+ subsets: ["latin"],
14
+ display: "swap",
15
+ });
16
+
17
+ export const darkTheme = createTheme({
18
+ palette: {
19
+ type: "dark",
20
+ primary: {
21
+ main: "#335e53",
22
+ light: "#457f70",
23
+ dark: "#213d36",
24
+ },
25
+ secondary: {
26
+ main: "#DD1805",
27
+ light: "#fa4736",
28
+ dark: "#b71404",
29
+ },
30
+ background: {
31
+ paper: "#000606",
32
+ default: "#000D06",
33
+ },
34
+ text: {
35
+ primary: "#fff",
36
+ secondary: "rgba(255, 255, 255, 0.7)",
37
+ disabled: "rgba(255, 255, 255, 0.5)",
38
+ hint: "rgba(255, 255, 255, 0.5)",
39
+ },
40
+ },
41
+ typography: {
42
+ fontFamily: roboto.style.fontFamily,
43
+ fontSize: 14,
44
+ h1: {
45
+ fontFamily: montserrat.style.fontFamily,
46
+ },
47
+ h2: {
48
+ fontFamily: montserrat.style.fontFamily,
49
+ },
50
+ h3: {
51
+ fontFamily: montserrat.style.fontFamily,
52
+ },
53
+ h4: {
54
+ fontFamily: montserrat.style.fontFamily,
55
+ },
56
+ h5: {
57
+ fontFamily: montserrat.style.fontFamily,
58
+ },
59
+ h6: {
60
+ fontFamily: montserrat.style.fontFamily,
61
+ },
62
+ subtitle1: {
63
+ fontFamily: roboto.style.fontFamily,
64
+ fontSize: "1.2rem",
65
+ lineHeight: 1.6,
66
+ },
67
+ subtitle2: {
68
+ fontFamily: roboto.style.fontFamily,
69
+ },
70
+ body1: {
71
+ fontFamily: roboto.style.fontFamily,
72
+ fontSize: "1.1rem",
73
+ lineHeight: 1.4,
74
+ },
75
+ body2: {
76
+ fontFamily: roboto.style.fontFamily,
77
+ fontSize: "1rem",
78
+ },
79
+ button: {
80
+ fontFamily: roboto.style.fontFamily,
81
+ },
82
+ caption: {
83
+ fontFamily: roboto.style.fontFamily,
84
+ },
85
+ overline: {
86
+ fontFamily: roboto.style.fontFamily,
87
+ },
88
+ },
89
+ components: {
90
+ MuiCssBaseline: {
91
+ styleOverrides: {
92
+ "*::-webkit-scrollbar": {
93
+ width: "0.8em",
94
+ },
95
+ "*::-webkit-scrollbar-track": {
96
+ "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,0.00)",
97
+ backgroundColor: "#000606",
98
+ },
99
+ "*::-webkit-scrollbar-thumb": {
100
+ backgroundColor: "#DD1805",
101
+ outline: "1px solid slategrey",
102
+ },
103
+ },
104
+ },
105
+ },
106
+ }); // Dark theme
107
+
108
+ export const lightTheme = createTheme({
109
+ palette: {
110
+ type: "light",
111
+ primary: {
112
+ main: "#335e53",
113
+ light: "#457f70",
114
+ dark: "#213d36",
115
+ },
116
+ secondary: {
117
+ main: "#DD1805",
118
+ light: "#fa4736",
119
+ dark: "#b71404",
120
+ },
121
+ background: {
122
+ paper: "#a5c5ba",
123
+ default: "#d0dcd8",
124
+ },
125
+ text: {
126
+ primary: "rgba(0, 0, 0, 0.87)",
127
+ secondary: "rgba(0, 0, 0, 0.54)",
128
+ disabled: "rgba(0, 0, 0, 0.38)",
129
+ hint: "rgba(0, 0, 0, 0.38)",
130
+ },
131
+ },
132
+ typography: {
133
+ h1: {
134
+ fontFamily: "Montserrat",
135
+ fontSize: "84px",
136
+ },
137
+ h2: {
138
+ fontFamily: "Montserrat",
139
+ fontSize: "53px",
140
+ },
141
+ h3: {
142
+ fontFamily: "Montserrat",
143
+ fontSize: "42px",
144
+ },
145
+ h4: {
146
+ fontFamily: "Montserrat",
147
+ fontSize: "30px",
148
+ },
149
+ h5: {
150
+ fontFamily: "Montserrat",
151
+ fontSize: "21px",
152
+ },
153
+ h6: {
154
+ fontFamily: "Montserrat",
155
+ fontSize: "17px",
156
+ },
157
+ fontFamily: "Roboto",
158
+ fontSize: 14,
159
+ subtitle1: {
160
+ fontFamily: "Roboto",
161
+ fontSize: "1.2rem",
162
+ lineHeight: 1.6,
163
+ },
164
+ subtitle2: {
165
+ fontFamily: "Roboto",
166
+ },
167
+ body1: {
168
+ fontFamily: "Roboto",
169
+ fontSize: "1.1rem",
170
+ lineHeight: 1.4,
171
+ },
172
+ body2: {
173
+ fontFamily: "Roboto",
174
+ fontSize: "1rem",
175
+ },
176
+ button: {
177
+ fontFamily: "Roboto",
178
+ },
179
+ caption: {
180
+ fontFamily: "Roboto",
181
+ },
182
+ overline: {
183
+ fontFamily: "Roboto",
184
+ },
185
+ },
186
+ components: {
187
+ MuiCssBaseline: {
188
+ styleOverrides: {
189
+ "*::-webkit-scrollbar": {
190
+ width: "0.8em",
191
+ },
192
+ "*::-webkit-scrollbar-track": {
193
+ "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,0.00)",
194
+ backgroundColor: "#a5c5ba",
195
+ },
196
+ "*::-webkit-scrollbar-thumb": {
197
+ backgroundColor: "#DD1805",
198
+ outline: "1px solid slategrey",
199
+ },
200
+ },
201
+ },
202
+ },
203
+ }); // Light theme