aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons/button.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-09-26 18:43:11 +0200
committerArmand Philippot <git@armandphilippot.com>2023-10-24 12:25:00 +0200
commit388e687857345c85ee550cd5da472675e05a6ff5 (patch)
tree0f035a3cad57a75959c028949a57227a83d480e2 /src/components/atoms/buttons/button.tsx
parent70efcfeaa0603415dd992cb662d8efb960e6e49a (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.tsx77
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);