feat: Add LoginPageLayout component (#1094)

src/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;
+}

src/components/LoginPageLayout/LoginPageLayout.stories.mdx

@@ -0,0 +1,103 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs/blocks';
+import CodeSnippet from '../CodeSnippet/CodeSnippet';
+import Spinner from '../Spinner/Spinner';
+import LoginPageLayout from './LoginPageLayout';
+
+
+<Meta 
+  title="LoginPageLayout"
+  component={LoginPageLayout}
+/>
+
+export const Template = (args) => <LoginPageLayout {...args}>{args.children}</LoginPageLayout>;
+
+### LoginPageLayout
+
+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.
+
+### Props
+
+<ArgsTable of={LoginPageLayout} />
+
+### Default
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      title: "This is the title",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Login page
+
+<Canvas>
+    <Story
+      name="Login page"
+      args={{
+        title: "Sign in",
+        children: (
+          <Spinner />
+        ),
+      }}
+    >
+      {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Error page
+
+<Canvas>
+  <Story
+    name="Error page"
+    args={{
+      title: "Sign in failed",
+      children: (
+        <CodeSnippet
+          blocks={[
+            {
+              wrapLines: true,
+              code: <>An error occurred. Try signing in again.</>
+            },
+          ]}
+        />
+      ),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Registration page
+
+<Canvas>
+  <Story
+    name="Registration page"
+    args={{
+      title: "Sign up",
+      children: (
+        <>
+          <p>Fill in the form below to create an account</p>
+          <form>
+            <input type="text" placeholder="Username" />
+            <input type="email" placeholder="Email" />
+            <input type="password" placeholder="Password" />
+            <button>Sign up</button>
+          </form>
+        </>
+      ),
+      logo: {
+        src: "https://anbox-cloud.io/static/logo.svg",
+        title: "Anbox Cloud",
+        url: "/",
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+

src/components/LoginPageLayout/LoginPageLayout.tsx

@@ -0,0 +1,48 @@
+import React, { FC, ReactNode, useEffect, useLayoutEffect } from "react";
+import Card from "components/Card";
+import Col from "components/Col";
+import Navigation from "components/Navigation";
+import Row from "components/Row";
+import { Theme } from "enums";
+import "./LoginPageLayout.scss";
+
+const defaultLogo = {
+  src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+  title: "Canonical",
+  url: "/",
+};
+
+export type Props = {
+  title: string;
+  children?: ReactNode;
+  logo?: { src: string; title: string; url: string };
+};
+
+const LoginPageLayout: FC<Props> = ({
+  children,
+  title,
+  logo = defaultLogo,
+}) => {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+  useLayoutEffect(() => {
+    document.querySelector("body")?.classList.add("is-paper");
+  });
+
+  return (
+    <Row className="p-strip page-row">
+      <Col emptyLarge={4} size={6}>
+        <Card className="u-no-padding page-card">
+          <Navigation logo={logo} theme={Theme.DARK} />
+          <div className="p-card__inner page-inner">
+            <h1 className="p-heading--4">{title}</h1>
+            <div>{children}</div>
+          </div>
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+export default LoginPageLayout;

src/components/LoginPageLayout/index.ts

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

src/index.ts

@@ -43,6 +43,7 @@ export {
   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";
@@ -120,6 +121,7 @@ export type {
   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";