@pelcro/react-pelcro-js 4.0.0-alpha.60 → 4.0.0-alpha.61

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 (4) hide show
  1. package/dist/index.cjs.js +52 -37
  2. package/dist/index.esm.js +52 -37
  3. package/dist/pelcro.css +0 -4
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -19852,6 +19852,7 @@ class SelectModal extends React.Component {
19852
19852
  if (filteredPlans.length) return filteredPlans;
19853
19853
  });
19854
19854
  notifyBugsnag(() => {
19855
+ // eslint-disable-next-line no-undef
19855
19856
  Bugsnag.notify("SelectModal - No data viewed", event => {
19856
19857
  var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
19857
19858
 
@@ -19956,7 +19957,7 @@ class SelectModal extends React.Component {
19956
19957
 
19957
19958
  return /*#__PURE__*/React__default['default'].createElement("div", {
19958
19959
  key: product.id,
19959
- className: `pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
19960
+ className: "pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
19960
19961
  }, product.image && /*#__PURE__*/React__default['default'].createElement("figure", {
19961
19962
  className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
19962
19963
  }, /*#__PURE__*/React__default['default'].createElement("img", {
@@ -19989,7 +19990,7 @@ class SelectModal extends React.Component {
19989
19990
  onClick: productButtonCallback,
19990
19991
  "data-key": product.id,
19991
19992
  id: "pelcro-select-product-back-button",
19992
- className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
19993
+ className: "plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none"
19993
19994
  }, productButtonLabel)));
19994
19995
  });
19995
19996
 
@@ -20026,41 +20027,47 @@ class SelectModal extends React.Component {
20026
20027
  _defineProperty$4(this, "renderProductTabs", () => {
20027
20028
  const {
20028
20029
  prodDescExpanded
20029
- } = this.state;
20030
-
20031
- const productButtonCallback = e => {
20032
- this.setState({
20033
- scrollToTab: false
20034
- });
20035
- this.selectProduct(e);
20036
- };
20030
+ } = this.state; // const productButtonCallback = (e) => {
20031
+ // this.setState({ scrollToTab: false });
20032
+ // this.selectProduct(e);
20033
+ // };
20037
20034
 
20038
20035
  const {
20039
20036
  name,
20040
- image,
20037
+ // image,
20041
20038
  description
20042
- } = this.state.product;
20043
- this.state.productList.map((product, index) => {
20044
- if (product.id === this.state.product.id && this.state.scrollToTab) {
20045
- this.setState(oldState => {
20046
- if (+oldState.initialTabSlide !== +index) {
20047
- return {
20048
- initialTabSlide: index
20049
- };
20050
- }
20051
- });
20052
- }
20039
+ } = this.state.product; // const tabs = this.state.productList.map((product, index) => {
20040
+ // if (
20041
+ // product.id === this.state.product.id &&
20042
+ // this.state.scrollToTab
20043
+ // ) {
20044
+ // this.setState((oldState) => {
20045
+ // if (+oldState.initialTabSlide !== +index) {
20046
+ // return { initialTabSlide: index };
20047
+ // }
20048
+ // });
20049
+ // }
20050
+ // return (
20051
+ // <div
20052
+ // key={product.id}
20053
+ // className="plc-flex plc-w-full plc-justify-center plc-text-center"
20054
+ // >
20055
+ // <button
20056
+ // onClick={(e) => productButtonCallback(e)}
20057
+ // data-key={product.id}
20058
+ // data-index={index}
20059
+ // className={`plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${
20060
+ // product.id === this.state.product.id
20061
+ // ? "plc-border-primary plc-text-primary"
20062
+ // : "plc-border-transparent plc-font-normal plc-text-gray-500"
20063
+ // }`}
20064
+ // >
20065
+ // {product.name}
20066
+ // </button>
20067
+ // </div>
20068
+ // );
20069
+ // });
20053
20070
 
20054
- return /*#__PURE__*/React__default['default'].createElement("div", {
20055
- key: product.id,
20056
- className: "plc-flex plc-w-full plc-justify-center plc-text-center"
20057
- }, /*#__PURE__*/React__default['default'].createElement("button", {
20058
- onClick: e => productButtonCallback(e),
20059
- "data-key": product.id,
20060
- "data-index": index,
20061
- className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
20062
- }, product.name));
20063
- });
20064
20071
  return /*#__PURE__*/React__default['default'].createElement("div", {
20065
20072
  className: "plc-flex plc-flex-col"
20066
20073
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -20093,15 +20100,23 @@ class SelectModal extends React.Component {
20093
20100
  return this.renderProducts();
20094
20101
  }
20095
20102
 
20103
+ const matchingItems = productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20104
+ emphasize: true
20105
+ }));
20106
+ const otherItems = allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index));
20096
20107
  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
20097
20108
  className: "plc-text-sm plc-font-semibold"
20098
- }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20099
- emphasize: true
20100
- })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
20109
+ }, this.locale("labels.restrictiveArticles.subscribeTo")), /*#__PURE__*/React__default['default'].createElement(Carousel, {
20110
+ slidesCount: matchingItems.length,
20111
+ mobileArrowDown: true
20112
+ }, matchingItems), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("hr", {
20101
20113
  className: "plc-my-4"
20102
20114
  }), /*#__PURE__*/React__default['default'].createElement("h3", {
20103
20115
  className: "plc-text-sm plc-font-semibold"
20104
- }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
20116
+ }, this.locale("labels.restrictiveArticles.or")), /*#__PURE__*/React__default['default'].createElement(Carousel, {
20117
+ slidesCount: otherItems.length,
20118
+ mobileArrowDown: true
20119
+ }, otherItems)));
20105
20120
  });
