@telia/teddy 0.7.11 → 0.7.12
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/dist/components/index.cjs +2 -4
- package/dist/components/index.d.ts +1 -2
- package/dist/components/index.js +1 -3
- package/dist/components/metric-meter/index.cjs +4 -0
- package/dist/components/metric-meter/index.d.ts +2 -0
- package/dist/components/metric-meter/index.js +4 -0
- package/dist/components/{metric-meter-experimental/metric-meter-experimental.cjs → metric-meter/metric-meter.cjs} +8 -8
- package/dist/components/{metric-meter-experimental/metric-meter-experimental.d.ts → metric-meter/metric-meter.d.ts} +3 -3
- package/dist/components/{metric-meter-experimental/metric-meter-experimental.js → metric-meter/metric-meter.js} +8 -8
- package/dist/components/modal/modal-close.cjs +1 -1
- package/dist/components/modal/modal-close.js +1 -1
- package/dist/components/navigation-menu/navigation-menu.cjs +1 -1
- package/dist/components/navigation-menu/navigation-menu.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-content.cjs +1 -1
- package/dist/components/radio-card-group/radio-card-group-content.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +1 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-item.cjs +1 -1
- package/dist/components/radio-card-group/radio-card-group-item.js +1 -1
- package/dist/main.cjs +2 -4
- package/dist/main.js +1 -3
- package/dist/style.css +6 -78
- package/package.json +1 -1
- package/dist/components/metric-meter-experimental/index.cjs +0 -4
- package/dist/components/metric-meter-experimental/index.d.ts +0 -2
- package/dist/components/metric-meter-experimental/index.js +0 -4
- package/dist/components/metricmeter/css.cjs +0 -34
- package/dist/components/metricmeter/css.d.ts +0 -1
- package/dist/components/metricmeter/css.js +0 -34
- package/dist/components/metricmeter/index.cjs +0 -4
- package/dist/components/metricmeter/index.d.ts +0 -2
- package/dist/components/metricmeter/index.js +0 -4
- package/dist/components/metricmeter/metricmeter.cjs +0 -98
- package/dist/components/metricmeter/metricmeter.d.ts +0 -17
- package/dist/components/metricmeter/metricmeter.js +0 -98
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const components_metricMeter_metricMeter = require("./metric-meter/metric-meter.cjs");
|
|
4
4
|
const components_footer_index = require("./footer/index.cjs");
|
|
5
5
|
const components_pagination_index = require("./pagination/index.cjs");
|
|
6
6
|
const components_select_index = require("./select/index.cjs");
|
|
@@ -30,7 +30,6 @@ const components_drawer_index = require("./drawer/index.cjs");
|
|
|
30
30
|
const components_image_image = require("./image/image.cjs");
|
|
31
31
|
const components_chip_index = require("./chip/index.cjs");
|
|
32
32
|
const components_datePicker_datePicker = require("./date-picker/date-picker.cjs");
|
|
33
|
-
const components_metricmeter_metricmeter = require("./metricmeter/metricmeter.cjs");
|
|
34
33
|
const components_notification_index = require("./notification/index.cjs");
|
|
35
34
|
const components_radioGroup_index = require("./radio-group/index.cjs");
|
|
36
35
|
const components_box_box = require("./box/box.cjs");
|
|
@@ -64,7 +63,7 @@ const components_slider_slider = require("./slider/slider.cjs");
|
|
|
64
63
|
const components_circleBar_circleBar = require("./circle-bar/circle-bar.cjs");
|
|
65
64
|
const sonner = require("sonner");
|
|
66
65
|
const components_input_inputGroup = require("./input/input-group.cjs");
|
|
67
|
-
exports.
|
|
66
|
+
exports.MetricMeter = components_metricMeter_metricMeter.MetricMeter;
|
|
68
67
|
exports.Footer = components_footer_index.Footer;
|
|
69
68
|
exports.Pagination = components_pagination_index.Pagination;
|
|
70
69
|
exports.Select = components_select_index.Select;
|
|
@@ -98,7 +97,6 @@ exports.Drawer = components_drawer_index.Drawer;
|
|
|
98
97
|
exports.Image = components_image_image.Image;
|
|
99
98
|
exports.Chip = components_chip_index.Chip;
|
|
100
99
|
exports.DatePicker = components_datePicker_datePicker.DatePicker;
|
|
101
|
-
exports.MetricMeter = components_metricmeter_metricmeter.MetricMeter;
|
|
102
100
|
exports.Notification = components_notification_index.Notification;
|
|
103
101
|
exports.RadioGroup = components_radioGroup_index.RadioGroup;
|
|
104
102
|
exports.Box = components_box_box.Box;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export * from './metric-meter
|
|
1
|
+
export * from './metric-meter';
|
|
2
2
|
export * from './footer';
|
|
3
3
|
export * from './pagination';
|
|
4
4
|
export * from './select';
|
|
@@ -28,7 +28,6 @@ export * from './drawer';
|
|
|
28
28
|
export * from './image';
|
|
29
29
|
export * from './chip';
|
|
30
30
|
export * from './date-picker';
|
|
31
|
-
export * from './metricmeter';
|
|
32
31
|
export * from './modal';
|
|
33
32
|
export * from './notification';
|
|
34
33
|
export * from './radio-group';
|
package/dist/components/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MetricMeter } from "./metric-meter/metric-meter.js";
|
|
2
2
|
import { Footer } from "./footer/index.js";
|
|
3
3
|
import { Pagination } from "./pagination/index.js";
|
|
4
4
|
import { Select } from "./select/index.js";
|
|
@@ -28,7 +28,6 @@ import { Drawer } from "./drawer/index.js";
|
|
|
28
28
|
import { Image } from "./image/image.js";
|
|
29
29
|
import { Chip } from "./chip/index.js";
|
|
30
30
|
import { DatePicker } from "./date-picker/date-picker.js";
|
|
31
|
-
import { MetricMeter } from "./metricmeter/metricmeter.js";
|
|
32
31
|
import { Notification } from "./notification/index.js";
|
|
33
32
|
import { RadioGroup } from "./radio-group/index.js";
|
|
34
33
|
import { Box } from "./box/box.js";
|
|
@@ -103,7 +102,6 @@ export {
|
|
|
103
102
|
List,
|
|
104
103
|
MeterBar,
|
|
105
104
|
MetricMeter,
|
|
106
|
-
MetricMeterExperimental,
|
|
107
105
|
M as Modal,
|
|
108
106
|
N as NavigationMenu,
|
|
109
107
|
Notabene,
|
|
@@ -11,14 +11,14 @@ const components_button_button = require("../button/button.cjs");
|
|
|
11
11
|
const components_heading_heading = require("../heading/heading.cjs");
|
|
12
12
|
const tokens_color_variables = require("../../tokens/color/variables.cjs");
|
|
13
13
|
const styles = {
|
|
14
|
-
"teddy-metric-meter
|
|
15
|
-
"teddy-metric-meter
|
|
16
|
-
"teddy-metric-
|
|
17
|
-
"teddy-metric-
|
|
18
|
-
"teddy-metric-
|
|
14
|
+
"teddy-metric-meter": "_teddy-metric-meter_1h6j9_1",
|
|
15
|
+
"teddy-metric-meter--disabled": "_teddy-metric-meter--disabled_1h6j9_9",
|
|
16
|
+
"teddy-metric-meter__fade": "_teddy-metric-meter__fade_1h6j9_18",
|
|
17
|
+
"teddy-metric-meter__fade--hidden": "_teddy-metric-meter__fade--hidden_1h6j9_21",
|
|
18
|
+
"teddy-metric-meter__svg": "_teddy-metric-meter__svg_1h6j9_25"
|
|
19
19
|
};
|
|
20
|
-
const rootClassName = "teddy-metric-meter
|
|
21
|
-
const
|
|
20
|
+
const rootClassName = "teddy-metric-meter";
|
|
21
|
+
const MetricMeter = React.forwardRef(
|
|
22
22
|
({
|
|
23
23
|
className,
|
|
24
24
|
title,
|
|
@@ -147,5 +147,5 @@ const MetricMeterExperimental = React.forwardRef(
|
|
|
147
147
|
);
|
|
148
148
|
}
|
|
149
149
|
);
|
|
150
|
-
exports.
|
|
150
|
+
exports.MetricMeter = MetricMeter;
|
|
151
151
|
exports.rootClassName = rootClassName;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
|
|
3
|
-
export declare const rootClassName = "teddy-metric-meter
|
|
4
|
-
export interface
|
|
3
|
+
export declare const rootClassName = "teddy-metric-meter";
|
|
4
|
+
export interface MetricMeterProps {
|
|
5
5
|
className?: string;
|
|
6
6
|
title?: React.ReactNode;
|
|
7
7
|
unit?: string;
|
|
@@ -19,4 +19,4 @@ export interface MetricMeterExperimentalProps {
|
|
|
19
19
|
isIncrementDisabled?: boolean;
|
|
20
20
|
isDecrementDisabled?: boolean;
|
|
21
21
|
}
|
|
22
|
-
export declare const
|
|
22
|
+
export declare const MetricMeter: React.ForwardRefExoticComponent<MetricMeterProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -9,14 +9,14 @@ import { Button } from "../button/button.js";
|
|
|
9
9
|
import { Heading } from "../heading/heading.js";
|
|
10
10
|
import { teddyColorGray200, teddyColorPurple800 } from "../../tokens/color/variables.js";
|
|
11
11
|
const styles = {
|
|
12
|
-
"teddy-metric-meter
|
|
13
|
-
"teddy-metric-meter
|
|
14
|
-
"teddy-metric-
|
|
15
|
-
"teddy-metric-
|
|
16
|
-
"teddy-metric-
|
|
12
|
+
"teddy-metric-meter": "_teddy-metric-meter_1h6j9_1",
|
|
13
|
+
"teddy-metric-meter--disabled": "_teddy-metric-meter--disabled_1h6j9_9",
|
|
14
|
+
"teddy-metric-meter__fade": "_teddy-metric-meter__fade_1h6j9_18",
|
|
15
|
+
"teddy-metric-meter__fade--hidden": "_teddy-metric-meter__fade--hidden_1h6j9_21",
|
|
16
|
+
"teddy-metric-meter__svg": "_teddy-metric-meter__svg_1h6j9_25"
|
|
17
17
|
};
|
|
18
|
-
const rootClassName = "teddy-metric-meter
|
|
19
|
-
const
|
|
18
|
+
const rootClassName = "teddy-metric-meter";
|
|
19
|
+
const MetricMeter = React__default.forwardRef(
|
|
20
20
|
({
|
|
21
21
|
className,
|
|
22
22
|
title,
|
|
@@ -146,6 +146,6 @@ const MetricMeterExperimental = React__default.forwardRef(
|
|
|
146
146
|
}
|
|
147
147
|
);
|
|
148
148
|
export {
|
|
149
|
-
|
|
149
|
+
MetricMeter,
|
|
150
150
|
rootClassName
|
|
151
151
|
};
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
require("react/jsx-runtime");
|
|
4
4
|
require("react");
|
|
5
5
|
require("@radix-ui/react-dialog");
|
|
6
|
-
require("../metric-meter
|
|
6
|
+
require("../metric-meter/metric-meter.cjs");
|
|
7
7
|
require("../footer/index.cjs");
|
|
8
8
|
require("../pagination/index.cjs");
|
|
9
9
|
require("../select/index.cjs");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import "@radix-ui/react-dialog";
|
|
4
|
-
import "../metric-meter
|
|
4
|
+
import "../metric-meter/metric-meter.js";
|
|
5
5
|
import "../footer/index.js";
|
|
6
6
|
import "../pagination/index.js";
|
|
7
7
|
import "../select/index.js";
|
|
@@ -12,7 +12,7 @@ require("@radix-ui/react-slot");
|
|
|
12
12
|
require("@radix-ui/react-use-controllable-state");
|
|
13
13
|
require("../../utils/generate-styling/index.cjs");
|
|
14
14
|
require("../../tokens/motion/variables.cjs");
|
|
15
|
-
require("../metric-meter
|
|
15
|
+
require("../metric-meter/metric-meter.cjs");
|
|
16
16
|
require("../footer/index.cjs");
|
|
17
17
|
require("../pagination/index.cjs");
|
|
18
18
|
require("../select/index.cjs");
|
|
@@ -10,7 +10,7 @@ import "@radix-ui/react-slot";
|
|
|
10
10
|
import "@radix-ui/react-use-controllable-state";
|
|
11
11
|
import "../../utils/generate-styling/index.js";
|
|
12
12
|
import "../../tokens/motion/variables.js";
|
|
13
|
-
import "../metric-meter
|
|
13
|
+
import "../metric-meter/metric-meter.js";
|
|
14
14
|
import "../footer/index.js";
|
|
15
15
|
import "../pagination/index.js";
|
|
16
16
|
import "../select/index.js";
|
|
@@ -4,7 +4,7 @@ require("react/jsx-runtime");
|
|
|
4
4
|
require("clsx");
|
|
5
5
|
require("react");
|
|
6
6
|
require("./radio-card-group-root.cjs");
|
|
7
|
-
require("../metric-meter
|
|
7
|
+
require("../metric-meter/metric-meter.cjs");
|
|
8
8
|
require("../footer/index.cjs");
|
|
9
9
|
require("../pagination/index.cjs");
|
|
10
10
|
require("../select/index.cjs");
|
|
@@ -2,7 +2,7 @@ import "react/jsx-runtime";
|
|
|
2
2
|
import "clsx";
|
|
3
3
|
import "react";
|
|
4
4
|
import "./radio-card-group-root.js";
|
|
5
|
-
import "../metric-meter
|
|
5
|
+
import "../metric-meter/metric-meter.js";
|
|
6
6
|
import "../footer/index.js";
|
|
7
7
|
import "../pagination/index.js";
|
|
8
8
|
import "../select/index.js";
|
|
@@ -12,7 +12,7 @@ const reactSlot = require("@radix-ui/react-slot");
|
|
|
12
12
|
const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
|
|
13
13
|
const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
|
|
14
14
|
const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
|
|
15
|
-
require("../metric-meter
|
|
15
|
+
require("../metric-meter/metric-meter.cjs");
|
|
16
16
|
require("../footer/index.cjs");
|
|
17
17
|
require("../pagination/index.cjs");
|
|
18
18
|
require("../select/index.cjs");
|
|
@@ -10,7 +10,7 @@ import { Slot } from "@radix-ui/react-slot";
|
|
|
10
10
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
11
11
|
import { mergeStyles } from "../../utils/generate-styling/index.js";
|
|
12
12
|
import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
|
|
13
|
-
import "../metric-meter
|
|
13
|
+
import "../metric-meter/metric-meter.js";
|
|
14
14
|
import "../footer/index.js";
|
|
15
15
|
import "../pagination/index.js";
|
|
16
16
|
import "../select/index.js";
|
|
@@ -5,7 +5,7 @@ require("clsx");
|
|
|
5
5
|
require("react");
|
|
6
6
|
require("./radio-card-group-root.cjs");
|
|
7
7
|
require("@radix-ui/react-radio-group");
|
|
8
|
-
require("../metric-meter
|
|
8
|
+
require("../metric-meter/metric-meter.cjs");
|
|
9
9
|
require("../footer/index.cjs");
|
|
10
10
|
require("../pagination/index.cjs");
|
|
11
11
|
require("../select/index.cjs");
|
|
@@ -3,7 +3,7 @@ import "clsx";
|
|
|
3
3
|
import "react";
|
|
4
4
|
import "./radio-card-group-root.js";
|
|
5
5
|
import "@radix-ui/react-radio-group";
|
|
6
|
-
import "../metric-meter
|
|
6
|
+
import "../metric-meter/metric-meter.js";
|
|
7
7
|
import "../footer/index.js";
|
|
8
8
|
import "../pagination/index.js";
|
|
9
9
|
import "../select/index.js";
|
package/dist/main.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const components_metricMeter_metricMeter = require("./components/metric-meter/metric-meter.cjs");
|
|
4
4
|
const components_footer_index = require("./components/footer/index.cjs");
|
|
5
5
|
const components_pagination_index = require("./components/pagination/index.cjs");
|
|
6
6
|
const components_select_index = require("./components/select/index.cjs");
|
|
@@ -30,7 +30,6 @@ const components_drawer_index = require("./components/drawer/index.cjs");
|
|
|
30
30
|
const components_image_image = require("./components/image/image.cjs");
|
|
31
31
|
const components_chip_index = require("./components/chip/index.cjs");
|
|
32
32
|
const components_datePicker_datePicker = require("./components/date-picker/date-picker.cjs");
|
|
33
|
-
const components_metricmeter_metricmeter = require("./components/metricmeter/metricmeter.cjs");
|
|
34
33
|
const components_notification_index = require("./components/notification/index.cjs");
|
|
35
34
|
const components_radioGroup_index = require("./components/radio-group/index.cjs");
|
|
36
35
|
const components_box_box = require("./components/box/box.cjs");
|
|
@@ -71,7 +70,7 @@ const tokens_spacing_variables = require("./tokens/spacing/variables.cjs");
|
|
|
71
70
|
const tokens_typography_variables = require("./tokens/typography/variables.cjs");
|
|
72
71
|
const sonner = require("sonner");
|
|
73
72
|
const components_input_inputGroup = require("./components/input/input-group.cjs");
|
|
74
|
-
exports.
|
|
73
|
+
exports.MetricMeter = components_metricMeter_metricMeter.MetricMeter;
|
|
75
74
|
exports.Footer = components_footer_index.Footer;
|
|
76
75
|
exports.Pagination = components_pagination_index.Pagination;
|
|
77
76
|
exports.Select = components_select_index.Select;
|
|
@@ -105,7 +104,6 @@ exports.Drawer = components_drawer_index.Drawer;
|
|
|
105
104
|
exports.Image = components_image_image.Image;
|
|
106
105
|
exports.Chip = components_chip_index.Chip;
|
|
107
106
|
exports.DatePicker = components_datePicker_datePicker.DatePicker;
|
|
108
|
-
exports.MetricMeter = components_metricmeter_metricmeter.MetricMeter;
|
|
109
107
|
exports.Notification = components_notification_index.Notification;
|
|
110
108
|
exports.RadioGroup = components_radioGroup_index.RadioGroup;
|
|
111
109
|
exports.Box = components_box_box.Box;
|
package/dist/main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MetricMeter } from "./components/metric-meter/metric-meter.js";
|
|
2
2
|
import { Footer } from "./components/footer/index.js";
|
|
3
3
|
import { Pagination } from "./components/pagination/index.js";
|
|
4
4
|
import { Select } from "./components/select/index.js";
|
|
@@ -28,7 +28,6 @@ import { Drawer } from "./components/drawer/index.js";
|
|
|
28
28
|
import { Image } from "./components/image/image.js";
|
|
29
29
|
import { Chip } from "./components/chip/index.js";
|
|
30
30
|
import { DatePicker } from "./components/date-picker/date-picker.js";
|
|
31
|
-
import { MetricMeter } from "./components/metricmeter/metricmeter.js";
|
|
32
31
|
import { Notification } from "./components/notification/index.js";
|
|
33
32
|
import { RadioGroup } from "./components/radio-group/index.js";
|
|
34
33
|
import { Box } from "./components/box/box.js";
|
|
@@ -110,7 +109,6 @@ export {
|
|
|
110
109
|
List,
|
|
111
110
|
MeterBar,
|
|
112
111
|
MetricMeter,
|
|
113
|
-
MetricMeterExperimental,
|
|
114
112
|
M as Modal,
|
|
115
113
|
N as NavigationMenu,
|
|
116
114
|
Notabene,
|
package/dist/style.css
CHANGED
|
@@ -549,7 +549,7 @@
|
|
|
549
549
|
font-size: clamp(var(--teddy-typography-scale-800), 3cqw, var(--teddy-typography-scale-1000));
|
|
550
550
|
line-height: var(--teddy-typography-line-height-tight);
|
|
551
551
|
}
|
|
552
|
-
}._teddy-metric-
|
|
552
|
+
}._teddy-metric-meter_1h6j9_1 {
|
|
553
553
|
position: relative;
|
|
554
554
|
display: flex;
|
|
555
555
|
flex-direction: column;
|
|
@@ -557,23 +557,23 @@
|
|
|
557
557
|
font-family: inherit;
|
|
558
558
|
user-select: none;
|
|
559
559
|
}
|
|
560
|
-
._teddy-metric-meter
|
|
560
|
+
._teddy-metric-meter--disabled_1h6j9_9 {
|
|
561
561
|
opacity: 0.55;
|
|
562
562
|
cursor: not-allowed;
|
|
563
563
|
}
|
|
564
|
-
._teddy-metric-
|
|
564
|
+
._teddy-metric-meter_1h6j9_1[data-focusable=true]:focus-visible {
|
|
565
565
|
outline: 2px solid var(--teddy-color-focus-ring, #4e0174);
|
|
566
566
|
outline-offset: 4px;
|
|
567
567
|
border-radius: 8px;
|
|
568
568
|
}
|
|
569
|
-
._teddy-metric-
|
|
569
|
+
._teddy-metric-meter__fade_1h6j9_18 {
|
|
570
570
|
transition: opacity 0.25s ease, visibility 0.25s ease;
|
|
571
571
|
}
|
|
572
|
-
._teddy-metric-
|
|
572
|
+
._teddy-metric-meter__fade--hidden_1h6j9_21 {
|
|
573
573
|
opacity: 0;
|
|
574
574
|
visibility: hidden;
|
|
575
575
|
}
|
|
576
|
-
._teddy-metric-
|
|
576
|
+
._teddy-metric-meter__svg_1h6j9_25 {
|
|
577
577
|
position: relative;
|
|
578
578
|
width: 240px;
|
|
579
579
|
height: 240px;
|
|
@@ -6522,78 +6522,6 @@
|
|
|
6522
6522
|
position: absolute;
|
|
6523
6523
|
top: 0;
|
|
6524
6524
|
width: 0.0625rem;
|
|
6525
|
-
}._metricmeter_1wov3_1 {
|
|
6526
|
-
position: relative;
|
|
6527
|
-
display: flex;
|
|
6528
|
-
flex-direction: column;
|
|
6529
|
-
align-items: center;
|
|
6530
|
-
width: 256px;
|
|
6531
|
-
min-width: 256px;
|
|
6532
|
-
margin-left: 1rem;
|
|
6533
|
-
margin-right: 1rem;
|
|
6534
|
-
}
|
|
6535
|
-
._metricmeter__svg_1wov3_11 {
|
|
6536
|
-
transform-origin: center center;
|
|
6537
|
-
fill: transparent;
|
|
6538
|
-
stroke-linecap: round;
|
|
6539
|
-
stroke-width: 32;
|
|
6540
|
-
stroke: #c4c4c4;
|
|
6541
|
-
stroke-dasharray: 668.531, 955.04417;
|
|
6542
|
-
rotate: 144deg;
|
|
6543
|
-
}
|
|
6544
|
-
._metricmeter_1wov3_1 h3 {
|
|
6545
|
-
margin-bottom: 0;
|
|
6546
|
-
font-size: 22px;
|
|
6547
|
-
font-weight: var(--teddy-typography-weight-normal);
|
|
6548
|
-
}
|
|
6549
|
-
._metricmeter__svg-container_1wov3_25 {
|
|
6550
|
-
max-width: 148px;
|
|
6551
|
-
}
|
|
6552
|
-
._metricmeter__controls_1wov3_28 {
|
|
6553
|
-
position: absolute;
|
|
6554
|
-
margin-top: 0.5em;
|
|
6555
|
-
top: calc(50% - 0.5rem);
|
|
6556
|
-
display: flex;
|
|
6557
|
-
align-items: center;
|
|
6558
|
-
justify-content: space-between;
|
|
6559
|
-
width: 256px; /* Total width: 160 (text) + 42 (button -) + 42 (button +) + 8px spacing as the figma says 256px total width */
|
|
6560
|
-
}
|
|
6561
|
-
._metricmeter__button_1wov3_37 {
|
|
6562
|
-
width: 42px;
|
|
6563
|
-
height: 40px;
|
|
6564
|
-
background-color: unset;
|
|
6565
|
-
border: var(--teddy-color-purple-700) 1px solid;
|
|
6566
|
-
color: var(--teddy-color-purple-700);
|
|
6567
|
-
border-radius: 50px;
|
|
6568
|
-
cursor: pointer;
|
|
6569
|
-
font-size: var(--teddy-typography-scale-400);
|
|
6570
|
-
font-weight: var(--teddy-typography-weight-normal);
|
|
6571
|
-
user-select: none;
|
|
6572
|
-
}
|
|
6573
|
-
._metricmeter__button--decrease_1wov3_49 {
|
|
6574
|
-
font-size: var(--teddy-typography-scale-75);
|
|
6575
|
-
font-weight: var(--teddy-typography-weight-bold);
|
|
6576
|
-
}
|
|
6577
|
-
._metricmeter__button--disabled_1wov3_53 {
|
|
6578
|
-
cursor: default;
|
|
6579
|
-
border: 0;
|
|
6580
|
-
color: var(--teddy-color-text-weak);
|
|
6581
|
-
background-color: var(--teddy-color-background-interactive-disabled);
|
|
6582
|
-
}
|
|
6583
|
-
._metricmeter__label-container_1wov3_59 {
|
|
6584
|
-
flex: 0 0 160px;
|
|
6585
|
-
text-align: center;
|
|
6586
|
-
}
|
|
6587
|
-
._metricmeter__label-container_1wov3_59 p {
|
|
6588
|
-
margin: 0;
|
|
6589
|
-
}
|
|
6590
|
-
._metricmeter__speed-label_1wov3_66 {
|
|
6591
|
-
font-weight: var(--teddy-typography-weight-bold);
|
|
6592
|
-
font-size: var(--teddy-typography-scale-100);
|
|
6593
|
-
}
|
|
6594
|
-
._metricmeter__speed-unit-label_1wov3_70 {
|
|
6595
|
-
font-size: var(--teddy-typography-scale-75);
|
|
6596
|
-
font-weight: var(--teddy-typography-weight-normal);
|
|
6597
6525
|
}._teddy-circle-bar_1533l_1 {
|
|
6598
6526
|
position: relative;
|
|
6599
6527
|
width: max-content;
|
package/package.json
CHANGED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const components_metricMeterExperimental_metricMeterExperimental = require("./metric-meter-experimental.cjs");
|
|
4
|
-
exports.MetricMeterExperimental = components_metricMeterExperimental_metricMeterExperimental.MetricMeterExperimental;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const clsx = require("clsx");
|
|
4
|
-
const metricmeter = "_metricmeter_1wov3_1";
|
|
5
|
-
const metricmeter__svg = "_metricmeter__svg_1wov3_11";
|
|
6
|
-
const metricmeter__controls = "_metricmeter__controls_1wov3_28";
|
|
7
|
-
const metricmeter__button = "_metricmeter__button_1wov3_37";
|
|
8
|
-
const styles = {
|
|
9
|
-
metricmeter,
|
|
10
|
-
metricmeter__svg,
|
|
11
|
-
"metricmeter__svg-container": "_metricmeter__svg-container_1wov3_25",
|
|
12
|
-
metricmeter__controls,
|
|
13
|
-
metricmeter__button,
|
|
14
|
-
"metricmeter__button--decrease": "_metricmeter__button--decrease_1wov3_49",
|
|
15
|
-
"metricmeter__button--disabled": "_metricmeter__button--disabled_1wov3_53",
|
|
16
|
-
"metricmeter__label-container": "_metricmeter__label-container_1wov3_59",
|
|
17
|
-
"metricmeter__speed-label": "_metricmeter__speed-label_1wov3_66",
|
|
18
|
-
"metricmeter__speed-unit-label": "_metricmeter__speed-unit-label_1wov3_70"
|
|
19
|
-
};
|
|
20
|
-
const rootClassName = "metricmeter";
|
|
21
|
-
const css = (suffix) => {
|
|
22
|
-
if (suffix == null) return "";
|
|
23
|
-
let tmp = null;
|
|
24
|
-
if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
|
|
25
|
-
tmp = clsx([styles[`${rootClassName + suffix}`]], "");
|
|
26
|
-
} else {
|
|
27
|
-
tmp = clsx([styles[`${suffix}`]], "");
|
|
28
|
-
}
|
|
29
|
-
if (!tmp) {
|
|
30
|
-
console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
|
|
31
|
-
}
|
|
32
|
-
return tmp;
|
|
33
|
-
};
|
|
34
|
-
exports.css = css;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const css: (suffix: string | null) => string;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import clsx from "clsx";
|
|
2
|
-
const metricmeter = "_metricmeter_1wov3_1";
|
|
3
|
-
const metricmeter__svg = "_metricmeter__svg_1wov3_11";
|
|
4
|
-
const metricmeter__controls = "_metricmeter__controls_1wov3_28";
|
|
5
|
-
const metricmeter__button = "_metricmeter__button_1wov3_37";
|
|
6
|
-
const styles = {
|
|
7
|
-
metricmeter,
|
|
8
|
-
metricmeter__svg,
|
|
9
|
-
"metricmeter__svg-container": "_metricmeter__svg-container_1wov3_25",
|
|
10
|
-
metricmeter__controls,
|
|
11
|
-
metricmeter__button,
|
|
12
|
-
"metricmeter__button--decrease": "_metricmeter__button--decrease_1wov3_49",
|
|
13
|
-
"metricmeter__button--disabled": "_metricmeter__button--disabled_1wov3_53",
|
|
14
|
-
"metricmeter__label-container": "_metricmeter__label-container_1wov3_59",
|
|
15
|
-
"metricmeter__speed-label": "_metricmeter__speed-label_1wov3_66",
|
|
16
|
-
"metricmeter__speed-unit-label": "_metricmeter__speed-unit-label_1wov3_70"
|
|
17
|
-
};
|
|
18
|
-
const rootClassName = "metricmeter";
|
|
19
|
-
const css = (suffix) => {
|
|
20
|
-
if (suffix == null) return "";
|
|
21
|
-
let tmp = null;
|
|
22
|
-
if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
|
|
23
|
-
tmp = clsx([styles[`${rootClassName + suffix}`]], "");
|
|
24
|
-
} else {
|
|
25
|
-
tmp = clsx([styles[`${suffix}`]], "");
|
|
26
|
-
}
|
|
27
|
-
if (!tmp) {
|
|
28
|
-
console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
|
|
29
|
-
}
|
|
30
|
-
return tmp;
|
|
31
|
-
};
|
|
32
|
-
export {
|
|
33
|
-
css
|
|
34
|
-
};
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const components_metricmeter_css = require("./css.cjs");
|
|
5
|
-
const React = require("react");
|
|
6
|
-
const MetricMeter = ({
|
|
7
|
-
title = null,
|
|
8
|
-
fillColor = "#4e0174",
|
|
9
|
-
backgroundColor = "#c4c4c4",
|
|
10
|
-
maxSpeed = 100,
|
|
11
|
-
minSpeed = 0,
|
|
12
|
-
speedDelta = 10,
|
|
13
|
-
initial = 0,
|
|
14
|
-
speedUnitLabel = "Mbps",
|
|
15
|
-
isDecrementDisabled = false,
|
|
16
|
-
isIncrementDisabled = false,
|
|
17
|
-
onSelectedValue = (e) => console.log(e)
|
|
18
|
-
}) => {
|
|
19
|
-
const [speed, setSpeed] = React.useState(initial);
|
|
20
|
-
const increaseSpeed = () => {
|
|
21
|
-
const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, true);
|
|
22
|
-
const newSpeed = Math.min(speed + delta, maxSpeed);
|
|
23
|
-
if (speed != newSpeed) {
|
|
24
|
-
setSpeed(newSpeed);
|
|
25
|
-
if (onSelectedValue) {
|
|
26
|
-
onSelectedValue(newSpeed);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const decreaseSpeed = () => {
|
|
31
|
-
const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, false);
|
|
32
|
-
const newSpeed = Math.max(speed - delta, minSpeed);
|
|
33
|
-
if (speed != newSpeed && newSpeed >= minSpeed) {
|
|
34
|
-
setSpeed(newSpeed);
|
|
35
|
-
if (onSelectedValue) {
|
|
36
|
-
onSelectedValue(newSpeed);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
const radius = 152;
|
|
41
|
-
const circumference = 2 * 3.1415926535 * radius;
|
|
42
|
-
const start = 955.04417;
|
|
43
|
-
const end = 286.51317;
|
|
44
|
-
const spread = start - end;
|
|
45
|
-
let percentFilled = (speed - minSpeed) / (maxSpeed - minSpeed);
|
|
46
|
-
if (percentFilled === 0 && minSpeed > 0) {
|
|
47
|
-
percentFilled = 0.01;
|
|
48
|
-
}
|
|
49
|
-
const offset = start - spread * percentFilled;
|
|
50
|
-
const incrementalDisabled = speed === maxSpeed || isIncrementDisabled;
|
|
51
|
-
const decrementDisabled = speed === minSpeed || isDecrementDisabled;
|
|
52
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("metricmeter"), children: [
|
|
53
|
-
title && /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
|
|
54
|
-
/* @__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: [
|
|
55
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "32", stroke: backgroundColor, fill: "none" }),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
57
|
-
"circle",
|
|
58
|
-
{
|
|
59
|
-
cx: "200",
|
|
60
|
-
cy: "200",
|
|
61
|
-
r: radius,
|
|
62
|
-
strokeWidth: "32.25",
|
|
63
|
-
stroke: fillColor,
|
|
64
|
-
fill: "none",
|
|
65
|
-
strokeDasharray: `${circumference}`,
|
|
66
|
-
strokeDashoffset: offset,
|
|
67
|
-
style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] }) }),
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__controls"), children: [
|
|
72
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
73
|
-
"button",
|
|
74
|
-
{
|
|
75
|
-
className: components_metricmeter_css.css("__button--decrease") + " " + components_metricmeter_css.css("__button") + (decrementDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""),
|
|
76
|
-
onClick: decreaseSpeed,
|
|
77
|
-
disabled: decrementDisabled,
|
|
78
|
-
children: "—"
|
|
79
|
-
}
|
|
80
|
-
),
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__label-container"), children: [
|
|
82
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-label"), children: speed }),
|
|
83
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-unit-label"), children: speedUnitLabel })
|
|
84
|
-
] }),
|
|
85
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
-
"button",
|
|
87
|
-
{
|
|
88
|
-
className: components_metricmeter_css.css("__button") + (incrementalDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""),
|
|
89
|
-
onClick: increaseSpeed,
|
|
90
|
-
disabled: incrementalDisabled,
|
|
91
|
-
children: "+"
|
|
92
|
-
}
|
|
93
|
-
)
|
|
94
|
-
] })
|
|
95
|
-
] });
|
|
96
|
-
};
|
|
97
|
-
exports.MetricMeter = MetricMeter;
|
|
98
|
-
exports.default = MetricMeter;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface MetricMeterProps {
|
|
4
|
-
title?: string;
|
|
5
|
-
fillColor?: string;
|
|
6
|
-
backgroundColor?: string;
|
|
7
|
-
maxSpeed?: number;
|
|
8
|
-
minSpeed?: number;
|
|
9
|
-
speedDelta?: number | ((speed: number, increasing: boolean) => number);
|
|
10
|
-
speedUnitLabel?: string;
|
|
11
|
-
initial?: number;
|
|
12
|
-
isDecrementDisabled?: boolean;
|
|
13
|
-
isIncrementDisabled?: boolean;
|
|
14
|
-
onSelectedValue?: (value: number) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const MetricMeter: React.FC<MetricMeterProps>;
|
|
17
|
-
export default MetricMeter;
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { css } from "./css.js";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
const MetricMeter = ({
|
|
5
|
-
title = null,
|
|
6
|
-
fillColor = "#4e0174",
|
|
7
|
-
backgroundColor = "#c4c4c4",
|
|
8
|
-
maxSpeed = 100,
|
|
9
|
-
minSpeed = 0,
|
|
10
|
-
speedDelta = 10,
|
|
11
|
-
initial = 0,
|
|
12
|
-
speedUnitLabel = "Mbps",
|
|
13
|
-
isDecrementDisabled = false,
|
|
14
|
-
isIncrementDisabled = false,
|
|
15
|
-
onSelectedValue = (e) => console.log(e)
|
|
16
|
-
}) => {
|
|
17
|
-
const [speed, setSpeed] = useState(initial);
|
|
18
|
-
const increaseSpeed = () => {
|
|
19
|
-
const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, true);
|
|
20
|
-
const newSpeed = Math.min(speed + delta, maxSpeed);
|
|
21
|
-
if (speed != newSpeed) {
|
|
22
|
-
setSpeed(newSpeed);
|
|
23
|
-
if (onSelectedValue) {
|
|
24
|
-
onSelectedValue(newSpeed);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
const decreaseSpeed = () => {
|
|
29
|
-
const delta = typeof speedDelta === "number" ? speedDelta : speedDelta(speed, false);
|
|
30
|
-
const newSpeed = Math.max(speed - delta, minSpeed);
|
|
31
|
-
if (speed != newSpeed && newSpeed >= minSpeed) {
|
|
32
|
-
setSpeed(newSpeed);
|
|
33
|
-
if (onSelectedValue) {
|
|
34
|
-
onSelectedValue(newSpeed);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
const radius = 152;
|
|
39
|
-
const circumference = 2 * 3.1415926535 * radius;
|
|
40
|
-
const start = 955.04417;
|
|
41
|
-
const end = 286.51317;
|
|
42
|
-
const spread = start - end;
|
|
43
|
-
let percentFilled = (speed - minSpeed) / (maxSpeed - minSpeed);
|
|
44
|
-
if (percentFilled === 0 && minSpeed > 0) {
|
|
45
|
-
percentFilled = 0.01;
|
|
46
|
-
}
|
|
47
|
-
const offset = start - spread * percentFilled;
|
|
48
|
-
const incrementalDisabled = speed === maxSpeed || isIncrementDisabled;
|
|
49
|
-
const decrementDisabled = speed === minSpeed || isDecrementDisabled;
|
|
50
|
-
return /* @__PURE__ */ jsxs("div", { className: css("metricmeter"), children: [
|
|
51
|
-
title && /* @__PURE__ */ jsx("h3", { children: title }),
|
|
52
|
-
/* @__PURE__ */ jsx("div", { className: css("__svg-container"), children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 400 400", className: css("__svg"), children: [
|
|
53
|
-
/* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "32", stroke: backgroundColor, fill: "none" }),
|
|
54
|
-
/* @__PURE__ */ jsx(
|
|
55
|
-
"circle",
|
|
56
|
-
{
|
|
57
|
-
cx: "200",
|
|
58
|
-
cy: "200",
|
|
59
|
-
r: radius,
|
|
60
|
-
strokeWidth: "32.25",
|
|
61
|
-
stroke: fillColor,
|
|
62
|
-
fill: "none",
|
|
63
|
-
strokeDasharray: `${circumference}`,
|
|
64
|
-
strokeDashoffset: offset,
|
|
65
|
-
style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
|
|
66
|
-
}
|
|
67
|
-
)
|
|
68
|
-
] }) }),
|
|
69
|
-
/* @__PURE__ */ jsxs("div", { className: css("__controls"), children: [
|
|
70
|
-
/* @__PURE__ */ jsx(
|
|
71
|
-
"button",
|
|
72
|
-
{
|
|
73
|
-
className: css("__button--decrease") + " " + css("__button") + (decrementDisabled ? " " + css("__button--disabled") : ""),
|
|
74
|
-
onClick: decreaseSpeed,
|
|
75
|
-
disabled: decrementDisabled,
|
|
76
|
-
children: "—"
|
|
77
|
-
}
|
|
78
|
-
),
|
|
79
|
-
/* @__PURE__ */ jsxs("div", { className: css("__label-container"), children: [
|
|
80
|
-
/* @__PURE__ */ jsx("p", { className: css("__speed-label"), children: speed }),
|
|
81
|
-
/* @__PURE__ */ jsx("p", { className: css("__speed-unit-label"), children: speedUnitLabel })
|
|
82
|
-
] }),
|
|
83
|
-
/* @__PURE__ */ jsx(
|
|
84
|
-
"button",
|
|
85
|
-
{
|
|
86
|
-
className: css("__button") + (incrementalDisabled ? " " + css("__button--disabled") : ""),
|
|
87
|
-
onClick: increaseSpeed,
|
|
88
|
-
disabled: incrementalDisabled,
|
|
89
|
-
children: "+"
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
] })
|
|
93
|
-
] });
|
|
94
|
-
};
|
|
95
|
-
export {
|
|
96
|
-
MetricMeter,
|
|
97
|
-
MetricMeter as default
|
|
98
|
-
};
|