umwd-components 0.1.65 → 0.1.67

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/FeaturesSection.js +39 -15
  2. package/dist/cjs/components/Page.js +1 -1
  3. package/dist/esm/components/FeaturesSection.js +40 -16
  4. package/dist/esm/components/Page.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/FeaturesSection.tsx +60 -14
  7. package/src/components/Page.js +1 -1
  8. package/src/stories/FeatureSection.stories.js +3 -3
  9. package/src/stories/Page.stories.js +14 -5
package/dist/cjs/components/FeaturesSection.js CHANGED
@@ -43,31 +43,55 @@ function FeatureSection(_ref) {
43
43
  }, /*#__PURE__*/React.createElement(material.Stack, {
44
44
  spacing: 2,
45
45
  direction: "row",
46
+ justifyContent: "stretch",
47
+ flexWrap: "wrap",
46
48
  sx: {
47
- width: "100%",
48
- height: "100%"
49
- }
49
+ width: "100%"
50
+ },
51
+ useFlexGap: true
50
52
  }, feature.map(feature => /*#__PURE__*/React.createElement(material.Card, {
51
53
  key: feature.id,
52
- sx: {
53
- height: "100%",
54
- minHeight: "250px",
55
- width: "32%"
56
- }
57
- }, /*#__PURE__*/React.createElement(material.CardContent, {
58
54
  sx: {
59
55
  display: "flex",
60
56
  flexDirection: "column",
57
+ justifyContent: "space-between",
58
+ flex: 1,
59
+ minWidth: "350px"
60
+ }
61
+ }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
62
+ sx: {
63
+ height: 140,
64
+ display: "grid",
61
65
  alignItems: "center",
62
66
  justifyContent: "center"
63
67
  }
64
- }, getIcon(feature.icon), /*#__PURE__*/React.createElement(material.Typography, {
65
- variant: "h2",
66
- align: "center"
68
+ }, getIcon(feature.icon)), /*#__PURE__*/React.createElement(material.Typography, {
69
+ variant: "h5",
70
+ align: "center",
71
+ component: "div",
72
+ sx: {
73
+ mb: 2
74
+ }
67
75
  }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
68
- variant: "body1",
69
- align: "center"
70
- }, feature.subHeading))))));
76
+ variant: "h6",
77
+ align: "center",
78
+ component: "div",
79
+ sx: {
80
+ mb: 2
81
+ }
82
+ }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(material.Typography, {
83
+ variant: "body2",
84
+ color: "text.secondary",
85
+ component: "div"
86
+ }, feature.subHeading)), /*#__PURE__*/React.createElement(material.CardActions, {
87
+ sx: {
88
+ mb: 0
89
+ }
90
+ }, /*#__PURE__*/React.createElement(material.Button, {
91
+ size: "small"
92
+ }, "Share"), /*#__PURE__*/React.createElement(material.Button, {
93
+ size: "small"
94
+ }, "Learn More"))))));
71
95
  }
72
96
  function CheckIcon(props) {
73
97
  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
package/dist/cjs/components/Page.js CHANGED
@@ -22,7 +22,7 @@ function blockRenderer(block) {
22
22
  key: block.id,
23
23
  data: block
24
24
  });
