@canonical/react-components 0.59.0 → 0.60.0

package/dist/components/List/List.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VerticalStepped = exports.TickedWithHorizontalDivider = exports.Ticked = exports.Stretch = exports.Split = exports.Middot = exports.Inline = exports.HorizontalStepped = exports.HorizontalDivider = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _List = _interopRequireDefault(require("./List"));
+var _StatusLabel = _interopRequireDefault(require("../StatusLabel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _List.default,
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      control: {
+        disable: true
+      }
+    },
+    stepped: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    items: ["Digital signage", "Robotics", "Gateways"]
+  }
+};
+const Ticked = exports.Ticked = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: ["Hardware guidance and sizing", "Fixed-price deployment", "Reference architecture"],
+    ticked: true
+  }),
+  name: "Ticked"
+};
+const HorizontalDivider = exports.HorizontalDivider = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: ["Single-command install and upgrade", "Postgres database for reliable state", "High availability for all services"],
+    divided: true
+  }),
+  name: "Horizontal divider"
+};
+const TickedWithHorizontalDivider = exports.TickedWithHorizontalDivider = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: ["Balance compute load in the cloud", "Optimise for specific workloads", "Assess overcommit ratios"],
+    divided: true,
+    ticked: true
+  }),
+  name: "Ticked with horizontal divider"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: ["Community", "Careers", "Press centre"],
+    inline: true
+  }),
+  name: "Inline"
+};
+const Middot = exports.Middot = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: ["Legal information", "Data privacy", "Report a bug on this site"],
+    middot: true
+  }),
+  name: "Middot"
+};
+const Stretch = exports.Stretch = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: [{
+      content: /*#__PURE__*/_react.default.createElement("h3", null, "Documentation")
+    }, {
+      content: /*#__PURE__*/_react.default.createElement(_StatusLabel.default, {
+        appearance: "positive"
+      }, "New"),
+      className: "u-vertically-center u-align--right"
+    }],
+    stretch: true
+  }),
+  name: "Stretch"
+};
+const VerticalStepped = exports.VerticalStepped = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: [{
+      title: "Log in to JAAS",
+      content: "Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."
+    }, {
+      title: "Configure a model",
+      content: 'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'
+    }, {
+      title: "Credentials and SSH keys",
+      content: "After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials."
+    }],
+    stepped: true
+  }),
+  name: "Vertical stepped"
+};
+const HorizontalStepped = exports.HorizontalStepped = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: [{
+      title: "Log in to JAAS",
+      content: "Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."
+    }, {
+      title: "Configure a model",
+      content: 'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'
+    }],
+    stepped: true,
+    detailed: true
+  }),
+  name: "Horizontal stepped"
+};
+const Split = exports.Split = {
+  render: () => /*#__PURE__*/_react.default.createElement(_List.default, {
+    items: ["Jointly shape the OpenStack architecture", "We help you plan your cloud hardware requirements", "We build OpenStack in your data center", "We operate the cloud to an SLA", "Transparent audit, logging, monitoring and management", "When your team is ready, we hand over the keys"],
+    divided: true,
+    split: true,
+    ticked: true
+  }),
+  name: "Split"
+};

package/dist/components/LoginPageLayout/LoginPageLayout.d.ts

@@ -9,5 +9,9 @@ export type Props = {
         url: string;
     };
 };
+/**
+ * This is a layout component that is used to display a page with a title and children.
+ * The LoginPageLayout recommended usages are in the login flow like registration, sign up and error pages.
+ */
 declare const LoginPageLayout: FC<Props>;
 export default LoginPageLayout;

package/dist/components/LoginPageLayout/LoginPageLayout.js

@@ -20,6 +20,10 @@ const defaultLogo = {
   title: "Canonical",
   url: "/"
 };
+/**
+ * This is a layout component that is used to display a page with a title and children.
+ * The LoginPageLayout recommended usages are in the login flow like registration, sign up and error pages.
+ */
 const LoginPageLayout = _ref => {
   let {
     children,

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import LoginPageLayout from "./LoginPageLayout";
+declare const meta: Meta<typeof LoginPageLayout>;
+export default meta;
+type Story = StoryObj<typeof LoginPageLayout>;
+export declare const Default: Story;
+export declare const LoginPage: Story;
+export declare const ErrorPage: Story;
+export declare const RegistrationPage: Story;

package/dist/components/LoginPageLayout/LoginPageLayout.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegistrationPage = exports.LoginPage = exports.ErrorPage = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CodeSnippet = _interopRequireDefault(require("../CodeSnippet/CodeSnippet"));
+var _Spinner = _interopRequireDefault(require("../Spinner/Spinner"));
+var _LoginPageLayout = _interopRequireDefault(require("./LoginPageLayout"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _LoginPageLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    title: "This is the title"
+  }
+};
+const LoginPage = exports.LoginPage = {
+  args: {
+    title: "Sign in",
+    children: /*#__PURE__*/_react.default.createElement(_Spinner.default, null)
+  }
+};
+const ErrorPage = exports.ErrorPage = {
+  args: {
+    title: "Sign in failed",
+    children: /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        wrapLines: true,
+        code: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "An error occurred. Try signing in again.")
+      }]
+    })
+  }
+};
+const RegistrationPage = exports.RegistrationPage = {
+  args: {
+    title: "Sign up",
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Fill in the form below to create an account"), /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      placeholder: "Username"
+    }), /*#__PURE__*/_react.default.createElement("input", {
+      type: "email",
+      placeholder: "Email"
+    }), /*#__PURE__*/_react.default.createElement("input", {
+      type: "password",
+      placeholder: "Password"
+    }), /*#__PURE__*/_react.default.createElement("button", null, "Sign up"))),
+    logo: {
+      src: "https://anbox-cloud.io/static/logo.svg",
+      title: "Anbox Cloud",
+      url: "/"
+    }
+  }
+};

package/dist/components/MainTable/MainTable.d.ts

@@ -95,5 +95,8 @@ export type Props = PropsWithSpread<{
      */
     hiddenCaption?: string | null;
 }, TableProps>;
+/**
+ * This is a [React](https://reactjs.org/) component to support many table use cases.
+ */
 declare const MainTable: ({ defaultSort, defaultSortDirection, emptyStateMsg, expanding, headers, onUpdateSort, paginate, rows, responsive, sortable, sortFunction, hiddenCaption, ...props }: Props) => JSX.Element;
 export default MainTable;

package/dist/components/MainTable/MainTable.js

@@ -130,6 +130,10 @@ const sortRows = _ref5 => {
   }
   return sortedRows;
 };
+
+/**
+ * This is a [React](https://reactjs.org/) component to support many table use cases.
+ */
 const MainTable = _ref6 => {
   let {
     defaultSort,

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import MainTable from "./MainTable";
+declare const meta: Meta<typeof MainTable>;
+export default meta;
+type Story = StoryObj<typeof MainTable>;
+export declare const Default: Story;
+export declare const Sortable: Story;
+export declare const Expanding: Story;
+/**
+ * If the table cell may have overflowing content (such as contextual menu) use `hasOverflow` prop to avoid cropping it.
+ */
+export declare const Overflow: Story;
+export declare const Responsive: Story;
+export declare const Paginated: Story;
+export declare const Empty: Story;