From f861e6a269ba9f62700776d3cd13b644a9e836d4 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 20 Sep 2023 16:38:54 +0200 Subject: refactor: use named export for everything except pages Next expect a default export for pages so only those components should use default exports. Everything else should use named exports to reduce the number of import statements. --- src/components/atoms/buttons/button.tsx | 58 +++++++++++++++------------------ 1 file changed, 27 insertions(+), 31 deletions(-) (limited to 'src/components/atoms/buttons/button.tsx') diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx index fecbcfd..6ef5775 100644 --- a/src/components/atoms/buttons/button.tsx +++ b/src/components/atoms/buttons/button.tsx @@ -1,56 +1,46 @@ import { + ButtonHTMLAttributes, forwardRef, ForwardRefRenderFunction, - MouseEventHandler, ReactNode, } from 'react'; import styles from './buttons.module.scss'; -export type ButtonProps = { - /** - * Button accessible label. - */ - 'aria-label'?: string; - /** - * Indicates the current "pressed" state of a toggle button. - */ - 'aria-pressed'?: boolean | 'mixed'; +export type ButtonProps = ButtonHTMLAttributes & { /** * The button body. */ children: ReactNode; /** - * Set additional classnames to the button wrapper. - */ - className?: string; - /** - * Button state. Default: false. + * Button state. + * + * @default false */ disabled?: boolean; /** - * Button kind. Default: secondary. + * Button kind. + * + * @default 'secondary' */ kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral'; /** - * A callback function to handle click. - */ - onClick?: MouseEventHandler; - /** - * Button shape. Default: rectangle. + * Button shape. + * + * @default 'rectangle' */ shape?: 'circle' | 'rectangle' | 'square' | 'initial'; /** - * Button type attribute. Default: button. + * Button type attribute. + * + * @default 'button' */ type?: 'button' | 'reset' | 'submit'; }; -/** - * Button component - * - * Use a button as call to action. - */ -const Button: ForwardRefRenderFunction = ( +const ButtonWithRef: ForwardRefRenderFunction< + HTMLButtonElement, + ButtonProps +> = ( { className = '', children, @@ -64,18 +54,24 @@ const Button: ForwardRefRenderFunction = ( ) => { const kindClass = styles[`btn--${kind}`]; const shapeClass = styles[`btn--${shape}`]; + const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`; return ( ); }; -export default forwardRef(Button); +/** + * Button component + * + * Use a button as call to action. + */ +export const Button = forwardRef(ButtonWithRef); -- cgit v1.2.3