krl-alfred 1.70.4 → 1.71.0

package/dist/components/ActionButton/ActionButton.js

@@ -48,7 +48,7 @@ var ActionButton = function (props) {
     (0, react_1.useEffect)(function () {
         count();
     }, [props.date]);
-    return (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "top", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props.icon, width: "45px", height: "45px" }) }), (0, jsx_runtime_1.jsx)("strong", { className: "title body-bold-13-16", children: props.title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bottom", children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "timer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: days }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "G\u00FCn" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: hours }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Saat" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: minutes }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Dk." })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] })] }));
+    return (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "top", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props.icon, width: "45px", height: "45px" }) }), (0, jsx_runtime_1.jsx)("strong", { className: "title body-bold-14-17", children: props.title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bottom", children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "timer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: days }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "G\u00FCn" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: hours }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Saat" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: minutes }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Dk." })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] })] }));
 };
 ActionButton.defaultProps = {
     title: "Title",

package/dist/components/CouponCode/CouponCode.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var CouponCode_styled_1 = require("./CouponCode.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Input_1 = __importDefault(require("../Input"));
+var Button_1 = __importDefault(require("../Button"));
+var CouponCode = function (props) {
+    var _a = (0, react_1.useState)(props.expanded), expanded = _a[0], setExpanded = _a[1];
+    (0, react_1.useEffect)(function () {
+        props.onExpanded({ isExpanded: expanded });
+    }, [expanded]);
+    (0, react_1.useEffect)(function () {
+        setExpanded(props.expanded);
+    }, [props.expanded]);
+    var toggleExpand = function () { return setExpanded(function (prevState) { return !prevState; }); };
+    return ((0, jsx_runtime_1.jsxs)(CouponCode_styled_1.CouponCodeStyled, __assign({}, props, { expanded: expanded, children: [(0, jsx_runtime_1.jsxs)("div", { onClick: toggleExpand, className: "header", children: [(0, jsx_runtime_1.jsx)("div", { className: "title body-bold-14-17", children: props.title }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown", width: "24px", height: "24px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "body", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.isInputDisabled, name: props.name, onChange: props.onChange, hasError: props.hasError, errorMessage: props.errorMessage, value: props.value, autofocus: props.autoFocus, label: "", width: "auto", placeholder: "\u0130ndirim kodunu yaz", alwaysShowMask: false, hasCopyButton: false }), (0, jsx_runtime_1.jsx)(Button_1.default, { width: props.buttonWidth, isLoading: props.isButtonLoading, disabled: props.buttonDisabled, size: "big", variant: props.buttonVariant, children: props.buttonText })] })] })));
+};
+CouponCode.defaultProps = {
+    title: "Title",
+    buttonText: "Uygula",
+    expanded: false,
+    isButtonLoading: false,
+    isInputDisabled: false,
+    buttonDisabled: false,
+    autoFocus: false,
+    hasError: false,
+    errorMessage: "",
+    buttonVariant: "primary",
+    buttonWidth: "96px",
+};
+exports.default = CouponCode;

package/dist/components/CouponCode/CouponCode.styled.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CouponCodeStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CouponCodeStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      path{\n        stroke: var(--primary);\n      }\n    }\n  }\n  .body{\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    padding-top: ", ";\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"], ["\n  padding: 1rem;\n  border-radius: 0.5rem;\n  background-color: var(--dark-opacity-3);\n  .header{\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    svg{\n      transition: all .2s ease;\n      transform: ", ";\n      path{\n        stroke: var(--primary);\n      }\n    }\n  }\n  .body{\n    transition: all .2s ease;\n    position: relative;\n    overflow: hidden;\n    display: grid;\n    align-items: flex-start;\n    justify-content: space-between;\n    grid-template-columns: 1fr auto;\n    padding-top: ", ";\n    max-height: ", ";\n    /*input{\n      background-color: white;\n    }*/\n    button{\n      margin-left: 1rem;\n    }\n  }\n"])), function (props) { return props.expanded ? 'rotate(180deg)' : 'none'; }, function (props) { return props.expanded ? '1rem' : '0'; }, function (props) { return props.expanded ? '96px' : '0'; });
+var templateObject_1;

package/dist/components/CouponCode/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var CouponCode_1 = require("./CouponCode");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CouponCode_1).default; } });

