@canonical/react-components 0.58.0 → 0.59.0

package/dist/components/ApplicationLayout/ApplicationLayout.stories.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Navigation = exports.ExternalStates = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Form = _interopRequireDefault(require("../Form"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const meta = {
+  component: _ApplicationLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    const [showAside, setShowAside] = (0, _react.useState)(true);
+    const [asidePinned, setAsidePinned] = (0, _react.useState)(false);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }],
+      aside: showAside ? /*#__PURE__*/_react.default.createElement(_AppAside.default, {
+        title: "Aside panel",
+        pinned: asidePinned
+      }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+        controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+          onClick: () => setAsidePinned(!asidePinned),
+          dense: true,
+          className: "u-no-margin"
+        }, "Pin aside"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          appearance: "base",
+          className: "u-no-margin--bottom",
+          hasIcon: true,
+          onClick: () => {
+            setShowAside(false);
+            setAsidePinned(false);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: "close"
+        }, "Close")))
+      }, /*#__PURE__*/_react.default.createElement(_Form.default, {
+        stacked: true
+      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Full name",
+        type: "text",
+        name: "fullName",
+        autoComplete: "name",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Username",
+        type: "text",
+        name: "username-stacked",
+        autoComplete: "username",
+        "aria-describedby": "exampleHelpTextMessage",
+        stacked: true,
+        help: "30 characters or fewer."
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        type: "text",
+        label: "Email address",
+        "aria-invalid": "true",
+        name: "username-stackederror",
+        autoComplete: "email",
+        required: true,
+        error: "This field is required.",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Address line 1",
+        type: "text",
+        name: "address-optional-stacked",
+        autoComplete: "address-line1",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Address line 2",
+        type: "text",
+        name: "address-optional-stacked",
+        autoComplete: "address-line3",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+        size: 12
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        appearance: "positive",
+        className: "u-float-right",
+        name: "add-details"
+      }, "Add details")))))) : null,
+      status: /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: () => setShowAside(!showAside),
+        dense: true,
+        appearance: "base",
+        className: "u-no-margin"
+      }, "Toggle aside")
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+const ExternalStates = exports.ExternalStates = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
+ */
+const Navigation = exports.Navigation = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      sideNavigation: /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+        items: [{
+          items: [{
+            icon: "drag",
+            label: "Models",
+            href: "/models"
+          }, {
+            icon: "menu",
+            label: "Controllers",
+            href: "/controllers"
+          }, {
+            icon: "user",
+            label: "Permissions",
+            href: "/users"
+          }]
+        }]
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};

package/dist/components/ApplicationLayout/index.d.ts

@@ -0,0 +1,7 @@
+export { default, type Props as ApplicationLayoutProps, } from "./ApplicationLayout";
+export { default as AppAside, type AppAsideProps } from "./AppAside";
+export { default as Application, type ApplicationProps } from "./Application";
+export { default as AppMain, type AppMainProps } from "./AppMain";
+export { default as AppNavigation, type AppNavigationProps, } from "./AppNavigation";
+export { default as AppNavigationBar, type AppNavigationBarProps, } from "./AppNavigationBar";
+export { default as AppStatus, type AppStatusProps } from "./AppStatus";

