umwd-components 0.1.72 → 0.1.74

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.
Files changed (9) hide show
  1. package/dist/cjs/components/IconSection.js +95 -91
  2. package/dist/cjs/components/TextImageSection.js +2 -2
  3. package/dist/esm/components/IconSection.js +96 -92
  4. package/dist/esm/components/TextImageSection.js +1 -1
  5. package/package.json +2 -1
  6. package/src/components/FleetSection.tsx +0 -0
  7. package/src/components/IconSection.tsx +105 -110
  8. package/src/components/TextImageSection.tsx +3 -1
  9. package/src/stories/Page.stories.js +25 -25
package/dist/cjs/components/IconSection.js CHANGED
@@ -6,18 +6,68 @@
6
6
 
7
7
  'use strict';
8
8
 
9
- var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
10
9
  var React = require('react');
11
10
  var material = require('@mui/material');
11
+ var BedroomBabyIcon = require('@mui/icons-material/BedroomBaby');
12
+ var BedroomParentIcon = require('@mui/icons-material/BedroomParent');
13
+ var MonitorHeartIcon = require('@mui/icons-material/MonitorHeart');
14
+ var VaccinesIcon = require('@mui/icons-material/Vaccines');
15
+ var LocalHospitalIcon = require('@mui/icons-material/LocalHospital');
16
+ var MedicalInformationIcon = require('@mui/icons-material/MedicalInformation');
17
+ var MedicalServicesIcon = require('@mui/icons-material/MedicalServices');
18
+ var ChildCareIcon = require('@mui/icons-material/ChildCare');
19
+ var ScreenshotMonitorIcon = require('@mui/icons-material/ScreenshotMonitor');
20
+ var MedicationIcon = require('@mui/icons-material/Medication');
21
+ var BloodtypeIcon = require('@mui/icons-material/Bloodtype');
22
+ var HealingIcon = require('@mui/icons-material/Healing');
23
+ var LocalPharmacyIcon = require('@mui/icons-material/LocalPharmacy');
24
+ var FlightIcon = require('@mui/icons-material/Flight');
25
+ var AirlineSeatFlatIcon = require('@mui/icons-material/AirlineSeatFlat');
26
+ var AccessibleIcon = require('@mui/icons-material/Accessible');
27
+ var PropaneTankIcon = require('@mui/icons-material/PropaneTank');
28
+ var MasksIcon = require('@mui/icons-material/Masks');
29
+ var BoltIcon = require('@mui/icons-material/Bolt');
12
30
 
