@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -0,0 +1,249 @@
+var _excluded = ["children", "className", "onClick"],
+  _excluded2 = ["adjustedPosition", "autoAdjust", "handleClose", "constrainPanelWidth", "dropdownClassName", "dropdownContent", "id", "isOpen", "links", "position", "positionCoords", "positionNode", "scrollOverflow", "setAdjustedPosition", "contextualMenuClassName"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import classNames from "classnames";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useWindowFitment } from "../../../hooks";
+import Button from "../../Button";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Dropdown"] = "submenu";
+  return Label;
+}({});
+
+/**
+ * The type of the menu links.
+ * @template L - The type of the link props.
+ */
+
+/**
+ * The props for the ContextualMenuDropdown component.
+ * @template L - The type of the link props.
+ */
+
+/**
+ * Calculate the styles for the menu.
+ * @param position - The menu position.
+ * @param positionCoords - The coordinates of the position node.
+ * @param constrainPanelWidth - Whether the menu width should be constrained to the position width.
+ */
+var getPositionStyle = (position, verticalPosition, positionCoords, constrainPanelWidth) => {
+  if (!positionCoords) {
+    return null;
+  }
+  var {
+    height,
+    left,
+    top,
+    width
+  } = positionCoords;
+  var topPos = verticalPosition === "bottom" ? top + height + (window.scrollY || 0) : top + (window.scrollY || 0);
+  var leftPos = left;
+  switch (position) {
+    case "left":
+      leftPos = left;
+      break;
+    case "center":
+      leftPos = left + width / 2;
+      break;
+    case "right":
+      leftPos = left + width;
+      break;
+    default:
+      break;
+  }
+  return _objectSpread({
+    position: "absolute",
+    left: leftPos,
+    top: topPos
+  }, constrainPanelWidth ? {
+    width
+  } : null);
+};
+
+/**
+ * Calculate the adjusted position in relation to the window.
+ * @param position - The requested position.
+ * @param fitsWindow - The window fitment info.
+ * @return The new position.
+ */
+export var adjustForWindow = (position, fitsWindow) => {
+  var newPosition = position;
+  if (!fitsWindow.fromRight.fitsLeft && newPosition === "right") {
+    newPosition = "left";
+  }
+  if (!fitsWindow.fromLeft.fitsRight && newPosition === "left") {
+    newPosition = "right";
+  }
+  // If the menu doesn't fit to the left or the right then center it.
+  if (!fitsWindow.fromLeft.fitsRight && !fitsWindow.fromRight.fitsLeft && (newPosition === "left" || newPosition === "right")) {
+    newPosition = "center";
+  }
+  // If the menu doesn't fit when centered then find a new position.
+  if (newPosition === "center" && (!fitsWindow.fromCenter.fitsCentered.fitsRight || !fitsWindow.fromCenter.fitsCentered.fitsLeft)) {
+    if (fitsWindow.fromLeft.fitsRight) {
+      newPosition = "left";
+    }
+    if (fitsWindow.fromRight.fitsLeft) {
+      newPosition = "right";
+    }
+  }
+  return newPosition;
+};
+
+/**
+ * Generate a menu link
+ * @template L - The type of the link props.
+ * @param link - A button
+ * @param key - A key for the DOM.
+ * @param handleClose - The function to close the menu.
+ */
+var generateLink = (link, key, handleClose) => {
+  var {
+      children,
+      className,
+      onClick
+    } = link,
+    props = _objectWithoutProperties(link, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    className: classNames("p-contextual-menu__link", className),
+    key: key,
+    onClick: onClick ? evt => {
+      handleClose(evt.nativeEvent);
+      onClick(evt);
+    } : null
+  }, props), children);
+};
+var getClosestScrollableParent = node => {
+  var currentNode = node;
+  while (currentNode && currentNode !== document.body) {
+    var {
+      overflowY,
+      overflowX
+    } = window.getComputedStyle(currentNode);
+    if (["auto", "scroll", "overlay"].includes(overflowY) && ["auto", "scroll", "overlay"].includes(overflowX)) {
+      return currentNode;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return document.body;
+};
+var ContextualMenuDropdown = _ref => {
+  var {
+      adjustedPosition,
+      autoAdjust,
+      handleClose,
+      constrainPanelWidth,
+      dropdownClassName,
+      dropdownContent,
+      id,
+      isOpen,
+      links,
+      position,
+      positionCoords,
+      positionNode,
+      scrollOverflow,
+      setAdjustedPosition,
+      contextualMenuClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded2);
+  var dropdown = useRef(null);
+  var [verticalPosition, setVerticalPosition] = useState("bottom");
+  var [positionStyle, setPositionStyle] = useState(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
+  var [maxHeight, setMaxHeight] = useState();
+  // Update the styles to position the menu.
+  var updatePositionStyle = useCallback(() => {
+    setPositionStyle(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
+  }, [adjustedPosition, positionCoords, verticalPosition, constrainPanelWidth]);
+  var updateVerticalPosition = useCallback(() => {
+    var _dropdown$current$get;
+    if (!positionNode) {
+      return null;
+    }
+    var scrollableParent = getClosestScrollableParent(positionNode);
+    if (!scrollableParent) {
+      return null;
+    }
+    var scrollableParentRect = scrollableParent.getBoundingClientRect();
+    var toggleRect = positionNode.getBoundingClientRect();
+
+    // Calculate the rect in relation to the scrollableParent
+    var relativeToScrollParentRect = {
+      top: toggleRect.top - scrollableParentRect.top,
+      bottom: toggleRect.bottom - scrollableParentRect.top
+    };
+    var scrollParentSpaceBelow = scrollableParentRect.height - relativeToScrollParentRect.bottom;
+    var scrollParentSpaceAbove = relativeToScrollParentRect.top;
+    var dropdownHeight = (_dropdown$current$get = dropdown.current.getBoundingClientRect().height) !== null && _dropdown$current$get !== void 0 ? _dropdown$current$get : 0;
+    var windowSpaceBelow = window.innerHeight - toggleRect.bottom;
+    setVerticalPosition(scrollParentSpaceBelow >= dropdownHeight && windowSpaceBelow >= dropdownHeight || windowSpaceBelow > scrollParentSpaceAbove ? "bottom" : "top");
+  }, [positionNode]);
+
+  // Update the position when the window fitment info changes.
+  var onUpdateWindowFitment = useCallback(fitsWindow => {
+    if (autoAdjust) {
+      setAdjustedPosition(adjustForWindow(position, fitsWindow));
+      updateVerticalPosition();
+    }
+    if (scrollOverflow) {
+      setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
+    }
+  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition, updateVerticalPosition]);
+
+  // Handle adjusting the horizontal position and scrolling of the dropdown so that it remains on screen.
+  useWindowFitment(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && (autoAdjust || scrollOverflow));
+
+  // Update the styles when the position changes.
+  useEffect(() => {
+    updatePositionStyle();
+  }, [adjustedPosition, updatePositionStyle]);
+  useEffect(() => {
+    updateVerticalPosition();
+  }, [updateVerticalPosition]);
+  return (
+    /*#__PURE__*/
+    // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).
+    // Extra span wrapper is required as the dropdown is rendered in a portal.
+    React.createElement("span", {
+      className: contextualMenuClassName,
+      style: positionStyle
+    }, /*#__PURE__*/React.createElement("span", _extends({
+      className: classNames("p-contextual-menu__dropdown", dropdownClassName),
+      id: id,
+      "aria-hidden": isOpen ? "false" : "true",
+      "aria-label": Label.Dropdown,
+      ref: dropdown,
+      style: _objectSpread(_objectSpread(_objectSpread({}, constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
+        width: positionStyle.width,
+        minWidth: 0,
+        maxWidth: "none"
+      } : {}), scrollOverflow ? {
+        maxHeight,
+        minHeight: "2rem",
+        overflowX: "auto"
+      } : {}), verticalPosition === "top" ? {
+        bottom: "0"
+      } : {})
+    }, props), dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(handleClose) : dropdownContent : links.map((item, i) => {
+      if (Array.isArray(item)) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "p-contextual-menu__group",
+          key: i
+        }, item.map((link, j) => generateLink(link, j, handleClose)));
+      } else if (typeof item === "string") {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "p-contextual-menu__non-interactive",
+          key: i
+        }, item);
+      }
+      return generateLink(item, i, handleClose);
+    })))
+  );
+};
+export default ContextualMenuDropdown;

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ContextualMenuDropdown";
+export type { MenuLink, Position, Props as ContextualMenuDropdownProps, } from "./ContextualMenuDropdown";

