@canonical/react-components 1.2.4 → 1.3.0

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

@@ -1,180 +0,0 @@
-"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 && {}.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 }; }
-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/Button/index.d.ts

@@ -1,2 +0,0 @@
-export { default, ButtonAppearance } from "./Button";
-export type { Props as ButtonProps } from "./Button";

package/dist/components/Card/Card.d.ts

@@ -1,35 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * The content of the card.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the wrapping div element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the card should have highlighted styling.
-     */
-    highlighted?: boolean;
-    /**
-     * Whether the card should have overlay styling.
-     */
-    overlay?: boolean;
-    /**
-     * The path to a thumbnail image.
-     */
-    thumbnail?: string;
-    /**
-     * The title of the card.
-     */
-    title?: ReactNode;
-}, HTMLProps<HTMLDivElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
- *
- * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
- */
-declare const Card: ({ children, className, highlighted, overlay, thumbnail, title, ...props }: Props) => JSX.Element;
-export default Card;

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

@@ -1,33 +0,0 @@
-import React from "react";
-import type { Meta } from "@storybook/react";
-import Card from "./";
-declare const meta: Meta<typeof Card>;
-export default meta;
-export declare const Default: {
-    args: {
-        title: string;
-        children: string;
-    };
-};
-export declare const Header: {
-    args: {
-        title: string;
-        thumbnail: string;
-        children: string;
-    };
-};
-export declare const Highlighted: {
-    args: {
-        highlighted: boolean;
-        title: string;
-        children: string;
-    };
-};
-export declare const Overlay: {
-    args: {
-        title: string;
-        overlay: boolean;
-        children: string;
-    };
-    render: (args: any) => React.JSX.Element;
-};

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

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Overlay = exports.Highlighted = exports.Header = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = _interopRequireDefault(require("./"));
-var _Col = _interopRequireDefault(require("../Col"));
-var _Row = _interopRequireDefault(require("../Row"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    title: "We'd love to have you join us as a partner.",
-    children: "If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."
-  }
-};
-const Header = exports.Header = {
-  args: {
-    title: "Raspberry Pi2 and Pi3",
-    thumbnail: "https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png",
-    children: "For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board."
-  }
-};
-const Highlighted = exports.Highlighted = {
-  args: {
-    ...Default.args,
-    highlighted: true
-  }
-};
-const Overlay = exports.Overlay = {
-  args: {
-    title: "Web browsing",
-    overlay: true,
-    children: "Renowned for speed and security, Ubuntu and Firefox make browsing\nthe web a pleasure again. Ubuntu also includes Chrome, Opera and\nother browsers that can be installed from the Ubuntu Software\nCentre."
-  },
-  render: args => /*#__PURE__*/_react.default.createElement("section", {
-    className: "p-strip--image is-light",
-    style: {
-      backgroundImage: "url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-    size: 6,
-    emptyLarge: 7
-  }, /*#__PURE__*/_react.default.createElement(_.default, args))))
-};

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

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

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

@@ -1,27 +0,0 @@
-import { HTMLProps } from "react";
-import type { ReactNode } from "react";
-import type { PropsWithSpread } from "../../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * The type of the input element.
-     */
-    inputType: "radio" | "checkbox";
-    /**
-     * The label for the input element.
-     */
-    label: ReactNode;
-    /**
-     * Optional class(es) to pass to the label element.
-     */
-    labelClassName?: string;
-    /**
-     * Whether the input element should display in indeterminate state.
-     */
-    indeterminate?: boolean;
-    /**
-     * Ensures the input and the label text are properly aligned with other inline text.
-     */
-    inline?: boolean;
-}, Omit<HTMLProps<HTMLInputElement>, "type">>;
-declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, inline, ...checkboxProps }: Props) => JSX.Element;
-export default CheckableInput;

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

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

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

@@ -1,9 +0,0 @@
-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.stories.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,84 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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/CheckboxInput/index.d.ts

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

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

@@ -1,56 +0,0 @@
-import type { MouseEvent, HTMLProps } from "react";
-import { ValueOf, PropsWithSpread } from "../../types";
-export declare enum Label {
-    Dismiss = "Dismiss"
-}
-export declare const ChipType: {
-    readonly CAUTION: "caution";
-    readonly INFORMATION: "information";
-    readonly NEGATIVE: "negative";
-    readonly POSITIVE: "positive";
-};
-export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the chip.
-     */
-    appearance?: ValueOf<typeof ChipType>;
-    /**
-     * The lead for the chip.
-     */
-    lead?: string;
-    /**
-     * Function for handling chip div click event.
-     */
-    onClick?: (event: MouseEvent<HTMLButtonElement> | {
-        lead: string;
-        value: string;
-    }) => void;
-    /**
-     * Function for handling dismissing a chip.
-     */
-    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Whether the chip is selected.
-     */
-    selected?: boolean;
-    /**
-     * A substring to emphasise if it is part of the chip's value,
-     * e.g. "sit" => poSITive
-     */
-    subString?: string;
-    /**
-     * Whether to wrap the value in quotation marks.
-     */
-    quoteValue?: boolean;
-    /**
-     * The value of the chip.
-     */
-    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.stories.d.ts

@@ -1,9 +0,0 @@
-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

@@ -1,45 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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/Chip/index.d.ts

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

package/dist/components/Code/Code.d.ts

@@ -1,13 +0,0 @@
-import type { ClassName } from "../../types";
-export type Props = {
-    children: string;
-    className?: ClassName;
-    inline?: boolean;
-    copyable?: boolean;
-    numbered?: boolean;
-};
-/**
- * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
- */
-declare const Code: ({ children, className, inline, copyable, numbered, ...props }: Props) => JSX.Element;
-export default Code;

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

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

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

@@ -1,21 +0,0 @@
-import { HTMLProps } from "react";
-import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * Optional class(es) to pass to the wrapping div element.
-     */
-    className?: ClassName;
-    /**
-     * A list of code blocks to display.
-     */
-    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.stories.d.ts

@@ -1,45 +0,0 @@
-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;