krl-alfred 1.80.14 → 1.80.16
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/Breadcrumbs/Breadcrumbs.styled.js +1 -1
- package/dist/components/DescriptionCard/DescriptionCard.js +2 -2
- package/dist/components/DescriptionCard/DescriptionCard.styled.js +1 -1
- package/dist/components/DescriptionCard/props.js +4 -1
- package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js +2 -0
- package/dist/components/InsuranceBox/InsuranceBox.styled.js +3 -1
- package/package.json +1 -1
|
@@ -21,6 +21,6 @@ exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(te
|
|
|
21
21
|
exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"])));
|
|
22
22
|
exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 0.25rem;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n font:var(--caption-bold-12-15);\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 0.25rem;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n font:var(--caption-bold-12-15);\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"])));
|
|
23
23
|
exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n z-index:5;\n padding: 0;\n position: absolute;\n left: 48px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"], ["\n z-index:5;\n padding: 0;\n position: absolute;\n left: 48px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"])));
|
|
24
|
-
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 1.5rem 15px 1.5rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding:
|
|
24
|
+
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 1.5rem 15px 1.5rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 1.5rem 15px 0 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"], ["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 1.5rem 15px 1.5rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 1.5rem 15px 0 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.xl);
|
|
25
25
|
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px var(--box-shadow-color);\n border-radius: 0.5rem;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n font:var(--caption-bold-12-15);\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px var(--box-shadow-color);\n border-radius: 0.5rem;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"])), function (props) { return (props.$isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.$isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
|
|
26
26
|
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;
|
|
@@ -22,8 +22,8 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
|
|
|
22
22
|
var AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
23
23
|
var Button_1 = __importDefault(require("./../Button"));
|
|
24
24
|
var DescriptionCard = function (_a) {
|
|
25
|
-
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p, _q = _a.boxSize, boxSize = _q === void 0 ? props_1.DescriptionCardDefault.boxSize : _q, _r = _a.hasHeaderButton, hasHeaderButton = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _r, _s = _a.headerButtonWidth, headerButtonWidth = _s === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _s, headerButtonAction = _a.headerButtonAction;
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { 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 }) }))] }),
|
|
25
|
+
var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.headerButtonText, headerButtonText = _c === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _c, _d = _a.hasHeaderDropdown, hasHeaderDropdown = _d === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _d, _e = _a.list, list = _e === void 0 ? props_1.DescriptionCardDefault.list : _e, _f = _a.hasBadge, hasBadge = _f === void 0 ? props_1.DescriptionCardDefault.hasBadge : _f, _g = _a.badgeText, badgeText = _g === void 0 ? props_1.DescriptionCardDefault.badgeText : _g, _h = _a.hasHeader, hasHeader = _h === void 0 ? props_1.DescriptionCardDefault.hasHeader : _h, _j = _a.hasRounded, hasRounded = _j === void 0 ? props_1.DescriptionCardDefault.hasRounded : _j, _k = _a.hasBorder, hasBorder = _k === void 0 ? props_1.DescriptionCardDefault.hasBorder : _k, _l = _a.headerImage, headerImage = _l === void 0 ? props_1.DescriptionCardDefault.headerImage : _l, _m = _a.dropdownList, dropdownList = _m === void 0 ? props_1.DescriptionCardDefault.dropdownList : _m, _o = _a.dropdownWidth, dropdownWidth = _o === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _o, _p = _a.accordionList, accordionList = _p === void 0 ? props_1.DescriptionCardDefault.accordionList : _p, _q = _a.boxSize, boxSize = _q === void 0 ? props_1.DescriptionCardDefault.boxSize : _q, _r = _a.hasHeaderButton, hasHeaderButton = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _r, _s = _a.headerButtonWidth, headerButtonWidth = _s === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _s, _t = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _t === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _t, _u = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _u === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _u, _v = _a.headerPrimaryButtonText, headerPrimaryButtonText = _v === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _v, headerButtonAction = _a.headerButtonAction;
|
|
26
|
+
return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardStyled, __assign({ "$hasRounded": hasRounded, "$hasBorder": hasBorder }, { children: [hasHeader && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DescriptionCardHeaderStyled, __assign({ "$headerImage": headerImage }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [headerImage && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderImageWrapperStyled, { children: headerImage })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.HeaderTitleStyled, { 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 }) }))] }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightFrame" }, { children: [hasHeaderPrimaryButton && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: headerPrimaryButtonAction, size: "xsmall", variant: "primary" }, { children: headerPrimaryButtonText })) })), hasHeaderButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { 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 }) }))] }))] }))] }))), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.ListStyled, __assign({ "$boxSize": boxSize }, { children: list.map(function (listItem, key) { return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "displayTitle" }, { children: listItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "displayValue" }, { children: listItem.display || "-" }))] }, key)); }) })), (accordionList === null || accordionList === void 0 ? void 0 : accordionList.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.AccordionListWrapper, { children: accordionList === null || accordionList === void 0 ? void 0 : accordionList.map(function (item, key) {
|
|
27
27
|
return (0, jsx_runtime_1.jsx)(AccordionItem_1.default, { data: item }, key);
|
|
28
28
|
}) }))] })));
|
|
29
29
|
};
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.AccordionItemBody = exports.AccordionItemHeader = exports.AccordionItemWrapper = exports.AccordionListWrapper = exports.SubMenu = exports.DropdownWrapper = exports.ListStyled = exports.BadgeWrapper = exports.HeaderImageWrapperStyled = exports.HeaderTitleStyled = exports.DescriptionCardHeaderStyled = exports.DescriptionCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.DescriptionCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n border-radius: ", ";\n overflow: hidden;\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 overflow: hidden;\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.$hasBorder ? "1px solid var(--dark-opacity-10)" : "none"; });
|
|
13
|
-
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--dark-opacity-10);\n > div{\n
|
|
13
|
+
exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--dark-opacity-10);\n > div{\n display: flex;\n align-items: center;\n justify-content: start;\n &:last-child{\n > div{\n margin-left: 1rem;\n }\n }\n }\n"], ["\n padding: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--dark-opacity-10);\n > div{\n display: flex;\n align-items: center;\n justify-content: start;\n &:last-child{\n > div{\n margin-left: 1rem;\n }\n }\n }\n"])), function (props) { return props.$headerImage ? "1rem 1.5rem" : "1.5rem"; });
|
|
14
14
|
exports.HeaderTitleStyled = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font: var(--headline-semi-bold-18-22);\n display: block;\n"], ["\n font: var(--headline-semi-bold-18-22);\n display: block;\n"])));
|
|
15
15
|
exports.HeaderImageWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __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 *{\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 *{\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n padding: 0.5rem;\n box-sizing: border-box;\n }\n"])));
|
|
16
16
|
exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-left: 1.5rem;\n"], ["\n display: block;\n margin-left: 1.5rem;\n"])));
|
|
@@ -17,5 +17,8 @@ exports.DescriptionCardDefault = {
|
|
|
17
17
|
dropdownWidth: null,
|
|
18
18
|
boxSize: 5,
|
|
19
19
|
hasHeaderButton: false,
|
|
20
|
-
headerButtonWidth: null
|
|
20
|
+
headerButtonWidth: null,
|
|
21
|
+
hasHeaderPrimaryButton: false,
|
|
22
|
+
headerPrimaryButtonAction: null,
|
|
23
|
+
headerPrimaryButtonText: "Header Primary Button Text"
|
|
21
24
|
};
|
|
@@ -22,6 +22,8 @@ exports.InnerWrapper = styled_components_1.default.label(templateObject_2 || (te
|
|
|
22
22
|
switch (props.$size) {
|
|
23
23
|
case 'small':
|
|
24
24
|
return "\n grid-template-columns: 1fr;";
|
|
25
|
+
case 'medium':
|
|
26
|
+
return "\n margin-left: 0.5rem;";
|
|
25
27
|
default:
|
|
26
28
|
return null;
|
|
27
29
|
}
|
|
@@ -57,7 +59,7 @@ exports.Logo = styled_components_1.default.label(templateObject_5 || (templateOb
|
|
|
57
59
|
return null;
|
|
58
60
|
}
|
|
59
61
|
}, devices_1.devices.md);
|
|
60
|
-
exports.Description = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left:
|
|
62
|
+
exports.Description = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 1rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--caption-semi-bold-12-15);\n height: 31px;\n cursor: inherit;\n @media only screen and ", " {\n margin-left: 0;\n }\n ", ";\n\n b {\n font: var(--body-extra-bold-13-16);\n }\n"], ["\n margin-left: 1rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--caption-semi-bold-12-15);\n height: 31px;\n cursor: inherit;\n @media only screen and ", " {\n margin-left: 0;\n }\n ", ";\n\n b {\n font: var(--body-extra-bold-13-16);\n }\n"])), devices_1.devices.md, function (props) {
|
|
61
63
|
switch (props.$size) {
|
|
62
64
|
case 'small':
|
|
63
65
|
return "\n margin-left: 0;\n ";
|