umwd-components 0.1.32 → 0.1.34

package/dist/cjs/components/NavBar.js

@@ -44,7 +44,7 @@ function NavBar({
   // handleMobileMenu
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
-  React.useState(tabs[0].name || "");
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
     setMobileNavOpen(true);
   };
@@ -52,6 +52,10 @@ function NavBar({
     setMobileNavOpen(false);
   };
   const router = navigation.useRouter();
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+    setCurrentTab(newValue);
+  };
   return /*#__PURE__*/React.createElement(material.AppBar, {
     position: "sticky"
   }, /*#__PURE__*/React.createElement(material.Container, {
@@ -261,8 +265,8 @@ function NavBar({
       primary: page.name
     })), /*#__PURE__*/React.createElement(material.Divider, null));
   }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Tabs, {
-    value: "one"
-    /* onChange={handleChange} */,
+    value: currentTab,
+    onChange: (event, newValue) => handleChange(event, newValue),
     "aria-label": "wrapped label tabs example",
     textColor: "secondary",
     indicatorColor: "secondary",

package/dist/cjs/components/Page.js

@@ -12,22 +12,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var PropTypes = require('prop-types');
 var TextImageBlock = require('./TextImageBlock.js');
+var material = require('@mui/material');
 
 function Page({
+  page_title,
+  page_description,
   page_blocks
 }) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, page_blocks.map((block, index) => {
-    return /*#__PURE__*/React.createElement(TextImageBlock.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    align: "center"
+  }, page_title), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    align: "center"
+  }, page_description), page_blocks.map((block, index) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextImageBlock.default, {
       key: index,
       block_title: block.block_title,
       text_content: block.text_content,
       image_content: block.image_content,
       reverse: block.reverse,
       maxWidth: block.maxWidth
-    });
+    }));
   }));
 }
 Page.propTypes = {
+  page_title: PropTypes.string,
+  page_description: PropTypes.string,
   page_blocks: PropTypes.arrayOf(PropTypes.shape({
     block_title: PropTypes.string,
     text_content: PropTypes.string,

package/dist/esm/components/NavBar.js

@@ -40,7 +40,7 @@ function NavBar({
   // handleMobileMenu
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
-  React.useState(tabs[0].name || "");
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
     setMobileNavOpen(true);
   };
@@ -48,6 +48,10 @@ function NavBar({
     setMobileNavOpen(false);
   };
   const router = useRouter();
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+    setCurrentTab(newValue);
+  };
   return /*#__PURE__*/React.createElement(AppBar, {
     position: "sticky"
   }, /*#__PURE__*/React.createElement(Container, {
@@ -257,8 +261,8 @@ function NavBar({
       primary: page.name
     })), /*#__PURE__*/React.createElement(Divider, null));
   }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(Tabs, {
-    value: "one"
-    /* onChange={handleChange} */,
+    value: currentTab,
+    onChange: (event, newValue) => handleChange(event, newValue),
     "aria-label": "wrapped label tabs example",
     textColor: "secondary",
     indicatorColor: "secondary",

package/dist/esm/components/Page.js

@@ -8,22 +8,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TextImageBlock from './TextImageBlock.js';
+import { Typography } from '@mui/material';
 
 function Page({
+  page_title,
+  page_description,
   page_blocks
 }) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, page_blocks.map((block, index) => {
-    return /*#__PURE__*/React.createElement(TextImageBlock, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1",
+    align: "center"
+  }, page_title), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    align: "center"
+  }, page_description), page_blocks.map((block, index) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextImageBlock, {
       key: index,
       block_title: block.block_title,
       text_content: block.text_content,
       image_content: block.image_content,
       reverse: block.reverse,
       maxWidth: block.maxWidth
-    });
+    }));
   }));
 }
 Page.propTypes = {
+  page_title: PropTypes.string,
+  page_description: PropTypes.string,
   page_blocks: PropTypes.arrayOf(PropTypes.shape({
     block_title: PropTypes.string,
     text_content: PropTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/NavBar.js

@@ -52,7 +52,7 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
 
-  const [currentTab, setCurrentTab] = React.useState(tabs[0].name || "");
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
 
   const handleOpenMobileMenu = (e) => {
     setMobileNavOpen(true);
@@ -64,6 +64,12 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
 
   const router = useRouter();
 
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+
+    setCurrentTab(newValue);
+  };
+
   return (
     <AppBar position="sticky">
       <Container maxWidth={maxWidth}>
@@ -274,8 +280,8 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
         {/* Tabs */}
         {tabs.length > 0 && (
           <Tabs
-            value={"one"}
-            /* onChange={handleChange} */
+            value={currentTab}
+            onChange={(event, newValue) => handleChange(event, newValue)}
             aria-label="wrapped label tabs example"
             textColor="secondary"
             indicatorColor="secondary"

package/src/components/Page.js

@@ -3,20 +3,29 @@
 import React from "react";
 import PropTypes from "prop-types";
 import TextImageBlock from "./TextImageBlock";
+import { Typography } from "@mui/material";
 
-function Page({ page_blocks }) {
+function Page({ page_title, page_description, page_blocks }) {
   return (
     <>
+      <Typography variant="h1" align="center">
+        {page_title}
+      </Typography>
+      <Typography variant="h6" align="center">
+        {page_description}
+      </Typography>
       {page_blocks.map((block, index) => {
         return (
-          <TextImageBlock
-            key={index}
-            block_title={block.block_title}
-            text_content={block.text_content}
-            image_content={block.image_content}
-            reverse={block.reverse}
-            maxWidth={block.maxWidth}
-          />
+          <>
+            <TextImageBlock
+              key={index}
+              block_title={block.block_title}
+              text_content={block.text_content}
+              image_content={block.image_content}
+              reverse={block.reverse}
+              maxWidth={block.maxWidth}
+            />
+          </>
         );
       })}
     </>
@@ -24,6 +33,8 @@ function Page({ page_blocks }) {
 }
 
 Page.propTypes = {
+  page_title: PropTypes.string,
+  page_description: PropTypes.string,
   page_blocks: PropTypes.arrayOf(
     PropTypes.shape({
       block_title: PropTypes.string,

package/src/stories/Page.stories.js

@@ -8,17 +8,18 @@ export default {
   // argTypes: { numberOfChildren: { type: "number" } },
 };
 
-const Template = ({ blocks, ...args }) => (
-  <Page page_blocks={blocks}>
-    {blocks.map((block, index) => (
-      <TextImageBlock />
-    ))}
-  </Page>
+const Template = ({ page_title, page_description, blocks, ...args }) => (
+  <Page
+    page_title={page_title}
+    page_description={page_description}
+    page_blocks={blocks}
+  />
 );
 
 export const HelloWorld = Template.bind({});
 
 HelloWorld.args = {
+  page_title: "Hello Cruel World",
   blocks: [
     {
       block_title: "Hello World",