Merge pull request #14 from Synthetixio/feat/button-onclick-type

feat(button iconbutton selector): adds the event type of the onClick …

src/components/Button.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import React, { ButtonHTMLAttributes, FC } from 'react';
+import React, { ButtonHTMLAttributes, FC, MouseEvent } from 'react';
 import { theme } from '../styles';
 import { rem } from '../constants';
 import colors from '../styles/colors';
@@ -12,6 +12,7 @@ interface ButtonProps {
 	variant?: 'primary' | 'secondary' | 'tertiary';
 	secondaryBackgroundColor?: string;
 	disabled?: boolean;
+	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -21,6 +22,7 @@ const Button: FC<ButtonProps> = ({
 	variant,
 	secondaryBackgroundColor,
 	disabled,
+	onClick,
 	...rest
 }) => {
 	return (
@@ -31,6 +33,7 @@ const Button: FC<ButtonProps> = ({
 				variant={variant}
 				secondaryBackgroundColor={secondaryBackgroundColor}
 				size={size}
+				onClick={onClick}
 			>
 				<StyledButtonText variant={variant} disabled={disabled} size={size}>
 					{text}

src/components/IconButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import styled from 'styled-components';
 import spacings from '../styles/spacings';
 
@@ -8,6 +8,7 @@ interface IconButtonProps {
 	rounded?: boolean;
 	size?: keyof typeof spacings.margin;
 	text?: string;
+	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 export default function IconButton({
@@ -16,11 +17,12 @@ export default function IconButton({
 	rounded = false,
 	size = 'small',
 	text,
+	onClick,
 	...rest
 }: IconButtonProps) {
 	return (
 		<StyledWrapper rounded={rounded} {...rest}>
-			<StyledButton rounded={rounded} size={size} active={active}>
+			<StyledButton rounded={rounded} size={size} active={active} onClick={onClick}>
 				{icon} {text && <StyledText>{text}</StyledText>}
 			</StyledButton>
 		</StyledWrapper>

src/components/Selector.tsx

@@ -1,54 +1,54 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import styled from 'styled-components';
 import colors from '../styles/colors';
 import spacings from '../styles/spacings';
 
 interface SelectorProps {
-  text: string;
-  icon?: JSX.Element;
-  onClick: () => void;
+	text: string;
+	icon?: JSX.Element;
+	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 export default function Selector({ text, icon, onClick }: SelectorProps) {
-  return (
-    <SelectorWrapper onClick={onClick} hasIcon={!!icon}>
-      <SelectorText hasIcon={!!icon}>{text}</SelectorText> {icon}
-    </SelectorWrapper>
-  );
+	return (
+		<SelectorWrapper onClick={onClick} hasIcon={!!icon}>
+			<SelectorText hasIcon={!!icon}>{text}</SelectorText> {icon}
+		</SelectorWrapper>
+	);
 }
 
 const SelectorWrapper = styled.button<{ hasIcon: boolean }>`
-  display: flex;
-  flex-direction: row;
-  justify-content: ${({ hasIcon }) => (hasIcon ? 'space-between' : 'center')};
-  align-items: center;
-  padding: 6px 8px;
-  background-color: ${colors.backgroundColor};
-  border: 0;
-  outline: 0;
-  cursor: pointer;
-  min-height: 38px;
+	display: flex;
+	flex-direction: row;
+	justify-content: ${({ hasIcon }) => (hasIcon ? 'space-between' : 'center')};
+	align-items: center;
+	padding: 6px 8px;
+	background-color: ${colors.backgroundColor};
+	border: 0;
+	outline: 0;
+	cursor: pointer;
+	min-height: 38px;
 
-  :hover {
-    background-color: #13133a;
-    transition: background-color 200ms ease-in;
-  }
-  :active {
-    background-color: #13133a;
-    transition: background-color 200ms ease-in;
-  }
+	:hover {
+		background-color: #13133a;
+		transition: background-color 200ms ease-in;
+	}
+	:active {
+		background-color: #13133a;
+		transition: background-color 200ms ease-in;
+	}
 `;
 
 const SelectorText = styled.span<{ hasIcon: boolean }>`
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 140%;
-  color: ${colors.lightBlue.primary};
-  ${({ hasIcon }) => {
-    return hasIcon
-      ? `margin-right: ${spacings.margin.big};`
-      : `margin: 0 ${spacings.margin.biggest};`;
-  }}
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 1rem;
+	line-height: 140%;
+	color: ${colors.lightBlue.primary};
+	${({ hasIcon }) => {
+		return hasIcon
+			? `margin-right: ${spacings.margin.big};`
+			: `margin: 0 ${spacings.margin.biggest};`;
+	}}
 `;