@canonical/react-components 0.53.1 → 0.54.0

package/README.md

@@ -72,3 +72,8 @@ yarn link @canonical/react-components
 cd react-components
 yarn run unlink-packages
 ```
+
+## Related projects
+The following projects are related to, or build upon this library:
+- [Store components](https://github.com/canonical/store-components)
+- [MAAS React components](https://github.com/canonical/maas-react-components)

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+import "./LoginPageLayout.scss";
+export type Props = {
+    title: string;
+    children?: ReactNode;
+    logo?: {
+        src: string;
+        title: string;
+        url: string;
+    };
+};
+declare const LoginPageLayout: FC<Props>;
+export default LoginPageLayout;

package/dist/components/LoginPageLayout/LoginPageLayout.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _Card = _interopRequireDefault(require("../Card"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _Navigation = _interopRequireDefault(require("../Navigation"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _enums = require("../../enums");
+require("./LoginPageLayout.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 && 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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const defaultLogo = {
+  src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+  title: "Canonical",
+  url: "/"
+};
+const LoginPageLayout = _ref => {
+  let {
+    children,
+    title,
+    logo = defaultLogo
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    document.title = title;
+  }, [title]);
+  (0, _react.useLayoutEffect)(() => {
+    var _document$querySelect;
+    (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 || _document$querySelect.classList.add("is-paper");
+  });
+  return /*#__PURE__*/_react.default.createElement(_Row.default, {
+    className: "p-strip page-row"
+  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+    emptyLarge: 4,
+    size: 6
+  }, /*#__PURE__*/_react.default.createElement(_Card.default, {
+    className: "u-no-padding page-card"
+  }, /*#__PURE__*/_react.default.createElement(_Navigation.default, {
+    logo: logo,
+    theme: _enums.Theme.DARK
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-card__inner page-inner"
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "p-heading--4"
+  }, title), /*#__PURE__*/_react.default.createElement("div", null, children)))));
+};
+LoginPageLayout.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node,
+  logo: _propTypes.default.shape({
+    src: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    url: _propTypes.default.string.isRequired
+  })
+};
+var _default = exports.default = LoginPageLayout;

package/dist/components/LoginPageLayout/LoginPageLayout.scss

@@ -0,0 +1,19 @@
+@import "vanilla-framework";
+
+@media screen and (max-width: $breakpoint-small) {
+  .page-row {
+    padding: 0;
+  }
+
+  .page-card {
+    border: 0;
+  }
+
+  .is-paper {
+    background-color: #fff;
+  }
+}
+
+.page-inner {
+  padding: 1rem 2rem 2rem;
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./LoginPageLayout";
+export type { Props as LoginPageLayoutProps } from "./LoginPageLayout";

package/dist/components/LoginPageLayout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _LoginPageLayout.default;
+  }
+});
+var _LoginPageLayout = _interopRequireDefault(require("./LoginPageLayout"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { default as Modal } from "./components/Modal";
 export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
+export { default as LoginPageLayout } from "./components/LoginPageLayout";
 export { default as Pagination } from "./components/Pagination";
 export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
@@ -79,6 +80,7 @@ export type { ModalProps } from "./components/Modal";
 export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, } from "./components/Navigation";
 export type { NotificationProps } from "./components/Notification";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
+export type { LoginPageLayoutProps } from "./components/LoginPageLayout";
 export type { PaginationProps } from "./components/Pagination";
 export type { RadioInputProps } from "./components/RadioInput";
 export type { RowProps } from "./components/Row";

package/dist/index.js

@@ -44,6 +44,7 @@ var _exportNames = {
   success: true,
   failure: true,
   queue: true,
+  LoginPageLayout: true,
   Pagination: true,
   PasswordToggle: true,
   RadioInput: true,
@@ -241,6 +242,12 @@ Object.defineProperty(exports, "Loader", {
     return _Loader.default;
   }
 });
+Object.defineProperty(exports, "LoginPageLayout", {
+  enumerable: true,
+  get: function () {
+    return _LoginPageLayout.default;
+  }
+});
 Object.defineProperty(exports, "MainTable", {
   enumerable: true,
   get: function () {
@@ -565,6 +572,7 @@ Object.keys(_MultiSelect).forEach(function (key) {
 });
 var _Notification = _interopRequireWildcard(require("./components/Notification"));
 var _NotificationProvider = require("./components/NotificationProvider");
+var _LoginPageLayout = _interopRequireDefault(require("./components/LoginPageLayout"));
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.53.1",
+  "version": "0.54.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",