@canonical/react-components 1.2.5 → 1.3.1

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

@@ -1,45 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Notification from "./Notification";
-declare const meta: Meta<typeof Notification>;
-export default meta;
-type Story = StoryObj<typeof Notification>;
-/**
- * The information severity should be used to convey an information message.
- */
-export declare const Information: Story;
-/**
- * The caution severity should be used to convey information that is not critical but the user should be aware of.
- */
-export declare const Caution: Story;
-/**
- * The negative severity should be used to convey information that is critical and the user should take action.
- */
-export declare const Negative: Story;
-/**
- * The positive severity should be used to convey success or completion.
- */
-export declare const Positive: Story;
-/**
- * When vertical space is limited, you can use the inline variant.
- */
-export declare const Inline: Story;
-/**
- * In cases where a notification sits inside another component, such as a table cell or a card, it may be useful to remove the outer border and highlight bar.
- */
-export declare const Borderless: Story;
-/**
- * Actions will appear below the notification message.
- */
-export declare const Actions: Story;
-/**
- * Notifications that can be dismissed should be given an onDismiss function.
- */
-export declare const Dismissible: Story;
-/**
- * Notifications can be automatically dismissed after a timeout interval.
- */
-export declare const Timeout: Story;
-/**
- * For notifications in which recency is important, you can include a section for time.
- */
-export declare const Timestamp: Story;

package/dist/components/Notification/Notification.stories.js

@@ -1,201 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Timestamp = exports.Timeout = exports.Positive = exports.Negative = exports.Inline = exports.Information = exports.Dismissible = exports.Caution = exports.Borderless = exports.Actions = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Notification = _interopRequireWildcard(require("./Notification"));
-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; }
-const meta = {
-  component: _Notification.default,
-  tags: ["autodocs"],
-  argTypes: {
-    borderless: {
-      control: {
-        type: "boolean"
-      }
-    },
-    children: {
-      control: {
-        type: "text"
-      }
-    },
-    inline: {
-      control: {
-        type: "boolean"
-      }
-    },
-    severity: {
-      control: {
-        type: "radio"
-      },
-      options: Object.values(_Notification.NotificationSeverity)
-    },
-    timestamp: {
-      control: {
-        type: "text"
-      }
-    },
-    title: {
-      control: {
-        type: "text"
-      }
-    }
-  },
-  args: {
-    borderless: false,
-    inline: false,
-    severity: _Notification.NotificationSeverity.INFORMATION
-  }
-};
-var _default = exports.default = meta;
-/**
- * The information severity should be used to convey an information message.
- */
-const Information = exports.Information = {
-  name: "Information",
-  args: {
-    children: "Anyone with access can view your invited users.",
-    severity: "information",
-    title: "Permissions changed"
-  }
-};
-
-/**
- * The caution severity should be used to convey information that is not critical but the user should be aware of.
- */
-const Caution = exports.Caution = {
-  name: "Caution",
-  args: {
-    children: "Custom storage configuration is only supported on Ubuntu, CentOS and RHEL.",
-    severity: "caution",
-    title: "Blocked"
-  }
-};
-
-/**
- * The negative severity should be used to convey information that is critical and the user should take action.
- */
-const Negative = exports.Negative = {
-  name: "Negative",
-  args: {
-    children: "Node must be connected to a network.",
-    severity: "negative",
-    title: "Error"
-  }
-};
-
-/**
- * The positive severity should be used to convey success or completion.
- */
-const Positive = exports.Positive = {
-  name: "Positive",
-  args: {
-    children: "Code successfully reformatted.",
-    severity: "positive",
-    title: "Success"
-  }
-};
-
-/**
- * When vertical space is limited, you can use the inline variant.
- */
-const Inline = exports.Inline = {
-  name: "Inline",
-  args: {
-    children: "Not enough space.",
-    inline: true,
-    severity: "negative",
-    title: "Error:"
-  }
-};
-
-/**
- * In cases where a notification sits inside another component, such as a table cell or a card, it may be useful to remove the outer border and highlight bar.
- */
-const Borderless = exports.Borderless = {
-  name: "Borderless",
-  args: {
-    borderless: true,
-    children: "Only 8GB storage remaining.",
-    severity: "caution",
-    title: "Warning"
-  }
-};
-
-/**
- * Actions will appear below the notification message.
- */
-const Actions = exports.Actions = {
-  name: "Actions",
-  args: {
-    actions: [{
-      label: "Action 1",
-      onClick: () => null
-    }, {
-      label: "Action 2",
-      onClick: () => null
-    }],
-    children: "Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.",
-    severity: "information",
-    title: "Title"
-  }
-};
-
-/**
- * Notifications that can be dismissed should be given an onDismiss function.
- */
-const Dismissible = exports.Dismissible = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [show, setShow] = (0, _react.useState)(true);
-    if (!show) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_Notification.default, {
-      onDismiss: () => setShow(false),
-      title: "Dismissible"
-    }, "Click the dismiss button to get rid of me.");
-  },
-  name: "Dismissible"
-};
-
-/**
- * Notifications can be automatically dismissed after a timeout interval.
- */
-const Timeout = exports.Timeout = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [show, setShow] = (0, _react.useState)(true);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [timer, setTimer] = (0, _react.useState)(0);
-    if (!show) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_Notification.default, {
-      actions: [{
-        label: "Start timer",
-        onClick: () => setTimer(3000)
-      }],
-      onDismiss: () => setShow(false),
-      timeout: timer,
-      title: "Timeout"
-    }, "Click the action to start a 3 second timer.");
-  },
-  name: "Timeout"
-};
-
-/**
- * For notifications in which recency is important, you can include a section for time.
- */
-const Timestamp = exports.Timestamp = {
-  name: "Timestamp",
-  args: {
-    children: "Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.",
-    severity: "information",
-    timestamp: "1h ago",
-    title: "Title"
-  }
-};

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

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Pagination from "./Pagination";
-declare const meta: Meta<typeof Pagination>;
-export default meta;
-type Story = StoryObj<typeof Pagination>;
-export declare const Default: Story;
-export declare const TruncatedNumberedPagination: Story;
-export declare const DisabledControlsNumberedPagination: Story;
-export declare const CenteredNumberedPagination: Story;
-export declare const DisabledPaginationItemsNumberedPagination: Story;
-export declare const DefaultButtonsOnlyPagination: Story;
-export declare const DefaultButtonLabelsButtonsOnlyPagination: Story;
-export declare const CustomButtonLabelsButtonsOnlyPagination: Story;
-export declare const CenteredButtonsOnlyPagination: Story;

