@ikas/storefront 0.0.126 → 0.0.127

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/build/components/checkout/components/checkbox/index.d.ts +1 -0
  2. package/build/index.es.js +8 -5
  3. package/build/index.js +8 -5
  4. package/package.json +1 -1
package/build/components/checkout/components/checkbox/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import * as React from "react";
2
2
  declare type Props = {
3
3
  value: boolean;
4
4
  label?: string | React.ReactElement;
5
+ hasError?: boolean;
5
6
  onChange: (value: boolean) => void;
6
7
  };
7
8
  export declare const Checkbox: React.FC<Props>;
package/build/index.es.js CHANGED
@@ -26861,27 +26861,30 @@ var SVGCheck = function (_a) {
26861
26861
  createElement("path", { fill: "currentColor", d: "M12.6 8.1l-3.7-3.8 1-1.1 2.7 2.7 5.5-5.4 1 1z" })));
26862
26862
  };
26863
26863
 
26864
- var css_248z$1 = ".style-module_CheckboxWrapper__2tSbx {\n width: 100%;\n display: flex;\n padding: 0.5em;\n cursor: pointer;\n user-select: none; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxContainer__1zRvT {\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 0.75em; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3 {\n flex: 0 0 auto;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 1px solid #d9d9d9;\n position: absolute;\n top: 0;\n left: 0;\n transition: border-width .2s ease-in-out; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3.style-module_Checked__3-ZM4 {\n border: 10px solid #111111; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ- {\n width: 20px;\n height: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n color: white;\n z-index: 2;\n transition: all 0.2s ease-in-out;\n transition-delay: .1s;\n opacity: 0;\n transform: scale(0.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ-.style-module_Visible__2Ng5Q {\n opacity: 1;\n transform: scale(1.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxLabel__30uMC {\n flex: 1 1 auto;\n font-weight: normal;\n font-size: 0.85em;\n color: #545454; }\n";
26865
- var styles$1 = {"CheckboxWrapper":"style-module_CheckboxWrapper__2tSbx","CheckboxContainer":"style-module_CheckboxContainer__1zRvT","CheckboxBorder":"style-module_CheckboxBorder__281X3","Checked":"style-module_Checked__3-ZM4","CheckboxTick":"style-module_CheckboxTick__2LpQ-","Visible":"style-module_Visible__2Ng5Q","CheckboxLabel":"style-module_CheckboxLabel__30uMC"};
26864
+ var css_248z$1 = ".style-module_CheckboxWrapper__2tSbx {\n width: 100%;\n display: flex;\n padding: 0.5em;\n cursor: pointer;\n user-select: none; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxContainer__1zRvT {\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 0.75em; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3 {\n flex: 0 0 auto;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 1px solid #d9d9d9;\n position: absolute;\n top: 0;\n left: 0;\n transition: border-width .2s ease-in-out; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3.style-module_Checked__3-ZM4 {\n border: 10px solid #111111; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ- {\n width: 20px;\n height: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n color: white;\n z-index: 2;\n transition: all 0.2s ease-in-out;\n transition-delay: .1s;\n opacity: 0;\n transform: scale(0.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ-.style-module_Visible__2Ng5Q {\n opacity: 1;\n transform: scale(1.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxLabel__30uMC {\n flex: 1 1 auto;\n font-weight: normal;\n font-size: 0.85em;\n color: #545454; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxLabelError__FmdxF {\n color: #ff6d6d; }\n";
26865
+ var styles$1 = {"CheckboxWrapper":"style-module_CheckboxWrapper__2tSbx","CheckboxContainer":"style-module_CheckboxContainer__1zRvT","CheckboxBorder":"style-module_CheckboxBorder__281X3","Checked":"style-module_Checked__3-ZM4","CheckboxTick":"style-module_CheckboxTick__2LpQ-","Visible":"style-module_Visible__2Ng5Q","CheckboxLabel":"style-module_CheckboxLabel__30uMC","CheckboxLabelError":"style-module_CheckboxLabelError__FmdxF"};
26866
26866
  styleInject(css_248z$1);
26867
26867
 
