@telia-ace/widget-components-back-link 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.txt +6 -0
- package/README.md +3 -0
- package/lib/back-link-component.d.ts +7 -0
- package/lib/back-link-component.js +42 -0
- package/lib/back-link.d.ts +6 -0
- package/lib/back-link.js +95 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +7 -0
- package/lib-esm/back-link-component.d.ts +7 -0
- package/lib-esm/back-link-component.js +15 -0
- package/lib-esm/back-link.d.ts +6 -0
- package/lib-esm/back-link.js +67 -0
- package/lib-esm/index.d.ts +2 -0
- package/lib-esm/index.js +2 -0
- package/package.json +42 -0
package/LICENSE.txt
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Container } from '@webprovisions/platform';
|
|
2
|
+
export declare type BackLinkComponentProps = {
|
|
3
|
+
conditions?: string[];
|
|
4
|
+
label?: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const BackLinkComponent: (container: Container) => Promise<void>;
|
|
7
|
+
export default BackLinkComponent;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.BackLinkComponent = void 0;
|
|
27
|
+
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
28
|
+
var BackLinkComponent = function (container) {
|
|
29
|
+
return (0, widget_ui_1.createReactComponent)(container, 'back-link', Promise.resolve().then(function () { return __importStar(require('./back-link')); }), function (component) {
|
|
30
|
+
// Action: 'click'
|
|
31
|
+
component.actions.create('click', function (data, options) {
|
|
32
|
+
if (options.preventDefault) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
return container.getAsync('router').then(function (router) {
|
|
36
|
+
router.goBack();
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
exports.BackLinkComponent = BackLinkComponent;
|
|
42
|
+
exports.default = exports.BackLinkComponent;
|
package/lib/back-link.js
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
41
|
+
var t = {};
|
|
42
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
43
|
+
t[p] = s[p];
|
|
44
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
45
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
46
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
47
|
+
t[p[i]] = s[p[i]];
|
|
48
|
+
}
|
|
49
|
+
return t;
|
|
50
|
+
};
|
|
51
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
52
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
53
|
+
};
|
|
54
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
55
|
+
var widget_ui_1 = require("@telia-ace/widget-ui");
|
|
56
|
+
var widget_utilities_1 = require("@telia-ace/widget-utilities");
|
|
57
|
+
var react_1 = __importDefault(require("react"));
|
|
58
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
59
|
+
var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 300;\n button {\n color: ", ";\n text-decoration: underline;\n font-size: ", ";\n span {\n font-weight: 300;\n }\n &:focus {\n ", ";\n }\n }\n"], ["\n font-weight: 300;\n button {\n color: ", ";\n text-decoration: underline;\n font-size: ", ";\n span {\n font-weight: 300;\n }\n &:focus {\n ", ";\n }\n }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
|
|
60
|
+
var _a;
|
|
61
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n padding: ", ";\n "], ["\n ", "\n padding: ", ";\n "])), widget_ui_1.linkTabStyle, 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); });
|
|
62
|
+
});
|
|
63
|
+
var Caret = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: ", ";\n line {\n stroke: ", ";\n }\n"], ["\n margin-right: ", ";\n line {\n stroke: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
64
|
+
var BackLink = function (_a) {
|
|
65
|
+
var className = _a.className, other = __rest(_a, ["className"]);
|
|
66
|
+
var dispatch = (0, widget_ui_1.useDispatch)();
|
|
67
|
+
var params = (0, widget_ui_1.useRouteData)().params;
|
|
68
|
+
var container = (0, widget_ui_1.useContainer)();
|
|
69
|
+
var _b = (0, widget_ui_1.useProperties)(), _c = _b.conditions, conditions = _c === void 0 ? [] : _c, _d = _b.label, label = _d === void 0 ? '' : _d;
|
|
70
|
+
var conditionsMet = conditions && conditions.length
|
|
71
|
+
? conditions.reduce(function (acc, condition) {
|
|
72
|
+
return params[condition] ? true : acc;
|
|
73
|
+
}, false)
|
|
74
|
+
: true;
|
|
75
|
+
if (!conditionsMet) {
|
|
76
|
+
return (0, widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-back-link') }));
|
|
77
|
+
}
|
|
78
|
+
var handleClick = function () {
|
|
79
|
+
dispatch('click');
|
|
80
|
+
};
|
|
81
|
+
if (!label) {
|
|
82
|
+
return (react_1.default.createElement(Wrapper, __assign({}, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-back-link') }),
|
|
83
|
+
react_1.default.createElement("svg", { width: "8", height: "16", viewBox: "0 0 8 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
84
|
+
react_1.default.createElement("line", { y1: "-0.5", x2: "10.2585", y2: "-0.5", transform: "matrix(-0.682358 -0.731018 0.682358 -0.731018 8 14.9999)", stroke: "white" }),
|
|
85
|
+
react_1.default.createElement("line", { y1: "-0.5", x2: "10.2585", y2: "-0.5", transform: "matrix(0.682359 -0.731018 0.682358 0.731018 1 8.49915)", stroke: "white" }))));
|
|
86
|
+
}
|
|
87
|
+
return (react_1.default.createElement(Wrapper, __assign({}, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-back-link') }),
|
|
88
|
+
react_1.default.createElement(widget_ui_1.Button, { "aria-label": label, onClick: handleClick },
|
|
89
|
+
react_1.default.createElement(Caret, { width: "7", height: "13", viewBox: "0 0 7 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
90
|
+
react_1.default.createElement("line", { x1: "6.64645", y1: "12.5513", x2: "0.648357", y2: "6.55319" }),
|
|
91
|
+
react_1.default.createElement("line", { x1: "0.646447", y1: "6.64455", x2: "6.64454", y2: "0.646465" })),
|
|
92
|
+
label && react_1.default.createElement("span", null, label))));
|
|
93
|
+
};
|
|
94
|
+
exports.default = BackLink;
|
|
95
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var back_link_component_1 = __importDefault(require("./back-link-component"));
|
|
7
|
+
exports.default = back_link_component_1.default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Container } from '@webprovisions/platform';
|
|
2
|
+
export declare type BackLinkComponentProps = {
|
|
3
|
+
conditions?: string[];
|
|
4
|
+
label?: string;
|
|
5
|
+
};
|
|
6
|
+
export declare const BackLinkComponent: (container: Container) => Promise<void>;
|
|
7
|
+
export default BackLinkComponent;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createReactComponent } from '@telia-ace/widget-ui';
|
|
2
|
+
export var BackLinkComponent = function (container) {
|
|
3
|
+
return createReactComponent(container, 'back-link', import('./back-link'), function (component) {
|
|
4
|
+
// Action: 'click'
|
|
5
|
+
component.actions.create('click', function (data, options) {
|
|
6
|
+
if (options.preventDefault) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
return container.getAsync('router').then(function (router) {
|
|
10
|
+
router.goBack();
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
export default BackLinkComponent;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
17
|
+
var t = {};
|
|
18
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
19
|
+
t[p] = s[p];
|
|
20
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
21
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
22
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
23
|
+
t[p[i]] = s[p[i]];
|
|
24
|
+
}
|
|
25
|
+
return t;
|
|
26
|
+
};
|
|
27
|
+
import { Button, createEmptyComponent, linkTabStyle, useContainer, useDispatch, useProperties, useRouteData, } from '@telia-ace/widget-ui';
|
|
28
|
+
import { appendClassNames } from '@telia-ace/widget-utilities';
|
|
29
|
+
import React from 'react';
|
|
30
|
+
import styled, { css } from 'styled-components';
|
|
31
|
+
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 300;\n button {\n color: ", ";\n text-decoration: underline;\n font-size: ", ";\n span {\n font-weight: 300;\n }\n &:focus {\n ", ";\n }\n }\n"], ["\n font-weight: 300;\n button {\n color: ", ";\n text-decoration: underline;\n font-size: ", ";\n span {\n font-weight: 300;\n }\n &:focus {\n ", ";\n }\n }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
|
|
32
|
+
var _a;
|
|
33
|
+
return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n padding: ", ";\n "], ["\n ", "\n padding: ", ";\n "])), linkTabStyle, 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); });
|
|
34
|
+
});
|
|
35
|
+
var Caret = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: ", ";\n line {\n stroke: ", ";\n }\n"], ["\n margin-right: ", ";\n line {\n stroke: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.primary; });
|
|
36
|
+
var BackLink = function (_a) {
|
|
37
|
+
var className = _a.className, other = __rest(_a, ["className"]);
|
|
38
|
+
var dispatch = useDispatch();
|
|
39
|
+
var params = useRouteData().params;
|
|
40
|
+
var container = useContainer();
|
|
41
|
+
var _b = useProperties(), _c = _b.conditions, conditions = _c === void 0 ? [] : _c, _d = _b.label, label = _d === void 0 ? '' : _d;
|
|
42
|
+
var conditionsMet = conditions && conditions.length
|
|
43
|
+
? conditions.reduce(function (acc, condition) {
|
|
44
|
+
return params[condition] ? true : acc;
|
|
45
|
+
}, false)
|
|
46
|
+
: true;
|
|
47
|
+
if (!conditionsMet) {
|
|
48
|
+
return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-back-link') }));
|
|
49
|
+
}
|
|
50
|
+
var handleClick = function () {
|
|
51
|
+
dispatch('click');
|
|
52
|
+
};
|
|
53
|
+
if (!label) {
|
|
54
|
+
return (React.createElement(Wrapper, __assign({}, other, { className: appendClassNames(className, 'humany-back-link') }),
|
|
55
|
+
React.createElement("svg", { width: "8", height: "16", viewBox: "0 0 8 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
56
|
+
React.createElement("line", { y1: "-0.5", x2: "10.2585", y2: "-0.5", transform: "matrix(-0.682358 -0.731018 0.682358 -0.731018 8 14.9999)", stroke: "white" }),
|
|
57
|
+
React.createElement("line", { y1: "-0.5", x2: "10.2585", y2: "-0.5", transform: "matrix(0.682359 -0.731018 0.682358 0.731018 1 8.49915)", stroke: "white" }))));
|
|
58
|
+
}
|
|
59
|
+
return (React.createElement(Wrapper, __assign({}, other, { className: appendClassNames(className, 'humany-back-link') }),
|
|
60
|
+
React.createElement(Button, { "aria-label": label, onClick: handleClick },
|
|
61
|
+
React.createElement(Caret, { width: "7", height: "13", viewBox: "0 0 7 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
62
|
+
React.createElement("line", { x1: "6.64645", y1: "12.5513", x2: "0.648357", y2: "6.55319" }),
|
|
63
|
+
React.createElement("line", { x1: "0.646447", y1: "6.64455", x2: "6.64454", y2: "0.646465" })),
|
|
64
|
+
label && React.createElement("span", null, label))));
|
|
65
|
+
};
|
|
66
|
+
export default BackLink;
|
|
67
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
package/lib-esm/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@telia-ace/widget-components-back-link",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Back link component for ACE Widgets.",
|
|
5
|
+
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
|
+
"author": "Telia Company AB",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"telia"
|
|
9
|
+
],
|
|
10
|
+
"main": "lib/index.js",
|
|
11
|
+
"module": "lib-esm/index.js",
|
|
12
|
+
"files": [
|
|
13
|
+
"LICENSE.txt",
|
|
14
|
+
"README.md",
|
|
15
|
+
"lib/",
|
|
16
|
+
"lib-esm/"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"clean": "cleandir lib && cleandir lib-esm",
|
|
23
|
+
"compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
|
|
24
|
+
},
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"typings": "lib/index.d.ts",
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@telia-ace/widget-routing": "^1.0.0",
|
|
29
|
+
"@telia-ace/widget-ui": "^1.0.0",
|
|
30
|
+
"@telia-ace/widget-utilities": "^1.0.1",
|
|
31
|
+
"@webprovisions/platform": "^1.1.2",
|
|
32
|
+
"react": "^17.0.2",
|
|
33
|
+
"react-dom": "^17.0.2",
|
|
34
|
+
"styled-components": "^4.3.2"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@types/react": "^17.0.39",
|
|
38
|
+
"@types/react-dom": "^17.0.13",
|
|
39
|
+
"@types/styled-components": "^5.1.7"
|
|
40
|
+
},
|
|
41
|
+
"gitHead": "26a4f73e6b1811cf60ca62a274b54b15127a83f6"
|
|
42
|
+
}
|