@tenancy.nz/tenant-ui 1.10.5 → 1.10.6

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 (13) hide show
  1. package/dist/cjs/components/agency-logo.cjs +22 -8
  2. package/dist/cjs/components/property-card.cjs +26 -47
  3. package/dist/cjs/components/property-card.styled.cjs +1 -1
  4. package/dist/cjs/components/property-horizontal-card-skeleton.cjs +75 -0
  5. package/dist/cjs/components/property-horizontal-card.cjs +96 -0
  6. package/dist/cjs/index.cjs +4 -0
  7. package/dist/esm/components/agency-logo.js +22 -8
  8. package/dist/esm/components/property-card.js +26 -47
  9. package/dist/esm/components/property-card.styled.js +1 -1
  10. package/dist/esm/components/property-horizontal-card-skeleton.js +71 -0
  11. package/dist/esm/components/property-horizontal-card.js +92 -0
  12. package/dist/esm/index.js +2 -0
  13. package/package.json +5 -5
package/dist/cjs/components/agency-logo.cjs CHANGED
@@ -8,14 +8,19 @@ var ui = require('@tenancy.nz/ui');
8
8
 
9
9
  function AgencyLogo(_ref) {
10
10
  var src = _ref.src,
11
- _ref$name = _ref.name,
12
- name = _ref$name === void 0 ? void 0 : _ref$name,
11
+ _ref$title = _ref.title,
12
+ title = _ref$title === void 0 ? void 0 : _ref$title,
13
+ _ref$subtitle = _ref.subtitle,
14
+ subtitle = _ref$subtitle === void 0 ? void 0 : _ref$subtitle,
13
15
  _ref$size = _ref.size,
14
- size = _ref$size === void 0 ? "30px" : _ref$size;
16
+ size = _ref$size === void 0 ? "32px" : _ref$size,
17
+ _ref$sx = _ref.sx,
18
+ sx = _ref$sx === void 0 ? {} : _ref$sx;
15
19
  return /* @__PURE__ */React.createElement(Stack, {
16
20
  flexDirection: "row",
17
- gap: 4,
18
- alignItems: "center"
21
+ gap: 3,
22
+ alignItems: "center",
23
+ sx: sx
19
24
  }, /* @__PURE__ */React.createElement(Stack, {
20
25
  alignItems: "center",
21
26
  justifyContent: "center",
@@ -30,9 +35,18 @@ function AgencyLogo(_ref) {
30
35
  }, /* @__PURE__ */React.createElement("img", {
31
36
  src: src,
32
37
  alt: "Logo"
33
- })), name && /* @__PURE__ */React.createElement(ui.Text, {
34
- weight: "600"
35
- }, name));
38
+ })), /* @__PURE__ */React.createElement(Stack, null, title && /* @__PURE__ */React.createElement(ui.Text, {
39
+ weight: "500",
40
+ variant: "body2",
41
+ color: "textPrimary"
42
+ }, title), subtitle && /* @__PURE__ */React.createElement(ui.Text, {
43
+ weight: "500",
44
+ color: "textSecondary",
45
+ variant: "inherit",
46
+ sx: {
47
+ fontSize: "12px"
48
+ }
49
+ }, subtitle)));
36
50
  }
37
51
 
38
52
  exports.default = AgencyLogo;
