@ubie/vitals-ui-consumer 0.0.1

package/src/components/ActionModal/ActionModal.stories.tsx

@@ -0,0 +1,302 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps, useState } from "react";
+import { ActionModal } from "./ActionModal";
+
+export default {
+  title: "Modal/ActionModal",
+  component: ActionModal,
+} satisfies Meta<typeof ActionModal>;
+
+type Story = StoryObj<typeof ActionModal>;
+
+const defaultArgs: Partial<ComponentProps<typeof ActionModal>> = {
+  header: "モーダル",
+  overlayOpacity: "normal",
+  primaryActionLabel: "回答結果を見る",
+  fixedHeight: false,
+  isStatic: false,
+  stickyHeader: false,
+  stickyFooter: false,
+} as const satisfies Partial<ComponentProps<typeof ActionModal>>;
+
+const LongBody = () => (
+  <>
+    <p style={{ margin: 0 }}>
+      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 style={{ margin: "12px 0 0" }}>
+      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 const Default: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <LongBody />
+        </ActionModal>
+      </>
+    );
+  },
+  args: defaultArgs,
+};
+
+export const Secondary: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          secondaryActionLabel={"このまま回答を続ける"}
+          onSecondaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <LongBody />
+        </ActionModal>
+      </>
+    );
+  },
+  args: defaultArgs,
+};
+
+export const FixedHeight: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <p>contents</p>
+          <p>contents</p>
+          <p>contents</p>
+          <p>contents</p>
+          <p>contents</p>
+          <p>contents</p>
+          <p>contents</p>
+        </ActionModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    fixedHeight: true,
+  },
+};
+
+export const Customized: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <p>Customized</p>
+        </ActionModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: "削除します",
+    primaryActionColor: "alert",
+    overlayOpacity: "darker",
+    closeLabel: "キャンセル",
+  },
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <p>Default</p>
+        </ActionModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    [`data-test-id`]: "some-id",
+  },
+};
+
+export const WithId: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <LongBody />
+        </ActionModal>
+      </>
+    );
+  },
+  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>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+          ariaLabelledby={headerId}
+        >
+          <h2 id={headerId} style={{ margin: "0 0 12px" }}>
+            Custom Heading
+          </h2>
+          <LongBody />
+        </ActionModal>
+      </>
+    );
+  },
+  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>
+        <ActionModal
+          hero={
+            <img
+              src="/images/placeholder.svg"
+              alt="Illustration: Modal"
+              style={{ width: "100%", height: "auto", verticalAlign: "bottom" }}
+              width={560}
+              height={315}
+            />
+          }
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <p style={{ margin: 0 }}>
+            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.
+          </p>
+        </ActionModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const StickyHeaderAndFooter: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <ActionModal
+          {...args}
+          open={open}
+          onPrimaryAction={() => setOpen(false)}
+          onClose={() => setOpen(false)}
+        >
+          <LongBody />
+        </ActionModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    stickyHeader: true,
+    stickyFooter: true,
+  },
+};

