feat: add id property to for all components

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}

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>

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,15 +23,38 @@ export type ButtonProps = {
    * Callback to call when the button loses focus.
    */
   onBlur?: HTMLButtonProps["onBlur"];
+
+  /**
+   * Button content.
+   */
+  children: ReactNode;
 } & CommonComponentProps;
 
 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>
   );
 }

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,
+  );
 }

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;

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>
+  );
 }

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>
   );

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>
   );

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,
   );
 }

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;
 };