26868
26868
  var Checkbox = observer(function (_a) {
26869
- var value = _a.value, label = _a.label, onChange = _a.onChange;
26869
+ var value = _a.value, label = _a.label, hasError = _a.hasError, onChange = _a.onChange;
26870
26870
  var _onChange = function () {
26871
26871
  onChange(!value);
26872
26872
  };
26873
26873
  var checkboxBorderClasses = [styles$1.CheckboxBorder];
26874
+ var labelClasses = [styles$1.CheckboxLabel];
26874
26875
  var tickClasses = [styles$1.CheckboxTick];
26875
26876
  if (value) {
26876
26877
  checkboxBorderClasses.push(styles$1.Checked);
26877
26878
  tickClasses.push(styles$1.Visible);
26878
26879
  }
26880
+ if (hasError)
26881
+ labelClasses.push(styles$1.CheckboxLabelError);
26879
26882
  return (createElement("div", { className: styles$1.CheckboxWrapper, onClick: _onChange },
26880
26883
  createElement("div", { className: styles$1.CheckboxContainer },
26881
26884
  createElement("div", { className: checkboxBorderClasses.join(" ") }),
26882
26885
  createElement("div", { className: tickClasses.join(" ") },
26883
26886
  createElement(SVGCheck, null))),
26884
- !!label && createElement("div", { className: styles$1.CheckboxLabel }, label)));
26887
+ !!label && createElement("div", { className: labelClasses.join(" ") }, label)));
26885
26888
  });
26886
26889
 
26887
26890
  var AddressFormViewModel = /** @class */ (function () {
@@ -27593,7 +27596,7 @@ var CheckoutStepPayment = observer(function (_a) {
27593
27596
  createElement("div", { className: [commonStyles.Title].join(" ") }, "Sipari\u015F Notu")),
27594
27597
  createElement(FormItem, { type: FormItemType.TEXT_AREA, label: "", value: vm.checkout.note || "", onChange: vm.onCheckoutNoteChange }))),
27595
27598
  vm.checkoutSettings.showTermsAndConditionsCheckbox && (createElement("div", { style: { marginTop: "12px" } },
27596
- createElement(Checkbox, { value: vm.isTermsAndConditionsChecked, label: createElement(Fragment, null,
27599
+ createElement(Checkbox, { value: vm.isTermsAndConditionsChecked, hasError: vm.isErrorsVisible && !vm.isTermsAndConditionsChecked, label: createElement(Fragment, null,
27597
27600
  createElement("span", { className: styles$d.TermsLabelSpan, onClick: onShowTermsClick }, "Mesafeli sat\u0131\u015F s\u00F6zle\u015Fmesini"),
27598
27601
  " ",
27599
27602
  "okudum ve onayl\u0131yorum"), onChange: vm.onTermsAndConditionsCheckedChange }))),
package/build/index.js CHANGED
@@ -26841,27 +26841,30 @@ var SVGCheck = function (_a) {
26841
26841
  React.createElement("path", { fill: "currentColor", d: "M12.6 8.1l-3.7-3.8 1-1.1 2.7 2.7 5.5-5.4 1 1z" })));
26842
26842
  };
26843
26843
 
26844
- var css_248z$1 = ".style-module_CheckboxWrapper__2tSbx {\n width: 100%;\n display: flex;\n padding: 0.5em;\n cursor: pointer;\n user-select: none; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxContainer__1zRvT {\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 0.75em; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3 {\n flex: 0 0 auto;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 1px solid #d9d9d9;\n position: absolute;\n top: 0;\n left: 0;\n transition: border-width .2s ease-in-out; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3.style-module_Checked__3-ZM4 {\n border: 10px solid #111111; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ- {\n width: 20px;\n height: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n color: white;\n z-index: 2;\n transition: all 0.2s ease-in-out;\n transition-delay: .1s;\n opacity: 0;\n transform: scale(0.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ-.style-module_Visible__2Ng5Q {\n opacity: 1;\n transform: scale(1.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxLabel__30uMC {\n flex: 1 1 auto;\n font-weight: normal;\n font-size: 0.85em;\n color: #545454; }\n";
26845
- var styles$1 = {"CheckboxWrapper":"style-module_CheckboxWrapper__2tSbx","CheckboxContainer":"style-module_CheckboxContainer__1zRvT","CheckboxBorder":"style-module_CheckboxBorder__281X3","Checked":"style-module_Checked__3-ZM4","CheckboxTick":"style-module_CheckboxTick__2LpQ-","Visible":"style-module_Visible__2Ng5Q","CheckboxLabel":"style-module_CheckboxLabel__30uMC"};
26844
+ var css_248z$1 = ".style-module_CheckboxWrapper__2tSbx {\n width: 100%;\n display: flex;\n padding: 0.5em;\n cursor: pointer;\n user-select: none; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxContainer__1zRvT {\n position: relative;\n width: 20px;\n height: 20px;\n margin-right: 0.75em; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3 {\n flex: 0 0 auto;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n border: 1px solid #d9d9d9;\n position: absolute;\n top: 0;\n left: 0;\n transition: border-width .2s ease-in-out; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxBorder__281X3.style-module_Checked__3-ZM4 {\n border: 10px solid #111111; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ- {\n width: 20px;\n height: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0;\n left: 0;\n color: white;\n z-index: 2;\n transition: all 0.2s ease-in-out;\n transition-delay: .1s;\n opacity: 0;\n transform: scale(0.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxTick__2LpQ-.style-module_Visible__2Ng5Q {\n opacity: 1;\n transform: scale(1.2); }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxLabel__30uMC {\n flex: 1 1 auto;\n font-weight: normal;\n font-size: 0.85em;\n color: #545454; }\n .style-module_CheckboxWrapper__2tSbx .style-module_CheckboxLabelError__FmdxF {\n color: #ff6d6d; }\n";
26845
+ var styles$1 = {"CheckboxWrapper":"style-module_CheckboxWrapper__2tSbx","CheckboxContainer":"style-module_CheckboxContainer__1zRvT","CheckboxBorder":"style-module_CheckboxBorder__281X3","Checked":"style-module_Checked__3-ZM4","CheckboxTick":"style-module_CheckboxTick__2LpQ-","Visible":"style-module_Visible__2Ng5Q","CheckboxLabel":"style-module_CheckboxLabel__30uMC","CheckboxLabelError":"style-module_CheckboxLabelError__FmdxF"};
26846
26846
  styleInject(css_248z$1);
26847
26847
 
26848
26848
  var Checkbox = mobxReactLite.observer(function (_a) {
26849
- var value = _a.value, label = _a.label, onChange = _a.onChange;
26849
+ var value = _a.value, label = _a.label, hasError = _a.hasError, onChange = _a.onChange;
26850
26850
  var _onChange = function () {
26851
26851
  onChange(!value);
26852
26852
  };
26853
26853
  var checkboxBorderClasses = [styles$1.CheckboxBorder];
26854
+ var labelClasses = [styles$1.CheckboxLabel];
26854
26855
  var tickClasses = [styles$1.CheckboxTick];
26855
26856
  if (value) {
26856
26857
  checkboxBorderClasses.push(styles$1.Checked);
26857
26858
  tickClasses.push(styles$1.Visible);
26858
26859
  }
26860
+ if (hasError)
26861
+ labelClasses.push(styles$1.CheckboxLabelError);
26859
26862
  return (React.createElement("div", { className: styles$1.CheckboxWrapper, onClick: _onChange },
26860
26863
  React.createElement("div", { className: styles$1.CheckboxContainer },
26861
26864
  React.createElement("div", { className: checkboxBorderClasses.join(" ") }),
26862
26865
  React.createElement("div", { className: tickClasses.join(" ") },
26863
26866
  React.createElement(SVGCheck, null))),
26864
- !!label && React.createElement("div", { className: styles$1.CheckboxLabel }, label)));
26867
+ !!label && React.createElement("div", { className: labelClasses.join(" ") }, label)));
26865
26868
  });