package/dist/components/Pagination/Pagination.stories.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TruncatedNumberedPagination = exports.DisabledPaginationItemsNumberedPagination = exports.DisabledControlsNumberedPagination = exports.DefaultButtonsOnlyPagination = exports.DefaultButtonLabelsButtonsOnlyPagination = exports.Default = exports.CustomButtonLabelsButtonsOnlyPagination = exports.CenteredNumberedPagination = exports.CenteredButtonsOnlyPagination = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Pagination = _interopRequireDefault(require("./Pagination"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Pagination.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    itemsPerPage: 20,
-    totalItems: 100,
-    paginate: () => {},
-    currentPage: 3
-  }
-};
-const TruncatedNumberedPagination = exports.TruncatedNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 10,
-    totalItems: 1000,
-    paginate: () => {},
-    currentPage: 34
-  }),
-  name: "Truncated (Numbered Pagination)"
-};
-const DisabledControlsNumberedPagination = exports.DisabledControlsNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 20,
-    totalItems: 100,
-    paginate: () => {},
-    currentPage: 1
-  }),
-  name: "Disabled controls (Numbered Pagination)"
-};
-const CenteredNumberedPagination = exports.CenteredNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 10,
-    totalItems: 50,
-    paginate: () => {},
-    currentPage: 1,
-    centered: true
-  }),
-  name: "Centered (Numbered Pagination)"
-};
-const DisabledPaginationItemsNumberedPagination = exports.DisabledPaginationItemsNumberedPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    itemsPerPage: 10,
-    totalItems: 50,
-    paginate: () => {},
-    currentPage: 1,
-    hideNumbers: true
-  }),
-  name: "Disabled pagination items (Numbered Pagination)"
-};
-const DefaultButtonsOnlyPagination = exports.DefaultButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {}
-  }),
-  name: "Default (Buttons-only Pagination)"
-};
-const DefaultButtonLabelsButtonsOnlyPagination = exports.DefaultButtonLabelsButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {},
-    showLabels: true
-  }),
-  name: "Default button labels (Buttons-only Pagination)"
-};
-const CustomButtonLabelsButtonsOnlyPagination = exports.CustomButtonLabelsButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {},
-    showLabels: true,
-    forwardLabel: "Custom forward label",
-    backLabel: "Custom back label"
-  }),
-  name: "Custom button labels (Buttons-only Pagination)"
-};
-const CenteredButtonsOnlyPagination = exports.CenteredButtonsOnlyPagination = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Pagination.default, {
-    onForward: () => {},
-    onBack: () => {},
-    centered: true
-  }),
-  name: "Centered (Buttons-only Pagination)"
-};

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

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Panel from "./Panel";
-declare const meta: Meta<typeof Panel>;
-export default meta;
-type Story = StoryObj<typeof Panel>;
-export declare const Default: Story;
-export declare const Header: Story;
-/**
- * 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.
- */
-export declare const Logo: Story;
-/**
- * If the default header does not meet your needs then a `ReactNode` can be
- * passed to the `header` prop to replace the header.
- */
-export declare const CustomHeader: Story;

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/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/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/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/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;