package/dist/cjs/components/property-card.cjs CHANGED
@@ -29,8 +29,6 @@ function PropertyCard(_ref) {
29
29
  fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight,
30
30
  _ref$onClick = _ref.onClick,
31
31
  onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
32
- _ref$orientation = _ref.orientation,
33
- orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
34
32
  _ref$parkingSpaces = _ref.parkingSpaces,
35
33
  parkingSpaces = _ref$parkingSpaces === void 0 ? void 0 : _ref$parkingSpaces,
36
34
  _ref$header = _ref.header,
@@ -39,13 +37,6 @@ function PropertyCard(_ref) {
39
37
  photoSrc = _ref$photoSrc === void 0 ? "" : _ref$photoSrc,
40
38
  _ref$rent = _ref.rent,
41
39
  rent = _ref$rent === void 0 ? "" : _ref$rent;
42
- var footerSlot = footer && /* @__PURE__ */React.createElement(Stack, {
43
- mt: "auto",
44
- sx: {
45
- borderTop: "1px solid",
46
- borderTopColor: "grey.300"
47
- }
48
- }, footer);
49
40
  return /* @__PURE__ */React.createElement(Stack, {
50
41
  onClick: onClick,
51
42
  sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
@@ -61,69 +52,57 @@ function PropertyCard(_ref) {
61
52
  })
62
53
  }, /* @__PURE__ */React.createElement(ui.Paper, {
63
54
  overflow: false,
64
- sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
65
- display: "flex"
66
- }, orientation === "vertical" && {
55
+ sx: _rollupPluginBabelHelpers.objectSpread2({
56
+ display: "flex",
67
57
  flexDirection: "column"
68
- }), orientation === "horizontal" && {
69
- flexDirection: {
70
- xs: "column",
71
- md: "row"
72
- }
73
- }), fullHeight && {
58
+ }, fullHeight && {
74
59
  height: "100%"
75
60
  })
76
61
  }, /* @__PURE__ */React.createElement(Stack, {
77
62
  sx: {
78
63
  width: "100%",
79
64
  maxWidth: {
80
- md: orientation === "horizontal" ? "308px" : "100%"
65
+ md: "100%"
81
66
  }
82
67
  }
83
68
  }, header, /* @__PURE__ */React.createElement(propertyCard_styled.StyledPropertyItemImgWrapper, {
84
- orientation: orientation
69
+ orientation: "vertical"
85
70
  }, photoSrc && /* @__PURE__ */React.createElement(ui.Media, {
86
71
  src: photoSrc,
87
72
  title: addressPart1,
88
73
  as: "img"
89
- })), orientation === "horizontal" && footerSlot), /* @__PURE__ */React.createElement(Stack, {
90
- p: orientation === "vertical" ? 4 : {
91
- xs: 4,
92
- md: 8
93
- },
74
+ }))), /* @__PURE__ */React.createElement(Stack, {
75
+ p: 4,
94
76
  position: "relative",
95
- gap: 2,
77
+ gap: 4,
96
78
  flex: 1
97
79
  }, /* @__PURE__ */React.createElement(Stack, {
98
- flexDirection: "row",
99
- gap: 2,
100
- alignItems: "center"
101
- }, /* @__PURE__ */React.createElement(Stack, {
102
- gap: 1
80
+ gap: 2
103
81
  }, /* @__PURE__ */React.createElement(ui.Heading, {
104
- as: "h4"
82
+ as: "h4",
83
+ color: "primary"
105
84
  }, addressPart1), /* @__PURE__ */React.createElement(ui.Text, {
106
85
  sx: {
107
86
  fontSize: "12px"
108
87
  },
109
- weight: "500"
110
- }, addressPart2)), action && /* @__PURE__ */React.createElement(Stack, {
111
- ml: "auto"
112
- }, action)), content, /* @__PURE__ */React.createElement(Stack, {
113
- flexDirection: "row",
114
- alignItems: "center",
115
- mt: "auto",
116
- pt: 4
117
- }, /* @__PURE__ */React.createElement(propertyAttributes.default, {
88
+ weight: "500",
89
+ color: "secondary"
90
+ }, addressPart2)), rent && /* @__PURE__ */React.createElement(rentIconLabel.default, {
91
+ text: rent
92
+ }), /* @__PURE__ */React.createElement(propertyAttributes.default, {
118
93
  noOfBedrooms: bedrooms,
119
94
  noOfBathrooms: bathrooms,
120
95
  noOfCarparks: parkingSpaces
121
- }), rent && /* @__PURE__ */React.createElement(rentIconLabel.default, {
122
- text: rent,
123
- sx: {
124
- ml: "auto"
125
- }
126
- }))), orientation === "vertical" && footerSlot));
96
+ }), (content || action) && /* @__PURE__ */React.createElement(Stack, {
97
+ direction: "row",
98
+ gap: 2,
99
+ alignItems: "center"
100
+ }, content && /* @__PURE__ */React.createElement(Stack, {
101
+ alignItems: "flex-start"
102
+ }, content), action && /* @__PURE__ */React.createElement(Stack, {
103
+ ml: "auto",
104
+ flexShrink: 0
105
+ }, action))), footer));
127
106
  }
128
107
 
129
108
  exports.default = PropertyCard;
