umwd-components 0.1.75 → 0.1.77

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/FleetSection.js +47 -24
  2. package/dist/cjs/components/TextImageSection.js +4 -5
  3. package/dist/esm/components/FleetSection.js +48 -25
  4. package/dist/esm/components/TextImageSection.js +4 -5
  5. package/package.json +1 -1
  6. package/src/components/FleetSection.tsx +56 -43
  7. package/src/components/StrapiImage.tsx +1 -1
  8. package/src/components/TextImageSection.tsx +4 -7
  9. package/src/stories/Page.stories.js +4 -4
package/dist/cjs/components/FleetSection.js CHANGED
@@ -9,6 +9,9 @@
9
9
  var React = require('react');
10
10
  var material = require('@mui/material');
11
11
  var StrapiImage = require('./StrapiImage.js');
12
+ var RadarIcon = require('@mui/icons-material/Radar');
13
+ var SpeedIcon = require('@mui/icons-material/Speed');
14
+ var HeightIcon = require('@mui/icons-material/Height');
12
15
 
13
16
  function FleetSection(_ref) {
14
17
  let {
@@ -43,41 +46,61 @@ function FleetSection(_ref) {
43
46
  }, /*#__PURE__*/React.createElement(material.CardHeader, {
44
47
  title: airplane.name,
45
48
  subheader: airplane.description
46
- }), /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
49
+ }), /*#__PURE__*/React.createElement(material.CardMedia, {
47
50
  sx: {
48
- minHeight: 140,
51
+ p: 1,
52
+ height: "max-content"
53
+ }
54
+ }, /*#__PURE__*/React.createElement(material.Paper, {
55
+ sx: {
56
+ p: 1,
57
+ py: "3rem",
58
+ position: "relative",
49
59
  display: "grid",
50
60
  alignItems: "center",
51
61
  justifyContent: "center",
52
- py: 2
53
- }
62
+ height: "100%"
63
+ },
64
+ variant: "outlined"
54
65
  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
55
66
  src: airplane.floorplan.url,
56
67
  alt: airplane.floorplan.alternativeText,
57
68
  width: airplane.floorplan.width,
58
69
  height: airplane.floorplan.height,
59
- style: {}
60
- })), /*#__PURE__*/React.createElement(material.Typography, {
61
- variant: "body2",
62
- color: "text.secondary",
63
- component: "div"
64
- }, /*#__PURE__*/React.createElement("strong", null, "Range:"), " ", airplane.range, " km"), /*#__PURE__*/React.createElement(material.Typography, {
65
- variant: "body2",
66
- color: "text.secondary",
67
- component: "div"
68
- }, /*#__PURE__*/React.createElement("strong", null, "Speed:"), " ", airplane.speed, " km/h"), /*#__PURE__*/React.createElement(material.Typography, {
69
- variant: "body2",
70
- color: "text.secondary",
71
- component: "div"
72
- }, /*#__PURE__*/React.createElement("strong", null, "Ceiling:"), " ", airplane.ceiling, " ft"), /*#__PURE__*/React.createElement(material.Typography, {
73
- variant: "body2",
74
- color: "text.secondary",
75
- component: "div"
76
- }, /*#__PURE__*/React.createElement("strong", null, "Cabin Dimensions:")), /*#__PURE__*/React.createElement(material.Typography, {
70
+ style: {
71
+ objectFit: "contain"
72
+ }
73
+ }), /*#__PURE__*/React.createElement(material.Box, {
74
+ sx: {
75
+ position: "absolute",
76
+ right: "1rem",
77
+ bottom: "1rem"
78
+ }
79
+ }, /*#__PURE__*/React.createElement(material.Typography, {
77
80
  variant: "body2",
78
81
  color: "text.secondary",
79
- component: "div"
80
- }, /*#__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"))))));
82
+ align: "right"
83
+ }, /*#__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, {
84
+ sx: {}
85
+ }, /*#__PURE__*/React.createElement(material.Stack, {
86
+ direction: "row",
87
+ spacing: 1
88
+ }, /*#__PURE__*/React.createElement(material.Chip, {
89
+ label: "Range: ".concat(airplane.range, " km"),
90
+ variant: "filled",
91
+ color: "primary",
92
+ icon: /*#__PURE__*/React.createElement(RadarIcon, null)
93
+ }), /*#__PURE__*/React.createElement(material.Chip, {
94
+ label: "Speed: ".concat(airplane.speed, " km/h"),
95
+ variant: "filled",
96
+ color: "primary",
97
+ icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
98
+ }), /*#__PURE__*/React.createElement(material.Chip, {
99
+ label: "Ceiling: ".concat(airplane.ceiling, " ft"),
100
+ variant: "filled",
101
+ color: "primary",
102
+ icon: /*#__PURE__*/React.createElement(HeightIcon, null)
103
+ })))))));
81
104
  }
