umwd-components 0.1.95 → 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 (5) hide show
  1. package/dist/cjs/components/HeroSection.js +17 -10
  2. package/dist/esm/components/HeroSection.js +18 -11
  3. package/package.json +1 -1
  4. package/src/components/HeroSection.tsx +40 -31
  5. package/src/stories/HeroSection.stories.js +4 -4
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",
@@ -50,15 +52,20 @@ function HeroSection(_ref) {
50
52
  height: bgImage.height || 1080,
51
53
  src: bgImage.url,
52
54
  width: bgImage.width || 1920
53
- }), /*#__PURE__*/React.createElement(material.Stack, {
54
- spacing: 2,
55
- alignItems: "center",
56
- justifyContent: "center",
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,
@@ -68,7 +75,7 @@ function HeroSection(_ref) {
68
75
  variant: "h1",
69
76
  align: "center"
70
77
  }, heading), /*#__PURE__*/React.createElement(material.Typography, {
71
- variant: "body1",
78
+ variant: "h3",
72
79
  align: "center"
73
80
  }, subHeading), /*#__PURE__*/React.createElement(Link, {
74
81
  href: link.url
@@ -78,7 +85,7 @@ function HeroSection(_ref) {
78
85
  width: "100%",
79
86
  fontSize: "1.5rem"
80
87
  }
81
- }, link.text)))));
88
+ }, link.text)))))));
82
89
  }
83
90
 
84
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",
@@ -48,15 +50,20 @@ function HeroSection(_ref) {
48
50
  height: bgImage.height || 1080,
49
51
  src: bgImage.url,
50
52
  width: bgImage.width || 1920
51
- }), /*#__PURE__*/React__default.createElement(Stack, {
52
- spacing: 2,
53
- alignItems: "center",
54
- justifyContent: "center",
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,
@@ -66,7 +73,7 @@ function HeroSection(_ref) {
66
73
  variant: "h1",
67
74
  align: "center"
68
75
  }, heading), /*#__PURE__*/React__default.createElement(Typography, {
69
- variant: "body1",
76
+ variant: "h3",
70
77
  align: "center"
71
78
  }, subHeading), /*#__PURE__*/React__default.createElement(Link, {
72
79
  href: link.url
@@ -76,7 +83,7 @@ function HeroSection(_ref) {
76
83
  width: "100%",
77
84
  fontSize: "1.5rem"
78
85
  }
79
- }, link.text)))));
86
+ }, link.text)))))));
80
87
  }
81
88
 
82
89
  export { HeroSection };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.95",
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 && (
@@ -61,35 +70,35 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
61
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
- src={logoImage.url}
75
- width={logoImage.width || 100}
76
- />
77
- )}
78
- <Typography variant="h1" align="center">
79
- {heading}
80
- </Typography>
81
- <Typography variant="body1" align="center">
82
- {subHeading}
83
- </Typography>
84
- <Link href={link.url}>
85
- <Button
86
- variant="contained"
87
- sx={{ width: "100%", fontSize: "1.5rem" }}
88
- >
89
- {link.text}
90
- </Button>
91
- </Link>
92
- </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>
93
102
  </Box>
94
103
  </header>
95
104
  );
package/src/stories/HeroSection.stories.js CHANGED
@@ -69,11 +69,11 @@ AMH.args = {
69
69
  },
70
70
  logoImage: {
71
71
  id: 9,
72
- name: "Airplane Cover-07.png",
72
+ name: "Asset 2.png",
73
73
  alternativeText: null,
74
- width: 1280,
75
- height: 720,
76
- url: "/uploads/Airplane_Cover_07_f71759b898.png",
74
+ width: 1000,
75
+ height: 311,
76
+ url: "/uploads/Asset_2_c4a9c4a5d1.png",
77
77
  },
78
78
  link: { id: 1, url: "/contact", text: "Contact us", isExternal: false },
79
79
  },