package/dist/cjs/components/property-card.styled.cjs CHANGED
@@ -10,7 +10,7 @@ var verticalStyles = function verticalStyles() {
10
10
  };
11
11
  var horizontalStyles = function horizontalStyles(_ref) {
12
12
  var theme = _ref.theme;
13
- return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", " {\n ", "\n }\n\n ", " {\n flex: 1;\n min-height: 220px;\n width: 100%;\n max-width: 308px;\n }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
13
+ return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", " {\n ", "\n }\n\n ", " {\n flex: 1;\n min-height: 166px;\n width: 100%;\n max-width: 180px;\n }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
14
14
  };
15
15
  var StyledPropertyItemImgWrapper = styled.figure(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref2) {
16
16
  var orientation = _ref2.orientation,
package/dist/cjs/components/property-horizontal-card-skeleton.cjs ADDED
@@ -0,0 +1,75 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
6
+ var React = require('react');
7
+ var Stack = require('@mui/material/Stack');
8
+ var ui = require('@tenancy.nz/ui');
9
+
10
+ function PropertyHorizontalCardSkeleton(_ref) {
11
+ var _ref$fullHeight = _ref.fullHeight,
12
+ fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight;
13
+ return /* @__PURE__ */React.createElement(Stack, {
14
+ sx: _rollupPluginBabelHelpers.objectSpread2({}, fullHeight && {
15
+ height: "100%"
16
+ })
17
+ }, /* @__PURE__ */React.createElement(ui.Paper, {
18
+ overflow: false,
19
+ sx: _rollupPluginBabelHelpers.objectSpread2({
20
+ display: "flex",
21
+ flexDirection: {
22
+ xs: "column",
23
+ md: "row"
24
+ }
25
+ }, fullHeight && {
26
+ height: "100%"
27
+ })
28
+ }, /* @__PURE__ */React.createElement(Stack, {
29
+ sx: {
30
+ width: "100%",
31
+ maxWidth: {
32
+ md: "180px"
33
+ }
34
+ }
35
+ }, /* @__PURE__ */React.createElement(ui.Skeleton, {
36
+ variant: "rectangular",
37
+ sx: {
38
+ width: "100%",
39
+ height: {
40
+ xs: "220px",
41
+ md: "100%"
42
+ },
43
+ minHeight: {
44
+ md: "166px"
45
+ },
46
+ flex: {
47
+ md: 1
48
+ }
49
+ }
50
+ })), /* @__PURE__ */React.createElement(Stack, {
51
+ p: 4,
52
+ position: "relative",
53
+ gap: 4,
54
+ flex: 1
55
+ }, /* @__PURE__ */React.createElement(Stack, {
56
+ gap: 2
57
+ }, /* @__PURE__ */React.createElement(ui.Skeleton, {
58
+ variant: "text",
59
+ width: "60%",
60
+ height: 24
61
+ }), /* @__PURE__ */React.createElement(ui.Skeleton, {
62
+ variant: "text",
63
+ width: "50%",
64
+ height: 16
65
+ })), /* @__PURE__ */React.createElement(Stack, {
66
+ mt: "auto",
67
+ pt: 4
68
+ }, /* @__PURE__ */React.createElement(ui.Skeleton, {
69
+ variant: "text",
70
+ width: "100%",
71
+ height: 40
72
+ })))));
73
+ }
74
+
75
+ exports.default = PropertyHorizontalCardSkeleton;
package/dist/cjs/components/property-horizontal-card.cjs ADDED
@@ -0,0 +1,96 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
6
+ var React = require('react');
7
+ var Stack = require('@mui/material/Stack');
8
+ var ui = require('@tenancy.nz/ui');
9
+ var propertyCard_styled = require('./property-card.styled.cjs');
10
+
11
+ function PropertyHorizontalCard(_ref) {
12
+ var _ref$action = _ref.action,
13
+ action = _ref$action === void 0 ? void 0 : _ref$action,
14
+ _ref$addressPart = _ref.addressPart1,
15
+ addressPart1 = _ref$addressPart === void 0 ? "" : _ref$addressPart,
16
+ _ref$addressPart2 = _ref.addressPart2,
17
+ addressPart2 = _ref$addressPart2 === void 0 ? "" : _ref$addressPart2,
18
+ _ref$content = _ref.content,
19
+ content = _ref$content === void 0 ? void 0 : _ref$content,
20
+ _ref$footer = _ref.footer,
21
+ footer = _ref$footer === void 0 ? void 0 : _ref$footer,
22
+ _ref$fullHeight = _ref.fullHeight,
23
+ fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight,
24
+ _ref$onClick = _ref.onClick,
25
+ onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
26
+ _ref$header = _ref.header,
27
+ header = _ref$header === void 0 ? void 0 : _ref$header,
28
+ _ref$photoSrc = _ref.photoSrc,
29
+ photoSrc = _ref$photoSrc === void 0 ? "" : _ref$photoSrc;
30
+ return /* @__PURE__ */React.createElement(Stack, {
31
+ onClick: onClick,
32
+ sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
33
+ transition: "all 0.25s ease-out",
34
+ cursor: "default"
35
+ }, fullHeight && {
36
+ height: "100%"
37
+ }), typeof onClick === "function" && {
38
+ cursor: "pointer",
39
+ "&:hover": {
40
+ transform: "translateY(-6px)"
41
+ }
42
+ })
43
+ }, /* @__PURE__ */React.createElement(ui.Paper, {
44
+ overflow: false,
45
+ sx: _rollupPluginBabelHelpers.objectSpread2({
46
+ display: "flex",
47
+ flexDirection: {
48
+ xs: "column",
49
+ md: "row"
50
+ }
51
+ }, fullHeight && {
52
+ height: "100%"
53
+ })
54
+ }, /* @__PURE__ */React.createElement(Stack, {
55
+ sx: {
56
+ width: "100%",
57
+ maxWidth: {
58
+ md: "180px"
59
+ }
60
+ }
61
+ }, header, /* @__PURE__ */React.createElement(propertyCard_styled.StyledPropertyItemImgWrapper, {
62
+ orientation: "horizontal"
63
+ }, photoSrc && /* @__PURE__ */React.createElement(ui.Media, {
64
+ src: photoSrc,
65
+ title: addressPart1,
66
+ as: "img"
67
+ }))), /* @__PURE__ */React.createElement(Stack, {
68
+ p: 4,
69
+ position: "relative",
70
+ gap: 4,
71
+ flex: 1
72
+ }, /* @__PURE__ */React.createElement(Stack, {
73
+ gap: 2
74
+ }, /* @__PURE__ */React.createElement(ui.Heading, {
75
+ as: "h4",
76
+ color: "primary"
77
+ }, addressPart1), /* @__PURE__ */React.createElement(ui.Text, {
78
+ sx: {
79
+ fontSize: "12px"
80
+ },
81
+ weight: "500",
82
+ color: "secondary"
83
+ }, addressPart2)), content && /* @__PURE__ */React.createElement(Stack, {
84
+ alignItems: "flex-start"
85
+ }, content), (footer || action) && /* @__PURE__ */React.createElement(Stack, {
86
+ direction: "row",
87
+ gap: 2,
88
+ alignItems: "center",
89
+ mt: "auto"
90
+ }, footer, action && /* @__PURE__ */React.createElement(Stack, {
91
+ ml: "auto",
92
+ flexShrink: 0
93
+ }, action)))));
94
+ }
95
+
96
+ exports.default = PropertyHorizontalCard;
package/dist/cjs/index.cjs CHANGED
@@ -5,6 +5,8 @@ var iconLabel = require('./components/icon-label.cjs');
5
5
  var propertyAttributes = require('./components/property-attributes.cjs');
