@canonical/react-components 1.4.0 → 1.6.0

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

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import "./DoughnutChart.scss";
+export type Segment = {
+    /**
+     * The colour of the segment.
+     */
+    color: string;
+    /**
+     * The segment tooltip.
+     */
+    tooltip?: string;
+    /**
+     * The segment length.
+     */
+    value: number;
+};
+export type Props = {
+    /**
+     * The label in the centre of the doughnut.
+     */
+    label?: string;
+    /**
+     * An optional class name applied to the label.
+     */
+    labelClassname?: string;
+    /**
+     * An optional class name applied to the wrapping element.
+     */
+    className?: string;
+    /**
+     * The width of the segments when hovered.
+     */
+    segmentHoverWidth: number;
+    /**
+     * The width of the segments.
+     */
+    segmentThickness: number;
+    /**
+     * The doughnut segments.
+     */
+    segments: Segment[];
+    /**
+     * The size of the doughnut.
+     */
+    size: number;
+    /**
+     *  ID associated to the specific instance of a Chart.
+     */
+    chartID: string;
+};
+export declare enum TestIds {
+    Label = "label",
+    Segment = "segment",
+    Chart = "chart",
+    Section = "Section"
+}
+declare const DoughnutChart: FC<Props>;
+export default DoughnutChart;

package/dist/components/DoughnutChart/DoughnutChart.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TestIds = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+require("./DoughnutChart.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let TestIds = exports.TestIds = /*#__PURE__*/function (TestIds) {
+  TestIds["Label"] = "label";
+  TestIds["Segment"] = "segment";
+  TestIds["Chart"] = "chart";
+  TestIds["Section"] = "Section";
+  return TestIds;
+}({});
+const DoughnutChart = _ref => {
+  let {
+    className,
+    label,
+    labelClassname,
+    segmentHoverWidth,
+    segmentThickness,
+    segments,
+    size,
+    chartID
+  } = _ref;
+  const [tooltipMessage, setTooltipMessage] = (0, _react.useState)(null);
+  const id = (0, _react.useRef)("doughnut-chart-".concat(chartID));
+  const hoverIncrease = segmentHoverWidth - segmentThickness;
+  const adjustedHoverWidth = segmentHoverWidth + hoverIncrease;
+  // The canvas needs enough space so that the hover state does not get cut off.
+  const canvasSize = size + adjustedHoverWidth - segmentThickness;
+  const diameter = size - segmentThickness;
+  const radius = diameter / 2;
+  const circumference = Math.round(diameter * Math.PI);
+  // Calculate the total value of all segments.
+  const total = segments.reduce((totalValue, segment) => totalValue += segment.value, 0);
+  let accumulatedLength = 0;
+  const segmentNodes = segments.map((_ref2, i) => {
+    let {
+      color,
+      tooltip,
+      value
+    } = _ref2;
+    // The start position is the value of all previous segments.
+    const startPosition = accumulatedLength;
+    // The length of the segment (as a portion of the doughnut circumference)
+    const segmentLength = value / total * circumference;
+    // The space left until the end of the circle.
+    const remainingSpace = circumference - (segmentLength + startPosition);
+    // Add this segment length to the running tally.
+    accumulatedLength += segmentLength;
+    return /*#__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,
+      "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
+      onMouseOut: tooltip ? () => {
+        // Hide the tooltip.
+        setTooltipMessage(null);
+      } : undefined,
+      onMouseOver: tooltip ? () => {
+        setTooltipMessage(tooltip);
+      } : undefined,
+      r: radius,
+      style: {
+        stroke: color,
+        strokeWidth: segmentThickness,
+        // The dash array used is:
+        // 1 - We want there to be a space before the first visible dash so
+        //     by setting this to 0 we can use the next dash for the space.
+        // 2 - This gap is the distance of all previous segments
+        //     so that the segment starts in the correct spot.
+        // 3 - A dash that is the length of the segment.
+        // 4 - A gap from the end of the segment to the start of the circle
+        //     so that the dash array doesn't repeat and be visible.
+        strokeDasharray: "0 ".concat(startPosition.toFixed(2), " ").concat(segmentLength.toFixed(2), " ").concat(remainingSpace.toFixed(2))
+      }
+      // Rotate the segment so that the segments start at the top of
+      // the chart.
+      ,
+      transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("doughnut-chart", className),
+    style: {
+      maxWidth: "".concat(canvasSize, "px")
+    },
+    "data-testid": TestIds.Chart
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    className: "doughnut-chart__tooltip",
+    followMouse: true,
+    message: tooltipMessage,
+    position: "right"
+  }, /*#__PURE__*/_react.default.createElement("style", null, "#".concat(id.current, " .doughnut-chart__segment:hover {\n          stroke-width: ").concat(adjustedHoverWidth, " !important;\n        }")), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "doughnut-chart__chart",
+    id: id.current,
+    viewBox: "0 0 ".concat(canvasSize, " ").concat(canvasSize),
+    "data-testid": TestIds.Section,
+    "aria-labelledby": "".concat(id.current, "-chart-title ").concat(id.current, "-chart-desc")
+  }, label && /*#__PURE__*/_react.default.createElement("title", {
+    id: "".concat(id.current, "-chart-title")
+  }, label), /*#__PURE__*/_react.default.createElement("desc", {
+    id: "".concat(id.current, "-chart-desc")
+  }, segments.map(segment => {
+    let description = "";
+    if (segment.tooltip) description += "".concat(segment.tooltip, ": ");
+    description += segment.value;
+    return description;
+  }).join(",")), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "canvasMask"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "white",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: canvasSize / 2,
+    cy: canvasSize / 2,
+    fill: "black",
+    r: radius - segmentThickness / 2
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#canvasMask)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "transparent",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/_react.default.createElement("g", null, segmentNodes)), label ? /*#__PURE__*/_react.default.createElement("text", {
+    x: radius + adjustedHoverWidth / 2,
+    y: radius + adjustedHoverWidth / 2
+  }, /*#__PURE__*/_react.default.createElement("tspan", {
+    className: (0, _classnames.default)("doughnut-chart__label", labelClassname),
+    "data-testid": TestIds.Label
+  }, label)) : null)));
+};
+DoughnutChart.propTypes = {
+  label: _propTypes.default.string,
+  labelClassname: _propTypes.default.string,
+  className: _propTypes.default.string,
+  segmentHoverWidth: _propTypes.default.number.isRequired,
+  segmentThickness: _propTypes.default.number.isRequired,
+  segments: _propTypes.default.arrayOf(_propTypes.default.shape({
+    color: _propTypes.default.string.isRequired,
+    tooltip: _propTypes.default.string,
+    value: _propTypes.default.number.isRequired
+  })).isRequired,
+  size: _propTypes.default.number.isRequired,
+  chartID: _propTypes.default.string.isRequired
+};
+var _default = exports.default = DoughnutChart;

