@ubie/vitals-ui-consumer 0.0.1

package/src/components/ActionHalfModal/ActionHalfModal.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { Dialog, DialogPanel, Transition, TransitionChild } from "@headlessui/react";
+import { clsx } from "clsx";
+import { type FC, Fragment, type ReactNode, useCallback, useRef } from "react";
+import styles from "./ActionHalfModal.module.css";
+import { useScrollable } from "../../hooks/useScrollable";
+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";
+import type { CSSMaxHeight } from "../../types/style";
+
+type Opacity = "normal" | "darker";
+
+type BaseProps = {
+  /**
+   * コンテンツとして表示する内容
+   */
+  children: ReactNode;
+  /**
+   * 閉じるアクションが実行された場合のコールバック
+   */
+  onClose: () => void;
+  /**
+   * ヘッダーに表示する見出しテキストまたはReactノード
+   */
+  header?: ReactNode;
+  /**
+   * プライマリーアクションボタンのカラースキーム
+   */
+  primaryActionColor?: "primary" | "alert";
+  /**
+   * 閉じるボタンのラベル
+   * @default 閉じる
+   */
+  closeLabel?: string;
+  /**
+   * オーバーレイの透過度
+   * @default normal
+   */
+  overlayOpacity?: Opacity;
+  /**
+   * 閉じるボタンを表示するかどうか
+   * @default true
+   */
+  showClose?: boolean;
+  /**
+   * モーダルを開くかどうか
+   * @default true
+   */
+  open?: boolean;
+  /**
+   * openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
+   */
+  isStatic?: boolean;
+  /**
+   * モーダルをフルスクリーンで表示するかどうか
+   */
+  fullscreen?: boolean;
+  /**
+   * ネイティブ要素のid属性。ページで固有のIDを指定
+   */
+  id?: string;
+  /**
+   * ネイティブのaria-labelledby属性。独自の見出しを実装する場合にダイアログとの紐づけに使用。ページで固有のIDを指定
+   */
+  ariaLabelledby?: string;
+  /**
+   * ヒーローエリア（見出しの更に上）に配置するコンテンツ
+   */
+  hero?: ReactNode;
+  /**
+   * ヘッダーを固定表示
+   */
+  stickyHeader?: boolean;
+  /**
+   * フッターを固定表示
+   */
+  stickyFooter?: boolean;
+  /**
+   * モーダルの最大の高さ
+   * @default calc(100% - 24px)
+   */
+  maxHeight?: CSSMaxHeight;
+};
+
+type PrimaryActionProps = {
+  /**
+   * プライマリーアクションボタンが実行された場合のコールバック
+   */
+  onPrimaryAction: () => void;
+  /**
+   * プライマリーアクションボタンのラベル
+   */
+  primaryActionLabel: string;
+};
+
+type SecondaryActionProps = {
+  /**
+   * セカンダリーアクションボタンが実行された場合のコールバック
+   */
+  onSecondaryAction: () => void;
+  /**
+   * セカンダリーアクションボタンのラベル
+   */
+  secondaryActionLabel: string;
+};
+
+type Props = BaseProps &
+  AllOrNone<PrimaryActionProps> &
+  AllOrNone<SecondaryActionProps> &
+  CustomDataAttributeProps;
+
+export const ActionHalfModal: FC<Props> = ({
+  children,
+  onClose,
+  onPrimaryAction,
+  onSecondaryAction,
+  header,
+  primaryActionLabel,
+  secondaryActionLabel,
+  primaryActionColor,
+  closeLabel = "閉じる",
+  overlayOpacity = "normal",
+  showClose = true,
+  open = true,
+  isStatic = false,
+  fullscreen = false,
+  ariaLabelledby,
+  hero,
+  stickyHeader = false,
+  stickyFooter = false,
+  maxHeight = "calc(100% - 24px)",
+  ...props
+}) => {
+  const opacityClassName = opacityToClassName(overlayOpacity);
+
+  const initialFocusRef = useRef(null);
+
+  const dialogRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node !== null && (header == null || header === undefined) && ariaLabelledby != null) {
+        node.setAttribute("aria-labelledby", ariaLabelledby);
+      } else if (
+        node !== null &&
+        (header == null || header === undefined) &&
+        ariaLabelledby == null
+      ) {
+        node.removeAttribute("aria-labelledby");
+      }
+    },
+    [ariaLabelledby, header],
+  );
+
+  const { scrollContainerRef, canScrollUp, canScrollDown } = useScrollable();
+
+  return (
+    <Transition show={open}>
+      <Dialog
+        ref={dialogRef}
+        static={isStatic}
+        onClose={onClose}
+        className={clsx(styles.modal, fullscreen && styles.fullscreen)}
+        initialFocus={initialFocusRef}
+        {...props}
+      >
+        <TransitionChild
+          as={Fragment}
+          enter={styles.overlayEnter}
+          enterFrom={styles.overlayEnterFrom}
+          enterTo={styles.overlayEnterTo}
+          leave={styles.overlayLeave}
+          leaveFrom={styles.overlayLeaveFrom}
+          leaveTo={styles.overlayLeaveTo}
+        >
+          <div className={clsx(styles.overlay, styles[opacityClassName])} />
+        </TransitionChild>
+        <TransitionChild
+          as={Fragment}
+          enter={styles.panelEnter}
+          enterFrom={styles.panelEnterFrom}
+          enterTo={styles.panelEnterTo}
+          leave={styles.panelLeave}
+          leaveFrom={styles.panelLeaveFrom}
+          leaveTo={styles.panelLeaveTo}
+        >
+          <DialogPanel
+            className={clsx(styles.dialog, {
+              [styles.fullscreen]: fullscreen,
+            })}
+            style={{ maxHeight }}
+          >
+            {header === undefined || header === null ? (
+              <VisuallyHidden as="p" tabIndex={-1} ref={initialFocusRef}>
+                ダイアログ
+              </VisuallyHidden>
+            ) : null}
+            <div className={styles.scrollContainer} ref={scrollContainerRef}>
+              <div
+                className={clsx(styles.mainContent, {
+                  [styles.headerLess]:
+                    (header === undefined || header === null) && hero === undefined,
+                  [styles.fullscreen]: fullscreen,
+                })}
+              >
+                {hero !== undefined ? <div className={styles.hero}>{hero}</div> : null}
+                {header !== undefined && header !== null ? (
+                  <Dialog.Title
+                    tabIndex={-1}
+                    ref={initialFocusRef}
+                    className={clsx(
+                      styles.header,
+                      stickyHeader && styles.sticky,
+                      canScrollUp && styles.canScroll,
+                    )}
+                  >
+                    {header}
+                  </Dialog.Title>
+                ) : null}
+                <div
+                  className={clsx(styles.body, {
+                    [styles.fullscreen]: fullscreen,
+                  })}
+                >
+                  {children}
+                </div>
+                <div
+                  className={clsx(
+                    styles.buttonContainer,
+                    stickyFooter && styles.sticky,
+                    canScrollDown && styles.canScroll,
+                  )}
+                >
+                  {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>
+          </DialogPanel>
+        </TransitionChild>
+      </Dialog>
+    </Transition>
+  );
+};

