Add basic components
This commit is contained in:
parent
8b07e64a9b
commit
4d782e59af
@ -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",
|
||||
|
35
src/components/Button.scss
Normal file
35
src/components/Button.scss
Normal file
@ -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;
|
||||
}
|
61
src/components/Button.tsx
Normal file
61
src/components/Button.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
27
src/components/Tile.scss
Normal file
27
src/components/Tile.scss
Normal file
@ -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;
|
||||
}
|
27
src/components/Tile.tsx
Normal file
27
src/components/Tile.tsx
Normal file
@ -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>;
|
||||
};
|
10
yarn.lock
10
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"
|
||||
|
Loading…
Reference in New Issue
Block a user