umwd-components 0.1.48 → 0.1.50

package/dist/cjs/components/WebsitePlaceholder.js

@@ -18,6 +18,8 @@ function WebsitePlaceholder({
   title,
   announcement,
   logo,
+  lmBackgroundUrl,
+  dmBackgroundUrl,
   children
 }) {
   const theme = material.useTheme();
@@ -60,6 +62,8 @@ function WebsitePlaceholder({
       justifyItems: "center",
       alignItems: "center",
       backgroundColor: theme.palette.primary.main,
+      backgroundImage: `url(${theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl})`,
+      backgroundSize: "cover",
       height: "100vh",
       maxHeight: "100vh",
       width: "100vw",
@@ -92,7 +96,8 @@ WebsitePlaceholder.propTypes = {
     width: PropTypes.string,
     height: PropTypes.string
   }),
-  backgroundColor: PropTypes.string
+  lmBackgroundUrl: PropTypes.string,
+  dmBackgroundUrl: PropTypes.string
 };
 
 exports.default = WebsitePlaceholder;

package/dist/esm/components/WebsitePlaceholder.js

@@ -14,6 +14,8 @@ function WebsitePlaceholder({
   title,
   announcement,
   logo,
+  lmBackgroundUrl,
+  dmBackgroundUrl,
   children
 }) {
   const theme = useTheme();
@@ -56,6 +58,8 @@ function WebsitePlaceholder({
       justifyItems: "center",
       alignItems: "center",
       backgroundColor: theme.palette.primary.main,
+      backgroundImage: `url(${theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl})`,
+      backgroundSize: "cover",
       height: "100vh",
       maxHeight: "100vh",
       width: "100vw",
@@ -88,7 +92,8 @@ WebsitePlaceholder.propTypes = {
     width: PropTypes.string,
     height: PropTypes.string
   }),
-  backgroundColor: PropTypes.string
+  lmBackgroundUrl: PropTypes.string,
+  dmBackgroundUrl: PropTypes.string
 };
 
 export { WebsitePlaceholder as default };

package/package.json

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

package/src/components/Card.js

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Button, Card as MuiCard } from "@mui/material";
+import { CardActions, CardContent, CardHeader, CardMedia } from "@mui/material";
+
+function Card({ title, subHeader, cardContent, cardLink }) {
+  return (
+    <MuiCard sx={{ width: "100%" }}>
+      <CardHeader title={title} subheader={subHeader}></CardHeader>
+      <CardContent>
+        {/* ToDo Parse MD*/}
+        {cardContent && cardContent}
+      </CardContent>
+      <CardMedia></CardMedia>
+      <CardActions>
+        {cardLink && <Button size="small">Learn More</Button>}
+      </CardActions>
+    </MuiCard>
+  );
+}
+
+Card.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default Card;

package/src/components/ThreeUp.js

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import Card from "./Card";
+import { Stack } from "@mui/material";
+
+function ThreeUp({ card1, card2, card3 }) {
+  console.log("card1", card1);
+
+  return (
+    <Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
+      {card1 && (
+        <Card
+          title={card1.title}
+          subHeader={card1.subHeader}
+          cardContent={card1.cardContent}
+          cardLink={card1.cardLink}
+        />
+      )}
+      {card2 && (
+        <Card
+          title={card2.title}
+          subHeader={card2.subHeader}
+          cardContent={card2.cardContent}
+          cardLink={card2.cardLink}
+        />
+      )}
+      {card3 && (
+        <Card
+          title={card3.title}
+          subHeader={card3.subHeader}
+          cardContent={card3.cardContent}
+          cardLink={card3.cardLink}
+        />
+      )}
+    </Stack>
+  );
+}
+
+ThreeUp.propTypes = {};
+
+export default ThreeUp;

package/src/components/WebsitePlaceholder.js

@@ -5,7 +5,14 @@ import PropTypes from "prop-types";
 import { Typography, Box, useTheme } from "@mui/material";
 import Image from "next/image";
 
-function WebsitePlaceholder({ title, announcement, logo, children }) {
+function WebsitePlaceholder({
+  title,
+  announcement,
+  logo,
+  lmBackgroundUrl,
+  dmBackgroundUrl,
+  children,
+}) {
   const theme = useTheme();
 
   // const [keysPressed, setKeysPressed] = React.useState({});
@@ -58,6 +65,10 @@ function WebsitePlaceholder({ title, announcement, logo, children }) {
           justifyItems: "center",
           alignItems: "center",
           backgroundColor: theme.palette.primary.main,
+          backgroundImage: `url(${
+            theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl
+          })`,
+          backgroundSize: "cover",
           height: "100vh",
           maxHeight: "100vh",
           width: "100vw",
@@ -102,7 +113,8 @@ WebsitePlaceholder.propTypes = {
     width: PropTypes.string,
     height: PropTypes.string,
   }),
-  backgroundColor: PropTypes.string,
+  lmBackgroundUrl: PropTypes.string,
+  dmBackgroundUrl: PropTypes.string,
 };
 
 export default WebsitePlaceholder;

package/src/stories/ThreeUp.stories.js

@@ -0,0 +1,35 @@
+import ThreeUp from "../components/ThreeUp";
+import React from "react";
+
+export default {
+  title: "UMWD/ThreeUp",
+  component: ThreeUp,
+};
+
+const Template = ({ card1, card2, card3, ...args }) => (
+  <ThreeUp card1={card1} card2={card2} card3={card3} />
+);
+
+export const AMH = Template.bind({});
+
+AMH.args = {
+  card1: { title: "Card 1" },
+  card2: { title: "Card 2" },
+  card3: { title: "Card 3" },
+};
+
+export const OREFS = Template.bind({});
+
+OREFS.args = {
+  card1: { title: "Card 1" },
+  card2: { title: "Card 2" },
+  card3: { title: "Card 3" },
+};
+
+export const UMWD = Template.bind({});
+
+UMWD.args = {
+  card1: { title: "Card 1" },
+  card2: { title: "Card 2" },
+  card3: { title: "Card 3" },
+};

package/src/stories/WebsitePlaceholder.stories.js

@@ -7,10 +7,23 @@ export default {
   component: WebsitePlaceholder,
 };
 
-const Template = ({ title, announcement, logo, ...args }) => {
+const Template = ({
+  title,
+  announcement,
+  logo,
+  lmBackgroundUrl,
+  dmBackgroundUrl,
+  ...args
+}) => {
   return (
     <>
-      <WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
+      <WebsitePlaceholder
+        title={title}
+        announcement={announcement}
+        logo={logo}
+        lmBackgroundUrl={lmBackgroundUrl}
+        dmBackgroundUrl={dmBackgroundUrl}
+      >
         <Box sx={{ height: "300px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis
@@ -149,7 +162,8 @@ HelloWorld.args = {
     alt: "Hello World",
   },
   announcement: "Coming Soon!",
-  backgroundColor: "lightgrey",
+  lmBackgroundUrl: "https://via.placeholder.com/1920x1080",
+  dmBackgroundUrl: "https://via.placeholder.com/1920x1080",
 };
 
 HelloMars.args = {
@@ -159,5 +173,6 @@ HelloMars.args = {
     alt: "Hello Mars",
   },
   announcement: "In cinama's this summer!",
-  backgroundColor: "slategrey",
+  lmBackgroundUrl: "https://via.placeholder.com/1920x1080",
+  dmBackgroundUrl: "https://via.placeholder.com/1920x1080",
 };