@canonical/react-components 1.6.0 → 1.7.0

package/dist/components/EmptyState/EmptyState.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithContent = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
+var _Button = _interopRequireDefault(require("../Button"));
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const boxImage = /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://assets.ubuntu.com/v1/c17e0d92-container.svg",
+  style: {
+    maxWidth: "10rem",
+    maxHeight: "10rem"
+  },
+  alt: "empty state"
+});
+const doNothing = () => {};
+const meta = {
+  component: _EmptyState.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "This application doesn't have any configuration parameters"
+  }),
+  name: "Default"
+};
+const WithContent = exports.WithContent = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "No instances found"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "There are no instances in this project. Spin up your first instance!"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#todo",
+    target: "_blank"
+  }, "How to create instances", /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.externalLink
+  }))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "positive",
+    onClick: doNothing
+  }, "Create instance")),
+  name: "With content"
+};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Form from "./Form";
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Default: Story;
+export declare const Fieldset: Story;
+export declare const Inline: Story;
+export declare const Stacked: Story;
+export declare const Disabled: Story;
+export declare const Validation: Story;
+export declare const Required: Story;

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Validation = exports.Stacked = exports.Required = exports.Inline = exports.Fieldset = exports.Disabled = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Form = _interopRequireDefault(require("./Form"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Select = _interopRequireDefault(require("../Select"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Form.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "text",
+      id: "exampleInputEmail12",
+      placeholder: "example@canonical.com",
+      label: "Email address"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "password",
+      id: "exampleInputPassword12",
+      placeholder: "******",
+      label: "Password"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "file",
+      id: "exampleInputFile2",
+      label: "File input"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "checkbox",
+      id: "CheckMe2",
+      label: "I agree to receive information about Canonical’s products and services."
+    }))
+  }
+};
+const Fieldset = exports.Fieldset = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement("fieldset", null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "Joe",
+    id: "list-input-12",
+    type: "text",
+    label: "First name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "Bloggs",
+    id: "list-input-22",
+    type: "text",
+    label: "Last name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "example@canonical.com",
+    id: "list-input-32",
+    type: "text",
+    label: "Email address"
+  }))),
+  name: "Fieldset"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
+    inline: true
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-inline2",
+    className: "p-form__control",
+    label: "Username",
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-inline22",
+    "aria-invalid": "true",
+    label: "Email address",
+    error: "Please enter a valid email address."
+  })),
+  name: "Inline"
+};
+const Stacked = exports.Stacked = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
+    stacked: true
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "full-name-stacked2",
+    label: "Full name",
+    stacked: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-stacked2",
+    label: "Username",
+    stacked: true,
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-stacked-error2",
+    label: "Email address",
+    stacked: true,
+    error: "This field is required"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-optional-stacked2",
+    label: "Address line 1",
+    stacked: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-optional-stacked3",
+    label: "Address line 2",
+    stacked: true
+  })),
+  name: "Stacked"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    label: "Email address",
+    type: "text",
+    id: "disabled-input2",
+    placeholder: "example@canonical.com",
+    disabled: true
+  })),
+  name: "Disabled"
+};
+const Validation = exports.Validation = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputError2",
+    placeholder: "example@canonical.com",
+    label: "Email address",
+    error: "This field is required."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputCaution2",
+    placeholder: "14",
+    label: "Mail configuration ID",
+    caution: "No validation is performed in preview mode."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputSuccess2",
+    placeholder: "**** **** **** ****",
+    label: "Card number",
+    success: "Verified."
+  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    id: "exampleSelectInputError3",
+    defaultValue: "",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "--Select an option--"
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }],
+    label: "Ubuntu releases",
+    error: "You need to select an OS to complete your install."
+  })),
+  name: "Validation"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputError3",
+    placeholder: "e.g joe@bloggs.com",
+    error: "This field is required.",
+    label: "Email address",
+    required: true
+  })),
+  name: "Required"
+};

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

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

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

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

