@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/Tabs/Tabs.js

@@ -8,6 +8,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
+Tabs organise and allow navigation between groups of content that are related and at the same level
+of hierarchy.
+ */
 const Tabs = _ref => {
   let {
     className,

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tabs from "./Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+/**
+ * To horizontally align the Tabs with other content, they can be contained within a Row component to
+provide correct gutters.
+ */
+export declare const HorizontallyAligned: Story;

package/dist/components/Tabs/Tabs.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HorizontallyAligned = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Tabs.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    links: [{
+      active: true,
+      label: "Summary"
+    }, {
+      active: false,
+      label: "Network"
+    }, {
+      active: false,
+      label: "Storage"
+    }, {
+      active: false,
+      label: "Settings"
+    }]
+  }
+};
+
+/**
+ * To horizontally align the Tabs with other content, they can be contained within a Row component to
+provide correct gutters.
+ */
+const HorizontallyAligned = exports.HorizontallyAligned = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    links: [{
+      active: true,
+      label: "Summary"
+    }, {
+      active: false,
+      label: "Network"
+    }, {
+      active: false,
+      label: "Storage"
+    }, {
+      active: false,
+      label: "Settings"
+    }]
+  }), /*#__PURE__*/_react.default.createElement("p", null, "There should be gutters and the text should be horizontally aligned")),
+  name: "Horizontally aligned"
+};

package/dist/components/Textarea/Textarea.d.ts

