@bosonprotocol/react-kit 0.34.0-alpha.17 → 0.34.0-alpha.19

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 (29) hide show
  1. package/dist/cjs/components/productCard/ProductCard.styles.d.ts.map +1 -1
  2. package/dist/cjs/components/productCard/ProductCard.styles.js +2 -1
  3. package/dist/cjs/components/productCard/ProductCard.styles.js.map +1 -1
  4. package/dist/cjs/components/productCard/commonStyles.d.ts.map +1 -1
  5. package/dist/cjs/components/productCard/commonStyles.js +0 -1
  6. package/dist/cjs/components/productCard/commonStyles.js.map +1 -1
  7. package/dist/cjs/components/skeleton/CollectionsCardSkeleton.d.ts.map +1 -1
  8. package/dist/cjs/components/skeleton/CollectionsCardSkeleton.js +32 -12
  9. package/dist/cjs/components/skeleton/CollectionsCardSkeleton.js.map +1 -1
  10. package/dist/cjs/components/skeleton/ProductCardSkeleton.d.ts.map +1 -1
  11. package/dist/cjs/components/skeleton/ProductCardSkeleton.js +18 -19
  12. package/dist/cjs/components/skeleton/ProductCardSkeleton.js.map +1 -1
  13. package/dist/esm/components/productCard/ProductCard.styles.d.ts.map +1 -1
  14. package/dist/esm/components/productCard/ProductCard.styles.js +2 -1
  15. package/dist/esm/components/productCard/ProductCard.styles.js.map +1 -1
  16. package/dist/esm/components/productCard/commonStyles.d.ts.map +1 -1
  17. package/dist/esm/components/productCard/commonStyles.js +0 -1
  18. package/dist/esm/components/productCard/commonStyles.js.map +1 -1
  19. package/dist/esm/components/skeleton/CollectionsCardSkeleton.d.ts.map +1 -1
  20. package/dist/esm/components/skeleton/CollectionsCardSkeleton.js +32 -12
  21. package/dist/esm/components/skeleton/CollectionsCardSkeleton.js.map +1 -1
  22. package/dist/esm/components/skeleton/ProductCardSkeleton.d.ts.map +1 -1
  23. package/dist/esm/components/skeleton/ProductCardSkeleton.js +19 -20
  24. package/dist/esm/components/skeleton/ProductCardSkeleton.js.map +1 -1
  25. package/package.json +5 -5
  26. package/src/components/productCard/ProductCard.styles.ts +2 -1
  27. package/src/components/productCard/commonStyles.ts +0 -1
  28. package/src/components/skeleton/CollectionsCardSkeleton.tsx +50 -33
  29. package/src/components/skeleton/ProductCardSkeleton.tsx +24 -36
package/dist/cjs/components/productCard/ProductCard.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGAY5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gNAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;mBAQ7B,CAAC;AACF,eAAO,MAAM,wBAAwB,gNAQpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;sBACX,OAAO;;GAqD1B,CAAC;AAEF,eAAO,MAAM,cAAc;uBAAmC,OAAO;GAOpE,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAE3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;GAKlE,CAAC"}
1
+ {"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGAa5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gNAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;mBAQ7B,CAAC;AACF,eAAO,MAAM,wBAAwB,gNAQpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;sBACX,OAAO;;GAqD1B,CAAC;AAEF,eAAO,MAAM,cAAc;uBAAmC,OAAO;GAOpE,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAE3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;GAKlE,CAAC"}
package/dist/cjs/components/productCard/ProductCard.styles.js CHANGED
@@ -115,12 +115,13 @@ exports.ProductCardTitle = (0, styled_components_1.default)(Typography_1.Typogra
115
115
  color: ${({ theme }) => { var _a; return (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.light.black; }};
116
116
  word-break: break-word;
117
117
  overflow: hidden;
118
- text-overflow: ellipsis;
119
118
  display: -webkit-box;
120
119
  -webkit-box-orient: vertical;
121
120
  -webkit-line-clamp: 2;
122
121
  line-height: 1.5em;
123
122
  max-height: calc(1.5em * 2);
123
+ white-space: nowrap;
124
+ text-overflow: ellipsis;
124
125
  `;
125
126
  exports.ProductCardPriceWrapper = styled_components_1.default.div `
126
127
  display: flex;
package/dist/cjs/components/productCard/ProductCard.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}
package/dist/cjs/components/productCard/commonStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,6CAO7B,CAAC"}
1
+ {"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,6CAM7B,CAAC"}
package/dist/cjs/components/productCard/commonStyles.js CHANGED
@@ -7,7 +7,6 @@ exports.cardWrapperStyles = (0, styled_components_1.css) `
7
7
  padding: 0px;
8
8
  isolation: isolate;
9
9
  width: 100%;
10
- min-height: 31.25rem;
11
10
  box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
12
11
  background: ${theme_1.theme.colors.light.white};
13
12
  `;
package/dist/cjs/components/productCard/commonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"commonStyles.js","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":";;;AAAA,yDAAwC;AACxC,uCAAoC;AAEvB,QAAA,iBAAiB,GAAG,IAAA,uBAAG,EAAA;;;;;;gBAMpB,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;CACvC,CAAC"}
1
+ {"version":3,"file":"commonStyles.js","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":";;;AAAA,yDAAwC;AACxC,uCAAoC;AAEvB,QAAA,iBAAiB,GAAG,IAAA,uBAAG,EAAA;;;;;gBAKpB,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;CACvC,CAAC"}
package/dist/cjs/components/skeleton/CollectionsCardSkeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AA0BpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,gBAoC/D,CAAC"}
1
+ {"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AA2CpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,gBAoC/D,CAAC"}
package/dist/cjs/components/skeleton/CollectionsCardSkeleton.js CHANGED
@@ -9,30 +9,50 @@ const styled_components_1 = __importDefault(require("styled-components"));
9
9
  const theme_1 = require("../../theme");
