@tenancy.nz/feature-ui 1.4.11 → 1.5.0

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 (25) hide show
  1. package/dist/cjs/components/AgentDetailsCard.cjs +9 -7
  2. package/dist/cjs/components/AnalyticsBox.cjs +23 -14
  3. package/dist/cjs/components/AnalyticsSection.cjs +141 -133
  4. package/dist/cjs/components/ChartLegend.cjs +43 -0
  5. package/dist/cjs/components/CheckedIcon.cjs +12 -7
  6. package/dist/cjs/components/PropertyCard.cjs +45 -38
  7. package/dist/cjs/components/PropertyCard.styled.cjs +2 -2
  8. package/dist/cjs/components/analytics-doughnut-chart.cjs +61 -0
  9. package/dist/cjs/components/doughnut-chart.cjs +124 -0
  10. package/dist/cjs/index.cjs +4 -2
  11. package/dist/cjs/utils/helpers/general.cjs +13 -0
  12. package/dist/esm/components/AgentDetailsCard.js +9 -7
  13. package/dist/esm/components/AnalyticsBox.js +24 -15
  14. package/dist/esm/components/AnalyticsSection.js +141 -133
  15. package/dist/esm/components/ChartLegend.js +39 -0
  16. package/dist/esm/components/CheckedIcon.js +12 -7
  17. package/dist/esm/components/PropertyCard.js +45 -38
  18. package/dist/esm/components/PropertyCard.styled.js +2 -2
  19. package/dist/esm/components/analytics-doughnut-chart.js +57 -0
  20. package/dist/esm/components/doughnut-chart.js +120 -0
  21. package/dist/esm/index.js +2 -1
  22. package/dist/esm/utils/helpers/general.js +11 -0
  23. package/package.json +9 -5
  24. package/dist/cjs/components/EnquiriesDoughnutChart.cjs +0 -143
  25. package/dist/esm/components/EnquiriesDoughnutChart.js +0 -139
package/dist/cjs/components/AgentDetailsCard.cjs CHANGED
@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var ui = require('@tenancy.nz/ui');
7
- var icons = require('@tenancy.nz/icons');
7
+ var EmailRoundedIcon = require('@mui/icons-material/EmailRounded');
8
+ var PhoneRoundedIcon = require('@mui/icons-material/PhoneRounded');
9
+ var PersonRoundedIcon = require('@mui/icons-material/PersonRounded');
8
10
  var IconLabel = require('./IconLabel.cjs');
9
11
 
