@telia-ace/knowledge-widget-components-contact-link 1.0.19 → 1.0.21
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.
|
@@ -1,76 +1,88 @@
|
|
|
1
|
-
var
|
|
1
|
+
var A = Object.defineProperty, C = Object.defineProperties;
|
|
2
2
|
var B = Object.getOwnPropertyDescriptors;
|
|
3
|
-
var
|
|
3
|
+
var s = Object.getOwnPropertySymbols;
|
|
4
4
|
var E = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var
|
|
5
|
+
var b = (t, e, n) => e in t ? A(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, m = (t, e) => {
|
|
6
6
|
for (var n in e || (e = {}))
|
|
7
|
-
E.call(e, n) &&
|
|
8
|
-
if (
|
|
9
|
-
for (var n of
|
|
10
|
-
w.call(e, n) &&
|
|
7
|
+
E.call(e, n) && b(t, n, e[n]);
|
|
8
|
+
if (s)
|
|
9
|
+
for (var n of s(e))
|
|
10
|
+
w.call(e, n) && b(t, n, e[n]);
|
|
11
11
|
return t;
|
|
12
|
-
},
|
|
12
|
+
}, g = (t, e) => C(t, B(e));
|
|
13
13
|
var L = (t, e) => {
|
|
14
14
|
var n = {};
|
|
15
15
|
for (var i in t)
|
|
16
16
|
E.call(t, i) && e.indexOf(i) < 0 && (n[i] = t[i]);
|
|
17
|
-
if (t != null &&
|
|
18
|
-
for (var i of
|
|
17
|
+
if (t != null && s)
|
|
18
|
+
for (var i of s(t))
|
|
19
19
|
e.indexOf(i) < 0 && w.call(t, i) && (n[i] = t[i]);
|
|
20
20
|
return n;
|
|
21
21
|
};
|
|
22
|
-
import { useProperties as H, Text as
|
|
23
|
-
import { appendClassNames as
|
|
22
|
+
import { useProperties as H, Text as h, Link as z, WidgetLink as M, SymbolBadge as P, linkTabStyle as T, contentBox as W, borderTabStyle as V } from "@telia-ace/knowledge-widget-ui";
|
|
23
|
+
import { appendClassNames as p } from "@telia-ace/widget-utilities";
|
|
24
24
|
import o from "react";
|
|
25
|
-
import a, { css as
|
|
25
|
+
import a, { css as D } from "styled-components";
|
|
26
26
|
const X = (n) => {
|
|
27
27
|
var i = n, { className: t } = i, e = L(i, ["className"]);
|
|
28
28
|
const {
|
|
29
|
-
widget:
|
|
30
|
-
route:
|
|
29
|
+
widget: d,
|
|
30
|
+
route: l,
|
|
31
31
|
mode: u = "large",
|
|
32
|
-
iconSize:
|
|
32
|
+
iconSize: N = "large",
|
|
33
33
|
symbol: f,
|
|
34
34
|
descriptionLabel: r,
|
|
35
|
-
label:
|
|
35
|
+
label: c,
|
|
36
36
|
textAlign: y
|
|
37
|
-
} = H(), $ = y || (u === "large" ? "center" : "right"),
|
|
37
|
+
} = H(), $ = y || (u === "large" ? "center" : "right"), S = N === "large" ? "64" : "48", k = {
|
|
38
38
|
apiNotificationPriorityBy: "contacts"
|
|
39
39
|
};
|
|
40
40
|
if (u === "compact")
|
|
41
|
-
return /* @__PURE__ */ o.createElement(F,
|
|
42
|
-
className:
|
|
41
|
+
return /* @__PURE__ */ o.createElement(F, g(m({}, e), {
|
|
42
|
+
className: p(
|
|
43
|
+
t,
|
|
44
|
+
"humany-contact-link",
|
|
45
|
+
"humany-contact-link-compact"
|
|
46
|
+
),
|
|
43
47
|
textAlign: $
|
|
44
|
-
}), r && /* @__PURE__ */ o.createElement(
|
|
45
|
-
routeName:
|
|
46
|
-
},
|
|
48
|
+
}), r && /* @__PURE__ */ o.createElement(h, null, r), l ? /* @__PURE__ */ o.createElement(z, {
|
|
49
|
+
routeName: l
|
|
50
|
+
}, c) : /* @__PURE__ */ o.createElement(M, {
|
|
47
51
|
"aria-haspopup": "dialog",
|
|
48
52
|
role: "button",
|
|
49
|
-
activationOptions:
|
|
50
|
-
widgetName:
|
|
51
|
-
},
|
|
52
|
-
const
|
|
53
|
+
activationOptions: k,
|
|
54
|
+
widgetName: d
|
|
55
|
+
}, c));
|
|
56
|
+
const x = /* @__PURE__ */ o.createElement(o.Fragment, null, f ? /* @__PURE__ */ o.createElement(P, {
|
|
53
57
|
symbol: f
|
|
54
58
|
}) : /* @__PURE__ */ o.createElement(q, {
|
|
55
|
-
width:
|
|
59
|
+
width: S,
|
|
56
60
|
viewBox: "0 0 63 37",
|
|
57
61
|
fill: "none",
|
|
58
62
|
xmlns: "http://www.w3.org/2000/svg"
|
|
59
63
|
}, /* @__PURE__ */ o.createElement("path", {
|
|
60
64
|
d: "M1 1H62M1 1L24.7579 15.6328M1 1V36M62 1V36M62 1L38.8842 15.5402M1 36H62M1 36L24.7579 15.6328M62 36L38.8842 15.5402M38.8842 15.5402L37.0898 16.6689C33.8642 18.6979 29.7658 18.7172 26.5212 16.7188L24.7579 15.6328",
|
|
61
65
|
stroke: "#990AE3"
|
|
62
|
-
})),
|
|
63
|
-
return
|
|
64
|
-
className:
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
})), c && /* @__PURE__ */ o.createElement(j, null, c), r && /* @__PURE__ */ o.createElement(R, null, r));
|
|
67
|
+
return l ? /* @__PURE__ */ o.createElement(O, g(m({}, e), {
|
|
68
|
+
className: p(
|
|
69
|
+
t,
|
|
70
|
+
"humany-contact-link",
|
|
71
|
+
"humany-contact-link-large"
|
|
72
|
+
),
|
|
73
|
+
routeName: l
|
|
74
|
+
}), x) : /* @__PURE__ */ o.createElement(I, g(m({}, e), {
|
|
67
75
|
"aria-haspopup": "dialog",
|
|
68
76
|
role: "button",
|
|
69
|
-
className:
|
|
77
|
+
className: p(
|
|
78
|
+
t,
|
|
79
|
+
"humany-contact-link",
|
|
80
|
+
"humany-contact-link-large"
|
|
81
|
+
),
|
|
70
82
|
textAlign: $,
|
|
71
|
-
widgetName:
|
|
72
|
-
activationOptions:
|
|
73
|
-
}),
|
|
83
|
+
widgetName: d,
|
|
84
|
+
activationOptions: k
|
|
85
|
+
}), x);
|
|
74
86
|
}, F = a.div`
|
|
75
87
|
text-align: ${(t) => t.textAlign};
|
|
76
88
|
font-weight: 300;
|
|
@@ -96,21 +108,16 @@ const X = (n) => {
|
|
|
96
108
|
var e;
|
|
97
109
|
return (e = t.theme.colors) == null ? void 0 : e.primary;
|
|
98
110
|
}};
|
|
99
|
-
&:focus {
|
|
100
|
-
${
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
padding: ${(n) => {
|
|
105
|
-
var i, l;
|
|
106
|
-
return `calc(${(i = n.theme.sizes) == null ? void 0 : i.small} / 2) ${(l = n.theme.sizes) == null ? void 0 : l.small}`;
|
|
107
|
-
}};
|
|
108
|
-
`;
|
|
111
|
+
&:focus-visible {
|
|
112
|
+
${T}
|
|
113
|
+
padding: ${(t) => {
|
|
114
|
+
var e, n;
|
|
115
|
+
return `calc(${(e = t.theme.sizes) == null ? void 0 : e.small} / 2) ${(n = t.theme.sizes) == null ? void 0 : n.small}`;
|
|
109
116
|
}};
|
|
110
117
|
}
|
|
111
118
|
}
|
|
112
|
-
`,
|
|
113
|
-
${
|
|
119
|
+
`, v = D`
|
|
120
|
+
${W}
|
|
114
121
|
padding: ${(t) => {
|
|
115
122
|
var e;
|
|
116
123
|
return (e = t.theme.sizes) == null ? void 0 : e.large;
|
|
@@ -136,25 +143,22 @@ const X = (n) => {
|
|
|
136
143
|
return (e = t.theme.colors) == null ? void 0 : e.text;
|
|
137
144
|
}};
|
|
138
145
|
}
|
|
139
|
-
&:focus {
|
|
140
|
-
${
|
|
141
|
-
var e;
|
|
142
|
-
return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && D;
|
|
143
|
-
}};
|
|
146
|
+
&:focus-visible {
|
|
147
|
+
${V};
|
|
144
148
|
}
|
|
145
149
|
`, I = a(M)`
|
|
146
|
-
${
|
|
150
|
+
${v}
|
|
147
151
|
text-align: ${(t) => t.textAlign};
|
|
148
152
|
`, O = a(z)`
|
|
149
|
-
${
|
|
150
|
-
`, R = a(
|
|
153
|
+
${v}
|
|
154
|
+
`, R = a(h)`
|
|
151
155
|
line-height: 1.6em;
|
|
152
156
|
font-weight: 300;
|
|
153
157
|
font-size: ${(t) => {
|
|
154
158
|
var e;
|
|
155
159
|
return (e = t.theme.fonts) == null ? void 0 : e.normal;
|
|
156
160
|
}};
|
|
157
|
-
`, j = a(
|
|
161
|
+
`, j = a(h)`
|
|
158
162
|
display: block;
|
|
159
163
|
font-size: ${(t) => {
|
|
160
164
|
var e;
|
|
@@ -178,4 +182,4 @@ const X = (n) => {
|
|
|
178
182
|
export {
|
|
179
183
|
X as default
|
|
180
184
|
};
|
|
181
|
-
//# sourceMappingURL=contact-link.
|
|
185
|
+
//# sourceMappingURL=contact-link.f31b21b6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contact-link.f31b21b6.js","sources":["../src/contact-link.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n contentBox,\r\n Link,\r\n linkTabStyle,\r\n SymbolBadge,\r\n Text,\r\n useProperties,\r\n WidgetLink,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ContactLinkComponentProps } from './contact-link-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst ContactLink: React.FC<Props> = ({ className, ...other }) => {\r\n const {\r\n widget,\r\n route,\r\n mode = 'large',\r\n iconSize = 'large',\r\n symbol,\r\n descriptionLabel,\r\n label,\r\n textAlign,\r\n } = useProperties<ContactLinkComponentProps>();\r\n\r\n const align = textAlign ? textAlign : mode === 'large' ? 'center' : 'right';\r\n const iconSizePx = iconSize === 'large' ? '64' : '48';\r\n const activationOptions = {\r\n apiNotificationPriorityBy: 'contacts',\r\n };\r\n\r\n if (mode === 'compact') {\r\n return (\r\n <CompactWrapper\r\n {...other}\r\n className={appendClassNames(\r\n className,\r\n 'humany-contact-link',\r\n 'humany-contact-link-compact'\r\n )}\r\n textAlign={align}\r\n >\r\n {descriptionLabel && <Text>{descriptionLabel}</Text>}\r\n {route ? (\r\n <Link routeName={route}>{label}</Link>\r\n ) : (\r\n <WidgetLink\r\n aria-haspopup=\"dialog\"\r\n role=\"button\"\r\n activationOptions={activationOptions}\r\n widgetName={widget}\r\n >\r\n {label}\r\n </WidgetLink>\r\n )}\r\n </CompactWrapper>\r\n );\r\n }\r\n\r\n const children = (\r\n <>\r\n {symbol ? (\r\n <SymbolBadge symbol={symbol} />\r\n ) : (\r\n <ContactIcon\r\n width={iconSizePx}\r\n viewBox=\"0 0 63 37\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M1 1H62M1 1L24.7579 15.6328M1 1V36M62 1V36M62 1L38.8842 15.5402M1 36H62M1 36L24.7579 15.6328M62 36L38.8842 15.5402M38.8842 15.5402L37.0898 16.6689C33.8642 18.6979 29.7658 18.7172 26.5212 16.7188L24.7579 15.6328\"\r\n stroke=\"#990AE3\"\r\n />\r\n </ContactIcon>\r\n )}\r\n {label && <Heading>{label}</Heading>}\r\n {descriptionLabel && <Description>{descriptionLabel}</Description>}\r\n </>\r\n );\r\n\r\n return route ? (\r\n <StyledLink\r\n {...other}\r\n className={appendClassNames(\r\n className,\r\n 'humany-contact-link',\r\n 'humany-contact-link-large'\r\n )}\r\n routeName={route}\r\n >\r\n {children}\r\n </StyledLink>\r\n ) : (\r\n <StyledWidgetLink\r\n {...other}\r\n aria-haspopup=\"dialog\"\r\n role=\"button\"\r\n className={appendClassNames(\r\n className,\r\n 'humany-contact-link',\r\n 'humany-contact-link-large'\r\n )}\r\n textAlign={align}\r\n widgetName={widget}\r\n activationOptions={activationOptions}\r\n >\r\n {children}\r\n </StyledWidgetLink>\r\n );\r\n};\r\n\r\nconst CompactWrapper = styled.div<{ textAlign: string } & any>`\r\n text-align: ${(p) => p.textAlign};\r\n font-weight: 300;\r\n\r\n span,\r\n a {\r\n display: inline-block;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n }\r\n\r\n span {\r\n margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\r\n }\r\n a {\r\n text-decoration: underline;\r\n color: ${(p) => p.theme.colors?.primary};\r\n &:focus-visible {\r\n ${linkTabStyle}\r\n padding: ${(p) => `calc(${p.theme.sizes?.small} / 2) ${p.theme.sizes?.small}`};\r\n }\r\n }\r\n`;\r\n\r\nconst styling = css`\r\n ${contentBox}\r\n padding: ${(p) => p.theme.sizes?.large};\r\n text-align: center;\r\n cursor: pointer;\r\n text-decoration: none;\r\n i {\r\n font-size: ${(p) => p.theme.fonts?.huge};\r\n min-width: 1em;\r\n min-height: 1em;\r\n color: ${(p) => p.theme.colors?.primary};\r\n }\r\n span {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n &:focus-visible {\r\n ${borderTabStyle};\r\n }\r\n`;\r\n\r\nconst StyledWidgetLink = styled(WidgetLink)<any>`\r\n ${styling}\r\n text-align: ${(p) => p.textAlign};\r\n`;\r\n\r\nconst StyledLink = styled(Link)<any>`\r\n ${styling}\r\n`;\r\n\r\nconst Description = styled(Text)`\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n`;\r\n\r\nconst Heading = styled(Text)`\r\n display: block;\r\n font-size: ${(p) => p.theme.fonts?.medium};\r\n margin: ${(p) => p.theme.sizes?.normal} 0;\r\n`;\r\n\r\nconst ContactIcon = styled.svg`\r\n align-self: center;\r\n\r\n path {\r\n vector-effect: non-scaling-stroke;\r\n stroke: ${(p) => p.theme.colors?.primary};\r\n }\r\n`;\r\n\r\nexport default ContactLink;\r\n"],"names":["ContactLink","_a","_b","className","other","__objRest","widget","route","mode","iconSize","symbol","descriptionLabel","label","textAlign","useProperties","align","iconSizePx","activationOptions","React","CompactWrapper","__spreadProps","__spreadValues","appendClassNames","Text","Link","WidgetLink","children","SymbolBadge","ContactIcon","Heading","Description","StyledLink","StyledWidgetLink","styled","p","linkTabStyle","styling","css","contentBox","borderTabStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,IAA+B,CAACC,MAA4B;AAA5B,MAAAC,IAAAD,GAAE,aAAAE,MAAFD,GAAgBE,IAAAC,EAAhBH,GAAgB,CAAd;AAC9B,QAAA;AAAA,IACF,QAAAI;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,MACAC,EAAyC,GAEvCC,IAAQF,MAAwBL,MAAS,UAAU,WAAW,UAC9DQ,IAAaP,MAAa,UAAU,OAAO,MAC3CQ,IAAoB;AAAA,IACtB,2BAA2B;AAAA,EAAA;AAG/B,MAAIT,MAAS;AACT,WACK,gBAAAU,EAAA,cAAAC,GAAAC,EAAAC,EAAA,IACOjB,IADP;AAAA,MAEG,WAAWkB;AAAA,QACPnB;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,MACA,WAAWY;AAAA,IAAA,IAEVJ,KAAqB,gBAAAO,EAAA,cAAAK,GAAA,MAAMZ,CAAiB,GAC5CJ,IACI,gBAAAW,EAAA,cAAAM,GAAA;AAAA,MAAK,WAAWjB;AAAA,IAAQ,GAAAK,CAAM,IAE9B,gBAAAM,EAAA,cAAAO,GAAA;AAAA,MACG,iBAAc;AAAA,MACd,MAAK;AAAA,MACL,mBAAAR;AAAA,MACA,YAAYX;AAAA,IAAA,GAEXM,CACL,CAER;AAIF,QAAAc,IAEG,gBAAAR,EAAA,cAAAA,EAAA,UAAA,MAAAR,IACI,gBAAAQ,EAAA,cAAAS,GAAA;AAAA,IAAY,QAAAjB;AAAA,EAAA,CAAgB,IAE5B,gBAAAQ,EAAA,cAAAU,GAAA;AAAA,IACG,OAAOZ;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,EAAA,GAEL,gBAAAE,EAAA,cAAA,QAAA;AAAA,IACG,GAAE;AAAA,IACF,QAAO;AAAA,EAAA,CACX,CACJ,GAEHN,KAAU,gBAAAM,EAAA,cAAAW,GAAA,MAASjB,CAAM,GACzBD,KAAoB,gBAAAO,EAAA,cAACY,GAAa,MAAAnB,CAAiB,CACxD;AAGJ,SAAOJ,IACF,gBAAAW,EAAA,cAAAa,GAAAX,EAAAC,EAAA,IACOjB,IADP;AAAA,IAEG,WAAWkB;AAAA,MACPnB;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,IACA,WAAWI;AAAA,EAEV,IAAAmB,CACL,IAEC,gBAAAR,EAAA,cAAAc,GAAAZ,EAAAC,EAAA,IACOjB,IADP;AAAA,IAEG,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,WAAWkB;AAAA,MACPnB;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,IACA,WAAWY;AAAA,IACX,YAAYT;AAAA,IACZ,mBAAAW;AAAA,EAAA,IAECS,CACL;AAER,GAEMP,IAAiBc,EAAO;AAAA,kBACZ,CAACC,MAAMA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMN,CAACA,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA,oBAIvB,CAACiC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA,iBAIzB,CAACiC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,WAAR,gBAAAjC,EAAgB;AAAA;AAAA;AAAA,cAE1BkC;AAAA,uBACS,CAACD,MAAM;;AAAA,kBAAQjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe,eAAcC,IAAAgC,EAAE,MAAM,UAAR,gBAAAhC,EAAe;AAAA;AAAA;AAAA;AAAA,GAK5EkC,IAAUC;AAAA,MACVC;AAAA,eACS,CAACJ,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKhB,CAACiC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA;AAAA;AAAA,iBAG1B,CAACiC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,WAAR,gBAAAjC,EAAgB;AAAA;AAAA;AAAA;AAAA,iBAGvB,CAACiC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,WAAR,gBAAAjC,EAAgB;AAAA;AAAA;AAAA;AAAA,UAG9BsC;AAAA;AAAA,GAIJP,IAAmBC,EAAOR,CAAU;AAAA,MACpCW;AAAA,kBACY,CAACF,MAAMA,EAAE;AAAA,GAGrBH,IAAaE,EAAOT,CAAI;AAAA,MACxBY;AAAA,GAGAN,IAAcG,EAAOV,CAAI;AAAA;AAAA;AAAA,iBAGd,CAACW,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA,GAGjC4B,IAAUI,EAAOV,CAAI;AAAA;AAAA,iBAEV,CAACW,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA,cACzB,CAACiC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,UAAR,gBAAAjC,EAAe;AAAA;AAAA,GAG9B2B,IAAcK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKT,CAACC,MAAM;;AAAA,UAAAjC,IAAAiC,EAAE,MAAM,WAAR,gBAAAjC,EAAgB;AAAA;AAAA;AAAA;"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/contact-link-component.ts"],"sourcesContent":["import { Symbol } from '@telia-ace/knowledge-widget-core';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nexport type ContactLinkComponentProps = {\r\n widget: string;\r\n route: string;\r\n mode: 'large' | 'compact';\r\n iconSize: 'large' | 'small';\r\n symbol?: Symbol;\r\n label: string;\r\n descriptionLabel: string;\r\n textAlign: string;\r\n};\r\n\r\nconst ContactLinkComponent = (container: Container) => {\r\n return createReactComponent(container, 'contact-link', import('./contact-link'));\r\n};\r\n\r\nexport default ContactLinkComponent;\r\n"],"names":[],"mappings":";AAeM,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/contact-link-component.ts"],"sourcesContent":["import { Symbol } from '@telia-ace/knowledge-widget-core';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\nexport type ContactLinkComponentProps = {\r\n widget: string;\r\n route: string;\r\n mode: 'large' | 'compact';\r\n iconSize: 'large' | 'small';\r\n symbol?: Symbol;\r\n label: string;\r\n descriptionLabel: string;\r\n textAlign: string;\r\n};\r\n\r\nconst ContactLinkComponent = (container: Container) => {\r\n return createReactComponent(container, 'contact-link', import('./contact-link'));\r\n};\r\n\r\nexport default ContactLinkComponent;\r\n"],"names":["ContactLinkComponent","container","createReactComponent"],"mappings":";AAeM,MAAAA,IAAuB,CAACC,MACnBC,EAAqBD,GAAW,gBAAgB,OAAO,6BAAiB;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-contact-link",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"description": "Contact link component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"telia"
|
|
9
9
|
],
|
|
10
10
|
"main": "dist/index.js",
|
|
11
|
+
"sourceMain": "src/index.ts",
|
|
11
12
|
"type": "module",
|
|
12
13
|
"types": "dist/index.d.ts",
|
|
13
14
|
"files": [
|
|
@@ -25,9 +26,9 @@
|
|
|
25
26
|
},
|
|
26
27
|
"sideEffects": false,
|
|
27
28
|
"dependencies": {
|
|
28
|
-
"@telia-ace/knowledge-widget-core": "^1.0.
|
|
29
|
-
"@telia-ace/knowledge-widget-ui": "^1.0.
|
|
30
|
-
"@telia-ace/widget-utilities": "^1.0.
|
|
29
|
+
"@telia-ace/knowledge-widget-core": "^1.0.19",
|
|
30
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.25",
|
|
31
|
+
"@telia-ace/widget-utilities": "^1.0.4",
|
|
31
32
|
"@webprovisions/platform": "^1.1.2"
|
|
32
33
|
},
|
|
33
34
|
"peerDependencies": {
|
|
@@ -40,5 +41,5 @@
|
|
|
40
41
|
"@types/react-dom": "^16.8.0",
|
|
41
42
|
"@types/styled-components": "^5.1.7"
|
|
42
43
|
},
|
|
43
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "db190a67f912245c4145c037972fac2039bda698"
|
|
44
45
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"contact-link.df5d10eb.js","sources":["../src/contact-link.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n contentBox,\r\n Link,\r\n linkTabStyle,\r\n SymbolBadge,\r\n Text,\r\n useProperties,\r\n WidgetLink,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ContactLinkComponentProps } from './contact-link-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst ContactLink: React.FC<Props> = ({ className, ...other }) => {\r\n const {\r\n widget,\r\n route,\r\n mode = 'large',\r\n iconSize = 'large',\r\n symbol,\r\n descriptionLabel,\r\n label,\r\n textAlign,\r\n } = useProperties<ContactLinkComponentProps>();\r\n\r\n const align = textAlign ? textAlign : mode === 'large' ? 'center' : 'right';\r\n const iconSizePx = iconSize === 'large' ? '64' : '48';\r\n const activationOptions = {\r\n apiNotificationPriorityBy: 'contacts',\r\n };\r\n\r\n if (mode === 'compact') {\r\n return (\r\n <CompactWrapper\r\n {...other}\r\n className={appendClassNames(\r\n className,\r\n 'humany-contact-link',\r\n 'humany-contact-link-compact'\r\n )}\r\n textAlign={align}\r\n >\r\n {descriptionLabel && <Text>{descriptionLabel}</Text>}\r\n {route ? (\r\n <Link routeName={route}>{label}</Link>\r\n ) : (\r\n <WidgetLink\r\n aria-haspopup=\"dialog\"\r\n role=\"button\"\r\n activationOptions={activationOptions}\r\n widgetName={widget}\r\n >\r\n {label}\r\n </WidgetLink>\r\n )}\r\n </CompactWrapper>\r\n );\r\n }\r\n\r\n const children = (\r\n <>\r\n {symbol ? (\r\n <SymbolBadge symbol={symbol} />\r\n ) : (\r\n <ContactIcon\r\n width={iconSizePx}\r\n viewBox=\"0 0 63 37\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M1 1H62M1 1L24.7579 15.6328M1 1V36M62 1V36M62 1L38.8842 15.5402M1 36H62M1 36L24.7579 15.6328M62 36L38.8842 15.5402M38.8842 15.5402L37.0898 16.6689C33.8642 18.6979 29.7658 18.7172 26.5212 16.7188L24.7579 15.6328\"\r\n stroke=\"#990AE3\"\r\n />\r\n </ContactIcon>\r\n )}\r\n {label && <Heading>{label}</Heading>}\r\n {descriptionLabel && <Description>{descriptionLabel}</Description>}\r\n </>\r\n );\r\n\r\n return route ? (\r\n <StyledLink\r\n {...other}\r\n className={appendClassNames(\r\n className,\r\n 'humany-contact-link',\r\n 'humany-contact-link-large'\r\n )}\r\n routeName={route}\r\n >\r\n {children}\r\n </StyledLink>\r\n ) : (\r\n <StyledWidgetLink\r\n {...other}\r\n aria-haspopup=\"dialog\"\r\n role=\"button\"\r\n className={appendClassNames(\r\n className,\r\n 'humany-contact-link',\r\n 'humany-contact-link-large'\r\n )}\r\n textAlign={align}\r\n widgetName={widget}\r\n activationOptions={activationOptions}\r\n >\r\n {children}\r\n </StyledWidgetLink>\r\n );\r\n};\r\n\r\nconst CompactWrapper = styled.div<{ textAlign: string } & any>`\r\n text-align: ${(p) => p.textAlign};\r\n font-weight: 300;\r\n\r\n span,\r\n a {\r\n display: inline-block;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n }\r\n\r\n span {\r\n margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\r\n }\r\n a {\r\n text-decoration: underline;\r\n color: ${(p) => p.theme.colors?.primary};\r\n &:focus {\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n ${linkTabStyle}\r\n padding: ${(p) => `calc(${p.theme.sizes?.small} / 2) ${p.theme.sizes?.small}`};\r\n `};\r\n }\r\n }\r\n`;\r\n\r\nconst styling = css`\r\n ${contentBox}\r\n padding: ${(p) => p.theme.sizes?.large};\r\n text-align: center;\r\n cursor: pointer;\r\n text-decoration: none;\r\n i {\r\n font-size: ${(p) => p.theme.fonts?.huge};\r\n min-width: 1em;\r\n min-height: 1em;\r\n color: ${(p) => p.theme.colors?.primary};\r\n }\r\n span {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle};\r\n }\r\n`;\r\n\r\nconst StyledWidgetLink = styled(WidgetLink)<any>`\r\n ${styling}\r\n text-align: ${(p) => p.textAlign};\r\n`;\r\n\r\nconst StyledLink = styled(Link)<any>`\r\n ${styling}\r\n`;\r\n\r\nconst Description = styled(Text)`\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n`;\r\n\r\nconst Heading = styled(Text)`\r\n display: block;\r\n font-size: ${(p) => p.theme.fonts?.medium};\r\n margin: ${(p) => p.theme.sizes?.normal} 0;\r\n`;\r\n\r\nconst ContactIcon = styled.svg`\r\n align-self: center;\r\n\r\n path {\r\n vector-effect: non-scaling-stroke;\r\n stroke: ${(p) => p.theme.colors?.primary};\r\n }\r\n`;\r\n\r\nexport default ContactLink;\r\n"],"names":[],"mappings":"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"}
|