krl-alfred 1.73.32 → 1.74.0

package/dist/components/ReviewCard/ReviewCard.js

@@ -0,0 +1,25 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ReviewCard_styled_1 = require("./ReviewCard.styled");
+var Icon_1 = __importDefault(require("../Icon/Icon"));
+var classnames_1 = __importDefault(require("classnames"));
+var ReviewCard = function (props) {
+    return ((0, jsx_runtime_1.jsx)(ReviewCard_styled_1.ReviewCardStyled, { children: (0, jsx_runtime_1.jsxs)("a", { href: props.link, target: "_blank", children: [(0, jsx_runtime_1.jsxs)("div", { className: "imgWrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: props.image }), (0, jsx_runtime_1.jsx)("div", { className: "stars", children: __spreadArray([], Array(props.totalStar), true).map(function (value, key) { return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('star', { 'isFilled': key < props.star }), children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Star", width: "12px", height: "12px" }) }, key)); }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "description", children: props.description }), (0, jsx_runtime_1.jsx)("div", { className: "line" }), (0, jsx_runtime_1.jsxs)("div", { className: "bottom", children: [(0, jsx_runtime_1.jsx)("div", { className: "name", children: props.name }), (0, jsx_runtime_1.jsx)("div", { className: "horizontalLine" }), (0, jsx_runtime_1.jsx)("div", { className: "logo", children: props.logo })] })] }) }));
+};
+ReviewCard.defaultProps = {
+    totalStar: 5
+};
+exports.default = ReviewCard;

