krl-alfred 1.61.2 → 1.62.0
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.
- package/dist/components/Icon/Buy.js +1 -1
- package/dist/components/Modal/Modal.js +0 -1
- package/dist/components/ProductCard/ProductCard.js +6 -1
- package/dist/components/ProductCard/ProductCard.styled.js +4 -3
- package/dist/components/ProductCard/layouts/Suggestion.js +25 -0
- package/dist/components/ProductCard/props.js +1 -1
- package/dist/components/ProductCard/stories/ProductCard.stories.js +5 -2
- package/dist/components/Toast/Toast.js +53 -0
- package/dist/components/Toast/Toast.styled.js +80 -0
- package/dist/components/Toast/index.js +8 -0
- package/dist/components/Toast/props.js +11 -0
- package/dist/components/Toast/stories/Toast.stories.js +35 -0
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgBuy = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgBuy = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 22, height: 21, viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Buy", children: [(0, jsx_runtime_1.jsx)("path", { id: "Stroke 1", fillRule: "evenodd", clipRule: "evenodd", d: "M6.4222 17.8203C6.8442 17.8203 7.1872 18.1633 7.1872 18.5853C7.1872 19.0073 6.8442 19.3493 6.4222 19.3493C6.0002 19.3493 5.6582 19.0073 5.6582 18.5853C5.6582 18.1633 6.0002 17.8203 6.4222 17.8203Z", fill: "#474C6D" }), (0, jsx_runtime_1.jsx)("path", { id: "Stroke 1 (Stroke)", fillRule: "evenodd", clipRule: "evenodd", d: "M6.4222 18.8203C6.55419 18.8203 6.6582 18.7139 6.6582 18.5853C6.6582 18.455 6.55249 18.3493 6.4222 18.3493C6.29362 18.3493 6.1872 18.4533 6.1872 18.5853C6.1872 18.7156 6.29192 18.8203 6.4222 18.8203ZM4.6582 18.5853C4.6582 17.6127 5.44622 16.8203 6.4222 16.8203C7.39649 16.8203 8.1872 17.611 8.1872 18.5853C8.1872 19.5613 7.39478 20.3493 6.4222 20.3493C5.44792 20.3493 4.6582 19.5596 4.6582 18.5853Z", fill: "#474C6D" }), (0, jsx_runtime_1.jsx)("path", { id: "Stroke 3", fillRule: "evenodd", clipRule: "evenodd", d: "M17.6752 17.8203C18.0972 17.8203 18.4402 18.1633 18.4402 18.5853C18.4402 19.0073 18.0972 19.3493 17.6752 19.3493C17.2532 19.3493 16.9102 19.0073 16.9102 18.5853C16.9102 18.1633 17.2532 17.8203 17.6752 17.8203Z", fill: "#474C6D" }), (0, jsx_runtime_1.jsx)("path", { id: "Stroke 3 (Stroke)", fillRule: "evenodd", clipRule: "evenodd", d: "M17.6752 18.8203C17.8054 18.8203 17.9102 18.7156 17.9102 18.5853C17.9102 18.4533 17.8037 18.3493 17.6752 18.3493C17.5466 18.3493 17.4402 18.4533 17.4402 18.5853C17.4402 18.7156 17.5449 18.8203 17.6752 18.8203ZM15.9102 18.5853C15.9102 17.611 16.7009 16.8203 17.6752 16.8203C18.6494 16.8203 19.4402 17.611 19.4402 18.5853C19.4402 19.5613 18.6477 20.3493 17.6752 20.3493C16.7026 20.3493 15.9102 19.5613 15.9102 18.5853Z", fill: "#474C6D" }), (0, jsx_runtime_1.jsx)("path", { id: "Stroke 5 (Stroke)", fillRule: "evenodd", clipRule: "evenodd", d: "M0.764813 1.07962C0.859 0.535428 1.37651 0.170626 1.9207 0.264813L4.00071 0.624813C4.44913 0.702425 4.78859 1.07303 4.82666 1.52652L5.0426 4.09916H18.9092C20.3354 4.09916 21.4301 5.36336 21.2259 6.7753L20.2769 13.3334C20.0766 14.7122 18.8957 15.7362 17.5022 15.7362H6.59016C5.13262 15.7362 3.91817 14.6202 3.79667 13.1668C3.79665 13.1666 3.79668 13.167 3.79667 13.1668L2.89829 2.46375L1.57962 2.23551C1.03543 2.14133 0.670626 1.62382 0.764813 1.07962ZM5.21047 6.09916L5.78966 12.9995C5.8244 13.4159 6.17188 13.7362 6.59016 13.7362H17.5022C17.9006 13.7362 18.2399 13.4436 18.2976 13.0464L19.2465 6.48903C19.2763 6.28297 19.1169 6.09916 18.9092 6.09916H5.21047Z", fill: "#474C6D" })] }) }))); };
|
|
40
40
|
exports.default = SvgBuy;
|
|
@@ -20,12 +20,15 @@ var prop_types_1 = __importDefault(require("prop-types"));
|
|
|
20
20
|
var Checklist_1 = __importDefault(require("./layouts/Checklist"));
|
|
21
21
|
var Standart_1 = __importDefault(require("./layouts/Standart"));
|
|
22
22
|
var Horizontal_1 = __importDefault(require("./layouts/Horizontal"));
|
|
23
|
+
var Suggestion_1 = __importDefault(require("./layouts/Suggestion"));
|
|
23
24
|
var ProductCard = function (props) {
|
|
24
25
|
switch (props.layout) {
|
|
25
26
|
case 'checklist':
|
|
26
27
|
return (0, jsx_runtime_1.jsx)(Checklist_1.default, __assign({}, props));
|
|
27
28
|
case 'standart':
|
|
28
29
|
return (0, jsx_runtime_1.jsx)(Standart_1.default, __assign({}, props));
|
|
30
|
+
case 'suggestion':
|
|
31
|
+
return (0, jsx_runtime_1.jsx)(Suggestion_1.default, __assign({}, props));
|
|
29
32
|
case 'horizontal':
|
|
30
33
|
return (0, jsx_runtime_1.jsx)(Horizontal_1.default, __assign({}, props));
|
|
31
34
|
default:
|
|
@@ -38,7 +41,8 @@ ProductCard.propTypes = {
|
|
|
38
41
|
disabled: prop_types_1.default.bool,
|
|
39
42
|
checkboxId: prop_types_1.default.string,
|
|
40
43
|
description: prop_types_1.default.string,
|
|
41
|
-
value: prop_types_1.default.string
|
|
44
|
+
value: prop_types_1.default.string,
|
|
45
|
+
buttonText: prop_types_1.default.string
|
|
42
46
|
};
|
|
43
47
|
ProductCard.defaultProps = {
|
|
44
48
|
title: "Apple İpad Air WİFİ 64GB (2020)",
|
|
@@ -46,5 +50,6 @@ ProductCard.defaultProps = {
|
|
|
46
50
|
productChecked: false,
|
|
47
51
|
disabled: false,
|
|
48
52
|
layout: props_1.layouts[0],
|
|
53
|
+
buttonText: "Cihaz Öner",
|
|
49
54
|
//checkboxId : `productCheckBox_${(Math.random() + 1).toString(36).substring(2)}`
|
|
50
55
|
};
|
|
@@ -7,10 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
|
|
10
|
+
exports.HorizontalStyled = exports.SuggestionStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .ProductCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .ProductCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .ProductCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .ProductCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\n }\n }\n .img{\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 32px;\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\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 .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\n }\n }\n .img{\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 32px;\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\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 .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"])), function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; });
|
|
15
|
-
exports.
|
|
16
|
-
var
|
|
15
|
+
exports.SuggestionStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n text-align: center;\n min-height: 346px;\n display: grid;\n grid-template-rows: 1fr auto;\n align-items: center;\n .icon{\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--primary-opacity-5);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem auto;\n svg{\n path , circle{\n stroke:var(--primary)\n }\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n text-align: center;\n min-height: 346px;\n display: grid;\n grid-template-rows: 1fr auto;\n align-items: center;\n .icon{\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--primary-opacity-5);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem auto;\n svg{\n path , circle{\n stroke:var(--primary)\n }\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n }\n }\n"])));
|
|
16
|
+
exports.HorizontalStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n .img{\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px; \n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border:0;\n }\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n \n }\n .description{\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n .img{\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px; \n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border:0;\n }\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n \n }\n .description{\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"])), devices_1.devices.sm);
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var ProductCard_styled_1 = require("../ProductCard.styled");
|
|
19
|
+
var Icon_1 = __importDefault(require("../../Icon/Icon"));
|
|
20
|
+
var Button_1 = __importDefault(require("../../Button"));
|
|
21
|
+
var Suggestion = function (props) {
|
|
22
|
+
var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText;
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(ProductCard_styled_1.SuggestionStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-bold-16-19", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "productCardDescription body-medium-14-17", children: description })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: buttonOnClick, size: "big", width: "100%", variant: "primary", children: buttonText }) })] })));
|
|
24
|
+
};
|
|
25
|
+
exports.default = Suggestion;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.layouts = exports.contentAlignments = void 0;
|
|
4
4
|
exports.contentAlignments = ['left', 'center'];
|
|
5
|
-
exports.layouts = ['checklist', 'standart', 'horizontal'];
|
|
5
|
+
exports.layouts = ['checklist', 'standart', 'horizontal', 'suggestion'];
|
|
6
6
|
var ProductCardDefault = {
|
|
7
7
|
hasCheckbox: false,
|
|
8
8
|
contentAlignment: exports.contentAlignments[0],
|
|
@@ -14,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Standart = exports.Checklist = exports.Horizontal = exports.Default = void 0;
|
|
17
|
+
exports.Suggestion = exports.Standart = exports.Checklist = exports.Horizontal = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var ProductCard_1 = __importDefault(require("../ProductCard"));
|
|
20
20
|
var props_1 = require("../props");
|
|
21
21
|
exports.default = {
|
|
22
22
|
title: "Components/ProductCard",
|
|
23
|
-
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: props.layout
|
|
23
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: ["standart", "suggestion"].includes(props.layout) ? '240px' : 'initial' }, children: (0, jsx_runtime_1.jsx)(ProductCard_1.default, __assign({}, props)) }); },
|
|
24
24
|
tags: ['autodocs'],
|
|
25
25
|
argTypes: {
|
|
26
26
|
contentAlignment: { control: 'select', options: props_1.contentAlignments },
|
|
@@ -57,3 +57,6 @@ exports.Checklist = {
|
|
|
57
57
|
exports.Standart = {
|
|
58
58
|
args: __assign(__assign({}, exports.Default.args), { layout: "standart" }),
|
|
59
59
|
};
|
|
60
|
+
exports.Suggestion = {
|
|
61
|
+
args: __assign(__assign({}, exports.Default.args), { layout: "suggestion", title: "Aradığını bulamadın mı?", description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin." }),
|
|
62
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
29
|
+
var react_1 = require("react");
|
|
30
|
+
var Toast_styled_1 = require("./Toast.styled");
|
|
31
|
+
var react_dom_1 = __importDefault(require("react-dom"));
|
|
32
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
33
|
+
var Button_1 = __importDefault(require("../Button"));
|
|
34
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
35
|
+
var Toast = function (props) {
|
|
36
|
+
var timer = props.timer, primaryButtonText = props.primaryButtonText, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isPrimaryButtonLoading = props.isPrimaryButtonLoading, showPrimaryButton = props.showPrimaryButton, children = props.children, icon = props.icon, show = props.show, onPrimaryAction = props.onPrimaryAction, title = props.title, other = __rest(props, ["timer", "primaryButtonText", "isPrimaryButtonDisabled", "isPrimaryButtonLoading", "showPrimaryButton", "children", "icon", "show", "onPrimaryAction", "title"]);
|
|
37
|
+
var _a = (0, react_1.useState)(show), showToast = _a[0], setShowToast = _a[1];
|
|
38
|
+
(0, react_1.useEffect)(function () {
|
|
39
|
+
setShowToast(show);
|
|
40
|
+
setTimeout(function () {
|
|
41
|
+
setShowToast(false);
|
|
42
|
+
}, timer);
|
|
43
|
+
document.body.style.overflow = show ? "auto" : "hidden";
|
|
44
|
+
}, [show]);
|
|
45
|
+
return (showToast &&
|
|
46
|
+
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));
|
|
47
|
+
};
|
|
48
|
+
Toast.defaultProps = {
|
|
49
|
+
icon: "CheckMark",
|
|
50
|
+
timer: 1000,
|
|
51
|
+
title: "Title",
|
|
52
|
+
};
|
|
53
|
+
exports.default = Toast;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.OverlayStyled = exports.ToastStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n\n\n .icon{\n\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: var(--primary);\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin: 0 auto;\n svg{\n\n width: ", ";\n\n height: ", ";\n path{\n fill: #fff;\n }\n }\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n }\n \n .content {\n margin: 2rem 0 0 0;\n &:is(:empty){\n display: none;\n }\n }\n .bottom{\n margin: 2rem 0 0 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n\n\n .icon{\n\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: var(--primary);\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin: 0 auto;\n svg{\n\n width: ", ";\n\n height: ", ";\n path{\n fill: #fff;\n }\n }\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n }\n \n .content {\n margin: 2rem 0 0 0;\n &:is(:empty){\n display: none;\n }\n }\n .bottom{\n margin: 2rem 0 0 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (props) {
|
|
13
|
+
switch (props.size) {
|
|
14
|
+
case 'small':
|
|
15
|
+
return "249px";
|
|
16
|
+
case 'medium':
|
|
17
|
+
return "343px";
|
|
18
|
+
case 'large':
|
|
19
|
+
return "462px";
|
|
20
|
+
default:
|
|
21
|
+
return "462px";
|
|
22
|
+
}
|
|
23
|
+
}, function (props) {
|
|
24
|
+
switch (props.size) {
|
|
25
|
+
case 'small':
|
|
26
|
+
return "227px";
|
|
27
|
+
case 'medium':
|
|
28
|
+
return "251px";
|
|
29
|
+
case 'large':
|
|
30
|
+
return "283px";
|
|
31
|
+
default:
|
|
32
|
+
return "227px";
|
|
33
|
+
}
|
|
34
|
+
}, function (props) {
|
|
35
|
+
switch (props.size) {
|
|
36
|
+
case 'small':
|
|
37
|
+
return "56px";
|
|
38
|
+
case 'medium':
|
|
39
|
+
return "80px";
|
|
40
|
+
case 'large':
|
|
41
|
+
return "112px";
|
|
42
|
+
default:
|
|
43
|
+
return "56px";
|
|
44
|
+
}
|
|
45
|
+
}, function (props) {
|
|
46
|
+
switch (props.size) {
|
|
47
|
+
case 'small':
|
|
48
|
+
return "56px";
|
|
49
|
+
case 'medium':
|
|
50
|
+
return "80px";
|
|
51
|
+
case 'large':
|
|
52
|
+
return "112px";
|
|
53
|
+
default:
|
|
54
|
+
return "56px";
|
|
55
|
+
}
|
|
56
|
+
}, function (props) {
|
|
57
|
+
switch (props.size) {
|
|
58
|
+
case 'small':
|
|
59
|
+
return "24px";
|
|
60
|
+
case 'medium':
|
|
61
|
+
return "35px";
|
|
62
|
+
case 'large':
|
|
63
|
+
return "50px";
|
|
64
|
+
default:
|
|
65
|
+
return "24px";
|
|
66
|
+
}
|
|
67
|
+
}, function (props) {
|
|
68
|
+
switch (props.size) {
|
|
69
|
+
case 'small':
|
|
70
|
+
return "24px";
|
|
71
|
+
case 'medium':
|
|
72
|
+
return "35px";
|
|
73
|
+
case 'large':
|
|
74
|
+
return "50px";
|
|
75
|
+
default:
|
|
76
|
+
return "24px";
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
|
|
80
|
+
var templateObject_1, templateObject_2;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var Toast_1 = require("./Toast");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Toast_1).default; } });
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.iconNames = exports.sizes = void 0;
|
|
4
|
+
var Icon_1 = require("../Icon");
|
|
5
|
+
exports.sizes = ['small', 'medium', 'large'];
|
|
6
|
+
exports.iconNames = Object.keys(Icon_1.iconList);
|
|
7
|
+
var ToastDefault = {
|
|
8
|
+
size: 'small',
|
|
9
|
+
show: true,
|
|
10
|
+
primaryButtonText: 'Primary'
|
|
11
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Default = void 0;
|
|
7
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
var Toast_1 = __importDefault(require("../Toast"));
|
|
9
|
+
var props_1 = require("../../Toast/props");
|
|
10
|
+
var Icon_1 = require("../../Icon");
|
|
11
|
+
exports.default = {
|
|
12
|
+
title: 'Components/Toast',
|
|
13
|
+
component: Toast_1.default,
|
|
14
|
+
tags: ['autodocs'],
|
|
15
|
+
argTypes: {
|
|
16
|
+
size: { control: 'select', options: props_1.sizes },
|
|
17
|
+
icon: { control: 'select', options: Object.keys(Icon_1.iconList) },
|
|
18
|
+
title: {
|
|
19
|
+
name: 'Title',
|
|
20
|
+
type: { name: 'string', required: false },
|
|
21
|
+
defaultValue: 'Title',
|
|
22
|
+
},
|
|
23
|
+
onPrimaryAction: { action: 'primary clicked' },
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
exports.Default = {
|
|
27
|
+
args: {
|
|
28
|
+
show: true,
|
|
29
|
+
title: 'Title',
|
|
30
|
+
timer: 999999,
|
|
31
|
+
showPrimaryButton: true,
|
|
32
|
+
primaryButtonText: 'Primary Action',
|
|
33
|
+
children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
|
|
34
|
+
},
|
|
35
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Banner = exports.Footer = 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;
|
|
6
|
+
exports.Toast = exports.Banner = exports.Footer = 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;
|
|
7
7
|
var Button_1 = __importDefault(require("./components/Button"));
|
|
8
8
|
exports.Button = Button_1.default;
|
|
9
9
|
var Spinner_1 = __importDefault(require("./components/Spinner"));
|
|
@@ -50,3 +50,5 @@ var Footer_1 = __importDefault(require("./components/Footer"));
|
|
|
50
50
|
exports.Footer = Footer_1.default;
|
|
51
51
|
var Banner_1 = __importDefault(require("./components/Banner"));
|
|
52
52
|
exports.Banner = Banner_1.default;
|
|
53
|
+
var Toast_1 = __importDefault(require("./components/Toast"));
|
|
54
|
+
exports.Toast = Toast_1.default;
|