@canonical/react-components 1.2.4 → 1.3.0

package/dist/components/Panel/Panel.stories.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Logo = exports.Header = exports.Default = exports.CustomHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Panel = _interopRequireDefault(require("./Panel"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Panel.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    children: "Panel content",
-    title: "Panel"
-  }
-};
-const Header = exports.Header = {
-  args: {
-    controls: /*#__PURE__*/_react.default.createElement(_Button.default, {
-      appearance: "positive"
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: "plus",
-      light: true
-    }), " Create"),
-    title: "Panel title",
-    titleComponent: "h1"
-  }
-};
-
-/**
- * The logo may be provided as attributes to use the standard logo. If this is
- * not sufficient the a `ReactNode` can be passed to the `logo` prop instead.
- */
-const Logo = exports.Logo = {
-  args: {
-    logo: {
-      icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
-      name: "https://assets.ubuntu.com/v1/a85f7947-juju_black-text-only.svg",
-      nameAlt: "Juju"
-    }
-  }
-};
-
-/**
- * If the default header does not meet your needs then a `ReactNode` can be
- * passed to the `header` prop to replace the header.
- */
-const CustomHeader = exports.CustomHeader = {
-  args: {
-    header: /*#__PURE__*/_react.default.createElement("div", {
-      className: "p-panel__header"
-    }, "This header replaces the entire header area")
-  }
-};

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

@@ -1 +0,0 @@
-export { default, type Props as PanelProps, type LogoDefaultElement as PanelLogoDefaultElement, } from "./Panel";

package/dist/components/PasswordToggle/PasswordToggle.d.ts

@@ -1,108 +0,0 @@
-import React from "react";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export declare enum Label {
-    Hide = "Hide",
-    Show = "Show"
-}
-/**
- * The props for the Password Toggle component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * The content for caution validation.
-     */
-    caution?: ReactNode;
-    /**
-     * Optional class(es) to pass to the input element.
-     */
-    className?: ClassName;
-    /**
-     * The content for error validation.
-     */
-    error?: ReactNode;
-    /**
-     * Help text to show below the field.
-     */
-    help?: ReactNode;
-    /**
-     * The id of the input.
-     */
-    id: string;
-    /**
-     * The label for the field.
-     */
-    label?: ReactNode;
-    /**
-     * Whether the field is read only.
-     */
-    readOnly?: boolean;
-    /**
-     * Whether the field is required.
-     */
-    required?: boolean;
-    /**
-     * The content for success validation.
-     */
-    success?: ReactNode;
-    /**
-     * The content for success validation.
-     */
-    type?: "submit" | "reset" | "button";
-    /**
-     * Optional class(es) to pass to the wrapping Field component
-     */
-    wrapperClassName?: string;
-}, InputHTMLAttributes<HTMLInputElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
- *
- * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
- */
-declare const PasswordToggle: React.ForwardRefExoticComponent<{
-    /**
-     * The content for caution validation.
-     */
-    caution?: ReactNode;
-    /**
-     * Optional class(es) to pass to the input element.
-     */
-    className?: ClassName;
-    /**
-     * The content for error validation.
-     */
-    error?: ReactNode;
-    /**
-     * Help text to show below the field.
-     */
-    help?: ReactNode;
-    /**
-     * The id of the input.
-     */
-    id: string;
-    /**
-     * The label for the field.
-     */
-    label?: ReactNode;
-    /**
-     * Whether the field is read only.
-     */
-    readOnly?: boolean;
-    /**
-     * Whether the field is required.
-     */
-    required?: boolean;
-    /**
-     * The content for success validation.
-     */
-    success?: ReactNode;
-    /**
-     * The content for success validation.
-     */
-    type?: "submit" | "reset" | "button";
-    /**
-     * Optional class(es) to pass to the wrapping Field component
-     */
-    wrapperClassName?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "error" | "label" | "id" | "type" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
-export default PasswordToggle;

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

@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import PasswordToggle from "./PasswordToggle";
-declare const meta: Meta<typeof PasswordToggle>;
-export default meta;
-type Story = StoryObj<typeof PasswordToggle>;
-export declare const Default: Story;
-export declare const ReadOnly: Story;
-export declare const Error: Story;
-export declare const Success: Story;
-export declare const Caution: Story;
-export declare const Help: Story;
-export declare const Disabled: Story;

package/dist/components/PasswordToggle/PasswordToggle.stories.js

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Success = exports.ReadOnly = exports.Help = exports.Error = exports.Disabled = exports.Default = exports.Caution = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _PasswordToggle = _interopRequireDefault(require("./PasswordToggle"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _PasswordToggle.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    id: "examplePassword1",
-    label: "Password"
-  }),
-  name: "Default"
-};
-const ReadOnly = exports.ReadOnly = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    id: "examplePassword2",
-    label: "Password",
-    readOnly: true,
-    defaultValue: "password"
-  }),
-  name: "Read only"
-};
-const Error = exports.Error = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    error: "This field is required.",
-    id: "examplePassword3",
-    label: "Password",
-    defaultValue: "password"
-  }),
-  name: "Error"
-};
-const Success = exports.Success = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    success: "Strong password",
-    id: "examplePassword4",
-    label: "Password",
-    defaultValue: "password"
-  }),
-  name: "Success"
-};
-const Caution = exports.Caution = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    caution: "Weak password",
-    id: "examplePassword5",
-    label: "Password",
-    defaultValue: "password"
-  }),
-  name: "Caution"
-};
-const Help = exports.Help = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    help: "Enter a secure password",
-    id: "examplePassword6",
-    label: "Password"
-  }),
-  name: "Help"
-};
-const Disabled = exports.Disabled = {
-  render: () => /*#__PURE__*/_react.default.createElement(_PasswordToggle.default, {
-    disabled: true,
-    id: "examplePassword7",
-    label: "Password",
-    defaultValue: "password"
-  }),
-  name: "Disabled"
-};

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

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

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,9 +0,0 @@
-import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
- *
- * Use radio buttons to select one of the given set of options.
- */
-declare const RadioInput: ({ label, ...radioProps }: Props) => JSX.Element;
-export default RadioInput;

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

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

