diff --git a/package.json b/package.json index 9852b9c..9762109 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button.scss b/src/components/Button.scss new file mode 100644 index 0000000..35497aa --- /dev/null +++ b/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; +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..45e264e --- /dev/null +++ b/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 { + // 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 ( + + ); +}; diff --git a/src/components/Tile.scss b/src/components/Tile.scss new file mode 100644 index 0000000..3fa7da1 --- /dev/null +++ b/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; +} diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx new file mode 100644 index 0000000..55389db --- /dev/null +++ b/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
{props.children}
; +}; diff --git a/yarn.lock b/yarn.lock index 9b9b85b..e1c531e 100644 --- a/yarn.lock +++ b/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"