@telia/teddy 0.1.6 → 0.1.7

package/dist/components/index.cjs

@@ -19,6 +19,7 @@ const components_drawer_index = require("./drawer/index.cjs");
 const components_image_image = require("./image/image.cjs");
 const components_chip_index = require("./chip/index.cjs");
 const components_datePicker_datePicker = require("./date-picker/date-picker.cjs");
+const components_metricmeter_metricmeter = require("./metricmeter/metricmeter.cjs");
 const components_notification_notification = require("./notification/notification.cjs");
 const components_radioGroup_index = require("./radio-group/index.cjs");
 const components_box_box = require("./box/box.cjs");
@@ -73,6 +74,7 @@ exports.Drawer = components_drawer_index.Drawer;
 exports.Image = components_image_image.Image;
 exports.Chip = components_chip_index.Chip;
 exports.DatePicker = components_datePicker_datePicker.DatePicker;
+exports.MetricMeter = components_metricmeter_metricmeter.MetricMeter;
 exports.Notification = components_notification_notification.Notification;
 exports.RadioGroup = components_radioGroup_index.RadioGroup;
 exports.Box = components_box_box.Box;

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export * from './drawer';
 export * from './image';
 export * from './chip';
 export * from './date-picker';
+export * from './metricmeter';
 export * from './modal';
 export * from './notification';
 export * from './radio-group';

package/dist/components/index.js

@@ -17,6 +17,7 @@ import { Drawer } from "./drawer/index.js";
 import { Image } from "./image/image.js";
 import { Chip } from "./chip/index.js";
 import { DatePicker } from "./date-picker/date-picker.js";
+import { MetricMeter } from "./metricmeter/metricmeter.js";
 import { Notification } from "./notification/notification.js";
 import { RadioGroup } from "./radio-group/index.js";
 import { Box } from "./box/box.js";