package/dist/esm/components/ContextualMenu/ContextualMenuDropdown/index.js

@@ -0,0 +1 @@
+export { default } from "./ContextualMenuDropdown";

package/dist/esm/components/ContextualMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./ContextualMenu";
+export type { Props as ContextualMenuProps } from "./ContextualMenu";
+export type { ContextualMenuDropdownProps, MenuLink, Position, } from "./ContextualMenuDropdown";

package/dist/esm/components/ContextualMenu/index.js

@@ -0,0 +1 @@
+export { default } from "./ContextualMenu";

package/dist/esm/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/esm/components/DoughnutChart/DoughnutChart.js

@@ -0,0 +1,154 @@
+import _pt from "prop-types";
+import React, { useRef, useState } from "react";
+import classNames from "classnames";
+import Tooltip from "../Tooltip";
+import "./DoughnutChart.scss";
+export var TestIds = /*#__PURE__*/function (TestIds) {
+  TestIds["Label"] = "label";
+  TestIds["Segment"] = "segment";
+  TestIds["Chart"] = "chart";
+  TestIds["Section"] = "Section";
+  return TestIds;
+}({});
+var DoughnutChart = _ref => {
+  var {
+    className,
+    label,
+    labelClassname,
+    segmentHoverWidth,
+    segmentThickness,
+    segments,
+    size,
+    chartID
+  } = _ref;
+  var [tooltipMessage, setTooltipMessage] = useState(null);
+  var id = useRef("doughnut-chart-".concat(chartID));
+  var hoverIncrease = segmentHoverWidth - segmentThickness;
+  var adjustedHoverWidth = segmentHoverWidth + hoverIncrease;
+  // The canvas needs enough space so that the hover state does not get cut off.
+  var canvasSize = size + adjustedHoverWidth - segmentThickness;
+  var diameter = size - segmentThickness;
+  var radius = diameter / 2;
+  var circumference = Math.round(diameter * Math.PI);
+  // Calculate the total value of all segments.
+  var total = segments.reduce((totalValue, segment) => totalValue += segment.value, 0);
+  var accumulatedLength = 0;
+  var segmentNodes = segments.map((_ref2, i) => {
+    var {
+      color,
+      tooltip,
+      value
+    } = _ref2;
+    // The start position is the value of all previous segments.
+    var startPosition = accumulatedLength;
+    // The length of the segment (as a portion of the doughnut circumference)
+    var segmentLength = value / total * circumference;
+    // The space left until the end of the circle.
+    var remainingSpace = circumference - (segmentLength + startPosition);
+    // Add this segment length to the running tally.
+    accumulatedLength += segmentLength;
+    return /*#__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,
+      "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.createElement("div", {
+    className: classNames("doughnut-chart", className),
+    style: {
+      maxWidth: "".concat(canvasSize, "px")
+    },
+    "data-testid": TestIds.Chart
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    className: "doughnut-chart__tooltip",
+    followMouse: true,
+    message: tooltipMessage,
+    position: "right"
+  }, /*#__PURE__*/React.createElement("style", null, "#".concat(id.current, " .doughnut-chart__segment:hover {\n          stroke-width: ").concat(adjustedHoverWidth, " !important;\n        }")), /*#__PURE__*/React.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.createElement("title", {
+    id: "".concat(id.current, "-chart-title")
+  }, label), /*#__PURE__*/React.createElement("desc", {
+    id: "".concat(id.current, "-chart-desc")
+  }, segments.map(segment => {
+    var description = "";
+    if (segment.tooltip) description += "".concat(segment.tooltip, ": ");
+    description += segment.value;
+    return description;
+  }).join(",")), /*#__PURE__*/React.createElement("mask", {
+    id: "canvasMask"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "white",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: canvasSize / 2,
+    cy: canvasSize / 2,
+    fill: "black",
+    r: radius - segmentThickness / 2
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#canvasMask)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "transparent",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/React.createElement("g", null, segmentNodes)), label ? /*#__PURE__*/React.createElement("text", {
+    x: radius + adjustedHoverWidth / 2,
+    y: radius + adjustedHoverWidth / 2
+  }, /*#__PURE__*/React.createElement("tspan", {
+    className: classNames("doughnut-chart__label", labelClassname),
+    "data-testid": TestIds.Label
+  }, label)) : null)));
+};
+DoughnutChart.propTypes = {
+  label: _pt.string,
+  labelClassname: _pt.string,
+  className: _pt.string,
+  segmentHoverWidth: _pt.number.isRequired,
+  segmentThickness: _pt.number.isRequired,
+  segments: _pt.arrayOf(_pt.shape({
+    color: _pt.string.isRequired,
+    tooltip: _pt.string,
+    value: _pt.number.isRequired
+  })).isRequired,
+  size: _pt.number.isRequired,
+  chartID: _pt.string.isRequired
+};
+export default DoughnutChart;