package/dist/components/ApplicationLayout/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AppAside", {
+  enumerable: true,
+  get: function () {
+    return _AppAside.default;
+  }
+});
+Object.defineProperty(exports, "AppMain", {
+  enumerable: true,
+  get: function () {
+    return _AppMain.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigation", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigation.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigationBar", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigationBar.default;
+  }
+});
+Object.defineProperty(exports, "AppStatus", {
+  enumerable: true,
+  get: function () {
+    return _AppStatus.default;
+  }
+});
+Object.defineProperty(exports, "Application", {
+  enumerable: true,
+  get: function () {
+    return _Application.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ApplicationLayout.default;
+  }
+});
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Application = _interopRequireDefault(require("./Application"));
+var _AppMain = _interopRequireDefault(require("./AppMain"));
+var _AppNavigation = _interopRequireDefault(require("./AppNavigation"));
+var _AppNavigationBar = _interopRequireDefault(require("./AppNavigationBar"));
+var _AppStatus = _interopRequireDefault(require("./AppStatus"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/index.d.ts

@@ -1,6 +1,13 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as ActionButton } from "./components/ActionButton";
 export { default as ArticlePagination } from "./components/ArticlePagination";
+export { default as ApplicationLayout } from "./components/ApplicationLayout";
+export { default as AppAside } from "./components/ApplicationLayout/AppAside";
+export { default as Application } from "./components/ApplicationLayout/Application";
+export { default as AppMain } from "./components/ApplicationLayout/AppMain";
+export { default as AppNavigation } from "./components/ApplicationLayout/AppNavigation";
+export { default as AppNavigationBar } from "./components/ApplicationLayout/AppNavigationBar";
+export { default as AppStatus } from "./components/ApplicationLayout/AppStatus";
 export { default as Badge } from "./components/Badge";
 export { default as Button, ButtonAppearance } from "./components/Button";
 export { default as Card } from "./components/Card";
@@ -59,6 +66,13 @@ export { default as TablePagination } from "./components/TablePagination";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
+export type { ApplicationLayoutProps } from "./components/ApplicationLayout";
+export type { AppAsideProps } from "./components/ApplicationLayout/AppAside";
+export type { ApplicationProps } from "./components/ApplicationLayout/Application";
+export type { AppMainProps } from "./components/ApplicationLayout/AppMain";
+export type { AppNavigationProps } from "./components/ApplicationLayout/AppNavigation";
+export type { AppNavigationBarProps } from "./components/ApplicationLayout/AppNavigationBar";
+export type { AppStatusProps } from "./components/ApplicationLayout/AppStatus";
 export type { BadgeProps } from "./components/Badge";
 export type { ButtonProps } from "./components/Button";
 export type { CardProps } from "./components/Card";

package/dist/index.js

@@ -7,6 +7,13 @@ var _exportNames = {
   Accordion: true,
   ActionButton: true,
   ArticlePagination: true,
+  ApplicationLayout: true,
+  AppAside: true,
+  Application: true,
+  AppMain: true,
+  AppNavigation: true,
+  AppNavigationBar: true,
+  AppStatus: true,
   Badge: true,
   Button: true,
   ButtonAppearance: true,
@@ -97,6 +104,48 @@ Object.defineProperty(exports, "ActionButton", {
     return _ActionButton.default;
   }
 });
+Object.defineProperty(exports, "AppAside", {
+  enumerable: true,
+  get: function () {
+    return _AppAside.default;
+  }
+});
+Object.defineProperty(exports, "AppMain", {
+  enumerable: true,
+  get: function () {
+    return _AppMain.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigation", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigation.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigationBar", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigationBar.default;
+  }
+});
+Object.defineProperty(exports, "AppStatus", {
+  enumerable: true,
+  get: function () {
+    return _AppStatus.default;
+  }
+});
+Object.defineProperty(exports, "Application", {
+  enumerable: true,
+  get: function () {
+    return _Application.default;
+  }
+});
+Object.defineProperty(exports, "ApplicationLayout", {
+  enumerable: true,
+  get: function () {
+    return _ApplicationLayout.default;
+  }
+});
 Object.defineProperty(exports, "ArticlePagination", {
   enumerable: true,
   get: function () {
@@ -568,6 +617,13 @@ Object.defineProperty(exports, "useWindowFitment", {
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
 var _ArticlePagination = _interopRequireDefault(require("./components/ArticlePagination"));
+var _ApplicationLayout = _interopRequireDefault(require("./components/ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./components/ApplicationLayout/AppAside"));
+var _Application = _interopRequireDefault(require("./components/ApplicationLayout/Application"));
+var _AppMain = _interopRequireDefault(require("./components/ApplicationLayout/AppMain"));
+var _AppNavigation = _interopRequireDefault(require("./components/ApplicationLayout/AppNavigation"));
+var _AppNavigationBar = _interopRequireDefault(require("./components/ApplicationLayout/AppNavigationBar"));
+var _AppStatus = _interopRequireDefault(require("./components/ApplicationLayout/AppStatus"));
 var _Badge = _interopRequireDefault(require("./components/Badge"));
 var _Button = _interopRequireWildcard(require("./components/Button"));
 var _Card = _interopRequireDefault(require("./components/Card"));

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "author": "Huw Wilkins <huw.wilkins@canonical.com>",
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
   "license": "LGPL-3.0",
   "files": [
     "dist/**/*.js",