@@ -80,6 +81,7 @@ export {
   Label,
   Link,
   List,
+  MetricMeter,
   M as Modal,
   N as NavigationMenu,
   Notabene,

package/dist/components/metricmeter/css.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const metricmeter = "_metricmeter_1wov3_1";
+const metricmeter__svg = "_metricmeter__svg_1wov3_11";
+const metricmeter__controls = "_metricmeter__controls_1wov3_28";
+const metricmeter__button = "_metricmeter__button_1wov3_37";
+const styles = {
+  metricmeter,
+  metricmeter__svg,
+  "metricmeter__svg-container": "_metricmeter__svg-container_1wov3_25",
+  metricmeter__controls,
+  metricmeter__button,
+  "metricmeter__button--decrease": "_metricmeter__button--decrease_1wov3_49",
+  "metricmeter__button--disabled": "_metricmeter__button--disabled_1wov3_53",
+  "metricmeter__label-container": "_metricmeter__label-container_1wov3_59",
+  "metricmeter__speed-label": "_metricmeter__speed-label_1wov3_66",
+  "metricmeter__speed-unit-label": "_metricmeter__speed-unit-label_1wov3_70"
+};
+const rootClassName = "metricmeter";
+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/metricmeter/css.d.ts

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

package/dist/components/metricmeter/css.js

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+const metricmeter = "_metricmeter_1wov3_1";
+const metricmeter__svg = "_metricmeter__svg_1wov3_11";
+const metricmeter__controls = "_metricmeter__controls_1wov3_28";
+const metricmeter__button = "_metricmeter__button_1wov3_37";
+const styles = {
+  metricmeter,
+  metricmeter__svg,
+  "metricmeter__svg-container": "_metricmeter__svg-container_1wov3_25",
+  metricmeter__controls,
+  metricmeter__button,
+  "metricmeter__button--decrease": "_metricmeter__button--decrease_1wov3_49",
+  "metricmeter__button--disabled": "_metricmeter__button--disabled_1wov3_53",
+  "metricmeter__label-container": "_metricmeter__label-container_1wov3_59",
+  "metricmeter__speed-label": "_metricmeter__speed-label_1wov3_66",
+  "metricmeter__speed-unit-label": "_metricmeter__speed-unit-label_1wov3_70"
+};
+const rootClassName = "metricmeter";
+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/metricmeter/index.cjs

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

package/dist/components/metricmeter/index.d.ts

@@ -0,0 +1,2 @@
+export { MetricMeter } from './metricmeter';
+export type { MetricMeterProps } from './metricmeter';

package/dist/components/metricmeter/index.js

@@ -0,0 +1,4 @@
+import { MetricMeter } from "./metricmeter.js";
+export {
+  MetricMeter
+};

package/dist/components/metricmeter/metricmeter.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const components_metricmeter_css = require("./css.cjs");
+const React = require("react");
+const MetricMeter = ({
+  title = null,
+  fillColor = "#4e0174",
+  backgroundColor = "#c4c4c4",
+  maxSpeed = 100,
+  minSpeed = 0,
+  speedDelta = 10,
+  initial = 0,
+  speedUnitLabel = "Mbps",
+  onSelectedValue = (e) => {
+    console.log(e);
+  }
+}) => {
+  const [speed, setSpeed] = React.useState(initial);
+  const increaseSpeed = () => {
+    const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, true);
+    const newSpeed = Math.min(speed + delta, maxSpeed);
+    if (speed != newSpeed) {
+      setSpeed(newSpeed);
+      if (onSelectedValue) {
+        onSelectedValue(newSpeed);
+      }
+    }
+  };
+  const decreaseSpeed = () => {
+    const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, false);
+    const newSpeed = Math.max(speed - delta, minSpeed);
+    if (speed != newSpeed && newSpeed >= minSpeed) {
+      setSpeed(newSpeed);
+      if (onSelectedValue) {
+        onSelectedValue(newSpeed);
+      }
+    }
+  };
+  const radius = 152;
+  const circumference = 2 * 3.1415926535 * radius;
+  const start = 955.04417;
+  const end = 286.51317;
+  const spread = start - end;
+  let percentFilled = (speed - minSpeed) / (maxSpeed - minSpeed);
+  if (percentFilled === 0 && minSpeed > 0) {
+    percentFilled = 0.01;
+  }
+  const offset = start - spread * percentFilled;
+  const incrementalDisabled = speed === maxSpeed;
+  const decrementDisabled = speed === minSpeed;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("metricmeter"), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: components_metricmeter_css.css("__svg-container"), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 400 400", className: components_metricmeter_css.css("__svg"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "200",
+          cy: "200",
+          r: radius,
+          strokeWidth: "32",
+          stroke: backgroundColor,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "200",
+          cy: "200",
+          r: radius,
+          strokeWidth: "32.25",
+          stroke: fillColor,
+          fill: "none",
+          strokeDasharray: `${circumference}`,
+          strokeDashoffset: offset,
+          style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__controls"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: components_metricmeter_css.css("__button--decrease") + " " + components_metricmeter_css.css("__button") + (decrementDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""), onClick: decreaseSpeed, children: "—" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__label-container"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-label"), children: speed }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-unit-label"), children: speedUnitLabel })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: components_metricmeter_css.css("__button") + (incrementalDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""), onClick: increaseSpeed, children: "+" })
+    ] })
+  ] });
+};
+exports.MetricMeter = MetricMeter;
+exports.default = MetricMeter;

package/dist/components/metricmeter/metricmeter.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface MetricMeterProps {
+    title?: string;
+    fillColor?: string;
+    backgroundColor?: string;
+    maxSpeed?: number;
+    minSpeed?: number;
+    speedDelta?: number | ((speed: number, increasing: boolean) => number);
+    speedUnitLabel?: string;
+    initial?: number;
+    onSelectedValue: (value: number) => void;
+}
+export declare const MetricMeter: React.FC<MetricMeterProps>;
+export default MetricMeter;

