refactor(components): rewrite Branding component

The component should only be responsible of the layout for the logo,
the name and the optional baseline. Also, the homepage url could
be different from `/` so the consumer should give the right url.

1 files changed, 57 insertions, 0 deletions

diff --git a/src/components/molecules/branding/branding.tsx b/src/components/molecules/branding/branding.tsx
new file mode 100644
index 0000000..bb88a04
--- /dev/null
+++ b/src/components/molecules/branding/branding.tsx
@@ -0,0 +1,57 @@
+import {
+  type HTMLAttributes,
+  type ForwardRefRenderFunction,
+  forwardRef,
+  type ReactElement,
+} from 'react';
+import styles from './branding.module.scss';
+import { Link } from 'src/components/atoms';
+
+export type BrandingProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  /**
+   * The brand baseline.
+   */
+  baseline?: ReactElement | null;
+  /**
+   * The brand logo.
+   *
+   * The logo size should not exceed ~200px.
+   */
+  logo: ReactElement;
+  /**
+   * The brand name.
+   */
+  name: ReactElement;
+  /**
+   * The homepage url if you want to wrap the name with a link.
+   */
+  url?: string;
+};
+
+const BrandingWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  BrandingProps
+> = ({ className = '', baseline, logo, name, url, ...props }, ref) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+
+  return (
+    <div {...props} className={wrapperClass} ref={ref}>
+      {logo}
+      {url ? (
+        <Link className={styles.link} href={url}>
+          {name}
+        </Link>
+      ) : (
+        name
+      )}
+      {baseline}
+    </div>
+  );
+};
+
+/**
+ * Branding component
+ *
+ * Render the branding logo, title and optional baseline.
+ */
+export const Branding = forwardRef(BrandingWithRef);