10
10
  const commonStyles_1 = require("../productCard/commonStyles");
11
11
  const common_1 = require("./common");
12
+ const colors = theme_1.theme.colors.light;
12
13
  const Container = styled_components_1.default.div `
13
- display: grid;
14
- grid-template-columns: 1fr;
15
- grid-template-rows: repeat(2, min-content);
14
+ display: flex;
15
+ flex-direction: column;
16
16
  ${commonStyles_1.cardWrapperStyles}
17
+ /* REMs gives bad height here on smaller views */
18
+ height: 279px;
19
+ min-width: 265px;
17
20
  `;
18
21
  const ImagesContainer = styled_components_1.default.div `
19
22
  width: 100%;
20
- display: grid;
21
- grid-template-columns: repeat(2, 1fr);
22
- grid-template-rows: repeat(2, 1fr);
23
- grid-column-gap: 1px;
24
- grid-row-gap: 1px;
23
+ position: relative;
24
+ /* REMs gives bad height here on smaller views */
25
+ height: 208px;
26
+ background-color: ${colors.lightGrey};
25
27
  `;
26
28
  const BottomCard = styled_components_1.default.div `
27
29
  padding: 1rem 1.5rem 1rem 1.5rem;
28
30
  `;
31
+ const ImageOne = styled_components_1.default.div `
32
+ position: absolute;
33
+ top: 50%;
34
+ left: 10%;
35
+ transform: translateY(-50%);
36
+ `;
37
+ const ImageTwo = styled_components_1.default.div `
38
+ position: absolute;
39
+ right: 10%;
40
+ top: 5%;
41
+ `;
42
+ const ImageThree = styled_components_1.default.div `
43
+ position: absolute;
44
+ right: 10%;
45
+ bottom: 5%;
46
+ `;
29
47
  const CollectionsCardSkeleton = (props) => {
30
48
  return (react_1.default.createElement(Container, null,
31
49
  react_1.default.createElement(ImagesContainer, null,
32
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey }),
33
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey }),
34
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey }),
35
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
50
+ react_1.default.createElement(ImageOne, null,
51
+ react_1.default.createElement(common_1.LoadingBubble, { "$width": "140px", "$height": "102px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
52
+ react_1.default.createElement(ImageTwo, null,
53
+ react_1.default.createElement(common_1.LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
54
+ react_1.default.createElement(ImageThree, null,
55
+ react_1.default.createElement(common_1.LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey }))),
36
56
  react_1.default.createElement(BottomCard, null,
37
57
  react_1.default.createElement(common_1.LoadingBubble, { "$width": "50%", "$height": "26px", "$margin": "0 0 8.75px 0" }),
38
58
  react_1.default.createElement(common_1.LoadingBubble, { "$width": "52px", "$height": "18px", "$margin": "0 0 4.375px 0" }),
package/dist/cjs/components/skeleton/CollectionsCardSkeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAAuC;AACvC,uCAAoC;AACpC,8DAAgE;AAChE,qCAAyC;AAEzC,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;IAIxB,gCAAiB;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;CAOjC,CAAC;AAEF,MAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAE5B,CAAC;AAKK,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,eAAe;YACd,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C;YACF,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C;YACF,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C;YACF,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACc;QAClB,8BAAC,UAAU;YACT,8BAAC,sBAAa,cAAQ,KAAK,aAAS,MAAM,aAAS,cAAc,GAAG;YACpE,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,aAAS,eAAe,GAAG;YACtE,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACnC,CACH,CACb,CAAC;AACJ,CAAC,CAAC;AApCW,QAAA,uBAAuB,2BAoClC"}
1
+ {"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAAuC;AACvC,uCAAoC;AACpC,8DAAgE;AAChE,qCAAyC;AACzC,MAAM,MAAM,GAAG,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAClC,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;IAGxB,gCAAiB;;;;CAIpB,CAAC;AAEF,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;sBAKZ,MAAM,CAAC,SAAS;CACrC,CAAC;AAEF,MAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAE5B,CAAC;AAEF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAK1B,CAAC;AACF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC;AAIK,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,eAAe;YACd,8BAAC,QAAQ;gBACP,8BAAC,sBAAa,cACL,OAAO,aACN,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,8BAAC,QAAQ;gBACP,8BAAC,sBAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,8BAAC,UAAU;gBACT,8BAAC,sBAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACS,CACG;QAClB,8BAAC,UAAU;YACT,8BAAC,sBAAa,cAAQ,KAAK,aAAS,MAAM,aAAS,cAAc,GAAG;YACpE,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,aAAS,eAAe,GAAG;YACtE,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACnC,CACH,CACb,CAAC;AACJ,CAAC,CAAC;AApCW,QAAA,uBAAuB,2BAoClC"}
package/dist/cjs/components/skeleton/ProductCardSkeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAmBpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,iBAAiB,gBAoD3D,CAAC"}
1
+ {"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAapD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,mBAAmB,UAAW,iBAAiB,gBAkC3D,CAAC"}
package/dist/cjs/components/skeleton/ProductCardSkeleton.js CHANGED
@@ -6,35 +6,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ProductCardSkeleton = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const ProductCard_styles_1 = require("../productCard/ProductCard.styles");
9
- const Grid_1 = require("../ui/Grid");
10
9
  const theme_1 = require("../../theme");
11
10
  const common_1 = require("./common");
11
+ const styled_components_1 = __importDefault(require("styled-components"));
12
+ const ProductCardImageWrapperStyled = (0, styled_components_1.default)(ProductCard_styles_1.ProductCardImageWrapper) `
13
+ overflow: hidden;
14
+ width: 100%;
15
+ /* REMs gives bad height here on smaller views */
16
+ max-height: 210px;
17
+ min-height: 11.25rem;
18
+ `;
19
+ const ProductCardTitleWrapperStyled = (0, styled_components_1.default)(ProductCard_styles_1.ProductCardTitleWrapper) `
20
+ margin-bottom: 5px;
21
+ `;
12
22
  const ProductCardSkeleton = (props) => {
13
23
  const { withBottomText } = props;
14
24
  return (react_1.default.createElement(ProductCard_styles_1.ProductCardWrapper, Object.assign({}, props, { "$isHoverDisabled": true }),
15
- react_1.default.createElement(ProductCard_styles_1.ProductCardImageWrapper, null,
25
+ react_1.default.createElement(ProductCardImageWrapperStyled, null,
16
26
  react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "340px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
17
27
  react_1.default.createElement(ProductCard_styles_1.ProductCardBottom, null,
18
28
  react_1.default.createElement("div", null,
19
- react_1.default.createElement(ProductCard_styles_1.ProductCardBottomContent, null,
20
- react_1.default.createElement(Grid_1.Grid, { flexDirection: "column" },
21
- react_1.default.createElement(ProductCard_styles_1.ProductCardCreator, null,
22
- react_1.default.createElement(ProductCard_styles_1.ProductCardCreatorAvatar, null,
23
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "16px", "$height": "16px" })),
24
- react_1.default.createElement(ProductCard_styles_1.ProductCardCreatorName, { "data-avatarname": "product-card" },
25
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "50px", "$height": "12.5px" })))),
26
- react_1.default.createElement(ProductCard_styles_1.ProductCardPriceWrapper, null,
27
- react_1.default.createElement(ProductCard_styles_1.ProductCardPrice, null,
28
- react_1.default.createElement(Grid_1.Grid, { justifyContent: "flex-end" },
29
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "30px", "$height": "10px" }))),
30
- react_1.default.createElement(Grid_1.Grid, { justifyContent: "flex-end", gap: "8px" },
31
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "24px", "$height": "24px" }),
32
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "calc(100% - 24px - 8px)" })))),
33
- react_1.default.createElement(ProductCard_styles_1.ProductCardTitleWrapper, null,
29
+ react_1.default.createElement(ProductCardTitleWrapperStyled, null,
34
30
  react_1.default.createElement(ProductCard_styles_1.ProductCardTitle, null,
35
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "30px" })))),
31
+ react_1.default.createElement(common_1.LoadingBubble, { "$width": "50%", "$height": "12px" }))),
32
+ react_1.default.createElement(ProductCardTitleWrapperStyled, null,
33
+ react_1.default.createElement(ProductCard_styles_1.ProductCardTitle, null,
34
+ react_1.default.createElement(common_1.LoadingBubble, { "$width": "20%", "$height": "8px" })))),
36
35
  withBottomText && (react_1.default.createElement(ProductCard_styles_1.BottomText, null,
37
- react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "15.5px" }))))));
36
+ react_1.default.createElement(common_1.LoadingBubble, { "$width": "15%", "$height": "13px" }))))));
38
37
  };
