117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
import React from "react";
|
|
import classNames from "classnames";
|
|
import '../index.css'
|
|
import { StyleType } from "core/_variants";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component props */
|
|
/* -------------------------------------------------------------------------- */
|
|
type Props = {
|
|
emphasis?: StyleType | undefined,
|
|
disabled?:boolean,
|
|
iconed?: boolean,
|
|
} & Omit<React.ComponentPropsWithoutRef<"button">, "">
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Emphasis styles */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const buttonEnableHighEmphasis = `
|
|
bg-blue-500
|
|
hover:bg-blue-400
|
|
active:bg-blue-700
|
|
focus:shadow-lg shadow-blue-500
|
|
focus:outline outline-blue-400/10 outline-8`;
|
|
|
|
const buttonDisabledHighEmphasis =
|
|
`bg-gray-200
|
|
focus:outline-none`;
|
|
|
|
const buttonGeneralHighEmphasis = `
|
|
text-white
|
|
`
|
|
|
|
const buttonEnabledMediumEmphasis =
|
|
`text-blue-500
|
|
border-gray-500
|
|
active:border-blue-600
|
|
active:text-blue-600
|
|
hover:border-blue-400
|
|
hover:text-blue-400
|
|
focus:outline outline-blue-400/10 outline-8
|
|
focus:border-blue-600/70`;
|
|
|
|
|
|
const buttonDisabledMediumEmphasis =
|
|
`text-gray-200
|
|
border-gray-200
|
|
focus:outline-none`;
|
|
|
|
const buttonGeneralMediumEmphasis =
|
|
`bg-white
|
|
border`;
|
|
|
|
|
|
const buttonEnabledLowEmphasis =
|
|
`text-gray-900
|
|
hover:text-blue-400
|
|
active:text-blue-600
|
|
focus:bg-gray-50`;
|
|
|
|
const buttonDisabledLowEmphasis =
|
|
`text-gray-200`;
|
|
|
|
const buttonGenerealLowEmphasis =
|
|
`focus:outline-none
|
|
bg-transparent`;
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
export const Button = ({
|
|
emphasis ='high',
|
|
disabled = false,
|
|
iconed = false,
|
|
className,
|
|
children, ...props} : Props) => {
|
|
|
|
return(
|
|
<button
|
|
//TODO change on click event
|
|
onClick={!disabled ? () => alert('Click') : undefined}
|
|
|
|
className={classNames([
|
|
'text-center',
|
|
'px-4 py-2 text-[15px]',
|
|
'rounded',
|
|
{
|
|
'!cursor-default': disabled,
|
|
'transition-all': !disabled,
|
|
'transition duration-200':!disabled,
|
|
|
|
},
|
|
{ // Define high emphasis
|
|
[`${buttonEnableHighEmphasis}`]: !disabled && emphasis === 'high',
|
|
[`${buttonDisabledHighEmphasis}`]: disabled && emphasis === 'high',
|
|
[`${buttonGeneralHighEmphasis}`] : emphasis === 'high',
|
|
// Define medium emphasis
|
|
[`${buttonEnabledMediumEmphasis}`]: !disabled && emphasis === 'medium',
|
|
[`${buttonDisabledMediumEmphasis}`]: disabled && emphasis === 'medium',
|
|
[`${buttonGeneralMediumEmphasis}`]: emphasis === 'medium',
|
|
// Define low emphasis
|
|
[`${buttonEnabledLowEmphasis}`]: !disabled && emphasis === 'low',
|
|
[`${buttonDisabledLowEmphasis}`]: disabled && emphasis ==='low',
|
|
[`${buttonGenerealLowEmphasis}`]: emphasis === 'low',
|
|
|
|
},
|
|
className,
|
|
])}
|
|
{...props}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|