@canonical/react-components 1.6.0 → 1.7.0

package/dist/components/Card/Card.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Overlay = exports.Highlighted = exports.Header = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("./"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _Row = _interopRequireDefault(require("../Row"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    title: "We'd love to have you join us as a partner.",
+    children: "If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."
+  }
+};
+const Header = exports.Header = {
+  args: {
+    title: "Raspberry Pi2 and Pi3",
+    thumbnail: "https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png",
+    children: "For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board."
+  }
+};
+const Highlighted = exports.Highlighted = {
+  args: {
+    ...Default.args,
+    highlighted: true
+  }
+};
+const Overlay = exports.Overlay = {
+  args: {
+    title: "Web browsing",
+    overlay: true,
+    children: "Renowned for speed and security, Ubuntu and Firefox make browsing\nthe web a pleasure again. Ubuntu also includes Chrome, Opera and\nother browsers that can be installed from the Ubuntu Software\nCentre."
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("section", {
+    className: "p-strip--image is-light",
+    style: {
+      backgroundImage: "url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    size: 6,
+    emptyLarge: 7
+  }, /*#__PURE__*/_react.default.createElement(_.default, args))))
+};

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

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

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.test.d.ts

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

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CheckboxInput from "./CheckboxInput";
+declare const meta: Meta<typeof CheckboxInput>;
+export default meta;
+type Story = StoryObj<typeof CheckboxInput>;
+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;
+export declare const Indeterminate: Story;

package/dist/components/CheckboxInput/CheckboxInput.stories.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = exports.Inline = exports.Indeterminate = exports.Disabled = exports.Default = exports.Children = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _CheckboxInput.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: "CheckboxInput"
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};
+const Children = exports.Children = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.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: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Disabled",
+    disabled: true
+  }),
+  name: "Disabled"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Inline",
+    inline: true
+  }),
+  name: "Inline"
+};
+const Indeterminate = exports.Indeterminate = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    label: "Indeterminate",
+    indeterminate: true
+  }),
+  name: "Indeterminate"
+};

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

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

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

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

package/dist/components/Chip/Chip.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LeadValue = exports.Dismissible = exports.Default = exports.Appearance = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Chip = _interopRequireDefault(require("./Chip"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Chip.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    value: "Default"
+  }
+};
+const LeadValue = exports.LeadValue = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob"
+  }),
+  name: "Lead-value"
+};
+const Appearance = exports.Appearance = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Type",
+    value: "Positive",
+    appearance: "positive"
+  }),
+  name: "Appearance"
+};
+const Dismissible = exports.Dismissible = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    lead: "Owner",
+    value: "Bob",
+    onDismiss: () => {
+      console.log("onDismiss called");
+    }
+  }),
+  name: "Dismissible"
+};

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

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

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CodeSnippet from "./CodeSnippet";
+declare const meta: Meta<typeof CodeSnippet>;
+export default meta;
+type Story = StoryObj<typeof CodeSnippet>;
+export declare const Default: Story;
+/**
+ * Use the `title` prop to add a title to a code block.
+ */
+export declare const Title: Story;
+/**
+ * Pass an array of `blocks` to render multiple code blocks (for example input and output) within a single code snippet.
+ */
+export declare const MultipleBlocks: Story;
+/**
+ * Use `appearance` to control the visual aspects of the code block. `"numbered"` appearance will add line numbers in the code blocks.
+ * Values of `"linuxPrompt"`, `"windowsPrompt"`, `"url"` will add a relevant icon in the code block.
+ */
+export declare const Appearance: Story;
+/**
+ * Set `wrapLines` prop to `true` to enable line wrapping inside the code block.
+ */
+export declare const WrapLines: Story;
+/**
+ * Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via `dropdowns` property in the block options object.
+ *
+ * With the `options` being an array of option properties compatible with the `Select` options (`[{ label: string, value: string | number }]`).
+ */
+export declare const Dropdown: Story;
+/**
+ * Multiple dropdowns can be passed in if needed.
+ */
+export declare const Dropdowns: Story;
+/**
+ * If multiple dropdowns may overlap with long title you can use `stacked` variant, by setting the relevant property on code block options.
+ */
+export declare const DropdownsStacked: Story;
+/**
+ * Custom elements can be passed to a CodeBlock via the `content` prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block.
+ */
+export declare const Content: Story;
+/**
+ * It's possible to pass JSX instead of strings to the `code` parameter, either as a single element or an array (e.g. if you want to display line numbers).
+ */
+export declare const JsxCodeElements: Story;