26866
26869
 
26867
26870
  var AddressFormViewModel = /** @class */ (function () {
@@ -27573,7 +27576,7 @@ var CheckoutStepPayment = mobxReactLite.observer(function (_a) {
27573
27576
  React.createElement("div", { className: [commonStyles.Title].join(" ") }, "Sipari\u015F Notu")),
27574
27577
  React.createElement(FormItem, { type: FormItemType.TEXT_AREA, label: "", value: vm.checkout.note || "", onChange: vm.onCheckoutNoteChange }))),
27575
27578
  vm.checkoutSettings.showTermsAndConditionsCheckbox && (React.createElement("div", { style: { marginTop: "12px" } },
27576
- React.createElement(Checkbox, { value: vm.isTermsAndConditionsChecked, label: React.createElement(React.Fragment, null,
27579
+ React.createElement(Checkbox, { value: vm.isTermsAndConditionsChecked, hasError: vm.isErrorsVisible && !vm.isTermsAndConditionsChecked, label: React.createElement(React.Fragment, null,
27577
27580
  React.createElement("span", { className: styles$d.TermsLabelSpan, onClick: onShowTermsClick }, "Mesafeli sat\u0131\u015F s\u00F6zle\u015Fmesini"),
27578
27581
  " ",
27579
27582
  "okudum ve onayl\u0131yorum"), onChange: vm.onTermsAndConditionsCheckedChange }))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ikas/storefront",
3
- "version": "0.0.126",
3
+ "version": "0.0.127",
4
4
  "main": "./build/index.js",
5
5
  "module": "./build/index.es.js",
6
6
  "author": "Umut Ozan Yıldırım",