umwd-components 0.1.94 → 0.1.96

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 (6) hide show
  1. package/dist/cjs/components/HeroSection.js +19 -13
  2. package/dist/esm/components/HeroSection.js +20 -14
  3. package/package.json +1 -1
  4. package/src/components/HeroSection.tsx +42 -34
  5. package/src/stories/HeroSection.stories.js +31 -4
  6. package/src/stories/Page.stories.js +1 -0
package/dist/cjs/components/HeroSection.js CHANGED
@@ -20,7 +20,8 @@ function HeroSection(_ref) {
20
20
  subHeading,
21
21
  bgImage,
22
22
  logoImage,
23
- link
23
+ link,
24
+ maxWidth
24
25
  } = data;
25
26
  return /*#__PURE__*/React.createElement("header", {
26
27
  style: {
@@ -36,7 +37,8 @@ function HeroSection(_ref) {
36
37
  justifyContent: "center",
37
38
  width: "100%",
38
39
  overflow: "hidden",
39
- minHeight: "600px"
40
+ minHeight: "600px",
41
+ py: 6
40
42
  }
41
43
  }, bgImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
42
44
  alt: "Background",
@@ -47,29 +49,33 @@ function HeroSection(_ref) {
47
49
  width: "100%",
48
50
  height: "100%"
49
51
  },
50
- height: 1080,
52
+ height: bgImage.height || 1080,
51
53
  src: bgImage.url,
52
- width: 1920
53
- }), /*#__PURE__*/React.createElement(material.Stack, {
54
- spacing: 2,
55
- alignItems: "center",
56
- justifyContent: "center",
54
+ width: bgImage.width || 1920
55
+ }), /*#__PURE__*/React.createElement(material.Container, {
56
+ maxWidth: maxWidth || "lg",
57
57
  sx: {
58
- width: "max-content",
59
- maxWidth: "600px",
58
+ my: 1,
60
59
  zIndex: 1
61
60
  }
61
+ }, /*#__PURE__*/React.createElement(material.Paper, {
62
+ sx: {
63
+ p: 2
64
+ }
65
+ }, /*#__PURE__*/React.createElement(material.Stack, {
66
+ spacing: 5,
67
+ alignItems: "center",
68
+ justifyContent: "center"
62
69
  }, logoImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
63
70
  alt: logoImage.alternativeText,
64
71
  height: logoImage.height || 100,
65
- style: logoImage.style || {},
66
72
  src: logoImage.url,
67
73
  width: logoImage.width || 100
68
74
  }), /*#__PURE__*/React.createElement(material.Typography, {
69
75
  variant: "h1",
70
76
  align: "center"
71
77
  }, heading), /*#__PURE__*/React.createElement(material.Typography, {
72
- variant: "body1",
78
+ variant: "h3",
73
79
  align: "center"
74
80
  }, subHeading), /*#__PURE__*/React.createElement(Link, {
75
81
  href: link.url
@@ -79,7 +85,7 @@ function HeroSection(_ref) {
79
85
  width: "100%",
80
86
  fontSize: "1.5rem"
81
87
  }
82
- }, link.text)))));
88
+ }, link.text)))))));
83
89
  }
84
90
 
85
91
  exports.HeroSection = HeroSection;
package/dist/esm/components/HeroSection.js CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  import React__default from 'react';
8
8
  import Link from 'next/link';
9
- import { Box, Stack, Typography, Button } from '@mui/material';
9
+ import { Box, Container, Paper, Stack, Typography, Button } from '@mui/material';
10
10
  import { StrapiImage } from './StrapiImage.js';
11
11
 
