umwd-components 0.1.48 → 0.1.49

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,7 @@ function WebsitePlaceholder({
       justifyItems: "center",
       alignItems: "center",
       backgroundColor: theme.palette.primary.main,
+      backgroundImage: `url(${theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl})`,
       height: "100vh",
       maxHeight: "100vh",
       width: "100vw",

package/dist/esm/components/WebsitePlaceholder.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "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,9 @@ function WebsitePlaceholder({ title, announcement, logo, children }) {
           justifyItems: "center",
           alignItems: "center",
           backgroundColor: theme.palette.primary.main,
+          backgroundImage: `url(${
+            theme.palette.mode === "light" ? lmBackgroundUrl : dmBackgroundUrl
+          })`,
           height: "100vh",
           maxHeight: "100vh",
           width: "100vw",

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" },
+};