umwd-components 0.1.46 → 0.1.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,42 @@
1
+ "use client";
2
+ /*
3
+ * UMWD-Components
4
+ * @copyright Jelle Paulus
5
+ * @license MIT
6
+ */
7
+
8
+ 'use strict';
9
+
10
+ Object.defineProperty(exports, '__esModule', { value: true });
11
+
12
+ var React = require('react');
13
+ var PropTypes = require('prop-types');
14
+ var material = require('@mui/material');
15
+ var FiberManualRecordIcon = require('@mui/icons-material/FiberManualRecord');
16
+
17
+ function BulletList({
18
+ bullets,
19
+ bulletSVG
20
+ }) {
21
+ console.log("bulletSVG2", bulletSVG);
22
+ return /*#__PURE__*/React.createElement(material.Stack, {
23
+ spacing: 2
24
+ }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(material.Typography, {
25
+ key: index,
26
+ sx: {
27
+ verticalAlign: "center",
28
+ alignItems: "center",
29
+ justifyContent: "flex-start",
30
+ display: "inline-flex"
31
+ }
32
+ }, bulletSVG ? /*#__PURE__*/React.createElement(material.SvgIcon, {
33
+ sx: {
34
+ mr: 1
35
+ }
36
+ }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
37
+ }
38
+ BulletList.propTypes = {
39
+ bullets: PropTypes.arrayOf(PropTypes.string).isRequired
40
+ };
41
+
42
+ exports.default = BulletList;
@@ -51,12 +51,13 @@ function Footer({
51
51
  VAT_number,
52
52
  company_socials,
53
53
  disclaimer_link,
54
- privacypolicy_link
54
+ privacypolicy_link,
55
+ maxWidth = "lg"
55
56
  }) {
56
57
  return /*#__PURE__*/React.createElement(material.AppBar, {
57
58
  position: "relative"
58
59
  }, /*#__PURE__*/React.createElement(material.Container, {
59
- maxWidth: "xl"
60
+ maxWidth: maxWidth
60
61
  }, /*#__PURE__*/React.createElement(material.Toolbar, {
61
62
  disableGutters: true
62
63
  }, /*#__PURE__*/React.createElement(material.Grid, {
@@ -81,12 +82,20 @@ function Footer({
81
82
  cursor: "pointer",
82
83
  flexDirection: "column",
83
84
  alignItems: "center",
84
- justifyContent: "center"
85
+ justifyContent: "flex-start",
86
+ height: "100%"
85
87
  }
86
88
  }, /*#__PURE__*/React.createElement(material.Typography, {
87
89
  variant: "h6",
88
90
  color: "#ffffff"
89
- }, site_title), logo && /*#__PURE__*/React.createElement(material.Box, null, /*#__PURE__*/React.createElement(Image, {
91
+ }, site_title), logo && /*#__PURE__*/React.createElement(material.Box, {
92
+ sx: {
93
+ display: "flex",
94
+ alignItems: "center",
95
+ justifyContent: "center",
96
+ height: "100%"
97
+ }
98
+ }, /*#__PURE__*/React.createElement(Image, {
90
99
  src: logo.url,
91
100
  width: logo.width,
92
101
  height: logo.height,
@@ -35,6 +35,7 @@ NavBar.propTypes = {
35
35
  name: PropTypes.string.isRequired,
36
36
  url: PropTypes.string.isRequired
37
37
  })),
38
+ maxWidth: PropTypes.string,
38
39
  prominent: PropTypes.bool
39
40
  };
40
41
  function NavBar({
@@ -42,12 +43,12 @@ function NavBar({
42
43
  logo,
43
44
  pages = [],
44
45
  tabs = [],
45
- maxWidth = "xl",
46
- prominent = false
46
+ maxWidth = "lg",
47
+ minHeight = "80px"
47
48
  }) {
48
49
  // handleMobileMenu
49
50
 
50
- const theme = styles.useTheme();
51
+ styles.useTheme();
51
52
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
52
53
  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
53
54
  const handleOpenMobileMenu = e => {
@@ -67,17 +68,12 @@ function NavBar({
67
68
  maxWidth: maxWidth
68
69
  }, /*#__PURE__*/React.createElement(material.Toolbar, {
69
70
  disableGutters: true,
70
- sx: [{
71
- py: 1
72
- }, prominent && {
73
- alignItems: "flex-start",
74
- paddingTop: theme.spacing(4),
75
- paddingBottom: theme.spacing(4),
76
- // Override media queries injected by theme.mixins.toolbar
71
+ sx: {
72
+ py: 1,
77
73
  "@media all": {
78
- minHeight: 128
74
+ minHeight: minHeight
79
75
  }
80
- }]
76
+ }
81
77
  }, /*#__PURE__*/React.createElement(Link, {
82
78
  href: "/",
83
79
  style: {
package/dist/cjs/index.js CHANGED
@@ -16,6 +16,7 @@ var Page = require('./components/Page.js');
16
16
  var Footer = require('./components/Footer.js');
17
17
  var ContactForm = require('./components/ContactForm.js');
18
18
  var WebsitePlaceholder = require('./components/WebsitePlaceholder.js');
19
+ var BulletList = require('./components/BulletList.js');
19
20
 
20
21
 
21
22
 
@@ -29,3 +30,4 @@ exports.Page = Page.default;
29
30
  exports.Footer = Footer.default;
30
31
  exports.ContactForm = ContactForm.default;
31
32
  exports.WebsitePlaceholder = WebsitePlaceholder.default;
33
+ exports.BulletList = BulletList.default;
@@ -0,0 +1,38 @@
1
+ "use client";
2
+ /*
3
+ * UMWD-Components
4
+ * @copyright Jelle Paulus
5
+ * @license MIT
6
+ */
7
+
8
+ import React from 'react';
9
+ import PropTypes from 'prop-types';
10
+ import { Stack, Typography, SvgIcon } from '@mui/material';
11
+ import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
12
+
13
+ function BulletList({
14
+ bullets,
15
+ bulletSVG
16
+ }) {
17
+ console.log("bulletSVG2", bulletSVG);
18
+ return /*#__PURE__*/React.createElement(Stack, {
19
+ spacing: 2
20
+ }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement(Typography, {
21
+ key: index,
22
+ sx: {
23
+ verticalAlign: "center",
24
+ alignItems: "center",
25
+ justifyContent: "flex-start",
26
+ display: "inline-flex"
27
+ }
28
+ }, bulletSVG ? /*#__PURE__*/React.createElement(SvgIcon, {
29
+ sx: {
30
+ mr: 1
31
+ }
32
+ }, bulletSVG) : /*#__PURE__*/React.createElement(FiberManualRecordIcon, null), bullet)));
33
+ }
34
+ BulletList.propTypes = {
35
+ bullets: PropTypes.arrayOf(PropTypes.string).isRequired
36
+ };
37
+
38
+ export { BulletList as default };
@@ -47,12 +47,13 @@ function Footer({
47
47
  VAT_number,
48
48
  company_socials,
49
49
  disclaimer_link,
50
- privacypolicy_link
50
+ privacypolicy_link,
51
+ maxWidth = "lg"
51
52
  }) {
52
53
  return /*#__PURE__*/React.createElement(AppBar, {
53
54
  position: "relative"
54
55
  }, /*#__PURE__*/React.createElement(Container, {
55
- maxWidth: "xl"
56
+ maxWidth: maxWidth
56
57
  }, /*#__PURE__*/React.createElement(Toolbar, {
57
58
  disableGutters: true
58
59
  }, /*#__PURE__*/React.createElement(Grid, {
@@ -77,12 +78,20 @@ function Footer({
77
78
  cursor: "pointer",
78
79
  flexDirection: "column",
79
80
  alignItems: "center",
80
- justifyContent: "center"
81
+ justifyContent: "flex-start",
82
+ height: "100%"
81
83
  }
82
84
  }, /*#__PURE__*/React.createElement(Typography, {
83
85
  variant: "h6",
84
86
  color: "#ffffff"
85
- }, site_title), logo && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Image, {
87
+ }, site_title), logo && /*#__PURE__*/React.createElement(Box, {
88
+ sx: {
89
+ display: "flex",
90
+ alignItems: "center",
91
+ justifyContent: "center",
92
+ height: "100%"
93
+ }
94
+ }, /*#__PURE__*/React.createElement(Image, {
86
95
  src: logo.url,
87
96
  width: logo.width,
88
97
  height: logo.height,
@@ -31,6 +31,7 @@ NavBar.propTypes = {
31
31
  name: PropTypes.string.isRequired,
32
32
  url: PropTypes.string.isRequired
33
33
  })),
34
+ maxWidth: PropTypes.string,
34
35
  prominent: PropTypes.bool
35
36
  };
36
37
  function NavBar({
@@ -38,12 +39,12 @@ function NavBar({
38
39
  logo,
39
40
  pages = [],
40
41
  tabs = [],
41
- maxWidth = "xl",
42
- prominent = false
42
+ maxWidth = "lg",
43
+ minHeight = "80px"
43
44
  }) {
44
45
  // handleMobileMenu
45
46
 
46
- const theme = useTheme();
47
+ useTheme();
47
48
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
48
49
  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
49
50
  const handleOpenMobileMenu = e => {
@@ -63,17 +64,12 @@ function NavBar({
63
64
  maxWidth: maxWidth
64
65
  }, /*#__PURE__*/React.createElement(Toolbar, {
65
66
  disableGutters: true,
66
- sx: [{
67
- py: 1
68
- }, prominent && {
69
- alignItems: "flex-start",
70
- paddingTop: theme.spacing(4),
71
- paddingBottom: theme.spacing(4),
72
- // Override media queries injected by theme.mixins.toolbar
67
+ sx: {
68
+ py: 1,
73
69
  "@media all": {
74
- minHeight: 128
70
+ minHeight: minHeight
75
71
  }
76
- }]
72
+ }
77
73
  }, /*#__PURE__*/React.createElement(Link, {
78
74
  href: "/",
79
75
  style: {
package/dist/esm/index.js CHANGED
@@ -14,3 +14,4 @@ export { default as Page } from './components/Page.js';
14
14
  export { default as Footer } from './components/Footer.js';
15
15
  export { default as ContactForm } from './components/ContactForm.js';
16
16
  export { default as WebsitePlaceholder } from './components/WebsitePlaceholder.js';
17
+ export { default as BulletList } from './components/BulletList.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.46",
3
+ "version": "0.1.48",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
3
+ viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
4
+ <g id="Layer_32">
5
+ <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
6
+ 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
7
+ c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"/>
8
+ </g>
9
+ </svg>
@@ -0,0 +1,38 @@
1
+ "use client";
2
+
3
+ import React from "react";
4
+ import PropTypes from "prop-types";
5
+ import { Stack, SvgIcon, Typography } from "@mui/material";
6
+ import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
7
+
8
+ function BulletList({ bullets, bulletSVG }) {
9
+ console.log("bulletSVG2", bulletSVG);
10
+ return (
11
+ <Stack spacing={2}>
12
+ {bullets.map((bullet, index) => (
13
+ <Typography
14
+ key={index}
15
+ sx={{
16
+ verticalAlign: "center",
17
+ alignItems: "center",
18
+ justifyContent: "flex-start",
19
+ display: "inline-flex",
20
+ }}
21
+ >
22
+ {bulletSVG ? (
23
+ <SvgIcon sx={{ mr: 1 }}>{bulletSVG}</SvgIcon>
24
+ ) : (
25
+ <FiberManualRecordIcon />
26
+ )}
27
+ {bullet}
28
+ </Typography>
29
+ ))}
30
+ </Stack>
31
+ );
32
+ }
33
+
34
+ BulletList.propTypes = {
35
+ bullets: PropTypes.arrayOf(PropTypes.string).isRequired,
36
+ };
37
+
38
+ export default BulletList;
@@ -59,10 +59,11 @@ function Footer({
59
59
  company_socials,
60
60
  disclaimer_link,
61
61
  privacypolicy_link,
62
+ maxWidth = "lg",
62
63
  }) {
63
64
  return (
64
65
  <AppBar position="relative">
65
- <Container maxWidth="xl">
66
+ <Container maxWidth={maxWidth}>
66
67
  <Toolbar disableGutters>
67
68
  <Grid container sx={{ p: 2 }} spacing={2}>
68
69
  <Grid item xs={12} sm={4} align="center">
@@ -73,14 +74,22 @@ function Footer({
73
74
  cursor: "pointer",
74
75
  flexDirection: "column",
75
76
  alignItems: "center",
76
- justifyContent: "center",
77
+ justifyContent: "flex-start",
78
+ height: "100%",
77
79
  }}
78
80
  >
79
81
  <Typography variant="h6" color="#ffffff">
80
82
  {site_title}
81
83
  </Typography>
82
84
  {logo && (
83
- <Box>
85
+ <Box
86
+ sx={{
87
+ display: "flex",
88
+ alignItems: "center",
89
+ justifyContent: "center",
90
+ height: "100%",
91
+ }}
92
+ >
84
93
  <Image
85
94
  src={logo.url}
86
95
  width={logo.width}
@@ -47,6 +47,7 @@ NavBar.propTypes = {
47
47
  url: PropTypes.string.isRequired,
48
48
  })
49
49
  ),
50
+ maxWidth: PropTypes.string,
50
51
  prominent: PropTypes.bool,
51
52
  };
52
53
 
@@ -55,8 +56,8 @@ function NavBar({
55
56
  logo,
56
57
  pages = [],
57
58
  tabs = [],
58
- maxWidth = "xl",
59
- prominent = false,
59
+ maxWidth = "lg",
60
+ minHeight = "80px",
60
61
  }) {
61
62
  // handleMobileMenu
62
63
 
@@ -87,18 +88,12 @@ function NavBar({
87
88
  <Container maxWidth={maxWidth}>
88
89
  <Toolbar
89
90
  disableGutters
90
- sx={[
91
- { py: 1 },
92
- prominent && {
93
- alignItems: "flex-start",
94
- paddingTop: theme.spacing(4),
95
- paddingBottom: theme.spacing(4),
96
- // Override media queries injected by theme.mixins.toolbar
97
- "@media all": {
98
- minHeight: 128,
99
- },
91
+ sx={{
92
+ py: 1,
93
+ "@media all": {
94
+ minHeight: minHeight,
100
95
  },
101
- ]}
96
+ }}
102
97
  >
103
98
  {/* logo and site title for big screens */}
104
99
  <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
package/src/index.js CHANGED
@@ -9,3 +9,4 @@ export { default as Page } from "./components/Page";
9
9
  export { default as Footer } from "./components/Footer";
10
10
  export { default as ContactForm } from "./components/ContactForm";
11
11
  export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
12
+ export { default as BulletList } from "./components/BulletList";
@@ -0,0 +1,87 @@
1
+ import BulletList from "../components/BulletList";
2
+ import React from "react";
3
+ // import bulletSVG from "../../public/AMH/BulletSVG.svg";
4
+ // import { ReactComponent as bulletSVG } from "../../public/AMH/BulletSVG.js";
5
+
6
+ export default {
7
+ title: "UMWD/BulletList",
8
+ component: BulletList,
9
+ };
10
+
11
+ //console.log(<bulletSVG />);
12
+
13
+ const Template = ({ bullets, bulletSVG, ...args }) => (
14
+ <BulletList bullets={bullets} bulletSVG={bulletSVG} />
15
+ );
16
+
17
+ export const AMH = Template.bind({});
18
+
19
+ AMH.args = {
20
+ bullets: [
21
+ "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.",
22
+ "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.",
23
+ "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.",
24
+ "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.",
25
+ ],
26
+ bulletSVG: (
27
+ <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24">
28
+ <g id="Layer_32">
29
+ <path
30
+ class="st27"
31
+ fill="#DD1805"
32
+ 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
33
+ 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
34
+ c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"
35
+ />
36
+ </g>
37
+ </svg>
38
+ ),
39
+ };
40
+
41
+ export const OREFS = Template.bind({});
42
+
43
+ OREFS.args = {
44
+ bullets: [
45
+ "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.",
46
+ "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.",
47
+ "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.",
48
+ "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.",
49
+ ],
50
+ bulletSVG: (
51
+ <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24">
52
+ <g id="Layer_32">
53
+ <path
54
+ class="st27"
55
+ fill="#DD1805"
56
+ 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
57
+ 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
58
+ c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"
59
+ />
60
+ </g>
61
+ </svg>
62
+ ),
63
+ };
64
+
65
+ export const UMWD = Template.bind({});
66
+
67
+ UMWD.args = {
68
+ bullets: [
69
+ "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.",
70
+ "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.",
71
+ "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.",
72
+ "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.",
73
+ ],
74
+ bulletSVG: (
75
+ <svg version="1.1" x="0px" y="0px" viewBox="0 0 24 24">
76
+ <g id="Layer_32">
77
+ <path
78
+ class="st27"
79
+ fill="#DD1805"
80
+ 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
81
+ 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
82
+ c0.84-0.05,1.99-2.2,6.83-5.44C14.15,15.56,20.77,12.61,22.15,12L22.15,12z"
83
+ />
84
+ </g>
85
+ </svg>
86
+ ),
87
+ };
@@ -96,5 +96,5 @@ AMH.args = {
96
96
  },
97
97
  ],
98
98
  maxWidth: "lg",
99
- prominent: true,
99
+ minHeight: "100px",
100
100
  };