@@ -61,5 +61,10 @@ export type Props = PropsWithSpread<{
      */
     onControlEnter?: () => void;
 }, TextareaHTMLAttributes<HTMLTextAreaElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Textarea](https://docs.vanillaframework.io/base/forms/#textarea).
+ *
+ * The Textarea component defines a multi-line text input control.
+ */
 declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
 export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -15,6 +15,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * The props for the Textarea component.
  */
 
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Textarea](https://docs.vanillaframework.io/base/forms/#textarea).
+ *
+ * The Textarea component defines a multi-line text input control.
+ */
 const Textarea = _ref => {
   var _props$value;
   let {

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

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

package/dist/components/Textarea/Textarea.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DynamicHeight = exports.Default = void 0;
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Textarea.default,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    success: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    label: "Tell us about your project or interest",
+    id: "textarea2",
+    rows: 3,
+    defaultValue: "Ubuntu"
+  }
+};
+const DynamicHeight = exports.DynamicHeight = {
+  name: "Dynamic Height",
+  args: {
+    label: "Text area that will dynamically adjust its height based on content",
+    defaultValue: "Ubuntu",
+    grow: true
+  }
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -63,17 +63,13 @@ export type Props = {
 };
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
 /**
- * A React component for Vanilla tooltips.
- * @param [autoAdjust=true] Whether the tooltip should adjust to fit in the screen.
- * @param children Element on which to apply the tooltip.
- * @param className An optional class to apply to the wrapping element.
- * @param [followMouse=false] Whether the tooltip should follow the mouse.
- * @param message Message to display when the element is hovered.
- * @param [position="top-left"] Position of the tooltip relative to the element.
- * @param positionElementClassName An optional class to apply to the element that wraps the children.
- * @param tooltipClassName An optional class to apply to the tooltip message element.
- * @param zIndex The z-index value of the tooltip message element.
- * @param delay Delay in ms after which Tooltip will appear (defaults to 350ms).
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
+ *
+ * Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.
+ *
+ * They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
+ *
+ * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
  */
 declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -105,17 +105,13 @@ const adjustForWindow = (position, fitsWindow) => {
 };
 
 /**
- * A React component for Vanilla tooltips.
- * @param [autoAdjust=true] Whether the tooltip should adjust to fit in the screen.
- * @param children Element on which to apply the tooltip.
- * @param className An optional class to apply to the wrapping element.
- * @param [followMouse=false] Whether the tooltip should follow the mouse.
- * @param message Message to display when the element is hovered.
- * @param [position="top-left"] Position of the tooltip relative to the element.
- * @param positionElementClassName An optional class to apply to the element that wraps the children.
- * @param tooltipClassName An optional class to apply to the tooltip message element.
- * @param zIndex The z-index value of the tooltip message element.
- * @param delay Delay in ms after which Tooltip will appear (defaults to 350ms).
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
+ *
+ * Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.
+ *
+ * They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
+ *
+ * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
  */
 exports.adjustForWindow = adjustForWindow;
 const Tooltip = _ref => {

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Tooltip from "./Tooltip";
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const FollowMouse: Story;
+/**
+ * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
+ * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
+ */
+export declare const TargetingElements: Story;

package/dist/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TargetingElements = exports.FollowMouse = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
+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 && Object.prototype.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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      padding: "3rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, args, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "u-no-margin--bottom"
+  }, "Hover over me!")));
+};
+const meta = {
+  component: _Tooltip.default,
+  render: Template,
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: {
+        type: "radio"
+      },
+      options: Object.values(_Tooltip.position)
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: Template.bind({}),
+  name: "Default",
+  args: {
+    message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Tooltip", " ", /*#__PURE__*/_react.default.createElement("a", {
+      href: "#todo",
+      target: "_blank"
+    }, "Link1"))
+  }
+};
+const FollowMouse = exports.FollowMouse = {
+  render: Template.bind({}),
+  name: "Follow mouse",
+  args: {
+    followMouse: true,
+    message: "Tooltip message to display.",
+    position: "top-center"
+  }
+};
+
+/**
+ * The tooltip elements are displayed inside a [Portal](https://reactjs.org/docs/portals.html) so that the tooltip is not constrained by its current position in the DOM.
+ * Sometimes however, you need to target the tooltip elements. This can be achieved by passing class names to the tooltip elements. You can also pass classes to the elements that trigger and position the tooltip.
+ */
+const TargetingElements = exports.TargetingElements = {
+  render: Template.bind({}),
+  name: "Targeting elements",
+  args: {
+    className: "custom-wrapping-class",
+    positionElementClassName: "custom-position-class",
+    tooltipClassName: "custom-tooltip-class",
+    message: "Tooltip message to display."
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -28,19 +28,19 @@
     "@babel/cli": "7.24.5",
     "@babel/eslint-parser": "7.24.5",
     "@babel/preset-typescript": "7.24.1",
-    "@percy/cli": "1.28.5",
-    "@percy/storybook": "5.0.3",
+    "@percy/cli": "1.28.8",
+    "@percy/storybook": "6.0.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "7.6.19",
-    "@storybook/addon-essentials": "7.6.19",
-    "@storybook/addon-interactions": "7.6.19",
-    "@storybook/addon-links": "7.6.19",
-    "@storybook/addon-mdx-gfm": "7.6.19",
-    "@storybook/addon-onboarding": "1.0.11",
-    "@storybook/blocks": "7.6.19",
-    "@storybook/react": "7.6.19",
-    "@storybook/react-webpack5": "7.6.19",
+    "@storybook/addon-a11y": "8.1.11",
+    "@storybook/addon-essentials": "8.1.11",
+    "@storybook/addon-interactions": "8.1.11",
+    "@storybook/addon-links": "8.1.11",
+    "@storybook/addon-onboarding": "8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/blocks": "8.1.11",
+    "@storybook/react": "8.1.11",
+    "@storybook/react-webpack5": "8.1.11",
     "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
@@ -79,7 +79,7 @@
     "sass": "1.77.0",
     "sass-loader": "14.2.1",
     "semantic-release": "23.0.8",
-    "storybook": "7.6.19",
+    "storybook": "8.1.11",
     "style-loader": "4.0.0",
     "stylelint": "16.5.0",
     "stylelint-config-prettier": "9.0.5",
@@ -110,7 +110,7 @@
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
     "postcss": "^8.3.11",
-    "jackspeak": "2.3.6"
+    "jackspeak": "2.1.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",