umwd-components 0.1.152 → 0.1.154

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 (10) hide show
  1. package/dist/cjs/components/FleetSection.js +12 -8
  2. package/dist/cjs/components/PictureBarSection.js +24 -9
  3. package/dist/cjs/components/StrapiImage.js +2 -2
  4. package/dist/esm/components/FleetSection.js +13 -9
  5. package/dist/esm/components/PictureBarSection.js +25 -10
  6. package/dist/esm/components/StrapiImage.js +2 -2
  7. package/package.json +1 -1
  8. package/src/components/FleetSection.tsx +34 -21
  9. package/src/components/PictureBarSection.tsx +29 -26
  10. package/src/components/StrapiImage.tsx +2 -2
package/dist/cjs/components/FleetSection.js CHANGED
@@ -55,16 +55,19 @@ function FleetSection(_ref) {
55
55
  }, /*#__PURE__*/React.createElement(material.CardHeader, {
56
56
  title: airplane.name,
57
57
  subheader: airplane.description
58
- }), /*#__PURE__*/React.createElement(material.CardMedia, {
58
+ }), /*#__PURE__*/React.createElement(material.Box, {
59
59
  sx: {
60
- p: 1,
61
60
  flex: 1
62
61
  }
62
+ }), /*#__PURE__*/React.createElement(material.CardContent, {
63
+ sx: {
64
+ p: 1,
65
+ height: 180,
66
+ mb: 2
67
+ }
63
68
  }, /*#__PURE__*/React.createElement(material.Paper, {
64
69
  sx: {
65
70
  p: 1,
66
- py: "4rem",
67
- position: "relative",
68
71
  display: "grid",
69
72
  alignItems: "center",
70
73
  justifyContent: "center",
@@ -78,10 +81,9 @@ function FleetSection(_ref) {
78
81
  height: airplane.floorplan.height,
79
82
  style: {
80
83
  objectFit: "contain",
81
- width: "100%",
82
- height: "100%"
84
+ width: "100%"
83
85
  }
84
- }), /*#__PURE__*/React.createElement(material.Box, {
86
+ }), airplane.cabinHeight && airplane.cabinWidth && airplane.cabinLength && /*#__PURE__*/React.createElement(material.Box, {
85
87
  sx: {
86
88
  position: "absolute",
87
89
  right: "1rem",
@@ -92,7 +94,9 @@ function FleetSection(_ref) {
92
94
  color: "text.secondary",
93
95
  align: "right"
94
96
  }, /*#__PURE__*/React.createElement("strong", null, "Cabin Dimensions:"), " ", /*#__PURE__*/React.createElement("strong", null, "H"), " ", airplane.cabinHeight, " m ", /*#__PURE__*/React.createElement("strong", null, "W"), " ", airplane.cabinWidth, " m ", /*#__PURE__*/React.createElement("strong", null, "L"), " ", airplane.cabinLength, " m")))), /*#__PURE__*/React.createElement(material.CardContent, {
95
- sx: {}
97
+ sx: {
98
+ /* height: "33%" */
99
+ }
96
100
  }, /*#__PURE__*/React.createElement(material.Stack, {
97
101
  direction: "row",
98
102
  spacing: 1,
package/dist/cjs/components/PictureBarSection.js CHANGED
@@ -10,6 +10,7 @@
10
10
  var React = require('react');
11
11
  var material = require('@mui/material');
12
12
  var StrapiImage = require('./StrapiImage.js');
13
+ var utils = require('../lib/utils.js');
13
14
 
14
15
  function PictureBarSection(_ref) {
15
16
  let {
@@ -18,9 +19,10 @@ function PictureBarSection(_ref) {
18
19
  const {
19
20
  pictures,
20
21
  maxWidth = "lg",
21
- sx = {}
22
+ sx = {},
23
+ glass = false
22
24
  } = data;
23
- material.useTheme();
25
+ const theme = material.useTheme();
24
26
  return /*#__PURE__*/React.createElement(material.Container, {
25
27
  maxWidth: maxWidth,
26
28
  sx: {
@@ -35,21 +37,34 @@ function PictureBarSection(_ref) {
35
37
  xs: 12
36
38
  }, /*#__PURE__*/React.createElement(material.Paper, {
37
39
  sx: {
38
- p: 2
40
+ p: 2,
41
+ backdropFilter: "blur(3px)",
42
+ backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
43
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
39
44
  }
40
45
  }, /*#__PURE__*/React.createElement(material.Stack, {
41
- direction: "row",
46
+ direction: {
47
+ xs: "column",
48
+ sm: "row"
49
+ },
42
50
  spacing: 2,
43
51
  justifyContent: "space-around"
44
- }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
52
+ }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React.createElement(material.Box, {
53
+ key: picture.id,
54
+ sx: {
55
+ flex: "1 1 0"
56
+ }
57
+ }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
45
58
  src: picture.url,
46
59
  alt: picture.alternativeText,
47
- width: 200,
48
- height: 200,
60
+ width: picture.width,
61
+ height: picture.height,
49
62
  style: {
50
- ...picture.style
63
+ ...picture.style,
64
+ width: "100%",
65
+ height: "auto"
51
66
  }
52
- })))))));
67
+ }))))))));
53
68
  }
