Add basic components

package.json

@@ -48,7 +48,9 @@
     ]
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.10",
     "@typescript-eslint/parser": "^3.0.2",
+    "classnames": "^2.2.6",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
     "node-sass": "^4.14.1",

src/components/Button.scss

@@ -0,0 +1,35 @@
+/*
+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";
+
+.button {
+  width: 100%;
+
+  padding: 1rem;
+  border-radius: 1000px;
+  border: 0;
+
+  background-color: $foreground;
+  color: $background;
+
+  font-size: 14px;
+  font-weight: 500px;
+}
+
+.buttonHighlight {
+  background-color: $accent;
+}

src/components/Button.tsx

@@ -0,0 +1,61 @@
+/*
+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 "./Button.scss";
+
+interface IProps extends React.ButtonHTMLAttributes<Element> {
+  // Briefly display these instead of the children onClick
+  flashChildren?: React.ReactNode;
+}
+
+/**
+ * Like a normal button except it will flash content when clicked.
+ */
+export default ({
+  onClick,
+  children,
+  flashChildren,
+  className,
+  ...restProps
+}: IProps) => {
+  const [wasClicked, setWasClicked] = React.useState(false);
+
+  const wrappedOnClick: React.MouseEventHandler = (e) => {
+    if (onClick) {
+      onClick(e);
+    }
+
+    setWasClicked(true);
+    window.setTimeout(() => {
+      setWasClicked(false);
+    }, 1000);
+  };
+
+  const content = wasClicked ? flashChildren : children;
+
+  const classNames = classnames("button", className, {
+    buttonHighlight: wasClicked,
+  });
+
+  return (
+    <button className={classNames} onClick={wrappedOnClick} {...restProps}>
+      {content}
+    </button>
+  );
+};

src/components/Tile.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";
+
+.tile {
+  background-color: $background;
+
+  border-radius: 8px;
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: column;
+}

src/components/Tile.tsx

@@ -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 React from "react";
+
+import "./Tile.scss";
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+export default (props: IProps) => {
+  return <div className="tile">{props.children}</div>;
+};

yarn.lock

@@ -1513,6 +1513,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/classnames@^2.2.10":
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
+  integrity sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -3011,6 +3016,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"