umwd-components 0.1.75 → 0.1.76

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/FleetSection.js +42 -24
  2. package/dist/esm/components/FleetSection.js +43 -25
  3. package/package.json +1 -1
  4. package/src/components/FleetSection.tsx +54 -42
  5. 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,56 @@ 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
+ }
53
+ }, /*#__PURE__*/React.createElement(material.Paper, {
54
+ sx: {
55
+ p: 1,
56
+ py: 2,
57
+ height: "250px",
58
+ position: "relative",
49
59
  display: "grid",
50
60
  alignItems: "center",
51
- justifyContent: "center",
52
- py: 2
53
- }
61
+ justifyContent: "center"
62
+ },
63
+ variant: "outlined"
54
64
  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
55
65
  src: airplane.floorplan.url,
56
66
  alt: airplane.floorplan.alternativeText,
57
67
  width: airplane.floorplan.width,
58
68
  height: airplane.floorplan.height,
59
69
  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
+ }), /*#__PURE__*/React.createElement(material.Box, {
71
+ sx: {
72
+ position: "absolute",
73
+ right: "1rem",
74
+ bottom: "1rem"
75
+ }
76
+ }, /*#__PURE__*/React.createElement(material.Typography, {
77
77
  variant: "body2",
78
78
  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"))))));
79
+ align: "right"
80
+ }, /*#__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, null, /*#__PURE__*/React.createElement(material.Stack, {
81
+ direction: "row",
82
+ spacing: 1
83
+ }, /*#__PURE__*/React.createElement(material.Chip, {
84
+ label: "Range: ".concat(airplane.range, " km"),
85
+ variant: "filled",
86
+ color: "primary",
87
+ icon: /*#__PURE__*/React.createElement(RadarIcon, null)
88
+ }), /*#__PURE__*/React.createElement(material.Chip, {
89
+ label: "Speed: ".concat(airplane.speed, " km/h"),
90
+ variant: "filled",
91
+ color: "primary",
92
+ icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
93
+ }), /*#__PURE__*/React.createElement(material.Chip, {
94
+ label: "Ceiling: ".concat(airplane.ceiling, " ft"),
95
+ variant: "filled",
96
+ color: "primary",
97
+ icon: /*#__PURE__*/React.createElement(HeightIcon, null)
98
+ })))))));
81
99
  }
82
100
 
83
101
  /*
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,56 @@ 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
+ }
51
+ }, /*#__PURE__*/React.createElement(Paper, {
52
+ sx: {
53
+ p: 1,
54
+ py: 2,
55
+ height: "250px",
56
+ position: "relative",
47
57
  display: "grid",
48
58
  alignItems: "center",
49
- justifyContent: "center",
50
- py: 2
51
- }
59
+ justifyContent: "center"
60
+ },
61
+ variant: "outlined"
52
62
  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage, {
53
63
  src: airplane.floorplan.url,
54
64
  alt: airplane.floorplan.alternativeText,
55
65
  width: airplane.floorplan.width,
56
66
  height: airplane.floorplan.height,
57
67
  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
+ }), /*#__PURE__*/React.createElement(Box, {
69
+ sx: {
70
+ position: "absolute",
71
+ right: "1rem",
72
+ bottom: "1rem"
73
+ }
74
+ }, /*#__PURE__*/React.createElement(Typography, {
75
75
  variant: "body2",
76
76
  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"))))));
77
+ align: "right"
78
+ }, /*#__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, null, /*#__PURE__*/React.createElement(Stack, {
79
+ direction: "row",
80
+ spacing: 1
81
+ }, /*#__PURE__*/React.createElement(Chip, {
82
+ label: "Range: ".concat(airplane.range, " km"),
83
+ variant: "filled",
84
+ color: "primary",
85
+ icon: /*#__PURE__*/React.createElement(RadarIcon, null)
86
+ }), /*#__PURE__*/React.createElement(Chip, {
87
+ label: "Speed: ".concat(airplane.speed, " km/h"),
88
+ variant: "filled",
89
+ color: "primary",
90
+ icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
91
+ }), /*#__PURE__*/React.createElement(Chip, {
92
+ label: "Ceiling: ".concat(airplane.ceiling, " ft"),
93
+ variant: "filled",
94
+ color: "primary",
95
+ icon: /*#__PURE__*/React.createElement(HeightIcon, null)
96
+ })))))));
79
97
  }
80
98
 
81
99
  /*
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.75",
3
+ "version": "0.1.76",
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,22 @@ 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
+ }}
80
+ >
81
+ <Paper
72
82
  sx={{
73
- minHeight: 140,
83
+ p: 1,
84
+ py: 2,
85
+ height: "250px",
86
+ position: "relative",
74
87
  display: "grid",
75
88
  alignItems: "center",
76
89
  justifyContent: "center",
77
- py: 2,
78
90
  }}
91
+ variant="outlined"
79
92
  >
80
93
  {airplane.floorplan !== null && (
81
94
  <StrapiImage
@@ -86,44 +99,43 @@ export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
86
99
  style={{}}
87
100
  />
88
101
  )}
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>
102
+ <Box
103
+ sx={{ position: "absolute", right: "1rem", bottom: "1rem" }}
104
+ >
105
+ <Typography
106
+ variant="body2"
107
+ color="text.secondary"
108
+ align="right"
109
+ >
110
+ <strong>Cabin Dimensions:</strong> <strong>H</strong>{" "}
111
+ {airplane.cabinHeight} m <strong>W</strong>{" "}
112
+ {airplane.cabinWidth} m <strong>L</strong>{" "}
113
+ {airplane.cabinLength} m
114
+ </Typography>
115
+ </Box>
116
+ </Paper>
117
+ </CardMedia>
118
+ <CardContent>
119
+ <Stack direction="row" spacing={1}>
120
+ <Chip
121
+ label={`Range: ${airplane.range} km`}
122
+ variant="filled"
123
+ color="primary"
124
+ icon={<RadarIcon />}
125
+ />
126
+ <Chip
127
+ label={`Speed: ${airplane.speed} km/h`}
128
+ variant="filled"
129
+ color="primary"
130
+ icon={<SpeedIcon />}
131
+ />
132
+ <Chip
133
+ label={`Ceiling: ${airplane.ceiling} ft`}
134
+ variant="filled"
135
+ color="primary"
136
+ icon={<HeightIcon />}
137
+ />
138
+ </Stack>
127
139
  </CardContent>
128
140
  </Card>
129
141
  ))}
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
  },