@telia-ace/knowledge-widget-components-notification-row 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/widget-services`
+
+Services for ACE Widgets.

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import NotificationRowComponent from './notification-row-component';
+export default NotificationRowComponent;

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var notification_row_component_1 = __importDefault(require("./notification-row-component"));
+exports.default = notification_row_component_1.default;

package/lib/notification-row-component.d.ts

@@ -0,0 +1,15 @@
+import { Notification } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+declare type NotificationType = 'top' | 'middle' | 'bottom';
+export declare type NotificationRowComponentProps = {
+    types: NotificationType[];
+    allowPaging?: boolean;
+    notifications?: Notification[];
+    expandable?: boolean;
+    pageNextAriaLabel?: string;
+    pagePreviousAriaLabel?: string;
+    closeAriaLabel?: string;
+    expandAriaLabel?: string;
+};
+export declare const NotificationRowComponent: (container: Container) => Promise<void>;
+export default NotificationRowComponent;

package/lib/notification-row-component.js

@@ -0,0 +1,138 @@
+"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 __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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationRowComponent = void 0;
+var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
+var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var NotificationRowComponent = function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return (0, knowledge_widget_ui_1.createReactComponent)(container, 'notification-row', Promise.resolve().then(function () { return __importStar(require('./notification-row')); }), function (component) {
+        var fetch = function (params) {
+            component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notifications: [] }));
+            component.actions.dispatch('fetch', { params: params });
+        };
+        component.actions.create('fetch', function (_a) {
+            var error = _a.error, topNotifications = _a.topNotifications, bottomNotifications = _a.bottomNotifications, middleNotifications = _a.middleNotifications;
+            if (error) {
+                return component.actions.dispatch('fetched', {
+                    error: error,
+                    loading: true,
+                    notifications: [],
+                });
+            }
+            var newNotifications = [];
+            var _b = component.properties(), notifications = _b.notifications, _c = _b.types, types = _c === void 0 ? [] : _c;
+            if (types.length) {
+                if (types.indexOf('top') > -1) {
+                    newNotifications = newNotifications.concat(topNotifications);
+                }
+                if (types.indexOf('middle') > -1) {
+                    newNotifications = newNotifications.concat(middleNotifications);
+                }
+                if (types.indexOf('bottom') > -1) {
+                    newNotifications = newNotifications.concat(bottomNotifications);
+                }
+            }
+            else {
+                newNotifications = topNotifications;
+            }
+            return component.actions.dispatch('fetched', {
+                notifications: newNotifications.length ? newNotifications : notifications,
+                loading: false,
+            });
+        });
+        component.actions.create('fetched', function (input) {
+            return component.writeProperties(__assign(__assign({}, input), { loading: false }));
+        });
+        container.getAsync('router').then(function (router) {
+            var params = router.getRouteData().params;
+            fetch(params);
+        });
+        subscribe('router:changed', function (event, _a) {
+            var current = _a.current;
+            fetch(current.routeData.params);
+        });
+        return function () {
+            unsubscribe();
+        };
+    })
+        .then(function () {
+        return (0, knowledge_widget_core_1.extendComponent)(container, 'notification-row', function (component) {
+            component.actions.watch('notification-row.fetch', function (input, next) {
+                return container
+                    .getAsync('dataClient')
+                    .then(function (dataClient) {
+                    return dataClient.fetch(knowledge_widget_types_grid_1.DataType.RowNotifications, {
+                        categories: [
+                            input.params.guideCategory,
+                            input.params.contactCategory,
+                        ].filter(function (c) { return !!c; }),
+                        searchPhrase: input.params.phrase,
+                    });
+                })
+                    .then(next)
+                    .catch(function (error) {
+                    if (error) {
+                        return next(error);
+                    }
+                });
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+};
+exports.NotificationRowComponent = NotificationRowComponent;
+exports.default = exports.NotificationRowComponent;

package/lib/notification-row.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    className: string;
+};
+declare const NotificationRow: React.SFC<Props>;
+export default NotificationRow;

package/lib/notification-row.js

@@ -0,0 +1,207 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
+var widget_services_1 = require("@telia-ace/widget-services");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var STORAGE_KEY = 'closed-notifications';
+var infocusableHtml = {
+    transform: {
+        a: function (_a) {
+            var children = _a.children, props = __rest(_a, ["children"]);
+            return (react_1.default.createElement("a", __assign({}, props, { tabIndex: -1 }), children));
+        },
+    },
+};
+var NotificationRow = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var _b = (0, knowledge_widget_ui_1.useProperties)(), _c = _b.types, types = _c === void 0 ? [] : _c, _d = _b.allowPaging, allowPaging = _d === void 0 ? true : _d, _e = _b.notifications, notifications = _e === void 0 ? [] : _e, _f = _b.expandable, expandable = _f === void 0 ? false : _f, _g = _b.closeAriaLabel, closeAriaLabel = _g === void 0 ? '' : _g, _h = _b.pageNextAriaLabel, pageNextAriaLabel = _h === void 0 ? '' : _h, _j = _b.pagePreviousAriaLabel, pagePreviousAriaLabel = _j === void 0 ? '' : _j, _k = _b.expandAriaLabel, expandAriaLabel = _k === void 0 ? '' : _k;
+    var _l = __read((0, react_1.useState)(false), 2), expanded = _l[0], setExpanded = _l[1];
+    var _m = __read((0, react_1.useState)([]), 2), closed = _m[0], setClosed = _m[1];
+    var _o = __read((0, react_1.useState)(0), 2), index = _o[0], setIndex = _o[1];
+    var container = (0, knowledge_widget_ui_1.useContainer)();
+    var _p = __read((0, react_1.useState)(), 2), write = _p[0], setWriter = _p[1];
+    (0, react_1.useEffect)(function () {
+        if (container) {
+            (0, widget_services_1.readStorage)(container, STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (closed) {
+                if (closed === void 0) { closed = []; }
+                return setClosed(closed);
+            });
+            (0, widget_services_1.createStorageWriter)(container, STORAGE_KEY, widget_services_1.StorageCategory.Necessary).then(function (writer) {
+                return setWriter(function () { return writer; });
+            });
+        }
+    }, [container]);
+    (0, react_1.useEffect)(function () {
+        if (container) {
+            (0, widget_services_1.readStorage)(container, STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (storedClosed) {
+                if (storedClosed === void 0) { storedClosed = []; }
+                closed.forEach(function (id) { return storedClosed.indexOf(id) === -1 && storedClosed.push(id); });
+                if (write) {
+                    write(storedClosed);
+                }
+            });
+        }
+    }, [closed, container, write]);
+    var filtered = notifications.filter(function (_a) {
+        var id = _a.id;
+        return closed.indexOf(id) === -1;
+    });
+    var length = filtered.length;
+    if (!filtered.length) {
+        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row') }));
+    }
+    if (allowPaging) {
+        var notification_1 = filtered[index] || filtered[index + 1] || filtered[index - 1];
+        if (!notification_1) {
+            return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row') }));
+        }
+        var _q = notification_1 || {}, id_1 = _q.id, body = _q.body;
+        var toggleExpand_1 = function () { return setExpanded(!expanded); };
+        return (react_1.default.createElement(Wrapper, __assign({}, other, { "aria-expanded": expandable ? expanded : true, "aria-label": expandAriaLabel, tabIndex: expandable ? 0 : -1, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row'), "data-pageable": length > 1, "data-types": types, "data-allow-paging": allowPaging, "data-expandable": expandable, onKeyDown: function (e) {
+                if (e.key === 'Enter') {
+                    toggleExpand_1();
+                }
+            }, onClick: toggleExpand_1 }),
+            react_1.default.createElement(CloseButton, { "aria-label": closeAriaLabel, onClick: function () {
+                    setIndex(filtered.indexOf(notification_1));
+                    setClosed(__spreadArray(__spreadArray([], __read(closed), false), [id_1], false));
+                } },
+                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: { type: 'Svg', content: 'close' } })),
+            react_1.default.createElement(StyledHtml, { htmlParseInstruction: !expandable || expanded ? undefined : infocusableHtml, "data-pageable": length > 1, "data-notification": id_1, "data-expandable": expandable, "data-expanded": expanded, html: body }),
+            length > 1 && (react_1.default.createElement(Pager, null,
+                react_1.default.createElement(StyledButton, { "aria-label": pagePreviousAriaLabel, "data-disabled": index === 0, onClick: function (e) {
+                        e.stopPropagation();
+                        if (index > 0) {
+                            setIndex(index - 1);
+                        }
+                    } },
+                    react_1.default.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-left' } })),
+                react_1.default.createElement("span", null,
+                    index + 1,
+                    "/",
+                    length),
+                react_1.default.createElement(StyledButton, { "aria-label": pageNextAriaLabel, "data-disabled": index + 1 >= length, onClick: function (e) {
+                        e.stopPropagation();
+                        if (index < length - 1) {
+                            setIndex(index + 1);
+                        }
+                    } },
+                    react_1.default.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-right' } }))))));
+    }
+    return (react_1.default.createElement(Wrapper, __assign({}, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row'), "data-pageable": false, "data-types": types, "data-allow-paging": false }), filtered.map(function (notification) {
+        if (!notification) {
+            return null;
+        }
+        var id = notification.id, body = notification.body;
+        return (react_1.default.createElement(StyledHtml, { key: id, "data-pageable": false, "data-expandable": expandable, "data-expanded": expanded, "data-notification": id, html: body }));
+    })));
+};
+var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"], ["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"])), knowledge_widget_ui_1.genericHtml, function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 12; }, function (p) {
+    var _a, _b, _c;
+    if (p['data-types'].length) {
+        if (p['data-types'].indexOf('top') > -1) {
+            return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.warning;
+        }
+        if (p['data-types'].indexOf('bottom') > -1) {
+            return 'transparent';
+        }
+        return (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary;
+    }
+    return (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.warning;
+}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.theme.borderRadius; }, function (p) { return (p['data-expandable'] ? 'pointer' : 'default'); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.linkTabStyle; }, function (p) {
+    var _a;
+    return !p['data-allow-paging'] && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "], ["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "])), ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 2);
+}, function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "], ["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "])), StyledHtml, knowledge_widget_ui_1.borderTabStyle);
+});
+var StyledHtml = (0, styled_components_1.default)(knowledge_widget_ui_1.Html)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"], ["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
+    return p['data-expandable'] &&
+        !p['data-expanded'] && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            max-width: 100%;\n\n            p {\n                display: none;\n                &:first-child {\n                    display: block;\n                    margin-bottom: 0;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n            }\n        "], ["\n            max-width: 100%;\n\n            p {\n                display: none;\n                &:first-child {\n                    display: block;\n                    margin-bottom: 0;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n            }\n        "])));
+});
+var Pager = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"], ["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+var StyledButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 200ms ease-out;\n    justify-self: flex-end;\n    align-self: flex-start;\n    padding: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"], ["\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 200ms ease-out;\n    justify-self: flex-end;\n    align-self: flex-start;\n    padding: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.borderTabStyle; }, function (p) {
+    return p['data-disabled']
+        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                  opacity: 0.8;\n              "], ["\n                  opacity: 0.8;\n              "]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "], ["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "])));
+});
+var CloseButton = (0, styled_components_1.default)(StyledButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a, _b; return "calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, "/2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var StyledSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    line {\n        stroke: #ffffff;\n    }\n"], ["\n    line {\n        stroke: #ffffff;\n    }\n"])));
+var Empty = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+exports.default = NotificationRow;
+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;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import NotificationRowComponent from './notification-row-component';
+export default NotificationRowComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import NotificationRowComponent from './notification-row-component';
+export default NotificationRowComponent;

package/lib-esm/notification-row-component.d.ts

@@ -0,0 +1,15 @@
+import { Notification } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+declare type NotificationType = 'top' | 'middle' | 'bottom';
+export declare type NotificationRowComponentProps = {
+    types: NotificationType[];
+    allowPaging?: boolean;
+    notifications?: Notification[];
+    expandable?: boolean;
+    pageNextAriaLabel?: string;
+    pagePreviousAriaLabel?: string;
+    closeAriaLabel?: string;
+    expandAriaLabel?: string;
+};
+export declare const NotificationRowComponent: (container: Container) => Promise<void>;
+export default NotificationRowComponent;

package/lib-esm/notification-row-component.js

@@ -0,0 +1,111 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { createEventSubscriber, extendComponent, } from '@telia-ace/knowledge-widget-core';
+import { DataType } from '@telia-ace/knowledge-widget-types-grid';
+import { createReactComponent } from '@telia-ace/knowledge-widget-ui';
+export var NotificationRowComponent = function (container) {
+    var events = container.get('$widget').events;
+    var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+    return createReactComponent(container, 'notification-row', import('./notification-row'), function (component) {
+        var fetch = function (params) {
+            component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notifications: [] }));
+            component.actions.dispatch('fetch', { params: params });
+        };
+        component.actions.create('fetch', function (_a) {
+            var error = _a.error, topNotifications = _a.topNotifications, bottomNotifications = _a.bottomNotifications, middleNotifications = _a.middleNotifications;
+            if (error) {
+                return component.actions.dispatch('fetched', {
+                    error: error,
+                    loading: true,
+                    notifications: [],
+                });
+            }
+            var newNotifications = [];
+            var _b = component.properties(), notifications = _b.notifications, _c = _b.types, types = _c === void 0 ? [] : _c;
+            if (types.length) {
+                if (types.indexOf('top') > -1) {
+                    newNotifications = newNotifications.concat(topNotifications);
+                }
+                if (types.indexOf('middle') > -1) {
+                    newNotifications = newNotifications.concat(middleNotifications);
+                }
+                if (types.indexOf('bottom') > -1) {
+                    newNotifications = newNotifications.concat(bottomNotifications);
+                }
+            }
+            else {
+                newNotifications = topNotifications;
+            }
+            return component.actions.dispatch('fetched', {
+                notifications: newNotifications.length ? newNotifications : notifications,
+                loading: false,
+            });
+        });
+        component.actions.create('fetched', function (input) {
+            return component.writeProperties(__assign(__assign({}, input), { loading: false }));
+        });
+        container.getAsync('router').then(function (router) {
+            var params = router.getRouteData().params;
+            fetch(params);
+        });
+        subscribe('router:changed', function (event, _a) {
+            var current = _a.current;
+            fetch(current.routeData.params);
+        });
+        return function () {
+            unsubscribe();
+        };
+    })
+        .then(function () {
+        return extendComponent(container, 'notification-row', function (component) {
+            component.actions.watch('notification-row.fetch', function (input, next) {
+                return container
+                    .getAsync('dataClient')
+                    .then(function (dataClient) {
+                    return dataClient.fetch(DataType.RowNotifications, {
+                        categories: [
+                            input.params.guideCategory,
+                            input.params.contactCategory,
+                        ].filter(function (c) { return !!c; }),
+                        searchPhrase: input.params.phrase,
+                    });
+                })
+                    .then(next)
+                    .catch(function (error) {
+                    if (error) {
+                        return next(error);
+                    }
+                });
+            });
+        });
+    })
+        .then(function () {
+        unsubscribe();
+    });
+};
+export default NotificationRowComponent;

package/lib-esm/notification-row.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type Props = {
+    className: string;
+};
+declare const NotificationRow: React.SFC<Props>;
+export default NotificationRow;

package/lib-esm/notification-row.js

@@ -0,0 +1,182 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { borderTabStyle, Button, createEmptyComponent, genericHtml, Html, linkTabStyle, SymbolBadge, useContainer, useProperties, } from '@telia-ace/knowledge-widget-ui';
+import { createStorageWriter, readStorage, StorageCategory, StorageMedium, } from '@telia-ace/widget-services';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+var STORAGE_KEY = 'closed-notifications';
+var infocusableHtml = {
+    transform: {
+        a: function (_a) {
+            var children = _a.children, props = __rest(_a, ["children"]);
+            return (React.createElement("a", __assign({}, props, { tabIndex: -1 }), children));
+        },
+    },
+};
+var NotificationRow = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var _b = useProperties(), _c = _b.types, types = _c === void 0 ? [] : _c, _d = _b.allowPaging, allowPaging = _d === void 0 ? true : _d, _e = _b.notifications, notifications = _e === void 0 ? [] : _e, _f = _b.expandable, expandable = _f === void 0 ? false : _f, _g = _b.closeAriaLabel, closeAriaLabel = _g === void 0 ? '' : _g, _h = _b.pageNextAriaLabel, pageNextAriaLabel = _h === void 0 ? '' : _h, _j = _b.pagePreviousAriaLabel, pagePreviousAriaLabel = _j === void 0 ? '' : _j, _k = _b.expandAriaLabel, expandAriaLabel = _k === void 0 ? '' : _k;
+    var _l = __read(useState(false), 2), expanded = _l[0], setExpanded = _l[1];
+    var _m = __read(useState([]), 2), closed = _m[0], setClosed = _m[1];
+    var _o = __read(useState(0), 2), index = _o[0], setIndex = _o[1];
+    var container = useContainer();
+    var _p = __read(useState(), 2), write = _p[0], setWriter = _p[1];
+    useEffect(function () {
+        if (container) {
+            readStorage(container, STORAGE_KEY, StorageMedium.Session).then(function (closed) {
+                if (closed === void 0) { closed = []; }
+                return setClosed(closed);
+            });
+            createStorageWriter(container, STORAGE_KEY, StorageCategory.Necessary).then(function (writer) {
+                return setWriter(function () { return writer; });
+            });
+        }
+    }, [container]);
+    useEffect(function () {
+        if (container) {
+            readStorage(container, STORAGE_KEY, StorageMedium.Session).then(function (storedClosed) {
+                if (storedClosed === void 0) { storedClosed = []; }
+                closed.forEach(function (id) { return storedClosed.indexOf(id) === -1 && storedClosed.push(id); });
+                if (write) {
+                    write(storedClosed);
+                }
+            });
+        }
+    }, [closed, container, write]);
+    var filtered = notifications.filter(function (_a) {
+        var id = _a.id;
+        return closed.indexOf(id) === -1;
+    });
+    var length = filtered.length;
+    if (!filtered.length) {
+        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-notification-row') }));
+    }
+    if (allowPaging) {
+        var notification_1 = filtered[index] || filtered[index + 1] || filtered[index - 1];
+        if (!notification_1) {
+            return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-notification-row') }));
+        }
+        var _q = notification_1 || {}, id_1 = _q.id, body = _q.body;
+        var toggleExpand_1 = function () { return setExpanded(!expanded); };
+        return (React.createElement(Wrapper, __assign({}, other, { "aria-expanded": expandable ? expanded : true, "aria-label": expandAriaLabel, tabIndex: expandable ? 0 : -1, className: appendClassNames(className, 'humany-notification-row'), "data-pageable": length > 1, "data-types": types, "data-allow-paging": allowPaging, "data-expandable": expandable, onKeyDown: function (e) {
+                if (e.key === 'Enter') {
+                    toggleExpand_1();
+                }
+            }, onClick: toggleExpand_1 }),
+            React.createElement(CloseButton, { "aria-label": closeAriaLabel, onClick: function () {
+                    setIndex(filtered.indexOf(notification_1));
+                    setClosed(__spreadArray(__spreadArray([], __read(closed), false), [id_1], false));
+                } },
+                React.createElement(SymbolBadge, { symbol: { type: 'Svg', content: 'close' } })),
+            React.createElement(StyledHtml, { htmlParseInstruction: !expandable || expanded ? undefined : infocusableHtml, "data-pageable": length > 1, "data-notification": id_1, "data-expandable": expandable, "data-expanded": expanded, html: body }),
+            length > 1 && (React.createElement(Pager, null,
+                React.createElement(StyledButton, { "aria-label": pagePreviousAriaLabel, "data-disabled": index === 0, onClick: function (e) {
+                        e.stopPropagation();
+                        if (index > 0) {
+                            setIndex(index - 1);
+                        }
+                    } },
+                    React.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-left' } })),
+                React.createElement("span", null,
+                    index + 1,
+                    "/",
+                    length),
+                React.createElement(StyledButton, { "aria-label": pageNextAriaLabel, "data-disabled": index + 1 >= length, onClick: function (e) {
+                        e.stopPropagation();
+                        if (index < length - 1) {
+                            setIndex(index + 1);
+                        }
+                    } },
+                    React.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-right' } }))))));
+    }
+    return (React.createElement(Wrapper, __assign({}, other, { className: appendClassNames(className, 'humany-notification-row'), "data-pageable": false, "data-types": types, "data-allow-paging": false }), filtered.map(function (notification) {
+        if (!notification) {
+            return null;
+        }
+        var id = notification.id, body = notification.body;
+        return (React.createElement(StyledHtml, { key: id, "data-pageable": false, "data-expandable": expandable, "data-expanded": expanded, "data-notification": id, html: body }));
+    })));
+};
+var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"], ["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"])), genericHtml, function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 12; }, function (p) {
+    var _a, _b, _c;
+    if (p['data-types'].length) {
+        if (p['data-types'].indexOf('top') > -1) {
+            return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.warning;
+        }
+        if (p['data-types'].indexOf('bottom') > -1) {
+            return 'transparent';
+        }
+        return (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary;
+    }
+    return (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.warning;
+}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.theme.borderRadius; }, function (p) { return (p['data-expandable'] ? 'pointer' : 'default'); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && linkTabStyle; }, function (p) {
+    var _a;
+    return !p['data-allow-paging'] && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "], ["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "])), ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 2);
+}, function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "], ["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "])), StyledHtml, borderTabStyle);
+});
+var StyledHtml = styled(Html)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"], ["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
+    return p['data-expandable'] &&
+        !p['data-expanded'] && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            max-width: 100%;\n\n            p {\n                display: none;\n                &:first-child {\n                    display: block;\n                    margin-bottom: 0;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n            }\n        "], ["\n            max-width: 100%;\n\n            p {\n                display: none;\n                &:first-child {\n                    display: block;\n                    margin-bottom: 0;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n            }\n        "])));
+});
+var Pager = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"], ["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+var StyledButton = styled(Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 200ms ease-out;\n    justify-self: flex-end;\n    align-self: flex-start;\n    padding: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"], ["\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 200ms ease-out;\n    justify-self: flex-end;\n    align-self: flex-start;\n    padding: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; }, function (p) {
+    return p['data-disabled']
+        ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                  opacity: 0.8;\n              "], ["\n                  opacity: 0.8;\n              "]))) : css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "], ["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "])));
+});
+var CloseButton = styled(StyledButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a, _b; return "calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, "/2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var StyledSymbolBadge = styled(SymbolBadge)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    line {\n        stroke: #ffffff;\n    }\n"], ["\n    line {\n        stroke: #ffffff;\n    }\n"])));
+var Empty = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+export default NotificationRow;
+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;

package/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "@telia-ace/knowledge-widget-components-notification-row",
+    "version": "1.0.1",
+    "description": "Notification row component for ACE Knowledge Widgets.",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Telia Company AB",
+    "keywords": [
+        "telia"
+    ],
+    "main": "lib/index.js",
+    "module": "lib-esm/index.js",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/knowledge-widget-core": "^1.0.1",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.1",
+        "@telia-ace/knowledge-widget-ui": "^1.0.1",
+        "@telia-ace/widget-services": "^1.0.1",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "58b00b80f6a1e4a3c13f4291cb29b9422ea1aa4a"
+}