@tenancy.nz/tenant-ui 1.6.0 → 1.6.2

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/property-card-skeleton.cjs +58 -0
  2. package/dist/cjs/components/property-card.cjs +23 -6
  3. package/dist/cjs/components/property-card.styled.cjs +16 -2
  4. package/dist/cjs/index.cjs +2 -0
  5. package/dist/esm/components/property-card-skeleton.js +54 -0
  6. package/dist/esm/components/property-card.js +23 -6
  7. package/dist/esm/components/property-card.styled.js +16 -2
  8. package/dist/esm/index.js +1 -0
  9. package/package.json +3 -3
package/dist/cjs/components/property-card-skeleton.cjs ADDED
@@ -0,0 +1,58 @@
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 PropertyCardSkeleton(_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({}, fullHeight && {
20
+ height: "100%",
21
+ display: "flex",
22
+ flexDirection: "column"
23
+ })
24
+ }, /* @__PURE__ */React.createElement(ui.Skeleton, {
25
+ width: "100%",
26
+ height: "200px",
27
+ variant: "rectangular"
28
+ }), /* @__PURE__ */React.createElement(Stack, {
29
+ p: 4,
30
+ position: "relative",
31
+ gap: 2,
32
+ flex: 1
33
+ }, /* @__PURE__ */React.createElement(Stack, {
34
+ flexDirection: "row",
35
+ gap: 2,
36
+ alignItems: "center"
37
+ }, /* @__PURE__ */React.createElement(Stack, {
38
+ gap: 1,
39
+ width: "100%"
40
+ }, /* @__PURE__ */React.createElement(ui.Skeleton, {
41
+ variant: "text",
42
+ width: "60%",
43
+ height: 24
44
+ }), /* @__PURE__ */React.createElement(ui.Skeleton, {
45
+ variant: "text",
46
+ width: "50%",
47
+ height: 16
48
+ }))), /* @__PURE__ */React.createElement(Stack, {
49
+ mt: "auto",
50
+ pt: 4
51
+ }, /* @__PURE__ */React.createElement(ui.Skeleton, {
52
+ width: "100%",
53
+ variant: "text",
54
+ height: 40
55
+ })))));
56
+ }
57
+
58
+ exports.default = PropertyCardSkeleton;
package/dist/cjs/components/property-card.cjs CHANGED
@@ -29,6 +29,8 @@ 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,
32
34
  _ref$parkingSpaces = _ref.parkingSpaces,
33
35
  parkingSpaces = _ref$parkingSpaces === void 0 ? void 0 : _ref$parkingSpaces,
34
36
  _ref$photoSrc = _ref.photoSrc,
@@ -50,17 +52,29 @@ function PropertyCard(_ref) {
50
52
  })
51
53
  }, /* @__PURE__ */React.createElement(ui.Paper, {
52
54
  overflow: false,
53
- sx: _rollupPluginBabelHelpers.objectSpread2({}, fullHeight && {
54
- height: "100%",
55
- display: "flex",
55
+ sx: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
56
+ display: "flex"
57
+ }, orientation === "vertical" && {
56
58
  flexDirection: "column"
59
+ }), orientation === "horizontal" && {
60
+ flexDirection: {
61
+ xs: "column",
62
+ md: "row"
63
+ }
64
+ }), fullHeight && {
65
+ height: "100%"
57
66
  })