package/dist/components/RadioInput/RadioInput.stories.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Required = exports.Inline = exports.Disabled = exports.Default = exports.Children = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _RadioInput = _interopRequireDefault(require("./RadioInput"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _RadioInput.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: "RadioInput"
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
-    label: "RadioInput"
-  }),
-  name: "Default"
-};
-const Children = exports.Children = {
-  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.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: "RadioInput"
-  }),
-  name: "Children"
-};
-const Disabled = exports.Disabled = {
-  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
-    label: "Disabled",
-    name: "RadioInput",
-    disabled: true
-  }),
-  name: "Disabled"
-};
-const Required = exports.Required = {
-  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
-    label: "Required",
-    name: "RadioInput",
-    required: true
-  }),
-  name: "Required"
-};
-const Inline = exports.Inline = {
-  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
-    label: "Inline",
-    name: "RadioInput",
-    inline: true
-  }),
-  name: "Inline"
-};

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

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

package/dist/components/Row/Row.d.ts

@@ -1,19 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * The content of the row.
-     */
-    children: ReactNode;
-    /**
-     * Optional class(es) to pass to the wrapping div element.
-     */
-    className?: ClassName;
-}, HTMLProps<HTMLDivElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
- *
- * Vanilla has a responsive grid using a combination of rows and columns.
- */
-declare const Row: ({ children, className, ...props }: Props) => JSX.Element;
-export default Row;

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

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Row from "./Row";
-declare const meta: Meta<typeof Row>;
-export default meta;
-type Story = StoryObj<typeof Row>;
-/**
- * See [Col](?path=/docs/components-col--docs) for grid details.
- */
-export declare const Default: Story;

package/dist/components/Row/Row.stories.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _Row = _interopRequireDefault(require("./Row"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Row.default,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: {
-        type: "text"
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-/**
- * See [Col](?path=/docs/components-col--docs) for grid details.
- */
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    children: "children..."
-  }
-};

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

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

package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.d.ts

@@ -1,25 +0,0 @@
-import type { SearchAndFilterChip, SearchAndFilterData } from "../types";
-export type Props = {
-    /**
-     * The chip data to display in the panel.
-     */
-    data: SearchAndFilterData;
-    /**
-     * The current search chips.
-     */
-    searchData: SearchAndFilterChip[];
-    /**
-     * A search string.
-     */
-    searchTerm: string;
-    /**
-     * Whether the chips should be hidden.
-     */
-    sectionHidden?: boolean;
-    /**
-     * A function to toggle whether a chip is selected.
-     */
-    toggleSelected: (chip: SearchAndFilterChip) => void;
-};
-declare const FilterPanelSection: ({ data, searchData, searchTerm, sectionHidden, toggleSelected, }: Props) => JSX.Element;
-export default FilterPanelSection;

package/dist/components/SearchAndFilter/FilterPanelSection/index.d.ts

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

package/dist/components/SearchAndFilter/SearchAndFilter.d.ts

@@ -1,33 +0,0 @@
-import type { SearchAndFilterChip, SearchAndFilterData } from "./types";
-export declare enum Label {
-    AddFilter = "Add filter",
-    Clear = "Clear input",
-    SearchAndFilter = "Search and filter"
-}
-export type Props = {
-    /**
-     * A list of chips to initialise inside the input.
-     */
-    existingSearchData?: SearchAndFilterChip[];
-    /**
-     * The data for the filter panel.
-     */
-    filterPanelData: SearchAndFilterData[];
-    /**
-     * A function that is called when the search data changes.
-     */
-    returnSearchData: (searchData: SearchAndFilterChip[]) => void;
-    /**
-     * A function that is called when the filter panel is shown/hidden.
-     */
-    onPanelToggle?: () => void;
-    /**
-     * A function that is called when the height of the search container changes.
-     */
-    onExpandChange?: () => void;
-};
-/**
- * This component allows searching and filtering of large datasets.
- */
-declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, onPanelToggle, onExpandChange, ...props }: Props) => JSX.Element;
-export default SearchAndFilter;

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

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