6
6
  var propertyCard = require('./components/property-card.cjs');
7
7
  var propertyCardSkeleton = require('./components/property-card-skeleton.cjs');
8
+ var propertyHorizontalCard = require('./components/property-horizontal-card.cjs');
9
+ var propertyHorizontalCardSkeleton = require('./components/property-horizontal-card-skeleton.cjs');
8
10
  var rentIconLabel = require('./components/rent-icon-label.cjs');
9
11
 
10
12
 
@@ -14,4 +16,6 @@ exports.IconLabel = iconLabel.default;
14
16
  exports.PropertyAttributes = propertyAttributes.default;
15
17
  exports.PropertyCard = propertyCard.default;
16
18
  exports.PropertyCardSkeleton = propertyCardSkeleton.default;
19
+ exports.PropertyHorizontalCard = propertyHorizontalCard.default;
20
+ exports.PropertyHorizontalCardSkeleton = propertyHorizontalCardSkeleton.default;
17
21
  exports.RentIconLabel = rentIconLabel.default;
package/dist/esm/components/agency-logo.js CHANGED
@@ -4,14 +4,19 @@ import { Text } from '@tenancy.nz/ui';
4
4
 
5
5
  function AgencyLogo(_ref) {
6
6
  var src = _ref.src,
7
- _ref$name = _ref.name,
8
- name = _ref$name === void 0 ? void 0 : _ref$name,
7
+ _ref$title = _ref.title,
8
+ title = _ref$title === void 0 ? void 0 : _ref$title,
9
+ _ref$subtitle = _ref.subtitle,
10
+ subtitle = _ref$subtitle === void 0 ? void 0 : _ref$subtitle,
9
11
  _ref$size = _ref.size,
10
- size = _ref$size === void 0 ? "30px" : _ref$size;
12
+ size = _ref$size === void 0 ? "32px" : _ref$size,
13
+ _ref$sx = _ref.sx,
14
+ sx = _ref$sx === void 0 ? {} : _ref$sx;
11
15
  return /* @__PURE__ */React.createElement(Stack, {
12
16
  flexDirection: "row",
13
- gap: 4,
14
- alignItems: "center"
17
+ gap: 3,
18
+ alignItems: "center",
19
+ sx: sx
15
20
  }, /* @__PURE__ */React.createElement(Stack, {
16
21
  alignItems: "center",
17
22
  justifyContent: "center",
@@ -26,9 +31,18 @@ function AgencyLogo(_ref) {
26
31
  }, /* @__PURE__ */React.createElement("img", {
27
32
  src: src,
28
33
  alt: "Logo"
29
- })), name && /* @__PURE__ */React.createElement(Text, {
30
- weight: "600"
31
- }, name));
34
+ })), /* @__PURE__ */React.createElement(Stack, null, title && /* @__PURE__ */React.createElement(Text, {
35
+ weight: "500",
36
+ variant: "body2",
37
+ color: "textPrimary"
38
+ }, title), subtitle && /* @__PURE__ */React.createElement(Text, {
39
+ weight: "500",
40
+ color: "textSecondary",
41
+ variant: "inherit",
42
+ sx: {
43
+ fontSize: "12px"
44
+ }
45
+ }, subtitle)));
32
46
  }