package/dist/esm/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/esm/components/DoughnutChart/DoughnutChart.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import DoughnutChart from "./DoughnutChart";
+declare const meta: Meta<typeof DoughnutChart>;
+export default meta;
+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;

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

@@ -0,0 +1,35 @@
+import DoughnutChart from "./DoughnutChart";
+var meta = {
+  component: DoughnutChart,
+  tags: ["autodocs"]
+};
+export default meta;
+/**
+ * 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 var Default = {
+  name: "Default",
+  args: {
+    chartID: "default",
+    segmentHoverWidth: 45,
+    segmentThickness: 40,
+    segments: [{
+      color: "#0E8420",
+      tooltip: "Running",
+      value: 10
+    }, {
+      color: "#CC7900",
+      tooltip: "Stopped",
+      value: 15
+    }, {
+      color: "#C7162B",
+      tooltip: "Frozen",
+      value: 5
+    }, {
+      color: "#000",
+      tooltip: "Error",
+      value: 5
+    }],
+    size: 150
+  }
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/components/DoughnutChart/index.js

@@ -0,0 +1 @@
+export { default } from "./DoughnutChart";

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

@@ -0,0 +1,25 @@
+import { ReactNode, HTMLProps, ReactElement } from "react";
+import { PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the empty state.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to add to the wrapping element.
+     */
+    className?: string;
+    /**
+     * An image representing the empty state.
+     */
+    image: ReactNode;
+    /**
+     * The title of the empty state.
+     */
+    title: string;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component to represent an empty state.
+ */
+export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => ReactElement;
+export default EmptyState;