25
- case "layout.feature-section":
25
+ case "layout.features-section":
26
26
  return /*#__PURE__*/React.createElement(FeaturesSection.FeatureSection, {
27
27
  key: block.id,
28
28
  data: block
package/dist/esm/components/FeaturesSection.js CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
8
8
  import React from 'react';
9
- import { Container, Stack, Card, CardContent, Typography } from '@mui/material';
9
+ import { Container, Stack, Card, CardContent, CardMedia, Typography, CardActions, Button } from '@mui/material';
10
10
 
11
11
  function getIcon(name) {
12
12
  switch (name) {
@@ -41,31 +41,55 @@ function FeatureSection(_ref) {
41
41
  }, /*#__PURE__*/React.createElement(Stack, {
42
42
  spacing: 2,
43
43
  direction: "row",
44
+ justifyContent: "stretch",
45
+ flexWrap: "wrap",
44
46
  sx: {
45
- width: "100%",
46
- height: "100%"
47
- }
47
+ width: "100%"
48
+ },
49
+ useFlexGap: true
48
50
  }, feature.map(feature => /*#__PURE__*/React.createElement(Card, {
49
51
  key: feature.id,
50
- sx: {
51
- height: "100%",
52
- minHeight: "250px",
53
- width: "32%"
54
- }
55
- }, /*#__PURE__*/React.createElement(CardContent, {
56
52
  sx: {
57
53
  display: "flex",
58
54
  flexDirection: "column",
55
+ justifyContent: "space-between",
56
+ flex: 1,
57
+ minWidth: "350px"
58
+ }
59
+ }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardMedia, {
60
+ sx: {
61
+ height: 140,
62
+ display: "grid",
59
63
  alignItems: "center",
60
64
  justifyContent: "center"
61
65
  }
62
- }, getIcon(feature.icon), /*#__PURE__*/React.createElement(Typography, {
63
- variant: "h2",
64
- align: "center"
66
+ }, getIcon(feature.icon)), /*#__PURE__*/React.createElement(Typography, {
67
+ variant: "h5",
68
+ align: "center",
69
+ component: "div",
70
+ sx: {
71
+ mb: 2
72
+ }
65
73
  }, feature.heading), /*#__PURE__*/React.createElement(Typography, {
66
- variant: "body1",
67
- align: "center"
68
- }, feature.subHeading))))));
74
+ variant: "h6",
75
+ align: "center",
76
+ component: "div",
77
+ sx: {
78
+ mb: 2
79
+ }
80
+ }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(Typography, {
81
+ variant: "body2",
82
+ color: "text.secondary",
83
+ component: "div"
84
+ }, feature.subHeading)), /*#__PURE__*/React.createElement(CardActions, {
85
+ sx: {
86
+ mb: 0
87
+ }
88
+ }, /*#__PURE__*/React.createElement(Button, {
89
+ size: "small"
90
+ }, "Share"), /*#__PURE__*/React.createElement(Button, {
91
+ size: "small"
92
+ }, "Learn More"))))));
69
93
  }
70
94
  function CheckIcon(props) {
71
95
  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
package/dist/esm/components/Page.js CHANGED
@@ -18,7 +18,7 @@ function blockRenderer(block) {
18
18
  key: block.id,
19
19
  data: block
20
20
  });
