@telia-ace/knowledge-widget-ui 1.0.1

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/knowledge-widget-ui`
+
+Generic UI components for ACE knowledge widgets.

package/lib/components/dialog-link.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinkProps } from '../missing-type-exports';
+export declare type Props = Merge<LinkProps, {
+    parent: {
+        id: string;
+        title: string;
+    };
+    type: 'guide' | 'link' | 'default';
+    connection?: string;
+}>;
+declare const DialogLink: React.FC<Props>;
+export default DialogLink;

package/lib/components/dialog-link.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var DialogLink = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, className = _a.className, id = _a.id, parent = _a.parent, connection = _a.connection, type = _a.type, target = _a.target, href = _a.href, children = _a.children;
+    var props = {};
+    var _c = (0, widget_ui_1.useRouteData)(), name = _c.name, params = _c.params;
+    switch (type) {
+        case 'default':
+        case 'guide':
+            var parentId = parent.id, parentTitle = parent.title;
+            props.routeName = name;
+            props.params = (0, widget_utilities_1.createParams)(__assign(__assign({}, params), { guide: id, connection: id === parentId ? connection : undefined, uriName: id === parentId ? (0, widget_utilities_1.formatUrl)(parentTitle) : (0, widget_utilities_1.formatUrl)(title) }));
+            break;
+        case 'link':
+            props.href = href;
+            props.target = target;
+            break;
+    }
+    return (react_1.default.createElement(widget_ui_1.Link, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-dialog-link') }, props), children || (react_1.default.createElement(react_1.default.Fragment, null,
+        type === 'link' && react_1.default.createElement(widget_ui_1.Icon, { faIcon: "link" }),
+        react_1.default.createElement("span", null, title)))));
+};
+exports.default = DialogLink;

package/lib/components/dialog-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Props as DialogLinkProps } from './dialog-link';
+declare type Props = Merge<React.ComponentProps<'ul'>, {
+    dialog: DialogLinkProps[];
+}>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "dialog" | "key" | keyof React.HTMLAttributes<HTMLUListElement>> & React.RefAttributes<HTMLUListElement>>;
+export default _default;

package/lib/components/dialog-list.js

@@ -0,0 +1,72 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var dialog_link_1 = __importDefault(require("./dialog-link"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, dialog = _a.dialog, other = __rest(_a, ["className", "dialog"]);
+    return !!dialog.length ? (react_1.default.createElement(StyledList, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-dialog'), items: dialog, renderItem: function (item) { return (react_1.default.createElement("li", { key: item.connection, "data-dialog": item.connection },
+            react_1.default.createElement(dialog_link_1.default, __assign({}, item)))); } }, other, { ref: ref }))) : null;
+});
+var StyledList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    a {\n        min-width: 150px;\n        max-width: 400px;\n        display: block;\n        white-space: normal;\n        ", "\n    }\n\n    i {\n        margin: 0 ", " 0 0;\n    }\n"], ["\n    ", "\n    a {\n        min-width: 150px;\n        max-width: 400px;\n        display: block;\n        white-space: normal;\n        ", "\n    }\n\n    i {\n        margin: 0 ", " 0 0;\n    }\n"])), widget_ui_1.list, function (p) {
+    var _a;
+    return (0, widget_ui_1.invertedHoverButton)({
+        primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        secondaryColor: '#FFFFFF',
+    });
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var templateObject_1;

package/lib/components/drawer-list.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DrawerProps, ItemListProps } from '../missing-type-exports';
+declare type Props = Merge<ItemListProps, DrawerProps>;
+declare const DrawerList: React.FC<Props>;
+export default DrawerList;

package/lib/components/drawer-list.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var DrawerList = function (_a) {
+    var trigger = _a.trigger, header = _a.header, className = _a.className, animation = _a.animation, fullScreen = _a.fullScreen, onToggle = _a.onToggle, children = _a.children, ref = _a.ref, closeButtonAriaLabel = _a.closeButtonAriaLabel, other = __rest(_a, ["trigger", "header", "className", "animation", "fullScreen", "onToggle", "children", "ref", "closeButtonAriaLabel"]);
+    return (react_1.default.createElement(widget_ui_1.Drawer, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-drawer-list'), trigger: trigger, header: header, animation: animation, fullScreen: fullScreen, onToggle: onToggle, closeButtonAriaLabel: closeButtonAriaLabel },
+        react_1.default.createElement(StyledItemList, __assign({}, other), children)));
+};
+exports.default = DrawerList;
+var StyledItemList = (0, styled_components_1.default)(widget_ui_1.ItemList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    font-family: ", ";\n    padding: ", ";\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n    }\n"], ["\n    ", "\n    font-family: ", ";\n    padding: ", ";\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n    }\n"])), widget_ui_1.itemList, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var templateObject_1;

package/lib/components/dropdown-actions.d.ts

@@ -0,0 +1,11 @@
+import { ItemRenderer } from '@telia-ace/widget-ui';
+import React from 'react';
+declare type Props = {
+    trigger: React.ReactElement;
+    header?: React.ReactElement;
+    items?: any[];
+    renderItem?: ItemRenderer;
+    className?: string;
+};
+declare const DropdownActions: React.FC<Props>;
+export default DropdownActions;

package/lib/components/dropdown-actions.js

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var DropdownActions = function (_a) {
+    var items = _a.items, renderItem = _a.renderItem, trigger = _a.trigger, header = _a.header, children = _a.children;
+    return (react_1.default.createElement(widget_ui_1.Dropdown, { className: "humany-dropdown-actions", trigger: trigger },
+        react_1.default.createElement(Wrapper, null,
+            !!header && react_1.default.createElement(Header, null, header),
+            items && renderItem && (react_1.default.createElement(StyledList, { items: items, renderItem: renderItem })),
+            children)));
+};
+exports.default = DropdownActions;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: #fff;\n    border: #ccc 1px solid;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    font-family: ", ";\n    font-size: ", ";\n"], ["\n    background: #fff;\n    border: #ccc 1px solid;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    font-family: ", ";\n    font-size: ", ";\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: 0;\n    font-size: ", ";\n    font-weight: normal;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        font-weight: normal;\n        padding-bottom: 0;\n    }\n\n    svg,\n    i {\n        margin-right: ", ";\n    }\n"], ["\n    padding: ", ";\n    padding-bottom: 0;\n    font-size: ", ";\n    font-weight: normal;\n    white-space: nowrap;\n    display: flex;\n    align-items: center;\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        font-weight: normal;\n        padding-bottom: 0;\n    }\n\n    svg,\n    i {\n        margin-right: ", ";\n    }\n"])), function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { return p.theme.sizes.small; });
+var StyledList = (0, styled_components_1.default)(widget_ui_1.List)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    padding: ", " 0;\n\n    li {\n        background: #fff;\n\n        a {\n            display: block;\n            font-size: ", ";\n            padding: ", ";\n            cursor: pointer;\n            color: #555;\n            text-decoration: none;\n\n            &:hover {\n                background: #f9f9f9;\n                color: ", ";\n            }\n        }\n    }\n"], ["\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    padding: ", " 0;\n\n    li {\n        background: #fff;\n\n        a {\n            display: block;\n            font-size: ", ";\n            padding: ", ";\n            cursor: pointer;\n            color: #555;\n            text-decoration: none;\n\n            &:hover {\n                background: #f9f9f9;\n                color: ", ";\n            }\n        }\n    }\n"])), function (p) { return p.theme.sizes.small; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a, _b; return "".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, " ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; });
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/dropdown-list.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DropdownProps, ItemListProps } from '../missing-type-exports';
+export declare type Props = Merge<DropdownProps, ItemListProps>;
+declare const DropdownList: React.FC<Props>;
+export default DropdownList;

package/lib/components/dropdown-list.js

@@ -0,0 +1,66 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var DropdownList = function (_a) {
+    var trigger = _a.trigger, className = _a.className, children = _a.children, closeButtonAriaLabel = _a.closeButtonAriaLabel, other = __rest(_a, ["trigger", "className", "children", "closeButtonAriaLabel"]);
+    return (react_1.default.createElement(widget_ui_1.Dropdown, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-dropdown-list'), closeButtonAriaLabel: closeButtonAriaLabel, trigger: trigger },
+        react_1.default.createElement(StyledItemList, __assign({}, other), children)));
+};
+exports.default = DropdownList;
+var StyledItemList = (0, styled_components_1.default)(widget_ui_1.ItemList)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    font-family: ", ";\n    > div {\n        ", "\n    }\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n\n        a {\n            display: inline-block;\n\n            @media (hover: hover) {\n                &:hover {\n                    text-decoration: underline;\n                }\n            }\n        }\n    }\n"], ["\n    ", "\n    font-family: ", ";\n    > div {\n        ", "\n    }\n    > ul > li {\n        overflow: visible;\n        font-weight: 300;\n        font-size: ", ";\n\n        a {\n            display: inline-block;\n\n            @media (hover: hover) {\n                &:hover {\n                    text-decoration: underline;\n                }\n            }\n        }\n    }\n"])), widget_ui_1.itemList, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.type; }, (0, widget_ui_1.headingElement)('> h1', (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                font-size: ", ";\n                line-height: 1.2em;\n            "], ["\n                font-size: ", ";\n                line-height: 1.2em;\n            "])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; })), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var templateObject_1, templateObject_2;

package/lib/components/favorite-button.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FavoriteActions } from '../hooks';
+declare type Props = {
+    isFavorite: boolean;
+    actions: FavoriteActions;
+    id: string;
+    addFavoriteTooltip?: string;
+    removeFavoriteCancelLabel?: string;
+    removeFavoriteConfirmLabel?: string;
+    removeFavoriteHeader?: string;
+    removeFavoriteLabel?: string;
+    removeFavoriteTooltip?: string;
+    buttonLabel?: string;
+    guideTitle?: string;
+};
+declare const FavoriteButton: React.FC<Props>;
+export default FavoriteButton;

package/lib/components/favorite-button.js

@@ -0,0 +1,65 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var styles_1 = require("../styles");
+var FavoriteButton = function (_a) {
+    var addFavoriteTooltip = _a.addFavoriteTooltip, removeFavoriteCancelLabel = _a.removeFavoriteCancelLabel, removeFavoriteConfirmLabel = _a.removeFavoriteConfirmLabel, removeFavoriteHeader = _a.removeFavoriteHeader, removeFavoriteLabel = _a.removeFavoriteLabel, removeFavoriteTooltip = _a.removeFavoriteTooltip, id = _a.id, isFavorite = _a.isFavorite, guideTitle = _a.guideTitle, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? '' : _b, _c = _a.actions, addFavorite = _c.addFavorite, removeFavorite = _c.removeFavorite;
+    var remove = (0, react_1.useCallback)(function () {
+        removeFavorite(id);
+    }, [id, removeFavorite]);
+    var add = (0, react_1.useCallback)(function () {
+        addFavorite(id);
+    }, [id, addFavorite]);
+    var tooltip = "".concat(isFavorite ? removeFavoriteTooltip : addFavoriteTooltip).concat(guideTitle ? ": \"".concat(guideTitle, "\"") : '');
+    return (react_1.default.createElement(react_1.default.Fragment, null, isFavorite ? (react_1.default.createElement(widget_ui_1.Confirm, { trigger: react_1.default.createElement(StyledButton, { className: "humany-favorite-button", title: tooltip, "aria-label": tooltip, "data-favorite": "true", "data-has-label": buttonLabel ? 'true' : 'false', "data-has-symbol": "true" },
+            react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'star-empty' } }),
+            buttonLabel && react_1.default.createElement(widget_ui_1.StyledText, null, buttonLabel)), onConfirm: remove, cancelLabel: removeFavoriteCancelLabel, confirmLabel: removeFavoriteConfirmLabel, header: removeFavoriteHeader, text: removeFavoriteLabel })) : (react_1.default.createElement(StyledButton, { className: "humany-favorite-button", title: tooltip, "aria-label": tooltip, onClick: add, "data-favorite": "false", "data-has-label": buttonLabel ? 'true' : 'false', "data-has-symbol": "true" },
+        react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 16, symbol: { type: 'Svg', content: 'star-empty' } }),
+        buttonLabel && react_1.default.createElement(widget_ui_1.StyledText, null, buttonLabel)))));
+};
+exports.default = FavoriteButton;
+var StyledButton = (0, styled_components_1.default)(styles_1.StyledListButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    grid-area: favorite;\n\n    &:focus {\n        ", ";\n    }\n\n    ", "\n"], ["\n    grid-area: favorite;\n\n    &:focus {\n        ", ";\n    }\n\n    ", "\n"])), function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                svg {\n                    ", "\n                }\n            "], ["\n                svg {\n                    ", "\n                }\n            "])), function (p) {
+        var _a, _b;
+        return p['data-favorite'] === 'true'
+            ? "\n          fill: transparent;\n\n          path {\n            fill: transparent;\n          }\n        "
+            : "\n          fill: ".concat((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text, ";\n\n          path {\n            fill: ").concat((_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text, ";\n          }\n        ");
+    });
+}, function (p) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            svg {\n                stroke: ", ";\n\n                path {\n                    stroke: ", ";\n                }\n\n                ", "\n            }\n\n            &:hover {\n                svg {\n                    ", "\n                }\n            }\n        "], ["\n            svg {\n                stroke: ", ";\n\n                path {\n                    stroke: ", ";\n                }\n\n                ", "\n            }\n\n            &:hover {\n                svg {\n                    ", "\n                }\n            }\n        "])), (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.text, (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.text, p['data-favorite'] === 'true' &&
+        "\n        fill: ".concat((_d = p.theme.colors) === null || _d === void 0 ? void 0 : _d.text, ";\n\n        path {\n          fill: ").concat((_e = p.theme.colors) === null || _e === void 0 ? void 0 : _e.text, ";\n        }\n      "), p['data-favorite'] === 'true'
+        ? "\n          fill: transparent;\n\n          path {\n            fill: transparent;\n          }\n        "
+        : "\n          fill: ".concat((_f = p.theme.colors) === null || _f === void 0 ? void 0 : _f.text, ";\n\n          path {\n            fill: ").concat((_g = p.theme.colors) === null || _g === void 0 ? void 0 : _g.text, ";\n          }\n        "));
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/feedback.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type Props = Merge<React.ComponentProps<'div'>, {
+    onFeedback?: (feedback: 'positive' | 'negative') => void;
+    positive?: string;
+    negative?: string;
+    header?: string;
+    selected?: 'positive' | 'negative';
+    direction?: 'horizontal' | 'vertical';
+}>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "header" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "selected" | "direction" | "positive" | "negative" | "onFeedback"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/components/feedback.js

@@ -0,0 +1,84 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.onFeedback, onFeedback = _b === void 0 ? function () { } : _b, _c = _a.direction, direction = _c === void 0 ? 'horizontal' : _c, className = _a.className, header = _a.header, positive = _a.positive, negative = _a.negative, selected = _a.selected, other = __rest(_a, ["onFeedback", "direction", "className", "header", "positive", "negative", "selected"]);
+    return (react_1.default.createElement(Wrapper, __assign({ className: (0, widget_utilities_1.appendClassNames)(className, 'humany-feedback'), "data-direction": direction }, (0, widget_ui_1.convertToStringAttributes)(other), { ref: ref }),
+        !!header && react_1.default.createElement(Header, null, header),
+        react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: !!selected, "aria-pressed": selected === 'positive', "data-selected": selected === 'positive', "data-direction": direction, onClick: function () { return onFeedback('positive'); } },
+            react_1.default.createElement(widget_ui_1.Icon, { faIcon: "smile-o" }),
+            react_1.default.createElement("span", null, positive)),
+        react_1.default.createElement(FeedbackButton, { className: "humany-feedback-button", disabled: !!selected, "aria-pressed": selected === 'negative', "data-selected": selected === 'negative', "data-direction": direction, onClick: function () { return onFeedback('negative'); } },
+            react_1.default.createElement(widget_ui_1.Icon, { faIcon: "frown-o" }),
+            react_1.default.createElement("span", null, negative))));
+});
+var Header = (0, styled_components_1.default)(widget_ui_1.StyledText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-weight: normal;\n    margin: 0 0 ", ";\n    font-size: ", ";\n    display: block;\n"], ["\n    font-weight: normal;\n    margin: 0 0 ", ";\n    font-size: ", ";\n    display: block;\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var FeedbackButton = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: inline-block;\n    font-size: ", ";\n    font-weight: 300;\n    && {\n        margin-right: ", ";\n    }\n\n    ", "\n\n    ", "\n\n  ", "\n\n  i {\n        margin: 0 ", " 0 0;\n    }\n"], ["\n    display: inline-block;\n    font-size: ", ";\n    font-weight: 300;\n    && {\n        margin-right: ", ";\n    }\n\n    ", "\n\n    ", "\n\n  ", "\n\n  i {\n        margin: 0 ", " 0 0;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
+    var _a, _b;
+    return p['data-direction'] === 'horizontal' && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            width: 225px;\n            max-width: calc(50% - ", " - ", ");\n        "], ["\n            width: 225px;\n            max-width: calc(50% - ", " - ", ");\n        "])), (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large, (_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small);
+}, function (p) {
+    return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            min-width: 190px;\n        "], ["\n            min-width: 190px;\n        "])));
+}, function (p) {
+    var _a;
+    return (0, widget_ui_1.invertedHoverButton)({
+        active: p['data-selected'],
+        primaryColor: (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
+        secondaryColor: '#FFFFFF',
+    });
+}, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; });
+var Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (p) {
+    return p['data-direction'] === 'vertical' && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            > button {\n                width: 100%;\n                &:not(:last-child) {\n                    margin-bottom: ", ";\n                }\n            }\n        "], ["\n            > button {\n                width: 100%;\n                &:not(:last-child) {\n                    margin-bottom: ", ";\n                }\n            }\n        "])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.normal; });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/components/guide-list.d.ts

@@ -0,0 +1,46 @@
+import { Guide } from '@telia-ace/knowledge-widget-core';
+import { DispatchAction, ItemRenderer } from '@telia-ace/widget-ui';
+import { Params } from '@telia-ace/widget-utilities';
+import React from 'react';
+import { ItemListProps } from '../missing-type-exports';
+import { Props as MetadataProps } from './metadata';
+declare type Routing = {
+    guide?: string;
+    page?: string;
+};
+declare type ParamMappers = {
+    guide?: (guide: Guide) => Params;
+    page?: () => Params;
+};
+export declare type Props = Merge<ItemListProps, {
+    paramMappers?: ParamMappers;
+    routing?: Routing;
+    pageLabel?: string;
+    symbolSize?: number;
+    renderItem?: ItemRenderer;
+    pageRole?: 'link' | 'button';
+    pageCaret?: 'right' | 'down';
+    showTags?: boolean;
+    showFavoriteToggle?: boolean;
+    addFavoriteTooltip?: string;
+    removeFavoriteCancelLabel?: string;
+    removeFavoriteConfirmLabel?: string;
+    removeFavoriteHeader?: string;
+    removeFavoriteLabel?: string;
+    removeFavoriteTooltip?: string;
+    metadata?: Partial<MetadataProps>;
+    dispatch?: DispatchAction;
+    localPaging?: boolean;
+    expandable?: boolean;
+    onItemClick?: (e: React.MouseEvent, guide: Guide) => void;
+}>;
+export declare const AccordionListItem: React.ForwardRefExoticComponent<{
+    title: string;
+    id: string;
+    route: string;
+    symbolSize?: number | undefined;
+    collapseUri?: string | undefined;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLLIElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "symbol" | "header" | "html" | "metadata" | "text" | "key" | "renderItem" | "items" | "renderLi" | keyof React.HTMLAttributes<HTMLDivElement> | "htmlParseInstruction" | "customHeader" | "ulProps" | "addFavoriteTooltip" | "removeFavoriteCancelLabel" | "removeFavoriteConfirmLabel" | "removeFavoriteHeader" | "removeFavoriteLabel" | "removeFavoriteTooltip" | "paramMappers" | "routing" | "pageLabel" | "symbolSize" | "pageRole" | "pageCaret" | "showTags" | "showFavoriteToggle" | "dispatch" | "localPaging" | "expandable" | "onItemClick"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;