krl-alfred 2.20.3 → 2.20.5
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/Checkbox/Checkbox.js +12 -1
- package/dist/components/Checkbox/Checkbox.styled.d.ts +5 -1
- package/dist/components/Checkbox/Checkbox.styled.js +32 -28
- package/dist/components/DescriptionCard/DescriptionCard.d.ts +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +19 -2
- package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts +25 -1
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +50 -21
- package/dist/components/DescriptionCard/props.d.ts +27 -0
- package/dist/components/DescriptionCard/props.js +8 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts +7 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +45 -2
- package/dist/components/Icon/iconList/Subcategory.d.ts +3 -0
- package/dist/components/Icon/iconList/Subcategory.js +40 -0
- package/dist/components/Icon/iconList/TickMd.d.ts +3 -0
- package/dist/components/Icon/iconList/TickMd.js +40 -0
- package/dist/components/Icon/iconList/index.d.ts +9 -1
- package/dist/components/Icon/iconList/index.js +15 -3
- package/dist/components/ProductCardVertical/ProductCardVertical.d.ts +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.js +4 -2
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +18 -16
- package/dist/components/ProductCardVertical/props.d.ts +4 -0
- package/dist/components/ProductCardVertical/props.js +2 -0
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts +101 -1
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +15 -1
- package/package.json +1 -1
|
@@ -19,6 +19,17 @@ var getRootCssVariable_1 = require("../../utils/getRootCssVariable");
|
|
|
19
19
|
var Checkbox = function (_a) {
|
|
20
20
|
var _b = _a.value, value = _b === void 0 ? props_1.CheckboxDefault.value : _b, _c = _a.checked, checked = _c === void 0 ? props_1.CheckboxDefault.checked : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.CheckboxDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.CheckboxDefault.name : _e, _f = _a.id, id = _f === void 0 ? props_1.CheckboxDefault.id : _f, _g = _a.label, label = _g === void 0 ? props_1.CheckboxDefault.label : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.CheckboxDefault.disabled : _h, _j = _a.size, size = _j === void 0 ? props_1.CheckboxDefault.size : _j, _k = _a.valid, valid = _k === void 0 ? props_1.CheckboxDefault.valid : _k, _l = _a.labelOffset, labelOffset = _l === void 0 ? props_1.CheckboxDefault.labelOffset : _l, _m = _a.textSize, textSize = _m === void 0 ? props_1.CheckboxDefault.textSize : _m, _o = _a.verticalAlign, verticalAlign = _o === void 0 ? props_1.CheckboxDefault.verticalAlign : _o, _p = _a.required, required = _p === void 0 ? props_1.CheckboxDefault.required : _p, _q = _a.readOnly, readOnly = _q === void 0 ? props_1.CheckboxDefault.readOnly : _q;
|
|
21
21
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
22
|
-
|
|
22
|
+
var styledProps = {
|
|
23
|
+
disabled: disabled,
|
|
24
|
+
checked: checked,
|
|
25
|
+
$size: size,
|
|
26
|
+
$valid: valid,
|
|
27
|
+
$labelOffset: labelOffset,
|
|
28
|
+
$color: (0, getRootCssVariable_1.getPrimaryColor)(),
|
|
29
|
+
$textSize: textSize,
|
|
30
|
+
$verticalAlign: verticalAlign,
|
|
31
|
+
$required: required,
|
|
32
|
+
};
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxWrapper, __assign({ htmlFor: id }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxInput, __assign({}, styledProps, { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, readOnly: readOnly })), (0, jsx_runtime_1.jsx)(Checkbox_styled_1.CheckboxIndicator, __assign({}, styledProps)), label && ((0, jsx_runtime_1.jsx)(Checkbox_styled_1.LabelsWrapper, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxLabel, __assign({}, styledProps, { htmlFor: id }, { children: [label, " ", !required && (0, jsx_runtime_1.jsxs)("b", { children: ["(", t("OPTIONAL"), ")"] })] })) })))] })));
|
|
23
34
|
};
|
|
24
35
|
exports.default = Checkbox;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CheckboxStyledProps } from "./props";
|
|
3
|
-
export declare const
|
|
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 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
|
+
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
|
+
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
|
+
export declare const CheckboxLabel: 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;
|
|
@@ -7,45 +7,49 @@ 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.
|
|
10
|
+
exports.CheckboxLabel = exports.LabelsWrapper = exports.CheckboxInput = exports.CheckboxIndicator = exports.CheckboxWrapper = void 0;
|
|
11
11
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
|
-
|
|
16
|
-
switch (
|
|
17
|
-
case 'small':
|
|
18
|
-
return "16px";
|
|
19
|
-
case 'medium':
|
|
20
|
-
return "24px";
|
|
21
|
-
case 'large':
|
|
22
|
-
return "24px";
|
|
23
|
-
default:
|
|
24
|
-
return "16px";
|
|
25
|
-
}
|
|
26
|
-
}, function (props) {
|
|
27
|
-
switch (props.$size) {
|
|
28
|
-
case 'small':
|
|
29
|
-
return "16px";
|
|
15
|
+
var getIndicatorSize = function (size) {
|
|
16
|
+
switch (size) {
|
|
30
17
|
case 'medium':
|
|
31
|
-
return "24px";
|
|
32
18
|
case 'large':
|
|
33
|
-
return
|
|
19
|
+
return '24px';
|
|
34
20
|
default:
|
|
35
|
-
return
|
|
21
|
+
return '16px';
|
|
36
22
|
}
|
|
37
|
-
}
|
|
38
|
-
|
|
23
|
+
};
|
|
24
|
+
var getLabelFont = function (textSize) {
|
|
25
|
+
switch (textSize) {
|
|
39
26
|
case 'small':
|
|
40
|
-
return
|
|
27
|
+
return 'var(--caption-semi-bold-12-15)';
|
|
41
28
|
case 'medium':
|
|
42
|
-
return
|
|
29
|
+
return 'var(--body-medium-14-17)';
|
|
43
30
|
case 'large':
|
|
44
|
-
return
|
|
31
|
+
return 'var(--body-semi-bold-13-16)';
|
|
45
32
|
case 'xlarge':
|
|
46
|
-
return
|
|
33
|
+
return 'var(--body-semi-bold-14-17)';
|
|
47
34
|
default:
|
|
48
|
-
return
|
|
35
|
+
return 'var(--body-semi-bold-14-17)';
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
var getUncheckedBackground = function (props) {
|
|
39
|
+
if (props.disabled) {
|
|
40
|
+
return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" }));
|
|
49
41
|
}
|
|
50
|
-
|
|
51
|
-
|
|
42
|
+
if (props.$valid) {
|
|
43
|
+
return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color, name: "CheckboxElementUncheck" }));
|
|
44
|
+
}
|
|
45
|
+
return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }));
|
|
46
|
+
};
|
|
47
|
+
var getCheckedBackground = function (props) {
|
|
48
|
+
return (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: props.$color, name: "CheckboxElementChecked" }));
|
|
49
|
+
};
|
|
50
|
+
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"], ["\n flex: 1;\n position: relative;\n align-items: ", ";\n justify-content: flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n"])), function (props) { return props.$verticalAlign; });
|
|
51
|
+
exports.CheckboxIndicator = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n"], ["\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n flex-shrink: 0;\n margin: ", " ", " 0 0;\n width: ", ";\n height: ", ";\n cursor: ", ";\n"])), function (props) { return getUncheckedBackground(props); }, 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 props.disabled ? 'not-allowed' : 'pointer'; });
|
|
52
|
+
exports.CheckboxInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked + ", " {\n background-image: url('", "');\n }\n"], ["\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked + ", " {\n background-image: url('", "');\n }\n"])), exports.CheckboxIndicator, function (props) { return getCheckedBackground(props); });
|
|
53
|
+
exports.LabelsWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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 props.disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.$valid ? 'var(--dark)' : 'var(--red)'; }, function (props) { return !props.$valid && 'color: var(--red)'; });
|
|
54
|
+
exports.CheckboxLabel = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __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); });
|
|
55
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DescriptionCardProps } from "./props";
|
|
3
|
-
declare const DescriptionCard: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, headerButtonAction, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
|
|
3
|
+
declare const DescriptionCard: ({ title, titleSize, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, middleTitle, subcategoryList, hasCategoryPadding, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: DescriptionCardProps) => import("react").JSX.Element;
|
|
4
4
|
export default DescriptionCard;
|
|
@@ -21,9 +21,26 @@ var Badges_1 = __importDefault(require("../Badges"));
|
|
|
21
21
|
var OptionMenu_1 = __importDefault(require("../OptionMenu"));
|
|
22
22
|
var AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
23
23
|
var Button_1 = __importDefault(require("./../Button"));
|
|
24
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
25
|
+
var SubcategoryRow = function (_a) {
|
|
26
|
+
var _b, _c, _d, _e, _f;
|
|
27
|
+
var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryPadding = _a.hasCategoryPadding;
|
|
28
|
+
var hasButton = (_b = item.hasButton) !== null && _b !== void 0 ? _b : true;
|
|
29
|
+
var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
|
|
30
|
+
var DropdownComponent = hasCategoryPadding ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
31
|
+
var isClickable = !!item.onClick;
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$isClickable": isClickable, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryPadding || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryPadding": hasCategoryPadding, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
|
|
33
|
+
};
|
|
24
34
|
var DescriptionCard = function (_a) {
|
|
25
|
-
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.
|
|
26
|
-
|
|
35
|
+
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerButtonText, headerButtonText = _d === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _d, _e = _a.hasHeaderDropdown, hasHeaderDropdown = _e === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _e, _f = _a.hasHeaderBackButton, hasHeaderBackButton = _f === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _f, _g = _a.list, list = _g === void 0 ? props_1.DescriptionCardDefault.list : _g, _h = _a.hasBadge, hasBadge = _h === void 0 ? props_1.DescriptionCardDefault.hasBadge : _h, _j = _a.badgeText, badgeText = _j === void 0 ? props_1.DescriptionCardDefault.badgeText : _j, _k = _a.hasHeader, hasHeader = _k === void 0 ? props_1.DescriptionCardDefault.hasHeader : _k, _l = _a.hasHeaderBackground, hasHeaderBackground = _l === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _l, _m = _a.hasHeaderBorder, hasHeaderBorder = _m === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _m, _o = _a.hasRounded, hasRounded = _o === void 0 ? props_1.DescriptionCardDefault.hasRounded : _o, _p = _a.hasBorder, hasBorder = _p === void 0 ? props_1.DescriptionCardDefault.hasBorder : _p, _q = _a.headerImage, headerImage = _q === void 0 ? props_1.DescriptionCardDefault.headerImage : _q, _r = _a.headerRightContent, headerRightContent = _r === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _r, _s = _a.dropdownList, dropdownList = _s === void 0 ? props_1.DescriptionCardDefault.dropdownList : _s, _t = _a.dropdownWidth, dropdownWidth = _t === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _t, _u = _a.accordionList, accordionList = _u === void 0 ? props_1.DescriptionCardDefault.accordionList : _u, _v = _a.boxSize, boxSize = _v === void 0 ? props_1.DescriptionCardDefault.boxSize : _v, _w = _a.hasHeaderButton, hasHeaderButton = _w === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _w, _x = _a.headerButtonWidth, headerButtonWidth = _x === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _x, _y = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _y === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _y, _z = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _z === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _z, _0 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _0 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _0, _1 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _1 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _1, _2 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _2 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _2, _3 = _a.content, content = _3 === void 0 ? props_1.DescriptionCardDefault.content : _3, _4 = _a.middleTitle, middleTitle = _4 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _4, _5 = _a.subcategoryList, subcategoryList = _5 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _5, _6 = _a.hasCategoryPadding, hasCategoryPadding = _6 === void 0 ? props_1.DescriptionCardDefault.hasCategoryPadding : _6, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, _7 = _a.customColumnSpan, customColumnSpan = _7 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _7;
|
|
36
|
+
var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
|
|
37
|
+
var HeaderDropdownComponent = hasCategoryPadding ? DescriptionCard_styled_1.CategoryDropdownWrapper : DescriptionCard_styled_1.DropdownWrapper;
|
|
38
|
+
var hasHeaderRightContent = !!headerRightContent;
|
|
39
|
+
var isHeaderClickable = !!onHeaderClick;
|
|
40
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasHeaderRightContent": hasHeaderRightContent, "$hasMiddleTitle": !!middleTitle || hasCategoryPadding, "$headerImage": headerImage, "$hasHeaderBackground": hasHeaderBackground, "$hasHeaderBorder": hasHeaderBorder }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderLeftStyled, { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), hasHeaderBackButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderBackButtonStyled, __assign({ type: "button", onClick: function (e) {
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
onHeaderBack === null || onHeaderBack === void 0 ? void 0 : onHeaderBack();
|
|
43
|
+
}, "aria-label": "Geri" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeft", width: "24", height: "24" }) }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderTitleWrapperStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, __assign({ "$titleSize": titleSize }, { children: title })), hasBadge && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) }))] }))] }), (middleTitle || hasCategoryPadding) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderMiddleTitleStyled, __assign({ "$isClickable": isHeaderClickable, onClick: onHeaderClick }, { children: middleTitle }))), (0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.HeaderRightStyled, __assign({ "$hasCategoryPadding": hasCategoryPadding, "$hasHeaderRightContent": hasHeaderRightContent, onClick: function (e) { return e.stopPropagation(); } }, { children: [headerRightContent && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderRightContentStyled, { children: headerRightContent })), hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderActionWrapperStyled, { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: headerPrimaryButtonSize, variant: "primary", icon: headerPrimaryButtonIcon }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(HeaderDropdownComponent, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: headerButtonWidth, onClick: headerButtonAction, size: "xsmall", variant: "inverted", icon: hasHeaderDropdown ? "ArrowSmallDown" : null }, { children: headerButtonText })), hasHeaderDropdown && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: dropdownList, rowLength: 20, gridItemWidth: dropdownWidth }) }))] }))] }))] }))), content && (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ContentWrapper, { children: content }), (hasCategoryPadding || hasSubcategories) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.CategoryContentWrapper, { children: hasSubcategories && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryListWrapper, __assign({ "$hasCategoryPadding": hasCategoryPadding }, { children: subcategoryList.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(SubcategoryRow, { item: item, defaultButtonText: headerButtonText, defaultButtonWidth: headerButtonWidth, hasCategoryPadding: hasCategoryPadding }, key)); }) }))) })), list.length > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem, key) {
|
|
27
44
|
var _a;
|
|
28
45
|
var span = (_a = customColumnSpan[key]) !== null && _a !== void 0 ? _a : 1;
|
|
29
46
|
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.ListItemStyled, __assign({ "$columnSpan": span }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayTitleStyled, { children: listItem.title }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DisplayValueStyled, { children: listItem.display || "-" })] }), key));
|
|
@@ -1,10 +1,27 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { AccordionListStyledProps, DescriptionCardStyledProps } from "./props";
|
|
3
|
+
export declare const categoryRowGridColumns = "minmax(0, 1fr) auto minmax(0, 1fr)";
|
|
4
|
+
export declare const CategoryContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
5
|
+
export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
6
|
+
export declare const CategoryDropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>, "as" | "forwardedAs"> & {
|
|
7
|
+
as?: import("styled-components").WebTarget;
|
|
8
|
+
forwardedAs?: import("styled-components").WebTarget;
|
|
9
|
+
}, "ref"> & {
|
|
10
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
11
|
+
}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>, "as" | "forwardedAs"> & {
|
|
12
|
+
as?: import("styled-components").WebTarget;
|
|
13
|
+
forwardedAs?: import("styled-components").WebTarget;
|
|
14
|
+
}, "ref"> & {
|
|
15
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
16
|
+
}, never>>> & string;
|
|
3
17
|
export declare const DescriptionCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
4
18
|
export declare const DescriptionCardHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
5
19
|
export declare const HeaderLeftStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
20
|
+
export declare const HeaderBackButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
6
21
|
export declare const HeaderRightStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
7
22
|
export declare const HeaderActionWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
23
|
+
export declare const HeaderRightContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
24
|
+
export declare const HeaderTitleWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
8
25
|
export declare const HeaderTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
9
26
|
export declare const HeaderImageWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
10
27
|
export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
@@ -17,9 +34,16 @@ export declare const ListItemStyled: import("styled-components/dist/types").ISty
|
|
|
17
34
|
}, never>>> & string;
|
|
18
35
|
export declare const DisplayTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
19
36
|
export declare const DisplayValueStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
20
|
-
export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
21
37
|
export declare const SubMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
22
38
|
export declare const AccordionListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never>>> & string;
|
|
23
39
|
export declare const AccordionItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never>>> & string;
|
|
24
40
|
export declare const AccordionItemHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never>>> & string;
|
|
41
|
+
export declare const HeaderMiddleTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
42
|
+
export declare const SubcategoryListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
43
|
+
export declare const SubcategoryRowStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
44
|
+
export declare const SubcategoryNameWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
45
|
+
export declare const SubcategoryIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
46
|
+
export declare const SubcategoryNameStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
47
|
+
export declare const RowMiddleTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
48
|
+
export declare const SubcategoryActionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
|
|
25
49
|
export declare const AccordionItemBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof AccordionListStyledProps> & AccordionListStyledProps, never>>> & string;
|
|
@@ -7,25 +7,54 @@ 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.AccordionItemBody = exports.
|
|
10
|
+
exports.AccordionItemBody = exports.SubcategoryActionWrapper = exports.RowMiddleTitleStyled = exports.SubcategoryNameStyled = exports.SubcategoryIconWrapper = exports.SubcategoryNameWrapper = exports.SubcategoryRowStyled = exports.SubcategoryListWrapper = exports.HeaderMiddleTitleStyled = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DisplayValueStyled = exports.DisplayTitleStyled = exports.ListItemStyled = exports.ListStyled = exports.ContentWrapper = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.HeaderTitleWrapperStyled = exports.HeaderRightContentStyled = exports.HeaderActionWrapperStyled = exports.HeaderRightStyled = exports.HeaderBackButtonStyled = exports.HeaderLeftStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = exports.CategoryDropdownWrapper = exports.DropdownWrapper = exports.CategoryContentWrapper = exports.categoryRowGridColumns = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.
|
|
13
|
-
exports.
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
exports.
|
|
17
|
-
exports.
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
exports.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
12
|
+
exports.categoryRowGridColumns = 'minmax(0, 1fr) auto minmax(0, 1fr)';
|
|
13
|
+
exports.CategoryContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0;\n"], ["\n display: block;\n padding: 0;\n"])));
|
|
14
|
+
exports.DropdownWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n display: block;\n position: relative;\n\n &:hover{\n > div{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n button{\n svg{\n transform: rotate(180deg);\n }\n }\n }\n"])));
|
|
15
|
+
exports.CategoryDropdownWrapper = (0, styled_components_1.default)(exports.DropdownWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"], ["\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n"])));
|
|
16
|
+
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n ", "\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"], ["\n display: block;\n position: relative;\n border-radius: ", ";\n ", "\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n border: ", ";\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n z-index: 2;\n }\n"])), function (props) { return props.$hasRounded ? "0.5rem" : "0"; }, function (props) { return props.$hasCategoryPadding && "\n padding: 0 1.5rem 0;\n\n &:has(".concat(exports.CategoryContentWrapper, ":not(:empty)) {\n padding-bottom: 1.5rem;\n }\n "); }, function (props) { return props.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
17
|
+
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: ", ";\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-bottom: ", ";\n ", "\n ", "\n"], ["\n padding: ", ";\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n background-color: ", ";\n border-bottom: ", ";\n ", "\n ", "\n"])), function (props) {
|
|
18
|
+
if (props.$hasCategoryPadding) {
|
|
19
|
+
return props.$headerImage ? "1rem 0" : "1.5rem 0";
|
|
20
|
+
}
|
|
21
|
+
return props.$headerImage ? "1rem 1.5rem" : "1.5rem";
|
|
22
|
+
}, function (props) {
|
|
23
|
+
if (props.$hasCategoryPadding)
|
|
24
|
+
return exports.categoryRowGridColumns;
|
|
25
|
+
if (props.$hasHeaderRightContent && !props.$hasMiddleTitle)
|
|
26
|
+
return 'minmax(0, 1fr) auto';
|
|
27
|
+
if (props.$hasMiddleTitle)
|
|
28
|
+
return '1fr auto auto';
|
|
29
|
+
return '1fr auto';
|
|
30
|
+
}, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return !props.$hasHeaderBorder && "\n padding-bottom: 1rem;\n "; }, function (props) { return props.$hasCategoryPadding && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
|
|
31
|
+
exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n"])));
|
|
32
|
+
exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin: 0 1rem 0 0;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n color: var(--primary);\n"])));
|
|
33
|
+
exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n > div + div {\n margin-left: 1rem;\n }\n"])), function (props) { return props.$hasCategoryPadding || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; });
|
|
34
|
+
exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
35
|
+
exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n min-width: 0;\n"], ["\n display: block;\n min-width: 0;\n"])));
|
|
36
|
+
exports.HeaderTitleWrapperStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-width: 0;\n cursor: ", ";\n"], ["\n display: flex;\n align-items: center;\n min-width: 0;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
37
|
+
exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font: ", ";\n display: block;\n"], ["\n font: ", ";\n display: block;\n"])), function (props) { return props.$titleSize === 'lg'
|
|
38
|
+
? 'var(--headline-semi-bold-20-24)'
|
|
39
|
+
: 'var(--headline-semi-bold-18-22)'; });
|
|
40
|
+
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"], ["\n display: block;\n border: 1px solid var(--dark-opacity-5);\n width: 64px;\n height: 64px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin-right: 1.5rem;\n background-color: white;\n *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
41
|
+
exports.BadgeWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
|
|
42
|
+
exports.ContentWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n padding: 0 1.5rem 1.5rem 1.5rem;\n"], ["\n display: block;\n padding: 0 1.5rem 1.5rem 1.5rem;\n"])));
|
|
43
|
+
exports.ListStyled = styled_components_1.default.ul(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px 0px 0 0px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n"], ["\n display: grid;\n grid-template-columns: repeat(", ",1fr);\n padding: 0;\n margin: 0;\n position: relative;\n overflow: hidden;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n &:before{\n content: \"\";\n position: absolute;\n inset: -1px 0px 0 0px;\n border: 1px solid var(--dark-opacity-10);\n border-radius: inherit;\n user-select: none;\n pointer-events: none;\n }\n"])), function (props) { return props.$boxSize; });
|
|
44
|
+
exports.ListItemStyled = styled_components_1.default.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n grid-column: span ", ";\n\n &:is(:last-child){\n border-right: 0;\n }\n"], ["\n display: block;\n padding: 1.5rem;\n border-right: 1px solid var(--dark-opacity-10);\n border-bottom: 1px solid var(--dark-opacity-10);\n word-break: break-word;\n grid-column: span ", ";\n\n &:is(:last-child){\n border-right: 0;\n }\n"])), function (props) { var _a; return (_a = props.$columnSpan) !== null && _a !== void 0 ? _a : 1; });
|
|
45
|
+
exports.DisplayTitleStyled = styled_components_1.default.strong(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n color: var(--dark-opacity-50);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
46
|
+
exports.DisplayValueStyled = styled_components_1.default.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n"], ["\n display: block;\n margin-top: 0.5rem;\n color: var(--dark);\n font: var(--body-semi-bold-14-17);\n"])));
|
|
47
|
+
exports.SubMenu = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition-delay: 0s;\n padding: 0;\n margin: 0;\n z-index: 5;\n > ul{\n margin: 0.5rem 0 0 0;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 100%;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition-delay: 0s;\n padding: 0;\n margin: 0;\n z-index: 5;\n > ul{\n margin: 0.5rem 0 0 0;\n }\n"])));
|
|
48
|
+
exports.AccordionListWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
49
|
+
exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"], ["\n + div{\n border-top: 1px solid var(--dark-opacity-10);\n margin-top: -1px;\n }\n"])));
|
|
50
|
+
exports.AccordionItemHeader = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n .icon{\n *{\n display: block;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--primary);\n padding: 1.5rem;\n cursor: pointer;\n border-bottom: ", ";\n strong{\n font: var(--body-bold-14-17);\n display: block;\n color: inherit;\n }\n .icon{\n *{\n display: block;\n }\n }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
51
|
+
exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n cursor: ", ";\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
|
|
52
|
+
exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n padding-top: ", ";\n"])), function (props) { return props.$hasCategoryPadding ? "1rem" : "0"; }, function (props) { return props.$hasCategoryPadding ? "1rem" : "0"; });
|
|
53
|
+
exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius: ", ";\n transition: all 0.15s ease-in-out;\n cursor: ", ";\n\n &:hover {\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n }\n\n ", "\n"], ["\n display: grid;\n grid-template-columns: ", ";\n align-items: center;\n gap: 1.5rem;\n padding: 1rem 1.5rem;\n border-radius: ", ";\n transition: all 0.15s ease-in-out;\n cursor: ", ";\n\n &:hover {\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n }\n\n ", "\n"])), function (props) { return props.$hasCategoryPadding ? exports.categoryRowGridColumns : '1fr auto auto'; }, function (props) { return props.$hasCategoryPadding ? "0.5rem" : "0"; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$hasCategoryPadding && "\n &:hover ".concat(exports.CategoryDropdownWrapper, ",\n ").concat(exports.CategoryDropdownWrapper, ":hover,\n ").concat(exports.CategoryDropdownWrapper, ":focus-within {\n opacity: 1;\n visibility: visible;\n }\n "); });
|
|
54
|
+
exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n"])));
|
|
55
|
+
exports.SubcategoryIconWrapper = styled_components_1.default.span(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--dark-opacity-50);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--dark-opacity-50);\n"])));
|
|
56
|
+
exports.SubcategoryNameStyled = styled_components_1.default.span(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font: var(--body-medium-14-17);\n color: var(--dark);\n"], ["\n font: var(--body-medium-14-17);\n color: var(--dark);\n"])));
|
|
57
|
+
exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n"], ["\n font: var(--body-regular-14-17);\n color: var(--dark-opacity-75);\n white-space: nowrap;\n"])));
|
|
58
|
+
exports.SubcategoryActionWrapper = styled_components_1.default.div(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n cursor: default;\n"])), function (props) { return props.$hasCategoryPadding ? 'flex-end' : 'flex-start'; });
|
|
59
|
+
exports.AccordionItemBody = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
60
|
+
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, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
|
|
@@ -3,8 +3,11 @@ import { sizes as buttonSizes } from "../Button/props";
|
|
|
3
3
|
export declare const iconNames: string[];
|
|
4
4
|
type ICON = typeof iconNames[any];
|
|
5
5
|
type BUTTON_SIZE = typeof buttonSizes[number];
|
|
6
|
+
export declare const titleSizes: readonly ["md", "lg"];
|
|
7
|
+
type TITLE_SIZE = typeof titleSizes[number];
|
|
6
8
|
export interface DescriptionCard {
|
|
7
9
|
title?: string;
|
|
10
|
+
titleSize?: TITLE_SIZE;
|
|
8
11
|
hasBadge?: boolean;
|
|
9
12
|
hasHeader?: boolean;
|
|
10
13
|
hasHeaderBackground?: boolean;
|
|
@@ -13,7 +16,9 @@ export interface DescriptionCard {
|
|
|
13
16
|
hasBorder?: boolean;
|
|
14
17
|
badgeText?: string;
|
|
15
18
|
hasHeaderDropdown?: boolean;
|
|
19
|
+
hasHeaderBackButton?: boolean;
|
|
16
20
|
headerImage?: React.ReactNode;
|
|
21
|
+
headerRightContent?: React.ReactNode;
|
|
17
22
|
headerButtonText?: string;
|
|
18
23
|
list?: any[];
|
|
19
24
|
listHeader?: React.ReactNode;
|
|
@@ -28,7 +33,12 @@ export interface DescriptionCard {
|
|
|
28
33
|
headerPrimaryButtonIcon?: ICON;
|
|
29
34
|
headerPrimaryButtonSize?: BUTTON_SIZE;
|
|
30
35
|
content?: React.ReactNode;
|
|
36
|
+
middleTitle?: string;
|
|
37
|
+
subcategoryList?: SubcategoryItem[];
|
|
38
|
+
hasCategoryPadding?: boolean;
|
|
31
39
|
headerButtonAction?(e: any): void;
|
|
40
|
+
onHeaderBack?(): void;
|
|
41
|
+
onHeaderClick?(e: React.MouseEvent): void;
|
|
32
42
|
headerPrimaryButtonAction?(e: any): void;
|
|
33
43
|
customColumnSpan?: {
|
|
34
44
|
[index: number]: number;
|
|
@@ -45,6 +55,11 @@ export interface DescriptionCardStyledProps {
|
|
|
45
55
|
$boxSize?: number;
|
|
46
56
|
$hasHeaderButton?: boolean;
|
|
47
57
|
$hasHeaderPrimaryButton?: boolean;
|
|
58
|
+
$hasMiddleTitle?: boolean;
|
|
59
|
+
$hasHeaderRightContent?: boolean;
|
|
60
|
+
$hasCategoryPadding?: boolean;
|
|
61
|
+
$titleSize?: TITLE_SIZE;
|
|
62
|
+
$isClickable?: boolean;
|
|
48
63
|
$customColumnSpan?: {
|
|
49
64
|
[index: number]: number;
|
|
50
65
|
};
|
|
@@ -53,6 +68,18 @@ export interface AccordionList {
|
|
|
53
68
|
title?: string;
|
|
54
69
|
list?: any[];
|
|
55
70
|
}
|
|
71
|
+
export interface SubcategoryItem {
|
|
72
|
+
name: string;
|
|
73
|
+
middleTitle?: string;
|
|
74
|
+
hasButton?: boolean;
|
|
75
|
+
hasDropdown?: boolean;
|
|
76
|
+
buttonText?: string;
|
|
77
|
+
buttonWidth?: string;
|
|
78
|
+
dropdownList?: any[];
|
|
79
|
+
dropdownWidth?: string;
|
|
80
|
+
onClick?(e: React.MouseEvent): void;
|
|
81
|
+
buttonAction?(e: any): void;
|
|
82
|
+
}
|
|
56
83
|
export interface AccordionListStyledProps {
|
|
57
84
|
$title?: string;
|
|
58
85
|
$list?: any[];
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DescriptionCardDefault = exports.iconNames = void 0;
|
|
3
|
+
exports.DescriptionCardDefault = exports.titleSizes = exports.iconNames = void 0;
|
|
4
4
|
var iconList_1 = require("../Icon/iconList");
|
|
5
5
|
exports.iconNames = Object.keys(iconList_1.iconList);
|
|
6
|
+
exports.titleSizes = ['md', 'lg'];
|
|
6
7
|
exports.DescriptionCardDefault = {
|
|
7
8
|
title: "Header title",
|
|
9
|
+
titleSize: "md",
|
|
8
10
|
hasBadge: false,
|
|
9
11
|
hasHeader: true,
|
|
10
12
|
hasHeaderBackground: false,
|
|
@@ -13,7 +15,9 @@ exports.DescriptionCardDefault = {
|
|
|
13
15
|
hasBorder: true,
|
|
14
16
|
badgeText: null,
|
|
15
17
|
hasHeaderDropdown: false,
|
|
18
|
+
hasHeaderBackButton: false,
|
|
16
19
|
headerImage: null,
|
|
20
|
+
headerRightContent: null,
|
|
17
21
|
headerButtonText: "Header dropdown text",
|
|
18
22
|
list: [],
|
|
19
23
|
listHeader: null,
|
|
@@ -28,5 +32,8 @@ exports.DescriptionCardDefault = {
|
|
|
28
32
|
headerPrimaryButtonIcon: null,
|
|
29
33
|
headerPrimaryButtonSize: "xsmall",
|
|
30
34
|
content: null,
|
|
35
|
+
middleTitle: null,
|
|
36
|
+
subcategoryList: [],
|
|
37
|
+
hasCategoryPadding: false,
|
|
31
38
|
customColumnSpan: {}
|
|
32
39
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, headerButtonAction, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
|
|
4
|
+
component: ({ title, titleSize, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, middleTitle, subcategoryList, hasCategoryPadding, headerButtonAction, onHeaderBack, onHeaderClick, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
argTypes: {
|
|
7
7
|
title: {
|
|
@@ -550,3 +550,9 @@ export declare const WithContent: {
|
|
|
550
550
|
export declare const SubscriptionRules: {
|
|
551
551
|
render: () => React.JSX.Element;
|
|
552
552
|
};
|
|
553
|
+
export declare const CategoryStructure: {
|
|
554
|
+
render: () => React.JSX.Element;
|
|
555
|
+
};
|
|
556
|
+
export declare const AddProductToCategory: {
|
|
557
|
+
render: () => React.JSX.Element;
|
|
558
|
+
};
|