package/dist/components/DoughnutChart/DoughnutChart.scss

@@ -0,0 +1,30 @@
+@import "vanilla-framework";
+
+.doughnut-chart {
+  width: 6.5rem;
+
+  .doughnut-chart__tooltip {
+    display: block;
+  }
+
+  .doughnut-chart__tooltip > :only-child {
+    // Override the tooltip wrapper.
+    display: block !important;
+  }
+
+  .doughnut-chart__chart {
+    // Restrict hover areas to the strokes.
+    pointer-events: stroke;
+  }
+
+  .doughnut-chart__segment {
+    fill: transparent;
+
+    // Animate stroke size changes on hover.
+    transition: stroke-width 0.3s ease;
+  }
+}
+
+.doughnut-chart__legend {
+  list-style-type: none;
+}

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

@@ -0,0 +1,3 @@
+export { default } from "./DoughnutChart";
+export type { Props as DoughnutChartProps } from "./DoughnutChart";
+export type { Segment } from "./DoughnutChart";

package/dist/components/DoughnutChart/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DoughnutChart.default;
+  }
+});
+var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Stepper/Step/Step.d.ts

@@ -0,0 +1,47 @@
+import { LinkProps } from "../../Link";
+import { ClassName } from "../../../types";
+import "./Step.scss";
+export type Props = {
+    /**
+     * Whether the step has a darkened progress line.
+     */
+    hasProgressLine: boolean;
+    /**
+     * Index of the step.
+     */
+    index: number;
+    /**
+     * Title of the step.
+     */
+    title: string;
+    /**
+     * Optional label for the step.
+     */
+    label?: string;
+    /**
+     * Optional props to configure the `Link` component.
+     */
+    linkProps?: LinkProps;
+    /**
+     * Whether the step is clickable. If set to false, the step is not clickable and the text is muted with a light-dark colour.
+     */
+    enabled: boolean;
+    /**
+     * Optional value to highlight the selected step.
+     */
+    selected?: boolean;
+    /**
+     * Icon to display in the step. Specify "number" if the index should be displayed.
+     */
+    iconName: string;
+    /**
+     * Optional class(es) to pass to the Icon component.
+     */
+    iconClassName?: ClassName;
+    /**
+     * Function that is called when the step is clicked.
+     */
+    handleClick: () => void;
+};
+declare const Step: ({ hasProgressLine, index, title, label, linkProps, enabled, selected, iconName, iconClassName, handleClick, ...props }: Props) => JSX.Element;
+export default Step;

