umwd-components 0.1.47 → 0.1.49

package/dist/cjs/components/BulletList.js

@@ -0,0 +1,42 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var material = require('@mui/material');
+var FiberManualRecordIcon = require('@mui/icons-material/FiberManualRecord');
+
+function BulletList({
+  bullets,
+  bulletSVG
+}) {
+  console.log("bulletSVG2", bulletSVG);
+  return /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2
+  }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(material.Typography, {
+    key: index,
+    sx: {
+      verticalAlign: "center",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      display: "inline-flex"
+    }
+  }, bulletSVG ? /*#__PURE__*/React.createElement(material.SvgIcon, {
+    sx: {
+      mr: 1
+    }
+  }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
+}
+BulletList.propTypes = {
+  bullets: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+exports.default = BulletList;

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

@@ -16,6 +16,7 @@ var Page = require('./components/Page.js');
 var Footer = require('./components/Footer.js');
 var ContactForm = require('./components/ContactForm.js');
 var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
+var BulletList = require('./components/BulletList.js');
 
 
 
@@ -29,3 +30,4 @@ exports.Page = Page.default;
 exports.Footer = Footer.default;
 exports.ContactForm = ContactForm.default;
 exports.WebsitePlaceholder = WebsitePlaceholder.default;
+exports.BulletList = BulletList.default;

package/dist/esm/components/BulletList.js

@@ -0,0 +1,38 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Stack, Typography, SvgIcon } from '@mui/material';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+function BulletList({
+  bullets,
+  bulletSVG
+}) {
+  console.log("bulletSVG2", bulletSVG);
+  return /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2
+  }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(Typography, {
+    key: index,
+    sx: {
+      verticalAlign: "center",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      display: "inline-flex"
+    }
+  }, bulletSVG ? /*#__PURE__*/React.createElement(SvgIcon, {
+    sx: {
+      mr: 1
+    }
+  }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
+}
+BulletList.propTypes = {
+  bullets: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+export { BulletList as default };

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

@@ -14,3 +14,4 @@ export { default as Page } from './components/Page.js';
 export { default as Footer } from './components/Footer.js';
 export { default as ContactForm } from './components/ContactForm.js';
 export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';
+export { default as BulletList } from './components/BulletList.js';

package/package.json

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

package/public/AMH/BulletSVG.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Layer_32">
+	<path class="st27" fill="#DD1805" d="M22.15,12c-1.39-0.61-8-3.55-12.14-6.33C5.18,2.43,4.03,0.28,3.19,0.23c-0.4-0.02-1.26,1.04-1.34,1.42
+		L9,10.62c0,0,5.12,1.04,8.08,1.38C14.12,12.34,9,13.38,9,13.38l-7.16,8.96c0.08,0.38,0.94,1.44,1.34,1.42
+		c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"/>
+</g>
+</svg>

package/src/components/BulletList.js

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Stack, SvgIcon, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+
+function BulletList({ bullets, bulletSVG }) {
+  console.log("bulletSVG2", bulletSVG);
+  return (
+    <Stack spacing={2}>
+      {bullets.map((bullet, index) => (
+        <Typography
+          key={index}
+          sx={{
+            verticalAlign: "center",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            display: "inline-flex",
+          }}
+        >
+          {bulletSVG ? (
+            <SvgIcon sx={{ mr: 1 }}>{bulletSVG}</SvgIcon>
+          ) : (
+            <FiberManualRecordIcon />
+          )}
+          {bullet}
+        </Typography>
+      ))}
+    </Stack>
+  );
+}
+
+BulletList.propTypes = {
+  bullets: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default BulletList;

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

@@ -9,3 +9,4 @@ export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
 export { default as ContactForm } from "./components/ContactForm";
 export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
+export { default as BulletList } from "./components/BulletList";

package/src/stories/BulletList.stories.js

@@ -0,0 +1,87 @@
+import BulletList from "../components/BulletList";
+import React from "react";
+// import bulletSVG from "../../public/AMH/BulletSVG.svg";
+// import { ReactComponent as bulletSVG } from "../../public/AMH/BulletSVG.js";
+
+export default {
+  title: "UMWD/BulletList",
+  component: BulletList,
+};
+
+//console.log(<bulletSVG />);
+
+const Template = ({ bullets, bulletSVG, ...args }) => (
+  <BulletList bullets={bullets} bulletSVG={bulletSVG} />
+);
+
+export const AMH = Template.bind({});
+
+AMH.args = {
+  bullets: [
+    "Unmatched Medical Expertise: Our medical team consists of top-flight doctors and nurses with extensive experience in critical care transport, ensuring the best possible care for your loved one during repatriation.",
+    "Global Reach and 24/7 Availability: We operate a worldwide network of resources, ready to respond to your needs anytime, anywhere. No matter where the medical emergency occurs, we'll get you home safely.",
+    "Personalized Care Coordination: We understand the complexities of medical repatriation. Our dedicated case managers will handle all logistical arrangements, keeping you informed every step of the way.",
+    "Focus on Patient Comfort and Safety: We utilize state-of-the-art medical equipment and customized transportation solutions to ensure a smooth and comfortable journey for your loved one.",
+  ],
+  bulletSVG: (
+    <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24">
+      <g id="Layer_32">
+        <path
+          class="st27"
+          fill="#DD1805"
+          d="M22.15,12c-1.39-0.61-8-3.55-12.14-6.33C5.18,2.43,4.03,0.28,3.19,0.23c-0.4-0.02-1.26,1.04-1.34,1.42
+     L9,10.62c0,0,5.12,1.04,8.08,1.38C14.12,12.34,9,13.38,9,13.38l-7.16,8.96c0.08,0.38,0.94,1.44,1.34,1.42
+     c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"
+        />
+      </g>
+    </svg>
+  ),
+};
+
+export const OREFS = Template.bind({});
+
+OREFS.args = {
+  bullets: [
+    "Unmatched Medical Expertise: Our medical team consists of top-flight doctors and nurses with extensive experience in critical care transport, ensuring the best possible care for your loved one during repatriation.",
+    "Global Reach and 24/7 Availability: We operate a worldwide network of resources, ready to respond to your needs anytime, anywhere. No matter where the medical emergency occurs, we'll get you home safely.",
+    "Personalized Care Coordination: We understand the complexities of medical repatriation. Our dedicated case managers will handle all logistical arrangements, keeping you informed every step of the way.",
+    "Focus on Patient Comfort and Safety: We utilize state-of-the-art medical equipment and customized transportation solutions to ensure a smooth and comfortable journey for your loved one.",
+  ],
+  bulletSVG: (
+    <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24">
+      <g id="Layer_32">
+        <path
+          class="st27"
+          fill="#DD1805"
+          d="M22.15,12c-1.39-0.61-8-3.55-12.14-6.33C5.18,2.43,4.03,0.28,3.19,0.23c-0.4-0.02-1.26,1.04-1.34,1.42
+             L9,10.62c0,0,5.12,1.04,8.08,1.38C14.12,12.34,9,13.38,9,13.38l-7.16,8.96c0.08,0.38,0.94,1.44,1.34,1.42
+             c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"
+        />
+      </g>
+    </svg>
+  ),
+};
+
+export const UMWD = Template.bind({});
+
+UMWD.args = {
+  bullets: [
+    "Unmatched Medical Expertise: Our medical team consists of top-flight doctors and nurses with extensive experience in critical care transport, ensuring the best possible care for your loved one during repatriation.",
+    "Global Reach and 24/7 Availability: We operate a worldwide network of resources, ready to respond to your needs anytime, anywhere. No matter where the medical emergency occurs, we'll get you home safely.",
+    "Personalized Care Coordination: We understand the complexities of medical repatriation. Our dedicated case managers will handle all logistical arrangements, keeping you informed every step of the way.",
+    "Focus on Patient Comfort and Safety: We utilize state-of-the-art medical equipment and customized transportation solutions to ensure a smooth and comfortable journey for your loved one.",
+  ],
+  bulletSVG: (
+    <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24">
+      <g id="Layer_32">
+        <path
+          class="st27"
+          fill="#DD1805"
+          d="M22.15,12c-1.39-0.61-8-3.55-12.14-6.33C5.18,2.43,4.03,0.28,3.19,0.23c-0.4-0.02-1.26,1.04-1.34,1.42
+         L9,10.62c0,0,5.12,1.04,8.08,1.38C14.12,12.34,9,13.38,9,13.38l-7.16,8.96c0.08,0.38,0.94,1.44,1.34,1.42
+         c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"
+        />
+      </g>
+    </svg>
+  ),
+};

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