58
- }, /* @__PURE__ */React.createElement(propertyCard_styled.StyledPropertyItemImgWrapper, null, photoSrc && /* @__PURE__ */React.createElement(ui.Media, {
67
+ }, /* @__PURE__ */React.createElement(propertyCard_styled.StyledPropertyItemImgWrapper, {
68
+ orientation: orientation
69
+ }, photoSrc && /* @__PURE__ */React.createElement(ui.Media, {
59
70
  src: photoSrc,
60
71
  title: addressPart1,
61
72
  as: "img"
62
73
  })), /* @__PURE__ */React.createElement(Stack, {
63
- p: 4,
74
+ p: orientation === "vertical" ? 4 : {
75
+ xs: 4,
76
+ md: 8
77
+ },
64
78
  position: "relative",
65
79
  gap: 2,
66
80
  flex: 1
@@ -92,7 +106,10 @@ function PropertyCard(_ref) {
92
106
  }), rent && /* @__PURE__ */React.createElement(rentIconLabel.default, {
93
107
  text: rent,
94
108
  sx: {
95
- ml: "auto"
109
+ ml: orientation === "vertical" ? "auto" : {
110
+ xs: 2,
111
+ md: 4
112
+ }
96
113
  }
97
114
  }))), footer && /* @__PURE__ */React.createElement(Stack, {
98
115
  sx: {
package/dist/cjs/components/property-card.styled.cjs CHANGED
@@ -2,8 +2,22 @@
2
2
 
3
3
  var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
4
4
  var styled = require('@emotion/styled');
5
+ var react = require('@emotion/react');
5
6
 
6
- var _templateObject;
7
- var StyledPropertyItemImgWrapper = styled.figure(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background-color: #ebebeb;\n background-image:\n linear-gradient(45deg, #fff 25%, transparent 25%),\n linear-gradient(-45deg, #fff 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #fff 75%),\n linear-gradient(-45deg, transparent 75%, #fff 75%);\n background-size: 40px 40px;\n background-position:\n 0 0,\n 0 20px,\n 20px -20px,\n -20px 0px;\n width: 100%;\n max-width: 100%;\n height: 200px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n"])));
7
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
8
+ var verticalStyles = function verticalStyles() {
9
+ return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 100%;\n max-width: 100%;\n height: 220px;\n"])));
10
+ };
11
+ var horizontalStyles = function horizontalStyles(_ref) {
12
+ var theme = _ref.theme;
13
+ return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", " {\n ", "\n }\n\n ", " {\n height: 220px;\n width: 100%;\n max-width: 360px;\n }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
14
+ };
15
+ var StyledPropertyItemImgWrapper = styled.figure(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref2) {
16
+ var orientation = _ref2.orientation,
17
+ theme = _ref2.theme;
18
+ return react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background-color: #ebebeb;\n background-image:\n linear-gradient(45deg, #fff 25%, transparent 25%),\n linear-gradient(-45deg, #fff 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #fff 75%),\n linear-gradient(-45deg, transparent 75%, #fff 75%);\n background-size: 40px 40px;\n background-position:\n 0 0,\n 0 20px,\n 20px -20px,\n -20px 0px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n ", "\n ", "\n "])), orientation === "horizontal" && horizontalStyles({
19
+ theme: theme
20
+ }), orientation === "vertical" && verticalStyles());
21
+ });
8
22
 
9
23
  exports.StyledPropertyItemImgWrapper = StyledPropertyItemImgWrapper;
package/dist/cjs/index.cjs CHANGED
@@ -4,6 +4,7 @@ var agencyLogo = require('./components/agency-logo.cjs');
4
4
  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
+ var propertyCardSkeleton = require('./components/property-card-skeleton.cjs');
7
8
  var rentIconLabel = require('./components/rent-icon-label.cjs');
8
9
 
9
10
 
@@ -12,4 +13,5 @@ exports.AgencyLogo = agencyLogo.default;
12
13
  exports.IconLabel = iconLabel.default;
13
14
  exports.PropertyAttributes = propertyAttributes.default;
14
15
  exports.PropertyCard = propertyCard.default;
16
+ exports.PropertyCardSkeleton = propertyCardSkeleton.default;
15
17
  exports.RentIconLabel = rentIconLabel.default;
package/dist/esm/components/property-card-skeleton.js ADDED
@@ -0,0 +1,54 @@
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 PropertyCardSkeleton(_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({}, fullHeight && {
16
+ height: "100%",
17
+ display: "flex",
18
+ flexDirection: "column"
19
+ })
20
+ }, /* @__PURE__ */React.createElement(Skeleton, {
21
+ width: "100%",
22
+ height: "200px",
23
+ variant: "rectangular"
24
+ }), /* @__PURE__ */React.createElement(Stack, {
25
+ p: 4,
26
+ position: "relative",
27
+ gap: 2,
28
+ flex: 1
29
+ }, /* @__PURE__ */React.createElement(Stack, {
30
+ flexDirection: "row",
31
+ gap: 2,
32
+ alignItems: "center"
33
+ }, /* @__PURE__ */React.createElement(Stack, {
34
+ gap: 1,
35
+ width: "100%"
36
+ }, /* @__PURE__ */React.createElement(Skeleton, {
37
+ variant: "text",
38
+ width: "60%",
39
+ height: 24
40
+ }), /* @__PURE__ */React.createElement(Skeleton, {
41
+ variant: "text",
42
+ width: "50%",
43
+ height: 16
44
+ }))), /* @__PURE__ */React.createElement(Stack, {
45
+ mt: "auto",
46
+ pt: 4
47
+ }, /* @__PURE__ */React.createElement(Skeleton, {
48
+ width: "100%",
49
+ variant: "text",
50
+ height: 40
51
+ })))));
52
+ }
53
+
54
+ export { PropertyCardSkeleton as default };
package/dist/esm/components/property-card.js CHANGED
@@ -25,6 +25,8 @@ 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,
28
30
  _ref$parkingSpaces = _ref.parkingSpaces,
29
31
  parkingSpaces = _ref$parkingSpaces === void 0 ? void 0 : _ref$parkingSpaces,
30
32
  _ref$photoSrc = _ref.photoSrc,
@@ -46,17 +48,29 @@ function PropertyCard(_ref) {
46
48
  })