package/src/components/ActionModal/ActionModal.module.css

@@ -0,0 +1,145 @@
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+}
+
+.normalOverlay {
+  background: rgb(0 0 0 / 50%);
+}
+
+.darkerOverlay {
+  background: rgb(0 0 0 / 80%);
+}
+
+.dialog {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 32px);
+  max-width: 600px;
+  max-height: calc(100% - 48px);
+  margin: 0 auto;
+  overflow: hidden;
+  background: #fff;
+  border-radius: var(--radius-lg);
+}
+
+.dialog.fixedHeight {
+  height: calc(100% - 48px);
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.mainContent {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.mainContent.fixedHeight {
+  min-height: 100%;
+}
+
+.mainContent.headerLess {
+  padding-top: var(--size-spacing-xl);
+}
+
+.header {
+  padding: var(--size-spacing-lg) var(--size-spacing-md);
+  font-size: var(--text-heading-xs-size);
+  font-weight: bold;
+  line-height: var(--text-heading-xs-line);
+  text-align: center;
+  white-space: pre-wrap;
+  background-color: var(--color-ubie-white);
+
+  /* May receive focus in the initial display. */
+  outline: none;
+}
+
+.header.sticky {
+  position: sticky;
+  top: 0;
+
+  /* Ensure sticky header appears above content that might overlap it (e.g., with position or transform) */
+  z-index: 1;
+}
+
+.header.sticky.canScroll {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.body {
+  /*
+   * Ensure the header always appears in front of body content.
+   * - Place header and body in the same stacking context
+   * - Set body's z-index lower than header's z-index
+   * This prevents the header from being hidden by body content,
+   * regardless of how high z-index values are specified within the body.
+   */
+  z-index: 0;
+  padding-right: var(--size-spacing-md);
+  padding-left: var(--size-spacing-md);
+}
+
+.body.fixedHeight {
+  flex-grow: 1;
+  min-height: 400px;
+  overflow: hidden;
+}
+
+.buttonContainer {
+  display: grid;
+  gap: var(--size-spacing-md);
+  padding: var(--size-spacing-lg) var(--size-spacing-md) var(--size-spacing-md);
+  background-color: var(--color-ubie-white);
+}
+
+.buttonContainer.sticky {
+  position: sticky;
+  bottom: 0;
+}
+
+.buttonContainer.sticky.canScroll {
+  border-top: 1px solid var(--color-border);
+}
+
+.panelEnter {
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
+  transition-property: opacity;
+}
+
+.panelEnterFrom {
+  opacity: 0;
+}
+
+.panelEnterTo {
+  opacity: 1;
+}
+
+.panelLeave {
+  transition-timing-function: ease-in;
+  transition-duration: 200ms;
+}
+
+.panelLeaveFrom {
+  opacity: 1;
+}
+
+.panelLeaveTo {
+  opacity: 0;
+}

package/src/components/ActionModal/ActionModal.spec.tsx

@@ -0,0 +1,57 @@
+import { composeStory } from "@storybook/react-vite";
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import Meta, { WithId, CustomHeader, Default } from "./ActionModal.stories";
+
+const WithIdStory = composeStory(WithId, Meta);
+const CustomHeaderStory = composeStory(CustomHeader, Meta);
+const DefaultStory = composeStory(Default, Meta);
+
+const user = userEvent.setup();
+
+describe("ActionModal", () => {
+  test("Add id", async () => {
+    render(<WithIdStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogElement = await screen.findByRole("dialog");
+
+    expect(dialogElement).toHaveAttribute("id", "dialog-id");
+  });
+
+  test("Custom heading and dialogue can be tied together", async () => {
+    render(<CustomHeaderStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogElement = await screen.findByRole("dialog");
+    const dialogHeadingElement = await screen.findByRole("heading");
+
+    expect(dialogElement).toHaveAttribute("aria-labelledby", "header-id");
+    expect(dialogHeadingElement).toHaveAttribute("id", "header-id");
+  });
+
+  test("If no header prop is present, text is inserted that serves as the default heading", async () => {
+    render(<CustomHeaderStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogHeadingElement = await screen.findByText("ダイアログ");
+
+    expect(document.activeElement).toEqual(dialogHeadingElement);
+  });
+
+  test("header prop can be used to automatically link to a dialog", async () => {
+    render(<DefaultStory />);
+
+    const dialogElement = await screen.findByRole("dialog");
+    const dialogHeadingElement = await screen.findByRole("heading");
+
+    expect(dialogElement).toHaveAttribute("aria-labelledby");
+    expect(dialogHeadingElement).toHaveAttribute(
+      "id",
+      dialogElement.getAttribute("aria-labelledby"),
+    );
+  });
+});