@telia/teddy 0.6.8 → 0.6.10

package/dist/components/circle-bar/circle-bar.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const components_tooltip_index = require("../tooltip/index.cjs");
+const components_circleBar_css = require("./css.cjs");
+const CircleBar = ({ title, value, tooltip, tooltipLocation = "left" }) => {
+  const radius = 180;
+  const gapSize = 150;
+  const rotate = 114;
+  const circumference = 2 * Math.PI * radius;
+  const fillableCircumference = circumference - gapSize;
+  const percentFilled = value / 100;
+  const offset = circumference - fillableCircumference * percentFilled;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("teddy-circle-bar"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${components_circleBar_css.css("__tooltip")} ${components_circleBar_css.css("__tooltip-" + tooltipLocation)}`, children: tooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: components_circleBar_css.css("__tooltip-content"), children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__svg-container"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox: "0 0 400 400",
+          className: components_circleBar_css.css("__svg"),
+          style: { strokeDasharray: `${fillableCircumference}, ${circumference}`, rotate: `${rotate}deg` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "35", stroke: "#F5E0FF", fill: "none" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: "200",
+                cy: "200",
+                r: radius,
+                strokeWidth: "35.25",
+                stroke: "#4E0174",
+                fill: "none",
+                strokeDasharray: `${circumference}`,
+                strokeDashoffset: offset,
+                style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__info-box"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__value-label"), children: [
+          value,
+          " %"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title })
+      ] })
+    ] })
+  ] });
+};
+exports.CircleBar = CircleBar;
+exports.default = CircleBar;

package/dist/components/circle-bar/circle-bar.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+
+export interface CircleBarProps {
+    title: string;
+    value: number;
+    tooltip?: string;
+    tooltipLocation?: 'left' | 'right';
+}
+export declare const CircleBar: React.FC<CircleBarProps>;
+export default CircleBar;

package/dist/components/circle-bar/circle-bar.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Tooltip } from "../tooltip/index.js";
+import { css } from "./css.js";
+const CircleBar = ({ title, value, tooltip, tooltipLocation = "left" }) => {
+  const radius = 180;
+  const gapSize = 150;
+  const rotate = 114;
+  const circumference = 2 * Math.PI * radius;
+  const fillableCircumference = circumference - gapSize;
+  const percentFilled = value / 100;
+  const offset = circumference - fillableCircumference * percentFilled;
+  return /* @__PURE__ */ jsxs("div", { className: css("teddy-circle-bar"), children: [
+    /* @__PURE__ */ jsx("div", { className: `${css("__tooltip")} ${css("__tooltip-" + tooltipLocation)}`, children: tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, {}),
+      /* @__PURE__ */ jsx(Tooltip.Content, { className: css("__tooltip-content"), children: tooltip })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: css("__svg-container"), children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox: "0 0 400 400",
+          className: css("__svg"),
+          style: { strokeDasharray: `${fillableCircumference}, ${circumference}`, rotate: `${rotate}deg` },
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "35", stroke: "#F5E0FF", fill: "none" }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "200",
+                cy: "200",
+                r: radius,
+                strokeWidth: "35.25",
+                stroke: "#4E0174",
+                fill: "none",
+                strokeDasharray: `${circumference}`,
+                strokeDashoffset: offset,
+                style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: css("__info-box"), children: [
+        /* @__PURE__ */ jsxs("div", { className: css("__value-label"), children: [
+          value,
+          " %"
+        ] }),
+        /* @__PURE__ */ jsx("h3", { children: title })
+      ] })
+    ] })
+  ] });
+};
+export {
+  CircleBar,
+  CircleBar as default
+};

package/dist/components/circle-bar/css.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const styles = {
+  "teddy-circle-bar": "_teddy-circle-bar_40j64_1",
+  "teddy-circle-bar__tooltip": "_teddy-circle-bar__tooltip_40j64_6",
+  "teddy-circle-bar__tooltip-left": "_teddy-circle-bar__tooltip-left_40j64_12",
+  "teddy-circle-bar__tooltip-right": "_teddy-circle-bar__tooltip-right_40j64_15",
+  "teddy-circle-bar__tooltip-content": "_teddy-circle-bar__tooltip-content_40j64_18",
+  "teddy-circle-bar__svg-container": "_teddy-circle-bar__svg-container_40j64_21",
+  "teddy-circle-bar__svg": "_teddy-circle-bar__svg_40j64_21",
+  "teddy-circle-bar__info-box": "_teddy-circle-bar__info-box_40j64_31",
+  "teddy-circle-bar__value-label": "_teddy-circle-bar__value-label_40j64_37"
+};
+const rootClassName = "teddy-circle-bar";
+const css = (suffix) => {
+  if (suffix == null)
+    return "";
+  let tmp = null;
+  if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
+    tmp = clsx([styles[`${rootClassName + suffix}`]], "");
+  } else {
+    tmp = clsx([styles[`${suffix}`]], "");
+  }
+  if (!tmp) {
+    console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
+  }
+  return tmp;
+};
+exports.css = css;

package/dist/components/circle-bar/css.d.ts

@@ -0,0 +1 @@
+export declare const css: (suffix: string | null) => string;

package/dist/components/circle-bar/css.js

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+const styles = {
+  "teddy-circle-bar": "_teddy-circle-bar_40j64_1",
+  "teddy-circle-bar__tooltip": "_teddy-circle-bar__tooltip_40j64_6",
+  "teddy-circle-bar__tooltip-left": "_teddy-circle-bar__tooltip-left_40j64_12",
+  "teddy-circle-bar__tooltip-right": "_teddy-circle-bar__tooltip-right_40j64_15",
+  "teddy-circle-bar__tooltip-content": "_teddy-circle-bar__tooltip-content_40j64_18",
+  "teddy-circle-bar__svg-container": "_teddy-circle-bar__svg-container_40j64_21",
+  "teddy-circle-bar__svg": "_teddy-circle-bar__svg_40j64_21",
+  "teddy-circle-bar__info-box": "_teddy-circle-bar__info-box_40j64_31",
+  "teddy-circle-bar__value-label": "_teddy-circle-bar__value-label_40j64_37"
+};
+const rootClassName = "teddy-circle-bar";
+const css = (suffix) => {
+  if (suffix == null)
+    return "";
+  let tmp = null;
+  if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
+    tmp = clsx([styles[`${rootClassName + suffix}`]], "");
+  } else {
+    tmp = clsx([styles[`${suffix}`]], "");
+  }
+  if (!tmp) {
+    console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
+  }
+  return tmp;
+};
+export {
+  css
+};

package/dist/components/circle-bar/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_circleBar_circleBar = require("./circle-bar.cjs");
+exports.CircleBar = components_circleBar_circleBar.CircleBar;

package/dist/components/circle-bar/index.d.ts

@@ -0,0 +1,2 @@
+export type { CircleBarProps } from './circle-bar';
+export { CircleBar } from './circle-bar';

package/dist/components/circle-bar/index.js

@@ -0,0 +1,4 @@
+import { CircleBar } from "./circle-bar.js";
+export {
+  CircleBar
+};

package/dist/components/navigation-menu/global-navigation/utils.cjs

@@ -7,7 +7,8 @@ const APP_KEYS = {
   "my-pages": "my-pages",
   "my-business": "my-business",
   "my-portal": "my-portal",
-  "business-net": "business-net"
+  "business-net": "business-net",
+  "telia-hub": "telia-hub"
 };
 const MY_PAGE_LINKS = {
   name: "Min Side",
@@ -47,6 +48,13 @@ const MY_BUSINESS_LINKS = {
   links: [],
   icon: "home"
 };
+const TELIA_HUB_LINKS = {
+  name: "Telia Hub",
+  link: "https://beta.hub.telia.no/",
+  appKey: APP_KEYS["telia-hub"],
+  links: [],
+  icon: "people-hub"
+};
 const MY_PORTAL_LINKS = {
   name: "Min portal",
   link: "https://minportal.telia.no",
@@ -69,6 +77,7 @@ const SMART_CONNECT_LINKS = {
   icon: "smart-connect"
 };
 const LOGGED_IN_LINKS_BUSINESS = [
+  TELIA_HUB_LINKS,
   MY_BUSINESS_LINKS,
   MY_PORTAL_LINKS,
   SMART_CONNECT_LINKS,
@@ -1079,5 +1088,6 @@ exports.MY_PAGE_LINKS = MY_PAGE_LINKS;
 exports.MY_PORTAL_LINKS = MY_PORTAL_LINKS;
 exports.PRIVATE_LINKS = PRIVATE_LINKS;
 exports.SMART_CONNECT_LINKS = SMART_CONNECT_LINKS;
+exports.TELIA_HUB_LINKS = TELIA_HUB_LINKS;
 exports.getActiveSubLink = getActiveSubLink;
 exports.getLinks = getLinks;

package/dist/components/navigation-menu/global-navigation/utils.d.ts

@@ -8,6 +8,7 @@ export declare const APP_KEYS: {
     readonly 'my-business': "my-business";
     readonly 'my-portal': "my-portal";
     readonly 'business-net': "business-net";
+    readonly 'telia-hub': "telia-hub";
 };
 export type AppKey = (typeof APP_KEYS)[keyof typeof APP_KEYS];
 export type Link = {
@@ -51,6 +52,13 @@ export declare const MY_BUSINESS_LINKS: {
     readonly links: [];
     readonly icon: "home";
 };
+export declare const TELIA_HUB_LINKS: {
+    readonly name: "Telia Hub";
+    readonly link: "https://beta.hub.telia.no/";
+    readonly appKey: "telia-hub";
+    readonly links: [];
+    readonly icon: "people-hub";
+};
 export declare const MY_PORTAL_LINKS: {
     readonly name: "Min portal";
     readonly link: "https://minportal.telia.no";
@@ -73,6 +81,12 @@ export declare const SMART_CONNECT_LINKS: {
     readonly icon: "smart-connect";
 };
 export declare const LOGGED_IN_LINKS_BUSINESS: [{
+    readonly name: "Telia Hub";
+    readonly link: "https://beta.hub.telia.no/";
+    readonly appKey: "telia-hub";
+    readonly links: [];
+    readonly icon: "people-hub";
+}, {
     readonly name: "Min bedrift";
     readonly link: "https://beta.minbedrift.telia.no";
     readonly appKey: "my-business";
@@ -122,6 +136,12 @@ export declare const LOGGED_IN_LINKS: [{
         readonly appKey: "my-pages";
         readonly icon: "secured-1";
     }];
+}, {
+    readonly name: "Telia Hub";
+    readonly link: "https://beta.hub.telia.no/";
+    readonly appKey: "telia-hub";
+    readonly links: [];
+    readonly icon: "people-hub";
 }, {
     readonly name: "Min bedrift";
     readonly link: "https://beta.minbedrift.telia.no";

package/dist/components/navigation-menu/global-navigation/utils.js

@@ -5,7 +5,8 @@ const APP_KEYS = {
   "my-pages": "my-pages",
   "my-business": "my-business",
   "my-portal": "my-portal",
-  "business-net": "business-net"
+  "business-net": "business-net",
+  "telia-hub": "telia-hub"
 };
 const MY_PAGE_LINKS = {
   name: "Min Side",
@@ -45,6 +46,13 @@ const MY_BUSINESS_LINKS = {
   links: [],
   icon: "home"
 };
+const TELIA_HUB_LINKS = {
+  name: "Telia Hub",
+  link: "https://beta.hub.telia.no/",
+  appKey: APP_KEYS["telia-hub"],
+  links: [],
+  icon: "people-hub"
+};
 const MY_PORTAL_LINKS = {
   name: "Min portal",
   link: "https://minportal.telia.no",
@@ -67,6 +75,7 @@ const SMART_CONNECT_LINKS = {
   icon: "smart-connect"
 };
 const LOGGED_IN_LINKS_BUSINESS = [
+  TELIA_HUB_LINKS,
   MY_BUSINESS_LINKS,
   MY_PORTAL_LINKS,
   SMART_CONNECT_LINKS,
@@ -1078,6 +1087,7 @@ export {
   MY_PORTAL_LINKS,
   PRIVATE_LINKS,
   SMART_CONNECT_LINKS,
+  TELIA_HUB_LINKS,
   getActiveSubLink,
   getLinks
 };

package/dist/style.css

@@ -7675,4 +7675,49 @@
 :root {
   --teddy-scale: var(--teddy-rescale, 1);
   interpolate-size: allow-keywords;
+}._teddy-circle-bar_40j64_1 {
+  position: relative;
+  width: max-content;
+  padding: 17px;
+}
+._teddy-circle-bar__tooltip_40j64_6 {
+  width: max-content;
+  position: absolute;
+  top: -2px;
+  z-index: 1;
+}
+._teddy-circle-bar__tooltip-left_40j64_12 {
+  left: -2px;
+}
+._teddy-circle-bar__tooltip-right_40j64_15 {
+  right: -2px;
+}
+._teddy-circle-bar__tooltip-content_40j64_18 {
+  max-width: 300px;
+}
+._teddy-circle-bar__svg-container_40j64_21 {
+  width: 155px;
+  position: relative;
+}
+._teddy-circle-bar__svg_40j64_21 {
+  transform-origin: center center;
+  fill: transparent;
+  stroke-linecap: round;
+  stroke: #c4c4c4;
+}
+._teddy-circle-bar__info-box_40j64_31 {
+  position: absolute;
+  width: 100%;
+  top: 47px;
+  text-align: center;
+}
+._teddy-circle-bar__value-label_40j64_37 {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+._teddy-circle-bar_40j64_1 h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
 }

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.6.8",
+  "version": "0.6.10",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"