33
47
 
34
48
  export { AgencyLogo as default };
package/dist/esm/components/property-card.js CHANGED
@@ -25,8 +25,6 @@ function PropertyCard(_ref) {
25
25
  fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight,
26
26
  _ref$onClick = _ref.onClick,
27
27
  onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
28
- _ref$orientation = _ref.orientation,
29
- orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
30
28
  _ref$parkingSpaces = _ref.parkingSpaces,
31
29
  parkingSpaces = _ref$parkingSpaces === void 0 ? void 0 : _ref$parkingSpaces,
32
30
  _ref$header = _ref.header,
@@ -35,13 +33,6 @@ function PropertyCard(_ref) {
35
33
  photoSrc = _ref$photoSrc === void 0 ? "" : _ref$photoSrc,
36
34
  _ref$rent = _ref.rent,
37
35
  rent = _ref$rent === void 0 ? "" : _ref$rent;
38
- var footerSlot = footer && /* @__PURE__ */React.createElement(Stack, {
39
- mt: "auto",
40
- sx: {
41
- borderTop: "1px solid",
42
- borderTopColor: "grey.300"
43
- }
44
- }, footer);
45
36
  return /* @__PURE__ */React.createElement(Stack, {
46
37
  onClick: onClick,
47
38
  sx: _objectSpread2(_objectSpread2({
@@ -57,69 +48,57 @@ function PropertyCard(_ref) {
57
48
  })
58
49
  }, /* @__PURE__ */React.createElement(Paper, {
59
50
  overflow: false,
60
- sx: _objectSpread2(_objectSpread2(_objectSpread2({
61
- display: "flex"
62
- }, orientation === "vertical" && {
51
+ sx: _objectSpread2({
52
+ display: "flex",
63
53
  flexDirection: "column"
64
- }), orientation === "horizontal" && {
65
- flexDirection: {
66
- xs: "column",
67
- md: "row"
68
- }
69
- }), fullHeight && {
54
+ }, fullHeight && {
70
55
  height: "100%"
71
56
  })
72
57
  }, /* @__PURE__ */React.createElement(Stack, {
73
58
  sx: {
74
59
  width: "100%",
75
60
  maxWidth: {
76
- md: orientation === "horizontal" ? "308px" : "100%"
61
+ md: "100%"
77
62
  }
78
63
  }
79
64
  }, header, /* @__PURE__ */React.createElement(StyledPropertyItemImgWrapper, {
80
- orientation: orientation
65
+ orientation: "vertical"
81
66
  }, photoSrc && /* @__PURE__ */React.createElement(Media, {
82
67
  src: photoSrc,
83
68
  title: addressPart1,
84
69
  as: "img"
85
- })), orientation === "horizontal" && footerSlot), /* @__PURE__ */React.createElement(Stack, {
86
- p: orientation === "vertical" ? 4 : {
87
- xs: 4,
88
- md: 8
89
- },
70
+ }))), /* @__PURE__ */React.createElement(Stack, {
71
+ p: 4,
90
72
  position: "relative",
91
- gap: 2,
73
+ gap: 4,
92
74
  flex: 1
93
75
  }, /* @__PURE__ */React.createElement(Stack, {
94
- flexDirection: "row",
95
- gap: 2,
96
- alignItems: "center"
97
- }, /* @__PURE__ */React.createElement(Stack, {
98
- gap: 1
76
+ gap: 2
99
77
  }, /* @__PURE__ */React.createElement(Heading, {
100
- as: "h4"
78
+ as: "h4",
79
+ color: "primary"
101
80
  }, addressPart1), /* @__PURE__ */React.createElement(Text, {
102
81
  sx: {
103
82
  fontSize: "12px"
104
83
  },
105
- weight: "500"
106
- }, addressPart2)), action && /* @__PURE__ */React.createElement(Stack, {
107
- ml: "auto"
108
- }, action)), content, /* @__PURE__ */React.createElement(Stack, {
109
- flexDirection: "row",
110
- alignItems: "center",
111
- mt: "auto",
112
- pt: 4
113
- }, /* @__PURE__ */React.createElement(PropertyAttributes, {
84
+ weight: "500",
85
+ color: "secondary"
86
+ }, addressPart2)), rent && /* @__PURE__ */React.createElement(RentIconLabel, {
87
+ text: rent
88
+ }), /* @__PURE__ */React.createElement(PropertyAttributes, {
114
89
  noOfBedrooms: bedrooms,
115
90
  noOfBathrooms: bathrooms,
116
91
  noOfCarparks: parkingSpaces
117
- }), rent && /* @__PURE__ */React.createElement(RentIconLabel, {
118
- text: rent,
119
- sx: {
120
- ml: "auto"
121
- }
122
- }))), orientation === "vertical" && footerSlot));
92
+ }), (content || action) && /* @__PURE__ */React.createElement(Stack, {
93
+ direction: "row",
94
+ gap: 2,
95
+ alignItems: "center"
96
+ }, content && /* @__PURE__ */React.createElement(Stack, {
97
+ alignItems: "flex-start"
98
+ }, content), action && /* @__PURE__ */React.createElement(Stack, {
99
+ ml: "auto",
100
+ flexShrink: 0
101
+ }, action))), footer));
123
102
  }