package/dist/components/Stepper/Step/Step.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _Link = _interopRequireDefault(require("../../Link"));
+require("./Step.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Step = _ref => {
+  let {
+    hasProgressLine,
+    index,
+    title,
+    label,
+    linkProps,
+    enabled,
+    selected = false,
+    iconName,
+    iconClassName,
+    handleClick,
+    ...props
+  } = _ref;
+  const stepStatusClass = enabled ? "step-enabled" : "step-disabled";
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)("step", {
+      "progress-line": hasProgressLine,
+      "step-selected": selected
+    })
+  }, props), iconName === "number" ? /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("step-number", {
+      "step-number-disabled": !enabled
+    })
+  }, index) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: iconName,
+    className: (0, _classnames.default)("step-status-icon", iconClassName)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "step-content"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(stepStatusClass),
+    onClick: handleClick
+  }, title), label && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("step-optional-content", "u-no-margin--bottom", {
+      "step-disabled": !enabled
+    })
+  }, label), linkProps && /*#__PURE__*/_react.default.createElement(_Link.default, _extends({
+    className: "p-text--small u-no-margin--bottom step-optional-content"
+  }, linkProps), linkProps.children)));
+};
+Step.propTypes = {
+  hasProgressLine: _propTypes.default.bool.isRequired,
+  index: _propTypes.default.number.isRequired,
+  title: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string,
+  enabled: _propTypes.default.bool.isRequired,
+  selected: _propTypes.default.bool,
+  iconName: _propTypes.default.string.isRequired,
+  handleClick: _propTypes.default.func.isRequired
+};
+var _default = exports.default = Step;

package/dist/components/Stepper/Step/Step.scss

