umwd-components 0.1.67 → 0.1.68

package/dist/cjs/components/IconSection.js

@@ -0,0 +1,124 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var material = require('@mui/material');
+
+function getIcon(name) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return /*#__PURE__*/React.createElement(ClockIcon, null);
+    case "CHECK_ICON":
+      return /*#__PURE__*/React.createElement(CheckIcon, null);
+    case "CLOUD_ICON":
+      return /*#__PURE__*/React.createElement(CloudIcon, null);
+    default:
+      return null;
+  }
+}
+function IconSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    icon
+  } = data;
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, icon.map(icon => /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3
+  }, /*#__PURE__*/React.createElement(material.Card, {
+    key: icon.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    component: "div",
+    sx: {
+      mb: 1,
+      display: "flex",
+      justifyContent: "start",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.SvgIcon, {
+    sx: {
+      mr: 2
+    }
+  }, getIcon(icon.icon)), " ", icon.title), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "caption",
+    color: "text.secondary",
+    component: "div"
+  }, icon.text)))))));
+}
+function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  }));
+}
+function ClockIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "12 6 12 12 16 14"
+  }));
+}
+function CloudIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+  }));
+}
+
+exports.IconSection = IconSection;

package/dist/cjs/components/Page.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var TextImageSection = require('./TextImageSection.js');
 var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
+var IconSection = require('./IconSection.js');
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -32,6 +33,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.icon-section":
+      return /*#__PURE__*/React.createElement(IconSection.IconSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/esm/components/IconSection.js

@@ -0,0 +1,122 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Container, Grid, Card, CardContent, Typography, SvgIcon } from '@mui/material';
+
+function getIcon(name) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return /*#__PURE__*/React.createElement(ClockIcon, null);
+    case "CHECK_ICON":
+      return /*#__PURE__*/React.createElement(CheckIcon, null);
+    case "CLOUD_ICON":
+      return /*#__PURE__*/React.createElement(CloudIcon, null);
+    default:
+      return null;
+  }
+}
+function IconSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    icon
+  } = data;
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, icon.map(icon => /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    key: icon.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    component: "div",
+    sx: {
+      mb: 1,
+      display: "flex",
+      justifyContent: "start",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(SvgIcon, {
+    sx: {
+      mr: 2
+    }
+  }, getIcon(icon.icon)), " ", icon.title), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "text.secondary",
+    component: "div"
+  }, icon.text)))))));
+}
+function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  }));
+}
+function ClockIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "12 6 12 12 16 14"
+  }));
+}
+function CloudIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+  }));
+}
+
+export { IconSection };

package/dist/esm/components/Page.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import TextImageSection from './TextImageSection.js';
 import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
+import { IconSection } from './IconSection.js';
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -28,6 +29,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.icon-section":
+      return /*#__PURE__*/React.createElement(IconSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/package.json

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

package/src/components/IconSection.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import {
+  Stack,
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  Container,
+  CardMedia,
+  CardActions,
+  Button,
+  SvgIcon,
+} from "@mui/material";
+
+function getIcon(name: string) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return <ClockIcon />;
+    case "CHECK_ICON":
+      return <CheckIcon />;
+    case "CLOUD_ICON":
+      return <CloudIcon />;
+    default:
+      return null;
+  }
+}
+
+interface IconProps {
+  id: number;
+  title: string;
+  text: string;
+  icon: string;
+}
+
+interface IconSectionProps {
+  id: number;
+  __component: string;
+  title: string;
+  description: string;
+  icon: IconProps[];
+}
+
+export function IconSection({ data }: { readonly data: IconSectionProps }) {
+  const { icon } = data;
+
+  return (
+    <Container maxWidth="lg" sx={{ my: 1 }}>
+      <Grid container spacing={2}>
+        {icon.map((icon) => (
+          <Grid item xs={12} sm={6} md={4} lg={3}>
+            <Card
+              key={icon.id}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                flex: 1,
+                height: "100%",
+              }}
+            >
+              <CardContent>
+                <Typography
+                  variant="h6"
+                  component="div"
+                  sx={{
+                    mb: 1,
+                    display: "flex",
+                    justifyContent: "start",
+                    alignItems: "center",
+                  }}
+                >
+                  <SvgIcon sx={{ mr: 2 }}>{getIcon(icon.icon)}</SvgIcon>{" "}
+                  {icon.title}
+                </Typography>
+
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  component="div"
+                >
+                  {icon.text}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Container>
+  );
+}
+
+function CheckIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function ClockIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+function CloudIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+    </svg>
+  );
+}

package/src/components/Page.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import TextImageSection from "./TextImageSection.tsx";
 import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
+import { IconSection } from "./IconSection.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -14,6 +15,8 @@ function blockRenderer(block) {
       return <FeatureSection key={block.id} data={block} />;
     case "layout.text-image-section":
       return <TextImageSection key={block.id} data={block} />;
+    case "layout.icon-section":
+      return <IconSection key={block.id} data={block} />;
     default:
       return null;
   }

package/src/stories/Page.stories.js

@@ -72,5 +72,83 @@ HelloWorld.args = {
       text: "**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface.    *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
       reverse: true,
     },
+    {
+      id: 1,
+      __component: "layout.icon-section",
+      icon: [
+        {
+          id: 1,
+          title: "INTENSIVE CARE UNIT",
+          text: "Intensive care unit with stretcher and vacuum mattress (adjustable backrest) | oxygen supply, compressed air and vacuum pump | 110/230V + 12/24V power supplies",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 2,
+          title: "OXYGEN CAPACITY",
+          text: "4.000 l (per intensive care unit) plus up to 10.800 l in carbon high pressure cylinders",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 3,
+          title: "RESPIRATION SYSTEM",
+          text: "Hamilton T1 | or Hamilton H900 humidifier for: adults, pediatrics, neonates",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 4,
+          title: "MONITORING",
+          text: "Zoll X Series | T1 (invasive and non-invasive blood pressure measurement, pulse oxymetry, capnometry, temperature measurement, ECG monitoring)",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 5,
+          title: "DEFIBRILLATOR",
+          text: "Zoll X Series (with external cardiac pacemaker)",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 6,
+          title: "AED",
+          text: "Heartsine 350 P",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 7,
+          title: "SYRINGE PUMPS",
+          text: "Fresenius Agilia Injectomat",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 8,
+          title: "INFUSION PUMPS",
+          text: "Fresenus Agilia Volumat",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 9,
+          title: "PORTABLE SUCTION UNITS",
+          text: "Laerdal LCSU 4",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 10,
+          title: "EMERGENCY ALS BAGS",
+          text: "Extensive equipment for emergency and intensive care (e.g. videolaryngoscop, chest tube, urinary catheter, arterial catheter, surgical instruments, coniotomy, central venous line, care products)",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 11,
+          title: "MEDICATION",
+          text: "Standard medication for emergency and intensiv care medicine | narcotics | antidotes",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 12,
+          title: "PEDIATRIC EQUIPMENT",
+          text: "Babypod transport incubator I & II with Kanmed BabyWarmer | Incubator Dräger | intensive care backpack pediatric | additional emergency and intensive care medicine",
+          icon: "CLOUD_ICON",
+        },
+      ],
+    },
   ],
 };