@ubie/vitals-ui-consumer 0.0.1

package/src/components/MessageHalfModal/MessageHalfModal.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
+import { clsx } from "clsx";
+import { FC, Fragment, PropsWithChildren, ReactNode, useCallback, useRef } from "react";
+import styles from "./MessageHalfModal.module.css";
+import { useScrollable } from "../../hooks/useScrollable";
+import { VisuallyHidden } from "../../sharedComponents/VisuallyHidden/VisuallyHidden";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { opacityToClassName } from "../../utils/style";
+import { Button } from "../Button/Button";
+
+type Opacity = "normal" | "darker";
+
+type BaseProps = {
+  /**
+   * 閉じるアクションが実行された場合のコールバック
+   */
+  onClose: () => void;
+  /**
+   * ヘッダーに表示する見出しテキスト
+   */
+  header?: string;
+  /**
+   * 閉じるボタンのラベル
+   * @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;
+  /**
+   * ヘッダーを固定表示
+   * heroが指定されている場合は無効
+   */
+  stickyHeader?: boolean;
+  /**
+   * フッターを固定表示
+   */
+  stickyFooter?: boolean;
+} & CustomDataAttributeProps;
+
+type Props = BaseProps;
+
+export const MessageHalfModal: FC<PropsWithChildren<Props>> = ({
+  children,
+  onClose,
+  header,
+  closeLabel = "閉じる",
+  overlayOpacity = "normal",
+  showClose = true,
+  open = true,
+  isStatic = false,
+  fullscreen = false,
+  ariaLabelledby,
+  hero,
+  stickyHeader = false,
+  stickyFooter = false,
+  ...otherProps
+}) => {
+  const opacityClassName = opacityToClassName(overlayOpacity);
+
+  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 { scrollContainerRef, canScrollUp, canScrollDown } = useScrollable();
+
+  return (
+    <Transition show={open}>
+      <Dialog
+        ref={dialogRef}
+        static={isStatic}
+        onClose={onClose}
+        className={clsx(styles.modal, fullscreen && styles.fullscreen)}
+        initialFocus={initialFocusRef}
+        {...otherProps}
+      >
+        <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,
+            })}
+          >
+            {header === undefined ? (
+              <VisuallyHidden as="p" tabIndex={-1} ref={initialFocusRef}>
+                ダイアログ
+              </VisuallyHidden>
+            ) : null}
+            <div className={styles.scrollContainer} ref={scrollContainerRef}>
+              <div
+                className={clsx(styles.mainContent, {
+                  [styles.headerLess]: header === undefined && hero === undefined,
+                  [styles.fullscreen]: fullscreen,
+                })}
+              >
+                {hero !== undefined ? <div className={styles.hero}>{hero}</div> : null}
+                {header !== undefined ? (
+                  <DialogTitle
+                    tabIndex={-1}
+                    ref={initialFocusRef}
+                    className={clsx(
+                      styles.header,
+                      !hero && stickyHeader && styles.sticky,
+                      canScrollUp && styles.canScroll,
+                    )}
+                  >
+                    {header}
+                  </DialogTitle>
+                ) : null}
+                <div className={clsx(styles.body, { [styles.fullscreen]: fullscreen })}>
+                  {children}
+                </div>
+                <div
+                  className={clsx(
+                    styles.buttonContainer,
+                    showClose && stickyFooter && styles.sticky,
+                    showClose && canScrollDown && styles.canScroll,
+                  )}
+                >
+                  {showClose && (
+                    <Button variant="primary" onClick={onClose} aria-label={closeLabel}>
+                      {closeLabel}
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </DialogPanel>
+        </TransitionChild>
+      </Dialog>
+    </Transition>
+  );
+};

package/src/components/MessageModal/MessageModal.module.css

@@ -0,0 +1,149 @@
+.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: 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-outline);
+}
+
+.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);
+  text-align: center;
+}
+
+.body.fixedHeight {
+  flex-grow: 1;
+  min-height: 400px;
+  overflow: hidden;
+}
+
+.hero {
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+
+.footer {
+  padding: var(--size-spacing-lg) var(--size-spacing-md) var(--size-spacing-md);
+  background-color: var(--color-ubie-white);
+}
+
+.footer.sticky {
+  position: sticky;
+  bottom: 0;
+}
+
+.footer.sticky.canScroll {
+  border-top: 1px solid var(--color-outline);
+}
+
+.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/MessageModal/MessageModal.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 "./MessageModal.stories";
+
+const WithIdStory = composeStory(WithId, Meta);
+const CustomHeaderStory = composeStory(CustomHeader, Meta);
+const DefaultStory = composeStory(Default, Meta);
+
+const user = userEvent.setup();
+
+describe("MessageModal", () => {
+  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"),
+    );
+  });
+});

package/src/components/MessageModal/MessageModal.stories.tsx

@@ -0,0 +1,223 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps, useState } from "react";
+import { MessageModal } from "./MessageModal";
+
+const meta: Meta<typeof MessageModal> = {
+  title: "Modal/MessageModal",
+  component: MessageModal,
+  argTypes: {
+    overlayOpacity: {
+      options: ["normal", "darker"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const LongBody = () => (
+  <>
+    <p>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+      been the industry&apos;s standard dummy text ever since the 1500s, when an unknown printer
+      took a galley of type and scrambled it to make a type specimen book. It has survived not only
+      five centuries, but also the leap into electronic typesetting, remaining essentially
+      unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+      Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
+      including versions of Lorem Ipsum.
+    </p>
+    <p>
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
+      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
+      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
+      classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections
+      1.10.32 and 1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+      Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
+      popular during the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor sit
+      amet..&quot;, comes from a line in section 1.10.32.
+    </p>
+  </>
+);
+
+export default meta;
+
+type Story = StoryObj<typeof MessageModal>;
+
+const defaultArgs: Partial<ComponentProps<typeof MessageModal>> = {
+  header: "メッセージ",
+  overlayOpacity: "normal",
+  isStatic: false,
+  fixedHeight: false,
+  children: <LongBody />,
+  stickyHeader: false,
+  stickyFooter: false,
+} as const satisfies Partial<ComponentProps<typeof MessageModal>>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: "メッセージ",
+  },
+};
+
+export const FixedHeight: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+  args: { ...defaultArgs, fixedHeight: true },
+};
+
+export const OverlayDarker: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} fixedHeight />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    overlayOpacity: "darker",
+  },
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    "data-test-id": "message-modal-custom",
+  },
+};
+
+export const WithId: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    id: "dialog-id",
+  },
+};
+
+export const CustomHeader: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const headerId = "header-id";
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal
+          ariaLabelledby={headerId}
+          {...args}
+          open={open}
+          onClose={() => setOpen(false)}
+        >
+          <h2 id={headerId}>Heading</h2>
+          <LongBody />
+        </MessageModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: undefined,
+  },
+};
+
+export const WithHero: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: "メッセージ",
+    hero: (
+      <img
+        src="/images/placeholder.svg"
+        alt="Illustration: Modal"
+        style={{ width: "100%", height: "auto", verticalAlign: "bottom" }}
+        width={560}
+        height={315}
+      />
+    ),
+  },
+};
+
+export const StickyHeaderAndFooter: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageModal {...args} open={open} onClose={() => setOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: "メッセージ",
+    stickyHeader: true,
+    stickyFooter: true,
+  },
+};