@canonical/react-components 4.6.1 → 4.7.0

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -41,7 +41,7 @@ const CheckboxInput = _ref => {
   const hasError = !!error;
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
     caution: caution,
-    className: (0, _classnames.default)(className, {
+    className: (0, _classnames.default)("p-checkbox-wrapper", className, {
       "p-checkbox--inline": inline
     }),
     error: error,

package/dist/components/DoughnutChart/DoughnutChart.d.ts

@@ -5,6 +5,10 @@ export type Segment = {
      * The colour of the segment.
      */
     color: string;
+    /**
+     * An optional URL that makes the segment a link.
+     */
+    href?: string;
     /**
      * The segment tooltip.
      */

package/dist/components/DoughnutChart/DoughnutChart.js

@@ -67,19 +67,19 @@ const DoughnutChart = _ref => {
   const segmentNodes = segmentsWithOffsets.map((_ref2, i) => {
     let {
       color,
+      href,
       tooltip,
       value,
       startPosition,
       segmentLength,
       remainingSpace
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement("circle", {
+    const circle = /*#__PURE__*/_react.default.createElement("circle", {
       className: "doughnut-chart__segment",
       cx: radius - segmentThickness / 2 - hoverIncrease,
       cy: radius + segmentThickness / 2 + hoverIncrease,
       "data-testid": TestIds.Segment,
-      key: i,
-      tabIndex: 0,
+      tabIndex: href ? undefined : 0,
       "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
       onMouseOut: tooltip ? () => {
         // Hide the tooltip.
@@ -107,6 +107,12 @@ const DoughnutChart = _ref => {
       ,
       transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
     });
+    return href ? /*#__PURE__*/_react.default.createElement("a", {
+      key: i,
+      href: href
+    }, circle) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: i
+    }, circle);
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("doughnut-chart", className),
@@ -171,6 +177,7 @@ DoughnutChart.propTypes = {
   segmentThickness: _propTypes.default.number.isRequired,
   segments: _propTypes.default.arrayOf(_propTypes.default.shape({
     color: _propTypes.default.string.isRequired,
+    href: _propTypes.default.string,
     tooltip: _propTypes.default.string,
     value: _propTypes.default.number.isRequired
   })).isRequired,

package/dist/components/DoughnutChart/DoughnutChart.stories.d.ts

@@ -7,3 +7,7 @@ type Story = StoryObj<typeof DoughnutChart>;
  * 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.
  */
 export declare const Default: Story;
+/**
+ * Segments can optionally include an `href` to make them navigable links.
+ */
+export declare const WithLinks: Story;

package/dist/components/DoughnutChart/DoughnutChart.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.WithLinks = exports.Default = void 0;
 var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -39,4 +39,37 @@ const Default = exports.Default = {
     }],
     size: 150
   }
+};
+
+/**
+ * Segments can optionally include an `href` to make them navigable links.
+ */
+const WithLinks = exports.WithLinks = {
+  name: "With links",
+  args: {
+    chartID: "with-links",
+    segmentHoverWidth: 45,
+    segmentThickness: 40,
+    segments: [{
+      color: "#0E8420",
+      href: "https://www.example.com/running",
+      tooltip: "Running",
+      value: 10
+    }, {
+      color: "#CC7900",
+      href: "https://www.example.com/stopped",
+      tooltip: "Stopped",
+      value: 15
+    }, {
+      color: "#C7162B",
+      href: "https://www.example.com/frozen",
+      tooltip: "Frozen",
+      value: 5
+    }, {
+      color: "#000",
+      tooltip: "Error",
+      value: 5
+    }],
+    size: 150
+  }
 };

package/dist/components/RadioInput/RadioInput.js

@@ -40,7 +40,7 @@ const RadioInput = _ref => {
   const hasError = !!error;
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
     caution: caution,
-    className: (0, _classnames.default)(className, {
+    className: (0, _classnames.default)("p-radio-wrapper", className, {
       "p-radio--inline": inline
     }),
     error: error,

package/dist/esm/components/CheckboxInput/CheckboxInput.js

@@ -33,7 +33,7 @@ var CheckboxInput = _ref => {
   var hasError = !!error;
   return /*#__PURE__*/React.createElement(Field, {
     caution: caution,
-    className: classnames(className, {
+    className: classnames("p-checkbox-wrapper", className, {
       "p-checkbox--inline": inline
     }),
     error: error,

package/dist/esm/components/DoughnutChart/DoughnutChart.d.ts

@@ -5,6 +5,10 @@ export type Segment = {
      * The colour of the segment.
      */
     color: string;
+    /**
+     * An optional URL that makes the segment a link.
+     */
+    href?: string;
     /**
      * The segment tooltip.
      */

package/dist/esm/components/DoughnutChart/DoughnutChart.js

@@ -59,19 +59,19 @@ var DoughnutChart = _ref => {
   var segmentNodes = segmentsWithOffsets.map((_ref2, i) => {
     var {
       color,
+      href,
       tooltip,
       value,
       startPosition,
       segmentLength,
       remainingSpace
     } = _ref2;
-    return /*#__PURE__*/React.createElement("circle", {
+    var circle = /*#__PURE__*/React.createElement("circle", {
       className: "doughnut-chart__segment",
       cx: radius - segmentThickness / 2 - hoverIncrease,
       cy: radius + segmentThickness / 2 + hoverIncrease,
       "data-testid": TestIds.Segment,
-      key: i,
-      tabIndex: 0,
+      tabIndex: href ? undefined : 0,
       "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
       onMouseOut: tooltip ? () => {
         // Hide the tooltip.
@@ -99,6 +99,12 @@ var DoughnutChart = _ref => {
       ,
       transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
     });
+    return href ? /*#__PURE__*/React.createElement("a", {
+      key: i,
+      href: href
+    }, circle) : /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, circle);
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("doughnut-chart", className),
@@ -163,6 +169,7 @@ DoughnutChart.propTypes = {
   segmentThickness: _pt.number.isRequired,
   segments: _pt.arrayOf(_pt.shape({
     color: _pt.string.isRequired,
+    href: _pt.string,
     tooltip: _pt.string,
     value: _pt.number.isRequired
   })).isRequired,

package/dist/esm/components/DoughnutChart/DoughnutChart.stories.d.ts

@@ -7,3 +7,7 @@ type Story = StoryObj<typeof DoughnutChart>;
  * 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.
  */
 export declare const Default: Story;
+/**
+ * Segments can optionally include an `href` to make them navigable links.
+ */
+export declare const WithLinks: Story;

package/dist/esm/components/DoughnutChart/DoughnutChart.stories.js

@@ -32,4 +32,37 @@ export var Default = {
     }],
     size: 150
   }
+};
+
+/**
+ * Segments can optionally include an `href` to make them navigable links.
+ */
+export var WithLinks = {
+  name: "With links",
+  args: {
+    chartID: "with-links",
+    segmentHoverWidth: 45,
+    segmentThickness: 40,
+    segments: [{
+      color: "#0E8420",
+      href: "https://www.example.com/running",
+      tooltip: "Running",
+      value: 10
+    }, {
+      color: "#CC7900",
+      href: "https://www.example.com/stopped",
+      tooltip: "Stopped",
+      value: 15
+    }, {
+      color: "#C7162B",
+      href: "https://www.example.com/frozen",
+      tooltip: "Frozen",
+      value: 5
+    }, {
+      color: "#000",
+      tooltip: "Error",
+      value: 5
+    }],
+    size: 150
+  }
 };

package/dist/esm/components/RadioInput/RadioInput.js

@@ -32,7 +32,7 @@ var RadioInput = _ref => {
   var hasError = !!error;
   return /*#__PURE__*/React.createElement(Field, {
     caution: caution,
-    className: classnames(className, {
+    className: classnames("p-radio-wrapper", className, {
       "p-radio--inline": inline
     }),
     error: error,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -96,7 +96,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.52.0",
+    "vanilla-framework": "4.55.1",
     "wait-on": "9.0.3",
     "webpack": "5.105.0"
   },