@tenancy.nz/tenant-ui 1.6.1 → 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 (5) hide show
  1. package/dist/cjs/components/property-card.cjs +23 -6
  2. package/dist/cjs/components/property-card.styled.cjs +16 -2
  3. package/dist/esm/components/property-card.js +23 -6
  4. package/dist/esm/components/property-card.styled.js +16 -2
  5. package/package.json +3 -3
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/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/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.1",
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.1"
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.1"
27
+ "@tenancy.nz/ui": "1.6.2"
28
28
  },
29
29
  "dependencies": {
30
30
  "react-uid": "^2.4.0"