54
69
 
55
70
  exports.PictureBarSection = PictureBarSection;
package/dist/cjs/components/StrapiImage.js CHANGED
@@ -14,8 +14,8 @@ function StrapiImage(_ref) {
14
14
  let {
15
15
  src,
16
16
  alt = "",
17
- height = 500,
18
- width = 500,
17
+ height,
18
+ width,
19
19
  style = {}
20
20
  } = _ref;
21
21
  if (!src) return null;
package/dist/esm/components/FleetSection.js CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  import React__default from 'react';
8
- import { useTheme, Container, Stack, Card, CardHeader, CardMedia, Paper, Box, Typography, CardContent, Chip } from '@mui/material';
8
+ import { useTheme, Container, Stack, Card, CardHeader, Box, CardContent, Paper, Typography, Chip } from '@mui/material';
9
9
  import { StrapiImage } from './StrapiImage.js';
10
10
  import RadarIcon from '@mui/icons-material/Radar';
11
11
  import SpeedIcon from '@mui/icons-material/Speed';
@@ -53,16 +53,19 @@ function FleetSection(_ref) {
53
53
  }, /*#__PURE__*/React__default.createElement(CardHeader, {
54
54
  title: airplane.name,
55
55
  subheader: airplane.description
56
- }), /*#__PURE__*/React__default.createElement(CardMedia, {
56
+ }), /*#__PURE__*/React__default.createElement(Box, {
57
57
  sx: {
58
- p: 1,
59
58
  flex: 1
60
59
  }
60
+ }), /*#__PURE__*/React__default.createElement(CardContent, {
61
+ sx: {
62
+ p: 1,
63
+ height: 180,
64
+ mb: 2
65
+ }
61
66
  }, /*#__PURE__*/React__default.createElement(Paper, {
62
67
  sx: {
63
68
  p: 1,
64
- py: "4rem",
65
- position: "relative",
66
69
  display: "grid",
67
70
  alignItems: "center",
68
71
  justifyContent: "center",
@@ -76,10 +79,9 @@ function FleetSection(_ref) {
76
79
  height: airplane.floorplan.height,
77
80
  style: {
78
81
  objectFit: "contain",
79
- width: "100%",
80
- height: "100%"
82
+ width: "100%"
81
83
  }
82
- }), /*#__PURE__*/React__default.createElement(Box, {
84
+ }), airplane.cabinHeight && airplane.cabinWidth && airplane.cabinLength && /*#__PURE__*/React__default.createElement(Box, {
83
85
  sx: {
84
86
  position: "absolute",
85
87
  right: "1rem",
@@ -90,7 +92,9 @@ function FleetSection(_ref) {
90
92
  color: "text.secondary",
91
93
  align: "right"
92
94
  }, /*#__PURE__*/React__default.createElement("strong", null, "Cabin Dimensions:"), " ", /*#__PURE__*/React__default.createElement("strong", null, "H"), " ", airplane.cabinHeight, " m ", /*#__PURE__*/React__default.createElement("strong", null, "W"), " ", airplane.cabinWidth, " m ", /*#__PURE__*/React__default.createElement("strong", null, "L"), " ", airplane.cabinLength, " m")))), /*#__PURE__*/React__default.createElement(CardContent, {
93
- sx: {}
95
+ sx: {
96
+ /* height: "33%" */
97
+ }
94
98
  }, /*#__PURE__*/React__default.createElement(Stack, {
95
99
  direction: "row",
96
100
  spacing: 1,
package/dist/esm/components/PictureBarSection.js CHANGED
@@ -6,8 +6,9 @@
6
6
  */
7
7
 
8
8
  import React__default from 'react';
9
- import { useTheme, Container, Grid, Paper, Stack } from '@mui/material';
9
+ import { useTheme, Container, Grid, Paper, Stack, Box } from '@mui/material';
10
10
  import { StrapiImage } from './StrapiImage.js';
11
+ import { setOpacity } from '../lib/utils.js';
11
12
 
12
13
  function PictureBarSection(_ref) {
13
14
  let {
@@ -16,9 +17,10 @@ function PictureBarSection(_ref) {
16
17
  const {
17
18
  pictures,
18
19
  maxWidth = "lg",
19
- sx = {}
20
+ sx = {},
21
+ glass = false
20
22
  } = data;
21
- useTheme();
23
+ const theme = useTheme();
22
24
  return /*#__PURE__*/React__default.createElement(Container, {
23
25
  maxWidth: maxWidth,
24
26
  sx: {
@@ -33,21 +35,34 @@ function PictureBarSection(_ref) {
33
35
  xs: 12
34
36
  }, /*#__PURE__*/React__default.createElement(Paper, {
35
37
  sx: {
36
- p: 2
38
+ p: 2,
39
+ backdropFilter: "blur(3px)",
40
+ backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
41
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
37
42
  }
38
43
  }, /*#__PURE__*/React__default.createElement(Stack, {
39
- direction: "row",
44
+ direction: {
45
+ xs: "column",
46
+ sm: "row"
47
+ },
40
48
  spacing: 2,
41
49
  justifyContent: "space-around"
42
- }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React__default.createElement(StrapiImage, {
50
+ }, pictures.data && pictures.data.map(picture => /*#__PURE__*/React__default.createElement(Box, {
51
+ key: picture.id,
52
+ sx: {
53
+ flex: "1 1 0"
54
+ }
55
+ }, /*#__PURE__*/React__default.createElement(StrapiImage, {
43
56
  src: picture.url,
44
57
  alt: picture.alternativeText,
45
- width: 200,
46
- height: 200,
58
+ width: picture.width,
59
+ height: picture.height,
47
60
  style: {
48
- ...picture.style
61
+ ...picture.style,
62
+ width: "100%",
63
+ height: "auto"
49
64
  }
50
- })))))));
65
+ }))))))));
51
66
  }
52
67
 
53
68
  export { PictureBarSection };
package/dist/esm/components/StrapiImage.js CHANGED
@@ -12,8 +12,8 @@ function StrapiImage(_ref) {
12
12
  let {
13
13
  src,
14
14
  alt = "",
15
- height = 500,
16
- width = 500,
15
+ height,
16
+ width,
17
17
  style = {}
18
18
  } = _ref;
19
19
  if (!src) return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.152",
3
+ "version": "0.1.154",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/FleetSection.tsx CHANGED
@@ -90,17 +90,17 @@ export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
90
90
  title={airplane.name}
91
91
  subheader={airplane.description}
92
92
  />
93
- <CardMedia
93
+ <Box sx={{ flex: 1 }} />
94
+ <CardContent
94
95
  sx={{
95
96
  p: 1,
96
- flex: 1,
97
+ height: 180,
98
+ mb: 2,
97
99
  }}
98
100
  >
99
101
  <Paper
100
102
  sx={{
101
103
  p: 1,
102
- py: "4rem",
103
- position: "relative",
104
104
  display: "grid",
105
105
  alignItems: "center",
106
106
  justifyContent: "center",
@@ -117,27 +117,40 @@ export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
117
117
  style={{
118
118
  objectFit: "contain",
119
119
  width: "100%",
120
- height: "100%",
121
120
  }}
122
121
  />
123
122
  )}
124
- <Box
125
- sx={{ position: "absolute", right: "1rem", bottom: "1rem" }}
126
- >
127
- <Typography
128
- variant="body2"
129
- color="text.secondary"
130
- align="right"
131
- >
132
- <strong>Cabin Dimensions:</strong> <strong>H</strong>{" "}
133
- {airplane.cabinHeight} m <strong>W</strong>{" "}
134
- {airplane.cabinWidth} m <strong>L</strong>{" "}
135
- {airplane.cabinLength} m
136
- </Typography>
137
- </Box>
123
+ {airplane.cabinHeight &&
124
+ airplane.cabinWidth &&
125
+ airplane.cabinLength && (
126
+ <Box
127
+ sx={{
128
+ position: "absolute",
129
+ right: "1rem",
130
+ bottom: "1rem",
131
+ }}
132
+ >
133
+ <Typography
134
+ variant="body2"
135
+ color="text.secondary"
136
+ align="right"
137
+ >
138
+ <strong>Cabin Dimensions:</strong> <strong>H</strong>{" "}
139
+ {airplane.cabinHeight} m <strong>W</strong>{" "}
140
+ {airplane.cabinWidth} m <strong>L</strong>{" "}
141
+ {airplane.cabinLength} m
142
+ </Typography>
143
+ </Box>
144
+ )}
138
145
  </Paper>
139
- </CardMedia>
140
- <CardContent sx={{}}>
146
+ </CardContent>
147
+ <CardContent
148
+ sx={
149
+ {
150
+ /* height: "33%" */
151
+ }
152
+ }
153
+ >
141
154
  <Stack
142
155
  direction="row"
143
156
  spacing={1}
package/src/components/PictureBarSection.tsx CHANGED
@@ -1,22 +1,10 @@
1
1
  "use client";
2
2
 
3
3
  import React from "react";
4
- import {
5
- Paper,
6
- Typography,
7
- Container,
8
- Grid,
9
- useTheme,
10
- Button,
11
- Stack,
12
- Tooltip,
13
- } from "@mui/material";
4
+ import { Paper, Container, Grid, useTheme, Stack, Box } from "@mui/material";
14
5
  import { StrapiImage } from "./StrapiImage.tsx";
15
- import { Email, LinkedIn } from "@mui/icons-material";
16
- import { BlockRendererClient } from "./BlockRendererClient.tsx";
17
- import { type BlocksContent } from "@strapi/blocks-react-renderer";
18
- import { MuiLink } from "./MuiLink.tsx";
19
6
  import { SxProps, Theme } from "@mui/material/styles";
7
+ import { setOpacity } from "../lib/utils.ts";
20
8
 
21
9
  type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
22
10
 
@@ -37,6 +25,7 @@ interface PictureBarSectionProps {
37
25
  pictures: { data: ImageProps[] };
38
26
  maxWidth: MaxWidth;
39
27
  sx?: SxProps<Theme>;
28
+ glass?: boolean;
40
29
  }
41
30
 
42
31
  export function PictureBarSection({
@@ -44,7 +33,7 @@ export function PictureBarSection({
44
33
  }: {
45
34
  readonly data: PictureBarSectionProps;
46
35
  }) {
47
- const { pictures, maxWidth = "lg", sx = {} } = data;
36
+ const { pictures, maxWidth = "lg", sx = {}, glass = false } = data;
48
37
 
49
38
  const theme = useTheme();
50
39
 
@@ -52,23 +41,37 @@ export function PictureBarSection({
52
41
  <Container maxWidth={maxWidth} sx={{ my: 1, ...sx }}>
53
42
  <Grid container spacing={2}>
54
43
  <Grid item xs={12}>
55
- <Paper sx={{ p: 2 }}>
44
+ <Paper
45
+ sx={{
46
+ p: 2,
47
+ backdropFilter: "blur(3px)",
48
+ backgroundColor: setOpacity(
49
+ theme.palette.background.paper,
50
+ glass ? 0.1 : 1
51
+ ),
52
+ border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
53
+ }}
54
+ >
56
55
  <Stack
57
- direction={"row"}
56
+ direction={{ xs: "column", sm: "row" }}
58
57
  spacing={2}
59
58
  justifyContent={"space-around"}
60
59
  >
61
60
  {pictures.data &&
62
61
  pictures.data.map((picture) => (
63
- <StrapiImage
64
- src={picture.url}
65
- alt={picture.alternativeText}
66
- width={200}
67
- height={200}
68
- style={{
69
- ...picture.style,
70
- }}
71
- />
62
+ <Box key={picture.id} sx={{ flex: "1 1 0" }}>
63
+ <StrapiImage
64
+ src={picture.url}
65
+ alt={picture.alternativeText}
66
+ width={picture.width}
67
+ height={picture.height}
68
+ style={{
69
+ ...picture.style,
70
+ width: "100%",
71
+ height: "auto",
72
+ }}
73
+ />
74
+ </Box>
72
75
  ))}
73
76
  </Stack>
74
77
  </Paper>
package/src/components/StrapiImage.tsx CHANGED
@@ -13,8 +13,8 @@ interface StrapiImageProps {
13
13
  export function StrapiImage({
14
14
  src,
15
15
  alt = "",
16
- height = 500,
17
- width = 500,
16
+ height,
17
+ width,
18
18
  style = {},
19
19
  }: Readonly<StrapiImageProps>) {
20
20
  if (!src) return null;