12
12
  function HeroSection(_ref) {
@@ -18,7 +18,8 @@ function HeroSection(_ref) {
18
18
  subHeading,
19
19
  bgImage,
20
20
  logoImage,
21
- link
21
+ link,
22
+ maxWidth
22
23
  } = data;
23
24
  return /*#__PURE__*/React__default.createElement("header", {
24
25
  style: {
@@ -34,7 +35,8 @@ function HeroSection(_ref) {
34
35
  justifyContent: "center",
35
36
  width: "100%",
36
37
  overflow: "hidden",
37
- minHeight: "600px"
38
+ minHeight: "600px",
39
+ py: 6
38
40
  }
39
41
  }, bgImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
40
42
  alt: "Background",
@@ -45,29 +47,33 @@ function HeroSection(_ref) {
45
47
  width: "100%",
46
48
  height: "100%"
47
49
  },
48
- height: 1080,
50
+ height: bgImage.height || 1080,
49
51
  src: bgImage.url,
50
- width: 1920
51
- }), /*#__PURE__*/React__default.createElement(Stack, {
52
- spacing: 2,
53
- alignItems: "center",
54
- justifyContent: "center",
52
+ width: bgImage.width || 1920
53
+ }), /*#__PURE__*/React__default.createElement(Container, {
54
+ maxWidth: maxWidth || "lg",
55
55
  sx: {
56
- width: "max-content",
57
- maxWidth: "600px",
56
+ my: 1,
58
57
  zIndex: 1
59
58
  }
59
+ }, /*#__PURE__*/React__default.createElement(Paper, {
60
+ sx: {
61
+ p: 2
62
+ }
63
+ }, /*#__PURE__*/React__default.createElement(Stack, {
64
+ spacing: 5,
65
+ alignItems: "center",
66
+ justifyContent: "center"
60
67
  }, logoImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
61
68
  alt: logoImage.alternativeText,
62
69
  height: logoImage.height || 100,
63
- style: logoImage.style || {},
64
70
  src: logoImage.url,
65
71
  width: logoImage.width || 100
66
72
  }), /*#__PURE__*/React__default.createElement(Typography, {
67
73
  variant: "h1",
68
74
  align: "center"
69
75
  }, heading), /*#__PURE__*/React__default.createElement(Typography, {
70
- variant: "body1",
76
+ variant: "h3",
71
77
  align: "center"
72
78
  }, subHeading), /*#__PURE__*/React__default.createElement(Link, {
73
79
  href: link.url
@@ -77,7 +83,7 @@ function HeroSection(_ref) {
77
83
  width: "100%",
78
84
  fontSize: "1.5rem"
79
85
  }
80
- }, link.text)))));
86
+ }, link.text)))))));
81
87
  }
82
88
 
83
89
  export { HeroSection };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.94",
3
+ "version": "0.1.96",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/HeroSection.tsx CHANGED
@@ -1,6 +1,13 @@
1
1
  import React from "react";
2
2
  import Link from "next/link";
3
- import { Box, Button, Stack, Typography } from "@mui/material";
3
+ import {
4
+ Box,
5
+ Button,
6
+ Stack,
7
+ Typography,
8
+ Container,
9
+ Paper,
10
+ } from "@mui/material";
4
11
  import { StrapiImage } from "./StrapiImage.tsx";
5
12
 
6
13
  interface ImageProps {
@@ -27,11 +34,12 @@ interface HeroSectionProps {
27
34
  bgImage?: ImageProps;
28
35
  logoImage?: ImageProps;
29
36
  link: LinkProps;
37
+ maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
30
38
  };
31
39
  }
32
40
 
33
41
  export function HeroSection({ data }: Readonly<HeroSectionProps>) {
34
- const { heading, subHeading, bgImage, logoImage, link } = data;
42
+ const { heading, subHeading, bgImage, logoImage, link, maxWidth } = data;
35
43
 
36
44
  return (
37
45
  <header style={{ position: "relative", padding: 0, margin: 0 }}>
@@ -44,6 +52,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
44
52
  width: "100%",
45
53
  overflow: "hidden",
46
54
  minHeight: "600px",
55
+ py: 6,
47
56
  }}
48
57
  >
49
58
  {bgImage && (
@@ -56,41 +65,40 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
56
65
  width: "100%",
57
66
  height: "100%",
58
67
  }}
59
- height={1080}
68
+ height={bgImage.height || 1080}
60
69
  src={bgImage.url}
61
- width={1920}
70
+ width={bgImage.width || 1920}
62
71
  />
63
72
  )}
