move move frontend to progress-test

app/javascript/components/Button/Button.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+const styleClasses = {
+  primary: "bg-primary-normal hover:bg-primary-dark text-white",
+  secondary: "bg-gray-200 hover:bg-gray-400 text-gray-800",
+  disabled: "bg-gray-200 text-gray-600 cursor-not-allowed shadow-none hover:shadow-none",
+  tertiary: "shadow-none hover:shadow-none drop-shadow-sm text-gray-900 hover:text-gray-600",
+}
+
+export type ButtonProps = {
+  type?: 'default' | 'primary' | 'tertiary';
+  className?: string;
+  children?: string | JSX.Element;
+  htmlType?: 'submit' | 'button' | 'reset';
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  disabled?: boolean
+}
+
+const ButtonBase: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
+  const {
+    type = 'default',
+    className = '',
+    htmlType = 'button',
+    onClick,
+    disabled,
+    children,
+    ...rest
+  } = props
+  const buttonRef = (ref as any) || React.createRef<HTMLElement>()
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
+    if (htmlType !== 'submit') {
+      e.preventDefault()
+    }
+
+    if (disabled || !onClick) return
+
+    onClick(e)
+  }
+
+  const extraClasses = () => {
+    if (disabled) return styleClasses.disabled
+
+    if (type === 'primary') return styleClasses.primary
+
+    if (type === 'tertiary') return styleClasses.tertiary
+
+    return styleClasses.secondary
+  }
+
+  return <button
+    {...rest}
+    type={htmlType}
+    disabled={disabled}
+    className={`transition duration-300 ease-in-out block text-center cursor-pointer p-2 px-8 rounded shadow-lg hover:shadow-lg ${extraClasses()} ${className}`}
+    onClick={handleClick}
+    ref={buttonRef}
+  >
+    {children}
+  </button>
+}
+
+export const Button = React.forwardRef<unknown, ButtonProps>(ButtonBase)

app/javascript/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";