krl-alfred 1.82.14 → 1.83.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/iconList/StarCircle.js +40 -0
- package/dist/components/Icon/iconList/Starfull.js +1 -1
- package/dist/components/Icon/iconList/StarfullSmall.js +40 -0
- package/dist/components/Icon/iconList/index.js +14 -2
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.js +2 -2
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.styled.js +1 -1
- package/dist/components/ProductCardHorizontal/props.js +3 -1
- package/dist/components/ReviewBlock/ReviewBlock.js +40 -0
- package/dist/components/ReviewBlock/ReviewBlock.styled.js +29 -0
- package/dist/components/ReviewBlock/index.js +8 -0
- package/dist/components/ReviewBlock/props.js +10 -0
- package/dist/components/ReviewBlock/stories/ReviewBlock.stories.js +37 -0
- package/dist/components/ReviewCard/ReviewCard.js +2 -2
- package/dist/components/ReviewCard/ReviewCard.styled.js +14 -3
- package/dist/components/ReviewCard/props.js +1 -0
- package/dist/components/ReviewCard/stories/ReviewCard.stories.js +1 -0
- package/dist/components/SearchBox/SearchBox.js +3 -3
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SearchBox/props.js +3 -1
- package/dist/components/SearchBox/stories/SearchBox.stories.js +6 -2
- package/dist/components/SelectBox/SelectBox.js +1 -1
- package/dist/components/SelectBox/SelectBox.styled.js +12 -3
- package/dist/components/SelectBox/stories/SelectBox.stories.js +2 -0
- package/dist/components/Tabs/TabItem.js +3 -3
- package/dist/components/Tabs/Tabs.js +5 -5
- package/dist/components/Tabs/Tabs.styled.js +5 -4
- package/dist/components/Tabs/props.js +2 -0
- package/dist/components/Tabs/stories/Tabs.stories.js +2 -1
- package/dist/components/VideoCard/VideoCard.js +22 -0
- package/dist/components/VideoCard/VideoCard.styled.js +15 -0
- package/dist/components/VideoCard/index.js +8 -0
- package/dist/components/VideoCard/props.js +8 -0
- package/dist/components/VideoCard/stories/VideoCard.stories.js +32 -0
- package/dist/i18n/locales/turkish.json +3 -1
- package/dist/index.js +5 -1
- package/dist/jsons/productReviews.json +30 -0
- package/dist/style/style.min.css +1 -1
- package/dist/style/style.min.css.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,40 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgStarCircle = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsxs)("g", __assign({ clipPath: "url(#clip0_33289_7333)" }, { children: [(0, jsx_runtime_1.jsx)("rect", { width: 16, height: 16, rx: 8, fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.73186 11.207C7.8955 11.1031 8.1045 11.1031 8.26814 11.207L10.0731 12.3538C10.4488 12.5925 10.9257 12.2582 10.8293 11.8236L10.3326 9.58261C10.2939 9.40779 10.3516 9.2256 10.4839 9.10495L12.1596 7.57681C12.4812 7.2836 12.3006 6.74804 11.8672 6.70934L9.71003 6.51675C9.52286 6.50004 9.36087 6.3798 9.29068 6.20549L8.46381 4.15191C8.29564 3.73425 7.70436 3.73425 7.53619 4.15191L6.70932 6.20549C6.63913 6.3798 6.47714 6.50004 6.28997 6.51675L4.13281 6.70934C3.69937 6.74804 3.51883 7.2836 3.84037 7.57681L5.51614 9.10495C5.64845 9.2256 5.70613 9.40779 5.66739 9.58261L5.17065 11.8236C5.07432 12.2582 5.55121 12.5925 5.92694 12.3538L7.73186 11.207Z", fill: "white" })] })), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: "clip0_33289_7333" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: 16, height: 16, rx: 8, fill: "white" }) })) })] }))); };
|
|
40
|
+
exports.default = SvgStarCircle;
|
|
@@ -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 SvgStarfull = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgStarfull = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M10.4637 18.1287C10.791 17.9208 11.209 17.9208 11.5363 18.1287L16.3822 21.2076C17.1336 21.6851 18.0874 21.0164 17.8947 20.1472L16.5732 14.1852C16.4957 13.8356 16.6111 13.4712 16.8757 13.2299L21.3193 9.17781C21.9623 8.59138 21.6012 7.52026 20.7344 7.44287L14.9821 6.92931C14.6077 6.89589 14.2838 6.65541 14.1434 6.30678L11.9276 0.803818C11.5913 -0.0315057 10.4087 -0.0315048 10.0724 0.803819L7.85662 6.30678C7.71624 6.65541 7.39225 6.89589 7.01791 6.92931L1.26562 7.44287C0.39875 7.52026 0.0376534 8.59138 0.680737 9.17781L5.12429 13.2299C5.3889 13.4712 5.50428 13.8356 5.42678 14.1852L4.10526 20.1472C3.91259 21.0164 4.86638 21.6851 5.61784 21.2076L10.4637 18.1287Z", fill: "currentColor" }) }))); };
|
|
40
40
|
exports.default = SvgStarfull;
|
|
@@ -0,0 +1,40 @@
|
|
|
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgStarfullSmall = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.73186 12.3144C7.8955 12.2104 8.1045 12.2104 8.26814 12.3144L10.6911 13.8538C11.0668 14.0925 11.5437 13.7582 11.4474 13.3236L10.7866 10.3426C10.7479 10.1678 10.8055 9.9856 10.9379 9.86495L13.1596 7.83891C13.4812 7.54569 13.3006 7.01013 12.8672 6.97144L9.99104 6.71466C9.80387 6.69795 9.64188 6.5777 9.57169 6.40339L8.46381 3.65191C8.29564 3.23425 7.70436 3.23425 7.53619 3.65191L6.42831 6.40339C6.35812 6.5777 6.19613 6.69795 6.00896 6.71466L3.13281 6.97144C2.69938 7.01013 2.51883 7.54569 2.84037 7.83891L5.06214 9.86495C5.19445 9.9856 5.25214 10.1678 5.21339 10.3426L4.55263 13.3236C4.4563 13.7582 4.93319 14.0925 5.30892 13.8538L7.73186 12.3144Z", fill: "currentColor" }) }))); };
|
|
40
|
+
exports.default = SvgStarfullSmall;
|
|
@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
28
28
|
exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
|
|
29
29
|
exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.Folder = exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = exports.Filter2 = exports.Filter = exports.Facebook = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.Copy = exports.Completed = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = void 0;
|
|
30
30
|
exports.PlusCircle = exports.PlusBig = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = void 0;
|
|
31
|
-
exports.
|
|
32
|
-
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = void 0;
|
|
31
|
+
exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.Tick = exports.Tamamlarsin = exports.SwitchPassive = exports.Swap = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = void 0;
|
|
32
|
+
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.RotateRight = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = exports.Grid = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUp = exports.VolumeOff = void 0;
|
|
33
33
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
34
34
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
35
35
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -377,8 +377,12 @@ var SignLanguage_1 = __importDefault(require("./SignLanguage"));
|
|
|
377
377
|
Object.defineProperty(exports, "SignLanguage", { enumerable: true, get: function () { return SignLanguage_1.default; } });
|
|
378
378
|
var Star_1 = __importDefault(require("./Star"));
|
|
379
379
|
Object.defineProperty(exports, "Star", { enumerable: true, get: function () { return Star_1.default; } });
|
|
380
|
+
var StarCircle_1 = __importDefault(require("./StarCircle"));
|
|
381
|
+
Object.defineProperty(exports, "StarCircle", { enumerable: true, get: function () { return StarCircle_1.default; } });
|
|
380
382
|
var Starfull_1 = __importDefault(require("./Starfull"));
|
|
381
383
|
Object.defineProperty(exports, "Starfull", { enumerable: true, get: function () { return Starfull_1.default; } });
|
|
384
|
+
var StarfullSmall_1 = __importDefault(require("./StarfullSmall"));
|
|
385
|
+
Object.defineProperty(exports, "StarfullSmall", { enumerable: true, get: function () { return StarfullSmall_1.default; } });
|
|
382
386
|
var Swap_1 = __importDefault(require("./Swap"));
|
|
383
387
|
Object.defineProperty(exports, "Swap", { enumerable: true, get: function () { return Swap_1.default; } });
|
|
384
388
|
var SwitchPassive_1 = __importDefault(require("./SwitchPassive"));
|
|
@@ -1194,10 +1198,18 @@ exports.iconList = {
|
|
|
1194
1198
|
var props = __rest(_a, []);
|
|
1195
1199
|
return (0, jsx_runtime_1.jsx)(Star_1.default, __assign({}, props));
|
|
1196
1200
|
},
|
|
1201
|
+
StarCircle: function (_a) {
|
|
1202
|
+
var props = __rest(_a, []);
|
|
1203
|
+
return (0, jsx_runtime_1.jsx)(StarCircle_1.default, __assign({}, props));
|
|
1204
|
+
},
|
|
1197
1205
|
Starfull: function (_a) {
|
|
1198
1206
|
var props = __rest(_a, []);
|
|
1199
1207
|
return (0, jsx_runtime_1.jsx)(Starfull_1.default, __assign({}, props));
|
|
1200
1208
|
},
|
|
1209
|
+
StarfullSmall: function (_a) {
|
|
1210
|
+
var props = __rest(_a, []);
|
|
1211
|
+
return (0, jsx_runtime_1.jsx)(StarfullSmall_1.default, __assign({}, props));
|
|
1212
|
+
},
|
|
1201
1213
|
Swap: function (_a) {
|
|
1202
1214
|
var props = __rest(_a, []);
|
|
1203
1215
|
return (0, jsx_runtime_1.jsx)(Swap_1.default, __assign({}, props));
|
|
@@ -19,11 +19,11 @@ var props_1 = require("./props");
|
|
|
19
19
|
var ProductCardHorizontal_styled_1 = require("./ProductCardHorizontal.styled");
|
|
20
20
|
var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
|
|
21
21
|
var ProductCardHorizontal = function (_a) {
|
|
22
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalDefault.price : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalDefault.component : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ProductCardHorizontalDefault.onClick : _j, _k = _a.hasLoading, hasLoading = _k === void 0 ? props_1.ProductCardHorizontalDefault.hasLoading : _k;
|
|
22
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardHorizontalDefault.description : _c, _d = _a.price, price = _d === void 0 ? props_1.ProductCardHorizontalDefault.price : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalDefault.component : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ProductCardHorizontalDefault.onClick : _j, _k = _a.hasLoading, hasLoading = _k === void 0 ? props_1.ProductCardHorizontalDefault.hasLoading : _k, _l = _a.size, size = _l === void 0 ? props_1.ProductCardHorizontalDefault.size : _l;
|
|
23
23
|
var LinkComponent = function (_a) {
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
26
26
|
};
|
|
27
|
-
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "142px", height: "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "200px", height: "17px", hasInset: true })] }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] }))] })) })) }))));
|
|
27
|
+
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "142px", height: "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "200px", height: "17px", hasInset: true })] }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), price && period && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] })))] }))] })) })) }))));
|
|
28
28
|
};
|
|
29
29
|
exports.default = ProductCardHorizontal;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardHorizontalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n
|
|
13
|
+
exports.ProductCardHorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\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(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n\n .title {\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n position: relative;\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n ", ";\n }\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 font: var(--body-medium-14-17);\n position: relative;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n position: relative;\n\n .price {\n margin-right: 4px;\n font: var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font: var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n ", "\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n\n ", "\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: ", ";\n border-radius: 0.5rem;\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(--search-shadow-color);\n border: 0;\n }\n\n * {\n width: ", " !important;\n height: ", " !important;\n object-fit: contain;\n object-position: center center;\n display: block !important;\n }\n }\n\n .title {\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font: var(--title-semi-bold-16-19);\n position: relative;\n @media only screen and ", " {\n font: var(--caption-semi-bold-12-15);\n ", ";\n }\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 font: var(--body-medium-14-17);\n position: relative;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n position: relative;\n\n .price {\n margin-right: 4px;\n font: var(--body-extra-bold-14-17);\n @media only screen and ", " {\n font: var(--caption-extra-bold-12-15);\n }\n }\n\n .period {\n font: var(--body-regular-13-16);\n @media only screen and ", " {\n font: var(--caption-regular-12-15);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return !props.$hasLoading && "\n &:hover {\n background: var(--dark-opacity-3);\n }\n "; }, function (props) { return props.$hasLoading ? "none" : "1px solid var(--dark-opacity-5)"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "100%" : "90%"; }, function (props) { return props.$hasLoading ? "100%" : "90%"; }, devices_1.devices.sm, function (props) { return props.$hasLoading ? "margin-bottom: 0.25rem" : null; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, function (props) { return props.$size === "small" ? "\n .horizontalWrapper {\n .img {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--search-shadow-color);\n border: 0;\n }\n .title{\n font: var(--caption-semi-bold-12-15);\n }\n .description {\n display: none;\n }\n .priceContent {\n .price {\n font: var(--caption-extra-bold-12-15);\n }\n .period {\n font: var(--caption-regular-12-15);\n }\n }\n }\n " : ""; });
|
|
14
14
|
var templateObject_1;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ProductCardHorizontalDefault = void 0;
|
|
3
|
+
exports.ProductCardHorizontalDefault = exports.sizes = void 0;
|
|
4
|
+
exports.sizes = ['medium', 'small'];
|
|
4
5
|
exports.ProductCardHorizontalDefault = {
|
|
6
|
+
size: 'medium',
|
|
5
7
|
title: null,
|
|
6
8
|
description: null,
|
|
7
9
|
price: null,
|
|
@@ -0,0 +1,40 @@
|
|
|
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 ReviewBlock_styled_1 = require("./ReviewBlock.styled");
|
|
19
|
+
var props_1 = require("./props");
|
|
20
|
+
var Icon_1 = __importDefault(require("../Icon"));
|
|
21
|
+
var Badges_1 = __importDefault(require("../Badges"));
|
|
22
|
+
var react_i18next_1 = require("react-i18next");
|
|
23
|
+
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
24
|
+
var Dropdown_1 = __importDefault(require("../Dropdown"));
|
|
25
|
+
var ReviewBlock = function (_a) {
|
|
26
|
+
var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
|
|
27
|
+
var t = (0, react_i18next_1.useTranslation)().t;
|
|
28
|
+
var percentage = (rating / maxStars) * 100;
|
|
29
|
+
var dropdownList = [
|
|
30
|
+
{
|
|
31
|
+
title: t("REMOVE_COMMENTS"),
|
|
32
|
+
onClick: onRemoveButtonClick,
|
|
33
|
+
}
|
|
34
|
+
];
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "145px", top: "calc(100% + 10px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
|
|
36
|
+
var _a, _b;
|
|
37
|
+
return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductReviewBlock, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductWrapper, { children: [(0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductImage, { children: product === null || product === void 0 ? void 0 : product.image }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductReviewContent, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductName, { children: product === null || product === void 0 ? void 0 : product.name }) })] }), (product === null || product === void 0 ? void 0 : product.question) && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductQuestion, { children: product === null || product === void 0 ? void 0 : product.question }), (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductAnswer, { children: ["\u201C", product === null || product === void 0 ? void 0 : product.answer, "\u201D"] }), ((_a = product === null || product === void 0 ? void 0 : product.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Tags, { children: (_b = product === null || product === void 0 ? void 0 : product.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag, i) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: tag }, i)); }) }))] }, idx));
|
|
38
|
+
})] }));
|
|
39
|
+
};
|
|
40
|
+
exports.default = ReviewBlock;
|
|
@@ -0,0 +1,29 @@
|
|
|
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.DropdownToggleButton = exports.DropdownWrapper = exports.StarsWrapper = exports.TextLinkWrapper = exports.Tags = exports.ProductAnswer = exports.ProductQuestion = exports.ProductName = exports.ProductReviewContent = exports.ProductImage = exports.ProductWrapper = exports.ProductReviewBlock = exports.PlatformReview = exports.Date = exports.CustomerName = exports.Header = exports.ReviewCard = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n"], ["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n"])));
|
|
13
|
+
exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: ", ";\n border-bottom: 1px solid var(--dark-opacity-10);\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: ", ";\n border-bottom: 1px solid var(--dark-opacity-10);\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n"])), function (props) { return props.$hasDropdown || props.$hasApproveButton ? "center" : "flex-end"; });
|
|
14
|
+
exports.CustomerName = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font: var(--body-semi-bold-13-16);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n"], ["\n font: var(--body-semi-bold-13-16);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n"])));
|
|
15
|
+
exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font: var(--body-semi-bold-13-16);\n color: var(--caption-semi-bold-12-15);\n margin-top: 1rem;\n text-align: end;\n"], ["\n font: var(--body-semi-bold-13-16);\n color: var(--caption-semi-bold-12-15);\n margin-top: 1rem;\n text-align: end;\n"])));
|
|
16
|
+
exports.PlatformReview = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font: var(--body-regular-14-20);\n color: var(--grey-90);\n margin: 16px 0;\n"], ["\n font: var(--body-regular-14-20);\n color: var(--grey-90);\n margin: 16px 0;\n"])));
|
|
17
|
+
exports.ProductReviewBlock = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n + div{\n margin-top: 1.5rem;\n }\n"], ["\n + div{\n margin-top: 1.5rem;\n }\n"])));
|
|
18
|
+
exports.ProductWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 0;\n display: flex;\n gap: 1rem;\n align-items: center;\n margin-bottom: 1rem;\n"], ["\n margin-top: 0;\n display: flex;\n gap: 1rem;\n align-items: center;\n margin-bottom: 1rem;\n"])));
|
|
19
|
+
exports.ProductImage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n object-fit: cover;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 64px;\n height: 64px;\n object-fit: cover;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
20
|
+
exports.ProductReviewContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
21
|
+
exports.ProductName = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n color: var(--dark-opacity-75);\n"], ["\n font: var(--body-bold-14-17);\n color: var(--dark-opacity-75);\n"])));
|
|
22
|
+
exports.ProductQuestion = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font: var(--body-bold-13-16);\n color: var(--dark-opacity-75);\n margin-bottom: 0.5rem;\n"], ["\n font: var(--body-bold-13-16);\n color: var(--dark-opacity-75);\n margin-bottom: 0.5rem;\n"])));
|
|
23
|
+
exports.ProductAnswer = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 0;\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 0;\n"])));
|
|
24
|
+
exports.Tags = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin-top: 1rem;\n"])));
|
|
25
|
+
exports.TextLinkWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n"], ["\n font: var(--body-bold-14-17);\n"])));
|
|
26
|
+
exports.StarsWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n display: flex;\n flex-direction: row;\n\n .filleds {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: absolute;\n inset: 0;\n left: 0;\n overflow: hidden;\n white-space: nowrap;\n color: var(--yellowDark);\n z-index: 1;\n }\n\n .notFilleds {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--dark-opacity-10);\n z-index: 0;\n }\n"], ["\n position: relative;\n width: fit-content;\n display: flex;\n flex-direction: row;\n\n .filleds {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: absolute;\n inset: 0;\n left: 0;\n overflow: hidden;\n white-space: nowrap;\n color: var(--yellowDark);\n z-index: 1;\n }\n\n .notFilleds {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n color: var(--dark-opacity-10);\n z-index: 0;\n }\n"])));
|
|
27
|
+
exports.DropdownWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n margin-left: 1rem;\n"], ["\n margin-left: 1rem;\n"])));
|
|
28
|
+
exports.DropdownToggleButton = styled_components_1.default.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border:0;\n background: none;\n color: var(--primary);\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border:0;\n background: none;\n color: var(--primary);\n"])));
|
|
29
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
@@ -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 ReviewBlock_1 = require("./ReviewBlock");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ReviewBlock_1).default; } });
|
|
@@ -0,0 +1,37 @@
|
|
|
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
|
+
exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var ReviewBlock_1 = __importDefault(require("../ReviewBlock"));
|
|
20
|
+
var productReviews_json_1 = __importDefault(require("./../../../jsons/productReviews.json"));
|
|
21
|
+
exports.default = {
|
|
22
|
+
title: 'Components/ReviewBlock',
|
|
23
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "738px" } }, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_1.default, __assign({}, props)) })); },
|
|
24
|
+
tags: ['autodocs'],
|
|
25
|
+
argTypes: {}
|
|
26
|
+
};
|
|
27
|
+
exports.Default = {
|
|
28
|
+
args: {
|
|
29
|
+
productReviews: productReviews_json_1.default,
|
|
30
|
+
user: "Emre KARADAĞ",
|
|
31
|
+
date: "25 aralık 2024",
|
|
32
|
+
hasApproveButton: true,
|
|
33
|
+
hasDropdown: false,
|
|
34
|
+
onApproveButtonClick: function () { return console.log("onApproveButtonClick"); },
|
|
35
|
+
onRemoveButtonClick: function () { return console.log("onRemoveButtonClick"); },
|
|
36
|
+
},
|
|
37
|
+
};
|
|
@@ -29,7 +29,7 @@ var ReviewCard_styled_1 = require("./ReviewCard.styled");
|
|
|
29
29
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
30
30
|
var classnames_1 = __importDefault(require("classnames"));
|
|
31
31
|
var ReviewCard = function (_a) {
|
|
32
|
-
var _b = _a.image, image = _b === void 0 ? props_1.ReviewCardDefault.image : _b, _c = _a.description, description = _c === void 0 ? props_1.ReviewCardDefault.description : _c, _d = _a.name, name = _d === void 0 ? props_1.ReviewCardDefault.name : _d, _e = _a.logo, logo = _e === void 0 ? props_1.ReviewCardDefault.logo : _e, _f = _a.star, star = _f === void 0 ? props_1.ReviewCardDefault.star : _f, _g = _a.totalStar, totalStar = _g === void 0 ? props_1.ReviewCardDefault.totalStar : _g, _h = _a.title, title = _h === void 0 ? props_1.ReviewCardDefault.title : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ReviewCardDefault.onClick : _j;
|
|
33
|
-
return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(
|
|
32
|
+
var _b = _a.image, image = _b === void 0 ? props_1.ReviewCardDefault.image : _b, _c = _a.description, description = _c === void 0 ? props_1.ReviewCardDefault.description : _c, _d = _a.name, name = _d === void 0 ? props_1.ReviewCardDefault.name : _d, _e = _a.logo, logo = _e === void 0 ? props_1.ReviewCardDefault.logo : _e, _f = _a.star, star = _f === void 0 ? props_1.ReviewCardDefault.star : _f, _g = _a.totalStar, totalStar = _g === void 0 ? props_1.ReviewCardDefault.totalStar : _g, _h = _a.title, title = _h === void 0 ? props_1.ReviewCardDefault.title : _h, _j = _a.onClick, onClick = _j === void 0 ? props_1.ReviewCardDefault.onClick : _j, _k = _a.date, date = _k === void 0 ? props_1.ReviewCardDefault.date : _k;
|
|
33
|
+
return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, __assign({ onClick: onClick }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.ImgWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Detail, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Title, { children: title }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Stars, { children: __spreadArray([], Array(totalStar), true).map(function (value, key) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('star', { 'isFilled': key < star }) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: key < star ? 'var(--yellowDark)' : 'var(--dark-opacity-10)', name: "StarfullSmall" }) }), key)); }) })] })] }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Description, { children: description }), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Line, {}), (0, jsx_runtime_1.jsxs)(ReviewCard_styled_1.Bottom, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.CustomerName, { children: name }), logo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReviewCard_styled_1.HorizontalLine, {}), (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Logo, { children: logo })] }))] }), date && (0, jsx_runtime_1.jsx)(ReviewCard_styled_1.Date, { children: date })] })] }) })));
|
|
34
34
|
};
|
|
35
35
|
exports.default = ReviewCard;
|
|
@@ -7,7 +7,18 @@ 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.ReviewCardStyled = void 0;
|
|
10
|
+
exports.Date = exports.CustomerName = exports.HorizontalLine = exports.Logo = exports.Bottom = exports.Line = exports.Description = exports.Stars = exports.Title = exports.Detail = exports.ImgWrapper = exports.ReviewCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n
|
|
13
|
-
var
|
|
12
|
+
exports.ReviewCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n padding: 1.5rem;\n transition: all .2s ease;\n cursor: pointer;\n &:hover{\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n"])));
|
|
13
|
+
exports.ImgWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 auto;\n max-width: 64px;\n * {\n display: block !important;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .img{\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 0.5rem;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 0 auto;\n max-width: 64px;\n * {\n display: block !important;\n }\n }\n"])));
|
|
14
|
+
exports.Detail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n"], ["\n"])));
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n color: var(--dark-opacity-75);\n font : var(--body-bold-14-17);\n"], ["\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n color: var(--dark-opacity-75);\n font : var(--body-bold-14-17);\n"])));
|
|
16
|
+
exports.Stars = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .star{\n + .star{\n margin-left: 1px;\n }\n div{\n display: block;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .star{\n + .star{\n margin-left: 1px;\n }\n div{\n display: block;\n }\n }\n"])));
|
|
17
|
+
exports.Description = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark-opacity-75);\n margin: 1rem 0 1.5rem 0;\n overflow: hidden;\n position: relative;\n min-height: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n"])));
|
|
18
|
+
exports.Line = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n"], ["\n border-bottom: 1px solid var(--icon-shadow-color);\n margin-bottom: 1rem;\n"])));
|
|
19
|
+
exports.Bottom = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n >div{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n >div{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n }\n"])));
|
|
20
|
+
exports.Logo = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n * {\n display: block !important;\n }\n"], ["\n * {\n display: block !important;\n }\n"])));
|
|
21
|
+
exports.HorizontalLine = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-right: 1px solid var(--dark-opacity-75);\n height: 0.5rem;\n margin: 0 0.5rem;\n"], ["\n border-right: 1px solid var(--dark-opacity-75);\n height: 0.5rem;\n margin: 0 0.5rem;\n"])));
|
|
22
|
+
exports.CustomerName = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font: var(--caption-medium-10-12);\n color: var(--dark-opacity-75);\n"], ["\n font: var(--caption-medium-10-12);\n color: var(--dark-opacity-75);\n"])));
|
|
23
|
+
exports.Date = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font: var(--caption-medium-10-12);\n color: var(--dark-opacity-75);\n"], ["\n font: var(--caption-medium-10-12);\n color: var(--dark-opacity-75);\n"])));
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
@@ -31,5 +31,6 @@ exports.Default = {
|
|
|
31
31
|
description: 'I recently rented a GoPro camera through Rundle and was thoroughly impressed by the ease and efficiency of the process. Setting everything up I recently rented a GoPro camera through Rundle and was thoroughly impressed by the ease and efficiency of the process. Setting everything up',
|
|
32
32
|
name: "C.P",
|
|
33
33
|
logo: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", height: "12px", alt: "test" }),
|
|
34
|
+
date: "25 aralık 2025",
|
|
34
35
|
},
|
|
35
36
|
};
|
|
@@ -23,11 +23,11 @@ var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
|
23
23
|
var react_i18next_1 = require("react-i18next");
|
|
24
24
|
var ProductCardHorizontal_1 = __importDefault(require("../ProductCardHorizontal"));
|
|
25
25
|
var SearchBox = function (_a) {
|
|
26
|
-
var _b = _a.onKeyUp, onKeyUp = _b === void 0 ? props_1.SearchBoxDefault.onKeyUp : _b, _c = _a.onBlur, onBlur = _c === void 0 ? props_1.SearchBoxDefault.onBlur : _c, _d = _a.onFocus, onFocus = _d === void 0 ? props_1.SearchBoxDefault.onFocus : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.SearchBoxDefault.onChange : _e, _f = _a.onButtonClick, onButtonClick = _f === void 0 ? props_1.SearchBoxDefault.onButtonClick : _f, _g = _a.children, children = _g === void 0 ? props_1.SearchBoxDefault.children : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.SearchBoxDefault.isLoading : _h, _j = _a.showResultList, showResultList = _j === void 0 ? props_1.SearchBoxDefault.showResultList : _j, _k = _a.placeholder, placeholder = _k === void 0 ? props_1.SearchBoxDefault.placeholder : _k, value = _a.value;
|
|
26
|
+
var _b = _a.onKeyUp, onKeyUp = _b === void 0 ? props_1.SearchBoxDefault.onKeyUp : _b, _c = _a.onBlur, onBlur = _c === void 0 ? props_1.SearchBoxDefault.onBlur : _c, _d = _a.onFocus, onFocus = _d === void 0 ? props_1.SearchBoxDefault.onFocus : _d, _e = _a.onChange, onChange = _e === void 0 ? props_1.SearchBoxDefault.onChange : _e, _f = _a.onButtonClick, onButtonClick = _f === void 0 ? props_1.SearchBoxDefault.onButtonClick : _f, _g = _a.children, children = _g === void 0 ? props_1.SearchBoxDefault.children : _g, _h = _a.isLoading, isLoading = _h === void 0 ? props_1.SearchBoxDefault.isLoading : _h, _j = _a.showResultList, showResultList = _j === void 0 ? props_1.SearchBoxDefault.showResultList : _j, _k = _a.placeholder, placeholder = _k === void 0 ? props_1.SearchBoxDefault.placeholder : _k, _l = _a.size, size = _l === void 0 ? props_1.SearchBoxDefault.size : _l, value = _a.value;
|
|
27
27
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
28
28
|
var resultRef = (0, react_1.useRef)();
|
|
29
29
|
var simplebarRef = (0, react_1.useRef)(null);
|
|
30
|
-
var
|
|
30
|
+
var _m = (0, react_1.useState)(null), selectedIndex = _m[0], setSelectedIndex = _m[1];
|
|
31
31
|
var handleKeyUp = function (e) {
|
|
32
32
|
e = e || window.event;
|
|
33
33
|
var charCode = e.keyCode || e.which;
|
|
@@ -72,6 +72,6 @@ var SearchBox = function (_a) {
|
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
74
|
}, [selectedIndex]);
|
|
75
|
-
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": showResultList }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH") }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? Array.from({ length: 4 }, function (_, index) { return index; }).map(function (index) { return (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true }, index); }) : children })) })) })))] })));
|
|
75
|
+
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, __assign({ "$showResultList": showResultList, "$size": size }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shadowBox" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "inputWrapper" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onBlur: onBlur, onFocus: onFocus, value: value, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: onButtonClick, className: "icon", "aria-label": t("SEARCH") }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Searchsmall" }) }))] })), showResultList && ((0, jsx_runtime_1.jsx)("div", __assign({ ref: resultRef, className: "resultList" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "resultListInner" }, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: isLoading ? Array.from({ length: 4 }, function (_, index) { return index; }).map(function (index) { return (0, jsx_runtime_1.jsx)(ProductCardHorizontal_1.default, { hasLoading: true }, index); }) : children })) })) })))] })));
|
|
76
76
|
};
|
|
77
77
|
exports.default = SearchBox;
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.LoadingStyled = exports.SearchBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadowBox{\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow:
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadowBox{\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: ", ";\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n padding: 0;\n border-radius: 0.5rem;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: ", ";\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .resultListInner{\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n .productCard{\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is(.selected){\n background: var(--dark-opacity-3);\n }\n }\n ", "\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n [data-simplebar] {\n max-height: 326px !important;\n }\n }\n }\n }\n"], ["\n position: relative;\n .shadowBox{\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: ", ";\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font : var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border:0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n padding: 0;\n border-radius: 0.5rem;\n background: white;\n max-height: 408px;\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: ", ";\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n .resultListInner{\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n .productCard{\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is(.selected){\n background: var(--dark-opacity-3);\n }\n }\n ", "\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n [data-simplebar] {\n max-height: 326px !important;\n }\n }\n }\n }\n"])), function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, devices_1.devices.xl, function (props) { return props.$size === "small" ? "\n row-gap: 0.5rem;\n max-height: 326px;\n [data-simplebar] {\n max-height: 326px !important;\n }\n " : ""; }, devices_1.devices.xl);
|
|
14
14
|
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SearchBoxDefault = void 0;
|
|
3
|
+
exports.SearchBoxDefault = exports.sizes = void 0;
|
|
4
|
+
exports.sizes = ['medium', 'small'];
|
|
4
5
|
exports.SearchBoxDefault = {
|
|
6
|
+
size: "medium",
|
|
5
7
|
onKeyUp: null,
|
|
6
8
|
onBlur: null,
|
|
7
9
|
onFocus: null,
|
|
@@ -19,11 +19,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
19
19
|
var SearchBox_1 = __importDefault(require("../SearchBox"));
|
|
20
20
|
var productList_json_1 = __importDefault(require("../../../jsons/productList.json"));
|
|
21
21
|
var index_1 = require("../../../index");
|
|
22
|
+
var props_1 = require("../props");
|
|
22
23
|
exports.default = {
|
|
23
24
|
title: 'Components/SearchBox',
|
|
24
25
|
component: SearchBox_1.default,
|
|
25
26
|
tags: ['autodocs'],
|
|
26
|
-
argTypes: {
|
|
27
|
+
argTypes: {
|
|
28
|
+
size: { control: 'select', options: props_1.sizes },
|
|
29
|
+
}
|
|
27
30
|
};
|
|
28
31
|
exports.Default = {
|
|
29
32
|
args: {
|
|
@@ -33,9 +36,10 @@ exports.Default = {
|
|
|
33
36
|
placeholder: "Teknolojik ürün ara...",
|
|
34
37
|
isLoading: false,
|
|
35
38
|
showResultList: false,
|
|
39
|
+
size: "small",
|
|
36
40
|
children: productList_json_1.default.map(function (product) {
|
|
37
41
|
var _a, _b, _c;
|
|
38
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard" }, { children: (0, jsx_runtime_1.jsx)(index_1.ProductCardHorizontal, { title: product.name, image: (0, jsx_runtime_1.jsx)("img", { src: (_a = product.medias[0]) === null || _a === void 0 ? void 0 : _a.url, alt: product.name, width: "70", height: "70", className: "media" }), description: product.shortDescription, price: "".concat((_b = product.prices[0]) === null || _b === void 0 ? void 0 : _b.newPriceText, " ").concat((_c = product.prices[0]) === null || _c === void 0 ? void 0 : _c.currencyCode), period: 'ay' }, product.productId) })));
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "productCard" }, { children: (0, jsx_runtime_1.jsx)(index_1.ProductCardHorizontal, { title: product.name, image: (0, jsx_runtime_1.jsx)("img", { src: (_a = product.medias[0]) === null || _a === void 0 ? void 0 : _a.url, alt: product.name, width: "70", height: "70", className: "media" }), description: product.shortDescription, price: "".concat((_b = product.prices[0]) === null || _b === void 0 ? void 0 : _b.newPriceText, " ").concat((_c = product.prices[0]) === null || _c === void 0 ? void 0 : _c.currencyCode), period: 'ay', size: "small" }, product.productId) })));
|
|
39
43
|
}),
|
|
40
44
|
},
|
|
41
45
|
};
|
|
@@ -88,7 +88,7 @@ var SelectBox = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
88
88
|
});
|
|
89
89
|
CustomOption.displayName = 'CustomOption';
|
|
90
90
|
var Input = function (props) { return (0, jsx_runtime_1.jsx)(react_select_1.components.Input, __assign({}, props, { autoComplete: autoComplete })); };
|
|
91
|
-
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowDownBig" }) })); };
|
|
91
|
+
var DropdownIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__dropdown-indicator" }, { children: size === "small" ? (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowSmallDown" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "ArrowDownBig" }) })); };
|
|
92
92
|
var LoadingIndicator = function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ className: "customSelect__indicator customSelect__loading-indicator css-o9ehiq-loadingIndicator", "aria-hidden": "true" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { width: "1rem", height: "1rem", variant: "primary" }) })); };
|
|
93
93
|
var MenuList = function (props) {
|
|
94
94
|
return ((0, jsx_runtime_1.jsx)(react_select_1.components.MenuList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(simplebar_react_1.default, __assign({ ref: simplebarRef, autoHide: false }, { children: props.children })) })));
|