64
- <Stack
65
- spacing={2}
66
- alignItems="center"
67
- justifyContent="center"
68
- sx={{ width: "max-content", maxWidth: "600px", zIndex: 1 }}
69
- >
70
- {logoImage && (
71
- <StrapiImage
72
- alt={logoImage.alternativeText}
73
- height={logoImage.height || 100}
74
- style={logoImage.style || {}}
75
- src={logoImage.url}
76
- width={logoImage.width || 100}
77
- />
78
- )}
79
- <Typography variant="h1" align="center">
80
- {heading}
81
- </Typography>
82
- <Typography variant="body1" align="center">
83
- {subHeading}
84
- </Typography>
85
- <Link href={link.url}>
86
- <Button
87
- variant="contained"
88
- sx={{ width: "100%", fontSize: "1.5rem" }}
89
- >
90
- {link.text}
91
- </Button>
92
- </Link>
93
- </Stack>
73
+ <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, zIndex: 1 }}>
74
+ <Paper sx={{ p: 2 }}>
75
+ <Stack spacing={5} alignItems="center" justifyContent="center">
76
+ {logoImage && (
77
+ <StrapiImage
78
+ alt={logoImage.alternativeText}
79
+ height={logoImage.height || 100}
80
+ src={logoImage.url}
81
+ width={logoImage.width || 100}
82
+ />
83
+ )}
84
+
85
+ <Typography variant="h1" align="center">
86
+ {heading}
87
+ </Typography>
88
+ <Typography variant="h3" align="center">
89
+ {subHeading}
90
+ </Typography>
91
+ <Link href={link.url}>
92
+ <Button
93
+ variant="contained"
94
+ sx={{ width: "100%", fontSize: "1.5rem" }}
95
+ >
96
+ {link.text}
97
+ </Button>
98
+ </Link>
99
+ </Stack>
100
+ </Paper>
101
+ </Container>
94
102
  </Box>
95
103
  </header>
96
104
  );
package/src/stories/HeroSection.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { HeroSection } from "../components/custom/HeroSection";
2
+ import { HeroSection } from "../components/HeroSection";
3
3
 
4
4
  export default {
5
5
  title: "UMWD/HeroSection",
@@ -15,7 +15,7 @@ export const Orefs = Template.bind({});
15
15
  Orefs.args = {
16
16
  data: {
17
17
  id: 1,
18
- __component: "custom.hero-section",
18
+ __component: "layout.hero-section",
19
19
  heading: "Orefs",
20
20
  subHeading: "A place for all your resources",
21
21
  image: {
@@ -33,7 +33,7 @@ Orefs.args = {
33
33
 
34
34
  export const AMH = Template.bind({});
35
35
 
36
- AMH.args = {
36
+ /* AMH.args = {
37
37
  data: {
38
38
  id: 2,
39
39
  __component: "custom.hero-section",
@@ -50,6 +50,33 @@ AMH.args = {
50
50
  text: "Resources",
51
51
  },
52
52
  },
53
+ }; */
54
+
55
+ AMH.args = {
56
+ data: {
57
+ id: 1,
58
+ __component: "layout.hero-section",
59
+ heading: null,
60
+ subHeading:
61
+ "We offer world wide, around the clock patient transport by air ambulance. Our aircrafts are equipped with state of the art medical equipment and staffed with highly qualified flying crews and medical teams. We will bring the patient back home, reliable and safely for affordable pricing.",
62
+ bgImage: {
63
+ id: 2,
64
+ name: "dm_masked@2x.png",
65
+ alternativeText: null,
66
+ width: 3841,
67
+ height: 2161,
68
+ url: "/uploads/dm_masked_2x_3eabdcd56c.png",
69
+ },
70
+ logoImage: {
71
+ id: 9,
72
+ name: "Asset 2.png",
73
+ alternativeText: null,
74
+ width: 1000,
75
+ height: 311,
76
+ url: "/uploads/Asset_2_c4a9c4a5d1.png",
77
+ },
78
+ link: { id: 1, url: "/contact", text: "Contact us", isExternal: false },
79
+ },
53
80
  };
54
81
 
55
82
  export const UMWD = Template.bind({});
@@ -57,7 +84,7 @@ export const UMWD = Template.bind({});
57
84
  UMWD.args = {
58
85
  data: {
59
86
  id: 3,
60
- __component: "custom.hero-section",
87
+ __component: "layout.hero-section",
61
88
  heading: "UMWD",
62
89
  subHeading: "A place for all your resources",
63
90
  image: {
package/src/stories/Page.stories.js CHANGED
@@ -155,6 +155,7 @@ export const AMH = Template.bind({});
155
155
 
156
156
  AMH.args = {
157
157
  sx: {
158
+ gap: 2,
158
159
  header: {
159
160
  h1: {
160
161
  color: "red",