@ubie/vitals-ui-consumer 0.0.1

package/src/components/MessageModal/MessageModal.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { Dialog, DialogPanel, DialogTitle, Transition } from "@headlessui/react";
+import clsx from "clsx";
+import { FC, Fragment, PropsWithChildren, type ReactNode, useCallback, useRef } from "react";
+import styles from "./MessageModal.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";
+
+type Opacity = "normal" | "darker";
+
+type Props = {
+  /**
+   * プライマリーアクションボタンのラベル
+   */
+  header?: string;
+  /**
+   * 閉じるアクションが実行された場合のコールバック
+   */
+  onClose: () => void;
+  /**
+   * 閉じるボタンのラベル
+   * @default 閉じる
+   */
+  closeLabel?: string;
+  /**
+   * オーバーレイの透過度
+   * @default normal
+   */
+  overlayOpacity?: Opacity;
+  /**
+   * 画面を占有する高さで固定する
+   */
+  fixedHeight?: 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;
+} & PropsWithChildren &
+  CustomDataAttributeProps;
+
+export const MessageModal: FC<Props> = ({
+  header,
+  children,
+  onClose,
+  overlayOpacity = "normal",
+  closeLabel = "閉じる",
+  fixedHeight = false,
+  open = true,
+  isStatic = 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}
+      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}
+        initialFocus={initialFocusRef}
+        {...otherProps}
+      >
+        <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>
+              <footer
+                className={clsx(
+                  styles.footer,
+                  stickyFooter && styles.sticky,
+                  canScrollDown && styles.canScroll,
+                )}
+              >
+                <Button block onClick={onClose} aria-label={closeLabel}>
+                  {closeLabel}
+                </Button>
+              </footer>
+            </div>
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </Transition>
+  );
+};

package/src/components/Pre/Pre.module.css

@@ -0,0 +1,8 @@
+.pre {
+  display: block;
+  white-space: var(--white-space);
+}
+
+.pre.inline {
+  display: inline-block;
+}

package/src/components/Pre/Pre.spec.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+import { Pre } from "./Pre";
+
+describe("<Pre>", () => {
+  it("receives data attributes", () => {
+    render(<Pre data-testid="pre" />);
+    const pre = screen.getByTestId("pre");
+
+    expect(pre).toBeInTheDocument();
+  });
+});

package/src/components/Pre/Pre.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Pre } from "./Pre";
+import { Box } from "../Box/Box";
+
+export default {
+  title: "typography/Pre",
+  component: Pre,
+} satisfies Meta<typeof Pre>;
+
+type Story = StoryObj<typeof Pre>;
+
+const defaultArgs = {
+  children: `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+Lorem Ipsum has been the industry'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.`,
+};
+
+export const Default: Story = {
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <Box border="black" p="md">
+        <Pre {...args} />
+      </Box>
+    </div>
+  ),
+  args: defaultArgs,
+};
+
+export const WhiteSpacePre: Story = {
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <Box border="black" p="md">
+        <Pre {...args} />
+      </Box>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+    whiteSpace: "pre",
+  },
+};
+
+export const PreWrap: Story = {
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <Box border="black" p="md">
+        <Pre {...args} />
+      </Box>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+    whiteSpace: "pre-wrap",
+  },
+};
+
+export const Inline: Story = {
+  render: (args) => (
+    <p>
+      Text
+      <Pre {...args} />
+      Text
+    </p>
+  ),
+  args: {
+    ...defaultArgs,
+    children: `Lorem Ipsum
+is simply
+dummy text
+of the
+printing and
+typesetting industry.`,
+    inline: true,
+  },
+};

package/src/components/Pre/Pre.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { clsx } from "clsx";
+import { CSSProperties, forwardRef, type HTMLAttributes, type PropsWithChildren } from "react";
+import styles from "./Pre.module.css";
+
+type AllowedSpanAttributes = Omit<HTMLAttributes<HTMLSpanElement>, "className">;
+
+type Props = {
+  /**
+   * 折り返しや空白、改行の扱い
+   * @default 'pre-line'
+   */
+  whiteSpace?: "pre" | "pre-wrap" | "pre-line" | "break-spaces";
+  /**
+   * inline-blockとして扱う
+   */
+  inline?: boolean;
+} & AllowedSpanAttributes;
+
+export const Pre = forwardRef<HTMLSpanElement, PropsWithChildren<Props>>(
+  ({ children, whiteSpace = "pre-line", inline = false, ...rest }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={clsx(styles.pre, inline && styles.inline)}
+        style={
+          {
+            "--white-space": whiteSpace,
+          } as CSSProperties
+        }
+        {...rest}
+      >
+        {children}
+      </span>
+    );
+  },
+);
+
+Pre.displayName = "Pre";

