diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-26 18:43:11 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | 388e687857345c85ee550cd5da472675e05a6ff5 (patch) | |
| tree | 0f035a3cad57a75959c028949a57227a83d480e2 /src/components/atoms/buttons/button.tsx | |
| parent | 70efcfeaa0603415dd992cb662d8efb960e6e49a (diff) | |
refactor(components): rewrite Button and ButtonLink components
Both:
* move styles to Sass placeholders
Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)
ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop
Diffstat (limited to 'src/components/atoms/buttons/button.tsx')
| -rw-r--r-- | src/components/atoms/buttons/button.tsx | 77 |
1 files changed, 0 insertions, 77 deletions
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx deleted file mode 100644 index 6ef5775..0000000 --- a/src/components/atoms/buttons/button.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { - ButtonHTMLAttributes, - forwardRef, - ForwardRefRenderFunction, - ReactNode, -} from 'react'; -import styles from './buttons.module.scss'; - -export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & { - /** - * The button body. - */ - children: ReactNode; - /** - * Button state. - * - * @default false - */ - disabled?: boolean; - /** - * Button kind. - * - * @default 'secondary' - */ - kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral'; - /** - * Button shape. - * - * @default 'rectangle' - */ - shape?: 'circle' | 'rectangle' | 'square' | 'initial'; - /** - * Button type attribute. - * - * @default 'button' - */ - type?: 'button' | 'reset' | 'submit'; -}; - -const ButtonWithRef: ForwardRefRenderFunction< - HTMLButtonElement, - ButtonProps -> = ( - { - className = '', - children, - disabled = false, - kind = 'secondary', - shape = 'rectangle', - type = 'button', - ...props - }, - ref -) => { - const kindClass = styles[`btn--${kind}`]; - const shapeClass = styles[`btn--${shape}`]; - const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`; - - return ( - <button - {...props} - className={btnClass} - disabled={disabled} - ref={ref} - type={type} - > - {children} - </button> - ); -}; - -/** - * Button component - * - * Use a button as call to action. - */ -export const Button = forwardRef(ButtonWithRef); |
