Finish landing

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vercel

package.json

@@ -6,14 +6,19 @@
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
+        "@types/classnames": "^2.2.10",
         "@types/jest": "^24.0.0",
         "@types/node": "^12.0.0",
         "@types/react": "^16.9.0",
         "@types/react-dom": "^16.9.0",
+        "@types/yup": "^0.29.3",
+        "classnames": "^2.2.6",
+        "formik": "^2.1.4",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-scripts": "3.4.1",
-        "typescript": "~3.7.2"
+        "typescript": "~3.7.2",
+        "yup": "^0.29.1"
     },
     "scripts": {
         "start": "react-scripts start",
@@ -24,7 +29,7 @@
     },
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx}": [
-            "eslint",
+            "eslint --fix",
             "prettier --write --tab-width 4",
             "git add"
         ],

src/App.scss

@@ -23,7 +23,7 @@ limitations under the License.
 .topSpacer {
     @include spacer;
 
-    height: 30vh;
+    height: 10vh;
 }
 
 .bottomSpacer {

src/App.tsx

@@ -18,11 +18,13 @@ import React from "react";
 import "./App.scss";
 
 import SingleColumn from "./layouts/SingleColumn";
+import CreateLinkTile from "./components/CreateLinkTile";
 
 const App: React.FC = () => {
     return (
         <SingleColumn>
             <div className="topSpacer" />
+            <CreateLinkTile />
             <div className="bottomSpacer" />
         </SingleColumn>
     );

src/_color-scheme.scss

@@ -4,3 +4,5 @@ $foreground: #000000;
 $font: #333333;
 $grey: #666666;
 $accent: #0098d4;
+$error: #d6001c;
+$link: #0098d4;

src/_error.scss

@@ -0,0 +1,4 @@
+@mixin error {
+    color: $error;
+    border-color: $error;
+}

src/components/Button.scss

@@ -17,19 +17,19 @@ limitations under the License.
 @import "../color-scheme";
 
 .button {
-  width: 100%;
+    width: 100%;
 
-  padding: 1rem;
+    padding: 1rem;
-  border-radius: 1000px;
+    border-radius: 2rem;
-  border: 0;
+    border: 0;
 
-  background-color: $foreground;
+    background-color: $foreground;
-  color: $background;
+    color: $background;
 
-  font-size: 14px;
+    font-size: 14px;
-  font-weight: 500px;
+    font-weight: 500;
 }
 
 .buttonHighlight {
-  background-color: $accent;
+    background-color: $accent;
 }

src/components/Button.tsx

@@ -27,37 +27,43 @@ interface IProps extends React.ButtonHTMLAttributes<Element> {
 /**
  * Like a normal button except it will flash content when clicked.
  */
-const Button: React.FC<IProps> = ({
+const Button: React.FC<
-    onClick,
+    IProps & React.RefAttributes<HTMLButtonElement>
-    children,
+> = React.forwardRef(
-    flashChildren,
+    (
-    className,
+        { onClick, children, flashChildren, className, ...restProps }: IProps,
-    ...restProps
+        ref: React.Ref<HTMLButtonElement>
-}: IProps) => {
+    ) => {
-    const [wasClicked, setWasClicked] = React.useState(false);
+        const [wasClicked, setWasClicked] = React.useState(false);
 
-    const wrappedOnClick: React.MouseEventHandler = (e) => {
+        const wrappedOnClick: React.MouseEventHandler = (e) => {
-        if (onClick) {
+            if (onClick) {
-            onClick(e);
+                onClick(e);
-        }
+            }
 
-        setWasClicked(true);
+            setWasClicked(true);
-        window.setTimeout(() => {
+            window.setTimeout(() => {
-            setWasClicked(false);
+                setWasClicked(false);
-        }, 1000);
+            }, 1000);
-    };
+        };
 
-    const content = wasClicked ? flashChildren : children;
+        const content = wasClicked && flashChildren ? flashChildren : children;
 
-    const classNames = classnames("button", className, {
+        const classNames = classnames("button", className, {
-        buttonHighlight: wasClicked,
+            buttonHighlight: wasClicked,
-    });
+        });
 
-    return (
+        return (
-        <button className={classNames} onClick={wrappedOnClick} {...restProps}>
+            <button
-            {content}
+                className={classNames}
-        </button>
+                onClick={wrappedOnClick}
-    );
+                ref={ref}
-};
+                {...restProps}
+            >
+                {content}
+            </button>
+        );
+    }
+);
 
 export default Button;

src/components/CreateLinkTile.scss

@@ -0,0 +1,30 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.createLinkTile {
+    background: none;
+
+    > * {
+        margin: 12px 0;
+        width: 100%;
+    }
+
+    > form {
+        display: grid;
+        row-gap: 24px;
+        align-self: center;
+    }
+}

src/components/CreateLinkTile.tsx

@@ -0,0 +1,116 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useRef } from "react";
+import Tile from "./Tile";
+import Button from "./Button";
+import TextButton from "./TextButton";
+import Input from "./Input";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+
+import "./CreateLinkTile.scss";
+
+interface ILinkNotCreatedTileProps {
+    setLink: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const LinkNotCreatedTile = (props: ILinkNotCreatedTileProps) => {
+    return (
+        <Tile className="createLinkTile">
+            <h1>
+                Create shareable links to Matrix rooms, users or messages
+                without being tied to any app
+            </h1>
+            <Formik
+                initialValues={{
+                    identifier: "",
+                }}
+                validationSchema={Yup.object({
+                    identifier: Yup.string()
+                        .test(
+                            "is-identifier",
+                            "That link doesn't look right. Double check the details.",
+                            (link) => link
+                        )
+                        .required("Required"),
+                })}
+                onSubmit={(values) => {
+                    props.setLink(
+                        document.location.protocol +
+                            "//" +
+                            document.location.host +
+                            "/" +
+                            values.identifier
+                    );
+                }}
+            >
+                <Form>
+                    <Input
+                        name={"identifier"}
+                        type={"text"}
+                        placeholder="#room:example.com, @user:example.com"
+                    />
+                    <Button type="submit">Get Link</Button>
+                </Form>
+            </Formik>
+        </Tile>
+    );
+};
+
+interface ILinkCreatedTileProps {
+    link: string;
+    setLink: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // Focus button on render
+    useEffect(() => {
+        if (buttonRef && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    });
+
+    return (
+        <Tile className="createLinkTile">
+            <TextButton onClick={() => props.setLink("")}>
+                Create another lnk
+            </TextButton>
+            <h1>{props.link}</h1>
+            <Button
+                flashChildren={"Copied"}
+                onClick={() => navigator.clipboard.writeText(props.link)}
+                ref={buttonRef}
+            >
+                Copy Link
+            </Button>
+        </Tile>
+    );
+};
+
+const CreateLinkTile: React.FC = () => {
+    const [link, setLink] = React.useState("");
+    console.log(link);
+    if (!link) {
+        return <LinkNotCreatedTile setLink={setLink} />;
+    } else {
+        return <LinkCreatedTile link={link} setLink={setLink} />;
+    }
+};
+
+export default CreateLinkTile;

src/components/Input.scss

@@ -0,0 +1,40 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import "../color-scheme";
+@import "../error";
+
+.input {
+    width: 100%;
+    padding: 12px;
+
+    background: $background;
+
+    border: 1px solid $font;
+    border-radius: 24px;
+
+    font-size: 14px;
+    line-height: 24px;
+
+    &.error {
+        @include error;
+    }
+}
+
+.inputError {
+    @include error;
+    text-align: center;
+}

src/components/Input.tsx

@@ -0,0 +1,48 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classnames from "classnames";
+import { useField } from "formik";
+
+import "./Input.scss";
+
+interface IProps extends React.InputHTMLAttributes<Element> {
+    name: string;
+    type: string;
+}
+
+const Input: React.FC<IProps> = ({ className, ...props }) => {
+    const [field, meta] = useField(props);
+
+    const error =
+        meta.touched && meta.error ? (
+            <div className="inputError">{meta.error}</div>
+        ) : null;
+
+    const classNames = classnames("input", className, {
+        error: meta.error,
+    });
+
+    return (
+        <>
+            <input type="text" className={classNames} {...field} {...props} />
+            {error}
+        </>
+    );
+};
+
+export default Input;

src/components/TextButton.scss

@@ -0,0 +1,27 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import "../color-scheme";
+
+.textButton {
+    background: none;
+    border: none;
+    color: $link;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 24px;
+}

src/components/TextButton.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classnames from "classnames";
+
+import "./TextButton.scss";
+
+const TextButton: React.FC<React.ButtonHTMLAttributes<Element>> = ({
+    className,
+    ...restProps
+}) => {
+    return (
+        <button
+            className={classnames("textButton", className)}
+            {...restProps}
+        />
+    );
+};
+export default TextButton;

src/components/Tile.scss

@@ -17,11 +17,14 @@ limitations under the License.
 @import "../color-scheme";
 
 .tile {
-  background-color: $background;
+    background-color: $background;
 
-  border-radius: 8px;
+    border-radius: 8px;
-  padding: 1rem;
+    padding: 1rem;
 
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
+    align-items: center;
+
+    text-align: center;
 }

src/components/Tile.tsx

@@ -15,15 +15,21 @@ limitations under the License.
 */
 
 import React from "react";
+import classnames from "classnames";
 
 import "./Tile.scss";
 
 interface IProps {
+    className?: string;
     children: React.ReactNode;
 }
 
 const Tile: React.FC<IProps> = (props: IProps) => {
-    return <div className="tile">{props.children}</div>;
+    return (
+        <div className={classnames("tile", props.className)}>
+            {props.children}
+        </div>
+    );
 };
 
 export default Tile;

src/index.scss

@@ -44,3 +44,8 @@ h1 {
     line-height: 32px;
     text-align: center;
 }
+
+a {
+    color: $link;
+    text-decoration: none;
+}

src/typings/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/typings/scss.d.ts

@@ -0,0 +1,10 @@
+// scss.d.ts
+declare module "*.css" {
+    const content: { [className: string]: string };
+    export default content;
+}
+
+declare module "*.scss" {
+    const content: { [className: string]: string };
+    export default content;
+}