13
- function getIcon(name) {
14
- switch (name) {
15
- case "CLOCK_ICON":
16
- return /*#__PURE__*/React.createElement(ClockIcon, null);
17
- case "CHECK_ICON":
18
- return /*#__PURE__*/React.createElement(CheckIcon, null);
19
- case "CLOUD_ICON":
20
- return /*#__PURE__*/React.createElement(CloudIcon, null);
31
+ function getIcon(icon) {
32
+ switch (icon) {
33
+ case "BedroomBabyIcon":
34
+ return BedroomBabyIcon;
35
+ case "BedroomParentIcon":
36
+ return BedroomParentIcon;
37
+ case "MonitorHeartIcon":
38
+ return MonitorHeartIcon;
39
+ case "VaccinesIcon":
40
+ return VaccinesIcon;
41
+ case "LocalHospitalIcon":
42
+ return LocalHospitalIcon;
43
+ case "MedicalInformationIcon":
44
+ return MedicalInformationIcon;
45
+ case "MedicalServicesIcon":
46
+ return MedicalServicesIcon;
47
+ case "ChildCareIcon":
48
+ return ChildCareIcon;
49
+ case "ScreenshotMonitorIcon":
50
+ return ScreenshotMonitorIcon;
51
+ case "MedicationIcon":
52
+ return MedicationIcon;
53
+ case "BloodtypeIcon":
54
+ return BloodtypeIcon;
55
+ case "HealingIcon":
56
+ return HealingIcon;
57
+ case "LocalPharmacyIcon":
58
+ return LocalPharmacyIcon;
59
+ case "FlightIcon":
60
+ return FlightIcon;
61
+ case "AirlineSeatFlatIcon":
62
+ return AirlineSeatFlatIcon;
63
+ case "AccessibleIcon":
64
+ return AccessibleIcon;
65
+ case "PropaneTankIcon":
66
+ return PropaneTankIcon;
67
+ case "MasksIcon":
68
+ return MasksIcon;
69
+ case "BoltIcon":
70
+ return BoltIcon;
21
71
  default:
22
72
  return null;
23
73
  }
@@ -37,88 +87,42 @@ function IconSection(_ref) {
37
87
  }, /*#__PURE__*/React.createElement(material.Grid, {
38
88
  container: true,
39
89
  spacing: 2
40
- }, icon.map(icon => /*#__PURE__*/React.createElement(material.Grid, {
41
- item: true,
42
- xs: 12,
43
- sm: 6,
44
- md: 4,
45
- lg: 3
46
- }, /*#__PURE__*/React.createElement(material.Card, {
47
- key: icon.id,
48
- sx: {
49
- display: "flex",
50
- flexDirection: "column",
51
- justifyContent: "space-between",
52
- flex: 1,
53
- height: "100%"
54
- }
55
- }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Typography, {
56
- variant: "h6",
57
- component: "div",
58
- sx: {
59
- mb: 1,
60
- display: "flex",
61
- justifyContent: "start",
62
- alignItems: "center"
63
- }
64
- }, /*#__PURE__*/React.createElement(material.SvgIcon, {
65
- sx: {
66
- mr: 2
67
- }
68
- }, getIcon(icon.icon)), " ", icon.title), /*#__PURE__*/React.createElement(material.Typography, {
69
- variant: "caption",
70
- color: "text.secondary",
71
- component: "div"
72
- }, icon.text)))))));
73
- }
74
- function CheckIcon(props) {
75
- return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
76
- xmlns: "http://www.w3.org/2000/svg",
77
- width: "24",
78
- height: "24",
79
- viewBox: "0 0 24 24",
80
- fill: "none",
81
- stroke: "currentColor",
82
- strokeWidth: "2",
83
- strokeLinecap: "round",
84
- strokeLinejoin: "round"
85
- }), /*#__PURE__*/React.createElement("polyline", {
86
- points: "20 6 9 17 4 12"
87
- }));
88
- }
89
- function ClockIcon(props) {
90
- return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
91
- xmlns: "http://www.w3.org/2000/svg",
92
- width: "24",
93
- height: "24",
94
- viewBox: "0 0 24 24",
95
- fill: "none",
96
- stroke: "currentColor",
97
- strokeWidth: "2",
98
- strokeLinecap: "round",
99
- strokeLinejoin: "round"
100
- }), /*#__PURE__*/React.createElement("circle", {
101
- cx: "12",
102
- cy: "12",
103
- r: "10"
104
- }), /*#__PURE__*/React.createElement("polyline", {
105
- points: "12 6 12 12 16 14"
106
- }));
107
- }
108
- function CloudIcon(props) {
109
- return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
110
- xmlns: "http://www.w3.org/2000/svg",
111
- width: "24",
112
- height: "24",
113
- viewBox: "0 0 24 24",
114
- fill: "none",
115
- stroke: "currentColor",
116
- strokeWidth: "2",
117
- strokeLinecap: "round",
118
- strokeLinejoin: "round"
119
- }), /*#__PURE__*/React.createElement("path", {
120
- d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
121
- }));
90
+ }, icon.map(icon => {
91
+ const Icon = getIcon(icon.icon);
92
+ return /*#__PURE__*/React.createElement(material.Grid, {
93
+ item: true,
94
+ xs: 12,
95
+ sm: 6,
96
+ md: 4,
97
+ lg: 3
98
+ }, /*#__PURE__*/React.createElement(material.Card, {
99
+ key: icon.id,
100
+ sx: {
101
+ display: "flex",
102
+ flexDirection: "column",
103
+ flex: 1,
104
+ height: "100%"
105
+ }
106
+ }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Typography, {
107
+ variant: "h6",
108
+ component: "div",
109
+ sx: {
110
+ display: "flex",
111
+ justifyContent: "start",
112
+ alignItems: "start",
113
+ minHeight: "4.2rem"
114
+ }
115
+ }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
116
+ sx: {
117
+ mt: 0.2,
118
+ mr: 2
119
+ }
120
+ }), icon.title), /*#__PURE__*/React.createElement(material.Typography, {
121
+ variant: "caption",
122
+ color: "text.secondary",
123
+ component: "div"
124
+ }, icon.text))));
125
+ })));
122
126
  }
123
127
 
124
128
  exports.IconSection = IconSection;
