@searchspring/snap-preact-components 0.56.1 → 0.56.3

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/Molecules/OverlayBadge/OverlayBadge.d.ts.map +1 -1
  2. package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.js +9 -6
  3. package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map +1 -1
  4. package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.js +9 -6
  5. package/package.json +11 -11
package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA6C7D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAqF/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}
1
+ {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA8C7D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAuF/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}
package/dist/cjs/components/Molecules/OverlayBadge/OverlayBadge.js CHANGED
@@ -32,7 +32,8 @@ var CSS = {
32
32
  var gridTemplateAreas = grid.map(function (row) { return "\"".concat(row.join(' '), "\""); }).join(' ');
33
33
  var columns = grid[0].length;
34
34
  gridProperties = {
35
- gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
35
+ gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
36
+ gridTemplateRows: "repeat(".concat(grid.length, ", minmax(0, 1fr))"),
36
37
  gridTemplateAreas: gridTemplateAreas,
37
38
  };
38
39
  }
@@ -42,13 +43,13 @@ var CSS = {
42
43
  });
43
44
  },
44
45
  BadgePositioning: function (_a) {
45
- var index = _a.index, section = _a.section, tag = _a.tag;
46
+ var index = _a.index, top = _a.top, bottom = _a.bottom, section = _a.section, tag = _a.tag;
46
47
  return (0, react_1.css)({
47
- position: 'absolute',
48
+ position: 'relative',
48
49
  display: 'flex',
49
50
  flexDirection: 'column',
50
51
  alignItems: section == 'right' ? 'flex-end' : 'flex-start',
51
- right: section == 'right' ? 0 : undefined,
52
+ justifyContent: !top && !bottom ? 'center' : bottom && !top ? 'flex-end' : 'flex-start',
52
53
  gap: '0.5em',
53
54
  gridArea: tag,
54
55
  boxSizing: 'border-box',
@@ -78,11 +79,13 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
78
79
  var locations = sections === null || sections === void 0 ? void 0 : sections.map(function (section) {
79
80
  var _a, _b;
80
81
  var sectionSlots = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.data) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.locations[section];
81
- var slots = sectionSlots === null || sectionSlots === void 0 ? void 0 : sectionSlots.map(function (slot) {
82
+ var slots = sectionSlots === null || sectionSlots === void 0 ? void 0 : sectionSlots.map(function (slot, index) {
82
83
  var _a;
83
84
  return ({
84
85
  tag: slot.tag,
85
86
  name: slot.name,
87
+ top: index == 0,
88
+ bottom: index == sectionSlots.length - 1,
86
89
  badges: (_a = result === null || result === void 0 ? void 0 : result.badges) === null || _a === void 0 ? void 0 : _a.atLocation("".concat(section, "/").concat(slot.tag)).slice(0, limit),
87
90
  });
88
91
  }).filter(function (slot) { return slot.badges.length; });
@@ -103,7 +106,7 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
103
106
  (0, react_1.jsx)("div", { className: "ss__overlay-badge__grid-wrapper" }, locations.map(function (location, index) {
104
107
  var _a;
105
108
  return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.map(function (slot) {
106
- return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [CSS.BadgePositioning({ tag: slot.tag, section: location.section, index: index })] }, slot.badges.map(function (badge) {
109
+ return ((0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [CSS.BadgePositioning({ tag: slot.tag, section: location.section, index: index, top: slot.top, bottom: slot.bottom })] }, slot.badges.map(function (badge) {
107
110
  var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component);
108
111
  if (!BadgeComponent) {
109
112
  return (0, react_1.jsx)(preact_1.Fragment, null);
package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA6C7D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAqF/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}
1
+ {"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAe,MAAM,QAAQ,CAAC;AAOxD,OAAO,EAAE,cAAc,EAAc,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACxH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AA8C7D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAuF/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IACjF,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}
package/dist/esm/components/Molecules/OverlayBadge/OverlayBadge.js CHANGED
@@ -13,7 +13,8 @@ const CSS = {
13
13
  const gridTemplateAreas = grid.map((row) => `"${row.join(' ')}"`).join(' ');
14
14
  const columns = grid[0].length;
15
15
  gridProperties = {
16
- gridTemplateColumns: `repeat(${columns}, 1fr)`,
16
+ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
17
+ gridTemplateRows: `repeat(${grid.length}, minmax(0, 1fr))`,
17
18
  gridTemplateAreas,
18
19
  };
19
20
  }
@@ -30,13 +31,13 @@ const CSS = {
30
31
  },
31
32
  });
32
33
  },
33
- BadgePositioning: ({ index, section, tag }) => {
34
+ BadgePositioning: ({ index, top, bottom, section, tag }) => {
34
35
  return css({
35
- position: 'absolute',
36
+ position: 'relative',
36
37
  display: 'flex',
37
38
  flexDirection: 'column',
38
39
  alignItems: section == 'right' ? 'flex-end' : 'flex-start',
39
- right: section == 'right' ? 0 : undefined,
40
+ justifyContent: !top && !bottom ? 'center' : bottom && !top ? 'flex-end' : 'flex-start',
40
41
  gap: '0.5em',
41
42
  gridArea: tag,
42
43
  boxSizing: 'border-box',
@@ -73,9 +74,11 @@ export const OverlayBadge = observer((properties) => {
73
74
  ?.map((section) => {
74
75
  const sectionSlots = meta?.data?.badges?.locations[section];
75
76
  const slots = sectionSlots
76
- ?.map((slot) => ({
77
+ ?.map((slot, index) => ({
77
78
  tag: slot.tag,
78
79
  name: slot.name,
80
+ top: index == 0,
81
+ bottom: index == sectionSlots.length - 1,
79
82
  badges: result?.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
80
83
  }))
81
84
  .filter((slot) => slot.badges.length);
@@ -96,7 +99,7 @@ export const OverlayBadge = observer((properties) => {
96
99
  jsx("div", { ...styling, className: classnames('ss__overlay-badge', className) },
97
100
  jsx("div", { className: "ss__overlay-badge__grid-wrapper" }, locations.map((location, index) => {
98
101
  return location.slots?.map((slot) => {
99
- return (jsx("div", { className: classnames('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [CSS.BadgePositioning({ tag: slot.tag, section: location.section, index })] }, slot.badges.map((badge) => {
102
+ return (jsx("div", { className: classnames('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [CSS.BadgePositioning({ tag: slot.tag, section: location.section, index, top: slot.top, bottom: slot.bottom })] }, slot.badges.map((badge) => {
100
103
  const BadgeComponent = useComponent(badgeComponentMap, badge.component);
101
104
  if (!BadgeComponent) {
102
105
  return jsx(Fragment, null);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.56.1",
3
+ "version": "0.56.3",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@cypress/react": "^8.0.0",
31
31
  "@emotion/react": "11.9.0",
32
- "@searchspring/snap-toolbox": "^0.56.1",
32
+ "@searchspring/snap-toolbox": "^0.56.3",
33
33
  "classnames": "^2.3.2",
34
34
  "cypress": "^12.15.0",
35
35
  "cypress-wait-until": "^1.7.2",
@@ -52,14 +52,14 @@
52
52
  "@babel/preset-env": "^7.21.4",
53
53
  "@babel/preset-react": "^7.18.6",
54
54
  "@babel/runtime": "^7.21.0",
55
- "@searchspring/snap-client": "^0.56.1",
56
- "@searchspring/snap-controller": "^0.56.1",
57
- "@searchspring/snap-event-manager": "^0.56.1",
58
- "@searchspring/snap-logger": "^0.56.1",
59
- "@searchspring/snap-profiler": "^0.56.1",
60
- "@searchspring/snap-store-mobx": "^0.56.1",
61
- "@searchspring/snap-tracker": "^0.56.1",
62
- "@searchspring/snap-url-manager": "^0.56.1",
55
+ "@searchspring/snap-client": "^0.56.3",
56
+ "@searchspring/snap-controller": "^0.56.3",
57
+ "@searchspring/snap-event-manager": "^0.56.3",
58
+ "@searchspring/snap-logger": "^0.56.3",
59
+ "@searchspring/snap-profiler": "^0.56.3",
60
+ "@searchspring/snap-store-mobx": "^0.56.3",
61
+ "@searchspring/snap-tracker": "^0.56.3",
62
+ "@searchspring/snap-url-manager": "^0.56.3",
63
63
  "@storybook/addon-actions": "6.4.22",
64
64
  "@storybook/addon-controls": "6.4.22",
65
65
  "@storybook/addon-docs": "6.4.22",
@@ -84,5 +84,5 @@
84
84
  "webpack-merge": "^5.8.0"
85
85
  },
86
86
  "sideEffects": false,
87
- "gitHead": "119ff8b630ca483a18806dadb866e7251b9dac23"
87
+ "gitHead": "adfae18ce3d54a471fa84feb5dd88a074c204520"
88
88
  }