@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Small = exports.PositiveDisabled = exports.Positive = exports.NegativeDisabled = exports.Negative = exports.LinkDisabled = exports.Link = exports.Inline = exports.IconWithTooltip = exports.IconText = exports.Icon = exports.Dense = exports.DefaultDisabled = exports.Default = exports.BrandDisabled = exports.Brand = exports.BaseDisabled = exports.Base = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Button = _interopRequireWildcard(require("./Button"));
+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 meta = {
+  component: _Button.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    appearance: {
+      control: {
+        options: _Button.ButtonAppearance,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    children: "Click me!",
+    appearance: _Button.ButtonAppearance.DEFAULT
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: "Button"
+  }
+};
+const DefaultDisabled = exports.DefaultDisabled = {
+  name: "Default disabled",
+  args: {
+    children: "Button",
+    disabled: true
+  }
+};
+const Base = exports.Base = {
+  name: "Base",
+  args: {
+    children: "Base button",
+    appearance: "base"
+  }
+};
+const BaseDisabled = exports.BaseDisabled = {
+  name: "Base disabled",
+  args: {
+    children: "Base button disabled",
+    appearance: "base",
+    disabled: true
+  }
+};
+const Link = exports.Link = {
+  name: "Link",
+  args: {
+    children: "Link button",
+    appearance: "base",
+    element: "a",
+    href: "#test"
+  }
+};
+const LinkDisabled = exports.LinkDisabled = {
+  name: "Link disabled",
+  args: {
+    children: "Link button disabled",
+    appearance: "base",
+    element: "a",
+    href: "#test",
+    disabled: true
+  }
+};
+const Positive = exports.Positive = {
+  name: "Positive",
+  args: {
+    children: "Positive button",
+    appearance: "positive"
+  }
+};
+const PositiveDisabled = exports.PositiveDisabled = {
+  name: "Positive disabled",
+  args: {
+    children: "Positive button disabled",
+    appearance: "positive",
+    disabled: true
+  }
+};
+const Negative = exports.Negative = {
+  name: "Negative",
+  args: {
+    children: "Negative button",
+    appearance: "negative"
+  }
+};
+const NegativeDisabled = exports.NegativeDisabled = {
+  name: "Negative disabled",
+  args: {
+    children: "Negative button disabled",
+    appearance: "negative",
+    disabled: true
+  }
+};
+const Brand = exports.Brand = {
+  name: "Brand",
+  args: {
+    children: "Brand button",
+    appearance: "brand"
+  }
+};
+const BrandDisabled = exports.BrandDisabled = {
+  name: "Brand disabled",
+  args: {
+    children: "Brand button disabled",
+    appearance: "brand",
+    disabled: true
+  }
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Everything you need to get started with Vanilla."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "neutral",
+    inline: true
+  }, "Inline button")),
+  name: "Inline"
+};
+const Dense = exports.Dense = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Everything you need to get started with Vanilla."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    dense: true
+  }, "Dense button")),
+  name: "Dense"
+};
+const Small = exports.Small = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    small: true
+  }, "Small button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    small: true,
+    dense: true
+  }, "Small dense button")),
+  name: "Small"
+};
+const Icon = exports.Icon = {
+  name: "Icon",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--plus"
+    }),
+    hasIcon: true
+  }
+};
+const IconText = exports.IconText = {
+  name: "Icon & text",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--plus"
+    }), " ", /*#__PURE__*/_react.default.createElement("span", null, "Button with icon & text")),
+    hasIcon: true
+  }
+};
+const IconWithTooltip = exports.IconWithTooltip = {
+  name: "Disabled with tooltip",
+  args: {
+    children: "Disabled button with a tooltip",
+    disabled: true
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: "3rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    message: "This button is disabled"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, args)))
+};

package/dist/components/Card/Card.stories.js

@@ -10,7 +10,6 @@ var _Col = _interopRequireDefault(require("../Col"));
 var _Row = _interopRequireDefault(require("../Row"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const meta = {
-  title: "Card",
   component: _.default,
   tags: ["autodocs"]
 };

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,4 +1,9 @@
 import type { CheckableInputProps } from "./CheckableInput";
 export type Props = Omit<CheckableInputProps, "inputType">;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
+ *
+ * Use the checkbox component to select one or more options.
+ */
 declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => JSX.Element;
 export default CheckboxInput;

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -8,6 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _CheckableInput = _interopRequireDefault(require("./CheckableInput"));
 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 a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
+ *
+ * Use the checkbox component to select one or more options.
+ */
 const CheckboxInput = _ref => {
   let {
     label,

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CheckboxInput from "./CheckboxInput";
+declare const meta: Meta<typeof CheckboxInput>;
+export default meta;
+type Story = StoryObj<typeof CheckboxInput>;
+export declare const Default: Story;
+export declare const Children: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;
+export declare const Inline: Story;
+export declare const Indeterminate: Story;

package/dist/components/CheckboxInput/CheckboxInput.stories.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = exports.Inline = exports.Indeterminate = exports.Disabled = exports.Default = exports.Children = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _CheckboxInput.default,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    disabled: {
+      control: {
+        type: "boolean"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    },
+    inline: {
+      control: {
+        type: "boolean"
+      }
+    },
+    indeterminate: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "CheckboxInput"
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const Children = exports.Children = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Disabled",
+    disabled: true
+  }),
+  name: "Disabled"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Inline",
+    inline: true
+  }),
+  name: "Inline"
+};
+const Indeterminate = exports.Indeterminate = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Indeterminate",
+    indeterminate: true
+  }),
+  name: "Indeterminate"
+};

