umwd-components 0.1.33 → 0.1.35

package/dist/cjs/components/ContactForm.js

@@ -0,0 +1,49 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('prop-types');
+var material = require('@mui/material');
+
+function ContactForm({
+  ...args
+}) {
+  return /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    align: "center"
+  }, "Write us"), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1",
+    align: "center"
+  }, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "name",
+    label: "Name",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "email",
+    label: "Email",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "subject",
+    label: "Subject",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(material.TextField, {
+    id: "message",
+    label: "Message",
+    variant: "outlined",
+    multiline: true,
+    minRows: 5
+  }));
+}
+ContactForm.propTypes = {};
+
+exports.default = ContactForm;

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/cjs/index.js

@@ -14,6 +14,7 @@ var NavBar = require('./components/NavBar.js');
 var TextImageBlock = require('./components/TextImageBlock.js');
 var Page = require('./components/Page.js');
 var Footer = require('./components/Footer.js');
+var ContactForm = require('./components/ContactForm.js');
 
 
 
@@ -25,3 +26,4 @@ exports.NavBar = NavBar.default;
 exports.TextImageBlock = TextImageBlock.default;
 exports.Page = Page.default;
 exports.Footer = Footer.default;
+exports.ContactForm = ContactForm.default;

package/dist/esm/components/ContactForm.js

@@ -0,0 +1,45 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import 'prop-types';
+import { Stack, Typography, TextField } from '@mui/material';
+
+function ContactForm({
+  ...args
+}) {
+  return /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    align: "center"
+  }, "Write us"), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    align: "center"
+  }, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(TextField, {
+    id: "name",
+    label: "Name",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "email",
+    label: "Email",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "subject",
+    label: "Subject",
+    variant: "outlined"
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "message",
+    label: "Message",
+    variant: "outlined",
+    multiline: true,
+    minRows: 5
+  }));
+}
+ContactForm.propTypes = {};
+
+export { ContactForm as default };

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/dist/esm/index.js

@@ -12,3 +12,4 @@ export { default as NavBar } from './components/NavBar.js';
 export { default as TextImageBlock } from './components/TextImageBlock.js';
 export { default as Page } from './components/Page.js';
 export { default as Footer } from './components/Footer.js';
+export { default as ContactForm } from './components/ContactForm.js';

package/package.json

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

package/src/components/ContactForm.js

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { TextField, Typography, Stack } from "@mui/material";
+
+function ContactForm({ ...args }) {
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6" align="center">
+        Write us
+      </Typography>
+      <Typography variant="body1" align="center">
+        We're open for any suggestion or just to have a chat
+      </Typography>
+      <TextField id="name" label="Name" variant="outlined" />
+      <TextField id="email" label="Email" variant="outlined" />
+      <TextField id="subject" label="Subject" variant="outlined" />
+      <TextField
+        id="message"
+        label="Message"
+        variant="outlined"
+        multiline
+        minRows={5}
+      />
+    </Stack>
+  );
+}
+
+ContactForm.propTypes = {};
+
+export default ContactForm;

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/index.js

@@ -7,3 +7,4 @@ export { default as NavBar } from "./components/NavBar";
 export { default as TextImageBlock } from "./components/TextImageBlock";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
+export { default as ContactForm } from "./components/ContactForm";

package/src/stories/ContactForm.stories.js

@@ -0,0 +1,13 @@
+import ContactForm from "../components/ContactForm";
+import React from "react";
+
+export default {
+  title: "UMWD/ContactForm",
+  component: ContactForm,
+};
+
+const Template = ({ ...args }) => <ContactForm />;
+
+export const HelloWorld = Template.bind({});
+
+HelloWorld.args = {};

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",