package/dist/cjs/components/TextImageSection.js CHANGED
@@ -11,9 +11,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
  var material = require('@mui/material');
14
- var muiMarkdown = require('mui-markdown');
15
14
  var StrapiImage = require('./StrapiImage.js');
16
15
 
16
+ const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
17
17
  function TextImageSection(_ref) {
18
18
  let {
19
19
  data
@@ -72,7 +72,7 @@ function TextImageSection(_ref) {
72
72
  alignItems: "center",
73
73
  justifyContent: "center"
74
74
  }
75
- }, /*#__PURE__*/React.createElement(muiMarkdown.MuiMarkdown, null, text)))));
75
+ }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))));
76
76
  }
77
77
 
78
78
  exports.default = TextImageSection;
package/dist/esm/components/IconSection.js CHANGED
@@ -4,18 +4,68 @@
4
4
  * @license MIT
5
5
  */
6
6
 
7
- import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
8
7
  import React from 'react';
9
- import { Container, Grid, Card, CardContent, Typography, SvgIcon } from '@mui/material';
8
+ import { Container, Grid, Card, CardContent, Typography } from '@mui/material';
9
+ import BedroomBabyIcon from '@mui/icons-material/BedroomBaby';
10
+ import BedroomParentIcon from '@mui/icons-material/BedroomParent';
11
+ import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
12
+ import VaccinesIcon from '@mui/icons-material/Vaccines';
13
+ import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
14
+ import MedicalInformationIcon from '@mui/icons-material/MedicalInformation';
15
+ import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
16
+ import ChildCareIcon from '@mui/icons-material/ChildCare';
17
+ import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
18
+ import MedicationIcon from '@mui/icons-material/Medication';
19
+ import BloodtypeIcon from '@mui/icons-material/Bloodtype';
20
+ import HealingIcon from '@mui/icons-material/Healing';
21
+ import LocalPharmacyIcon from '@mui/icons-material/LocalPharmacy';
22
+ import FlightIcon from '@mui/icons-material/Flight';
23
+ import AirlineSeatFlatIcon from '@mui/icons-material/AirlineSeatFlat';
24
+ import AccessibleIcon from '@mui/icons-material/Accessible';
25
+ import PropaneTankIcon from '@mui/icons-material/PropaneTank';
26
+ import MasksIcon from '@mui/icons-material/Masks';
27
+ import BoltIcon from '@mui/icons-material/Bolt';
10
28
 