package/dist/esm/components/EmptyState/EmptyState.js

@@ -0,0 +1,28 @@
+var _excluded = ["children", "className", "image", "title"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component to represent an empty state.
+ */
+export var EmptyState = _ref => {
+  var {
+      children,
+      className,
+      image,
+      title
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(["row", className])
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "u-align--right col-4 col-medium-2 col-small-1"
+  }, image), /*#__PURE__*/React.createElement("div", {
+    className: "u-align--left col-8 col-medium-4 col-small-3"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "p-heading--4 u-no-margin--bottom"
+  }, title), children));
+};
+export default EmptyState;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import EmptyState from "./EmptyState";
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+export declare const Default: Story;
+export declare const WithContent: Story;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import EmptyState from "./EmptyState";
+import Icon, { ICONS } from "../Icon";
+import Button from "../Button";
+var boxImage = /*#__PURE__*/React.createElement("img", {
+  src: "https://assets.ubuntu.com/v1/c17e0d92-container.svg",
+  style: {
+    maxWidth: "10rem",
+    maxHeight: "10rem"
+  },
+  alt: "empty state"
+});
+var doNothing = () => {};
+var meta = {
+  component: EmptyState,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement(EmptyState, {
+    image: boxImage,
+    title: "This application doesn't have any configuration parameters"
+  }),
+  name: "Default"
+};
+export var WithContent = {
+  render: () => /*#__PURE__*/React.createElement(EmptyState, {
+    image: boxImage,
+    title: "No instances found"
+  }, /*#__PURE__*/React.createElement("p", null, "There are no instances in this project. Spin up your first instance!"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: "#todo",
+    target: "_blank"
+  }, "How to create instances", /*#__PURE__*/React.createElement(Icon, {
+    name: ICONS.externalLink
+  }))), /*#__PURE__*/React.createElement(Button, {
+    appearance: "positive",
+    onClick: doNothing
+  }, "Create instance")),
+  name: "With content"
+};