124
103
 
125
104
  export { PropertyCard as default };
package/dist/esm/components/property-card.styled.js CHANGED
@@ -8,7 +8,7 @@ var verticalStyles = function verticalStyles() {
8
8
  };
9
9
  var horizontalStyles = function horizontalStyles(_ref) {
10
10
  var theme = _ref.theme;
11
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", " {\n ", "\n }\n\n ", " {\n flex: 1;\n min-height: 220px;\n width: 100%;\n max-width: 308px;\n }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
11
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", " {\n ", "\n }\n\n ", " {\n flex: 1;\n min-height: 166px;\n width: 100%;\n max-width: 180px;\n }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
12
12
  };
13
13
  var StyledPropertyItemImgWrapper = styled.figure(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref2) {
14
14
  var orientation = _ref2.orientation,
package/dist/esm/components/property-horizontal-card-skeleton.js ADDED
@@ -0,0 +1,71 @@
1
+ import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
+ import React from 'react';
3
+ import Stack from '@mui/material/Stack';
4
+ import { Paper, Skeleton } from '@tenancy.nz/ui';
5
+
6
+ function PropertyHorizontalCardSkeleton(_ref) {
7
+ var _ref$fullHeight = _ref.fullHeight,
8
+ fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight;
9
+ return /* @__PURE__ */React.createElement(Stack, {
10
+ sx: _objectSpread2({}, fullHeight && {
11
+ height: "100%"
12
+ })
13
+ }, /* @__PURE__ */React.createElement(Paper, {
14
+ overflow: false,
15
+ sx: _objectSpread2({
16
+ display: "flex",
17
+ flexDirection: {
18
+ xs: "column",
19
+ md: "row"
20
+ }
21
+ }, fullHeight && {
22
+ height: "100%"
23
+ })
24
+ }, /* @__PURE__ */React.createElement(Stack, {
25
+ sx: {
26
+ width: "100%",
27
+ maxWidth: {
28
+ md: "180px"
29
+ }
30
+ }
31
+ }, /* @__PURE__ */React.createElement(Skeleton, {
32
+ variant: "rectangular",
33
+ sx: {
34
+ width: "100%",
35
+ height: {
36
+ xs: "220px",
37
+ md: "100%"
38
+ },
39
+ minHeight: {
40
+ md: "166px"
41
+ },
42
+ flex: {
43
+ md: 1
44
+ }
45
+ }
46
+ })), /* @__PURE__ */React.createElement(Stack, {
47
+ p: 4,
48
+ position: "relative",
49
+ gap: 4,
50
+ flex: 1
51
+ }, /* @__PURE__ */React.createElement(Stack, {
52
+ gap: 2
53
+ }, /* @__PURE__ */React.createElement(Skeleton, {
54
+ variant: "text",
55
+ width: "60%",
56
+ height: 24
57
+ }), /* @__PURE__ */React.createElement(Skeleton, {
58
+ variant: "text",
59
+ width: "50%",
60
+ height: 16
61
+ })), /* @__PURE__ */React.createElement(Stack, {
62
+ mt: "auto",
63
+ pt: 4
64
+ }, /* @__PURE__ */React.createElement(Skeleton, {
65
+ variant: "text",
66
+ width: "100%",
67
+ height: 40
68
+ })))));
69
+ }
70
+
71
+ export { PropertyHorizontalCardSkeleton as default };
package/dist/esm/components/property-horizontal-card.js ADDED
@@ -0,0 +1,92 @@
1
+ import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
2
+ import React from 'react';
3
+ import Stack from '@mui/material/Stack';
4
+ import { Paper, Media, Heading, Text } from '@tenancy.nz/ui';
5
+ import { StyledPropertyItemImgWrapper } from './property-card.styled.js';
6
+
7
+ function PropertyHorizontalCard(_ref) {
8
+ var _ref$action = _ref.action,
9
+ action = _ref$action === void 0 ? void 0 : _ref$action,
10
+ _ref$addressPart = _ref.addressPart1,
11
+ addressPart1 = _ref$addressPart === void 0 ? "" : _ref$addressPart,
12
+ _ref$addressPart2 = _ref.addressPart2,
13
+ addressPart2 = _ref$addressPart2 === void 0 ? "" : _ref$addressPart2,
14
+ _ref$content = _ref.content,
15
+ content = _ref$content === void 0 ? void 0 : _ref$content,
16
+ _ref$footer = _ref.footer,
17
+ footer = _ref$footer === void 0 ? void 0 : _ref$footer,
18
+ _ref$fullHeight = _ref.fullHeight,
19
+ fullHeight = _ref$fullHeight === void 0 ? true : _ref$fullHeight,
20
+ _ref$onClick = _ref.onClick,
21
+ onClick = _ref$onClick === void 0 ? void 0 : _ref$onClick,
22
+ _ref$header = _ref.header,
23
+ header = _ref$header === void 0 ? void 0 : _ref$header,
24
+ _ref$photoSrc = _ref.photoSrc,
25
+ photoSrc = _ref$photoSrc === void 0 ? "" : _ref$photoSrc;
26
+ return /* @__PURE__ */React.createElement(Stack, {
27
+ onClick: onClick,
28
+ sx: _objectSpread2(_objectSpread2({
29
+ transition: "all 0.25s ease-out",
30
+ cursor: "default"
31
+ }, fullHeight && {
32
+ height: "100%"
33
+ }), typeof onClick === "function" && {
34
+ cursor: "pointer",
35
+ "&:hover": {
36
+ transform: "translateY(-6px)"
37
+ }
38
+ })
39
+ }, /* @__PURE__ */React.createElement(Paper, {
40
+ overflow: false,
41
+ sx: _objectSpread2({
42
+ display: "flex",
43
+ flexDirection: {
44
+ xs: "column",
45
+ md: "row"
46
+ }
47
+ }, fullHeight && {
48
+ height: "100%"
49
+ })
50
+ }, /* @__PURE__ */React.createElement(Stack, {
51
+ sx: {
52
+ width: "100%",
53
+ maxWidth: {
54
+ md: "180px"
55
+ }
56
+ }
57
+ }, header, /* @__PURE__ */React.createElement(StyledPropertyItemImgWrapper, {
58
+ orientation: "horizontal"
59
+ }, photoSrc && /* @__PURE__ */React.createElement(Media, {
60
+ src: photoSrc,
61
+ title: addressPart1,
62
+ as: "img"
63
+ }))), /* @__PURE__ */React.createElement(Stack, {
64
+ p: 4,
65
+ position: "relative",
66
+ gap: 4,
67
+ flex: 1
68
+ }, /* @__PURE__ */React.createElement(Stack, {
69
+ gap: 2
70
+ }, /* @__PURE__ */React.createElement(Heading, {
71
+ as: "h4",
72
+ color: "primary"
73
+ }, addressPart1), /* @__PURE__ */React.createElement(Text, {
74
+ sx: {
75
+ fontSize: "12px"
76
+ },
77
+ weight: "500",
78
+ color: "secondary"
79
+ }, addressPart2)), content && /* @__PURE__ */React.createElement(Stack, {
80
+ alignItems: "flex-start"
81
+ }, content), (footer || action) && /* @__PURE__ */React.createElement(Stack, {
82
+ direction: "row",
83
+ gap: 2,
84
+ alignItems: "center",
85
+ mt: "auto"
86
+ }, footer, action && /* @__PURE__ */React.createElement(Stack, {
87
+ ml: "auto",
88
+ flexShrink: 0
89
+ }, action)))));
90
+ }
91
+
92
+ export { PropertyHorizontalCard as default };
package/dist/esm/index.js CHANGED
@@ -3,4 +3,6 @@ export { default as IconLabel } from './components/icon-label.js';
3
3
  export { default as PropertyAttributes } from './components/property-attributes.js';
4
4
  export { default as PropertyCard } from './components/property-card.js';
5
5
  export { default as PropertyCardSkeleton } from './components/property-card-skeleton.js';
6
+ export { default as PropertyHorizontalCard } from './components/property-horizontal-card.js';
7
+ export { default as PropertyHorizontalCardSkeleton } from './components/property-horizontal-card-skeleton.js';
6
8
  export { default as RentIconLabel } from './components/rent-icon-label.js';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tenancy.nz/tenant-ui",
3
3
  "description": "React UI tenant components.",
4
- "version": "1.10.5",
4
+ "version": "1.10.6",
5
5
  "author": "TPS <https://www.tenancy.co.nz>",
6
6
  "type": "module",
7
7
  "main": "dist/cjs/index.cjs",
@@ -16,15 +16,15 @@
16
16
  "@mui/material": "^7.3.1",
17
17
  "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
18
18
  "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
19
- "@tenancy.nz/icons": "1.10.5",
20
- "@tenancy.nz/ui": "1.10.5"
19
+ "@tenancy.nz/ui": "1.10.6",
20
+ "@tenancy.nz/icons": "1.10.6"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@emotion/react": "^11.14.0",
24
24
  "@emotion/styled": "^11.14.1",
25
25
  "@mui/material": "^7.3.1",
26
- "@tenancy.nz/icons": "1.10.5",
27
- "@tenancy.nz/ui": "1.10.5"
26
+ "@tenancy.nz/icons": "1.10.6",
27
+ "@tenancy.nz/ui": "1.10.6"
28
28
  },
29
29
  "dependencies": {
30
30
  "react-uid": "^2.4.0"