11
- function getIcon(name) {
12
- switch (name) {
13
- case "CLOCK_ICON":
14
- return /*#__PURE__*/React.createElement(ClockIcon, null);
15
- case "CHECK_ICON":
16
- return /*#__PURE__*/React.createElement(CheckIcon, null);
17
- case "CLOUD_ICON":
18
- return /*#__PURE__*/React.createElement(CloudIcon, null);
29
+ function getIcon(icon) {
30
+ switch (icon) {
31
+ case "BedroomBabyIcon":
32
+ return BedroomBabyIcon;
33
+ case "BedroomParentIcon":
34
+ return BedroomParentIcon;
35
+ case "MonitorHeartIcon":
36
+ return MonitorHeartIcon;
37
+ case "VaccinesIcon":
38
+ return VaccinesIcon;
39
+ case "LocalHospitalIcon":
40
+ return LocalHospitalIcon;
41
+ case "MedicalInformationIcon":
42
+ return MedicalInformationIcon;
43
+ case "MedicalServicesIcon":
44
+ return MedicalServicesIcon;
45
+ case "ChildCareIcon":
46
+ return ChildCareIcon;
47
+ case "ScreenshotMonitorIcon":
48
+ return ScreenshotMonitorIcon;
49
+ case "MedicationIcon":
50
+ return MedicationIcon;
51
+ case "BloodtypeIcon":
52
+ return BloodtypeIcon;
53
+ case "HealingIcon":
54
+ return HealingIcon;
55
+ case "LocalPharmacyIcon":
56
+ return LocalPharmacyIcon;
57
+ case "FlightIcon":
58
+ return FlightIcon;
59
+ case "AirlineSeatFlatIcon":
60
+ return AirlineSeatFlatIcon;
61
+ case "AccessibleIcon":
62
+ return AccessibleIcon;
63
+ case "PropaneTankIcon":
64
+ return PropaneTankIcon;
65
+ case "MasksIcon":
66
+ return MasksIcon;
67
+ case "BoltIcon":
68
+ return BoltIcon;
19
69
  default:
20
70
  return null;
21
71
  }
@@ -35,88 +85,42 @@ function IconSection(_ref) {
35
85
  }, /*#__PURE__*/React.createElement(Grid, {
36
86
  container: true,
37
87
  spacing: 2
38
- }, icon.map(icon => /*#__PURE__*/React.createElement(Grid, {
39
- item: true,
40
- xs: 12,
41
- sm: 6,
42
- md: 4,
43
- lg: 3
44
- }, /*#__PURE__*/React.createElement(Card, {
45
- key: icon.id,
46
- sx: {
47
- display: "flex",
48
- flexDirection: "column",
49
- justifyContent: "space-between",
50
- flex: 1,
51
- height: "100%"
52
- }
53
- }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Typography, {
54
- variant: "h6",
55
- component: "div",
56
- sx: {
57
- mb: 1,
58
- display: "flex",
59
- justifyContent: "start",
60
- alignItems: "center"
61
- }
62
- }, /*#__PURE__*/React.createElement(SvgIcon, {
63
- sx: {
64
- mr: 2
65
- }
66
- }, getIcon(icon.icon)), " ", icon.title), /*#__PURE__*/React.createElement(Typography, {
67
- variant: "caption",
68
- color: "text.secondary",
69
- component: "div"
70
- }, icon.text)))))));
71
- }
72
- function CheckIcon(props) {
73
- return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
74
- xmlns: "http://www.w3.org/2000/svg",
75
- width: "24",
76
- height: "24",
77
- viewBox: "0 0 24 24",
78
- fill: "none",
79
- stroke: "currentColor",
80
- strokeWidth: "2",
81
- strokeLinecap: "round",
82
- strokeLinejoin: "round"
83
- }), /*#__PURE__*/React.createElement("polyline", {
84
- points: "20 6 9 17 4 12"
85
- }));
86
- }
87
- function ClockIcon(props) {
88
- return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
89
- xmlns: "http://www.w3.org/2000/svg",
90
- width: "24",
91
- height: "24",
92
- viewBox: "0 0 24 24",
93
- fill: "none",
94
- stroke: "currentColor",
95
- strokeWidth: "2",
96
- strokeLinecap: "round",
97
- strokeLinejoin: "round"
98
- }), /*#__PURE__*/React.createElement("circle", {
99
- cx: "12",
100
- cy: "12",
101
- r: "10"
102
- }), /*#__PURE__*/React.createElement("polyline", {
103
- points: "12 6 12 12 16 14"
104
- }));
105
- }
106
- function CloudIcon(props) {
107
- return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
108
- xmlns: "http://www.w3.org/2000/svg",
109
- width: "24",
110
- height: "24",
111
- viewBox: "0 0 24 24",
112
- fill: "none",
113
- stroke: "currentColor",
114
- strokeWidth: "2",
115
- strokeLinecap: "round",
116
- strokeLinejoin: "round"
117
- }), /*#__PURE__*/React.createElement("path", {
118
- d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
119
- }));
88
+ }, icon.map(icon => {
89
+ const Icon = getIcon(icon.icon);
90
+ return /*#__PURE__*/React.createElement(Grid, {
91
+ item: true,
92
+ xs: 12,
93
+ sm: 6,
94
+ md: 4,
95
+ lg: 3
96
+ }, /*#__PURE__*/React.createElement(Card, {
97
+ key: icon.id,
98
+ sx: {
99
+ display: "flex",
100
+ flexDirection: "column",
101
+ flex: 1,
102
+ height: "100%"
103
+ }
104
+ }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Typography, {
105
+ variant: "h6",
106
+ component: "div",
107
+ sx: {
108
+ display: "flex",
109
+ justifyContent: "start",
110
+ alignItems: "start",
111
+ minHeight: "4.2rem"
112
+ }
113
+ }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
114
+ sx: {
115
+ mt: 0.2,
116
+ mr: 2
117
+ }
118
+ }), icon.title), /*#__PURE__*/React.createElement(Typography, {
119
+ variant: "caption",
120
+ color: "text.secondary",
121
+ component: "div"
122
+ }, icon.text))));
123
+ })));
120
124
  }
121
125
 
122
126
  export { IconSection };
package/dist/esm/components/TextImageSection.js CHANGED
@@ -7,9 +7,9 @@
7
7
 
8
8
  import React from 'react';
9
9
  import { Container, Paper, Typography, Stack, Box } from '@mui/material';
