@telia/teddy 0.7.8 → 0.7.10

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.
Files changed (7) hide show
  1. package/dist/components/footer/footer-root.cjs +8 -8
  2. package/dist/components/footer/footer-root.js +8 -8
  3. package/dist/components/metricmeter/metricmeter.cjs +24 -18
  4. package/dist/components/metricmeter/metricmeter.d.ts +3 -1
  5. package/dist/components/metricmeter/metricmeter.js +24 -18
  6. package/dist/style.css +24 -21
  7. package/package.json +1 -1
package/dist/components/footer/footer-root.cjs CHANGED
@@ -4,14 +4,14 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const clsx = require("clsx");
5
5
  const React = require("react");
6
6
  const styles = {
7
- "teddy-footer": "_teddy-footer_p4fn7_1",
8
- "teddy-footer__container": "_teddy-footer__container_p4fn7_12",
9
- "teddy-footer__content": "_teddy-footer__content_p4fn7_38",
10
- "teddy-footer__top-row": "_teddy-footer__top-row_p4fn7_51",
11
- "teddy-footer__list": "_teddy-footer__list_p4fn7_64",
12
- "teddy-footer__links-list": "_teddy-footer__links-list_p4fn7_77",
13
- "teddy-footer__column": "_teddy-footer__column_p4fn7_90",
14
- "teddy-footer__bottom-row": "_teddy-footer__bottom-row_p4fn7_95"
7
+ "teddy-footer": "_teddy-footer_1xw3m_1",
8
+ "teddy-footer__container": "_teddy-footer__container_1xw3m_12",
9
+ "teddy-footer__content": "_teddy-footer__content_1xw3m_38",
10
+ "teddy-footer__top-row": "_teddy-footer__top-row_1xw3m_51",
11
+ "teddy-footer__list": "_teddy-footer__list_1xw3m_67",
12
+ "teddy-footer__links-list": "_teddy-footer__links-list_1xw3m_80",
13
+ "teddy-footer__column": "_teddy-footer__column_1xw3m_93",
14
+ "teddy-footer__bottom-row": "_teddy-footer__bottom-row_1xw3m_98"
15
15
  };
16
16
  const rootClassName = "teddy-footer";
