umwd-components 0.1.45 → 0.1.47

package/.storybook/main.js

@@ -5,6 +5,7 @@ const config = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/nextjs",

package/.storybook/preview.js

@@ -1,4 +1,14 @@
 /** @type { import('@storybook/react').Preview } */
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+import "@fontsource/material-icons";
+
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { lightTheme, darkTheme } from "../src/styles/themes.js";
+
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -12,4 +22,16 @@ const preview = {
   },
 };
 
+export const decorators = [
+  withThemeFromJSXProvider({
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+    defaultTheme: "light",
+    Provider: ThemeProvider,
+    GlobalStyles: CssBaseline,
+  }),
+];
+
 export default preview;

package/dist/cjs/components/Footer.js

@@ -51,12 +51,13 @@ function Footer({
   VAT_number,
   company_socials,
   disclaimer_link,
-  privacypolicy_link
+  privacypolicy_link,
+  maxWidth = "lg"
 }) {
   return /*#__PURE__*/React.createElement(material.AppBar, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "xl"
+    maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(material.Toolbar, {
     disableGutters: true
   }, /*#__PURE__*/React.createElement(material.Grid, {
@@ -81,12 +82,20 @@ function Footer({
       cursor: "pointer",
       flexDirection: "column",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "flex-start",
+      height: "100%"
     }
   }, /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
     color: "#ffffff"
-  }, site_title), logo && /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Image, {
+  }, site_title), logo && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
     src: logo.url,
     width: logo.width,
     height: logo.height,

package/dist/cjs/components/NavBar.js

@@ -17,6 +17,7 @@ var CloseIcon = require('@mui/icons-material/Close');
 var MoreVertIcon = require('@mui/icons-material/MoreVert');
 var navigation = require('next/navigation');
 var PropTypes = require('prop-types');
+var styles = require('@mui/material/styles');
 
 NavBar.propTypes = {
   site_title: PropTypes.string,
@@ -33,17 +34,21 @@ NavBar.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  }))
+  })),
+  maxWidth: PropTypes.string,
+  prominent: PropTypes.bool
 };
 function NavBar({
   site_title,
   logo,
   pages = [],
   tabs = [],
-  maxWidth = "xl"
+  maxWidth = "lg",
+  minHeight = "80px"
 }) {
   // handleMobileMenu
 
+  styles.useTheme();
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
   const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
@@ -64,7 +69,10 @@ function NavBar({
   }, /*#__PURE__*/React.createElement(material.Toolbar, {
     disableGutters: true,
     sx: {
-      py: 1
+      py: 1,
+      "@media all": {
+        minHeight: minHeight
+      }
     }
   }, /*#__PURE__*/React.createElement(Link, {
     href: "/",

package/dist/esm/components/Footer.js

@@ -47,12 +47,13 @@ function Footer({
   VAT_number,
   company_socials,
   disclaimer_link,
-  privacypolicy_link
+  privacypolicy_link,
+  maxWidth = "lg"
 }) {
   return /*#__PURE__*/React.createElement(AppBar, {
     position: "relative"
   }, /*#__PURE__*/React.createElement(Container, {
-    maxWidth: "xl"
+    maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Toolbar, {
     disableGutters: true
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -77,12 +78,20 @@ function Footer({
       cursor: "pointer",
       flexDirection: "column",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "flex-start",
+      height: "100%"
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
     color: "#ffffff"
-  }, site_title), logo && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Image, {
+  }, site_title), logo && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
     src: logo.url,
     width: logo.width,
     height: logo.height,

package/dist/esm/components/NavBar.js

@@ -13,6 +13,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useRouter } from 'next/navigation';
 import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
 
 NavBar.propTypes = {
   site_title: PropTypes.string,
@@ -29,17 +30,21 @@ NavBar.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  }))
+  })),
+  maxWidth: PropTypes.string,
+  prominent: PropTypes.bool
 };
 function NavBar({
   site_title,
   logo,
   pages = [],
   tabs = [],
-  maxWidth = "xl"
+  maxWidth = "lg",
+  minHeight = "80px"
 }) {
   // handleMobileMenu
 
+  useTheme();
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
   const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
@@ -60,7 +65,10 @@ function NavBar({
   }, /*#__PURE__*/React.createElement(Toolbar, {
     disableGutters: true,
     sx: {
-      py: 1
+      py: 1,
+      "@media all": {
+        minHeight: minHeight
+      }
     }
   }, /*#__PURE__*/React.createElement(Link, {
     href: "/",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -44,6 +44,7 @@
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-themes": "^7.6.17",
     "@storybook/blocks": "^7.6.7",
     "@storybook/nextjs": "^7.6.16",
     "@storybook/react": "^7.6.7",
@@ -76,6 +77,8 @@
     "validator": "^13.11.0"
   },
   "dependencies": {
+    "@fontsource/material-icons": "^5.0.15",
+    "@fontsource/roboto": "^5.0.12",
     "next-router-mock": "^0.9.12",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

package/src/components/Footer.js

@@ -59,10 +59,11 @@ function Footer({
   company_socials,
   disclaimer_link,
   privacypolicy_link,
+  maxWidth = "lg",
 }) {
   return (
     <AppBar position="relative">
-      <Container maxWidth="xl">
+      <Container maxWidth={maxWidth}>
         <Toolbar disableGutters>
           <Grid container sx={{ p: 2 }} spacing={2}>
             <Grid item xs={12} sm={4} align="center">
@@ -73,14 +74,22 @@ function Footer({
                     cursor: "pointer",
                     flexDirection: "column",
                     alignItems: "center",
-                    justifyContent: "center",
+                    justifyContent: "flex-start",
+                    height: "100%",
                   }}
                 >
                   <Typography variant="h6" color="#ffffff">
                     {site_title}
                   </Typography>
                   {logo && (
-                    <Box>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%",
+                      }}
+                    >
                       <Image
                         src={logo.url}
                         width={logo.width}

package/src/components/NavBar.js

@@ -25,6 +25,7 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { useRouter } from "next/navigation";
 
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material/styles";
 
 NavBar.propTypes = {
   site_title: PropTypes.string,
@@ -46,11 +47,22 @@ NavBar.propTypes = {
       url: PropTypes.string.isRequired,
     })
   ),
+  maxWidth: PropTypes.string,
+  prominent: PropTypes.bool,
 };
 
-function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
+function NavBar({
+  site_title,
+  logo,
+  pages = [],
+  tabs = [],
+  maxWidth = "lg",
+  minHeight = "80px",
+}) {
   // handleMobileMenu
 
+  const theme = useTheme();
+
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
 
   const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
@@ -74,7 +86,15 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
   return (
     <AppBar position="sticky">
       <Container maxWidth={maxWidth}>
-        <Toolbar disableGutters sx={{ py: 1 }}>
+        <Toolbar
+          disableGutters
+          sx={{
+            py: 1,
+            "@media all": {
+              minHeight: minHeight,
+            },
+          }}
+        >
           {/* logo and site title for big screens */}
           <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
             <Box

package/src/stories/Navbar.stories.js

@@ -2,6 +2,7 @@ import NavBar from "../components/NavBar";
 import React from "react";
 import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
 import logoText from "../../public/logo_text.png";
+import { useTheme } from "@mui/material";
 
 export default {
   title: "UMWD/NavBar",
@@ -11,6 +12,7 @@ export default {
 
 const Template = ({ ...args }) => {
   console.log(thumbnail);
+
   return <NavBar {...args} />;
 };
 
@@ -93,4 +95,6 @@ AMH.args = {
       action: () => console.log("Contact"),
     },
   ],
+  maxWidth: "lg",
+  minHeight: "100px",
 };

package/src/styles/themes.js

@@ -0,0 +1,203 @@
+import { createTheme } from "@mui/material/styles";
+import { Roboto } from "next/font/google";
+import { Montserrat } from "next/font/google";
+
+const roboto = Roboto({
+  weight: ["100", "300", "400", "500", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const montserrat = Montserrat({
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const darkTheme = createTheme({
+  palette: {
+    type: "dark",
+    primary: {
+      main: "#335e53",
+      light: "#457f70",
+      dark: "#213d36",
+    },
+    secondary: {
+      main: "#DD1805",
+      light: "#fa4736",
+      dark: "#b71404",
+    },
+    background: {
+      paper: "#000606",
+      default: "#000D06",
+    },
+    text: {
+      primary: "#fff",
+      secondary: "rgba(255, 255, 255, 0.7)",
+      disabled: "rgba(255, 255, 255, 0.5)",
+      hint: "rgba(255, 255, 255, 0.5)",
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+    fontSize: 14,
+    h1: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h2: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h3: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h4: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h5: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    h6: {
+      fontFamily: montserrat.style.fontFamily,
+    },
+    subtitle1: {
+      fontFamily: roboto.style.fontFamily,
+      fontSize: "1.2rem",
+      lineHeight: 1.6,
+    },
+    subtitle2: {
+      fontFamily: roboto.style.fontFamily,
+    },
+    body1: {
+      fontFamily: roboto.style.fontFamily,
+      fontSize: "1.1rem",
+      lineHeight: 1.4,
+    },
+    body2: {
+      fontFamily: roboto.style.fontFamily,
+      fontSize: "1rem",
+    },
+    button: {
+      fontFamily: roboto.style.fontFamily,
+    },
+    caption: {
+      fontFamily: roboto.style.fontFamily,
+    },
+    overline: {
+      fontFamily: roboto.style.fontFamily,
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*::-webkit-scrollbar": {
+          width: "0.8em",
+        },
+        "*::-webkit-scrollbar-track": {
+          "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,0.00)",
+          backgroundColor: "#000606",
+        },
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#DD1805",
+          outline: "1px solid slategrey",
+        },
+      },
+    },
+  },
+}); // Dark theme
+
+export const lightTheme = createTheme({
+  palette: {
+    type: "light",
+    primary: {
+      main: "#335e53",
+      light: "#457f70",
+      dark: "#213d36",
+    },
+    secondary: {
+      main: "#DD1805",
+      light: "#fa4736",
+      dark: "#b71404",
+    },
+    background: {
+      paper: "#a5c5ba",
+      default: "#d0dcd8",
+    },
+    text: {
+      primary: "rgba(0, 0, 0, 0.87)",
+      secondary: "rgba(0, 0, 0, 0.54)",
+      disabled: "rgba(0, 0, 0, 0.38)",
+      hint: "rgba(0, 0, 0, 0.38)",
+    },
+  },
+  typography: {
+    h1: {
+      fontFamily: "Montserrat",
+      fontSize: "84px",
+    },
+    h2: {
+      fontFamily: "Montserrat",
+      fontSize: "53px",
+    },
+    h3: {
+      fontFamily: "Montserrat",
+      fontSize: "42px",
+    },
+    h4: {
+      fontFamily: "Montserrat",
+      fontSize: "30px",
+    },
+    h5: {
+      fontFamily: "Montserrat",
+      fontSize: "21px",
+    },
+    h6: {
+      fontFamily: "Montserrat",
+      fontSize: "17px",
+    },
+    fontFamily: "Roboto",
+    fontSize: 14,
+    subtitle1: {
+      fontFamily: "Roboto",
+      fontSize: "1.2rem",
+      lineHeight: 1.6,
+    },
+    subtitle2: {
+      fontFamily: "Roboto",
+    },
+    body1: {
+      fontFamily: "Roboto",
+      fontSize: "1.1rem",
+      lineHeight: 1.4,
+    },
+    body2: {
+      fontFamily: "Roboto",
+      fontSize: "1rem",
+    },
+    button: {
+      fontFamily: "Roboto",
+    },
+    caption: {
+      fontFamily: "Roboto",
+    },
+    overline: {
+      fontFamily: "Roboto",
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*::-webkit-scrollbar": {
+          width: "0.8em",
+        },
+        "*::-webkit-scrollbar-track": {
+          "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,0.00)",
+          backgroundColor: "#a5c5ba",
+        },
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#DD1805",
+          outline: "1px solid slategrey",
+        },
+      },
+    },
+  },
+}); // Light theme