82
105
 
83
106
  /*
package/dist/cjs/components/TextImageSection.js CHANGED
@@ -36,14 +36,14 @@ function TextImageSection(_ref) {
36
36
  text,
37
37
  image,
38
38
  reverse = false,
39
- maxWidth = "lg"
39
+ maxWidth
40
40
  } = data;
41
41
 
42
42
  /* TODO Text_content should deal with linebreaks,
43
43
  reading up upon mui-markdown docs is advised */
44
44
 
45
45
  return /*#__PURE__*/React.createElement(material.Container, {
46
- maxWidth: maxWidth,
46
+ maxWidth: maxWidth || "lg",
47
47
  sx: {
48
48
  my: 1
49
49
  }
@@ -72,10 +72,9 @@ function TextImageSection(_ref) {
72
72
  }
73
73
  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
74
74
  alt: image.alt,
75
- style: {},
76
75
  height: image.height,
77
- src: image.url,
78
- width: image.width
76
+ width: image.width,
77
+ src: image.url
79
78
  })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
80
79
  sx: {
81
80
  width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
package/dist/esm/components/FleetSection.js CHANGED
@@ -5,8 +5,11 @@
5
5
  */
6
6
 
7
7
  import React from 'react';
8
- import { Container, Stack, Card, CardHeader, CardContent, CardMedia, Typography } from '@mui/material';
8
+ import { Container, Stack, Card, CardHeader, CardMedia, Paper, Box, Typography, CardContent, Chip } from '@mui/material';
9
9
  import { StrapiImage } from './StrapiImage.js';
10
+ import RadarIcon from '@mui/icons-material/Radar';
11
+ import SpeedIcon from '@mui/icons-material/Speed';
12
+ import HeightIcon from '@mui/icons-material/Height';
10
13
 
11
14
  function FleetSection(_ref) {
12
15
  let {
@@ -41,41 +44,61 @@ function FleetSection(_ref) {
41
44
  }, /*#__PURE__*/React.createElement(CardHeader, {
42
45
  title: airplane.name,
43
46
  subheader: airplane.description
44
- }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardMedia, {
47
+ }), /*#__PURE__*/React.createElement(CardMedia, {
45
48
  sx: {
46
- minHeight: 140,
49
+ p: 1,
50
+ height: "max-content"
51
+ }
52
+ }, /*#__PURE__*/React.createElement(Paper, {
53
+ sx: {
54
+ p: 1,
55
+ py: "3rem",
56
+ position: "relative",
47
57
  display: "grid",
48
58
  alignItems: "center",
49
59
  justifyContent: "center",
50
- py: 2
51
- }
60
+ height: "100%"
61
+ },
62
+ variant: "outlined"
52
63
  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage, {
53
64
  src: airplane.floorplan.url,
54
65
  alt: airplane.floorplan.alternativeText,
55
66
  width: airplane.floorplan.width,
56
67
  height: airplane.floorplan.height,
57
- style: {}
58
- })), /*#__PURE__*/React.createElement(Typography, {
59
- variant: "body2",
60
- color: "text.secondary",
61
- component: "div"
62
- }, /*#__PURE__*/React.createElement("strong", null, "Range:"), " ", airplane.range, " km"), /*#__PURE__*/React.createElement(Typography, {
63
- variant: "body2",
64
- color: "text.secondary",
65
- component: "div"
66
- }, /*#__PURE__*/React.createElement("strong", null, "Speed:"), " ", airplane.speed, " km/h"), /*#__PURE__*/React.createElement(Typography, {
67
- variant: "body2",
68
- color: "text.secondary",
69
- component: "div"
70
- }, /*#__PURE__*/React.createElement("strong", null, "Ceiling:"), " ", airplane.ceiling, " ft"), /*#__PURE__*/React.createElement(Typography, {
71
- variant: "body2",
72
- color: "text.secondary",
73
- component: "div"
74
- }, /*#__PURE__*/React.createElement("strong", null, "Cabin Dimensions:")), /*#__PURE__*/React.createElement(Typography, {
68
+ style: {
69
+ objectFit: "contain"
70
+ }
71
+ }), /*#__PURE__*/React.createElement(Box, {
72
+ sx: {
73
+ position: "absolute",
74
+ right: "1rem",
75
+ bottom: "1rem"
76
+ }
77
+ }, /*#__PURE__*/React.createElement(Typography, {
75
78
  variant: "body2",
76
79
  color: "text.secondary",
77
- component: "div"
78
- }, /*#__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"))))));
80
+ align: "right"
81
+ }, /*#__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(CardContent, {
82
+ sx: {}
83
+ }, /*#__PURE__*/React.createElement(Stack, {
84
+ direction: "row",
85
+ spacing: 1
86
+ }, /*#__PURE__*/React.createElement(Chip, {
87
+ label: "Range: ".concat(airplane.range, " km"),
88
+ variant: "filled",
89
+ color: "primary",
90
+ icon: /*#__PURE__*/React.createElement(RadarIcon, null)
91
+ }), /*#__PURE__*/React.createElement(Chip, {
92
+ label: "Speed: ".concat(airplane.speed, " km/h"),
93
+ variant: "filled",
94
+ color: "primary",
95
+ icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
96
+ }), /*#__PURE__*/React.createElement(Chip, {
97
+ label: "Ceiling: ".concat(airplane.ceiling, " ft"),
98
+ variant: "filled",
99
+ color: "primary",
100
+ icon: /*#__PURE__*/React.createElement(HeightIcon, null)
101
+ })))))));
79
102
  }