package/src/components/RadioButton/RadioButton.module.css

@@ -0,0 +1,92 @@
+.icon {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-surface-container);
+  border: 2px solid var(--color-outline);
+  border-radius: 24px;
+}
+
+.text {
+  hyphens: auto;
+  overflow-wrap: anywhere;
+}
+
+.medium .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.small .icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+@media (hover: hover) {
+  .label:hover .icon {
+    border-color: var(--color-ubie-blue-500);
+  }
+}
+
+.icon::before {
+  content: "";
+  border-radius: 16px;
+}
+
+.medium .icon::before {
+  width: 1rem;
+  height: 1rem;
+}
+
+.small .icon::before {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.radio {
+  position: absolute;
+  opacity: 0;
+}
+
+.radio:checked + .icon {
+  border-color: var(--color-ubie-blue-600);
+}
+
+.radio:checked + .icon::before {
+  background: var(--color-ubie-blue-600);
+}
+
+.radio:disabled + .icon + .text {
+  color: var(--color-placeholder);
+}
+
+.radio:disabled + .icon {
+  border-color: var(--color-placeholder);
+}
+
+.radio:checked:disabled + .icon::before {
+  background: var(--color-placeholder);
+}
+
+.radio:focus-visible + .icon {
+  border-color: var(--color-ubie-pink-500);
+}
+
+.label {
+  display: flex;
+  gap: var(--size-spacing-xs);
+  align-items: center;
+  cursor: pointer;
+}
+
+.medium .label {
+  font-size: var(--text-body-md-size);
+  line-height: var(--text-body-md-narrow-line);
+}
+
+.small .label {
+  font-size: var(--text-body-sm-size);
+  line-height: var(--text-body-sm-narrow-line);
+}

package/src/components/RadioButton/RadioButton.spec.tsx

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { RadioButton } from "./RadioButton";
+
+describe("RadioButton", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <RadioButton
+        name="test"
+        value="test"
+        ref={ref}
+        onChange={() => {
+          /**/
+        }}
+        checked={false}
+      >
+        Test
+      </RadioButton>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("INPUT");
+    expect(ref.current?.type).toBe("radio");
+  });
+});

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef, type InputHTMLAttributes } from "react";
+import styles from "./RadioButton.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+
+type RadioProps = Required<Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "checked">> &
+  Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "children" | "value" | "name">;
+
+type Props = {
+  /**
+   * グループ化（排他制御）したい要素には同じ名前をつける
+   */
+  name: string;
+  /**
+   * 選択時のコールバックで渡される値
+   */
+  value: string | number;
+  /**
+   * ラベルに表示されるテキストまたは要素
+   */
+  children: InputHTMLAttributes<HTMLInputElement>["children"];
+  /**
+   * サイズ
+   * @default medium
+   */
+  size?: "medium" | "small";
+} & RadioProps &
+  CustomDataAttributeProps;
+
+export const RadioButton = forwardRef<HTMLInputElement, Props>(
+  ({ size = "medium", checked, onChange, value, name, children, ...otherProps }, ref) => {
+    return (
+      <div className={clsx(styles[size])}>
+        <label className={styles.label}>
+          <input
+            type="radio"
+            checked={checked}
+            name={name}
+            value={value}
+            className={styles.radio}
+            onChange={onChange}
+            ref={ref}
+            {...otherProps}
+          />
+          <span className={styles.icon} />
+          <span className={styles.text}>{children}</span>
+        </label>
+      </div>
+    );
+  },
+);
+
+RadioButton.displayName = "RadioButton";

package/src/components/RadioCard/RadioCard.module.css

