From 81b1e0e05919eb368a66aef47adcf7738af76f29 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 11:47:06 +0200
Subject: refactor(components): rewrite Spinner component

* Message should be set as children
* Default message is no longer available (depending on use case, the
consumer might prefer aria-label instead)
* It is now possible to define the message position
---
 src/components/atoms/loaders/spinner/spinner.tsx | 42 ++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/atoms/loaders/spinner/spinner.tsx

(limited to 'src/components/atoms/loaders/spinner/spinner.tsx')

diff --git a/src/components/atoms/loaders/spinner/spinner.tsx b/src/components/atoms/loaders/spinner/spinner.tsx
new file mode 100644
index 0000000..6c6c23c
--- /dev/null
+++ b/src/components/atoms/loaders/spinner/spinner.tsx
@@ -0,0 +1,42 @@
+import type { FC, HTMLAttributes, ReactNode } from 'react';
+import type { Position } from '../../../../types';
+import styles from './spinner.module.scss';
+
+export type SpinnerProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  /**
+   * The loading message.
+   */
+  children?: ReactNode;
+  /**
+   * Define the position of the loading message if any.
+   *
+   * @default 'right'
+   */
+  position?: Exclude<Position, 'center'>;
+};
+
+/**
+ * Spinner component
+ *
+ * Render a loading message with animation.
+ */
+export const Spinner: FC<SpinnerProps> = ({
+  children,
+  className = '',
+  position = 'right',
+  ...props
+}) => {
+  const positionClass = styles[`wrapper--${position}`];
+  const wrapperClass = `${styles.wrapper} ${positionClass} ${className}`;
+
+  return (
+    <div {...props} className={wrapperClass}>
+      <div aria-hidden className={styles.icon}>
+        <div className={styles.icon__ball} />
+        <div className={styles.icon__ball} />
+        <div className={styles.icon__ball} />
+      </div>
+      <div className={styles.body}>{children}</div>
+    </div>
+  );
+};
-- 
cgit v1.2.3