aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 21:33:27 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 21:33:27 +0800
commitec099dd009b746cef015dec1290efb0fb72b3037 (patch)
treea187c6519f33b8e84e3887e8d018d089226f1c24
parent0577a0dbc5fa78e2bb6289d1ff475f10e27f7a79 (diff)
downloaddexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.tar
dexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.tar.gz
dexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.tar.bz2
dexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.tar.lz
dexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.tar.xz
dexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.tar.zst
dexon-sol-tools-ec099dd009b746cef015dec1290efb0fb72b3037.zip
Adds notes to button
-rw-r--r--packages/website/ts/@next/components/button.tsx37
1 files changed, 32 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 55534b66a..b4280a9ed 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -3,13 +3,14 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
-interface Props {
+
+interface ButtonInterface {
text: string;
transparent?: boolean;
inline?: boolean;
}
-const StyledButton = styled.button<Props>`
+const StyledButton = styled.button<ButtonInterface>`
appearance: none;
border: 0;
background-color: ${colors.brandLight};
@@ -36,14 +37,40 @@ const Text = styled.span`
line-height: 1.375rem;
`;
-export const Button: React.StatelessComponent<Props> = ({ ...props }) => (
+
+
+// A button that may exist as a button or a link
+// a button only makes sense with an onClick handler
+// a link with an href so we base the type of component we return
+// based on those props
+
+export const Button: React.StatelessComponent<ButtonInterface> = props => {
+ const { onClick, href } = props;
+
+ // This button is as link
+ if (props.href) return StyledButton.withComponent('a');
+ else return StyledButton;
+};
+
+
+// usage
+// <Button href="#">Text</Button> ===> <a href="">Text</a>
+// <Button onClick={() => func}>I'm a button</Button> ====> <button></button>
+
+
+
+
+export const Button: React.StatelessComponent<ButtonInterface> = ({ ...props }) => (
<StyledButton {...props}>
<Text>{props.text}</Text>
</StyledButton>
);
-export const ButtonTransparent: React.StatelessComponent<Props> = ({ ...props }) => (
- <Button transparent={true} {...props}>
+// also feel like a transparent prop would suffice instead of having a separate button
+// so we have the logic with the Link/button--- and props = styling. in this case:
+// background-color: ${props => !props.transparent && 'somecolor'}
+export const ButtonTransparent: React.StatelessComponent<ButtonInterface> = ({ ...props }) => (
+ <StyledButton transparent={true} {...props}>
<Text>{props.text}</Text>
</Button>
);