package/dist/components/ReviewCard/ReviewCard.styled.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReviewCardStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+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    .imgWrapper{\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            * {\n                display: block !important;\n            }\n        }\n        .stars{\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            .star{\n                + .star{\n                    margin-left: 1px;\n                }\n                &:is(.isFilled){\n                    svg{\n                        path{\n                            fill : var(--yellow)\n                        }\n                    }\n                }\n                svg{\n                    display: block;\n                    path{\n                        stroke:none;\n                        fill : var(--dark-opacity-10)\n                    }\n                }\n            }\n        }\n    }\n    .description{\n        font-size: 14px;\n        font-weight: 500;\n        line-height: normal;\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    .line{\n        border-bottom: 1px solid var(--icon-shadow-color);\n        margin-bottom: 1rem;\n    }\n    .bottom{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        .name{\n            font-size: 10px;\n            font-weight: 500;\n            line-height: normal;\n            color: var(--dark-opacity-75);\n            \n        }\n        .horizontalLine{\n            border-right: 1px solid var(--dark-opacity-75);\n            height: 0.5rem;\n            margin: 0 0.5rem;\n        }\n        .logo{\n            * {\n                display: block !important;\n            }\n        }\n    }\n"], ["\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    .imgWrapper{\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            * {\n                display: block !important;\n            }\n        }\n        .stars{\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            .star{\n                + .star{\n                    margin-left: 1px;\n                }\n                &:is(.isFilled){\n                    svg{\n                        path{\n                            fill : var(--yellow)\n                        }\n                    }\n                }\n                svg{\n                    display: block;\n                    path{\n                        stroke:none;\n                        fill : var(--dark-opacity-10)\n                    }\n                }\n            }\n        }\n    }\n    .description{\n        font-size: 14px;\n        font-weight: 500;\n        line-height: normal;\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    .line{\n        border-bottom: 1px solid var(--icon-shadow-color);\n        margin-bottom: 1rem;\n    }\n    .bottom{\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        .name{\n            font-size: 10px;\n            font-weight: 500;\n            line-height: normal;\n            color: var(--dark-opacity-75);\n            \n        }\n        .horizontalLine{\n            border-right: 1px solid var(--dark-opacity-75);\n            height: 0.5rem;\n            margin: 0 0.5rem;\n        }\n        .logo{\n            * {\n                display: block !important;\n            }\n        }\n    }\n"])));
+var templateObject_1;

package/dist/components/ReviewCard/index.js

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

package/dist/components/ReviewCard/props.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ReviewCardDefault = {
+    totalStar: 5
+};

package/dist/components/ReviewCard/stories/ReviewCard.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ReviewCard_1 = __importDefault(require("../ReviewCard"));
+exports.default = {
+    title: 'Components/ReviewCard',
+    component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "330px" }, children: (0, jsx_runtime_1.jsx)(ReviewCard_1.default, __assign({}, props)) }); },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+exports.Default = {
+    args: {
+        image: (0, jsx_runtime_1.jsx)("img", { height: "64px", src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
+        star: 3,
+        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',
+        name: "C.P",
+        logo: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", height: "12px", alt: "test" }),
+    },
+};

package/dist/components/SearchBox/SearchBox.styled.js

@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingStyled = exports.SearchBoxStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  .shadow{\n    height: ", "; \n    position: absolute;\n    width: calc(100% - 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    border-radius: 8px;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    }\n  }\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    border-radius: 8px;\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\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      &:hover{\n        svg {\n          path, circle {\n            stroke: var(--primary-hover);\n          }\n        }   \n      }\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\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\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n      padding: 1rem;\n    }\n  }\n"], ["\n  position: relative;\n  .shadow{\n    height: ", "; \n    position: absolute;\n    width: calc(100% - 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    border-radius: 8px;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    }\n  }\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    border-radius: 8px;\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\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      &:hover{\n        svg {\n          path, circle {\n            stroke: var(--primary-hover);\n          }\n        }   \n      }\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\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\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n      padding: 1rem;\n    }\n  }\n"])), function (props) { return props.shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
+exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  .shadow{\n    height: ", "; \n    position: absolute;\n    width: calc(100% - 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    border-radius: 8px;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    }\n  }\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    border-radius: 8px;\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\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      &:hover{\n        svg {\n          path, circle {\n            stroke: var(--primary-hover);\n          }\n        }   \n      }\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\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\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n      padding: 1rem;\n    }\n  }\n"], ["\n  position: relative;\n  .shadow{\n    height: ", "; \n    position: absolute;\n    width: calc(100% - 10px);\n    left: 50%;\n    transform: translateX(-50%);\n    border-radius: 8px;\n    box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    }\n  }\n  .inputWrapper {\n    position: relative;\n    z-index: 5;\n    border-radius: 8px;\n    input {\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      background: white;\n      border-radius: 8px;\n      border: 1px solid var(--dark-opacity-10);\n      padding: 8px 24px;\n      color: var(--dark);\n      font-family: inherit;\n      font-style: normal;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: normal;\n      outline: none;\n\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      &:hover{\n        svg {\n          path, circle {\n            stroke: var(--primary-hover);\n          }\n        }   \n      }\n      svg {\n        path, circle {\n          stroke: var(--primary);\n        }\n      }\n    }\n  }\n\n  .resultList {\n    border: 1px solid var(--dark-opacity-10);\n    padding: 1.5rem;\n    border-radius: 8px;\n    background: white;\n    max-height: 408px;\n    box-sizing: border-box;\n    overflow: auto;\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\n    &::-webkit-scrollbar {\n      width: 4px;\n      background-color: #ffffff;\n    }\n    &::-webkit-scrollbar-track {\n      border-radius: 10px;\n      background: white;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: 10px;\n      background: var(--dark-opacity-10);\n    }\n    //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n    @media only screen and ", " {\n      row-gap: 0.5rem;\n      max-height: 326px;\n      padding: 1rem;\n    }\n  }\n"])), function (props) { return props.shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
 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"])));
 var templateObject_1, templateObject_2;

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
+exports.Slider = exports.ReviewCard = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
 var Button_1 = __importDefault(require("./components/Button"));
 exports.Button = Button_1.default;
 var Breadcrumbs_1 = __importDefault(require("./components/Breadcrumbs"));
@@ -88,3 +88,7 @@ var english_json_1 = __importDefault(require("./i18n/locales/english.json"));
 exports.enLocale = english_json_1.default;
 var turkish_json_1 = __importDefault(require("./i18n/locales/turkish.json"));
 exports.trLocale = turkish_json_1.default;
+var ReviewCard_1 = __importDefault(require("./components/ReviewCard"));
+exports.ReviewCard = ReviewCard_1.default;
+var react_slick_1 = __importDefault(require("react-slick"));
+exports.Slider = react_slick_1.default;

package/package.json

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