package/dist/components/CodeSnippet/CodeSnippet.stories.js

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WrapLines = exports.Title = exports.MultipleBlocks = exports.JsxCodeElements = exports.DropdownsStacked = exports.Dropdowns = exports.Dropdown = exports.Default = exports.Content = exports.Appearance = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CodeSnippet = _interopRequireDefault(require("./CodeSnippet"));
+var _CodeSnippetBlock = require("./CodeSnippetBlock");
+var _Button = _interopRequireDefault(require("../Button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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: _CodeSnippet.default,
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      code: "Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"
+    }]
+  }),
+  name: "Default"
+};
+
+/**
+ * Use the `title` prop to add a title to a code block.
+ */
+const Title = exports.Title = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "Output",
+      code: "Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"
+    }]
+  }),
+  name: "Title"
+};
+
+/**
+ * Pass an array of `blocks` to render multiple code blocks (for example input and output) within a single code snippet.
+ */
+const MultipleBlocks = exports.MultipleBlocks = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "JavaScript",
+      code: "console.log('Vanilla');"
+    }, {
+      title: "Output",
+      code: "Vanilla"
+    }]
+  }),
+  name: "Multiple blocks"
+};
+
+/**
+ * Use `appearance` to control the visual aspects of the code block. `"numbered"` appearance will add line numbers in the code blocks.
+ * Values of `"linuxPrompt"`, `"windowsPrompt"`, `"url"` will add a relevant icon in the code block.
+ */
+const Appearance = exports.Appearance = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "Install on Linux",
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.LINUX_PROMPT,
+      code: "snap install toto"
+    }, {
+      title: "Install on Windows",
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.WINDOWS_PROMPT,
+      code: "snap install toto"
+    }, {
+      title: "Get from the Store",
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.URL,
+      code: "http://snapcraft.io/toto"
+    }]
+  }),
+  name: "Appearance"
+};
+
+/**
+ * Set `wrapLines` prop to `true` to enable line wrapping inside the code block.
+ */
+const WrapLines = exports.WrapLines = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.NUMBERED,
+      wrapLines: true,
+      code: "#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ \"$JUJU_PROVIDERTYPE\" == \"lxd\" ]]; then\n  debug \"Running pre-deploy for $CONJURE_UP_SPELL\"\n  sed \"s/##MODEL##/$JUJU_MODEL/\" $(scriptPath)/lxd-profile.yaml | lxc profile edit \"juju-$JUJU_MODEL\" || exposeResult \"Failed to set profile\" $? \"false\"\nfi\nexposeResult \"Successful pre-deploy.\" 0 \"true\""
+    }]
+  }),
+  name: "Wrap lines"
+};
+
+/**
+ * Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via `dropdowns` property in the block options object.
+ *
+ * With the `options` being an array of option properties compatible with the `Select` options (`[{ label: string, value: string | number }]`).
+ */
+const Dropdown = exports.Dropdown = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [lang, setLang] = (0, _react.useState)("html");
+    const code = {
+      js: "console.log(\"Example 1\");",
+      css: ".p-heading--2 { color: red; }",
+      html: "<h1 class=\"p-heading--2\">How to use code snippets</h1>"
+    };
+    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        code: code[lang],
+        dropdowns: [{
+          options: [{
+            value: "js",
+            label: "JS"
+          }, {
+            value: "css",
+            label: "CSS"
+          }, {
+            value: "html",
+            label: "HTML"
+          }],
+          value: lang,
+          onChange: event => {
+            setLang(event.target.value);
+          }
+        }]
+      }]
+    });
+  },
+  name: "Dropdown"
+};
+
+/**
+ * Multiple dropdowns can be passed in if needed.
+ */
+const Dropdowns = exports.Dropdowns = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [channel, setChannel] = (0, _react.useState)("stable");
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [snap, setSnap] = (0, _react.useState)("firefox");
+    const code = "sudo snap install ".concat(snap, " ").concat(channel === "stable" ? "" : "--" + channel);
+    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        title: "Install snap",
+        code: code,
+        dropdowns: [{
+          options: [{
+            value: "stable",
+            label: "stable"
+          }, {
+            value: "candidate",
+            label: "candidate"
+          }, {
+            value: "beta",
+            label: "beta"
+          }, {
+            value: "edge",
+            label: "edge"
+          }],
+          value: channel,
+          onChange: event => {
+            setChannel(event.target.value);
+          }
+        }, {
+          options: [{
+            value: "firefox",
+            label: "Firefox"
+          }, {
+            value: "gimp",
+            label: "Gimp"
+          }, {
+            value: "vlc",
+            label: "VLC"
+          }],
+          value: snap,
+          onChange: event => {
+            setSnap(event.target.value);
+          }
+        }]
+      }]
+    });
+  },
+  name: "Dropdowns"
+};
+
+/**
+ * If multiple dropdowns may overlap with long title you can use `stacked` variant, by setting the relevant property on code block options.
+ */
+const DropdownsStacked = exports.DropdownsStacked = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [channel, setChannel] = (0, _react.useState)("stable");
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [snap, setSnap] = (0, _react.useState)("firefox");
+    const code = "sudo snap install ".concat(snap, " ").concat(channel === "stable" ? "" : "--" + channel);
+    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+      blocks: [{
+        title: "Install Firefox, Gimp or VLC as a snap from different channels using command line",
+        code: code,
+        stacked: true,
+        dropdowns: [{
+          options: [{
+            value: "stable",
+            label: "stable"
+          }, {
+            value: "candidate",
+            label: "candidate"
+          }, {
+            value: "beta",
+            label: "beta"
+          }, {
+            value: "edge",
+            label: "edge"
+          }],
+          value: channel,
+          onChange: event => {
+            setChannel(event.target.value);
+          }
+        }, {
+          options: [{
+            value: "firefox",
+            label: "Firefox"
+          }, {
+            value: "gimp",
+            label: "Gimp"
+          }, {
+            value: "vlc",
+            label: "VLC"
+          }],
+          value: snap,
+          onChange: event => {
+            setSnap(event.target.value);
+          }
+        }]
+      }]
+    });
+  },
+  name: "DropdownsStacked"
+};
+
+/**
+ * Custom elements can be passed to a CodeBlock via the `content` prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block.
+ */
+const Content = exports.Content = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      title: "A button example",
+      code: "<Button>Button</Button>",
+      content: /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          margin: "0.5rem"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Button"))
+    }]
+  }),
+  name: "Content"
+};
+
+/**
+ * It's possible to pass JSX instead of strings to the `code` parameter, either as a single element or an array (e.g. if you want to display line numbers).
+ */
+const JsxCodeElements = exports.JsxCodeElements = {
+  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
+    blocks: [{
+      code: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "snap"), " install ", /*#__PURE__*/_react.default.createElement("a", {
+        href: "#test"
+      }, "toto"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("strong", null, "apt"), " install ", /*#__PURE__*/_react.default.createElement("a", {
+        href: "#test"
+      }, "toto"))
+    }]
+  }),
+  name: "JSX code elements"
+};

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

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Col from "./Col";
+declare const Template: (args: any) => React.JSX.Element;
+declare const meta: Meta<typeof Template>;
+export default meta;
+type Story = StoryObj<typeof Col>;
+export declare const Default: Story;
+export declare const Grid: Story;
+export declare const NestedColumns: Story;
+export declare const EmptyColumns: Story;