10
12
  function AgentDetailsCard(_ref) {
@@ -33,8 +35,8 @@ function AgentDetailsCard(_ref) {
33
35
  variant: "text"
34
36
  }) : /* @__PURE__ */React.createElement(IconLabel.default, {
35
37
  color: "tertiary.main",
36
- startIcon: /* @__PURE__ */React.createElement(icons.UserIcon, {
37
- size: "24px"
38
+ startIcon: /* @__PURE__ */React.createElement(PersonRoundedIcon, {
39
+ fontSize: "small"
38
40
  })
39
41
  }, /* @__PURE__ */React.createElement(ui.Heading, {
40
42
  as: "h5",
@@ -45,8 +47,8 @@ function AgentDetailsCard(_ref) {
45
47
  variant: "text"
46
48
  }) : /* @__PURE__ */React.createElement(IconLabel.default, {
47
49
  color: "tertiary.main",
48
- startIcon: /* @__PURE__ */React.createElement(icons.PhoneIcon, {
49
- size: "24px"
50
+ startIcon: /* @__PURE__ */React.createElement(PhoneRoundedIcon, {
51
+ fontSize: "small"
50
52
  })
51
53
  }, /* @__PURE__ */React.createElement(ui.Text, {
52
54
  as: "span",
@@ -59,8 +61,8 @@ function AgentDetailsCard(_ref) {
59
61
  variant: "text"
60
62
  }) : /* @__PURE__ */React.createElement(IconLabel.default, {
61
63
  color: "tertiary.main",
62
- startIcon: /* @__PURE__ */React.createElement(icons.EnvelopeIcon, {
63
- size: "24px"
64
+ startIcon: /* @__PURE__ */React.createElement(EmailRoundedIcon, {
65
+ fontSize: "small"
64
66
  })
65
67
  }, /* @__PURE__ */React.createElement(ui.Text, {
66
68
  as: "span",
package/dist/cjs/components/AnalyticsBox.cjs CHANGED
@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
6
6
  var React = require('react');
7
+ var Stack = require('@mui/material/Stack');
7
8
  var ui = require('@tenancy.nz/ui');
8
9
 
9
- var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text"];
10
+ var _excluded = ["width", "minWidth", "maxWidth", "height", "border", "label", "amount", "text", "sx"];
10
11
  function AnalyticsBox(_ref) {
11
12
  var width = _ref.width,
12
13
  minWidth = _ref.minWidth,
@@ -16,40 +17,48 @@ function AnalyticsBox(_ref) {
16
17
  label = _ref.label,
17
18
  amount = _ref.amount,
18
19
  text = _ref.text,
20
+ _ref$sx = _ref.sx,
21
+ sx = _ref$sx === void 0 ? {} : _ref$sx,
19
22
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
20
23
  return /* @__PURE__ */React.createElement(ui.Paper, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
21
- sx: {
24
+ inset: "medium",
25
+ sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
22
26
  maxWidth: maxWidth,
23
27
  width: width,
24
28
  minWidth: minWidth,
25
- border: border,
26
- height: height || "100%",
29
+ border: border || "1px solid",
30
+ height: height,
27
31
  display: "flex",
28
32
  alignItems: "center",
29
- justifyContent: "center",
30
- padding: "16px"
31
- }
32
- }), /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(ui.Heading, {
33
+ justifyContent: "center"
34
+ }, border ? {} : {
35
+ borderColor: "grey.300"
36
+ }), sx)
37
+ }), /* @__PURE__ */React.createElement(Stack, {
38
+ color: "text.primary"
39
+ }, /* @__PURE__ */React.createElement(ui.Heading, {
33
40
  align: "center",
34
41
  weight: "700",
35
42
  as: "h3",
43
+ color: "primary",
36
44
  gutterBottom: true
37
45
  }, amount), /* @__PURE__ */React.createElement(ui.Text, {
38
46
  align: "center",
39
- weight: "400",
40
- variant: "body2"
47
+ weight: "500",
48
+ variant: "body2",
49
+ color: "primary"
41
50
  }, label), text && /* @__PURE__ */React.createElement(ui.Text, {
42
51
  align: "center",
43
52
  weight: "400",
53
+ color: "primary",
44
54
  sx: {
45
55
  fontSize: {
46
56
  xs: 8,
47
- sm: 10,
48
- xl: 14
57
+ sm: 10
49
58
  },
50
- lineHeight: "15.6px",
59
+ lineHeight: "13px",
51
60
  maxWidth: "366px",
52
- mt: "8px"
61
+ mt: 1
53
62
  }
54
63
  }, text)));
55
64
  }
package/dist/cjs/components/AnalyticsSection.cjs CHANGED
@@ -3,9 +3,12 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
+ var reactUid = require('react-uid');
7
+ var Stack = require('@mui/material/Stack');
8
+ var useMediaQuery = require('@mui/material/useMediaQuery');
6
9
  var ui = require('@tenancy.nz/ui');
7
10
  var AnalyticsBox = require('./AnalyticsBox.cjs');
8
- var EnquiriesDoughnutChart = require('./EnquiriesDoughnutChart.cjs');
11
+ var analyticsDoughnutChart = require('./analytics-doughnut-chart.cjs');
9
12
 
10
13
  function AnalyticsSection(_ref) {
11
14
  var viewingsCount = _ref.viewingsCount,
@@ -15,158 +18,163 @@ function AnalyticsSection(_ref) {
15
18
  applicationsCount = _ref.applicationsCount,
16
19
  averageRent = _ref.averageRent,
17
20
  textUsage = _ref.textUsage,
18
- tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
19
- bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
20
- manualEnquiryCount = _ref.manualEnquiryCount,
21
21
  agreementsCount = _ref.agreementsCount,
22
22
  agreementsFinalisedCount = _ref.agreementsFinalisedCount,
23
- filterDaysCount = _ref.filterDaysCount;
24
- var isXlUp = ui.useMediaQuery(function (theme) {
23
+ filterDaysCount = _ref.filterDaysCount,
24
+ allHouseEnquiriesCount = _ref.allHouseEnquiriesCount,
25
+ bookMeEnquiriesCount = _ref.bookMeEnquiriesCount,
26
+ oneRoofEnquiriesCount = _ref.oneRoofEnquiriesCount,
27
+ realestateEnquiriesCount = _ref.realestateEnquiriesCount,
28
+ tradeMeEnquiriesCount = _ref.tradeMeEnquiriesCount,
29
+ manualEnquiryCount = _ref.manualEnquiryCount,
30
+ allHouseBookingsCount = _ref.allHouseBookingsCount,
31
+ bookMeBookingsCount = _ref.bookMeBookingsCount,
32
+ oneRoofBookingsCount = _ref.oneRoofBookingsCount,
33
+ realestateBookingsCount = _ref.realestateBookingsCount,
34
+ tradeMeBookingsCount = _ref.tradeMeBookingsCount,
35
+ manualBookingsCount = _ref.manualBookingsCount;
36
+ var isXlUp = useMediaQuery(function (theme) {
25
37
  return theme.breakpoints.up("xl");
26
38
  });
27
- return /* @__PURE__ */React.createElement(ui.Box, {
28
- display: "flex",
29
- align: "stretch",
30
- direction: {
31
- xs: "column-reverse",
32
- mlg: "row"
33
- },
34
- gap: "27px"
35
- }, /* @__PURE__ */React.createElement(ui.Box, {
36
- width: "100%",
37
- sx: {
38
- maxWidth: {
39
- xs: "100%",
40
- mob: "340px",
41
- xl: "463px"
42
- }
43
- }
39
+ var stats = [{
40
+ label: "Viewings",
41
+ value: viewingsCount
42
+ }, {
43
+ label: "Bookings",
44
+ value: bookingsCount
45
+ }, {
46
+ label: "Attendees",
47
+ value: attendeesCount
48
+ }, {
49
+ label: "Cancellations",
50
+ value: cancellationsCount
51
+ }, {
52
+ label: "Applications",
53
+ value: applicationsCount
54
+ }, {
55
+ label: "Average Rent",
56
+ value: "$".concat(averageRent)
57
+ }, {
58
+ label: "Text Usage Total",
59
+ value: textUsage
60
+ }];
61
+ return /* @__PURE__ */React.createElement(Stack, {
62
+ gap: 6
63
+ }, /* @__PURE__ */React.createElement(Stack, {
64
+ flexDirection: "row",
65
+ gap: 6,
66
+ flexWrap: "wrap",
67
+ alignItems: "stretch"
44
68
  }, /* @__PURE__ */React.createElement(ui.Paper, {
45
69
  outlined: true,
70
+ inset: "medium",
71
+ overflow: false,
46
72
  sx: {
47
73
  width: "100%",
48
- position: "relative",
49
- height: "100%"
74
+ minWidth: {
75
+ sm: "456px"
76
+ },
77
+ flex: {
78
+ xs: "0 0 100%",
79
+ sm: 1
80
+ },
81
+ alignItems: "center",
82
+ justifyContent: "center",
83
+ display: "flex"
50
84
  }
51
- }, /* @__PURE__ */React.createElement(ui.Box, {
52
- mt: "20px",
53
- height: "100%"
54
- }, /* @__PURE__ */React.createElement(EnquiriesDoughnutChart.default, {
55
- tradeMeEnquiriesCount: tradeMeEnquiriesCount,
56
- bookMeEnquiriesCount: bookMeEnquiriesCount,
57
- manualEnquiryCount: manualEnquiryCount
58
- })))), /* @__PURE__ */React.createElement(ui.Box, {
59
- width: "100%"
60
- }, /* @__PURE__ */React.createElement(ui.Box, {
61
- display: "flex",
62
- direction: "row",
63
- width: "100%",
64
- gap: 6
65
- }, /* @__PURE__ */React.createElement(ui.Box, {
66
- flex: 3
67
- }, /* @__PURE__ */React.createElement(ui.Box, {
68
- display: "flex",
69
- gap: 6
70
- }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
71
- outlined: true,
72
- label: "Viewings",
73
- amount: viewingsCount,
74
- width: "100%",
75
- height: isXlUp ? "157px" : "125px"
76
- }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
77
- outlined: true,
78
- label: "Bookings",
79
- amount: bookingsCount,
80
- width: "100%",
81
- height: isXlUp ? "157px" : "125px"
82
- }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
85
+ }, /* @__PURE__ */React.createElement(analyticsDoughnutChart.default, {
86
+ tradeMeCount: tradeMeEnquiriesCount,
87
+ bookMeCount: bookMeEnquiriesCount,
88
+ manualCount: manualEnquiryCount,
89
+ allhouseCount: allHouseEnquiriesCount,
90
+ oneRoofCount: oneRoofEnquiriesCount,
91
+ realEstateCount: realestateEnquiriesCount,
92
+ heading: "Number of enquiries"
93
+ })), /* @__PURE__ */React.createElement(ui.Paper, {
83
94
  outlined: true,
84
- label: "Attendees",
85
- amount: attendeesCount,
86
- width: "100%",
87
- border: "3px solid #6FD3C0",
88
- height: isXlUp ? "157px" : "125px"
89
- })), /* @__PURE__ */React.createElement(ui.Box, {
90
- display: "flex",
91
- width: "100%",
92
- gap: 6,
93
- mt: 6
95
+ inset: "medium",
96
+ overflow: false,
97
+ sx: {
98
+ width: "100%",
99
+ minWidth: {
100
+ sm: "456px"
101
+ },
102
+ flex: {
103
+ xs: "0 0 100%",
104
+ sm: 1
105
+ },
106
+ alignItems: "center",
107
+ justifyContent: "center",
108
+ display: "flex"
109
+ }
110
+ }, /* @__PURE__ */React.createElement(analyticsDoughnutChart.default, {
111
+ tradeMeCount: tradeMeBookingsCount,
112
+ bookMeCount: bookMeBookingsCount,
113
+ manualCount: manualBookingsCount,
114
+ allhouseCount: allHouseBookingsCount,
115
+ oneRoofCount: oneRoofBookingsCount,
116
+ realEstateCount: realestateBookingsCount,
117
+ heading: "Number of bookings"
118
+ })), /* @__PURE__ */React.createElement(Stack, {
119
+ gap: {
120
+ xs: 3,
121
+ md: 6
122
+ },
123
+ justifyContent: "space-between",
124
+ sx: {
125
+ flexDirection: {
126
+ xs: "row",
127
+ lg: "column"
128
+ },
129
+ flex: {
130
+ sm: "0 0 100%",
131
+ lg: "0 0 284px"
132
+ }
133
+ }
94
134
  }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
95
135
  outlined: true,
96
- label: "Converted Properties",
136
+ label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
97
137
  amount: agreementsCount,
98
138
  width: "100%",
99
- height: isXlUp ? "157px" : "125px",
100
- text: /* @__PURE__ */React.createElement(ui.Box, {
101
- as: "span",
102
- maxWidth: "276px"
103
- }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(ui.Text, {
139
+ height: isXlUp ? "157px" : "auto",
140
+ text: /* @__PURE__ */React.createElement(ui.Text, {
104
141
  as: "span",
105
- display: "inline",
106
- weight: "700",
107
- fontSize: "inherit"
108
- }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(ui.Text, {
109
- as: "span",
110
- display: "inline",
111
- weight: "700",
112
- fontSize: "inherit"
113
- }, "created"))
142
+ variant: "inherit"
143
+ }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement("strong", null, filterDaysCount), " days where an agreement has been ", /* @__PURE__ */React.createElement("strong", null, "created"))
114
144
  }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
115
145
  outlined: true,
116
- label: "Converted Properties",
146
+ label: /* @__PURE__ */React.createElement("strong", null, "Converted Properties"),
117
147
  amount: agreementsFinalisedCount,
118
148
  width: "100%",
119
- height: isXlUp ? "157px" : "125px",
120
- text: /* @__PURE__ */React.createElement(ui.Box, {
121
- as: "span",
122
- maxWidth: "276px"
123
- }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement(ui.Text, {
149
+ height: isXlUp ? "157px" : "auto",
150
+ text: /* @__PURE__ */React.createElement(ui.Text, {
124
151
  as: "span",
125
- display: "inline",
126
- weight: "700",
127
- fontSize: "inherit"
128
- }, filterDaysCount), " ", "days where an agreement has been", " ", /* @__PURE__ */React.createElement(ui.Text, {
129
- as: "span",
130
- display: "inline",
131
- weight: "700",
132
- fontSize: "inherit"
133
- }, "finalised"))
134
- }))), /* @__PURE__ */React.createElement(ui.Box, {
135
- flex: 2
136
- }, /* @__PURE__ */React.createElement(ui.Box, {
137
- display: "flex",
138
- gap: 6
139
- }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
140
- outlined: true,
141
- label: "Cancellations",
142
- amount: cancellationsCount,
143
- width: "100%",
144
- border: "3px solid #ED0D8D",
145
- height: isXlUp ? "157px" : "125px"
146
- }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
147
- outlined: true,
148
- label: "Applications",
149
- amount: applicationsCount,
150
- width: "100%",
151
- border: "3px solid #F5C440",
152
- height: isXlUp ? "157px" : "125px"
153
- })), /* @__PURE__ */React.createElement(ui.Box, {
154
- display: "flex",
155
- gap: 6,
156
- mt: 6
157
- }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
158
- outlined: true,
159
- label: /* @__PURE__ */React.createElement("span", null, "Average", /* @__PURE__ */React.createElement("br", null), " Rent"),
160
- amount: averageRent,
161
- width: "100%",
162
- height: isXlUp ? "157px" : "125px"
163
- }), /* @__PURE__ */React.createElement(AnalyticsBox.default, {
164
- outlined: true,
165
- label: /* @__PURE__ */React.createElement("span", null, "Text Usage", /* @__PURE__ */React.createElement("br", null), " Total"),
166
- amount: textUsage,
167
- width: "100%",
168
- height: isXlUp ? "157px" : "125px"
169
- }))))));
152
+ variant: "inherit"
153
+ }, "Properties that have had a viewing in the last", " ", /* @__PURE__ */React.createElement("strong", null, " ", filterDaysCount), " days where an agreement has been ", /* @__PURE__ */React.createElement("strong", null, "finalised"))
154
+ })), /* @__PURE__ */React.createElement(ui.Grid, {
155
+ container: true,
156
+ spacing: {
157
+ xs: 3,
158
+ md: 6
159
+ }
160
+ }, stats.map(function (stat, i) {
161
+ return /* @__PURE__ */React.createElement(ui.Grid, {
162
+ item: true,
163
+ key: reactUid.uid(stat, i),
164
+ flex: {
165
+ lg: 1
166
+ },
167
+ xs: 6,
168
+ sm: 3,
169
+ md: 2
170
+ }, /* @__PURE__ */React.createElement(AnalyticsBox.default, {
171
+ outlined: true,
172
+ label: stat.label,
173
+ amount: stat.value,
174
+ width: "100%",
175
+ height: isXlUp ? "157px" : "124px"
176
+ }));
177
+ }))));
170
178
  }