80
103
 
81
104
  /*
package/dist/esm/components/TextImageSection.js CHANGED
@@ -32,14 +32,14 @@ function TextImageSection(_ref) {
32
32
  text,
33
33
  image,
34
34
  reverse = false,
35
- maxWidth = "lg"
35
+ maxWidth
36
36
  } = data;
37
37
 
38
38
  /* TODO Text_content should deal with linebreaks,
39
39
  reading up upon mui-markdown docs is advised */
40
40
 
41
41
  return /*#__PURE__*/React.createElement(Container, {
42
- maxWidth: maxWidth,
42
+ maxWidth: maxWidth || "lg",
43
43
  sx: {
44
44
  my: 1
45
45
  }
@@ -68,10 +68,9 @@ function TextImageSection(_ref) {
68
68
  }
69
69
  }, /*#__PURE__*/React.createElement(StrapiImage, {
70
70
  alt: image.alt,
71
- style: {},
72
71
  height: image.height,
73
- src: image.url,
74
- width: image.width
72
+ width: image.width,
73
+ src: image.url
75
74
  })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(Box, {
76
75
  sx: {
77
76
  width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.75",
3
+ "version": "0.1.77",
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
@@ -7,8 +7,14 @@ import {
7
7
  Typography,
8
8
  Container,
9
9
  CardMedia,
10
+ Box,
11
+ Chip,
12
+ Paper,
10
13
  } from "@mui/material";
11
14
  import { StrapiImage } from "./StrapiImage.tsx";
15
+ import RadarIcon from "@mui/icons-material/Radar";
16
+ import SpeedIcon from "@mui/icons-material/Speed";
17
+ import HeightIcon from "@mui/icons-material/Height";
12
18
 
13
19
  interface ImageProps {
14
20
  id: number;
@@ -67,15 +73,23 @@ export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
67
73
  title={airplane.name}
68
74
  subheader={airplane.description}
69
75
  />
70
- <CardContent>
71
- <CardMedia
76
+ <CardMedia
77
+ sx={{
78
+ p: 1,
79
+ height: "max-content",
80
+ }}
81
+ >
82
+ <Paper
72
83
  sx={{
73
- minHeight: 140,
84
+ p: 1,
85
+ py: "3rem",
86
+ position: "relative",
74
87
  display: "grid",
75
88
  alignItems: "center",
76
89
  justifyContent: "center",
77
- py: 2,
90
+ height: "100%",
78
91
  }}
92
+ variant="outlined"
79
93
  >
80
94
  {airplane.floorplan !== null && (
81
95
  <StrapiImage
@@ -83,47 +97,46 @@ export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
83
97
  alt={airplane.floorplan.alternativeText}
84
98
  width={airplane.floorplan.width}
85
99
  height={airplane.floorplan.height}
86
- style={{}}
100
+ style={{ objectFit: "contain" }}
87
101
  />
88
102
  )}
89
- </CardMedia>
90
- <Typography
91
- variant="body2"
92
- color="text.secondary"
93
- component="div"
94
- >
95
- <strong>Range:</strong> {airplane.range} km
96
- </Typography>
97
- <Typography
98
- variant="body2"
99
- color="text.secondary"
100
- component="div"
101
- >
102
- <strong>Speed:</strong> {airplane.speed} km/h
103
- </Typography>
104
- <Typography
105
- variant="body2"
106
- color="text.secondary"
107
- component="div"
108
- >
109
- <strong>Ceiling:</strong> {airplane.ceiling} ft
110
- </Typography>
111
- <Typography
112
- variant="body2"
113
- color="text.secondary"
114
- component="div"
115
- >
116
- <strong>Cabin Dimensions:</strong>
117
- </Typography>
118
- <Typography
119
- variant="body2"
120
- color="text.secondary"
121
- component="div"
122
- >
123
- <strong>H</strong> {airplane.cabinHeight} m <strong>W</strong>{" "}
124
- {airplane.cabinWidth} m <strong>L</strong>{" "}
125
- {airplane.cabinLength} m
126
- </Typography>
103
+ <Box
104
+ sx={{ position: "absolute", right: "1rem", bottom: "1rem" }}
105
+ >
106
+ <Typography
107
+ variant="body2"
108
+ color="text.secondary"
109
+ align="right"
110
+ >
111
+ <strong>Cabin Dimensions:</strong> <strong>H</strong>{" "}
112
+ {airplane.cabinHeight} m <strong>W</strong>{" "}
113
+ {airplane.cabinWidth} m <strong>L</strong>{" "}
114
+ {airplane.cabinLength} m
115
+ </Typography>
116
+ </Box>
117
+ </Paper>
118
+ </CardMedia>
119
+ <CardContent sx={{}}>
120
+ <Stack direction="row" spacing={1}>
121
+ <Chip
122
+ label={`Range: ${airplane.range} km`}
123
+ variant="filled"
124
+ color="primary"
125
+ icon={<RadarIcon />}
126
+ />
127
+ <Chip
128
+ label={`Speed: ${airplane.speed} km/h`}
129
+ variant="filled"
130
+ color="primary"
131
+ icon={<SpeedIcon />}
132
+ />
133
+ <Chip
134
+ label={`Ceiling: ${airplane.ceiling} ft`}
135
+ variant="filled"
136
+ color="primary"
137
+ icon={<HeightIcon />}
138
+ />
139
+ </Stack>
127
140
  </CardContent>
128
141
  </Card>
129
142
  ))}
package/src/components/StrapiImage.tsx CHANGED
@@ -7,7 +7,7 @@ interface StrapiImageProps {
7
7
  alt: string;
8
8
  height: number;
9
9
  width: number;
10
- style: React.CSSProperties;
10
+ style?: React.CSSProperties;
11
11
  }
12
12
 
13
13
  export function StrapiImage({
package/src/components/TextImageSection.tsx CHANGED
@@ -7,8 +7,6 @@ const MuiMarkdown = React.lazy(
7
7
  );
8
8
  import { StrapiImage } from "./StrapiImage.tsx";
9
9
 
10
- type maxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | string;
11
-
12
10
  /*
13
11
  TODO intregrate this interface into StrapiImage.tsx
14
12
 
@@ -32,19 +30,19 @@ interface TextImageSectionProps {
32
30
  alt: string;
33
31
  };
34
32
  reverse: boolean;
35
- maxWidth: maxWidth;
33
+ maxWidth: any;
36
34
  minHeight: string;
37
35
  };
38
36
  }
39
37
 
40
38
  function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
41
- const { title, text, image, reverse = false, maxWidth = "lg" } = data;
39
+ const { title, text, image, reverse = false, maxWidth } = data;
42
40
 
43
41
  /* TODO Text_content should deal with linebreaks,
44
42
  reading up upon mui-markdown docs is advised */
45
43
 
46
44
  return (
47
- <Container maxWidth={maxWidth} sx={{ my: 1 }}>
45
+ <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
48
46
  <Paper sx={{ p: 2 }}>
49
47
  {title && (
50
48
  <Typography
@@ -71,10 +69,9 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
71
69
  >
72
70
  <StrapiImage
73
71
  alt={image.alt}
74
- style={{}}
75
72
  height={image.height}
76
- src={image.url}
77
73
  width={image.width}
74
+ src={image.url}
78
75
  />
79
76
  </Box>
80
77
  )}
package/src/stories/Page.stories.js CHANGED
@@ -244,8 +244,8 @@ AMH.args = {
244
244
  floorplan: {
245
245
  url: "/uploads/CHALLENGER_604_efe6e0309f.png",
246
246
  alt: "Challenger 604 Floor Plan",
247
- width: 550,
248
- height: 250,
247
+ width: 1000,
248
+ height: 282,
249
249
  style: {},
250
250
  },
251
251
  },
@@ -263,8 +263,8 @@ AMH.args = {
263
263
  floorplan: {
264
264
  url: "/uploads/BEECHCRAFT_KING_AIR_200_828251b91c.png",
265
265
  alt: "Challenger 604 Floor Plan",
266
- width: 550,
267
- height: 250,
266
+ width: 1000,
267
+ height: 233,
268
268
  style: {},
269
269
  },
270
270
  },