@@ -0,0 +1,113 @@
+@import "vanilla-framework";
+
+.step-number {
+  border: 0.08rem solid black;
+  border-radius: 1rem;
+  height: 1.4rem;
+  line-height: 1.3;
+  margin-left: $sph--small;
+  margin-right: 0.1rem;
+  margin-top: 0.1rem;
+  text-align: center;
+  width: 1.4rem;
+}
+
+.step-number-disabled {
+  border: 0.08rem solid #757575;
+  color: #757575;
+}
+
+.step-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin-left: $sph--small;
+}
+
+.step-enabled:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.step-disabled {
+  color: #757575;
+  pointer-events: none;
+}
+
+.step-status-icon {
+  height: 1.6rem;
+  margin-left: 0.4rem;
+  width: 1.6rem;
+}
+
+.step-selected {
+  background-color: var(--vf-color-background-alt);
+}
+
+.step-optional-content {
+  font-size: 12px;
+  max-width: 10rem;
+}
+
+.stepper-horizontal {
+  display: flex;
+
+  .p-inline-list__item {
+    margin: 0;
+  }
+
+  .step {
+    border-top: 0.2rem solid var(--vf-color-border-default);
+    display: flex;
+    height: 100%;
+    padding: 0.4rem $spv--medium;
+    width: fit-content;
+  }
+
+  .step-status-icon {
+    margin-left: 0;
+  }
+
+  .step-number {
+    margin-left: 0;
+  }
+
+  .step-content {
+    max-width: 10rem;
+  }
+
+  .progress-line {
+    border-top: 0.2rem solid black;
+  }
+
+  :first-child .step {
+    padding-left: 0;
+  }
+}
+
+.stepper-vertical {
+  .p-list__item {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  .step {
+    border-left: 0.2rem solid var(--vf-color-border-default);
+    display: flex;
+    padding: $spv--medium 0;
+    padding-right: 0.5rem;
+    width: fit-content;
+  }
+
+  .progress-line {
+    border-left: 0.2rem solid black;
+  }
+
+  :first-child .step {
+    padding-top: 0;
+  }
+
+  :last-child .step {
+    padding-bottom: 0;
+  }
+}

package/dist/components/Stepper/Step/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Step";
+export type { Props as StepProps } from "./Step";

package/dist/components/Stepper/Step/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Step.default;
+  }
+});
+var _Step = _interopRequireDefault(require("./Step"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { StepProps } from "./Step";
+export type Props = {
+    /**
+     * Optional value that defines the orientation of the stepper. Can either be "horizontal" or "vertical". If not specified, it defaults to "vertical".
+     */
+    variant?: "horizontal" | "vertical";
+    /**
+     * A list of steps.
+     */
+    steps: React.ReactElement<StepProps>[];
+};
+/**
+ * This is a stepper component that is used to guide users through a series of sequential steps, providing a clear start and end point. It helps users understand their current position in the process and anticipate upcoming actions. The stepper component should accept a list of Step components for the steps.
+ */
+declare const Stepper: ({ variant, steps }: Props) => JSX.Element;
+export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _List = _interopRequireDefault(require("../List"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * This is a stepper component that is used to guide users through a series of sequential steps, providing a clear start and end point. It helps users understand their current position in the process and anticipate upcoming actions. The stepper component should accept a list of Step components for the steps.
+ */
+
+const Stepper = _ref => {
+  let {
+    variant = "vertical",
+    steps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: steps,
+    inline: variant === "horizontal",
+    className: (0, _classnames.default)({
+      "stepper-horizontal": variant === "horizontal",
+      "stepper-vertical": variant === "vertical"
+    })
+  });
+};
+Stepper.propTypes = {
+  variant: _propTypes.default.oneOf(["horizontal", "vertical"]),
+  steps: _propTypes.default.arrayOf(_propTypes.default.element).isRequired
+};
+var _default = exports.default = Stepper;

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

@@ -0,0 +1,2 @@
+export { default, type Props as StepperProps } from "./Stepper";
+export { default as Step, type StepProps } from "./Step";

package/dist/components/Stepper/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _Step.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Stepper.default;
+  }
+});
+var _Stepper = _interopRequireDefault(require("./Stepper"));
+var _Step = _interopRequireDefault(require("./Step"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as Col } from "./components/Col";
 export { default as ConfirmationButton } from "./components/ConfirmationButton";
 export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
+export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
@@ -54,6 +55,7 @@ export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
 export { default as StatusLabel, StatusLabelAppearance, } from "./components/StatusLabel";
+export { default as Stepper, Step } from "./components/Stepper";
 export { default as Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
 export { default as Table } from "./components/Table";
@@ -86,6 +88,7 @@ export type { ColProps, ColSize } from "./components/Col";
 export type { ConfirmationButtonProps } from "./components/ConfirmationButton";
 export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
+export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
@@ -117,6 +120,7 @@ export type { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
 export type { StatusLabelProps } from "./components/StatusLabel";
+export type { StepperProps, StepProps } from "./components/Stepper";
 export type { StripProps } from "./components/Strip";
 export type { SummaryButtonProps } from "./components/SummaryButton";
 export type { TableProps } from "./components/Table";

package/dist/index.js

@@ -27,6 +27,7 @@ var _exportNames = {
   ConfirmationButton: true,
   ConfirmationModal: true,
   ContextualMenu: true,
+  DoughnutChart: true,
   EmptyState: true,
   Field: true,
   Form: true,
@@ -70,6 +71,8 @@ var _exportNames = {
   Spinner: true,
   StatusLabel: true,
   StatusLabelAppearance: true,
+  Stepper: true,
+  Step: true,
   Strip: true,
   SummaryButton: true,
   Table: true,
@@ -232,6 +235,12 @@ Object.defineProperty(exports, "ContextualMenu", {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "DoughnutChart", {
+  enumerable: true,
+  get: function () {
+    return _DoughnutChart.default;
+  }
+});
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
   get: function () {
@@ -454,6 +463,18 @@ Object.defineProperty(exports, "StatusLabelAppearance", {
     return _StatusLabel.StatusLabelAppearance;
   }
 });
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _Stepper.Step;
+  }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function () {
+    return _Stepper.default;
+  }
+});
 Object.defineProperty(exports, "Strip", {
   enumerable: true,
   get: function () {
@@ -649,6 +670,7 @@ var _Col = _interopRequireDefault(require("./components/Col"));
 var _ConfirmationButton = _interopRequireDefault(require("./components/ConfirmationButton"));
 var _ConfirmationModal = _interopRequireDefault(require("./components/ConfirmationModal"));
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
+var _DoughnutChart = _interopRequireDefault(require("./components/DoughnutChart"));
 var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));
@@ -695,6 +717,7 @@ var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));
 var _StatusLabel = _interopRequireWildcard(require("./components/StatusLabel"));
+var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
 var _Strip = _interopRequireDefault(require("./components/Strip"));
 var _SummaryButton = _interopRequireDefault(require("./components/SummaryButton"));
 var _Table = _interopRequireDefault(require("./components/Table"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {