From 4503c3d36eb3c966aed29c7be9b8a090d9dfa5f9 Mon Sep 17 00:00:00 2001
From: Treycos <19551067+Treycos@users.noreply.github.com>
Date: Mon, 26 Aug 2024 02:20:52 +0200
Subject: [PATCH] Convert Button to TypeScript

(cherry picked from commit 63b4998c8e51d0d2b8b51133cbb1fd928394a7e6)

Closes #10345
---
 frontend/src/Components/Link/Button.js        | 54 -------------------
 frontend/src/Components/Link/Button.tsx       | 35 ++++++++++++
 .../src/Helpers/Props/{align.js => align.ts}  |  0
 3 files changed, 35 insertions(+), 54 deletions(-)
 delete mode 100644 frontend/src/Components/Link/Button.js
 create mode 100644 frontend/src/Components/Link/Button.tsx
 rename frontend/src/Helpers/Props/{align.js => align.ts} (100%)

diff --git a/frontend/src/Components/Link/Button.js b/frontend/src/Components/Link/Button.js
deleted file mode 100644
index cbe4691d4..000000000
--- a/frontend/src/Components/Link/Button.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { align, kinds, sizes } from 'Helpers/Props';
-import Link from './Link';
-import styles from './Button.css';
-
-class Button extends Component {
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      buttonGroupPosition,
-      kind,
-      size,
-      children,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Link
-        className={classNames(
-          className,
-          styles[kind],
-          styles[size],
-          buttonGroupPosition && styles[buttonGroupPosition]
-        )}
-        {...otherProps}
-      >
-        {children}
-      </Link>
-    );
-  }
-
-}
-
-Button.propTypes = {
-  className: PropTypes.string.isRequired,
-  buttonGroupPosition: PropTypes.oneOf(align.all),
-  kind: PropTypes.oneOf(kinds.all),
-  size: PropTypes.oneOf(sizes.all),
-  children: PropTypes.node
-};
-
-Button.defaultProps = {
-  className: styles.button,
-  kind: kinds.DEFAULT,
-  size: sizes.MEDIUM
-};
-
-export default Button;
diff --git a/frontend/src/Components/Link/Button.tsx b/frontend/src/Components/Link/Button.tsx
new file mode 100644
index 000000000..c512b3a90
--- /dev/null
+++ b/frontend/src/Components/Link/Button.tsx
@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import React from 'react';
+import { align, kinds, sizes } from 'Helpers/Props';
+import Link, { LinkProps } from './Link';
+import styles from './Button.css';
+
+export interface ButtonProps extends Omit<LinkProps, 'children' | 'size'> {
+  buttonGroupPosition?: Extract<
+    (typeof align.all)[number],
+    keyof typeof styles
+  >;
+  kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+  size?: Extract<(typeof sizes.all)[number], keyof typeof styles>;
+  children: Required<LinkProps['children']>;
+}
+
+export default function Button({
+  className = styles.button,
+  buttonGroupPosition,
+  kind = kinds.DEFAULT,
+  size = sizes.MEDIUM,
+  ...otherProps
+}: ButtonProps) {
+  return (
+    <Link
+      className={classNames(
+        className,
+        styles[kind],
+        styles[size],
+        buttonGroupPosition && styles[buttonGroupPosition]
+      )}
+      {...otherProps}
+    />
+  );
+}
diff --git a/frontend/src/Helpers/Props/align.js b/frontend/src/Helpers/Props/align.ts
similarity index 100%
rename from frontend/src/Helpers/Props/align.js
rename to frontend/src/Helpers/Props/align.ts