39
38
  exports.ProductCardSkeleton = ProductCardSkeleton;
40
39
  //# sourceMappingURL=ProductCardSkeleton.js.map
package/dist/cjs/components/skeleton/ProductCardSkeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAa2C;AAC3C,qCAAkC;AAClC,uCAAoC;AACpC,qCAAyC;AAKlC,MAAM,mBAAmB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9D,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,8BAAC,uCAAkB,oBAAK,KAAK,wBAAoB,IAAI;QACnD,8BAAC,4CAAuB;YACtB,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACsB;QAC1B,8BAAC,sCAAiB;YAChB;gBACE,8BAAC,6CAAwB;oBACvB,8BAAC,WAAI,IAAC,aAAa,EAAC,QAAQ;wBAC1B,8BAAC,uCAAkB;4BACjB,8BAAC,6CAAwB;gCACvB,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACrB;4BAC3B,8BAAC,2CAAsB,uBAAiB,cAAc;gCACpD,8BAAC,sBAAa,cAAQ,MAAM,aAAS,QAAQ,GAAG,CACzB,CACN,CAChB;oBACP,8BAAC,4CAAuB;wBACtB,8BAAC,qCAAgB;4BACf,8BAAC,WAAI,IAAC,cAAc,EAAC,UAAU;gCAC7B,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACzC,CACU;wBACnB,8BAAC,WAAI,IAAC,cAAc,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK;4BACvC,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG;4BAC9C,8BAAC,sBAAa,cAAQ,yBAAyB,GAAG,CAC7C,CACiB,CACD;gBAC3B,8BAAC,4CAAuB;oBACtB,8BAAC,qCAAgB;wBACf,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CAC7B,CACK,CACtB;YACL,cAAc,IAAI,CACjB,8BAAC,+BAAU;gBACT,8BAAC,sBAAa,cAAQ,MAAM,aAAS,QAAQ,GAAG,CACrC,CACd,CACiB,CACD,CACtB,CAAC;AACJ,CAAC,CAAC;AApDW,QAAA,mBAAmB,uBAoD9B"}
1
+ {"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAO2C;AAC3C,uCAAoC;AACpC,qCAAyC;AACzC,0EAAuC;AAMvC,MAAM,6BAA6B,GAAG,IAAA,2BAAM,EAAC,4CAAuB,CAAC,CAAA;;;;;;CAMpE,CAAC;AAEF,MAAM,6BAA6B,GAAG,IAAA,2BAAM,EAAC,4CAAuB,CAAC,CAAA;;CAEpE,CAAC;AACK,MAAM,mBAAmB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9D,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,8BAAC,uCAAkB,oBAAK,KAAK,wBAAoB,IAAI;QACnD,8BAAC,6BAA6B;YAC5B,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CAC4B;QAChC,8BAAC,sCAAiB;YAChB;gBACE,8BAAC,6BAA6B;oBAC5B,8BAAC,qCAAgB;wBACf,8BAAC,sBAAa,cAAQ,KAAK,aAAS,MAAM,GAAG,CAC5B,CACW;gBAChC,8BAAC,6BAA6B;oBAC5B,8BAAC,qCAAgB;wBACf,8BAAC,sBAAa,cAAQ,KAAK,aAAS,KAAK,GAAG,CAC3B,CACW,CAC5B;YACL,cAAc,IAAI,CACjB,8BAAC,+BAAU;gBACT,8BAAC,sBAAa,cAAQ,KAAK,aAAS,MAAM,GAAG,CAClC,CACd,CACiB,CACD,CACtB,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,mBAAmB,uBAkC9B"}
package/dist/esm/components/productCard/ProductCard.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGAY5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gNAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;mBAQ7B,CAAC;AACF,eAAO,MAAM,wBAAwB,gNAQpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;sBACX,OAAO;;GAqD1B,CAAC;AAEF,eAAO,MAAM,cAAc;uBAAmC,OAAO;GAOpE,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAE3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;GAKlE,CAAC"}
1
+ {"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGAa5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gNAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;mBAQ7B,CAAC;AACF,eAAO,MAAM,wBAAwB,gNAQpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;sBACX,OAAO;;GAqD1B,CAAC;AAEF,eAAO,MAAM,cAAc;uBAAmC,OAAO;GAOpE,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAE3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;GAKlE,CAAC"}
package/dist/esm/components/productCard/ProductCard.styles.js CHANGED
@@ -89,12 +89,13 @@ export const ProductCardTitle = styled(Typography).attrs({
89
89
  color: ${({ theme }) => theme?.colors?.light.black};
90
90
  word-break: break-word;
91
91
  overflow: hidden;
92
- text-overflow: ellipsis;
93
92
  display: -webkit-box;
94
93
  -webkit-box-orient: vertical;
95
94
  -webkit-line-clamp: 2;
96
95
  line-height: 1.5em;
97
96
  max-height: calc(1.5em * 2);
97
+ white-space: nowrap;
98
+ text-overflow: ellipsis;
98
99
  `;
99
100
  export const ProductCardPriceWrapper = styled.div `
100
101
  display: flex;
package/dist/esm/components/productCard/ProductCard.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}
package/dist/esm/components/productCard/commonStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,6CAO7B,CAAC"}
1
+ {"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,6CAM7B,CAAC"}
package/dist/esm/components/productCard/commonStyles.js CHANGED
@@ -4,7 +4,6 @@ export const cardWrapperStyles = css `
4
4
  padding: 0px;
5
5
  isolation: isolate;
6
6
  width: 100%;
7
- min-height: 31.25rem;
8
7
  box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
9
8
  background: ${theme.colors.light.white};
10
9
  `;
package/dist/esm/components/productCard/commonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"commonStyles.js","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;gBAMpB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;CACvC,CAAC"}
1
+ {"version":3,"file":"commonStyles.js","sourceRoot":"","sources":["../../../../src/components/productCard/commonStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;gBAKpB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK;CACvC,CAAC"}
package/dist/esm/components/skeleton/CollectionsCardSkeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AA0BpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,gBAoC/D,CAAC"}
1
+ {"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AA2CpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,gBAoC/D,CAAC"}
package/dist/esm/components/skeleton/CollectionsCardSkeleton.js CHANGED
@@ -3,30 +3,50 @@ import styled from "styled-components";
3
3
  import { theme } from "../../theme";
4
4
  import { cardWrapperStyles } from "../productCard/commonStyles";
5
5
  import { LoadingBubble } from "./common";
6
+ const colors = theme.colors.light;
6
7
  const Container = styled.div `
7
- display: grid;
8
- grid-template-columns: 1fr;
9
- grid-template-rows: repeat(2, min-content);
8
+ display: flex;
9
+ flex-direction: column;
10
10
  ${cardWrapperStyles}
11
+ /* REMs gives bad height here on smaller views */
12
+ height: 279px;
13
+ min-width: 265px;
11
14
  `;
12
15
  const ImagesContainer = styled.div `
13
16
  width: 100%;
14
- display: grid;
15
- grid-template-columns: repeat(2, 1fr);
16
- grid-template-rows: repeat(2, 1fr);
17
- grid-column-gap: 1px;
18
- grid-row-gap: 1px;
17
+ position: relative;
18
+ /* REMs gives bad height here on smaller views */
19
+ height: 208px;
20
+ background-color: ${colors.lightGrey};
19
21
  `;
20
22
  const BottomCard = styled.div `
21
23
  padding: 1rem 1.5rem 1rem 1.5rem;
22
24
  `;
25
+ const ImageOne = styled.div `
26
+ position: absolute;
27
+ top: 50%;
28
+ left: 10%;
29
+ transform: translateY(-50%);
30
+ `;
31
+ const ImageTwo = styled.div `
32
+ position: absolute;
33
+ right: 10%;
34
+ top: 5%;
35
+ `;
36
+ const ImageThree = styled.div `
37
+ position: absolute;
38
+ right: 10%;
39
+ bottom: 5%;
40
+ `;
23
41
  export const CollectionsCardSkeleton = (props) => {
24
42
  return (React.createElement(Container, null,
25
43
  React.createElement(ImagesContainer, null,
26
- React.createElement(LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey }),
27
- React.createElement(LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey }),
28
- React.createElement(LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey }),
29
- React.createElement(LoadingBubble, { "$width": "100%", "$height": "170px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
44
+ React.createElement(ImageOne, null,
45
+ React.createElement(LoadingBubble, { "$width": "140px", "$height": "102px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
46
+ React.createElement(ImageTwo, null,
47
+ React.createElement(LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
48
+ React.createElement(ImageThree, null,
49
+ React.createElement(LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey }))),
30
50
  React.createElement(BottomCard, null,
31
51
  React.createElement(LoadingBubble, { "$width": "50%", "$height": "26px", "$margin": "0 0 8.75px 0" }),
32
52
  React.createElement(LoadingBubble, { "$width": "52px", "$height": "18px", "$margin": "0 0 4.375px 0" }),
package/dist/esm/components/skeleton/CollectionsCardSkeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAIxB,iBAAiB;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOjC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5B,CAAC;AAKF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,CACL,oBAAC,SAAS;QACR,oBAAC,eAAe;YACd,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C;YACF,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C;YACF,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C;YACF,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACc;QAClB,oBAAC,UAAU;YACT,oBAAC,aAAa,cAAQ,KAAK,aAAS,MAAM,aAAS,cAAc,GAAG;YACpE,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,aAAS,eAAe,GAAG;YACtE,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACnC,CACH,CACb,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAClC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;IAGxB,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;sBAKZ,MAAM,CAAC,SAAS;CACrC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1B,CAAC;AACF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC;AAIF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,CACL,oBAAC,SAAS;QACR,oBAAC,eAAe;YACd,oBAAC,QAAQ;gBACP,oBAAC,aAAa,cACL,OAAO,aACN,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,oBAAC,QAAQ;gBACP,oBAAC,aAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,oBAAC,UAAU;gBACT,oBAAC,aAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACS,CACG;QAClB,oBAAC,UAAU;YACT,oBAAC,aAAa,cAAQ,KAAK,aAAS,MAAM,aAAS,cAAc,GAAG;YACpE,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,aAAS,eAAe,GAAG;YACtE,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACnC,CACH,CACb,CAAC;AACJ,CAAC,CAAC"}
package/dist/esm/components/skeleton/ProductCardSkeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAmBpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,iBAAiB,gBAoD3D,CAAC"}
1
+ {"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAapD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,mBAAmB,UAAW,iBAAiB,gBAkC3D,CAAC"}
package/dist/esm/components/skeleton/ProductCardSkeleton.js CHANGED
@@ -1,33 +1,32 @@
1
1
  import React from "react";
2
- import { BottomText, ProductCardBottom, ProductCardBottomContent, ProductCardCreator, ProductCardCreatorAvatar, ProductCardCreatorName, ProductCardImageWrapper, ProductCardPrice, ProductCardPriceWrapper, ProductCardTitle, ProductCardTitleWrapper, ProductCardWrapper } from "../productCard/ProductCard.styles";
3
- import { Grid } from "../ui/Grid";
2
+ import { BottomText, ProductCardBottom, ProductCardImageWrapper, ProductCardTitle, ProductCardTitleWrapper, ProductCardWrapper } from "../productCard/ProductCard.styles";
4
3
  import { theme } from "../../theme";
5
4
  import { LoadingBubble } from "./common";
5
+ import styled from "styled-components";
6
+ const ProductCardImageWrapperStyled = styled(ProductCardImageWrapper) `
7
+ overflow: hidden;
8
+ width: 100%;
9
+ /* REMs gives bad height here on smaller views */
10
+ max-height: 210px;
11
+ min-height: 11.25rem;
12
+ `;
13
+ const ProductCardTitleWrapperStyled = styled(ProductCardTitleWrapper) `
14
+ margin-bottom: 5px;
15
+ `;
6
16
  export const ProductCardSkeleton = (props) => {
7
17
  const { withBottomText } = props;
8
18
  return (React.createElement(ProductCardWrapper, { ...props, "$isHoverDisabled": true },
9
- React.createElement(ProductCardImageWrapper, null,
19
+ React.createElement(ProductCardImageWrapperStyled, null,
10
20
  React.createElement(LoadingBubble, { "$width": "100%", "$height": "340px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
11
21
  React.createElement(ProductCardBottom, null,
12
22
  React.createElement("div", null,
13
- React.createElement(ProductCardBottomContent, null,
14
- React.createElement(Grid, { flexDirection: "column" },
15
- React.createElement(ProductCardCreator, null,
16
- React.createElement(ProductCardCreatorAvatar, null,
17
- React.createElement(LoadingBubble, { "$width": "16px", "$height": "16px" })),
18
- React.createElement(ProductCardCreatorName, { "data-avatarname": "product-card" },
19
- React.createElement(LoadingBubble, { "$width": "50px", "$height": "12.5px" })))),
20
- React.createElement(ProductCardPriceWrapper, null,
21
- React.createElement(ProductCardPrice, null,
22
- React.createElement(Grid, { justifyContent: "flex-end" },
23
- React.createElement(LoadingBubble, { "$width": "30px", "$height": "10px" }))),
24
- React.createElement(Grid, { justifyContent: "flex-end", gap: "8px" },
25
- React.createElement(LoadingBubble, { "$width": "24px", "$height": "24px" }),
26
- React.createElement(LoadingBubble, { "$width": "calc(100% - 24px - 8px)" })))),
27
- React.createElement(ProductCardTitleWrapper, null,
23
+ React.createElement(ProductCardTitleWrapperStyled, null,
28
24
  React.createElement(ProductCardTitle, null,
29
- React.createElement(LoadingBubble, { "$width": "100%", "$height": "30px" })))),
25
+ React.createElement(LoadingBubble, { "$width": "50%", "$height": "12px" }))),
26
+ React.createElement(ProductCardTitleWrapperStyled, null,
27
+ React.createElement(ProductCardTitle, null,
28
+ React.createElement(LoadingBubble, { "$width": "20%", "$height": "8px" })))),
30
29
  withBottomText && (React.createElement(BottomText, null,
31
- React.createElement(LoadingBubble, { "$width": "100%", "$height": "15.5px" }))))));
30
+ React.createElement(LoadingBubble, { "$width": "15%", "$height": "13px" }))))));
32
31
  };
33
32
  //# sourceMappingURL=ProductCardSkeleton.js.map
package/dist/esm/components/skeleton/ProductCardSkeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,EACtB,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9D,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,oBAAC,kBAAkB,OAAK,KAAK,sBAAoB,IAAI;QACnD,oBAAC,uBAAuB;YACtB,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACsB;QAC1B,oBAAC,iBAAiB;YAChB;gBACE,oBAAC,wBAAwB;oBACvB,oBAAC,IAAI,IAAC,aAAa,EAAC,QAAQ;wBAC1B,oBAAC,kBAAkB;4BACjB,oBAAC,wBAAwB;gCACvB,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACrB;4BAC3B,oBAAC,sBAAsB,uBAAiB,cAAc;gCACpD,oBAAC,aAAa,cAAQ,MAAM,aAAS,QAAQ,GAAG,CACzB,CACN,CAChB;oBACP,oBAAC,uBAAuB;wBACtB,oBAAC,gBAAgB;4BACf,oBAAC,IAAI,IAAC,cAAc,EAAC,UAAU;gCAC7B,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACzC,CACU;wBACnB,oBAAC,IAAI,IAAC,cAAc,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK;4BACvC,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG;4BAC9C,oBAAC,aAAa,cAAQ,yBAAyB,GAAG,CAC7C,CACiB,CACD;gBAC3B,oBAAC,uBAAuB;oBACtB,oBAAC,gBAAgB;wBACf,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CAC7B,CACK,CACtB;YACL,cAAc,IAAI,CACjB,oBAAC,UAAU;gBACT,oBAAC,aAAa,cAAQ,MAAM,aAAS,QAAQ,GAAG,CACrC,CACd,CACiB,CACD,CACtB,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,6BAA6B,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAA;;;;;;CAMpE,CAAC;AAEF,MAAM,6BAA6B,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAA;;CAEpE,CAAC;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9D,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,oBAAC,kBAAkB,OAAK,KAAK,sBAAoB,IAAI;QACnD,oBAAC,6BAA6B;YAC5B,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CAC4B;QAChC,oBAAC,iBAAiB;YAChB;gBACE,oBAAC,6BAA6B;oBAC5B,oBAAC,gBAAgB;wBACf,oBAAC,aAAa,cAAQ,KAAK,aAAS,MAAM,GAAG,CAC5B,CACW;gBAChC,oBAAC,6BAA6B;oBAC5B,oBAAC,gBAAgB;wBACf,oBAAC,aAAa,cAAQ,KAAK,aAAS,KAAK,GAAG,CAC3B,CACW,CAC5B;YACL,cAAc,IAAI,CACjB,oBAAC,UAAU;gBACT,oBAAC,aAAa,cAAQ,KAAK,aAAS,MAAM,GAAG,CAClC,CACd,CACiB,CACD,CACtB,CAAC;AACJ,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bosonprotocol/react-kit",
3
3
  "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
4
- "version": "0.34.0-alpha.17",
4
+ "version": "0.34.0-alpha.19",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
7
7
  "types": "./dist/cjs/index.d.ts",
@@ -15,9 +15,9 @@
15
15
  "license": "Apache-2.0",
16
16
  "dependencies": {
17
17
  "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
18
- "@bosonprotocol/core-sdk": "^1.41.0-alpha.19",
19
- "@bosonprotocol/ethers-sdk": "^1.15.0-alpha.5",
20
- "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.17",
18
+ "@bosonprotocol/core-sdk": "^1.41.0-alpha.21",
19
+ "@bosonprotocol/ethers-sdk": "^1.15.0-alpha.7",
20
+ "@bosonprotocol/ipfs-storage": "^1.12.0-alpha.19",
21
21
  "@davatar/react": "1.11.1",
22
22
  "@ethersproject/units": "5.6.0",
23
23
  "@glidejs/glide": "3.6.0",
@@ -188,5 +188,5 @@
188
188
  "overrides": {
189
189
  "typescript": "^5.1.6"
190
190
  },
191
- "gitHead": "6999b44956f0d4594fc2eeb6fbfdcddf20749825"
191
+ "gitHead": "83234a7d2d0da72604a482c44d1eb43ca5c0541b"
192
192
  }
package/src/components/productCard/ProductCard.styles.ts CHANGED
@@ -95,12 +95,13 @@ export const ProductCardTitle = styled(Typography).attrs({
95
95
  color: ${({ theme }) => theme?.colors?.light.black};
96
96
  word-break: break-word;
97
97
  overflow: hidden;
98
- text-overflow: ellipsis;
99
98
  display: -webkit-box;
100
99
  -webkit-box-orient: vertical;
101
100
  -webkit-line-clamp: 2;
102
101
  line-height: 1.5em;
103
102
  max-height: calc(1.5em * 2);
103
+ white-space: nowrap;
104
+ text-overflow: ellipsis;
104
105
  `;
105
106
 
106
107
  export const ProductCardPriceWrapper = styled.div`
package/src/components/productCard/commonStyles.ts CHANGED
@@ -5,7 +5,6 @@ export const cardWrapperStyles = css`
5
5
  padding: 0px;
6
6
  isolation: isolate;
7
7
  width: 100%;
8
- min-height: 31.25rem;
9
8
  box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
10
9
  background: ${theme.colors.light.white};
11
10
  `;
package/src/components/skeleton/CollectionsCardSkeleton.tsx CHANGED
@@ -3,27 +3,44 @@ import styled from "styled-components";
3
3
  import { theme } from "../../theme";
4
4
  import { cardWrapperStyles } from "../productCard/commonStyles";
5
5
  import { LoadingBubble } from "./common";
6
-
6
+ const colors = theme.colors.light;
7
7
  const Container = styled.div`
8
- display: grid;
9
- grid-template-columns: 1fr;
10
- grid-template-rows: repeat(2, min-content);
8
+ display: flex;
9
+ flex-direction: column;
11
10
  ${cardWrapperStyles}
11
+ /* REMs gives bad height here on smaller views */
12
+ height: 279px;
13
+ min-width: 265px;
12
14
  `;
13
15
 
14
16
  const ImagesContainer = styled.div`
15
17
  width: 100%;
16
- display: grid;
17
- grid-template-columns: repeat(2, 1fr);
18
- grid-template-rows: repeat(2, 1fr);
19
- grid-column-gap: 1px;
20
- grid-row-gap: 1px;
18
+ position: relative;
19
+ /* REMs gives bad height here on smaller views */
20
+ height: 208px;
21
+ background-color: ${colors.lightGrey};
21
22
  `;
22
23
 
23
24
  const BottomCard = styled.div`
24
25
  padding: 1rem 1.5rem 1rem 1.5rem;
25
26
  `;
26
27
 
28
+ const ImageOne = styled.div`
29
+ position: absolute;
30
+ top: 50%;
31
+ left: 10%;
32
+ transform: translateY(-50%);
33
+ `;
34
+ const ImageTwo = styled.div`
35
+ position: absolute;
36
+ right: 10%;
37
+ top: 5%;
38
+ `;
39
+ const ImageThree = styled.div`
40
+ position: absolute;
41
+ right: 10%;
42
+ bottom: 5%;
43
+ `;
27
44
  type SkeletonCardProps = ButtonHTMLAttributes<HTMLDivElement> & {
28
45
  withBottomText?: boolean;
29
46
  };
@@ -31,30 +48,30 @@ export const CollectionsCardSkeleton = (props: SkeletonCardProps) => {
31
48
  return (
32
49
  <Container>
33
50
  <ImagesContainer>
34
- <LoadingBubble
35
- $width="100%"
36
- $height="170px"
37
- $borderRadius="0px"
38
- $backgroundColor={theme.colors.light.darkGrey}
39
- />
40
- <LoadingBubble
41
- $width="100%"
42
- $height="170px"
43
- $borderRadius="0px"
44
- $backgroundColor={theme.colors.light.darkGrey}
45
- />
46
- <LoadingBubble
47
- $width="100%"
48
- $height="170px"
49
- $borderRadius="0px"
50
- $backgroundColor={theme.colors.light.darkGrey}
51
- />
52
- <LoadingBubble
53
- $width="100%"
54
- $height="170px"
55
- $borderRadius="0px"
56
- $backgroundColor={theme.colors.light.darkGrey}
57
- />
51
+ <ImageOne>
52
+ <LoadingBubble
53
+ $width="140px"
54
+ $height="102px"
55
+ $borderRadius="0px"
56
+ $backgroundColor={theme.colors.light.darkGrey}
57
+ />
58
+ </ImageOne>
59
+ <ImageTwo>
60
+ <LoadingBubble
61
+ $width="60px"
62
+ $height="50px"
63
+ $borderRadius="0px"
64
+ $backgroundColor={theme.colors.light.darkGrey}
65
+ />
66
+ </ImageTwo>
67
+ <ImageThree>
68
+ <LoadingBubble
69
+ $width="60px"
70
+ $height="50px"
71
+ $borderRadius="0px"
72
+ $backgroundColor={theme.colors.light.darkGrey}
73
+ />
74
+ </ImageThree>
58
75
  </ImagesContainer>
59
76
  <BottomCard>
60
77
  <LoadingBubble $width="50%" $height="26px" $margin="0 0 8.75px 0" />
package/src/components/skeleton/ProductCardSkeleton.tsx CHANGED
@@ -2,71 +2,59 @@ import React, { ButtonHTMLAttributes } from "react";
2
2
  import {
3
3
  BottomText,
4
4
  ProductCardBottom,
5
- ProductCardBottomContent,
6
- ProductCardCreator,
7
- ProductCardCreatorAvatar,
8
- ProductCardCreatorName,
9
5
  ProductCardImageWrapper,
10
- ProductCardPrice,
11
- ProductCardPriceWrapper,
12
6
  ProductCardTitle,
13
7
  ProductCardTitleWrapper,
14
8
  ProductCardWrapper
15
9
  } from "../productCard/ProductCard.styles";
16
- import { Grid } from "../ui/Grid";
17
10
  import { theme } from "../../theme";
18
11
  import { LoadingBubble } from "./common";
12
+ import styled from "styled-components";
19
13
 
20
14
  type SkeletonCardProps = ButtonHTMLAttributes<HTMLDivElement> & {
21
15
  withBottomText?: boolean;
22
16
  };
17
+
18
+ const ProductCardImageWrapperStyled = styled(ProductCardImageWrapper)`
19
+ overflow: hidden;
20
+ width: 100%;
21
+ /* REMs gives bad height here on smaller views */
22
+ max-height: 210px;
23
+ min-height: 11.25rem;
24
+ `;
25
+
26
+ const ProductCardTitleWrapperStyled = styled(ProductCardTitleWrapper)`
27
+ margin-bottom: 5px;
28
+ `;
23
29
  export const ProductCardSkeleton = (props: SkeletonCardProps) => {
24
30
  const { withBottomText } = props;
25
31
 
26
32
  return (
27
33
  <ProductCardWrapper {...props} $isHoverDisabled={true}>
28
- <ProductCardImageWrapper>
34
+ <ProductCardImageWrapperStyled>
29
35
  <LoadingBubble
30
36
  $width="100%"
31
37
  $height="340px"
32
38
  $borderRadius="0px"
33
39
  $backgroundColor={theme.colors.light.darkGrey}
34
40
  />
35
- </ProductCardImageWrapper>
41
+ </ProductCardImageWrapperStyled>
36
42
  <ProductCardBottom>
37
43
  <div>
38
- <ProductCardBottomContent>
39
- <Grid flexDirection="column">
40
- <ProductCardCreator>
41
- <ProductCardCreatorAvatar>
42
- <LoadingBubble $width="16px" $height="16px" />
43
- </ProductCardCreatorAvatar>
44
- <ProductCardCreatorName data-avatarname="product-card">
45
- <LoadingBubble $width="50px" $height="12.5px" />
46
- </ProductCardCreatorName>
47
- </ProductCardCreator>
48
- </Grid>
49
- <ProductCardPriceWrapper>
50
- <ProductCardPrice>
51
- <Grid justifyContent="flex-end">
52
- <LoadingBubble $width="30px" $height="10px" />
53
- </Grid>
54
- </ProductCardPrice>
55
- <Grid justifyContent="flex-end" gap="8px">
56
- <LoadingBubble $width="24px" $height="24px" />
57
- <LoadingBubble $width="calc(100% - 24px - 8px)" />
58
- </Grid>
59
- </ProductCardPriceWrapper>
60
- </ProductCardBottomContent>
61
- <ProductCardTitleWrapper>
44
+ <ProductCardTitleWrapperStyled>
45
+ <ProductCardTitle>
46
+ <LoadingBubble $width="50%" $height="12px" />
47
+ </ProductCardTitle>
48
+ </ProductCardTitleWrapperStyled>
49
+ <ProductCardTitleWrapperStyled>
62
50
  <ProductCardTitle>
63
- <LoadingBubble $width="100%" $height="30px" />
51
+ <LoadingBubble $width="20%" $height="8px" />
64
52
  </ProductCardTitle>
65
- </ProductCardTitleWrapper>
53
+ </ProductCardTitleWrapperStyled>
66
54
  </div>
67
55
  {withBottomText && (
68
56
  <BottomText>
69
- <LoadingBubble $width="100%" $height="15.5px" />
57
+ <LoadingBubble $width="15%" $height="13px" />
70
58
  </BottomText>
71
59
  )}
72
60
  </ProductCardBottom>