17
17
  const Root = React.forwardRef(
package/dist/components/footer/footer-root.js CHANGED
@@ -2,14 +2,14 @@ import { jsx } from "react/jsx-runtime";
2
2
  import clsx from "clsx";
3
3
  import React__default from "react";
4
4
  const styles = {
5
- "teddy-footer": "_teddy-footer_p4fn7_1",
6
- "teddy-footer__container": "_teddy-footer__container_p4fn7_12",
7
- "teddy-footer__content": "_teddy-footer__content_p4fn7_38",
8
- "teddy-footer__top-row": "_teddy-footer__top-row_p4fn7_51",
9
- "teddy-footer__list": "_teddy-footer__list_p4fn7_64",
10
- "teddy-footer__links-list": "_teddy-footer__links-list_p4fn7_77",
11
- "teddy-footer__column": "_teddy-footer__column_p4fn7_90",
12
- "teddy-footer__bottom-row": "_teddy-footer__bottom-row_p4fn7_95"
5
+ "teddy-footer": "_teddy-footer_1xw3m_1",
6
+ "teddy-footer__container": "_teddy-footer__container_1xw3m_12",
7
+ "teddy-footer__content": "_teddy-footer__content_1xw3m_38",
8
+ "teddy-footer__top-row": "_teddy-footer__top-row_1xw3m_51",
9
+ "teddy-footer__list": "_teddy-footer__list_1xw3m_67",
10
+ "teddy-footer__links-list": "_teddy-footer__links-list_1xw3m_80",
11
+ "teddy-footer__column": "_teddy-footer__column_1xw3m_93",
12
+ "teddy-footer__bottom-row": "_teddy-footer__bottom-row_1xw3m_98"
13
13
  };
14
14
  const rootClassName = "teddy-footer";
15
15
  const Root = React__default.forwardRef(
package/dist/components/metricmeter/metricmeter.cjs CHANGED
@@ -12,9 +12,9 @@ const MetricMeter = ({
12
12
  speedDelta = 10,
13
13
  initial = 0,
14
14
  speedUnitLabel = "Mbps",
15
- onSelectedValue = (e) => {
16
- console.log(e);
17
- }
15
+ isDecrementDisabled = false,
16
+ isIncrementDisabled = false,
17
+ onSelectedValue = (e) => console.log(e)
18
18
  }) => {
19
19
  const [speed, setSpeed] = React.useState(initial);
20
20
  const increaseSpeed = () => {
@@ -47,22 +47,12 @@ const MetricMeter = ({
47
47
  percentFilled = 0.01;
48
48
  }
49
49
  const offset = start - spread * percentFilled;
50
- const incrementalDisabled = speed === maxSpeed;
51
- const decrementDisabled = speed === minSpeed;
50
+ const incrementalDisabled = speed === maxSpeed || isIncrementDisabled;
51
+ const decrementDisabled = speed === minSpeed || isDecrementDisabled;
52
52
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("metricmeter"), children: [
53
53
  title && /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
54
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(
56
- "circle",
57
- {
58
- cx: "200",
59
- cy: "200",
60
- r: radius,
61
- strokeWidth: "32",
62
- stroke: backgroundColor,
63
- fill: "none"
64
- }
65
- ),
55
+ /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "32", stroke: backgroundColor, fill: "none" }),
66
56
  /* @__PURE__ */ jsxRuntime.jsx(
67
57
  "circle",
68
58
  {
@@ -79,12 +69,28 @@ const MetricMeter = ({
79
69
  )
80
70
  ] }) }),
81
71
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__controls"), children: [
82
- /* @__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: "—" }),
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
+ ),
83
81
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_metricmeter_css.css("__label-container"), children: [
84
82
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-label"), children: speed }),
85
83
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: components_metricmeter_css.css("__speed-unit-label"), children: speedUnitLabel })
86
84
  ] }),
87
- /* @__PURE__ */ jsxRuntime.jsx("button", { className: components_metricmeter_css.css("__button") + (incrementalDisabled ? " " + components_metricmeter_css.css("__button--disabled") : ""), onClick: increaseSpeed, children: "+" })
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
+ )
88
94
  ] })
89
95
  ] });
90
96
  };
package/dist/components/metricmeter/metricmeter.d.ts CHANGED
@@ -9,7 +9,9 @@ export interface MetricMeterProps {
9
9
  speedDelta?: number | ((speed: number, increasing: boolean) => number);
10
10
  speedUnitLabel?: string;
11
11
  initial?: number;
12
- onSelectedValue: (value: number) => void;
12
+ isDecrementDisabled?: boolean;
13
+ isIncrementDisabled?: boolean;
14
+ onSelectedValue?: (value: number) => void;
13
15
  }
14
16
  export declare const MetricMeter: React.FC<MetricMeterProps>;
15
17
  export default MetricMeter;
