@telia-ace/widget-components-not-found 1.0.0

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-components-not-found`
+
+Not found component for ACE Widgets.

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import NotFoundComponent from './not-found-component';
+export default NotFoundComponent;

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 not_found_component_1 = __importDefault(require("./not-found-component"));
+exports.default = not_found_component_1.default;

package/lib/not-found-base.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    header?: string;
+    link?: string;
+    suggestionHeader?: string;
+    suggestion?: string;
+};
+declare const NotFoundBase: React.FC<Props>;
+export default NotFoundBase;

package/lib/not-found-base.js

@@ -0,0 +1,54 @@
+"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;
+};
+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 = __importStar(require("styled-components"));
+var NotFoundBase = function (_a) {
+    var _b = _a.header, header = _b === void 0 ? '' : _b, _c = _a.link, link = _c === void 0 ? '' : _c, _d = _a.suggestionHeader, suggestionHeader = _d === void 0 ? '' : _d, _e = _a.suggestion, suggestion = _e === void 0 ? '' : _e;
+    return (react_1.default.createElement(Wrapper, null,
+        react_1.default.createElement(Status, null,
+            react_1.default.createElement(widget_ui_1.Typography, { variant: "h2" }, "404")),
+        react_1.default.createElement(Header, null,
+            react_1.default.createElement(widget_ui_1.Typography, { variant: "h3" }, header),
+            react_1.default.createElement(widget_ui_1.TextLink, { routeName: "index", "aria-label": link, text: link })),
+        react_1.default.createElement(Content, null,
+            react_1.default.createElement("span", null, suggestionHeader),
+            react_1.default.createElement("ul", null,
+                react_1.default.createElement("li", null, suggestion)))));
+};
+exports.default = NotFoundBase;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: flex-start;\n    padding: ", ";\n"], ["\n    ", "\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: flex-start;\n    padding: ", ";\n"])), widget_ui_1.contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; });
+var Status = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), (0, widget_ui_1.headingElement)('h2', (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            padding: 0;\n            margin: 0;\n            color: gray;\n            font-size: ", ";\n        "], ["\n            padding: 0;\n            margin: 0;\n            color: gray;\n            font-size: ", ";\n        "])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; })));
+var Header = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-left: ", ";\n\n    ", "\n\n    a {\n        color: ", ";\n        font-size: ", ";\n    }\n"], ["\n    margin-left: ", ";\n\n    ", "\n\n    a {\n        color: ", ";\n        font-size: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, (0, widget_ui_1.headingElement)('h3', (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            text-transform: uppercase;\n            font-size: ", ";\n        "], ["\n            text-transform: uppercase;\n            font-size: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+var Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: ", ";\n    min-width: 100%;\n\n    span {\n        font-weight: bold;\n    }\n"], ["\n    margin-top: ", ";\n    min-width: 100%;\n\n    span {\n        font-weight: bold;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/not-found-component.d.ts

@@ -0,0 +1,10 @@
+import { Container } from '@webprovisions/platform';
+export declare type NotFoundComponentProps = {
+    header?: string;
+    linkLabel?: string;
+    suggestionHeader?: string;
+    suggestionLabel?: string;
+    showSearch?: boolean;
+};
+declare const NotFoundComponent: (container: Container) => Promise<void>;
+export default NotFoundComponent;

package/lib/not-found-component.js

@@ -0,0 +1,30 @@
+"use strict";
+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 NotFoundComponent = function (container) {
+    return (0, widget_ui_1.createReactComponent)(container, 'not-found', Promise.resolve().then(function () { return __importStar(require('./not-found')); }));
+};
+exports.default = NotFoundComponent;

package/lib/not-found.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type Props = {};
+declare const NotFound: React.FC<Props>;
+export default NotFound;

package/lib/not-found.js

@@ -0,0 +1,67 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_types_grid_1 = require("@telia-ace/widget-types-grid");
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = require("styled-components");
+var not_found_base_1 = __importDefault(require("./not-found-base"));
+var NotFound = function () {
+    var _a = (0, widget_ui_1.useProperties)(), header = _a.header, linkLabel = _a.linkLabel, suggestionHeader = _a.suggestionHeader, suggestionLabel = _a.suggestionLabel, showSearch = _a.showSearch;
+    var container = (0, widget_ui_1.useContainer)();
+    var themeContext = (0, react_1.useContext)(styled_components_1.ThemeContext);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        showSearch && (react_1.default.createElement(widget_types_grid_1.DetachedComponent, { builder: function (components) {
+                return container.get('settings').then(function (settings) {
+                    var _a;
+                    var searchComponentProps = Object.keys(settings.components).reduce(function (acc, key) {
+                        if (settings.components[key].type === 'search') {
+                            return settings.components[key].properties;
+                        }
+                        return acc;
+                    }, {});
+                    var searchNode = components.createNode('search', { detached: true });
+                    searchNode.writeLayout({ size: 'full' });
+                    searchNode.writeProperties(__assign({ 'css-margin-bottom': ((_a = themeContext === null || themeContext === void 0 ? void 0 : themeContext.sizes) === null || _a === void 0 ? void 0 : _a.normal) || '15px' }, searchComponentProps));
+                    return searchNode;
+                });
+            } })),
+        react_1.default.createElement(not_found_base_1.default, { header: header, link: linkLabel, suggestionHeader: suggestionHeader, suggestion: suggestionLabel })));
+};
+exports.default = NotFound;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import NotFoundComponent from './not-found-component';
+export default NotFoundComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import NotFoundComponent from './not-found-component';
+export default NotFoundComponent;

package/lib-esm/not-found-base.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    header?: string;
+    link?: string;
+    suggestionHeader?: string;
+    suggestion?: string;
+};
+declare const NotFoundBase: React.FC<Props>;
+export default NotFoundBase;

package/lib-esm/not-found-base.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { contentBox, headingElement, TextLink, Typography } from '@telia-ace/widget-ui';
+import React from 'react';
+import styled, { css } from 'styled-components';
+var NotFoundBase = function (_a) {
+    var _b = _a.header, header = _b === void 0 ? '' : _b, _c = _a.link, link = _c === void 0 ? '' : _c, _d = _a.suggestionHeader, suggestionHeader = _d === void 0 ? '' : _d, _e = _a.suggestion, suggestion = _e === void 0 ? '' : _e;
+    return (React.createElement(Wrapper, null,
+        React.createElement(Status, null,
+            React.createElement(Typography, { variant: "h2" }, "404")),
+        React.createElement(Header, null,
+            React.createElement(Typography, { variant: "h3" }, header),
+            React.createElement(TextLink, { routeName: "index", "aria-label": link, text: link })),
+        React.createElement(Content, null,
+            React.createElement("span", null, suggestionHeader),
+            React.createElement("ul", null,
+                React.createElement("li", null, suggestion)))));
+};
+export default NotFoundBase;
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: flex-start;\n    padding: ", ";\n"], ["\n    ", "\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: flex-start;\n    padding: ", ";\n"])), contentBox, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; });
+var Status = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), headingElement('h2', css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            padding: 0;\n            margin: 0;\n            color: gray;\n            font-size: ", ";\n        "], ["\n            padding: 0;\n            margin: 0;\n            color: gray;\n            font-size: ", ";\n        "])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; })));
+var Header = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin-left: ", ";\n\n    ", "\n\n    a {\n        color: ", ";\n        font-size: ", ";\n    }\n"], ["\n    margin-left: ", ";\n\n    ", "\n\n    a {\n        color: ", ";\n        font-size: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; }, headingElement('h3', css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            text-transform: uppercase;\n            font-size: ", ";\n        "], ["\n            text-transform: uppercase;\n            font-size: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
+var Content = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-top: ", ";\n    min-width: 100%;\n\n    span {\n        font-weight: bold;\n    }\n"], ["\n    margin-top: ", ";\n    min-width: 100%;\n\n    span {\n        font-weight: bold;\n    }\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.medium; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib-esm/not-found-component.d.ts

@@ -0,0 +1,10 @@
+import { Container } from '@webprovisions/platform';
+export declare type NotFoundComponentProps = {
+    header?: string;
+    linkLabel?: string;
+    suggestionHeader?: string;
+    suggestionLabel?: string;
+    showSearch?: boolean;
+};
+declare const NotFoundComponent: (container: Container) => Promise<void>;
+export default NotFoundComponent;

package/lib-esm/not-found-component.js

@@ -0,0 +1,5 @@
+import { createReactComponent } from '@telia-ace/widget-ui';
+var NotFoundComponent = function (container) {
+    return createReactComponent(container, 'not-found', import('./not-found'));
+};
+export default NotFoundComponent;

package/lib-esm/not-found.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type Props = {};
+declare const NotFound: React.FC<Props>;
+export default NotFound;

package/lib-esm/not-found.js

@@ -0,0 +1,39 @@
+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);
+};
+import { DetachedComponent } from '@telia-ace/widget-types-grid';
+import { useContainer, useProperties } from '@telia-ace/widget-ui';
+import React, { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import NotFoundBase from './not-found-base';
+var NotFound = function () {
+    var _a = useProperties(), header = _a.header, linkLabel = _a.linkLabel, suggestionHeader = _a.suggestionHeader, suggestionLabel = _a.suggestionLabel, showSearch = _a.showSearch;
+    var container = useContainer();
+    var themeContext = useContext(ThemeContext);
+    return (React.createElement(React.Fragment, null,
+        showSearch && (React.createElement(DetachedComponent, { builder: function (components) {
+                return container.get('settings').then(function (settings) {
+                    var _a;
+                    var searchComponentProps = Object.keys(settings.components).reduce(function (acc, key) {
+                        if (settings.components[key].type === 'search') {
+                            return settings.components[key].properties;
+                        }
+                        return acc;
+                    }, {});
+                    var searchNode = components.createNode('search', { detached: true });
+                    searchNode.writeLayout({ size: 'full' });
+                    searchNode.writeProperties(__assign({ 'css-margin-bottom': ((_a = themeContext === null || themeContext === void 0 ? void 0 : themeContext.sizes) === null || _a === void 0 ? void 0 : _a.normal) || '15px' }, searchComponentProps));
+                    return searchNode;
+                });
+            } })),
+        React.createElement(NotFoundBase, { header: header, link: linkLabel, suggestionHeader: suggestionHeader, suggestion: suggestionLabel })));
+};
+export default NotFound;

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@telia-ace/widget-components-not-found",
+    "version": "1.0.0",
+    "description": "Not found component for ACE 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/widget-core": "^1.0.0",
+        "@telia-ace/widget-types-grid": "^1.0.0",
+        "@telia-ace/widget-ui": "^1.0.0",
+        "@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": "26a4f73e6b1811cf60ca62a274b54b15127a83f6"
+}