@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/Navigation/Navigation.stories.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Search = exports.OverridingTheLogo = exports.OverridingTheLinkComponent = exports.NoMenuItems = exports.Dropdown = exports.Default = exports.Dark = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Navigation = _interopRequireDefault(require("./Navigation"));
+var _enums = require("../../enums");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _Navigation.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * The default navigation is constrained to the max width of the Vanilla grid and
+uses the light theme.
+ */
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    }
+  }
+};
+
+/**
+ * You can switch to a dark themed Navigation by using the `dark` prop. This will
+automatically update the Navigation items to use lighter text and hover state
+colours.
+ */
+const Dark = exports.Dark = {
+  name: "Dark",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    },
+    theme: _enums.Theme.DARK
+  }
+};
+
+/**
+ * Sub-navigation dropdown menus can be added to Navigation by adding an `items`
+array instead of a URL. By default, the dropdown items will align to the left of the
+parent item. This can be changed by adding `alignRight` to the subnav
+object.
+ */
+const Dropdown = exports.Dropdown = {
+  name: "Dropdown",
+  args: {
+    items: [{
+      items: [{
+        label: "Introduction",
+        url: "#"
+      }, {
+        label: "News",
+        url: "#"
+      }, {
+        label: "Getting started - Command line",
+        url: "#"
+      }, {
+        label: "Getting started - OpenStack",
+        url: "#"
+      }, {
+        label: "Getting started - OpenNebula",
+        url: "#"
+      }],
+      label: "LXD"
+    }, {
+      items: [{
+        label: "Introduction",
+        url: "#"
+      }, {
+        label: "News",
+        url: "#"
+      }, {
+        label: "Getting started",
+        url: "#"
+      }],
+      label: "LXCFS"
+    }],
+    itemsRight: [{
+      alignRight: true,
+      items: [{
+        label: "Sign out",
+        url: "#"
+      }],
+      label: "My account"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "LXD",
+      url: "#"
+    }
+  }
+};
+
+/**
+ * Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
+component. Elements to toggle the Searchbox will be included automatically if
+the SearchBox props are provided.
+ */
+const Search = exports.Search = {
+  name: "Search",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    },
+    searchProps: {
+      onSearch: () => null
+    }
+  }
+};
+
+/**
+ * Logos can be displayed using the new tag design. In cases where another logo
+style is required then an element can be provided to the `logo` prop.
+ */
+const OverridingTheLogo = exports.OverridingTheLogo = {
+  name: "Overriding the logo",
+  args: {
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: /*#__PURE__*/_react.default.createElement("img", {
+      alt: "",
+      src: "https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",
+      width: "100"
+    })
+  }
+};
+
+/**
+ * In some cases such as when using [React Router](https://reactrouter.com/) it is
+necessary to use custom components for links. When this is required then a
+function can be passed to `generateLink` which should return your component.
+Bear in mind that some props like classes and on-click events might be passed to
+this function so take care in overriding any link props.
+ */
+const OverridingTheLinkComponent = exports.OverridingTheLinkComponent = {
+  name: "Overriding the link component",
+  args: {
+    generateLink: _ref => {
+      let {
+        label,
+        className
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("button", {
+        className: className
+      }, label);
+    },
+    items: [{
+      label: "Products",
+      url: "#"
+    }, {
+      label: "Services",
+      url: "#"
+    }, {
+      label: "Partners",
+      url: "#"
+    }],
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    }
+  }
+};
+const NoMenuItems = exports.NoMenuItems = {
+  name: "No menu items",
+  args: {
+    generateLink: _ref2 => {
+      let {
+        label,
+        className
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement("button", {
+        className: className
+      }, label);
+    },
+    logo: {
+      src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+      title: "Canonical",
+      url: "#"
+    }
+  }
+};

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

@@ -81,5 +81,30 @@ export type Props = PropsWithSpread<{
      */
     type?: never;
 }, HTMLProps<HTMLDivElement>>;
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Notification](https://docs.vanillaframework.io/patterns/notification/).
+
+Notifications are used to display global information, our notification variants consist of default, caution, negative or positive.
+
+The `NotificationProvider` component can be used to manage the notification state globally. Wrap your application components with it and then in any child component you can get the helper with `const notify = useNotify()` to easily trigger notifications:
+
+* `notify.info("You should keep this in mind")`
+* `notify.failure("Error when fooing a bar", errorObjectFromCatch)`
+* `notify.success("The bar was foo'd", "Success")`
+
+The `NotificationConsumer` component can be used to display notifications. It will automatically display any notifications that are added to the `NotificationProvider` state.
+
+The Notification API has changed since v0.18 in order to support new variants
+and align with our component prop naming conventions.
+
+| Deprecated prop names | Replaced by |
+| --------------------- | ----------- |
+| `type`                | `severity`  |
+| `status`              | `title`     |
+| `close`               | `onDismiss` |
+
+The `notificationTypes` const has also been replaced with `NotificationSeverity`
+to reflect the new prop name.
+ */
 declare const Notification: ({ actions, borderless, children, className, close, inline, onDismiss, severity, status, timeout, timestamp, title, titleElement: TitleComponent, type, ...props }: Props) => JSX.Element;
 export default Notification;

package/dist/components/Notification/Notification.js

@@ -33,6 +33,31 @@ const DefaultTitles = exports.DefaultTitles = {
  * The props for the Notification component.
  */
 
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Notification](https://docs.vanillaframework.io/patterns/notification/).
+
+Notifications are used to display global information, our notification variants consist of default, caution, negative or positive.
+
+The `NotificationProvider` component can be used to manage the notification state globally. Wrap your application components with it and then in any child component you can get the helper with `const notify = useNotify()` to easily trigger notifications:
+
+* `notify.info("You should keep this in mind")`
+* `notify.failure("Error when fooing a bar", errorObjectFromCatch)`
+* `notify.success("The bar was foo'd", "Success")`
+
+The `NotificationConsumer` component can be used to display notifications. It will automatically display any notifications that are added to the `NotificationProvider` state.
+
+The Notification API has changed since v0.18 in order to support new variants
+and align with our component prop naming conventions.
+
+| Deprecated prop names | Replaced by |
+| --------------------- | ----------- |
+| `type`                | `severity`  |
+| `status`              | `title`     |
+| `close`               | `onDismiss` |
+
+The `notificationTypes` const has also been replaced with `NotificationSeverity`
+to reflect the new prop name.
+ */
 const Notification = _ref => {
   let {
     actions,

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 && 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; }
+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.d.ts

@@ -86,5 +86,17 @@ type ButtonsOnlyPagination = BaseProps & {
     onBack: () => void;
 };
 export type Props = PropsWithSpread<NumberedPagination | ButtonsOnlyPagination, HTMLProps<HTMLElement>>;
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Pagination](https://docs.vanillaframework.io/patterns/pagination/).
+
+The pagination component should be used to navigate between pages of content. There are two types of pagination being provided:
+
+* **Numbered Pagination:** used when the total number of items is known.<br />
+  Depending on the length provided, the pagination component will automatically scale.<br />
+  **Required props:** itemsPerPage, totalItems, paginate, currentPage.
+
+* **Buttons-only Pagination:** used when the total number of items is unknown.<br />
+  **Required props:** onForward, onBack.
+ */
 declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, showLabels, hideNumbers, onForward, onBack, forwardDisabled, backDisabled, forwardLabel, backLabel, ...navProps }: Props) => JSX.Element;
 export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -90,6 +90,18 @@ const PaginationItemSeparator = () => /*#__PURE__*/_react.default.createElement(
 // current page and paginate function are undefined.
 // Pagination is handled by onForward and onBack function.
 
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Pagination](https://docs.vanillaframework.io/patterns/pagination/).
+
+The pagination component should be used to navigate between pages of content. There are two types of pagination being provided:
+
+* **Numbered Pagination:** used when the total number of items is known.<br />
+  Depending on the length provided, the pagination component will automatically scale.<br />
+  **Required props:** itemsPerPage, totalItems, paginate, currentPage.
+
+* **Buttons-only Pagination:** used when the total number of items is unknown.<br />
+  **Required props:** onForward, onBack.
+ */
 const Pagination = _ref => {
   let {
     itemsPerPage,

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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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)"
+};