21
- case "layout.feature-section":
21
+ case "layout.features-section":
22
22
  return /*#__PURE__*/React.createElement(FeatureSection, {
23
23
  key: block.id,
24
24
  data: block
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.65",
3
+ "version": "0.1.67",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/FeaturesSection.tsx CHANGED
@@ -1,5 +1,14 @@
1
1
  import React from "react";
2
- import { Stack, Card, CardContent, Typography, Container } from "@mui/material";
2
+ import {
3
+ Stack,
4
+ Card,
5
+ CardContent,
6
+ Typography,
7
+ Container,
8
+ CardMedia,
9
+ CardActions,
10
+ Button,
11
+ } from "@mui/material";
3
12
 
4
13
  function getIcon(name: string) {
5
14
  switch (name) {
@@ -18,6 +27,7 @@ interface FeatureProps {
18
27
  id: number;
19
28
  heading: string;
20
29
  subHeading: string;
30
+ text: string;
21
31
  icon: string;
22
32
  }
23
33
 
@@ -37,28 +47,64 @@ export function FeatureSection({
37
47
  const { feature } = data;
38
48
  return (
39
49
  <Container maxWidth="lg" sx={{ my: 1 }}>
40
- <Stack spacing={2} direction="row" sx={{ width: "100%", height: "100%" }}>
50
+ <Stack
51
+ spacing={2}
52
+ direction="row"
53
+ justifyContent="stretch"
54
+ flexWrap="wrap"
55
+ sx={{ width: "100%" }}
56
+ useFlexGap={true}
57
+ >
41
58
  {feature.map((feature) => (
42
59
  <Card
43
60
  key={feature.id}
44
- sx={{ height: "100%", minHeight: "250px", width: "32%" }}
61
+ sx={{
62
+ display: "flex",
63
+ flexDirection: "column",
64
+ justifyContent: "space-between",
65
+ flex: 1,
66
+ minWidth: "350px",
67
+ }}
45
68
  >
46
- <CardContent
47
- sx={{
48
- display: "flex",
49
- flexDirection: "column",
50
- alignItems: "center",
51
- justifyContent: "center",
52
- }}
53
- >
54
- {getIcon(feature.icon)}
55
- <Typography variant="h2" align="center">
69
+ <CardContent>
70
+ <CardMedia
71
+ sx={{
72
+ height: 140,
73
+ display: "grid",
74
+ alignItems: "center",
75
+ justifyContent: "center",
76
+ }}
77
+ >
78
+ {getIcon(feature.icon)}
79
+ </CardMedia>
80
+ <Typography
81
+ variant="h5"
82
+ align="center"
83
+ component="div"
84
+ sx={{ mb: 2 }}
85
+ >
56
86
  {feature.heading}
57
87
  </Typography>
58
- <Typography variant="body1" align="center">
88
+ <Typography
89
+ variant="h6"
90
+ align="center"
91
+ component="div"
92
+ sx={{ mb: 2 }}
93
+ >
94
+ {feature.subHeading.substring(0, 50)}
95
+ </Typography>
96
+ <Typography
97
+ variant="body2"
98
+ color="text.secondary"
99
+ component="div"
100
+ >
59
101
  {feature.subHeading}
60
102
  </Typography>
61
103
  </CardContent>
104
+ <CardActions sx={{ mb: 0 }}>
105
+ <Button size="small">Share</Button>
106
+ <Button size="small">Learn More</Button>
107
+ </CardActions>
62
108
  </Card>
63
109
  ))}
64
110
  </Stack>
package/src/components/Page.js CHANGED
@@ -10,7 +10,7 @@ function blockRenderer(block) {
10
10
  switch (block.__component) {
11
11
  case "layout.hero-section":
12
12
  return <HeroSection key={block.id} data={block} />;
13
- case "layout.feature-section":
13
+ case "layout.features-section":
14
14
  return <FeatureSection key={block.id} data={block} />;
15
15
  case "layout.text-image-section":
16
16
  return <TextImageSection key={block.id} data={block} />;
package/src/stories/FeatureSection.stories.js CHANGED
@@ -15,7 +15,7 @@ export const Orefs = Template.bind({});
15
15
  Orefs.args = {
16
16
  data: {
17
17
  id: 1,
18
- __component: "custom.feature-section",
18
+ __component: "custom.features-section",
19
19
  title: "Orefs",
20
20
  description: "A place for all your resources",
21
21
  feature: [
@@ -40,7 +40,7 @@ export const AMH = Template.bind({});
40
40
  AMH.args = {
41
41
  data: {
42
42
  id: 2,
43
- __component: "custom.feature-section",
43
+ __component: "custom.features-section",
44
44
  title: "AMH",
45
45
  description: "A place for all your resources",
46
46
  feature: [
@@ -65,7 +65,7 @@ export const UMWD = Template.bind({});
65
65
  UMWD.args = {
66
66
  data: {
67
67
  id: 3,
68
- __component: "custom.feature-section",
68
+ __component: "custom.features-section",
69
69
  title: "UMWD",
70
70
  description: "A place for all your resources",
71
71
  feature: [
package/src/stories/Page.stories.js CHANGED
@@ -34,22 +34,31 @@ HelloWorld.args = {
34
34
  },
35
35
  {
36
36
  id: 2,
37
- __component: "layout.feature-section",
37
+ __component: "layout.features-section",
38
38
  title: "AMH",
39
39
  description: "A place for all your resources",
40
40
  feature: [
41
41
  {
42
42
  id: 1,
43
- heading: "Resources",
44
- subHeading: "A place for all your resources",
43
+ heading: "AIR AMBULANCE",
44
+ subHeading:
45
+ "All our aircraft providers are operational around the clock to ensure the patient gets home the fastest way. Our air ambulances are specifically modified to the highest medical standard. To ensure that patients who are in need of repatriation or evacuation can be transported as efficiently as possible. While upholding the highest international standards for medical treatment during the flight. Our aircrafts can carry up to two stretchers if needed and carry an oxygen capacity of ??? liters. Depending on the patient’s needs, travel distance and urgency of transport, the best type of air ambulance will be advised and provided.",
45
46
  icon: "CLOUD_ICON",
46
47
  },
47
48
  {
48
49
  id: 2,
49
- heading: "Contact",
50
- subHeading: "A place for all your resources",
50
+ heading: "BED TO BED",
51
+ subHeading:
52
+ "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.",
51
53
  icon: "CHECK_ICON",
52
54
  },
55
+ {
56
+ id: 3,
57
+ heading: "COMMERCIAL AIRLINE MEDICAL ESCORT",
58
+ subHeading:
59
+ "Medical transfer by commercial airline is a safe and more cost effective way to travel, if transport by air ambulance is not needed. We can provide medical escorts for necessary treatment and support, to keep the patient safe and comfortable during the flight. Depending on the patient’s diagnosis and condition and also flight options. Transport can be done in first class, business class or with a stretcher in economy class. Our team will help you pick the best way of transport.",
60
+ icon: "CLOCK_ICON",
61
+ },
53
62
  ],
54
63
  },
55
64
  {