From 2e82960ae63a530165d23d80ba7e95c0df64700f Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Sat, 2 Jul 2022 21:20:53 +0200
Subject: [PATCH] ButtonVariant ButtonSize

---
 src/button/Button.tsx     | 71 ++++++++++++++++++++++++++++++++++-----
 src/button/CopyButton.tsx |  4 +--
 src/button/LinkButton.tsx | 11 ++++--
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 3c2bc82..2f7ba3a 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -31,6 +31,19 @@ import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { TooltipTrigger } from "../Tooltip";
 
+export type ButtonVariant =
+  | "default"
+  | "toolbar"
+  | "toolbarSecondary"
+  | "icon"
+  | "secondary"
+  | "copy"
+  | "secondaryCopy"
+  | "iconCopy"
+  | "secondaryHangup"
+  | "dropdown"
+  | "link";
+
 export const variantToClassName = {
   default: [styles.button],
   toolbar: [styles.toolbarButton],
@@ -45,12 +58,14 @@ export const variantToClassName = {
   link: [styles.linkButton],
 };
 
-export const sizeToClassName = {
+export type ButtonSize = "lg";
+
+export const sizeToClassName: { lg: string[] } = {
   lg: [styles.lg],
 };
 interface Props {
-  variant: string;
-  size: number;
+  variant: ButtonVariant;
+  size: ButtonSize;
   on: () => void;
   off: () => void;
   iconStyle: string;
@@ -113,7 +128,13 @@ export const Button = forwardRef<HTMLAnchorElement, Props>(
   }
 );
 
-export function MicButton({ muted, ...rest }) {
+export function MicButton({
+  muted,
+  ...rest
+}: {
+  muted: boolean;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbar" {...rest} off={muted}>
@@ -124,7 +145,13 @@ export function MicButton({ muted, ...rest }) {
   );
 }
 
-export function VideoButton({ muted, ...rest }) {
+export function VideoButton({
+  muted,
+  ...rest
+}: {
+  muted: boolean;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbar" {...rest} off={muted}>
@@ -135,7 +162,15 @@ export function VideoButton({ muted, ...rest }) {
   );
 }
 
-export function ScreenshareButton({ enabled, className, ...rest }) {
+export function ScreenshareButton({
+  enabled,
+  className,
+  ...rest
+}: {
+  enabled: boolean;
+  className: string;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbarSecondary" {...rest} on={enabled}>
@@ -146,7 +181,13 @@ export function ScreenshareButton({ enabled, className, ...rest }) {
   );
 }
 
-export function HangupButton({ className, ...rest }) {
+export function HangupButton({
+  className,
+  ...rest
+}: {
+  className: string;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button
@@ -161,7 +202,13 @@ export function HangupButton({ className, ...rest }) {
   );
 }
 
-export function SettingsButton({ className, ...rest }) {
+export function SettingsButton({
+  className,
+  ...rest
+}: {
+  className: string;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbar" {...rest}>
@@ -172,7 +219,13 @@ export function SettingsButton({ className, ...rest }) {
   );
 }
 
-export function InviteButton({ className, ...rest }) {
+export function InviteButton({
+  className,
+  ...rest
+}: {
+  className: string;
+  [index: string]: unknown;
+}) {
   return (
     <TooltipTrigger>
       <Button variant="toolbar" {...rest}>
diff --git a/src/button/CopyButton.tsx b/src/button/CopyButton.tsx
index 257ac96..480cd44 100644
--- a/src/button/CopyButton.tsx
+++ b/src/button/CopyButton.tsx
@@ -19,13 +19,13 @@ import useClipboard from "react-use-clipboard";
 
 import { ReactComponent as CheckIcon } from "../icons/Check.svg";
 import { ReactComponent as CopyIcon } from "../icons/Copy.svg";
-import { Button } from "./Button";
+import { Button, ButtonVariant } from "./Button";
 
 interface Props {
   value: string;
   children: JSX.Element;
   className: string;
-  variant: string;
+  variant: ButtonVariant;
   copiedMessage: string;
 }
 export function CopyButton({
diff --git a/src/button/LinkButton.tsx b/src/button/LinkButton.tsx
index b96f461..0ed0cb1 100644
--- a/src/button/LinkButton.tsx
+++ b/src/button/LinkButton.tsx
@@ -18,11 +18,16 @@ import React from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 
-import { variantToClassName, sizeToClassName } from "./Button";
+import {
+  variantToClassName,
+  sizeToClassName,
+  ButtonVariant,
+  ButtonSize,
+} from "./Button";
 interface Props {
   className: string;
-  variant: string;
-  size: number;
+  variant: ButtonVariant;
+  size: ButtonSize;
   children: JSX.Element;
   [index: string]: unknown;
 }