package/dist/components/metricmeter/metricmeter.js CHANGED
@@ -10,9 +10,9 @@ const MetricMeter = ({
10
10
  speedDelta = 10,
11
11
  initial = 0,
12
12
  speedUnitLabel = "Mbps",
13
- onSelectedValue = (e) => {
14
- console.log(e);
15
- }
13
+ isDecrementDisabled = false,
14
+ isIncrementDisabled = false,
15
+ onSelectedValue = (e) => console.log(e)
16
16
  }) => {
17
17
  const [speed, setSpeed] = useState(initial);
18
18
  const increaseSpeed = () => {
@@ -45,22 +45,12 @@ const MetricMeter = ({
45
45
  percentFilled = 0.01;
46
46
  }
47
47
  const offset = start - spread * percentFilled;
48
- const incrementalDisabled = speed === maxSpeed;
49
- const decrementDisabled = speed === minSpeed;
48
+ const incrementalDisabled = speed === maxSpeed || isIncrementDisabled;
49
+ const decrementDisabled = speed === minSpeed || isDecrementDisabled;
50
50
  return /* @__PURE__ */ jsxs("div", { className: css("metricmeter"), children: [
51
51
  title && /* @__PURE__ */ jsx("h3", { children: title }),
52
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(
54
- "circle",
55
- {
56
- cx: "200",
57
- cy: "200",
58
- r: radius,
59
- strokeWidth: "32",
60
- stroke: backgroundColor,
61
- fill: "none"
62
- }
63
- ),
53
+ /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "32", stroke: backgroundColor, fill: "none" }),
64
54
  /* @__PURE__ */ jsx(
65
55
  "circle",
66
56
  {
@@ -77,12 +67,28 @@ const MetricMeter = ({
77
67
  )
78
68
  ] }) }),
79
69
  /* @__PURE__ */ jsxs("div", { className: css("__controls"), children: [
80
- /* @__PURE__ */ jsx("button", { className: css("__button--decrease") + " " + css("__button") + (decrementDisabled ? " " + css("__button--disabled") : ""), onClick: decreaseSpeed, 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
+ ),
81
79
  /* @__PURE__ */ jsxs("div", { className: css("__label-container"), children: [
82
80
  /* @__PURE__ */ jsx("p", { className: css("__speed-label"), children: speed }),
83
81
  /* @__PURE__ */ jsx("p", { className: css("__speed-unit-label"), children: speedUnitLabel })
84
82
  ] }),
85
- /* @__PURE__ */ jsx("button", { className: css("__button") + (incrementalDisabled ? " " + css("__button--disabled") : ""), onClick: increaseSpeed, children: "+" })
83
+ /* @__PURE__ */ jsx(
84
+ "button",
85
+ {
86
+ className: css("__button") + (incrementalDisabled ? " " + css("__button--disabled") : ""),
87
+ onClick: increaseSpeed,
88
+ disabled: incrementalDisabled,
89
+ children: "+"
90
+ }
91
+ )
86
92
  ] })
87
93
  ] });
88
94
  };