package/dist/components/FormikField/FormikField.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Fields = exports.Errors = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FormikField = _interopRequireDefault(require("./FormikField"));
+var _Select = _interopRequireDefault(require("../Select"));
+var _formik = require("formik");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _FormikField.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    name: "username",
+    label: "Username",
+    type: "text"
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};
+const Fields = exports.Fields = {
+  args: {
+    component: _Select.default,
+    name: "release",
+    label: "Release",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "Select an option"
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "\nAny React Components input can be provided to FormikField (e.g. Input, Textarea or Select) or you may provide a custom component.\n\nAny additional props that need to be passed can be given to FormikField.\n        "
+      }
+    }
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      release: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};
+const Errors = exports.Errors = {
+  args: Default.args,
+  parameters: {
+    docs: {
+      description: {
+        story: "\nFormik parameters are passed to the field using Formik's `useField`. This means that validation and errors, state handlers etc. should all just work.\n        "
+      }
+    }
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialErrors: {
+      username: "This username has already been taken."
+    },
+    initialTouched: {
+      username: true
+    },
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};

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

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

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Icon from "./Icon";
+import "./Icon.stories.scss";
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Base: Story;
+export declare const Default: Story;
+/**
+ * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
+ */
+export declare const Custom: Story;
+/**
+ * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
+ */
+export declare const Social: Story;

package/dist/components/Icon/Icon.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Social = exports.Default = exports.Custom = exports.Base = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireWildcard(require("./Icon"));
+require("./Icon.stories.scss");
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Icon.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Base = exports.Base = {
+  name: "Base",
+  args: {
+    name: "facebook"
+  }
+};
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.plus
+  }),
+  name: "Default"
+};
+
+/**
+ * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
+ */
+const Custom = exports.Custom = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "custom"
+  }),
+  name: "Custom"
+};
+
+/**
+ * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
+ */
+const Social = exports.Social = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.facebook
+  }),
+  name: "Social"
+};

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

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

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Input from "./Input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const TextInput: Story;
+export declare const Stacked: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Caution: Story;
+export declare const Required: Story;
+export declare const Checkbox: Story;
+export declare const RadioButton: Story;

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextInput = exports.Success = exports.Stacked = exports.Required = exports.RadioButton = exports.Error = exports.Disabled = exports.Checkbox = exports.Caution = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Input = _interopRequireDefault(require("./Input"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Input.default,
+  tags: ["autodocs"],
+  argTypes: {
+    caution: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    help: {
+      control: {
+        type: "text"
+      }
+    },
+    helpClassName: {
+      control: {
+        type: "text"
+      }
+    },
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    success: {
+      control: {
+        type: "text"
+      }
+    },
+    id: {
+      control: {
+        disable: true
+      }
+    },
+    placeholder: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const TextInput = exports.TextInput = {
+  name: "Text input",
+  args: {
+    type: "text",
+    id: "exampleTextInput2",
+    placeholder: "example@canonical.com",
+    label: "Email address",
+    help: "Additional description for the field",
+    helpClassName: "u-no-margin--bottom"
+  }
+};
+const Stacked = exports.Stacked = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInput3",
+    placeholder: "example@canonical.com",
+    stacked: true,
+    label: "Email address"
+  }),
+  name: "Stacked"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInput4",
+    placeholder: "example@canonical.com",
+    disabled: true,
+    label: "Email address"
+  }),
+  name: "Disabled"
+};
+const Error = exports.Error = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInput5",
+    placeholder: "example@canonical.com",
+    error: "This field is required.",
+    label: "Email address"
+  }),
+  name: "Error"
+};
+const Success = exports.Success = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInput6",
+    placeholder: "example@canonical.com",
+    success: "Verified.",
+    label: "Email address"
+  }),
+  name: "Success"
+};
+const Caution = exports.Caution = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInput7",
+    placeholder: "example@canonical.com",
+    caution: "No validation is performed in preview mode.",
+    label: "Email address"
+  }),
+  name: "Caution"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInput8",
+    placeholder: "example@canonical.com",
+    required: true,
+    label: "Email address"
+  }),
+  name: "Required"
+};
+const Checkbox = exports.Checkbox = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "checkbox",
+    id: "checkExample12",
+    defaultChecked: true,
+    label: "HTML"
+  }),
+  name: "Checkbox"
+};
+const RadioButton = exports.RadioButton = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Input.default, {
+    label: "Linux",
+    type: "radio",
+    name: "RadioOptions",
+    id: "Radio12",
+    defaultValue: "option1",
+    defaultChecked: true,
+    help: "Ubuntu"
+  }),
+  name: "Radio button"
+};

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

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

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

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

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

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

package/dist/components/Link/Link.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Soft = exports.Inverted = exports.Default = exports.BackToTop = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Link = _interopRequireDefault(require("./Link"));
+var _Strip = _interopRequireDefault(require("../Strip"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Link.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: "Fast, secure and simple, Ubuntu powers millions of PCs worldwide"
+  }
+};
+const Soft = exports.Soft = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Link.default, {
+    soft: true
+  }, "Learn about MAAS"),
+  name: "Soft"
+};
+const Inverted = exports.Inverted = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {
+    type: "dark"
+  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    inverted: true
+  }, "Package & publish your app")),
+  name: "Inverted"
+};
+const BackToTop = exports.BackToTop = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Link.default, {
+    top: true
+  }, "Back to top"),
+  name: "Back to top"
+};

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

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

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import List from "./List";
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof List>;
+export declare const Default: Story;
+export declare const Ticked: Story;
+export declare const HorizontalDivider: Story;
+export declare const TickedWithHorizontalDivider: Story;
+export declare const Inline: Story;
+export declare const Middot: Story;
+export declare const Stretch: Story;
+export declare const VerticalStepped: Story;
+export declare const HorizontalStepped: Story;
+export declare const Split: Story;