krl-alfred 2.24.4 → 2.24.6
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/Badges/layouts/text/text.styled.js +1 -1
- package/dist/components/Checkbox/Checkbox.styled.d.ts +10 -0
- package/dist/components/Checkbox/Checkbox.styled.js +12 -6
- package/dist/components/Checkbox/Checkbox.test.js +7 -3
- package/dist/components/Checkbox/CheckboxIndicator.js +2 -12
- package/dist/components/ProductCardVertical/ProductCardVertical.d.ts +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.js +2 -2
- package/dist/components/ProductCardVertical/ProductCardVertical.test.d.ts +1 -0
- package/dist/components/ProductCardVertical/ProductCardVertical.test.js +108 -0
- package/dist/components/ProductCardVertical/props.d.ts +1 -0
- package/dist/components/ProductCardVertical/props.js +1 -0
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts +62 -1
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +7 -1
- package/dist/components/RadioButton/RadioButton.test.js +6 -2
- package/dist/components/RadioButton/RadioIndicator.js +2 -12
- package/dist/components/RadioButton/RadioIndicator.styled.d.ts +11 -0
- package/dist/components/RadioButton/RadioIndicator.styled.js +34 -5
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.styled.js +8 -4
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.test.d.ts +1 -0
- package/dist/components/RadioButton/layouts/boxedMd/BoxedMd.test.js +98 -0
- package/dist/components/RadioButton/stories/RadioButton.stories.d.ts +17 -0
- package/dist/components/RadioButton/stories/RadioButton.stories.js +11 -1
- package/dist/components/SelectBox/SelectBox.js +5 -2
- package/dist/components/SelectBox/SelectBox.styled.d.ts +1 -0
- package/dist/components/SelectBox/SelectBox.styled.js +4 -3
- package/dist/components/SelectBox/SelectBox.test.js +18 -0
- package/dist/components/SelectBox/props.d.ts +3 -0
- package/dist/components/SelectBox/props.js +4 -1
- package/dist/components/SelectBox/stories/SelectBox.stories.d.ts +40 -0
- package/dist/components/SelectBox/stories/SelectBox.stories.js +5 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.TextStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font: var(--caption-semi-bold-10-12);\n border-radius: 3px;\n padding: 0 8px 0 8px;\n
|
|
12
|
+
exports.TextStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font: var(--caption-semi-bold-10-12);\n border-radius: 3px;\n padding: 0 8px 0 8px;\n line-height: 17px;\n background-color: ", ";\n color: ", ";\n"], ["\n font: var(--caption-semi-bold-10-12);\n border-radius: 3px;\n padding: 0 8px 0 8px;\n line-height: 17px;\n background-color: ", ";\n color: ", ";\n"])), function (props) {
|
|
13
13
|
switch (props.$variant) {
|
|
14
14
|
case 'primary':
|
|
15
15
|
return "var(--primary)";
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CheckboxStyledProps } from "./props";
|
|
3
3
|
export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
|
|
4
|
+
export declare const CheckboxIndicatorIdle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
5
|
+
ref?: import("react").Ref<HTMLSpanElement>;
|
|
6
|
+
}, "aria-hidden"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
7
|
+
ref?: import("react").Ref<HTMLSpanElement>;
|
|
8
|
+
}, "aria-hidden">>> & string;
|
|
9
|
+
export declare const CheckboxIndicatorChecked: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
10
|
+
ref?: import("react").Ref<HTMLSpanElement>;
|
|
11
|
+
}, "aria-hidden"> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
12
|
+
ref?: import("react").Ref<HTMLSpanElement>;
|
|
13
|
+
}, "aria-hidden">>> & string;
|
|
4
14
|
export declare const CheckboxIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
|
|
5
15
|
export declare const CheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
|
|
6
16
|
export declare const LabelsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CheckboxStyledProps> & CheckboxStyledProps, never>>> & string;
|
|
@@ -7,7 +7,7 @@ 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.CheckboxLabel = exports.LabelsWrapper = exports.CheckboxInput = exports.CheckboxIndicator = exports.CheckboxWrapper = void 0;
|
|
10
|
+
exports.CheckboxLabel = exports.LabelsWrapper = exports.CheckboxInput = exports.CheckboxIndicator = exports.CheckboxIndicatorChecked = exports.CheckboxIndicatorIdle = exports.CheckboxWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var getIndicatorSize = function (size) {
|
|
13
13
|
switch (size) {
|
|
@@ -39,12 +39,18 @@ var getCheckboxCursor = function (props) {
|
|
|
39
39
|
return 'pointer';
|
|
40
40
|
};
|
|
41
41
|
exports.CheckboxWrapper = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n position: relative;\n align-items: ", ";\n justify-content: flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n cursor: ", ";\n"], ["\n flex: 1;\n position: relative;\n align-items: ", ";\n justify-content: flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n cursor: ", ";\n"])), function (props) { return props.$verticalAlign; }, function (props) { return getCheckboxCursor(props); });
|
|
42
|
-
exports.
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
exports.CheckboxIndicatorIdle = styled_components_1.default.span.attrs({
|
|
43
|
+
'aria-hidden': true,
|
|
44
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
45
|
+
exports.CheckboxIndicatorChecked = styled_components_1.default.span.attrs({
|
|
46
|
+
'aria-hidden': true,
|
|
47
|
+
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
48
|
+
exports.CheckboxIndicator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n\n svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n"], ["\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n\n svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n"])), function (props) { return props.$verticalAlign === "flex-start" ? "1px" : 0; }, function (props) { return props.$labelOffset; }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getIndicatorSize(props.$size); }, function (props) { return getCheckboxCursor(props); });
|
|
49
|
+
exports.CheckboxInput = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked:not(:disabled) + ", " {\n ", " {\n display: block;\n }\n\n ", " {\n display: none;\n }\n }\n"], ["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked:not(:disabled) + ", " {\n ", " {\n display: block;\n }\n\n ", " {\n display: none;\n }\n }\n"])), exports.CheckboxIndicator, exports.CheckboxIndicatorChecked, exports.CheckboxIndicatorIdle);
|
|
50
|
+
exports.LabelsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n * {\n ", ";\n }\n"], ["\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n\n * {\n ", ";\n }\n"])), function (props) { return getCheckboxCursor(props); }, function (props) {
|
|
45
51
|
if (props.disabled)
|
|
46
52
|
return 'var(--dark-opacity-25)';
|
|
47
53
|
return props.$valid ? 'var(--dark)' : 'var(--red)';
|
|
48
54
|
}, function (props) { return !props.disabled && !props.$valid && 'color: var(--red)'; });
|
|
49
|
-
exports.CheckboxLabel = styled_components_1.default.label(
|
|
50
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
55
|
+
exports.CheckboxLabel = styled_components_1.default.label(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n margin: 0;\n cursor: inherit;\n font: ", ";\n\n b {\n font-weight: bold;\n color: var(--dark-opacity-50);\n }\n"], ["\n display: block;\n margin: 0;\n cursor: inherit;\n font: ", ";\n\n b {\n font-weight: bold;\n color: var(--dark-opacity-50);\n }\n"])), function (props) { return getLabelFont(props.$textSize); });
|
|
56
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -18,7 +18,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var react_1 = require("@testing-library/react");
|
|
19
19
|
var server_1 = require("react-dom/server");
|
|
20
20
|
var Checkbox_1 = __importDefault(require("./Checkbox"));
|
|
21
|
+
var Checkbox_styled_1 = require("./Checkbox.styled");
|
|
21
22
|
var props_1 = require("./props");
|
|
23
|
+
var getCheckedSvg = function (container) {
|
|
24
|
+
return container.querySelector("".concat(Checkbox_styled_1.CheckboxIndicatorChecked, " svg"));
|
|
25
|
+
};
|
|
22
26
|
var renderCheckbox = function (props) {
|
|
23
27
|
if (props === void 0) { props = {}; }
|
|
24
28
|
return (0, react_1.render)((0, jsx_runtime_1.jsx)(Checkbox_1.default, __assign({}, props_1.CheckboxDefault, { id: "checkbox-test", label: "Se\u00E7enek" }, props)));
|
|
@@ -34,7 +38,7 @@ describe('Checkbox', function () {
|
|
|
34
38
|
});
|
|
35
39
|
it('paints the checked indicator with var(--primary) instead of a resolved hex', function () {
|
|
36
40
|
var container = renderCheckbox({ checked: true, onChange: jest.fn() }).container;
|
|
37
|
-
var checkedSvg = container
|
|
41
|
+
var checkedSvg = getCheckedSvg(container);
|
|
38
42
|
expect(checkedSvg).toHaveAttribute('color', 'var(--primary)');
|
|
39
43
|
});
|
|
40
44
|
it('paints the success variant with var(--green)', function () {
|
|
@@ -43,7 +47,7 @@ describe('Checkbox', function () {
|
|
|
43
47
|
checked: true,
|
|
44
48
|
onChange: jest.fn(),
|
|
45
49
|
}).container;
|
|
46
|
-
var checkedSvg = container
|
|
50
|
+
var checkedSvg = getCheckedSvg(container);
|
|
47
51
|
expect(checkedSvg).toHaveAttribute('color', 'var(--green)');
|
|
48
52
|
});
|
|
49
53
|
it('uses the color prop as an SSR-safe override', function () {
|
|
@@ -52,7 +56,7 @@ describe('Checkbox', function () {
|
|
|
52
56
|
color: '#00aa88',
|
|
53
57
|
onChange: jest.fn(),
|
|
54
58
|
}).container;
|
|
55
|
-
var checkedSvg = container
|
|
59
|
+
var checkedSvg = getCheckedSvg(container);
|
|
56
60
|
expect(checkedSvg).toHaveAttribute('color', '#00aa88');
|
|
57
61
|
});
|
|
58
62
|
it('does not snapshot indicator SVGs into data URIs', function () {
|
|
@@ -1,21 +1,11 @@
|
|
|
1
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
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
7
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
8
|
+
var Checkbox_styled_1 = require("./Checkbox.styled");
|
|
19
9
|
var CheckboxIndicatorIcons = function (_a) {
|
|
20
10
|
var disabled = _a.disabled, _b = _a.valid, valid = _b === void 0 ? true : _b, color = _a.color, variant = _a.variant;
|
|
21
11
|
var checkedColor = color || (variant === "success" ? "var(--green)" : "var(--primary)");
|
|
@@ -25,6 +15,6 @@ var CheckboxIndicatorIcons = function (_a) {
|
|
|
25
15
|
? "CheckboxElementUncheck"
|
|
26
16
|
: "CheckboxElementInvalid";
|
|
27
17
|
var idleColor = disabled || valid ? "currentColor" : "var(--red)";
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
18
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxIndicatorIdle, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: idleName, color: idleColor }) }), (0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxIndicatorChecked, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "CheckboxElementChecked", color: checkedColor }) })] }));
|
|
29
19
|
};
|
|
30
20
|
exports.default = CheckboxIndicatorIcons;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, component, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasSquareFillImage, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, hasSingleLineDescription, hasButton, buttonOnClick, buttonText, }: import("./props").ProductCardVertical) => React.JSX.Element>;
|
|
2
|
+
declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, component, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasSquareFillImage, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, hasSingleLineDescription, hasButton, buttonOnClick, buttonText, buttonDisabled, }: import("./props").ProductCardVertical) => React.JSX.Element>;
|
|
3
3
|
export default _default;
|
|
@@ -26,7 +26,7 @@ var CardLinkComponent = (0, react_1.memo)(function (_a) {
|
|
|
26
26
|
return Component ? (0, jsx_runtime_1.jsx)(Component, __assign({ href: slug }, { children: children })) : (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CardLink, __assign({ href: slug }, { children: children }));
|
|
27
27
|
});
|
|
28
28
|
var ProductCardVertical = function (_a) {
|
|
29
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.component, component = _j === void 0 ? props_1.ProductCardVerticalDefault.component : _j, _k = _a.period, period = _k === void 0 ? props_1.ProductCardVerticalDefault.period : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _l, _m = _a.isResponsive, isResponsive = _m === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardVerticalDefault.image : _o, _p = _a.hasCustomBadge, hasCustomBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _p, _q = _a.customBadge, customBadge = _q === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _q, _r = _a.hasNewImageType, hasNewImageType = _r === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _r, _s = _a.hasSquareFillImage, hasSquareFillImage = _s === void 0 ? props_1.ProductCardVerticalDefault.hasSquareFillImage : _s, _t = _a.hasOutOfStock, hasOutOfStock = _t === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _t, _u = _a.hasBeltBadge, hasBeltBadge = _u === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _u, _v = _a.beltBadgeVariant, beltBadgeVariant = _v === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _v, _w = _a.beltBadgeTitle, beltBadgeTitle = _w === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _w, _x = _a.imageInfoText, imageInfoText = _x === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _x, _y = _a.imageInfoTextVariant, imageInfoTextVariant = _y === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _y, _z = _a.isShowOldPrice, isShowOldPrice = _z === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _z, _0 = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _0 === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _0, _1 = _a.hasImageOffset, hasImageOffset = _1 === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _1, _2 = _a.hasSingleLineDescription, hasSingleLineDescription = _2 === void 0 ? props_1.ProductCardVerticalDefault.hasSingleLineDescription : _2, _3 = _a.hasButton, hasButton = _3 === void 0 ? props_1.ProductCardVerticalDefault.hasButton : _3, _4 = _a.buttonOnClick, buttonOnClick = _4 === void 0 ? props_1.ProductCardVerticalDefault.buttonOnClick : _4, _5 = _a.buttonText, buttonText = _5 === void 0 ? props_1.ProductCardVerticalDefault.buttonText : _5;
|
|
29
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.component, component = _j === void 0 ? props_1.ProductCardVerticalDefault.component : _j, _k = _a.period, period = _k === void 0 ? props_1.ProductCardVerticalDefault.period : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _l, _m = _a.isResponsive, isResponsive = _m === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _m, _o = _a.image, image = _o === void 0 ? props_1.ProductCardVerticalDefault.image : _o, _p = _a.hasCustomBadge, hasCustomBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _p, _q = _a.customBadge, customBadge = _q === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _q, _r = _a.hasNewImageType, hasNewImageType = _r === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _r, _s = _a.hasSquareFillImage, hasSquareFillImage = _s === void 0 ? props_1.ProductCardVerticalDefault.hasSquareFillImage : _s, _t = _a.hasOutOfStock, hasOutOfStock = _t === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _t, _u = _a.hasBeltBadge, hasBeltBadge = _u === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _u, _v = _a.beltBadgeVariant, beltBadgeVariant = _v === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _v, _w = _a.beltBadgeTitle, beltBadgeTitle = _w === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _w, _x = _a.imageInfoText, imageInfoText = _x === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _x, _y = _a.imageInfoTextVariant, imageInfoTextVariant = _y === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _y, _z = _a.isShowOldPrice, isShowOldPrice = _z === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _z, _0 = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _0 === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _0, _1 = _a.hasImageOffset, hasImageOffset = _1 === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _1, _2 = _a.hasSingleLineDescription, hasSingleLineDescription = _2 === void 0 ? props_1.ProductCardVerticalDefault.hasSingleLineDescription : _2, _3 = _a.hasButton, hasButton = _3 === void 0 ? props_1.ProductCardVerticalDefault.hasButton : _3, _4 = _a.buttonOnClick, buttonOnClick = _4 === void 0 ? props_1.ProductCardVerticalDefault.buttonOnClick : _4, _5 = _a.buttonText, buttonText = _5 === void 0 ? props_1.ProductCardVerticalDefault.buttonText : _5, _6 = _a.buttonDisabled, buttonDisabled = _6 === void 0 ? props_1.ProductCardVerticalDefault.buttonDisabled : _6;
|
|
30
30
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
31
31
|
var badgeOffset = isResponsive ? "16px" : "8px";
|
|
32
32
|
var cardProps = {
|
|
@@ -48,6 +48,6 @@ var ProductCardVertical = function (_a) {
|
|
|
48
48
|
buttonOnClick === null || buttonOnClick === void 0 ? void 0 : buttonOnClick(e);
|
|
49
49
|
};
|
|
50
50
|
var cardBody = ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.CardBody, { children: [hasBeltBadge && !hasCustomBadge && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CartBadge, __assign({ "$isResponsive": isResponsive, "$isInset": false }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: badgeOffset, top: badgeOffset, title: beltBadgeTitle }) }))), hasCustomBadge && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CartBadge, __assign({ "$isResponsive": isResponsive, "$isInset": true }, { children: customBadge }))), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ImageSection, __assign({}, cardProps, { children: [image, hasOutOfStock && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OutOfStock, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ImageInfoText, __assign({}, cardProps, { dangerouslySetInnerHTML: { __html: imageInfoText } })))] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ProductCardContent, __assign({}, cardProps, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductTitle, __assign({ "$hasOutOfStock": hasOutOfStock, "$isResponsive": isResponsive }, { children: title })), (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductDescription, __assign({}, cardProps, { children: description })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.PriceLayout, __assign({}, cardProps, { children: [discountRate > 0 && ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.DiscountPill, __assign({ "$isResponsive": isResponsive, "$hasButton": hasButton }, { children: ["%", discountRate] }))), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.PriceStack, { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.OldPrice, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OldPriceAmount, __assign({ "$isResponsive": isResponsive }, { children: oldPrice })), oldPricePeriod && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.OldPricePeriod, __assign({ "$isOldPricePeriodUnderline": isOldPricePeriodUnderline }, { children: "/".concat(oldPricePeriod) })))] })), (0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.NewPrice, { children: [(0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.NewPriceAmount, __assign({ "$isResponsive": isResponsive }, { children: price })), period && (0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.NewPricePeriod, __assign({ "$isResponsive": isResponsive }, { children: "/".concat(period) }))] })] })] }))] }))] }));
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({}, cardProps, { children: [hasSlug ? ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: cardBody }))) : (cardBody), hasButton && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CardButton, __assign({ "$isResponsive": isResponsive }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: handleButtonClick, size: "xsmall", width: "100%", variant: "primary" }, { children: buttonText })) })))] })));
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({}, cardProps, { children: [hasSlug ? ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: cardBody }))) : (cardBody), hasButton && ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.CardButton, __assign({ "$isResponsive": isResponsive }, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: handleButtonClick, size: "xsmall", width: "100%", variant: "primary", disabled: buttonDisabled }, { children: buttonText })) })))] })));
|
|
52
52
|
};
|
|
53
53
|
exports.default = (0, react_1.memo)(ProductCardVertical);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,108 @@
|
|
|
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
50
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
|
+
};
|
|
52
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
54
|
+
var react_1 = require("@testing-library/react");
|
|
55
|
+
var user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
56
|
+
var ProductCardVertical_1 = __importDefault(require("./ProductCardVertical"));
|
|
57
|
+
var props_1 = require("./props");
|
|
58
|
+
var renderCard = function (props) {
|
|
59
|
+
if (props === void 0) { props = {}; }
|
|
60
|
+
return (0, react_1.render)((0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, props_1.ProductCardVerticalDefault, { title: "Apple iPad Air", buttonText: "Kirala" }, props)));
|
|
61
|
+
};
|
|
62
|
+
describe('ProductCardVertical', function () {
|
|
63
|
+
it('renders the product title', function () {
|
|
64
|
+
renderCard();
|
|
65
|
+
expect(react_1.screen.getByText('Apple iPad Air')).toBeInTheDocument();
|
|
66
|
+
});
|
|
67
|
+
it('renders the action button when hasButton is true', function () {
|
|
68
|
+
renderCard({ hasButton: true });
|
|
69
|
+
expect(react_1.screen.getByRole('button', { name: 'Kirala' })).toBeInTheDocument();
|
|
70
|
+
});
|
|
71
|
+
it('calls buttonOnClick when the button is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
72
|
+
var buttonOnClick;
|
|
73
|
+
return __generator(this, function (_a) {
|
|
74
|
+
switch (_a.label) {
|
|
75
|
+
case 0:
|
|
76
|
+
buttonOnClick = jest.fn();
|
|
77
|
+
renderCard({ hasButton: true, buttonOnClick: buttonOnClick });
|
|
78
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Kirala' }))];
|
|
79
|
+
case 1:
|
|
80
|
+
_a.sent();
|
|
81
|
+
expect(buttonOnClick).toHaveBeenCalledTimes(1);
|
|
82
|
+
return [2 /*return*/];
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
}); });
|
|
86
|
+
it('does not call buttonOnClick when the button is disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
87
|
+
var buttonOnClick;
|
|
88
|
+
return __generator(this, function (_a) {
|
|
89
|
+
switch (_a.label) {
|
|
90
|
+
case 0:
|
|
91
|
+
buttonOnClick = jest.fn();
|
|
92
|
+
renderCard({ hasButton: true, buttonDisabled: true, buttonOnClick: buttonOnClick });
|
|
93
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Kirala' }))];
|
|
94
|
+
case 1:
|
|
95
|
+
_a.sent();
|
|
96
|
+
expect(react_1.screen.getByRole('button', { name: 'Kirala' })).toBeDisabled();
|
|
97
|
+
expect(buttonOnClick).not.toHaveBeenCalled();
|
|
98
|
+
return [2 /*return*/];
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
}); });
|
|
102
|
+
it('does not execute script tags in imageInfoText', function () {
|
|
103
|
+
renderCard({
|
|
104
|
+
imageInfoText: '<img src=x onerror="window.__pwned = true"><script>window.__pwned = true</script>',
|
|
105
|
+
});
|
|
106
|
+
expect(window.__pwned).toBeUndefined();
|
|
107
|
+
});
|
|
108
|
+
});
|
|
@@ -33,6 +33,7 @@ export interface ProductCardVertical {
|
|
|
33
33
|
hasButton?: boolean;
|
|
34
34
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement>): void;
|
|
35
35
|
buttonText?: string;
|
|
36
|
+
buttonDisabled?: boolean;
|
|
36
37
|
}
|
|
37
38
|
export interface ProductCardVerticalStyledProps {
|
|
38
39
|
$discountRate?: number;
|
|
@@ -7,7 +7,7 @@ import type { ProductCardVerticalProps } from "../props";
|
|
|
7
7
|
export declare const allProductCardArgs: ProductCardVerticalProps;
|
|
8
8
|
declare const _default: {
|
|
9
9
|
title: string;
|
|
10
|
-
component: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, component, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasSquareFillImage, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, hasSingleLineDescription, hasButton, buttonOnClick, buttonText, }: import("../props").ProductCardVertical) => React.JSX.Element>;
|
|
10
|
+
component: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, component, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasSquareFillImage, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, hasSingleLineDescription, hasButton, buttonOnClick, buttonText, buttonDisabled, }: import("../props").ProductCardVertical) => React.JSX.Element>;
|
|
11
11
|
tags: string[];
|
|
12
12
|
argTypes: {
|
|
13
13
|
title: {
|
|
@@ -104,6 +104,9 @@ declare const _default: {
|
|
|
104
104
|
buttonText: {
|
|
105
105
|
control: string;
|
|
106
106
|
};
|
|
107
|
+
buttonDisabled: {
|
|
108
|
+
control: string;
|
|
109
|
+
};
|
|
107
110
|
buttonOnClick: {
|
|
108
111
|
action: string;
|
|
109
112
|
};
|
|
@@ -143,6 +146,7 @@ export declare const Default: {
|
|
|
143
146
|
hasButton?: boolean;
|
|
144
147
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
145
148
|
buttonText?: string;
|
|
149
|
+
buttonDisabled?: boolean;
|
|
146
150
|
};
|
|
147
151
|
};
|
|
148
152
|
export declare const NoDiscount: {
|
|
@@ -176,6 +180,7 @@ export declare const NoDiscount: {
|
|
|
176
180
|
hasButton?: boolean;
|
|
177
181
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
178
182
|
buttonText?: string;
|
|
183
|
+
buttonDisabled?: boolean;
|
|
179
184
|
};
|
|
180
185
|
};
|
|
181
186
|
export declare const OutOfStock: {
|
|
@@ -209,6 +214,7 @@ export declare const OutOfStock: {
|
|
|
209
214
|
hasButton?: boolean;
|
|
210
215
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
211
216
|
buttonText?: string;
|
|
217
|
+
buttonDisabled?: boolean;
|
|
212
218
|
};
|
|
213
219
|
};
|
|
214
220
|
export declare const WithCustomBadge: {
|
|
@@ -242,6 +248,7 @@ export declare const WithCustomBadge: {
|
|
|
242
248
|
hasButton?: boolean;
|
|
243
249
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
244
250
|
buttonText?: string;
|
|
251
|
+
buttonDisabled?: boolean;
|
|
245
252
|
};
|
|
246
253
|
};
|
|
247
254
|
export declare const ResponsiveWithNewImageType: {
|
|
@@ -275,6 +282,7 @@ export declare const ResponsiveWithNewImageType: {
|
|
|
275
282
|
hasButton?: boolean;
|
|
276
283
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
277
284
|
buttonText?: string;
|
|
285
|
+
buttonDisabled?: boolean;
|
|
278
286
|
};
|
|
279
287
|
};
|
|
280
288
|
export declare const DarkImageInfoText: {
|
|
@@ -308,6 +316,7 @@ export declare const DarkImageInfoText: {
|
|
|
308
316
|
hasButton?: boolean;
|
|
309
317
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
310
318
|
buttonText?: string;
|
|
319
|
+
buttonDisabled?: boolean;
|
|
311
320
|
};
|
|
312
321
|
};
|
|
313
322
|
export declare const WithoutBeltBadge: {
|
|
@@ -341,6 +350,7 @@ export declare const WithoutBeltBadge: {
|
|
|
341
350
|
hasButton?: boolean;
|
|
342
351
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
343
352
|
buttonText?: string;
|
|
353
|
+
buttonDisabled?: boolean;
|
|
344
354
|
};
|
|
345
355
|
};
|
|
346
356
|
export declare const WithoutImageInfoText: {
|
|
@@ -374,6 +384,7 @@ export declare const WithoutImageInfoText: {
|
|
|
374
384
|
hasButton?: boolean;
|
|
375
385
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
376
386
|
buttonText?: string;
|
|
387
|
+
buttonDisabled?: boolean;
|
|
377
388
|
};
|
|
378
389
|
};
|
|
379
390
|
export declare const Minimal: {
|
|
@@ -407,6 +418,7 @@ export declare const Minimal: {
|
|
|
407
418
|
hasButton?: boolean;
|
|
408
419
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
409
420
|
buttonText?: string;
|
|
421
|
+
buttonDisabled?: boolean;
|
|
410
422
|
};
|
|
411
423
|
};
|
|
412
424
|
export declare const WithoutImageOffset: {
|
|
@@ -440,6 +452,7 @@ export declare const WithoutImageOffset: {
|
|
|
440
452
|
hasButton?: boolean;
|
|
441
453
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
442
454
|
buttonText?: string;
|
|
455
|
+
buttonDisabled?: boolean;
|
|
443
456
|
};
|
|
444
457
|
};
|
|
445
458
|
export declare const SingleLineDescription: {
|
|
@@ -473,6 +486,7 @@ export declare const SingleLineDescription: {
|
|
|
473
486
|
hasButton?: boolean;
|
|
474
487
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
475
488
|
buttonText?: string;
|
|
489
|
+
buttonDisabled?: boolean;
|
|
476
490
|
};
|
|
477
491
|
};
|
|
478
492
|
export declare const SquareFillImage: {
|
|
@@ -506,6 +520,7 @@ export declare const SquareFillImage: {
|
|
|
506
520
|
hasButton?: boolean;
|
|
507
521
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
508
522
|
buttonText?: string;
|
|
523
|
+
buttonDisabled?: boolean;
|
|
509
524
|
};
|
|
510
525
|
};
|
|
511
526
|
export declare const WithoutOldPrice: {
|
|
@@ -539,6 +554,7 @@ export declare const WithoutOldPrice: {
|
|
|
539
554
|
hasButton?: boolean;
|
|
540
555
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
541
556
|
buttonText?: string;
|
|
557
|
+
buttonDisabled?: boolean;
|
|
542
558
|
};
|
|
543
559
|
};
|
|
544
560
|
export declare const WithoutOldPriceUnderline: {
|
|
@@ -572,6 +588,7 @@ export declare const WithoutOldPriceUnderline: {
|
|
|
572
588
|
hasButton?: boolean;
|
|
573
589
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
574
590
|
buttonText?: string;
|
|
591
|
+
buttonDisabled?: boolean;
|
|
575
592
|
};
|
|
576
593
|
};
|
|
577
594
|
export declare const WithButton: {
|
|
@@ -609,6 +626,45 @@ export declare const WithButton: {
|
|
|
609
626
|
hasImageOffset?: boolean;
|
|
610
627
|
hasSingleLineDescription?: boolean;
|
|
611
628
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
629
|
+
buttonDisabled?: boolean;
|
|
630
|
+
};
|
|
631
|
+
};
|
|
632
|
+
export declare const WithDisabledButton: {
|
|
633
|
+
name: string;
|
|
634
|
+
args: {
|
|
635
|
+
hasButton: boolean;
|
|
636
|
+
buttonDisabled: boolean;
|
|
637
|
+
buttonText: string;
|
|
638
|
+
component: ({ href, children, }: {
|
|
639
|
+
href?: string;
|
|
640
|
+
children: React.ReactNode;
|
|
641
|
+
}) => React.JSX.Element;
|
|
642
|
+
title?: string;
|
|
643
|
+
description?: string;
|
|
644
|
+
hasDiscount?: boolean;
|
|
645
|
+
hasCustomBadge?: boolean;
|
|
646
|
+
price?: string;
|
|
647
|
+
oldPrice?: string;
|
|
648
|
+
oldPricePeriod?: string;
|
|
649
|
+
slug?: string;
|
|
650
|
+
period?: string;
|
|
651
|
+
discountRate?: number;
|
|
652
|
+
isResponsive?: boolean;
|
|
653
|
+
image?: React.ReactNode;
|
|
654
|
+
customBadge?: React.ReactNode;
|
|
655
|
+
hasNewImageType?: boolean;
|
|
656
|
+
hasSquareFillImage?: boolean;
|
|
657
|
+
hasOutOfStock?: boolean;
|
|
658
|
+
hasBeltBadge?: boolean;
|
|
659
|
+
isShowOldPrice?: boolean;
|
|
660
|
+
beltBadgeVariant?: string;
|
|
661
|
+
beltBadgeTitle?: string;
|
|
662
|
+
imageInfoText?: string;
|
|
663
|
+
imageInfoTextVariant?: string;
|
|
664
|
+
isOldPricePeriodUnderline?: boolean;
|
|
665
|
+
hasImageOffset?: boolean;
|
|
666
|
+
hasSingleLineDescription?: boolean;
|
|
667
|
+
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
612
668
|
};
|
|
613
669
|
};
|
|
614
670
|
export declare const ResponsiveWithButton: {
|
|
@@ -646,6 +702,7 @@ export declare const ResponsiveWithButton: {
|
|
|
646
702
|
hasImageOffset?: boolean;
|
|
647
703
|
hasSingleLineDescription?: boolean;
|
|
648
704
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
705
|
+
buttonDisabled?: boolean;
|
|
649
706
|
};
|
|
650
707
|
};
|
|
651
708
|
export declare const WithoutLink: {
|
|
@@ -679,6 +736,7 @@ export declare const WithoutLink: {
|
|
|
679
736
|
hasButton?: boolean;
|
|
680
737
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
681
738
|
buttonText?: string;
|
|
739
|
+
buttonDisabled?: boolean;
|
|
682
740
|
};
|
|
683
741
|
};
|
|
684
742
|
export declare const Empty: {
|
|
@@ -712,6 +770,7 @@ export declare const Empty: {
|
|
|
712
770
|
hasSingleLineDescription?: boolean;
|
|
713
771
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
714
772
|
buttonText?: string;
|
|
773
|
+
buttonDisabled?: boolean;
|
|
715
774
|
};
|
|
716
775
|
};
|
|
717
776
|
export declare const Complete: {
|
|
@@ -748,6 +807,7 @@ export declare const Complete: {
|
|
|
748
807
|
isOldPricePeriodUnderline?: boolean;
|
|
749
808
|
hasImageOffset?: boolean;
|
|
750
809
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
810
|
+
buttonDisabled?: boolean;
|
|
751
811
|
};
|
|
752
812
|
};
|
|
753
813
|
export declare const Interactive: {
|
|
@@ -785,5 +845,6 @@ export declare const Interactive: {
|
|
|
785
845
|
hasImageOffset?: boolean;
|
|
786
846
|
hasSingleLineDescription?: boolean;
|
|
787
847
|
buttonOnClick?(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
848
|
+
buttonDisabled?: boolean;
|
|
788
849
|
};
|
|
789
850
|
};
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Interactive = exports.Complete = exports.Empty = exports.WithoutLink = exports.ResponsiveWithButton = exports.WithButton = exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.SquareFillImage = exports.SingleLineDescription = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = exports.allProductCardArgs = void 0;
|
|
17
|
+
exports.Interactive = exports.Complete = exports.Empty = exports.WithoutLink = exports.ResponsiveWithButton = exports.WithDisabledButton = exports.WithButton = exports.WithoutOldPriceUnderline = exports.WithoutOldPrice = exports.SquareFillImage = exports.SingleLineDescription = exports.WithoutImageOffset = exports.Minimal = exports.WithoutImageInfoText = exports.WithoutBeltBadge = exports.DarkImageInfoText = exports.ResponsiveWithNewImageType = exports.WithCustomBadge = exports.OutOfStock = exports.NoDiscount = exports.Default = exports.allProductCardArgs = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var react_1 = __importDefault(require("react"));
|
|
20
20
|
var ProductCardVertical_1 = __importDefault(require("../ProductCardVertical"));
|
|
@@ -59,6 +59,7 @@ exports.allProductCardArgs = {
|
|
|
59
59
|
hasImageOffset: true,
|
|
60
60
|
hasButton: false,
|
|
61
61
|
buttonText: "Kirala",
|
|
62
|
+
buttonDisabled: false,
|
|
62
63
|
};
|
|
63
64
|
exports.default = {
|
|
64
65
|
title: "Components/ProductCard/ProductCard Vertical",
|
|
@@ -114,6 +115,7 @@ exports.default = {
|
|
|
114
115
|
},
|
|
115
116
|
hasButton: { control: "boolean" },
|
|
116
117
|
buttonText: { control: "text" },
|
|
118
|
+
buttonDisabled: { control: "boolean" },
|
|
117
119
|
buttonOnClick: { action: "buttonOnClick" },
|
|
118
120
|
},
|
|
119
121
|
render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "240px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardVertical_1.default, __assign({}, args)) }))); },
|
|
@@ -165,6 +167,10 @@ exports.WithButton = {
|
|
|
165
167
|
name: "Link + buton (ayrı aksiyonlar)",
|
|
166
168
|
args: __assign(__assign({}, exports.allProductCardArgs), { hasButton: true, buttonText: "Hemen Kirala", component: StoryLink }),
|
|
167
169
|
};
|
|
170
|
+
exports.WithDisabledButton = {
|
|
171
|
+
name: "Disabled buton",
|
|
172
|
+
args: __assign(__assign({}, exports.allProductCardArgs), { hasButton: true, buttonDisabled: true, buttonText: "Hemen Kirala", component: StoryLink }),
|
|
173
|
+
};
|
|
168
174
|
exports.ResponsiveWithButton = {
|
|
169
175
|
name: "Responsive + buton",
|
|
170
176
|
args: __assign(__assign({}, exports.allProductCardArgs), { isResponsive: true, hasButton: true, buttonText: "Hemen Kirala", component: StoryLink }),
|
|
@@ -55,6 +55,10 @@ var react_1 = require("@testing-library/react");
|
|
|
55
55
|
var user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
56
56
|
var server_1 = require("react-dom/server");
|
|
57
57
|
var RadioButton_1 = __importDefault(require("./RadioButton"));
|
|
58
|
+
var RadioIndicator_styled_1 = require("./RadioIndicator.styled");
|
|
59
|
+
var getCheckedSvg = function (container) {
|
|
60
|
+
return container.querySelector("".concat(RadioIndicator_styled_1.RadioIndicatorChecked, " svg"));
|
|
61
|
+
};
|
|
58
62
|
var renderRadio = function (props) {
|
|
59
63
|
if (props === void 0) { props = {}; }
|
|
60
64
|
return (0, react_1.render)((0, jsx_runtime_1.jsx)(RadioButton_1.default, __assign({ id: "radio-test", name: "group", label: "Se\u00E7enek" }, props)));
|
|
@@ -66,12 +70,12 @@ describe('RadioButton', function () {
|
|
|
66
70
|
});
|
|
67
71
|
it('paints the checked indicator with var(--primary) instead of a resolved hex', function () {
|
|
68
72
|
var container = renderRadio({ checked: true, onChange: jest.fn() }).container;
|
|
69
|
-
var checkedSvg = container
|
|
73
|
+
var checkedSvg = getCheckedSvg(container);
|
|
70
74
|
expect(checkedSvg).toHaveAttribute('color', 'var(--primary)');
|
|
71
75
|
});
|
|
72
76
|
it('uses the color prop as an SSR-safe override', function () {
|
|
73
77
|
var container = renderRadio({ checked: true, color: '#00aa88', onChange: jest.fn() }).container;
|
|
74
|
-
var checkedSvg = container
|
|
78
|
+
var checkedSvg = getCheckedSvg(container);
|
|
75
79
|
expect(checkedSvg).toHaveAttribute('color', '#00aa88');
|
|
76
80
|
});
|
|
77
81
|
it('does not snapshot indicator SVGs into data URIs', function () {
|
|
@@ -1,21 +1,11 @@
|
|
|
1
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
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
7
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
8
|
+
var RadioIndicator_styled_1 = require("./RadioIndicator.styled");
|
|
19
9
|
var RadioIndicatorIcons = function (_a) {
|
|
20
10
|
var disabled = _a.disabled, _b = _a.valid, valid = _b === void 0 ? true : _b, hasError = _a.hasError, color = _a.color, checkedGlyphWhenDisabled = _a.checkedGlyphWhenDisabled;
|
|
21
11
|
var checkedColor = color || "var(--primary)";
|
|
@@ -31,6 +21,6 @@ var RadioIndicatorIcons = function (_a) {
|
|
|
31
21
|
: hasError || !valid
|
|
32
22
|
? "var(--red)"
|
|
33
23
|
: "currentColor";
|
|
34
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RadioIndicator_styled_1.RadioIndicatorIdle, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: idleName, color: idleColor }) }), (0, jsx_runtime_1.jsx)(RadioIndicator_styled_1.RadioIndicatorChecked, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementChecked", color: checkedColor }) })] }));
|
|
35
25
|
};
|
|
36
26
|
exports.default = RadioIndicatorIcons;
|