package/dist/components/metricmeter/metricmeter.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { css } from "./css.js";
+import { useState } from "react";
+const MetricMeter = ({
+  title = null,
+  fillColor = "#4e0174",
+  backgroundColor = "#c4c4c4",
+  maxSpeed = 100,
+  minSpeed = 0,
+  speedDelta = 10,
+  initial = 0,
+  speedUnitLabel = "Mbps",
+  onSelectedValue = (e) => {
+    console.log(e);
+  }
+}) => {
+  const [speed, setSpeed] = useState(initial);
+  const increaseSpeed = () => {
+    const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, true);
+    const newSpeed = Math.min(speed + delta, maxSpeed);
+    if (speed != newSpeed) {
+      setSpeed(newSpeed);
+      if (onSelectedValue) {
+        onSelectedValue(newSpeed);
+      }
+    }
+  };
+  const decreaseSpeed = () => {
+    const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, false);
+    const newSpeed = Math.max(speed - delta, minSpeed);
+    if (speed != newSpeed && newSpeed >= minSpeed) {
+      setSpeed(newSpeed);
+      if (onSelectedValue) {
+        onSelectedValue(newSpeed);
+      }
+    }
+  };
+  const radius = 152;
+  const circumference = 2 * 3.1415926535 * radius;
+  const start = 955.04417;
+  const end = 286.51317;
+  const spread = start - end;
+  let percentFilled = (speed - minSpeed) / (maxSpeed - minSpeed);
+  if (percentFilled === 0 && minSpeed > 0) {
+    percentFilled = 0.01;
+  }
+  const offset = start - spread * percentFilled;
+  const incrementalDisabled = speed === maxSpeed;
+  const decrementDisabled = speed === minSpeed;
+  return /* @__PURE__ */ jsxs("div", { className: css("metricmeter"), children: [
+    title && /* @__PURE__ */ jsx("h3", { children: title }),
+    /* @__PURE__ */ jsx("div", { className: css("__svg-container"), children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 400 400", className: css("__svg"), children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "200",
+          cy: "200",
+          r: radius,
+          strokeWidth: "32",
+          stroke: backgroundColor,
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "200",
+          cy: "200",
+          r: radius,
+          strokeWidth: "32.25",
+          stroke: fillColor,
+          fill: "none",
+          strokeDasharray: `${circumference}`,
+          strokeDashoffset: offset,
+          style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: css("__controls"), children: [
+      /* @__PURE__ */ jsx("button", { className: css("__button--decrease") + " " + css("__button") + (decrementDisabled ? " " + css("__button--disabled") : ""), onClick: decreaseSpeed, children: "—" }),
+      /* @__PURE__ */ jsxs("div", { className: css("__label-container"), children: [
+        /* @__PURE__ */ jsx("p", { className: css("__speed-label"), children: speed }),
+        /* @__PURE__ */ jsx("p", { className: css("__speed-unit-label"), children: speedUnitLabel })
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: css("__button") + (incrementalDisabled ? " " + css("__button--disabled") : ""), onClick: increaseSpeed, children: "+" })
+    ] })
+  ] });
+};
+export {
+  MetricMeter,
+  MetricMeter as default
+};

package/dist/main.cjs

@@ -19,6 +19,7 @@ const components_drawer_index = require("./components/drawer/index.cjs");
 const components_image_image = require("./components/image/image.cjs");
 const components_chip_index = require("./components/chip/index.cjs");
 const components_datePicker_datePicker = require("./components/date-picker/date-picker.cjs");
+const components_metricmeter_metricmeter = require("./components/metricmeter/metricmeter.cjs");
 const components_notification_notification = require("./components/notification/notification.cjs");
 const components_radioGroup_index = require("./components/radio-group/index.cjs");
 const components_box_box = require("./components/box/box.cjs");