20106
20121
 
20107
20122
  _defineProperty$4(this, "renderPlans", () => {
@@ -20111,7 +20126,7 @@ class SelectModal extends React.Component {
20111
20126
  const items = this.state.planList.map(plan => {
20112
20127
  var _this$state;
20113
20128
 
20114
- this.state.plan.id === plan.id ? true : false;
20129
+ // const isChecked = this.state.plan.id === plan.id ? true : false;
20115
20130
  return /*#__PURE__*/React__default['default'].createElement("div", {
20116
20131
  key: plan.id,
20117
20132
  className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
package/dist/index.esm.js CHANGED
@@ -19822,6 +19822,7 @@ class SelectModal extends Component {
19822
19822
  if (filteredPlans.length) return filteredPlans;
19823
19823
  });
19824
19824
  notifyBugsnag(() => {
19825
+ // eslint-disable-next-line no-undef
19825
19826
  Bugsnag.notify("SelectModal - No data viewed", event => {
19826
19827
  var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
19827
19828
 
@@ -19926,7 +19927,7 @@ class SelectModal extends Component {
19926
19927
 
19927
19928
  return /*#__PURE__*/React__default.createElement("div", {
19928
19929
  key: product.id,
19929
- className: `pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
19930
+ className: "pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper"
19930
19931
  }, product.image && /*#__PURE__*/React__default.createElement("figure", {
19931
19932
  className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
19932
19933
  }, /*#__PURE__*/React__default.createElement("img", {
@@ -19959,7 +19960,7 @@ class SelectModal extends Component {
19959
19960
  onClick: productButtonCallback,
19960
19961
  "data-key": product.id,
19961
19962
  id: "pelcro-select-product-back-button",
19962
- className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
19963
+ className: "plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none"
19963
19964
  }, productButtonLabel)));
19964
19965
  });
19965
19966
 
@@ -19996,41 +19997,47 @@ class SelectModal extends Component {
19996
19997
  _defineProperty$4(this, "renderProductTabs", () => {
19997
19998
  const {
19998
19999
  prodDescExpanded
19999
- } = this.state;
20000
-
20001
- const productButtonCallback = e => {
20002
- this.setState({
20003
- scrollToTab: false
20004
- });
20005
- this.selectProduct(e);
20006
- };
20000
+ } = this.state; // const productButtonCallback = (e) => {
20001
+ // this.setState({ scrollToTab: false });
20002
+ // this.selectProduct(e);
20003
+ // };
20007
20004
 
20008
20005
  const {
20009
20006
  name,
20010
- image,
20007
+ // image,
20011
20008
  description
20012
- } = this.state.product;
20013
- this.state.productList.map((product, index) => {
20014
- if (product.id === this.state.product.id && this.state.scrollToTab) {
20015
- this.setState(oldState => {
20016
- if (+oldState.initialTabSlide !== +index) {
20017
- return {
20018
- initialTabSlide: index
20019
- };
20020
- }
20021
- });
20022
- }
20009
+ } = this.state.product; // const tabs = this.state.productList.map((product, index) => {
20010
+ // if (
20011
+ // product.id === this.state.product.id &&
20012
+ // this.state.scrollToTab
20013
+ // ) {
20014
+ // this.setState((oldState) => {
20015
+ // if (+oldState.initialTabSlide !== +index) {
20016
+ // return { initialTabSlide: index };
20017
+ // }
20018
+ // });
20019
+ // }
20020
+ // return (
20021
+ // <div
20022
+ // key={product.id}
20023
+ // className="plc-flex plc-w-full plc-justify-center plc-text-center"
20024
+ // >
20025
+ // <button
20026
+ // onClick={(e) => productButtonCallback(e)}
20027
+ // data-key={product.id}
20028
+ // data-index={index}
20029
+ // className={`plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${
20030
+ // product.id === this.state.product.id
20031
+ // ? "plc-border-primary plc-text-primary"
20032
+ // : "plc-border-transparent plc-font-normal plc-text-gray-500"
20033
+ // }`}
20034
+ // >
20035
+ // {product.name}
20036
+ // </button>
20037
+ // </div>
20038
+ // );
20039
+ // });
20023
20040
 
20024
- return /*#__PURE__*/React__default.createElement("div", {
20025
- key: product.id,
20026
- className: "plc-flex plc-w-full plc-justify-center plc-text-center"
20027
- }, /*#__PURE__*/React__default.createElement("button", {
20028
- onClick: e => productButtonCallback(e),
20029
- "data-key": product.id,
20030
- "data-index": index,
20031
- className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-block plc-w-full ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
20032
- }, product.name));
20033
- });
20034
20041
  return /*#__PURE__*/React__default.createElement("div", {
20035
20042
  className: "plc-flex plc-flex-col"
20036
20043
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -20063,15 +20070,23 @@ class SelectModal extends Component {
20063
20070
  return this.renderProducts();
20064
20071
  }
20065
20072
 
20073
+ const matchingItems = productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20074
+ emphasize: true
20075
+ }));
20076
+ const otherItems = allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index));
20066
20077
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h3", {
20067
20078
  className: "plc-text-sm plc-font-semibold"
20068
- }, this.locale("labels.restrictiveArticles.subscribeTo")), productsThatMatchArticleTag.map((product, index) => this.renderOneProduct(product, index, {
20069
- emphasize: true
20070
- })), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("hr", {
20079
+ }, this.locale("labels.restrictiveArticles.subscribeTo")), /*#__PURE__*/React__default.createElement(Carousel, {
20080
+ slidesCount: matchingItems.length,
20081
+ mobileArrowDown: true
20082
+ }, matchingItems), (allProductsMinusMatched === null || allProductsMinusMatched === void 0 ? void 0 : allProductsMinusMatched.length) > 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("hr", {
20071
20083
  className: "plc-my-4"
20072
20084
  }), /*#__PURE__*/React__default.createElement("h3", {
20073
20085
  className: "plc-text-sm plc-font-semibold"
20074
- }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
20086
+ }, this.locale("labels.restrictiveArticles.or")), /*#__PURE__*/React__default.createElement(Carousel, {
20087
+ slidesCount: otherItems.length,
20088
+ mobileArrowDown: true
20089
+ }, otherItems)));
20075
20090
  });
20076
20091
 
20077
20092
  _defineProperty$4(this, "renderPlans", () => {
@@ -20081,7 +20096,7 @@ class SelectModal extends Component {
20081
20096
  const items = this.state.planList.map(plan => {
20082
20097
  var _this$state;
20083
20098
 
20084
- this.state.plan.id === plan.id ? true : false;
20099
+ // const isChecked = this.state.plan.id === plan.id ? true : false;
20085
20100
  return /*#__PURE__*/React__default.createElement("div", {
20086
20101
  key: plan.id,
20087
20102
  className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
package/dist/pelcro.css CHANGED
@@ -3041,10 +3041,6 @@ apple-pay-button {
3041
3041
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
3042
3042
  }
3043
3043
 
3044
- .pelcro-root .plc-bg-primary-700{
3045
- background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
3046
- }
3047
-
3048
3044
  .pelcro-root .plc-bg-primary{
3049
3045
  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), var(--plc-primary-lightness));
3050
3046
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pelcro/react-pelcro-js",
3
3
  "description": "Pelcro's React UI Elements",
4
- "version": "4.0.0-alpha.60",
4
+ "version": "4.0.0-alpha.61",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",