@@ -0,0 +1,109 @@
+.block {
+  width: 100%;
+}
+
+.radio {
+  position: absolute;
+  opacity: 0;
+}
+
+.label {
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 16px 12px 16px 44px;
+  font-size: var(--text-body-md-size);
+  font-weight: bold;
+  hyphens: auto;
+  line-height: var(--text-body-md-narrow-line);
+  color: var(--color-on-surface);
+  overflow-wrap: anywhere;
+  vertical-align: text-top;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 8px;
+  outline: 1px solid var(--color-outline);
+  transition:
+    outline-color 0.3s var(--ease-out-quint),
+    background-color 0.3s var(--ease-out-quint);
+}
+
+.label.checked {
+  background: var(--color-ubie-blue-100);
+  outline: 2px solid var(--color-ubie-blue-500);
+}
+
+.label::before {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  box-sizing: border-box;
+  display: block;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-radius: 50%;
+  outline: 2px solid var(--color-outline);
+  transform: translateY(-50%);
+}
+
+@media (hover: hover) {
+  .label:hover:not(.disabled, .checked)::before {
+    outline: 2px solid var(--color-ubie-blue-500);
+  }
+}
+
+.label.checked::before {
+  outline: 2px solid var(--color-ubie-blue-600);
+}
+
+.label.checked::after {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  box-sizing: border-box;
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: "";
+  background: var(--color-ubie-blue-600);
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.label::after {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.label.checked.disabled::before {
+  outline-color: var(--color-outline);
+}
+
+.label.checked.disabled::after {
+  background-color: var(--color-placeholder);
+}
+
+.label:has(.radio:focus-visible) {
+  box-shadow: 0 0 0 4px var(--color-ubie-pink-500);
+}
+
+@media (hover: hover) {
+  .label:hover {
+    background-color: var(--color-ubie-blue-100);
+  }
+}
+
+.label.disabled {
+  color: var(--color-placeholder);
+  background-color: var(--color-outline-variant);
+  outline-color: var(--color-placeholder);
+}

package/src/components/RadioCard/RadioCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { clsx } from "clsx";
+import { FC, forwardRef } from "react";
+import styles from "./RadioCard.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+
+type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "children"> &
+  CustomDataAttributeProps & {
+    /**
+     * グループ化（排他制御）したい要素には同じ名前をつける
+     */
+    name: string;
+    /**
+     * 選択時のコールバックで渡される値
+     */
+    value: string | number;
+    /**
+     * ラベルに表示されるテキストまたは要素
+     */
+    children: React.InputHTMLAttributes<HTMLInputElement>["children"];
+    /**
+     * 横幅を100%占有する
+     */
+    block?: boolean;
+  };
+
+/**
+ * アクセシビリティに配慮したラジオボタン。
+ * 選択した後自動で遷移しないタイプのラジオボタン（選択してもなにもおきないボタン）に使用
+ */
+const RadioCard: FC<Props> = forwardRef<HTMLInputElement, Props>(
+  ({ name, value, checked, children, className, block = false, disabled, ...otherProps }, ref) => {
+    return (
+      <label
+        className={clsx(
+          styles.label,
+          block && styles.block,
+          checked && styles.checked,
+          disabled && styles.disabled,
+        )}
+      >
+        <input
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          className={clsx(className, styles.radio)}
+          ref={ref}
+          disabled={disabled}
+          {...otherProps}
+        />
+        {children}
+      </label>
+    );
+  },
+);
+
+RadioCard.displayName = "RadioCard";
+
+export { RadioCard };

package/src/components/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,16 @@
+.wrapper {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.legend {
+  display: flex;
+  gap: var(--size-spacing-xs);
+  align-items: center;
+  padding: 0;
+  margin-bottom: var(--size-spacing-md);
+  font-size: var(--text-body-sm-size);
+  font-weight: bold;
+  color: var(--color-on-surface-variant);
+}

package/src/components/RadioGroup/RadioGroup.spec.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { RadioGroup } from "./RadioGroup";
+
+describe("RadioGroup", () => {
+  it("access to DOM through ref prop", () => {
+    const ref = createRef<HTMLFieldSetElement>();
+    render(
+      <RadioGroup label="test" ref={ref}>
+        <p>Test</p>
+        <p>Test</p>
+      </RadioGroup>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe("FIELDSET");
+  });
+});