@@ -80,6 +81,7 @@ exports.Drawer = components_drawer_index.Drawer;
 exports.Image = components_image_image.Image;
 exports.Chip = components_chip_index.Chip;
 exports.DatePicker = components_datePicker_datePicker.DatePicker;
+exports.MetricMeter = components_metricmeter_metricmeter.MetricMeter;
 exports.Notification = components_notification_notification.Notification;
 exports.RadioGroup = components_radioGroup_index.RadioGroup;
 exports.Box = components_box_box.Box;

package/dist/main.js

@@ -17,6 +17,7 @@ import { Drawer } from "./components/drawer/index.js";
 import { Image } from "./components/image/image.js";
 import { Chip } from "./components/chip/index.js";
 import { DatePicker } from "./components/date-picker/date-picker.js";
+import { MetricMeter } from "./components/metricmeter/metricmeter.js";
 import { Notification } from "./components/notification/notification.js";
 import { RadioGroup } from "./components/radio-group/index.js";
 import { Box } from "./components/box/box.js";
@@ -87,6 +88,7 @@ export {
   Label,
   Link,
   List,
+  MetricMeter,
   M as Modal,
   N as NavigationMenu,
   Notabene,

package/dist/style.css

@@ -5666,6 +5666,78 @@
   position: absolute;
   top: 0;
   width: 0.0625rem;
+}._metricmeter_1wov3_1 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 256px;
+  min-width: 256px;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+._metricmeter__svg_1wov3_11 {
+  transform-origin: center center;
+  fill: transparent;
+  stroke-linecap: round;
+  stroke-width: 32;
+  stroke: #c4c4c4;
+  stroke-dasharray: 668.531, 955.04417;
+  rotate: 144deg;
+}
+._metricmeter_1wov3_1 h3 {
+  margin-bottom: 0;
+  font-size: 22px;
+  font-weight: var(--teddy-typography-weight-normal);
+}
+._metricmeter__svg-container_1wov3_25 {
+  max-width: 148px;
+}
+._metricmeter__controls_1wov3_28 {
+  position: absolute;
+  margin-top: 0.5em;
+  top: calc(50% - 0.5rem);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 256px; /* Total width: 160 (text) + 42 (button -) + 42 (button +) + 8px spacing as the figma says 256px total width */
+}
+._metricmeter__button_1wov3_37 {
+  width: 42px;
+  height: 40px;
+  background-color: unset;
+  border: var(--teddy-color-purple-700) 1px solid;
+  color: var(--teddy-color-purple-700);
+  border-radius: 50px;
+  cursor: pointer;
+  font-size: var(--teddy-typography-scale-400);
+  font-weight: var(--teddy-typography-weight-normal);
+  user-select: none;
+}
+._metricmeter__button--decrease_1wov3_49 {
+  font-size: var(--teddy-typography-scale-75);
+  font-weight: var(--teddy-typography-weight-bold);
+}
+._metricmeter__button--disabled_1wov3_53 {
+  cursor: default;
+  border: 0;
+  color: var(--teddy-color-text-weak);
+  background-color: var(--teddy-color-background-interactive-disabled);
+}
+._metricmeter__label-container_1wov3_59 {
+  flex: 0 0 160px;
+  text-align: center;
+}
+._metricmeter__label-container_1wov3_59 p {
+  margin: 0;
+}
+._metricmeter__speed-label_1wov3_66 {
+  font-weight: var(--teddy-typography-weight-bold);
+  font-size: var(--teddy-typography-scale-100);
+}
+._metricmeter__speed-unit-label_1wov3_70 {
+  font-size: var(--teddy-typography-scale-75);
+  font-weight: var(--teddy-typography-weight-normal);
 }:root {
   --teddy-border-radius-xs: 2px;
   --teddy-border-radius-sm: 4px;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "sideEffects": [
     "**/*.css"
   ],