171
179
 
172
180
  exports.default = AnalyticsSection;
package/dist/cjs/components/ChartLegend.cjs ADDED
@@ -0,0 +1,43 @@
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 ChartLegend(_ref) {
11
+ var _ref$color = _ref.color,
12
+ color = _ref$color === void 0 ? void 0 : _ref$color,
13
+ _ref$count = _ref.count,
14
+ count = _ref$count === void 0 ? void 0 : _ref$count,
15
+ label = _ref.label,
16
+ _ref$sx = _ref.sx,
17
+ sx = _ref$sx === void 0 ? {} : _ref$sx;
18
+ return /* @__PURE__ */React.createElement(Stack, {
19
+ flexDirection: "row",
20
+ alignItems: "center",
21
+ gap: 1.5,
22
+ sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, sx), {}, {
23
+ userSelect: "none",
24
+ fontSize: "12px"
25
+ })
26
+ }, /* @__PURE__ */React.createElement(ui.Box, {
27
+ borderRadius: "4px",
28
+ width: "32px",
29
+ height: "18px",
30
+ bgcolor: color || "#D9D9D9"
31
+ }), /* @__PURE__ */React.createElement(ui.Box, {
32
+ minWidth: "24px"
33
+ }, count !== void 0 && count >= 0 && /* @__PURE__ */React.createElement(ui.Text, {
34
+ align: "center",
35
+ weight: "700",
36
+ variant: "inherit"
37
+ }, count)), typeof label !== "string" ? label : /* @__PURE__ */React.createElement(ui.Text, {
38
+ weight: "500",
39
+ variant: "inherit"
40
+ }, label));
41
+ }
42
+
43
+ exports.default = ChartLegend;
package/dist/cjs/components/CheckedIcon.cjs CHANGED
@@ -3,21 +3,26 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var icons = require('@tenancy.nz/icons');
6
+ var CheckCircleOutlineRoundedIcon = require('@mui/icons-material/CheckCircleOutlineRounded');
7
+ var HighlightOffRoundedIcon = require('@mui/icons-material/HighlightOffRounded');
7
8
  var ui = require('@tenancy.nz/ui');