package/dist/components/CouponCode/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/CouponCode/stories/CouponCode.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var CouponCode_1 = __importDefault(require("../CouponCode"));
+var props_1 = require("../../Button/props");
+exports.default = {
+    title: 'components/Coupon Code',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { width: "343px" }, children: (0, jsx_runtime_1.jsx)(CouponCode_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {
+        buttonVariant: { control: 'select', options: props_1.variants },
+    }
+};
+exports.Default = {
+    args: {
+        onChange: function (e) { return console.log("onChange event", e); },
+        onExpanded: function (props) { return console.log("expanded", props); },
+        buttonDisabled: false,
+        autoFocus: false,
+        hasError: false,
+        errorMessage: "",
+        value: "COUPONCODE",
+        buttonText: "Uygula"
+    },
+};

package/dist/components/Modal/Modal.styled.js

@@ -12,6 +12,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
 exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding-left: 24px;\n    padding-right: 24px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    overflow: auto;\n    position: relative;\n    scroll-margin: 0 10px 30px 0;\n    scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: ", ";\n    box-sizing: border-box;\n    border-top: ", ";\n    flex-direction: ", ";\n    gap: ", ";\n    \n    button + button {\n      margin-right: ", ";\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n    }\n  }\n"], ["\n  background: white;\n  border-radius: 8px;\n  box-sizing: border-box;\n  max-height: 800px;\n  min-height: 300px;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  max-width: calc(100vw - 2rem);\n  width: ", ";\n  ", ";\n  \n  div.header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px;\n    border-bottom: ", ";\n    box-sizing: border-box;\n\n    div.empty {\n      width: 32px;\n      height: 32px;\n    }\n\n    div.icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      cursor: pointer;\n      background: white;\n      transition: all .2s;\n\n      &:hover {\n        box-shadow: 0 6px 30px #EAE9F0;\n      }\n\n    }\n    div.title {\n      h5 {\n        margin: 0;\n        padding: 0;\n      }\n      p {\n        margin: 8px 0 0;\n      }\n    }\n   \n  }\n\n  div.content {\n    padding-left: 24px;\n    padding-right: 24px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    overflow: auto;\n    position: relative;\n    scroll-margin: 0 10px 30px 0;\n    scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n    scrollbar-width: thin;\n\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    \n    .contentInner{\n      //height: 100%;\n    }\n  }\n\n  div.buttons {\n    padding: 24px;\n    display: flex;\n    justify-content: ", ";\n    box-sizing: border-box;\n    border-top: ", ";\n    flex-direction: ", ";\n    gap: ", ";\n    \n    button + button {\n      margin-right: ", ";\n      @media only screen and ", " {\n        margin-right: 16px;\n      }\n    }\n  }\n"])), function (props) {
     switch (props.size) {
+        case 'xsmall':
+            return "343px";
         case 'small':
             return "375px";
         case 'medium':

package/dist/components/Modal/props.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconNames = exports.titleAlignment = exports.alignment = exports.sizes = void 0;
 var Icon_1 = require("../Icon");
-exports.sizes = ['small', 'medium', 'large'];
+exports.sizes = ['xsmall', 'small', 'medium', 'large'];
 exports.alignment = ['vertical', 'horizontal'];
 exports.titleAlignment = ['left', 'center'];
 exports.iconNames = Object.keys(Icon_1.iconList);

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ShoppingCartProduct_styled_1 = require("./ShoppingCartProduct.styled");
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var Tooltip_1 = __importDefault(require("../Tooltip"));
+var Spinner_1 = __importDefault(require("../Spinner"));
+var ShoppingCartProduct = function (props) {
+    var LinkComponent = function (_a) {
+        var item = _a.item, children = _a.children;
+        return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ShoppingCartProductStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "inner", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-semi-bold-16-19", children: props.title }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [props.discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: "discountRate body-extra-bold-13-16", children: ["%", props.discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [props.oldPrice && props.discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "oldPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price caption-semi-bold-12-15", children: props.oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "period caption-regular-12-15", children: ["/ ", props.oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: "price body-extra-bold-14-17", children: props.price }), (0, jsx_runtime_1.jsxs)("div", { className: "period body-regular-13-16", children: ["/ ", props.period] })] })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "productCardDeliveryText body-medium-13-16", children: props.deliveryText })] }), (0, jsx_runtime_1.jsxs)("div", { className: "actions", children: [(0, jsx_runtime_1.jsxs)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading || props.hasError, onClick: props.onIncrement, className: "actionButton", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall", width: "24px", height: "24px" }), props.hasError && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("popup", "caption-semi-bold-12-15"), children: props.errorText })] }), (0, jsx_runtime_1.jsx)("div", { className: "quantity body-extra-bold-13-16", children: props.hasLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "16px", height: "16px" }) : props.quantity }), props.hasRemove ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onRemove, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, onClick: props.onDecrement, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall", width: "16px", height: "16px" }) }))] })] }), props.hasInsurance && ((0, jsx_runtime_1.jsxs)("div", { onClick: !props.hasLoading && props.toggleInsurance, className: "insurance", children: [(0, jsx_runtime_1.jsx)("div", { className: "insuranceImg", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: "64.51px", height: "7.37px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text caption-semi-bold-12-15", children: [props.insuranceText, props.insurancePrice && (0, jsx_runtime_1.jsx)("span", { className: "price caption-extra-bold-12-15", children: props.insurancePrice })] }), (0, jsx_runtime_1.jsx)("div", { className: "actions", children: props.hasInsuranceTooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { popupWidth: props.insuranceTooltipWidth, position: "bottomRight", children: props.insuranceTooltipText })) : (props.insurancePrice ? ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Delete", width: "16px", height: "16px" }) })) : ((0, jsx_runtime_1.jsx)(ShoppingCartProduct_styled_1.ActionButton, { disabled: props.hasLoading, className: "actionButton", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight", width: "24px", height: "24px" }) }))) })] }))] })));
+};
+ShoppingCartProduct.defaultProps = {
+    insuranceText: "Tamamlayıcı ek güvence ekle",
+    insurancePrice: "",
+    hasInsurance: false,
+    hasInsuranceTooltip: false,
+    hasError: false,
+    errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
+    insuranceTooltipWidth: "178px"
+};
+exports.default = ShoppingCartProduct;

package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js

@@ -0,0 +1,14 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n    }\n    .text{\n      padding-right: 0.5rem;\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        &:hover{\n          color: var(--primary);\n        }\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: ", ";\n        display: block;\n        overflow: hidden;\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 2px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price, .period {\n            text-decoration: line-through;\n          }\n        }\n\n        .newPrice {\n\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: space-between;\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      .price{\n        display: block;\n      }\n    }\n    .actions{\n    }\n  }\n"], ["\n\n  a {\n    text-decoration: none;\n    color: inherit;\n  } \n\n  .inner {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    .img {\n      width: 96px;\n      height: 96px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 1rem;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: white;\n    }\n    .text{\n      padding-right: 0.5rem;\n      .productCardTitle {\n        display: block;\n        color: var(--dark);\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        height: 19px;\n        word-break: break-word;\n        margin-bottom: 0.5rem;\n        &:hover{\n          color: var(--primary);\n        }\n      }\n\n      .productCardDeliveryText {\n        margin-top: 0.5rem;\n        margin-bottom: 0;\n        color: ", ";\n        display: block;\n        overflow: hidden;\n      }\n\n      .productCardPriceContent {\n        display: grid;\n        align-items: ", ";\n        justify-content: flex-start;\n        grid-template-columns: ", ";\n\n        .discountRate {\n          margin-right: 0.5rem;\n          width: 48px;\n          height: 36px;\n          border-radius: 8px;\n          background-color: var(--primary-opacity-10);\n          color: var(--primary);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .oldPrice, .newPrice {\n          display: flex;\n          align-items: end;\n          justify-content: flex-start;\n\n          .price {\n            margin-right: 2px;\n          }\n        }\n\n        .oldPrice {\n          color: var(--dark-opacity-25);\n          margin-bottom: 2px;\n\n          .price, .period {\n            text-decoration: line-through;\n          }\n        }\n\n        .newPrice {\n\n        }\n      }\n    }\n    .actions{\n      width: 32px;\n      height: 92px;\n      background-color: var(--dark-opacity-3);\n      border-radius: 0.5rem;\n      text-align: center;\n      display: grid;\n      align-content: space-between;\n      justify-content: center;\n      padding: 4px 0;\n      .quantity{\n        > div{\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n  .insurance{\n    position: relative;\n    margin-top: 1.5rem;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    padding-right: 4px;\n    &:before{\n      content: \"\";\n      position: absolute;\n      left: 47px;\n      bottom: 100%;\n      width: 1px;\n      background-color: var(--dark-opacity-5);\n      height: 40px;\n    }\n    .insuranceImg{\n      width: 96px;\n      height: 40px;\n      border: 1px solid var(--dark-opacity-5);\n      border-radius: 8px;\n      position: relative;\n      margin-right: 16px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .text{\n      display: block;\n      .price{\n        display: block;\n      }\n    }\n    .actions{\n    }\n  }\n"])), function (props) { return props.hasDeliveryDanger ? "var(--red)" : "var(--grey-40)"; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
+exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border:0;\n  padding: 0;\n  outline: none;\n  box-shadow: none;\n  width: 24px;\n  height: 24px;\n  background: white;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .1s ease;\n  cursor: pointer;\n  position: relative;\n  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\n  }\n  .popup{\n    position: absolute;\n    width: 139px;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    background-color: var(--red);\n    z-index: 99999;\n    box-sizing: border-box;\n    right: calc(100% + 11px);\n    top: -8px;\n    color: white;\n    //opacity: 0;\n    opacity: 1;\n    user-select: none;\n    pointer-events: none;\n    transition: all .1s ease;\n    text-align: center;\n    &:before {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: calc(100% - 7px);\n      transform: rotate(45deg);\n      background-color: var(--red);\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n    }\n  }\n  svg{\n    display: block;\n    path, rect{\n      stroke : var(--primary);\n      transition: all .1s ease;\n    }\n  }\n  &:hover{\n    background-color : var(--primary);\n    svg{\n      path, rect{\n        stroke : white;\n      }\n    }\n  }\n"], ["\n  border:0;\n  padding: 0;\n  outline: none;\n  box-shadow: none;\n  width: 24px;\n  height: 24px;\n  background: white;\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all .1s ease;\n  cursor: pointer;\n  position: relative;\n  /*&:hover{\n    .popup{\n      opacity: 1;\n    }\n  }*/\n  &:disabled{\n    cursor: no-drop;\n  }\n  .popup{\n    position: absolute;\n    width: 139px;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    background-color: var(--red);\n    z-index: 99999;\n    box-sizing: border-box;\n    right: calc(100% + 11px);\n    top: -8px;\n    color: white;\n    //opacity: 0;\n    opacity: 1;\n    user-select: none;\n    pointer-events: none;\n    transition: all .1s ease;\n    text-align: center;\n    &:before {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: calc(100% - 7px);\n      transform: rotate(45deg);\n      background-color: var(--red);\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n    }\n  }\n  svg{\n    display: block;\n    path, rect{\n      stroke : var(--primary);\n      transition: all .1s ease;\n    }\n  }\n  &:hover{\n    background-color : var(--primary);\n    svg{\n      path, rect{\n        stroke : white;\n      }\n    }\n  }\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/ShoppingCartProduct/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ShoppingCartProduct_1 = require("./ShoppingCartProduct");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ShoppingCartProduct_1).default; } });

package/dist/components/ShoppingCartProduct/props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ShoppingCartProduct_1 = __importDefault(require("../ShoppingCartProduct"));
+exports.default = {
+    title: 'Components/ShoppingCartProduct',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '368px' }, children: (0, jsx_runtime_1.jsx)(ShoppingCartProduct_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        title: "Apple İpad Air WİFİ 64GB (2020)",
+        deliveryText: "Tahmini teslim: 1 Ocak Pazar",
+        price: "12.545,24 TL",
+        oldPrice: "12.545,24 TL",
+        component: function (_a) {
+            var children = _a.children;
+            return (0, jsx_runtime_1.jsx)("a", { href: "/test", children: children });
+        },
+        discountRate: 32,
+        hasRemove: false,
+        oldPricePeriod: "hafta",
+        quantity: 1,
+        period: "hafta",
+        hasDeliveryDanger: false,
+        onRemove: function () { return console.log("onRemove event"); },
+        onIncrement: function () { return console.log("onIncrement event"); },
+        onDecrement: function () { return console.log("onDecrement event"); },
+        toggleInsurance: function () { return console.log("toggleInsurance event"); },
+        image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", height: "64px", alt: "test" }),
+        hasError: false,
+        hasLoading: false,
+        errorText: "Bu üründen daha fazla sepetinize ekleyemezsiniz.",
+        insuranceText: "Tamamlayıcı ek güvence ekle",
+        insurancePrice: "",
+        hasInsurance: true,
+        hasInsuranceTooltip: false,
+        insuranceTooltipText: (0, jsx_runtime_1.jsx)("div", { children: "\u00D6nceki kiralaman ek g\u00FCvenceli oldu\u011Fu i\u00E7in, s\u00FCre uzat\u0131rken de ek g\u00FCvencen otomatik olarak eklenir" }),
+        insuranceTooltipWidth: "178px",
+    },
+};

package/dist/components/Toast/Toast.js

@@ -43,7 +43,7 @@ var Toast = function (props) {
         document.body.style.overflow = show ? "auto" : "hidden";
     }, [show]);
     return (showToast &&
-        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) })), title && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)("title", "headline-semi-bold-20-24"), children: title })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("content", "body-regular-14-17"), children: children }), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { className: "bottom", children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, children: primaryButtonText }) }))] }) })) }), document.body));
+        react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Toast_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsx)(Toast_styled_1.ToastStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", { children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "24px", height: "24px" }) })), title && ((0, jsx_runtime_1.jsx)("h5", { className: (0, classnames_1.default)("title", "title-extra-bold-16-19"), children: title })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("content", "body-regular-14-17"), children: children }), showPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { className: "bottom", children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", width: "100%", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, children: primaryButtonText }) }))] }) })) }), document.body));
 };
 Toast.defaultProps = {
     icon: "CheckMark",

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
+exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
 var Spinner_1 = __importDefault(require("./components/Spinner"));
@@ -70,3 +70,7 @@ var ContentBox_1 = __importDefault(require("./components/ContentBox"));
 exports.ContentBox = ContentBox_1.default;
 var InfoBox_1 = __importDefault(require("./components/InfoBox"));
 exports.InfoBox = InfoBox_1.default;
+var CouponCode_1 = __importDefault(require("./components/CouponCode"));
+exports.CouponCode = CouponCode_1.default;
+var ShoppingCartProduct_1 = __importDefault(require("./components/ShoppingCartProduct"));
+exports.ShoppingCartProduct = ShoppingCartProduct_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.70.4",
+  "version": "1.71.0",
   "files": [
     "dist"
   ],