umwd-components 0.1.45 → 0.1.46

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/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,20 @@ NavBar.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  }))
+  })),
+  prominent: PropTypes.bool
 };
 function NavBar({
   site_title,
   logo,
   pages = [],
   tabs = [],
-  maxWidth = "xl"
+  maxWidth = "xl",
+  prominent = false
 }) {
   // handleMobileMenu
 
+  const theme = styles.useTheme();
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
   const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
@@ -63,9 +67,17 @@ function NavBar({
     maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(material.Toolbar, {
     disableGutters: true,
-    sx: {
+    sx: [{
       py: 1
-    }
+    }, prominent && {
+      alignItems: "flex-start",
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4),
+      // Override media queries injected by theme.mixins.toolbar
+      "@media all": {
+        minHeight: 128
+      }
+    }]
   }, /*#__PURE__*/React.createElement(Link, {
     href: "/",
     style: {

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,20 @@ NavBar.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  }))
+  })),
+  prominent: PropTypes.bool
 };
 function NavBar({
   site_title,
   logo,
   pages = [],
   tabs = [],
-  maxWidth = "xl"
+  maxWidth = "xl",
+  prominent = false
 }) {
   // handleMobileMenu
 
+  const theme = useTheme();
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
   const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
@@ -59,9 +63,17 @@ function NavBar({
     maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Toolbar, {
     disableGutters: true,
-    sx: {
+    sx: [{
       py: 1
-    }
+    }, prominent && {
+      alignItems: "flex-start",
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4),
+      // Override media queries injected by theme.mixins.toolbar
+      "@media all": {
+        minHeight: 128
+      }
+    }]
   }, /*#__PURE__*/React.createElement(Link, {
     href: "/",
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "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/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,21 @@ NavBar.propTypes = {
       url: PropTypes.string.isRequired,
     })
   ),
+  prominent: PropTypes.bool,
 };
 
-function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
+function NavBar({
+  site_title,
+  logo,
+  pages = [],
+  tabs = [],
+  maxWidth = "xl",
+  prominent = false,
+}) {
   // handleMobileMenu
 
+  const theme = useTheme();
+
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
 
   const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
@@ -74,7 +85,21 @@ 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 },
+            prominent && {
+              alignItems: "flex-start",
+              paddingTop: theme.spacing(4),
+              paddingBottom: theme.spacing(4),
+              // Override media queries injected by theme.mixins.toolbar
+              "@media all": {
+                minHeight: 128,
+              },
+            },
+          ]}
+        >
           {/* 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",
+  prominent: true,
 };

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