47
49
  }, /* @__PURE__ */React.createElement(Paper, {
48
50
  overflow: false,
49
- sx: _objectSpread2({}, fullHeight && {
50
- height: "100%",
51
- display: "flex",
51
+ sx: _objectSpread2(_objectSpread2(_objectSpread2({
52
+ display: "flex"
53
+ }, orientation === "vertical" && {
52
54
  flexDirection: "column"
55
+ }), orientation === "horizontal" && {
56
+ flexDirection: {
57
+ xs: "column",
58
+ md: "row"
59
+ }
60
+ }), fullHeight && {
61
+ height: "100%"
53
62
  })
54
- }, /* @__PURE__ */React.createElement(StyledPropertyItemImgWrapper, null, photoSrc && /* @__PURE__ */React.createElement(Media, {
63
+ }, /* @__PURE__ */React.createElement(StyledPropertyItemImgWrapper, {
64
+ orientation: orientation
65
+ }, photoSrc && /* @__PURE__ */React.createElement(Media, {
55
66
  src: photoSrc,
56
67
  title: addressPart1,
57
68
  as: "img"
58
69
  })), /* @__PURE__ */React.createElement(Stack, {
59
- p: 4,
70
+ p: orientation === "vertical" ? 4 : {
71
+ xs: 4,
72
+ md: 8
73
+ },
60
74
  position: "relative",
61
75
  gap: 2,
62
76
  flex: 1
@@ -88,7 +102,10 @@ function PropertyCard(_ref) {
88
102
  }), rent && /* @__PURE__ */React.createElement(RentIconLabel, {
89
103
  text: rent,
90
104
  sx: {
91
- ml: "auto"
105
+ ml: orientation === "vertical" ? "auto" : {
106
+ xs: 2,
107
+ md: 4
108
+ }
92
109
  }
93
110
  }))), footer && /* @__PURE__ */React.createElement(Stack, {
94
111
  sx: {
package/dist/esm/components/property-card.styled.js CHANGED
@@ -1,7 +1,21 @@
1
1
  import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
2
2
  import styled from '@emotion/styled';
3
+ import { css } from '@emotion/react';
3
4
 
4
- var _templateObject;
5
- var StyledPropertyItemImgWrapper = styled.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: #ebebeb;\n background-image:\n linear-gradient(45deg, #fff 25%, transparent 25%),\n linear-gradient(-45deg, #fff 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #fff 75%),\n linear-gradient(-45deg, transparent 75%, #fff 75%);\n background-size: 40px 40px;\n background-position:\n 0 0,\n 0 20px,\n 20px -20px,\n -20px 0px;\n width: 100%;\n max-width: 100%;\n height: 200px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n"])));
5
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
6
+ var verticalStyles = function verticalStyles() {
7
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n max-width: 100%;\n height: 220px;\n"])));
8
+ };
9
+ var horizontalStyles = function horizontalStyles(_ref) {
10
+ var theme = _ref.theme;
11
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", " {\n ", "\n }\n\n ", " {\n height: 220px;\n width: 100%;\n max-width: 360px;\n }\n"])), theme.breakpoints.down("md"), verticalStyles(), theme.breakpoints.up("md"));
12
+ };
13
+ var StyledPropertyItemImgWrapper = styled.figure(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref2) {
14
+ var orientation = _ref2.orientation,
15
+ theme = _ref2.theme;
16
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: #ebebeb;\n background-image:\n linear-gradient(45deg, #fff 25%, transparent 25%),\n linear-gradient(-45deg, #fff 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #fff 75%),\n linear-gradient(-45deg, transparent 75%, #fff 75%);\n background-size: 40px 40px;\n background-position:\n 0 0,\n 0 20px,\n 20px -20px,\n -20px 0px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n ", "\n ", "\n "])), orientation === "horizontal" && horizontalStyles({
17
+ theme: theme
18
+ }), orientation === "vertical" && verticalStyles());
19
+ });
6
20
 
7
21
  export { StyledPropertyItemImgWrapper };
package/dist/esm/index.js CHANGED
@@ -2,4 +2,5 @@ export { default as AgencyLogo } from './components/agency-logo.js';
2
2
  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
+ export { default as PropertyCardSkeleton } from './components/property-card-skeleton.js';
5
6
  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.6.0",
4
+ "version": "1.6.2",
5
5
  "author": "TPS <https://www.tenancy.co.nz>",
6
6
  "type": "module",
7
7
  "main": "dist/cjs/index.cjs",
@@ -17,14 +17,14 @@
17
17
  "@mui/material": "^7.3.1",
18
18
  "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
19
19
  "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
20
- "@tenancy.nz/ui": "1.6.0"
20
+ "@tenancy.nz/ui": "1.6.2"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@emotion/react": "^11.14.0",
24
24
  "@emotion/styled": "^11.14.1",
25
25
  "@mui/icons-material": "^7.2.0",
26
26
  "@mui/material": "^7.3.1",
27
- "@tenancy.nz/ui": "1.6.0"
27
+ "@tenancy.nz/ui": "1.6.2"
28
28
  },
29
29
  "dependencies": {
30
30
  "react-uid": "^2.4.0"