10
- import { MuiMarkdown } from 'mui-markdown';
11
10
  import { StrapiImage } from './StrapiImage.js';
12
11
 
12
+ const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
13
13
  function TextImageSection(_ref) {
14
14
  let {
15
15
  data
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.72",
3
+ "version": "0.1.74",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -86,6 +86,7 @@
86
86
  "dependencies": {
87
87
  "@fontsource/material-icons": "^5.0.15",
88
88
  "@fontsource/roboto": "^5.0.12",
89
+ "@material-symbols/svg-400": "^0.17.1",
89
90
  "@mui/types": "^7.2.14",
90
91
  "@rollup/plugin-commonjs": "^25.0.7",
91
92
  "@types/validator": "^13.11.9",
package/src/components/FleetSection.tsx ADDED
File without changes
package/src/components/IconSection.tsx CHANGED
@@ -6,24 +6,29 @@ import {
6
6
  CardContent,
7
7
  Typography,
8
8
  Container,
9
- CardMedia,
10
- CardActions,
11
- Button,
12
9
  SvgIcon,
10
+ Divider,
13
11
  } from "@mui/material";
14
12
 
15
- function getIcon(name: string) {
16
- switch (name) {
17
- case "CLOCK_ICON":
18
- return <ClockIcon />;
19
- case "CHECK_ICON":
20
- return <CheckIcon />;
21
- case "CLOUD_ICON":
22
- return <CloudIcon />;
23
- default:
24
- return null;
25
- }
26
- }
13
+ import BedroomBabyIcon from "@mui/icons-material/BedroomBaby";
14
+ import BedroomParentIcon from "@mui/icons-material/BedroomParent";
15
+ import MonitorHeartIcon from "@mui/icons-material/MonitorHeart";
16
+ import VaccinesIcon from "@mui/icons-material/Vaccines";
17
+ import LocalHospitalIcon from "@mui/icons-material/LocalHospital";
18
+ import MedicalInformationIcon from "@mui/icons-material/MedicalInformation";
19
+ import MedicalServicesIcon from "@mui/icons-material/MedicalServices";
20
+ import ChildCareIcon from "@mui/icons-material/ChildCare";
21
+ import ScreenshotMonitorIcon from "@mui/icons-material/ScreenshotMonitor";
22
+ import MedicationIcon from "@mui/icons-material/Medication";
23
+ import BloodtypeIcon from "@mui/icons-material/Bloodtype";
24
+ import HealingIcon from "@mui/icons-material/Healing";
25
+ import LocalPharmacyIcon from "@mui/icons-material/LocalPharmacy";
26
+ import FlightIcon from "@mui/icons-material/Flight";
27
+ import AirlineSeatFlatIcon from "@mui/icons-material/AirlineSeatFlat";
28
+ import AccessibleIcon from "@mui/icons-material/Accessible";
29
+ import PropaneTankIcon from "@mui/icons-material/PropaneTank";
30
+ import MasksIcon from "@mui/icons-material/Masks";
31
+ import BoltIcon from "@mui/icons-material/Bolt";
27
32
 
28
33
  interface IconProps {
29
34
  id: number;
@@ -40,109 +45,99 @@ interface IconSectionProps {
40
45
  icon: IconProps[];
41
46
  }
42
47
 
48
+ function getIcon(icon: string): React.ElementType | null {
49
+ switch (icon) {
50
+ case "BedroomBabyIcon":
51
+ return BedroomBabyIcon;
52
+ case "BedroomParentIcon":
53
+ return BedroomParentIcon;
54
+ case "MonitorHeartIcon":
55
+ return MonitorHeartIcon;
56
+ case "VaccinesIcon":
57
+ return VaccinesIcon;
58
+ case "LocalHospitalIcon":
59
+ return LocalHospitalIcon;
60
+ case "MedicalInformationIcon":
61
+ return MedicalInformationIcon;
62
+ case "MedicalServicesIcon":
63
+ return MedicalServicesIcon;
64
+ case "ChildCareIcon":
65
+ return ChildCareIcon;
66
+ case "ScreenshotMonitorIcon":
67
+ return ScreenshotMonitorIcon;
68
+ case "MedicationIcon":
69
+ return MedicationIcon;
70
+ case "BloodtypeIcon":
71
+ return BloodtypeIcon;
72
+ case "HealingIcon":
73
+ return HealingIcon;
74
+ case "LocalPharmacyIcon":
75
+ return LocalPharmacyIcon;
76
+ case "FlightIcon":
77
+ return FlightIcon;
78
+ case "AirlineSeatFlatIcon":
79
+ return AirlineSeatFlatIcon;
80
+ case "AccessibleIcon":
81
+ return AccessibleIcon;
82
+ case "PropaneTankIcon":
83
+ return PropaneTankIcon;
84
+ case "MasksIcon":
85
+ return MasksIcon;
86
+ case "BoltIcon":
87
+ return BoltIcon;
88
+ default:
89
+ return null;
90
+ }
91
+ }
92
+
43
93
  export function IconSection({ data }: { readonly data: IconSectionProps }) {
44
94
  const { icon } = data;
45
95
 
46
96
  return (
47
97
  <Container maxWidth="lg" sx={{ my: 1 }}>
48
98
  <Grid container spacing={2}>
49
- {icon.map((icon) => (
50
- <Grid item xs={12} sm={6} md={4} lg={3}>
51
- <Card
52
- key={icon.id}
53
- sx={{
54
- display: "flex",
55
- flexDirection: "column",
56
- justifyContent: "space-between",
57
- flex: 1,
58
- height: "100%",
59
- }}
60
- >
61
- <CardContent>
62
- <Typography
63
- variant="h6"
64
- component="div"
65
- sx={{
66
- mb: 1,
67
- display: "flex",
68
- justifyContent: "start",
69
- alignItems: "center",
70
- }}
71
- >
72
- <SvgIcon sx={{ mr: 2 }}>{getIcon(icon.icon)}</SvgIcon>{" "}
73
- {icon.title}
74
- </Typography>
99
+ {icon.map((icon) => {
100
+ const Icon = getIcon(icon.icon) as React.ElementType | null;
75
101
 
76
- <Typography
77
- variant="caption"
78
- color="text.secondary"
79
- component="div"
80
- >
81
- {icon.text}
82
- </Typography>
83
- </CardContent>
84
- </Card>
85
- </Grid>
86
- ))}
102
+ return (
103
+ <Grid item xs={12} sm={6} md={4} lg={3}>
104
+ <Card
105
+ key={icon.id}
106
+ sx={{
107
+ display: "flex",
108
+ flexDirection: "column",
109
+ flex: 1,
110
+ height: "100%",
111
+ }}
112
+ >
113
+ <CardContent>
114
+ <Typography
115
+ variant="h6"
116
+ component="div"
117
+ sx={{
118
+ display: "flex",
119
+ justifyContent: "start",
120
+ alignItems: "start",
121
+ minHeight: "4.2rem",
122
+ }}
123
+ >
124
+ {Icon !== null && <Icon sx={{ mt: 0.2, mr: 2 }} />}
125
+ {icon.title}
126
+ </Typography>
127
+
128
+ <Typography
129
+ variant="caption"
130
+ color="text.secondary"
131
+ component="div"
132
+ >
133
+ {icon.text}
134
+ </Typography>
135
+ </CardContent>
136
+ </Card>
137
+ </Grid>
138
+ );
139
+ })}
87
140
  </Grid>
88
141
  </Container>
89
142
  );
90
143
  }
91
-
92
- function CheckIcon(props: any) {
93
- return (
94
- <svg
95
- {...props}
96
- xmlns="http://www.w3.org/2000/svg"
97
- width="24"
98
- height="24"
99
- viewBox="0 0 24 24"
100
- fill="none"
101
- stroke="currentColor"
102
- strokeWidth="2"
103
- strokeLinecap="round"
104
- strokeLinejoin="round"
105
- >
106
- <polyline points="20 6 9 17 4 12" />
107
- </svg>
108
- );
109
- }
110
-
111
- function ClockIcon(props: any) {
112
- return (
113
- <svg
114
- {...props}
115
- xmlns="http://www.w3.org/2000/svg"
116
- width="24"
117
- height="24"
118
- viewBox="0 0 24 24"
119
- fill="none"
120
- stroke="currentColor"
121
- strokeWidth="2"
122
- strokeLinecap="round"
123
- strokeLinejoin="round"
124
- >
125
- <circle cx="12" cy="12" r="10" />
126
- <polyline points="12 6 12 12 16 14" />
127
- </svg>
128
- );
129
- }
130
-
131
- function CloudIcon(props: any) {
132
- return (
133
- <svg
134
- {...props}
135
- xmlns="http://www.w3.org/2000/svg"
136
- width="24"
137
- height="24"
138
- viewBox="0 0 24 24"
139
- fill="none"
140
- stroke="currentColor"
141
- strokeWidth="2"
142
- strokeLinecap="round"
143
- strokeLinejoin="round"
144
- >
145
- <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
146
- </svg>
147
- );
148
- }
package/src/components/TextImageSection.tsx CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  import React from "react";
4
4
  import { Box, Container, Paper, Typography, Stack } from "@mui/material";
5
- import { MuiMarkdown } from "mui-markdown";
5
+ const MuiMarkdown = React.lazy(
6
+ () => import(/* webpackChunkName: "mui-markdown" */ "mui-markdown")
7
+ );
6
8
  import { StrapiImage } from "./StrapiImage.tsx";
7
9
 
8
10
  type maxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | string;
package/src/stories/Page.stories.js CHANGED
@@ -87,73 +87,73 @@ HelloWorld.args = {
87
87
  id: 1,
88
88
  title: "INTENSIVE CARE UNIT",
89
89
  text: "Intensive care unit with stretcher and vacuum mattress (adjustable backrest) | oxygen supply, compressed air and vacuum pump | 110/230V + 12/24V power supplies",
90
- icon: "CLOCK_ICON",
90
+ icon: "LocalHospitalIcon",
91
91
  },
92
92
  {
93
93
  id: 2,
94
94
  title: "OXYGEN CAPACITY",
95
95
  text: "4.000 l (per intensive care unit) plus up to 10.800 l in carbon high pressure cylinders",
96
- icon: "CHECK_ICON",
96
+ icon: "PropaneTankIcon",
97
97
  },
98
98
  {
99
99
  id: 3,
100
100
  title: "RESPIRATION SYSTEM",
101
101
  text: "Hamilton T1 | or Hamilton H900 humidifier for: adults, pediatrics, neonates",
102
- icon: "CLOUD_ICON",
102
+ icon: "MasksIcon",
103
103
  },
104
104
  {
105
105
  id: 4,
106
106
  title: "MONITORING",
107
107
  text: "Zoll X Series | T1 (invasive and non-invasive blood pressure measurement, pulse oxymetry, capnometry, temperature measurement, ECG monitoring)",
108
- icon: "CLOCK_ICON",
108
+ icon: "ScreenshotMonitorIcon",
109
109
  },
110
110
  {
111
111
  id: 5,
112
112
  title: "DEFIBRILLATOR",
113
113
  text: "Zoll X Series (with external cardiac pacemaker)",
114
- icon: "CHECK_ICON",
114
+ icon: "MonitorHeartIcon",
115
115
  },
116
116
  {
117
117
  id: 6,
118
118
  title: "AED",
119
119
  text: "Heartsine 350 P",
120
- icon: "CLOUD_ICON",
120
+ icon: "BoltIcon",
121
121
  },
122
122
  {
123
123
  id: 7,
124
124
  title: "SYRINGE PUMPS",
125
125
  text: "Fresenius Agilia Injectomat",
126
- icon: "CLOCK_ICON",
126
+ icon: "VaccinesIcon",
127
127
  },
128
128
  {
129
129
  id: 8,
130
130
  title: "INFUSION PUMPS",
131
131
  text: "Fresenus Agilia Volumat",
132
- icon: "CHECK_ICON",
132
+ icon: "BloodtypeIcon",
133
133
  },
134
134
  {
135
135
  id: 9,
136
136
  title: "PORTABLE SUCTION UNITS",
137
137
  text: "Laerdal LCSU 4",
138
- icon: "CLOUD_ICON",
138
+ icon: "HealingIcon",
139
139
  },
140
140
  {
141
141
  id: 10,
142
142
  title: "EMERGENCY ALS BAGS",
143
143
  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)",
144
- icon: "CLOCK_ICON",
144
+ icon: "MedicalServicesIcon",
145
145
  },
146
146
  {
147
147
  id: 11,
148
148
  title: "MEDICATION",
149
149
  text: "Standard medication for emergency and intensiv care medicine | narcotics | antidotes",
150
- icon: "CHECK_ICON",
150
+ icon: "LocalPharmacyIcon",
151
151
  },
152
152
  {
153
153
  id: 12,
154
154
  title: "PEDIATRIC EQUIPMENT",
155
155
  text: "Babypod transport incubator I & II with Kanmed BabyWarmer | Incubator Dräger | intensive care backpack pediatric | additional emergency and intensive care medicine",
156
- icon: "CLOUD_ICON",
156
+ icon: "ChildCareIcon",
157
157
  },
158
158
  ],
159
159
  },
@@ -213,7 +213,7 @@ AMH.args = {
213
213
  heading: "BED TO BED",
214
214
  subHeading:
215
215
  "We offer bed to bed service. Where we will pick up the patient at the hospital of origin and also bring the patient to the receiving hospital with our medical team. This guarantees the best quality handover to the medical team that will take over the care of the patient at home.",
216
- icon: "CHECK_ICON",
216
+ icon: "CLOCK_ICON",
217
217
  },
218
218
  {
219
219
  id: 3,
@@ -243,73 +243,73 @@ AMH.args = {
243
243
  id: 1,
244
244
  title: "INTENSIVE CARE UNIT",
245
245
  text: "Intensive care unit with stretcher and vacuum mattress (adjustable backrest) | oxygen supply, compressed air and vacuum pump | 110/230V + 12/24V power supplies",
246
- icon: "CLOCK_ICON",
246
+ icon: "LocalHospitalIcon",
247
247
  },
248
248
  {
249
249
  id: 2,
250
250
  title: "OXYGEN CAPACITY",
251
251
  text: "4.000 l (per intensive care unit) plus up to 10.800 l in carbon high pressure cylinders",
252
- icon: "CHECK_ICON",
252
+ icon: "PropaneTankIcon",
253
253
  },
254
254
  {
255
255
  id: 3,
256
256
  title: "RESPIRATION SYSTEM",
257
257
  text: "Hamilton T1 | or Hamilton H900 humidifier for: adults, pediatrics, neonates",
258
- icon: "CLOUD_ICON",
258
+ icon: "MasksIcon",
259
259
  },
260
260
  {
261
261
  id: 4,
262
262
  title: "MONITORING",
263
263
  text: "Zoll X Series | T1 (invasive and non-invasive blood pressure measurement, pulse oxymetry, capnometry, temperature measurement, ECG monitoring)",
264
- icon: "CLOCK_ICON",
264
+ icon: "ScreenshotMonitorIcon",
265
265
  },
266
266
  {
267
267
  id: 5,
268
268
  title: "DEFIBRILLATOR",
269
269
  text: "Zoll X Series (with external cardiac pacemaker)",
270
- icon: "CHECK_ICON",
270
+ icon: "MonitorHeartIcon",
271
271
  },
272
272
  {
273
273
  id: 6,
274
274
  title: "AED",
275
275
  text: "Heartsine 350 P",
276
- icon: "CLOUD_ICON",
276
+ icon: "BoltIcon",
277
277
  },
278
278
  {
279
279
  id: 7,
280
280
  title: "SYRINGE PUMPS",
281
281
  text: "Fresenius Agilia Injectomat",
282
- icon: "CLOCK_ICON",
282
+ icon: "VaccinesIcon",
283
283
  },
284
284
  {
285
285
  id: 8,
286
286
  title: "INFUSION PUMPS",
287
287
  text: "Fresenus Agilia Volumat",
288
- icon: "CHECK_ICON",
288
+ icon: "BloodtypeIcon",
289
289
  },
290
290
  {
291
291
  id: 9,
292
292
  title: "PORTABLE SUCTION UNITS",
293
293
  text: "Laerdal LCSU 4",
294
- icon: "CLOUD_ICON",
294
+ icon: "HealingIcon",
295
295
  },
296
296
  {
297
297
  id: 10,
298
298
  title: "EMERGENCY ALS BAGS",
299
299
  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)",
300
- icon: "CLOCK_ICON",
300
+ icon: "MedicalServicesIcon",
301
301
  },
302
302
  {
303
303
  id: 11,
304
304
  title: "MEDICATION",
305
305
  text: "Standard medication for emergency and intensiv care medicine | narcotics | antidotes",
306
- icon: "CHECK_ICON",
306
+ icon: "LocalPharmacyIcon",
307
307
  },
308
308
  {
309
309
  id: 12,
310
310
  title: "PEDIATRIC EQUIPMENT",
311
311
  text: "Babypod transport incubator I & II with Kanmed BabyWarmer | Incubator Dräger | intensive care backpack pediatric | additional emergency and intensive care medicine",
312
- icon: "CLOUD_ICON",
312
+ icon: "ChildCareIcon",
313
313
  },
314
314
  ],
315
315
  },