package/src/components/ActionModal/ActionModal.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { Dialog, DialogPanel, DialogTitle, Transition } from "@headlessui/react";
+import clsx from "clsx";
+import { type FC, Fragment, type ReactNode, useCallback, useRef } from "react";
+import styles from "./ActionModal.module.css";
+import { Button } from "../../";
+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";
+
+type Opacity = "normal" | "darker";
+
+type BaseProps = {
+  /**
+   * コンテンツとして表示する内容
+   */
+  children: ReactNode;
+  /**
+   * 閉じるアクションが実行された場合のコールバック
+   */
+  onClose: () => void;
+  /**
+   * プライマリーアクションボタンが実行された場合のコールバック
+   */
+  onPrimaryAction?: () => void;
+  /**
+   * ヘッダーに表示する見出しテキスト
+   */
+  header?: string;
+  /**
+   * プライマリーアクションボタンのラベル
+   */
+  primaryActionLabel?: string;
+  /**
+   * プライマリーアクションボタンのカラースキーム
+   */
+  primaryActionColor?: "primary" | "alert";
+  /**
+   * 閉じるボタンのラベル
+   * @default 閉じる
+   */
+  closeLabel?: string;
+  /**
+   * オーバーレイの透過度
+   * @default normal
+   */
+  overlayOpacity?: Opacity;
+  /**
+   * 画面を占有する高さで固定するかどうか
+   * @default false
+   */
+  fixedHeight?: boolean;
+  /**
+   * 閉じるボタンを表示するかどうか
+   * @default true
+   */
+  showClose?: boolean;
+  /**
+   * モーダルダイアログを開くかどうか
+   * @default true
+   */
+  open?: boolean;
+  /**
+   * openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
+   */
+  isStatic?: boolean;
+  /**
+   * ネイティブ要素のid属性。ページで固有のIDを指定
+   */
+  id?: string;
+  /**
+   * ネイティブのaria-labelledby属性。独自の見出しを実装する場合にダイアログとの紐づけに使用。ページで固有のIDを指定
+   */
+  ariaLabelledby?: string;
+  /**
+   * ヒーローエリア（見出しの更に上）に配置するコンテンツ
+   */
+  hero?: ReactNode;
+  /**
+   * ヘッダーを固定表示
+   * heroが指定されている場合は無効
+   */
+  stickyHeader?: boolean;
+  /**
+   * フッターを固定表示
+   */
+  stickyFooter?: boolean;
+};
+
+type SecondaryActionProps = {
+  /**
+   * セカンダリーアクションが実行された場合のコールバック
+   */
+  onSecondaryAction: () => void;
+  /**
+   * セカンダリーアクションボタンのラベル
+   */
+  secondaryActionLabel: string;
+};
+
+type Props = BaseProps & AllOrNone<SecondaryActionProps> & CustomDataAttributeProps;
+
+export const ActionModal: FC<Props> = ({
+  children,
+  onClose,
+  onPrimaryAction,
+  onSecondaryAction,
+  header,
+  primaryActionLabel,
+  secondaryActionLabel,
+  primaryActionColor,
+  closeLabel = "閉じる",
+  overlayOpacity = "normal",
+  fixedHeight = false,
+  showClose = true,
+  open = true,
+  isStatic = false,
+  ariaLabelledby,
+  hero,
+  stickyHeader = false,
+  stickyFooter = false,
+  ...props
+}) => {
+  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}
+      as={Fragment}
+      enter={styles.panelEnter}
+      enterFrom={styles.panelEnterFrom}
+      enterTo={styles.panelEnterTo}
+      leave={styles.panelLeave}
+      leaveFrom={styles.panelLeaveFrom}
+      leaveTo={styles.panelLeaveTo}
+    >
+      <Dialog
+        ref={dialogRef}
+        static={isStatic}
+        onClose={onClose}
+        className={styles.modal}
+        aria-labelledby={ariaLabelledby}
+        initialFocus={initialFocusRef}
+        {...props}
+      >
+        <div className={clsx(styles.overlay, styles[opacityClassName])} />
+        <DialogPanel
+          className={clsx(styles.dialog, {
+            [styles.fixedHeight]: fixedHeight,
+          })}
+        >
+          {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.fixedHeight]: fixedHeight,
+              })}
+            >
+              {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.fixedHeight]: fixedHeight,
+                })}
+              >
+                {children}
+              </div>
+              <div
+                className={clsx(
+                  styles.buttonContainer,
+                  stickyFooter && styles.sticky,
+                  canScrollDown && styles.canScroll,
+                )}
+              >
+                {onPrimaryAction && primaryActionLabel && (
+                  <Button block onClick={onPrimaryAction} variant={primaryActionColor}>
+                    {primaryActionLabel}
+                  </Button>
+                )}
+                {onSecondaryAction && secondaryActionLabel && (
+                  <Button block variant="secondary" onClick={onSecondaryAction}>
+                    {secondaryActionLabel}
+                  </Button>
+                )}
+                {showClose && (
+                  <Button variant="text" onClick={onClose}>
+                    {closeLabel}
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </Transition>
+  );
+};

package/src/components/Bold/Bold.module.css

@@ -0,0 +1,4 @@
+.bold {
+  font-style: normal;
+  font-weight: bold;
+}

