From 388e687857345c85ee550cd5da472675e05a6ff5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Sep 2023 18:43:11 +0200
Subject: 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
---
 .../atoms/buttons/button-link/button-link.tsx      | 67 ++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/atoms/buttons/button-link/button-link.tsx

(limited to 'src/components/atoms/buttons/button-link/button-link.tsx')

diff --git a/src/components/atoms/buttons/button-link/button-link.tsx b/src/components/atoms/buttons/button-link/button-link.tsx
new file mode 100644
index 0000000..f8bbadc
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.tsx
@@ -0,0 +1,67 @@
+import Link from 'next/link';
+import type { AnchorHTMLAttributes, FC, ReactNode } from 'react';
+import styles from './button-link.module.scss';
+
+export type ButtonLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'href'
+> & {
+  /**
+   * The button link body.
+   */
+  children: ReactNode;
+  /**
+   * True if it is an external link.
+   *
+   * @default false
+   */
+  isExternal?: boolean;
+  /**
+   * Define the button kind.
+   *
+   * @default 'secondary'
+   */
+  kind?: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * Define the button shape.
+   *
+   * @default 'rectangle'
+   */
+  shape?: 'circle' | 'rectangle' | 'square';
+  /**
+   * Define an URL or anchor as target.
+   */
+  to: string;
+};
+
+/**
+ * ButtonLink component
+ *
+ * Use a button-like link as call to action.
+ */
+export const ButtonLink: FC<ButtonLinkProps> = ({
+  children,
+  className = '',
+  kind = 'secondary',
+  shape = 'rectangle',
+  isExternal = false,
+  rel = '',
+  to,
+  ...props
+}) => {
+  const kindClass = styles[`btn--${kind}`];
+  const shapeClass = styles[`btn--${shape}`];
+  const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`;
+  const linkRel =
+    isExternal && !rel.includes('external') ? `external ${rel}` : rel;
+
+  return isExternal ? (
+    <a {...props} className={btnClass} href={to} rel={linkRel}>
+      {children}
+    </a>
+  ) : (
+    <Link {...props} className={btnClass} href={to} rel={rel}>
+      {children}
+    </Link>
+  );
+};
-- 
cgit v1.2.3