From b7f51fde6796c3b78b86ac840bc34d2191d3d1e2 Mon Sep 17 00:00:00 2001
From: Joonas Tiala <joonas.tiala@gmail.com>
Date: Thu, 31 Aug 2023 21:12:10 +0300
Subject: [PATCH] feat: add id property to for all components

---
 .../react/src/components/Anchor/Anchor.tsx    |  2 ++
 .../src/components/Blockquote/Blockquote.tsx  |  2 ++
 .../react/src/components/Button/Button.tsx    | 32 +++++++++++++++----
 .../react/src/components/Heading/Heading.tsx  |  8 +++--
 packages/react/src/components/List/List.tsx   |  8 +++--
 .../react/src/components/List/ListItem.tsx    |  8 +++--
 .../src/components/Paragraph/Paragraph.tsx    |  4 +--
 packages/react/src/components/Stack/Stack.tsx |  3 +-
 packages/react/src/components/Text/Text.tsx   | 12 +++++--
 packages/utils/src/components.ts              |  8 ++++-
 10 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/components/Anchor/Anchor.tsx b/packages/react/src/components/Anchor/Anchor.tsx
index 00a2f34..5a8938b 100644
--- a/packages/react/src/components/Anchor/Anchor.tsx
+++ b/packages/react/src/components/Anchor/Anchor.tsx
@@ -87,6 +87,7 @@ export function Anchor({
   onTouchStart,
   onTouchEnd,
   children,
+  id,
   testId,
 }: AnchorProps) {
   const openInNewTab = target === "_blank";
@@ -107,6 +108,7 @@ export function Anchor({
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
       className={className}
+      id={id}
       data-testid={testId}
     >
       {children}
diff --git a/packages/react/src/components/Blockquote/Blockquote.tsx b/packages/react/src/components/Blockquote/Blockquote.tsx
index 110b3f1..b26c766 100644
--- a/packages/react/src/components/Blockquote/Blockquote.tsx
+++ b/packages/react/src/components/Blockquote/Blockquote.tsx
@@ -36,12 +36,14 @@ export function Blockquote({
   author,
   source,
   children,
+  id,
   testId,
 }: BlockquoteProps) {
   return (
     <blockquote
       cite={cite}
       className={blockquoteClassName}
+      id={id}
       data-testid={testId}
     >
       <div className={quoteClassName}>{children}</div>
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 138c595..a1986bb 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -4,11 +4,6 @@ import { ButtonHTMLAttributes, ReactNode } from "react";
 type HTMLButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ButtonProps = {
-  /**
-   * Button content.
-   */
-  children: ReactNode;
-
   /**
    * Type of the button.
    */
@@ -28,6 +23,11 @@ export type ButtonProps = {
    * Callback to call when the button loses focus.
    */
   onBlur?: HTMLButtonProps["onBlur"];
+
+  /**
+   * Button content.
+   */
+  children: ReactNode;
 } & CommonComponentProps;
 
 const className = cn("button");
@@ -35,8 +35,26 @@ const className = cn("button");
 /**
  * A clickable UI element commonly used to trigger actions, such as submitting a form.
  */
-export function Button({ type = "button", testId, ...rest }: ButtonProps) {
+export function Button({
+  type = "button",
+  onClick,
+  onFocus,
+  onBlur,
+  children,
+  id,
+  testId,
+}: ButtonProps) {
   return (
-    <button type={type} {...rest} className={className} data-testid={testId} />
+    <button
+      type={type}
+      onClick={onClick}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      className={className}
+      id={id}
+      data-testid={testId}
+    >
+      {children}
+    </button>
   );
 }
diff --git a/packages/react/src/components/Heading/Heading.tsx b/packages/react/src/components/Heading/Heading.tsx
index ef26fba..ac3e8b0 100644
--- a/packages/react/src/components/Heading/Heading.tsx
+++ b/packages/react/src/components/Heading/Heading.tsx
@@ -20,8 +20,12 @@ const className = cn("heading");
 /**
  * Display a section heading.
  */
-export function Heading({ level, children, testId }: HeadingProps) {
+export function Heading({ level, children, id, testId }: HeadingProps) {
   const element = "h" + level;
 
-  return createElement(element, { className, "data-testid": testId }, children);
+  return createElement(
+    element,
+    { className, id, "data-testid": testId },
+    children,
+  );
 }
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index de068a5..de306a5 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -24,10 +24,14 @@ const className = cn("list");
 /**
  * Display a list of items.
  */
-export function List({ type, children, testId }: ListProps) {
+export function List({ type, children, id, testId }: ListProps) {
   const element = type === "ordered" ? "ol" : "ul";
 
-  return createElement(element, { className, "data-testid": testId }, children);
+  return createElement(
+    element,
+    { className, id, "data-testid": testId },
+    children,
+  );
 }
 
 List.Item = ListItem;
diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx
index d6934b7..c742b5c 100644
--- a/packages/react/src/components/List/ListItem.tsx
+++ b/packages/react/src/components/List/ListItem.tsx
@@ -11,6 +11,10 @@ export type ListItemProps = {
 /**
  * Display a list item.
  */
-export function ListItem({ children, testId }: ListItemProps) {
-  return <li data-testid={testId}>{children}</li>;
+export function ListItem({ children, id, testId }: ListItemProps) {
+  return (
+    <li id={id} data-testid={testId}>
+      {children}
+    </li>
+  );
 }
diff --git a/packages/react/src/components/Paragraph/Paragraph.tsx b/packages/react/src/components/Paragraph/Paragraph.tsx
index 21966c7..3922666 100644
--- a/packages/react/src/components/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Paragraph/Paragraph.tsx
@@ -13,9 +13,9 @@ const className = cn("paragraph");
 /**
  * Display a text paragraph.
  */
-export function Paragraph({ children, testId }: ParagraphProps) {
+export function Paragraph({ children, id, testId }: ParagraphProps) {
   return (
-    <p className={className} data-testid={testId}>
+    <p className={className} id={id} data-testid={testId}>
       {children}
     </p>
   );
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 39c1099..55b7979 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -23,6 +23,7 @@ const horizontalClassName = cn("stack-horizontal");
 export function Stack({
   direction = "vertical",
   children,
+  id,
   testId,
 }: StackProps) {
   const classNames = [
@@ -31,7 +32,7 @@ export function Stack({
   ].join(" ");
 
   return (
-    <div className={classNames} data-testid={testId}>
+    <div className={classNames} id={id} data-testid={testId}>
       {children}
     </div>
   );
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index c500683..15da2b0 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -125,10 +125,18 @@ const className = cn("text");
 /**
  * Display inline text content with different styles.
  */
-export function Text({ type, children, testId, ...rest }: TextProps) {
+export function Text({
+  type,
+  title,
+  cite,
+  dateTime,
+  children,
+  id,
+  testId,
+}: TextProps) {
   return createElement(
     type || "span",
-    { className, ...rest, "data-testid": testId },
+    { className, title, cite, id, dateTime, "data-testid": testId },
     children,
   );
 }
diff --git a/packages/utils/src/components.ts b/packages/utils/src/components.ts
index 33aaaaf..4212be3 100644
--- a/packages/utils/src/components.ts
+++ b/packages/utils/src/components.ts
@@ -1,7 +1,13 @@
 export type CommonComponentProps = {
+  /**
+   * Unique identifier.
+   */
+  id?: string;
+
   /**
    * Provide `data-testid` attribute for the component to be used with testing tools.
-   * While the `testId` is a useful way for targeting the component, it should be used as a last resort. Whenever possible, use other attributes or selectors that have semantic meaning, such as `id` or `name`.
+   * While the `testId` is a useful way for targeting the component, it should be used as a last resort.
+   * Whenever possible, use other attributes or selectors that have semantic meaning, such as `id` or `name`.
    */
   testId?: string;
 };