package/dist/components/Chip/Chip.d.ts

@@ -47,5 +47,10 @@ export type Props = PropsWithSpread<{
      */
     value: string;
 }, HTMLProps<HTMLButtonElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Chip](https://vanillaframework.io/docs/patterns/chip).
+ *
+ * It can be used to display a small value attached to a component.
+ */
 declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -19,6 +19,11 @@ const ChipType = exports.ChipType = {
   NEGATIVE: "negative",
   POSITIVE: "positive"
 };
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Chip](https://vanillaframework.io/docs/patterns/chip).
+ *
+ * It can be used to display a small value attached to a component.
+ */
 const Chip = _ref => {
   let {
     appearance,

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Chip from "./Chip";
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const LeadValue: Story;
+export declare const Appearance: Story;
+export declare const Dismissible: Story;

package/dist/components/Chip/Chip.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LeadValue = exports.Dismissible = exports.Default = exports.Appearance = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Chip = _interopRequireDefault(require("./Chip"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Chip.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    value: "Default"
+  }
+};
+const LeadValue = exports.LeadValue = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob"
+  }),
+  name: "Lead-value"
+};
+const Appearance = exports.Appearance = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Type",
+    value: "Positive",
+    appearance: "positive"
+  }),
+  name: "Appearance"
+};
+const Dismissible = exports.Dismissible = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    onDismiss: () => {
+      console.log("onDismiss called");
+    }
+  }),
+  name: "Dismissible"
+};

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -11,4 +11,11 @@ export type Props = PropsWithSpread<{
      */
     blocks: CodeSnippetBlockProps[];
 }, HTMLProps<HTMLDivElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Code snippet](https://docs.vanillaframework.io/base/code#code-snippet).
+ *
+ * #### Blocks
+ *
+ * A single `CodeSnippet` component can render multiple separate code blocks. Blocks are provided as an array via the `blocks` prop. Each block object defines values of props for each code block of the snippet.
+ */
 export default function CodeSnippet({ className, blocks, ...props }: Props): JSX.Element;

package/dist/components/CodeSnippet/CodeSnippet.js

@@ -9,6 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var _CodeSnippetBlock = _interopRequireDefault(require("./CodeSnippetBlock"));
 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 a [React](https://reactjs.org/) component for the Vanilla [Code snippet](https://docs.vanillaframework.io/base/code#code-snippet).
+ *
+ * #### Blocks
+ *
+ * A single `CodeSnippet` component can render multiple separate code blocks. Blocks are provided as an array via the `blocks` prop. Each block object defines values of props for each code block of the snippet.
+ */
 function CodeSnippet(_ref) {
   let {
     className,

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CodeSnippet from "./CodeSnippet";
+declare const meta: Meta<typeof CodeSnippet>;
+export default meta;
+type Story = StoryObj<typeof CodeSnippet>;
+export declare const Default: Story;
+/**
+ * Use the `title` prop to add a title to a code block.
+ */
+export declare const Title: Story;
+/**
+ * Pass an array of `blocks` to render multiple code blocks (for example input and output) within a single code snippet.
+ */
+export declare const MultipleBlocks: Story;
+/**
+ * Use `appearance` to control the visual aspects of the code block. `"numbered"` appearance will add line numbers in the code blocks.
+ * Values of `"linuxPrompt"`, `"windowsPrompt"`, `"url"` will add a relevant icon in the code block.
+ */
+export declare const Appearance: Story;
+/**
+ * Set `wrapLines` prop to `true` to enable line wrapping inside the code block.
+ */
+export declare const WrapLines: Story;
+/**
+ * Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via `dropdowns` property in the block options object.
+ *
+ * With the `options` being an array of option properties compatible with the `Select` options (`[{ label: string, value: string | number }]`).
+ */
+export declare const Dropdown: Story;
+/**
+ * Multiple dropdowns can be passed in if needed.
+ */
+export declare const Dropdowns: Story;
+/**
+ * If multiple dropdowns may overlap with long title you can use `stacked` variant, by setting the relevant property on code block options.
+ */
+export declare const DropdownsStacked: Story;
+/**
+ * Custom elements can be passed to a CodeBlock via the `content` prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block.
+ */
+export declare const Content: Story;
+/**
+ * It's possible to pass JSX instead of strings to the `code` parameter, either as a single element or an array (e.g. if you want to display line numbers).
+ */
+export declare const JsxCodeElements: Story;