package/src/components/Bold/Bold.spec.tsx

@@ -0,0 +1,24 @@
+import { composeStory } from "@storybook/react-vite";
+import { render, screen } from "@testing-library/react";
+import Meta, { WithId, CustomDataAttribute } from "./Bold.stories";
+
+const WithIdStory = composeStory(WithId, Meta);
+const CustomDataAttributeStory = composeStory(CustomDataAttribute, Meta);
+
+describe("Bold", () => {
+  test("Add id", async () => {
+    render(<WithIdStory />);
+
+    const boldElement = screen.queryByText("太字");
+
+    expect(boldElement).toHaveAttribute("id", "some-id");
+  });
+
+  test("Add custom data attribute", async () => {
+    render(<CustomDataAttributeStory />);
+
+    const boldElement = screen.queryByText("太字");
+
+    expect(boldElement).toHaveAttribute("data-test-id", "some-id");
+  });
+});

package/src/components/Bold/Bold.stories.tsx

@@ -0,0 +1,54 @@
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { Bold } from "./Bold";
+import { Stack } from "../Stack/Stack";
+import { Text } from "../Text/Text";
+
+export default {
+  title: "Typography/font/Bold",
+  component: Bold,
+} satisfies Meta<typeof Bold>;
+
+type Story = StoryObj<typeof Bold>;
+
+export const AsVarations: Story = {
+  render: () => {
+    return (
+      <Stack spacing="md">
+        <Bold>default(span)</Bold>
+        <Bold as="span">span</Bold>
+        <Bold as="b">b</Bold>
+        <Bold as="strong">strong</Bold>
+        <Bold as="em">em</Bold>
+        <Bold as="i">i</Bold>
+      </Stack>
+    );
+  },
+};
+
+export const WithText: Story = {
+  render: () => {
+    return (
+      <Text type="body" size="lg" color="main">
+        一部だけ<Bold>太字</Bold>にしたい
+      </Text>
+    );
+  },
+};
+
+export const WithId: Story = {
+  render: (args) => {
+    return <Bold {...args}>太字</Bold>;
+  },
+  args: {
+    id: "some-id",
+  },
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => {
+    return <Bold {...args}>太字</Bold>;
+  },
+  args: {
+    [`data-test-id`]: "some-id",
+  },
+};

package/src/components/Bold/Bold.tsx

@@ -0,0 +1,31 @@
+import { type FC, type ReactNode } from "react";
+import styles from "./Bold.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+
+type Props = {
+  /**
+   * 太字にするテキスト
+   * <p>や<div>などを子要素に指定しないでください（文法的にNGです）
+   *
+   */
+  children: ReactNode;
+  /**
+   * レンダリングされる要素
+   * @default span
+   */
+  as?: "span" | "b" | "strong" | "em" | "i";
+  /**
+   * ネイティブ要素の`id`属性。ページで固有のIDを指定
+   */
+  id?: string;
+} & CustomDataAttributeProps;
+
+export const Bold: FC<Props> = ({ as = "span", children, id, ...otherProps }) => {
+  const BoldComponent = as;
+
+  return (
+    <BoldComponent className={styles.bold} id={id} {...otherProps}>
+      {children}
+    </BoldComponent>
+  );
+};

package/src/components/Box/Box.module.css

@@ -0,0 +1,46 @@
+.box {
+  box-sizing: border-box;
+  display: block;
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
+  font-size: var(--text-size);
+  font-weight: var(--text-bold);
+  hyphens: auto;
+  line-height: var(--text-leading);
+  color: var(--text-color);
+  overflow-wrap: anywhere;
+  background-color: var(--background-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius);
+}
+
+.box.textBold {
+  font-weight: bold;
+}
+
+.box.textNormal {
+  font-weight: normal;
+}
+
+.box.textCenter {
+  text-align: center;
+}
+
+.box.textLeft {
+  text-align: left;
+}
+
+.box.textRight {
+  text-align: right;
+}
+
+.box.textNoWrap {
+  white-space: nowrap;
+}
+
+.box.inline {
+  display: inline-block;
+}