Support ref and element attribute

src/components/Accordion/Accordion.spec.tsx

@@ -4,7 +4,7 @@ import Meta, { Id as IdStory } from './Accordion.stories';
 
 const IdTest = composeStory(IdStory, Meta);
 
-describe('Accorion', () => {
+describe('Accordion', () => {
   test('Add ids', async () => {
     render(<IdTest />);
 

src/components/Accordion/Accordion.stories.tsx

@@ -28,10 +28,9 @@ export const Small: Story = {
 };
 
 export const CustomDataAttribute: Story = {
-  render: (args) => <Accordion {...args}></Accordion>,
+  render: (args) => <Accordion data-test-id="some-id" {...args}></Accordion>,
   args: {
     ...defaultArgs,
-    ['data-test-id']: 'some-id',
   },
 };
 

src/components/Accordion/Accordion.tsx

@@ -2,9 +2,9 @@
 
 import { ArrowBDownIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
+import { ComponentPropsWithRef, forwardRef } from 'react';
 import styles from './Accordion.module.css';
-import { CustomDataAttributeProps } from '../../types/attributes';
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 export type Size = 'small' | 'medium';
 
@@ -22,10 +22,6 @@ type Props = {
    * @default medium
    */
   size?: Size;
-  /**
-   * ラッパーであるdetails要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定
-   */
-  id?: string;
   /**
    * 開閉をトリガーするsummary要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定
    */
@@ -34,16 +30,20 @@ type Props = {
    * 初期状態で開く
    */
   initialOpen?: boolean;
-} & CustomDataAttributeProps;
+} & Omit<ComponentPropsWithRef<'details'>, 'className'>;
+
+export const Accordion = forwardRef<HTMLDetailsElement, Props>(
+  ({ header, children, size = 'medium', id, buttonId, initialOpen, ...props }, ref) => {
+    return (
+      <details className={clsx(styles.container, styles[size])} id={id} {...props} open={initialOpen} ref={ref}>
+        <summary id={buttonId} className={styles.button}>
+          <span>{header}</span>
+          <ArrowBDownIcon aria-hidden className={styles.arrow} />
+        </summary>
+        <div className={styles.panel}>{children}</div>
+      </details>
+    );
+  },
+);
 
-export const Accordion: FC<Props> = ({ header, children, size = 'medium', id, buttonId, initialOpen, ...props }) => {
-  return (
-    <details className={clsx(styles.container, styles[size])} id={id} {...props} open={initialOpen}>
-      <summary id={buttonId} className={styles.button}>
-        <span>{header}</span>
-        <ArrowBDownIcon aria-hidden className={styles.arrow} />
-      </summary>
-      <div className={styles.panel}>{children}</div>
-    </details>
-  );
-};
+Accordion.displayName = 'Accordion';

src/components/ActionHalfModal/ActionHalfModal.spec.tsx

@@ -1,6 +1,8 @@
 import { composeStory } from '@storybook/react';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
+import { createRef } from 'react';
+import { ActionHalfModal } from './ActionHalfModal';
 import Meta, { WithId, CustomHeader, Default } from './ActionHalfModal.stories';
 
 const WithIdStory = composeStory(WithId, Meta);
@@ -51,4 +53,19 @@ describe('ActionHalfModal', () => {
     expect(dialogElement).toHaveAttribute('aria-labelledby');
     expect(dialogHeadingElement).toHaveAttribute('id', dialogElement.getAttribute('aria-labelledby'));
   });
+
+  test('receives ref', () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const handleClose = () => {};
+    const ref = createRef<HTMLDivElement>();
+
+    render(
+      <ActionHalfModal header="header" ref={ref} open onClose={handleClose}>
+        content
+      </ActionHalfModal>,
+    );
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('DIV');
+  });
 });

src/components/ActionHalfModal/ActionHalfModal.stories.tsx

@@ -124,6 +124,7 @@ export const NoCloseButton: Story = {
           Open Modal
         </button>
         <ActionHalfModal
+          data-test-id="some-id"
           onPrimaryAction={onClose}
           primaryActionLabel="確認"
           showClose={false}
@@ -136,7 +137,6 @@ export const NoCloseButton: Story = {
   },
   args: {
     ...defaultArgs,
-    [`data-test-id`]: 'some-id',
   },
 };
 

src/components/ActionHalfModal/ActionHalfModal.tsx

@@ -2,10 +2,9 @@
 
 import { Dialog, Transition } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react';
+import { ComponentPropsWithRef, forwardRef, Fragment, type ReactNode, useCallback, useRef } from 'react';
 import styles from './ActionHalfModal.module.css';
 import { VisuallyHidden } from '../../sharedComponents/VisuallyHidden/VisuallyHidden';
-import { CustomDataAttributeProps } from '../../types/attributes';
 import { opacityToClassName } from '../../utils/style';
 import { AllOrNone } from '../../utils/types';
 import { Button } from '../Button/Button';
@@ -100,124 +99,145 @@ type SecondaryActionProps = {
   secondaryActionLabel: string;
 };
 
-type Props = BaseProps & AllOrNone<PrimaryActionProps> & AllOrNone<SecondaryActionProps> & CustomDataAttributeProps;
+type Props = BaseProps &
+  AllOrNone<PrimaryActionProps> &
+  AllOrNone<SecondaryActionProps> &
+  Omit<ComponentPropsWithRef<'div'>, 'className'>;
 
-export const ActionHalfModal: FC<Props> = ({
-  children,
-  onClose,
-  onPrimaryAction,
-  onSecondaryAction,
-  header,
-  primaryActionLabel,
-  secondaryActionLabel,
-  primaryActionColor,
-  closeLabel = '閉じる',
-  overlayOpacity = 'normal',
-  showClose = true,
-  open = true,
-  isStatic = false,
-  fullscreen = false,
-  bodyScroll = true,
-  ariaLabelledby,
-  hero,
-  ...props
-}) => {
-  const opacityClassName = opacityToClassName(overlayOpacity);
+export const ActionHalfModal = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      onClose,
+      onPrimaryAction,
+      onSecondaryAction,
+      header,
+      primaryActionLabel,
+      secondaryActionLabel,
+      primaryActionColor,
+      closeLabel = '閉じる',
+      overlayOpacity = 'normal',
+      showClose = true,
+      open = true,
+      isStatic = false,
+      fullscreen = false,
+      bodyScroll = true,
+      ariaLabelledby,
+      hero,
+      ...props
+    },
+    ref,
+  ) => {
+    const opacityClassName = opacityToClassName(overlayOpacity);
 
-  const initialFocusRef = useRef(null);
+    const initialFocusRef = useRef(null);
 
-  const dialogRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (node !== null && header == null && ariaLabelledby != null) {
-        node.setAttribute('aria-labelledby', ariaLabelledby);
-      } else if (node !== null && header == null && ariaLabelledby == null) {
-        node.removeAttribute('aria-labelledby');
-      }
-    },
-    [ariaLabelledby, header],
-  );
+    const dialogRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        if (node !== null && header == null && ariaLabelledby != null) {
+          node.setAttribute('aria-labelledby', ariaLabelledby);
+        } else if (node !== null && header == null && ariaLabelledby == null) {
+          node.removeAttribute('aria-labelledby');
+        }
 
-  return (
-    <Transition show={open}>
-      <Dialog
-        ref={dialogRef}
-        static={isStatic}
-        onClose={onClose}
-        className={clsx(styles.modal, fullscreen && styles.fullscreen)}
-        initialFocus={initialFocusRef}
-        {...props}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter={styles.overlayEnter}
-          enterFrom={styles.overlayEnterFrom}
-          enterTo={styles.overlayEnterTo}
-          leave={styles.overlayLeave}
-          leaveFrom={styles.overlayLeaveFrom}
-          leaveTo={styles.overlayLeaveTo}
-        >
-          <Dialog.Overlay className={clsx(styles.overlay, styles[opacityClassName])} />
-        </Transition.Child>
-        <Transition.Child
-          as={Fragment}
-          enter={styles.panelEnter}
-          enterFrom={styles.panelEnterFrom}
-          enterTo={styles.panelEnterTo}
-          leave={styles.panelLeave}
-          leaveFrom={styles.panelLeaveFrom}
-          leaveTo={styles.panelLeaveTo}
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref != null) {
+          ref.current = node;
+        }
+      },
+      [ariaLabelledby, header, ref],
+    );
+
+    return (
+      <Transition show={open}>
+        <Dialog
+          ref={dialogRef}
+          static={isStatic}
+          onClose={onClose}
+          className={clsx(styles.modal, fullscreen && styles.fullscreen)}
+          initialFocus={initialFocusRef}
+          {...props}
         >
-          <div
-            className={clsx(styles.dialog, {
-              [styles.fullscreen]: fullscreen,
-              [styles.bodyScroll]: bodyScroll,
-            })}
+          <Transition.Child
+            as={Fragment}
+            enter={styles.overlayEnter}
+            enterFrom={styles.overlayEnterFrom}
+            enterTo={styles.overlayEnterTo}
+            leave={styles.overlayLeave}
+            leaveFrom={styles.overlayLeaveFrom}
+            leaveTo={styles.overlayLeaveTo}
+          >
+            <Dialog.Overlay className={clsx(styles.overlay, styles[opacityClassName])} />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter={styles.panelEnter}
+            enterFrom={styles.panelEnterFrom}
+            enterTo={styles.panelEnterTo}
+            leave={styles.panelLeave}
+            leaveFrom={styles.panelLeaveFrom}
+            leaveTo={styles.panelLeaveTo}
           >
-            {header === undefined ? (
-              <VisuallyHidden as="p" tabIndex={-1} ref={initialFocusRef}>
-                ダイアログ
-              </VisuallyHidden>
-            ) : null}
-            {hero !== undefined ? <div className={styles.hero}>{hero}</div> : null}
             <div
-              className={clsx(styles.mainContent, {
-                [styles.headerLess]: header === undefined && hero === undefined,
+              className={clsx(styles.dialog, {
                 [styles.fullscreen]: fullscreen,
+                [styles.bodyScroll]: bodyScroll,
               })}
             >
-              {header !== undefined ? (
-                <Dialog.Title tabIndex={-1} ref={initialFocusRef} className={styles.header}>
-                  {header}
-                </Dialog.Title>
+              {header === undefined ? (
+                <VisuallyHidden as="p" tabIndex={-1} ref={initialFocusRef}>
+                  ダイアログ
+                </VisuallyHidden>
               ) : null}
+              {hero !== undefined ? <div className={styles.hero}>{hero}</div> : null}
               <div
-                className={clsx(styles.body, {
+                className={clsx(styles.mainContent, {
+                  [styles.headerLess]: header === undefined && hero === undefined,
                   [styles.fullscreen]: fullscreen,
                 })}
               >
-                {children}
-              </div>
-              <div className={styles.buttonContainer}>
-                {onPrimaryAction && primaryActionLabel && (
-                  <Button block onClick={onPrimaryAction} aria-label={primaryActionLabel} variant={primaryActionColor}>
-                    {primaryActionLabel}
-                  </Button>
-                )}
-                {onSecondaryAction && secondaryActionLabel && (
-                  <Button block variant="secondary" onClick={onSecondaryAction} aria-label={secondaryActionLabel}>
-                    {secondaryActionLabel}
-                  </Button>
-                )}
-                {showClose && (
-                  <Button variant="text" onClick={onClose} aria-label={closeLabel}>
-                    {closeLabel}
-                  </Button>
-                )}
+                {header !== undefined ? (
+                  <Dialog.Title tabIndex={-1} ref={initialFocusRef} className={styles.header}>
+                    {header}
+                  </Dialog.Title>
+                ) : null}
+                <div
+                  className={clsx(styles.body, {
+                    [styles.fullscreen]: fullscreen,
+                  })}
+                >
+                  {children}
+                </div>
+                <div className={styles.buttonContainer}>
+                  {onPrimaryAction && primaryActionLabel && (
+                    <Button
+                      block
+                      onClick={onPrimaryAction}
+                      aria-label={primaryActionLabel}
+                      variant={primaryActionColor}
+                    >
+                      {primaryActionLabel}
+                    </Button>
+                  )}
+                  {onSecondaryAction && secondaryActionLabel && (
+                    <Button block variant="secondary" onClick={onSecondaryAction} aria-label={secondaryActionLabel}>
+                      {secondaryActionLabel}
+                    </Button>
+                  )}
+                  {showClose && (
+                    <Button variant="text" onClick={onClose} aria-label={closeLabel}>
+                      {closeLabel}
+                    </Button>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        </Transition.Child>
-      </Dialog>
-    </Transition>
-  );
-};
+          </Transition.Child>
+        </Dialog>
+      </Transition>
+    );
+  },
+);
+
+ActionHalfModal.displayName = 'ActionHalfModal';