@canonical/react-components 1.6.0 → 1.7.0

package/dist/components/Navigation/Navigation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Navigation/NavigationLink/NavigationLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Navigation/NavigationMenu/NavigationMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

@@ -0,0 +1,201 @@
+"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/Notification/Notification.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NotificationProvider/NotificationProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

@@ -0,0 +1,94 @@
+"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/Pagination/Pagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Pagination/PaginationButton/PaginationButton.test.d.ts

@@ -0,0 +1,4 @@
+export declare enum CustomLabel {
+    Next = "Custom forward label",
+    Previous = "Custom back label"
+}

package/dist/components/Pagination/PaginationItem/PaginationItem.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

@@ -0,0 +1,60 @@
+"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/Panel.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

@@ -0,0 +1,74 @@
+"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/PasswordToggle.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

@@ -0,0 +1,83 @@
+"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/RadioInput.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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