8
9
 
9
10
  function CheckedIcon(_ref) {
10
11
  var value = _ref.value;
11
12
  if (value === true) {
12
- return /* @__PURE__ */React.createElement(icons.CircleCheckIcon, {
13
- color: "success.main",
14
- size: "20px"
13
+ return /* @__PURE__ */React.createElement(CheckCircleOutlineRoundedIcon, {
14
+ sx: {
15
+ color: "success.main"
16
+ },
17
+ fontSize: "small"
15
18
  });
16
19
  }
17
20
  if (value === false) {
18
- return /* @__PURE__ */React.createElement(icons.CircleTimesIcon, {
19
- color: "error.main",
20
- size: "20px"
21
+ return /* @__PURE__ */React.createElement(HighlightOffRoundedIcon, {
22
+ sx: {
23
+ color: "error.main"
24
+ },
25
+ fontSize: "small"
21
26
  });
22
27
  }
23
28
  return /* @__PURE__ */React.createElement(ui.Text, {
package/dist/cjs/components/PropertyCard.cjs CHANGED
@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
6
6
  var React = require('react');
7
7
  var ui = require('@tenancy.nz/ui');
8
- var icons = require('@tenancy.nz/icons');
8
+ var Stack = require('@mui/material/Stack');
9
+ var BedRoundedIcon = require('@mui/icons-material/BedRounded');
10
+ var BathtubRoundedIcon = require('@mui/icons-material/BathtubRounded');
11
+ var DirectionsCarRoundedIcon = require('@mui/icons-material/DirectionsCarRounded');
9
12
  var IconLabel = require('./IconLabel.cjs');
10
13
  var PropertyCard_styled = require('./PropertyCard.styled.cjs');
11
14
 
@@ -36,7 +39,6 @@ function PropertyCard(_ref) {
36
39
  alignItems: "center"
37
40
  }
38
41
  }, rest), /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyImage, null, /* @__PURE__ */React.createElement(ui.Media, {
39
- as: "img",
40
42
  title: address,
41
43
  src: imgSrc
42
44
  })), /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyDetailsBox, null, /* @__PURE__ */React.createElement(ui.Box, null, /* @__PURE__ */React.createElement(ui.Heading, {
@@ -60,49 +62,57 @@ function PropertyCard(_ref) {
60
62
  }, /* @__PURE__ */React.createElement(PropertyCard_styled.StyledPropertyAmenitiesBox, null, rent && /* @__PURE__ */React.createElement(ui.Heading, {
61
63
  as: "h4",
62
64
  weight: "700"
63
- }, rent), /* @__PURE__ */React.createElement(ui.Box, {
64
- fontSize: "16px"
65
+ }, rent), /* @__PURE__ */React.createElement(Stack, {
66
+ sx: {
67
+ fontSize: "16px",
68
+ fontWeight: "600"
69
+ },
70
+ flexDirection: "row",
71
+ gap: 3,
72
+ alignItems: "center"
65
73
  }, (noOfBedrooms || String(noOfBedrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
66
74
  color: "text.primary",
67
- startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
68
- size: 21,
69
- color: "inherit",
70
- name: "bed"
75
+ startIcon: /* @__PURE__ */React.createElement(BedRoundedIcon, {
76
+ sx: {
77
+ color: "tertiary.main"
78
+ },
79
+ fontSize: "small"
71
80
  })
72
81
  }, /* @__PURE__ */React.createElement(ui.Text, {
73
82
  as: "span",
74
83
  variant: "inherit"
75
84
  }, noOfBedrooms)), (noOfBathrooms || String(noOfBathrooms) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
76
85
  color: "text.primary",
77
- startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
78
- size: 21,
79
- color: "inherit",
80
- name: "bath"
81
- }),
82
- marginLeft: 3
86
+ startIcon: /* @__PURE__ */React.createElement(BathtubRoundedIcon, {
87
+ sx: {
88
+ color: "tertiary.main"
89
+ },
90
+ fontSize: "small"
91
+ })
83
92
  }, /* @__PURE__ */React.createElement(ui.Text, {
84
93
  as: "span",
85
94
  variant: "inherit"
86
95
  }, noOfBathrooms)), (noOfCarparks || String(noOfCarparks) === "0") && /* @__PURE__ */React.createElement(IconLabel.default, {
87
96
  color: "text.primary",
88
- startIcon: /* @__PURE__ */React.createElement(icons.Icon, {
89
- size: 21,
90
- color: "inherit",
91
- name: "car"
92
- }),
93
- marginLeft: 3
97
+ startIcon: /* @__PURE__ */React.createElement(DirectionsCarRoundedIcon, {
98
+ sx: {
99
+ color: "tertiary.main"
100
+ },
101
+ fontSize: "small"
102
+ })
94
103
  }, /* @__PURE__ */React.createElement(ui.Text, {
95
104
  as: "span",
96
105
  variant: "inherit"
97
106
  }, noOfCarparks)))), !compact && /* @__PURE__ */React.createElement(ui.Box, {
98
- paddingLeft: "25px",
99
- borderLeft: "1px solid #00000040",
107
+ paddingLeft: "24px",
108
+ borderLeft: "1px solid",
109
+ borderLeftColor: "grey.300",
100
110
  display: "flex",
101
111
  direction: "column",
102
112
  sx: {
103
113
  gap: {
104
- xs: "18px",
105
- lg: "10px",
114
+ xs: 4,
115
+ lg: 2,
106
116
  xl: 0
107
117
  },
108
118
  justifyContent: "space-between"
@@ -110,34 +120,31 @@ function PropertyCard(_ref) {
110
120
  }, viewingsCount && /* @__PURE__ */React.createElement(ui.Box, {
111
121
  display: "flex",
112
122
  align: "center",
113
- gap: "12px"
123
+ gap: 2
114
124
  }, /* @__PURE__ */React.createElement(ui.Box, {
115
- minWidth: "87px"
125
+ minWidth: "67px"
116
126
  }, /* @__PURE__ */React.createElement(ui.Text, {
117
- transform: "uppercase",
118
127
  color: "textPrimary",
119
128
  as: "span",
120
- weight: "600",
129
+ weight: "500",
121
130
  align: "right",
122
- lineHeight: "15px"
131
+ variant: "body2"
123
132
  }, "Viewings")), /* @__PURE__ */React.createElement(ui.Heading, {
124
- as: "h2"
133
+ as: "h4"
125
134
  }, viewingsCount)), enquiriesCount && /* @__PURE__ */React.createElement(ui.Box, {
126
135
  display: "flex",
127
136
  align: "center",
128
- gap: "12px"
137
+ gap: 2
129
138
  }, /* @__PURE__ */React.createElement(ui.Box, {
130
- minWidth: "87px"
139
+ minWidth: "67px"
131
140
  }, /* @__PURE__ */React.createElement(ui.Text, {
132
- transform: "uppercase",
141
+ variant: "body2",
133
142
  color: "textPrimary",
134
143
  as: "span",
135
- weight: "600",
136
- minWidth: "87px",
137
- align: "right",
138
- lineHeight: "15px"
144
+ weight: "500",
145
+ align: "right"
139
146
  }, "Enquiries")), /* @__PURE__ */React.createElement(ui.Heading, {
140
- as: "h2"
147
+ as: "h4"
141
148
  }, enquiriesCount))))));
142
149
  }
143
150