package/dist/style.css CHANGED
@@ -1,111 +1,114 @@
1
- @charset 'UTF-8';._teddy-footer_p4fn7_1 {
1
+ @charset 'UTF-8';._teddy-footer_1xw3m_1 {
2
2
  background-color: var(--teddy-color-purple-900);
3
3
  padding-top: var(--teddy-spacing-600);
4
4
  padding-bottom: var(--teddy-spacing-600);
5
5
  }
6
6
  @media screen and (max-width: 600px) {
7
- ._teddy-footer_p4fn7_1 {
7
+ ._teddy-footer_1xw3m_1 {
8
8
  padding-top: var(--teddy-spacing-250);
9
9
  padding-bottom: var(--teddy-spacing-250);
10
10
  }
11
11
  }
12
- ._teddy-footer__container_p4fn7_12 {
12
+ ._teddy-footer__container_1xw3m_12 {
13
13
  display: grid;
14
14
  grid-template-columns: repeat(4, 1fr);
15
15
  column-gap: var(--teddy-spacing-200);
16
16
  margin: 0 var(--teddy-spacing-200);
17
17
  }
18
18
  @media screen and (min-width: 600px) {
19
- ._teddy-footer__container_p4fn7_12 {
19
+ ._teddy-footer__container_1xw3m_12 {
20
20
  grid-template-columns: repeat(8, 1fr);
21
21
  column-gap: var(--teddy-spacing-300);
22
22
  margin: 0 var(--teddy-spacing-300);
23
23
  }
24
24
  }
25
25
  @media screen and (min-width: 1025px) {
26
- ._teddy-footer__container_p4fn7_12 {
26
+ ._teddy-footer__container_1xw3m_12 {
27
27
  grid-template-columns: repeat(12, 1fr);
28
28
  margin: 0 var(--teddy-spacing-600);
29
29
  }
30
30
  }
31
31
  @media screen and (min-width: 1441px) {
32
- ._teddy-footer__container_p4fn7_12 {
32
+ ._teddy-footer__container_1xw3m_12 {
33
33
  max-width: 1344px;
34
34
  grid-template-columns: repeat(12, 1fr);
35
35
  margin: 0 auto;
36
36
  }
37
37
  }
38
- ._teddy-footer__content_p4fn7_38 {
38
+ ._teddy-footer__content_1xw3m_38 {
39
39
  grid-column: 1/span 4;
40
40
  }
41
41
  @media screen and (min-width: 600px) {
42
- ._teddy-footer__content_p4fn7_38 {
42
+ ._teddy-footer__content_1xw3m_38 {
43
43
  grid-column: 1/span 8;
44
44
  }
45
45
  }
46
46
  @media screen and (min-width: 1025px) {
47
- ._teddy-footer__content_p4fn7_38 {
47
+ ._teddy-footer__content_1xw3m_38 {
48
48
  grid-column: 1/span 12;
49
49
  }
50
50
  }
51
- ._teddy-footer__top-row_p4fn7_51 {
51
+ ._teddy-footer__top-row_1xw3m_51 {
52
52
  display: flex;
53
53
  justify-content: space-between;
54
54
  }
55
- ._teddy-footer__top-row_p4fn7_51:hover:has(img:hover) {
55
+ ._teddy-footer__top-row_1xw3m_51:hover:has(img:hover) {
56
56
  color: inherit;
57
57
  background-color: transparent;
58
58
  }
59
+ ._teddy-footer__top-row_1xw3m_51 a:has(svg) {
60
+ padding: var(--teddy-spacing-150);
61
+ }
59
62
  @media screen and (max-width: 600px) {
60
- ._teddy-footer__top-row_p4fn7_51:has(svg) {
63
+ ._teddy-footer__top-row_1xw3m_51:has(svg) {
61
64
  padding: 0 var(--teddy-spacing-150);
62
65
  }
63
66
  }
64
- ._teddy-footer__list_p4fn7_64 {
67
+ ._teddy-footer__list_1xw3m_67 {
65
68
  display: grid;
66
69
  gap: var(--teddy-spacing-300);
67
70
  grid-template-columns: repeat(4, 1fr);
68
71
  padding: var(--teddy-spacing-600) 0;
69
72
  }
70
73
  @media screen and (max-width: 600px) {
71
- ._teddy-footer__list_p4fn7_64 {
74
+ ._teddy-footer__list_1xw3m_67 {
72
75
  padding: 0;
73
76
  display: flex;
74
77
  flex-direction: column;
75
78
  }
76
79
  }
77
- ._teddy-footer__links-list_p4fn7_77 {
80
+ ._teddy-footer__links-list_1xw3m_80 {
78
81
  display: flex;
79
82
  flex-direction: column;
80
83
  gap: var(--teddy-spacing-100);
81
84
  }
82
- ._teddy-footer__links-list_p4fn7_77 a {
85
+ ._teddy-footer__links-list_1xw3m_80 a {
83
86
  color: var(--teddy-color-brand-white);
84
87
  text-decoration: none;
85
88
  }
86
- ._teddy-footer__links-list_p4fn7_77 a:hover {
89
+ ._teddy-footer__links-list_1xw3m_80 a:hover {
87
90
  color: var(--teddy-color-purple-900);
88
91
  background-color: var(--teddy-color-background-interactive-transparent-hover);
89
92
  }
90
- ._teddy-footer__column_p4fn7_90 {
93
+ ._teddy-footer__column_1xw3m_93 {
91
94
  display: flex;
92
95
  flex-direction: column;
93
96
  gap: var(--teddy-spacing-100);
94
97
  }
95
- ._teddy-footer__bottom-row_p4fn7_95 {
98
+ ._teddy-footer__bottom-row_1xw3m_98 {
96
99
  display: flex;
97
100
  justify-content: space-between;
98
101
  padding: 0;
99
102
  }
100
103
  @media screen and (max-width: 600px) {
101
- ._teddy-footer__bottom-row_p4fn7_95 {
104
+ ._teddy-footer__bottom-row_1xw3m_98 {
102
105
  padding: 0 var(--teddy-spacing-200);
103
106
  flex-direction: column;
104
107
  justify-content: flex-start;
105
108
  gap: var(--teddy-spacing-200);
106
109
  }
107
110
  }
108
- ._teddy-footer__bottom-row_p4fn7_95 a {
111
+ ._teddy-footer__bottom-row_1xw3m_98 a {
109
112
  color: var(--teddy-color-purple-300);
110
113
  align-items: end;
111
114
  margin-top: auto;
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.7.8",
23
+ "version": "0.7.10",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"