@telia-ace/knowledge-widget-components-contact-link 0.0.1

package/contact-link-44666ccd.js

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),w=require("@telia-ace/widget-ui"),b=require("@emotion/react"),c=require("@emotion/styled"),i=require("@telia-ace/knowledge-widget-ui"),m=require("@telia-ace/widget-utilities"),j=({className:e,...t})=>{const{widget:o,route:s,mode:a="large",iconSize:y="large",symbol:g,descriptionLabel:l,label:r,textAlign:h}=i.useProperties(),$=w.useContainer(),{events:d}=$.get("$widget"),p=h||(a==="large"?"center":"right"),f=y==="large"?"64":"48",u={apiNotificationPriorityBy:"contacts"};if(a==="compact")return n.jsxs(L,{...t,className:m.appendClassNames(e,"humany-contact-link","humany-contact-link-compact"),onClick:()=>{d.dispatch("tracking:contact-link-clicked",{})},textAlign:p,children:[l&&n.jsx(i.Text,{children:l}),s?n.jsx(i.Link,{routeName:s,children:r}):n.jsx(i.WidgetLink,{"aria-haspopup":"dialog",role:"button",activationOptions:u,widgetName:o,children:r})]});const k=n.jsxs(n.Fragment,{children:[g?n.jsx(i.SymbolBadge,{symbol:g}):n.jsx(N,{width:f,viewBox:"0 0 63 37",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.jsx("path",{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",stroke:"#990AE3"})}),r&&n.jsx(M,{children:r}),l&&n.jsx(v,{children:l})]});return s?n.jsx(C,{...t,className:m.appendClassNames(e,"humany-contact-link","humany-contact-link-large"),onClick:()=>{d.dispatch("tracking:contact-link-clicked",{})},routeName:s,children:k}):n.jsx(z,{...t,"aria-haspopup":"dialog",role:"button",className:m.appendClassNames(e,"humany-contact-link","humany-contact-link-large"),onClick:()=>{d.dispatch("tracking:contact-link-clicked",{})},textAlign:p,widgetName:o,activationOptions:u,children:k})},L=c.div`
+  text-align: ${e=>e.textAlign};
+  font-weight: 300;
+
+  span,
+  a {
+    display: inline-block;
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  }
+
+  span {
+    margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} 0 0;
+  }
+  a {
+    text-decoration: underline;
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+    &:focus-visible {
+      ${i.linkTabStyle}
+      padding: ${e=>{var t,o;return`calc(${(t=e.theme.sizes)==null?void 0:t.small} / 2) ${(o=e.theme.sizes)==null?void 0:o.small}`}};
+    }
+  }
+`,x=e=>{var t,o,s,a;return b.css`
+  ${i.contentBox(e)}
+  padding: ${(t=e.theme.sizes)==null?void 0:t.large};
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  i {
+    font-size: ${(o=e.theme.fonts)==null?void 0:o.huge};
+    min-width: 1em;
+    min-height: 1em;
+    color: ${(s=e.theme.colors)==null?void 0:s.primary};
+  }
+  span {
+    color: ${(a=e.theme.colors)==null?void 0:a.text};
+  }
+  &:focus-visible {
+    ${i.borderTabStyle(e)};
+  }
+`},z=c(i.WidgetLink)`
+  ${x}
+  text-align: ${e=>e.textAlign};
+`,C=c(i.Link)`
+  ${x}
+`,v=c(i.Text)`
+  line-height: 1.6em;
+  font-weight: 300;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+`,M=c(i.Text)`
+  display: block;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.medium}};
+  margin: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} 0;
+`,N=c.svg`
+  align-self: center;
+
+  path {
+    vector-effect: non-scaling-stroke;
+    stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+  }
+`;exports.default=j;

package/contact-link-bf35f02f.mjs

@@ -0,0 +1,193 @@
+import { jsxs as u, jsx as n, Fragment as z } from "react/jsx-runtime";
+import { useContainer as v } from "@telia-ace/widget-ui";
+import { css as C } from "@emotion/react";
+import c from "@emotion/styled";
+import { useProperties as M, Text as d, Link as $, WidgetLink as y, SymbolBadge as N, linkTabStyle as S, contentBox as A, borderTabStyle as B } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as m } from "@telia-ace/widget-utilities";
+const G = ({ className: t, ...e }) => {
+  const {
+    widget: i,
+    route: o,
+    mode: a = "large",
+    iconSize: b = "large",
+    symbol: g,
+    descriptionLabel: l,
+    label: r,
+    textAlign: h
+  } = M(), w = v(), { events: s } = w.get("$widget"), p = h || (a === "large" ? "center" : "right"), L = b === "large" ? "64" : "48", k = {
+    apiNotificationPriorityBy: "contacts"
+  };
+  if (a === "compact")
+    return /* @__PURE__ */ u(
+      H,
+      {
+        ...e,
+        className: m(
+          t,
+          "humany-contact-link",
+          "humany-contact-link-compact"
+        ),
+        onClick: () => {
+          s.dispatch("tracking:contact-link-clicked", {});
+        },
+        textAlign: p,
+        children: [
+          l && /* @__PURE__ */ n(d, { children: l }),
+          o ? /* @__PURE__ */ n($, { routeName: o, children: r }) : /* @__PURE__ */ n(
+            y,
+            {
+              "aria-haspopup": "dialog",
+              role: "button",
+              activationOptions: k,
+              widgetName: i,
+              children: r
+            }
+          )
+        ]
+      }
+    );
+  const f = /* @__PURE__ */ u(z, { children: [
+    g ? /* @__PURE__ */ n(N, { symbol: g }) : /* @__PURE__ */ n(
+      V,
+      {
+        width: L,
+        viewBox: "0 0 63 37",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ n(
+          "path",
+          {
+            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",
+            stroke: "#990AE3"
+          }
+        )
+      }
+    ),
+    r && /* @__PURE__ */ n(j, { children: r }),
+    l && /* @__PURE__ */ n(W, { children: l })
+  ] });
+  return o ? /* @__PURE__ */ n(
+    T,
+    {
+      ...e,
+      className: m(
+        t,
+        "humany-contact-link",
+        "humany-contact-link-large"
+      ),
+      onClick: () => {
+        s.dispatch("tracking:contact-link-clicked", {});
+      },
+      routeName: o,
+      children: f
+    }
+  ) : /* @__PURE__ */ n(
+    P,
+    {
+      ...e,
+      "aria-haspopup": "dialog",
+      role: "button",
+      className: m(
+        t,
+        "humany-contact-link",
+        "humany-contact-link-large"
+      ),
+      onClick: () => {
+        s.dispatch("tracking:contact-link-clicked", {});
+      },
+      textAlign: p,
+      widgetName: i,
+      activationOptions: k,
+      children: f
+    }
+  );
+}, H = c.div`
+  text-align: ${(t) => t.textAlign};
+  font-weight: 300;
+
+  span,
+  a {
+    display: inline-block;
+    font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+  }
+
+  span {
+    margin: 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}} 0 0;
+  }
+  a {
+    text-decoration: underline;
+    color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+    &:focus-visible {
+      ${S}
+      padding: ${(t) => {
+  var e, i;
+  return `calc(${(e = t.theme.sizes) == null ? void 0 : e.small} / 2) ${(i = t.theme.sizes) == null ? void 0 : i.small}`;
+}};
+    }
+  }
+`, x = (t) => {
+  var e, i, o, a;
+  return C`
+  ${A(t)}
+  padding: ${(e = t.theme.sizes) == null ? void 0 : e.large};
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  i {
+    font-size: ${(i = t.theme.fonts) == null ? void 0 : i.huge};
+    min-width: 1em;
+    min-height: 1em;
+    color: ${(o = t.theme.colors) == null ? void 0 : o.primary};
+  }
+  span {
+    color: ${(a = t.theme.colors) == null ? void 0 : a.text};
+  }
+  &:focus-visible {
+    ${B(t)};
+  }
+`;
+}, P = c(y)`
+  ${x}
+  text-align: ${(t) => t.textAlign};
+`, T = c($)`
+  ${x}
+`, W = c(d)`
+  line-height: 1.6em;
+  font-weight: 300;
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+`, j = c(d)`
+  display: block;
+  font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.medium;
+}};
+  margin: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.normal;
+}} 0;
+`, V = c.svg`
+  align-self: center;
+
+  path {
+    vector-effect: non-scaling-stroke;
+    stroke: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+  }
+`;
+export {
+  G as default
+};

package/contact-link-component.d.ts

@@ -0,0 +1,15 @@
+import { Symbol } from '../../../knowledge/core/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+export type ContactLinkComponentProps = {
+    widget: string;
+    route: string;
+    mode: 'large' | 'compact';
+    iconSize: 'large' | 'small';
+    symbol?: Symbol;
+    label: string;
+    descriptionLabel: string;
+    textAlign: string;
+};
+declare const ContactLinkComponent: (container: Container) => Promise<void>;
+export default ContactLinkComponent;

package/contact-link.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+};
+declare const ContactLink: React.FC<Props>;
+export default ContactLink;

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ContactLinkComponent } from './contact-link-component';
+
+export default ContactLinkComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const t=require("@telia-ace/knowledge-widget-ui"),n=e=>t.createReactComponent(e,"contact-link",Promise.resolve().then(()=>require("./contact-link-44666ccd.js")));module.exports=n;

package/index.mjs

@@ -0,0 +1,9 @@
+import { createReactComponent as o } from "@telia-ace/knowledge-widget-ui";
+const e = (t) => o(
+  t,
+  "contact-link",
+  import("./contact-link-bf35f02f.mjs")
+);
+export {
+  e as default
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@telia-ace/knowledge-widget-components-contact-link",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/knowledge-widget-core": "*",
+    "@telia-ace/knowledge-widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@webprovisions/platform": "^1.1.4",
+    "@telia-ace/widget-ui": "*"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}