@canonical/react-components 4.6.2 → 4.8.0

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 (11) hide show
  1. package/dist/components/DoughnutChart/DoughnutChart.d.ts +4 -0
  2. package/dist/components/DoughnutChart/DoughnutChart.js +10 -3
  3. package/dist/components/DoughnutChart/DoughnutChart.stories.d.ts +4 -0
  4. package/dist/components/DoughnutChart/DoughnutChart.stories.js +34 -1
  5. package/dist/components/ThemeSwitcher/ThemeSwitcher.js +2 -0
  6. package/dist/esm/components/DoughnutChart/DoughnutChart.d.ts +4 -0
  7. package/dist/esm/components/DoughnutChart/DoughnutChart.js +10 -3
  8. package/dist/esm/components/DoughnutChart/DoughnutChart.stories.d.ts +4 -0
  9. package/dist/esm/components/DoughnutChart/DoughnutChart.stories.js +33 -0
  10. package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.js +2 -0
  11. package/package.json +2 -2
package/dist/components/DoughnutChart/DoughnutChart.d.ts CHANGED
@@ -5,6 +5,10 @@ export type Segment = {
5
5
  * The colour of the segment.
6
6
  */
7
7
  color: string;
8
+ /**
9
+ * An optional URL that makes the segment a link.
10
+ */
11
+ href?: string;
8
12
  /**
9
13
  * The segment tooltip.
10
14
  */
package/dist/components/DoughnutChart/DoughnutChart.js CHANGED
@@ -67,19 +67,19 @@ const DoughnutChart = _ref => {
67
67
  const segmentNodes = segmentsWithOffsets.map((_ref2, i) => {
68
68
  let {
69
69
  color,
70
+ href,
70
71
  tooltip,
71
72
  value,
72
73
  startPosition,
73
74
  segmentLength,
74
75
  remainingSpace
75
76
  } = _ref2;
76
- return /*#__PURE__*/_react.default.createElement("circle", {
77
+ const circle = /*#__PURE__*/_react.default.createElement("circle", {
77
78
  className: "doughnut-chart__segment",
78
79
  cx: radius - segmentThickness / 2 - hoverIncrease,
79
80
  cy: radius + segmentThickness / 2 + hoverIncrease,
80
81
  "data-testid": TestIds.Segment,
81
- key: i,
82
- tabIndex: 0,
82
+ tabIndex: href ? undefined : 0,
83
83
  "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
84
84
  onMouseOut: tooltip ? () => {
85
85
  // Hide the tooltip.
@@ -107,6 +107,12 @@ const DoughnutChart = _ref => {
107
107
  ,
108
108
  transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
109
109
  });
110
+ return href ? /*#__PURE__*/_react.default.createElement("a", {
111
+ key: i,
112
+ href: href
113
+ }, circle) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
114
+ key: i
115
+ }, circle);
110
116
  });
111
117
  return /*#__PURE__*/_react.default.createElement("div", {
112
118
  className: (0, _classnames.default)("doughnut-chart", className),
@@ -171,6 +177,7 @@ DoughnutChart.propTypes = {
171
177
  segmentThickness: _propTypes.default.number.isRequired,
172
178
  segments: _propTypes.default.arrayOf(_propTypes.default.shape({
173
179
  color: _propTypes.default.string.isRequired,
180
+ href: _propTypes.default.string,
174
181
  tooltip: _propTypes.default.string,
175
182
  value: _propTypes.default.number.isRequired
176
183
  })).isRequired,
package/dist/components/DoughnutChart/DoughnutChart.stories.d.ts CHANGED
@@ -7,3 +7,7 @@ type Story = StoryObj<typeof DoughnutChart>;
7
7
  * The Doughnut Chart component visually represents data segments in a circular format, with tooltips that appear on hover, and segments that can be customized via props.
8
8
  */
9
9
  export declare const Default: Story;
10
+ /**
11
+ * Segments can optionally include an `href` to make them navigable links.
12
+ */
13
+ export declare const WithLinks: Story;
package/dist/components/DoughnutChart/DoughnutChart.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.Default = void 0;
6
+ exports.default = exports.WithLinks = exports.Default = void 0;
7
7
  var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
8
8
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
9
  const meta = {
@@ -39,4 +39,37 @@ const Default = exports.Default = {
39
39
  }],
40
40
  size: 150
41
41
  }
42
+ };
43
+
44
+ /**
45
+ * Segments can optionally include an `href` to make them navigable links.
46
+ */
47
+ const WithLinks = exports.WithLinks = {
48
+ name: "With links",
49
+ args: {
50
+ chartID: "with-links",
51
+ segmentHoverWidth: 45,
52
+ segmentThickness: 40,
53
+ segments: [{
54
+ color: "#0E8420",
55
+ href: "https://www.example.com/running",
56
+ tooltip: "Running",
57
+ value: 10
58
+ }, {
59
+ color: "#CC7900",
60
+ href: "https://www.example.com/stopped",
61
+ tooltip: "Stopped",
62
+ value: 15
63
+ }, {
64
+ color: "#C7162B",
65
+ href: "https://www.example.com/frozen",
66
+ tooltip: "Frozen",
67
+ value: 5
68
+ }, {
69
+ color: "#000",
70
+ tooltip: "Error",
71
+ value: 5
72
+ }],
73
+ size: 150
74
+ }
42
75
  };
package/dist/components/ThemeSwitcher/ThemeSwitcher.js CHANGED
@@ -28,8 +28,10 @@ exports.isDarkTheme = isDarkTheme;
28
28
  const applyTheme = theme => {
29
29
  if (isDarkTheme(theme)) {
30
30
  document.body.classList.add("is-dark");
31
+ document.documentElement.style.colorScheme = "dark";
31
32
  } else {
32
33
  document.body.classList.remove("is-dark");
34
+ document.documentElement.style.colorScheme = "light";
33
35
  }
34
36
  };
35
37
 
package/dist/esm/components/DoughnutChart/DoughnutChart.d.ts CHANGED
@@ -5,6 +5,10 @@ export type Segment = {
5
5
  * The colour of the segment.
6
6
  */
7
7
  color: string;
8
+ /**
9
+ * An optional URL that makes the segment a link.
10
+ */
11
+ href?: string;
8
12
  /**
9
13
  * The segment tooltip.
10
14
  */
package/dist/esm/components/DoughnutChart/DoughnutChart.js CHANGED
@@ -59,19 +59,19 @@ var DoughnutChart = _ref => {
59
59
  var segmentNodes = segmentsWithOffsets.map((_ref2, i) => {
60
60
  var {
61
61
  color,
62
+ href,
62
63
  tooltip,
63
64
  value,
64
65
  startPosition,
65
66
  segmentLength,
66
67
  remainingSpace
67
68
  } = _ref2;
68
- return /*#__PURE__*/React.createElement("circle", {
69
+ var circle = /*#__PURE__*/React.createElement("circle", {
69
70
  className: "doughnut-chart__segment",
70
71
  cx: radius - segmentThickness / 2 - hoverIncrease,
71
72
  cy: radius + segmentThickness / 2 + hoverIncrease,
72
73
  "data-testid": TestIds.Segment,
73
- key: i,
74
- tabIndex: 0,
74
+ tabIndex: href ? undefined : 0,
75
75
  "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
76
76
  onMouseOut: tooltip ? () => {
77
77
  // Hide the tooltip.
@@ -99,6 +99,12 @@ var DoughnutChart = _ref => {
99
99
  ,
100
100
  transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
101
101
  });
102
+ return href ? /*#__PURE__*/React.createElement("a", {
103
+ key: i,
104
+ href: href
105
+ }, circle) : /*#__PURE__*/React.createElement(React.Fragment, {
106
+ key: i
107
+ }, circle);
102
108
  });
103
109
  return /*#__PURE__*/React.createElement("div", {
104
110
  className: classNames("doughnut-chart", className),
@@ -163,6 +169,7 @@ DoughnutChart.propTypes = {
163
169
  segmentThickness: _pt.number.isRequired,
164
170
  segments: _pt.arrayOf(_pt.shape({
165
171
  color: _pt.string.isRequired,
172
+ href: _pt.string,
166
173
  tooltip: _pt.string,
167
174
  value: _pt.number.isRequired
168
175
  })).isRequired,
package/dist/esm/components/DoughnutChart/DoughnutChart.stories.d.ts CHANGED
@@ -7,3 +7,7 @@ type Story = StoryObj<typeof DoughnutChart>;
7
7
  * The Doughnut Chart component visually represents data segments in a circular format, with tooltips that appear on hover, and segments that can be customized via props.
8
8
  */
9
9
  export declare const Default: Story;
10
+ /**
11
+ * Segments can optionally include an `href` to make them navigable links.
12
+ */
13
+ export declare const WithLinks: Story;
package/dist/esm/components/DoughnutChart/DoughnutChart.stories.js CHANGED
@@ -32,4 +32,37 @@ export var Default = {
32
32
  }],
33
33
  size: 150
34
34
  }
35
+ };
36
+
37
+ /**
38
+ * Segments can optionally include an `href` to make them navigable links.
39
+ */
40
+ export var WithLinks = {
41
+ name: "With links",
42
+ args: {
43
+ chartID: "with-links",
44
+ segmentHoverWidth: 45,
45
+ segmentThickness: 40,
46
+ segments: [{
47
+ color: "#0E8420",
48
+ href: "https://www.example.com/running",
49
+ tooltip: "Running",
50
+ value: 10
51
+ }, {
52
+ color: "#CC7900",
53
+ href: "https://www.example.com/stopped",
54
+ tooltip: "Stopped",
55
+ value: 15
56
+ }, {
57
+ color: "#C7162B",
58
+ href: "https://www.example.com/frozen",
59
+ tooltip: "Frozen",
60
+ value: 5
61
+ }, {
62
+ color: "#000",
63
+ tooltip: "Error",
64
+ value: 5
65
+ }],
66
+ size: 150
67
+ }
35
68
  };
package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.js CHANGED
@@ -20,8 +20,10 @@ export var isDarkTheme = theme => {
20
20
  export var applyTheme = theme => {
21
21
  if (isDarkTheme(theme)) {
22
22
  document.body.classList.add("is-dark");
23
+ document.documentElement.style.colorScheme = "dark";
23
24
  } else {
24
25
  document.body.classList.remove("is-dark");
26
+ document.documentElement.style.colorScheme = "light";
25
27
  }
26
28
  };
27
29
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-components",
3
- "version": "4.6.2",
3
+ "version": "4.8.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": {
@@ -96,7 +96,7 @@
96
96
  "tsc-alias": "1.8.10",
97
97
  "typescript": "5.7.3",
98
98
  "typescript-eslint": "8.24.1",
99
- "vanilla-framework": "4.52.0",
99
+ "vanilla-framework": "4.55.1",
100
100
  "wait-on": "9.0.3",
101
101
  "webpack": "5.105.0"
102
102
  },