@ubie/vitals-ui-consumer 0.0.1

package/src/components/Label/Label.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import styles from "./Label.module.css";
+import { RequiredLabel } from "../../sharedComponents/RequiredLabel/RequiredLabel";
+import { CustomDataAttributeProps } from "../../types/attributes"; // 追加したインポート
+import type { ElementType, FC, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  /**
+   * レンダリングされるHTML要素
+   * @default label
+   */
+  as?: ElementType<{ className?: string; children: ReactNode }> | "label" | "p";
+  /**
+   * ラベルが紐づくフォーム要素のid属性。asにlabelを指定した場合に必用
+   */
+  htmlFor?: string;
+  /**
+   * 必須マークを表示するか
+   * 注意: trueとしてもinput要素のrequired属性は付与されません
+   */
+  showRequiredLabel?: boolean;
+} & CustomDataAttributeProps;
+
+export const Label: FC<Props> = ({
+  children,
+  as: LabelComponent = "label",
+  htmlFor,
+  showRequiredLabel,
+  ...otherProps
+}) => {
+  return (
+    <LabelComponent htmlFor={htmlFor} className={styles.label} {...otherProps}>
+      {children}
+      {showRequiredLabel && <RequiredLabel />}
+    </LabelComponent>
+  );
+};

package/src/components/LinkCard/LinkCard.module.css

@@ -0,0 +1,72 @@
+.card {
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+
+  display: flex;
+  gap: var(--size-spacing-sm);
+  align-items: center;
+  padding: var(--size-spacing-md);
+  hyphens: auto;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  background-color: var(--color-ubie-white);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-md);
+  transition: background-color 0.3s var(--ease-out-quint);
+}
+
+.card:hover {
+  background-color: var(--color-ubie-blue-100);
+}
+
+.icon {
+  flex: none;
+  color: var(--color-ubie-blue-600);
+}
+
+.icon > * {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  vertical-align: bottom;
+}
+
+.text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--size-spacing-xxs);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--title-font-size);
+  font-weight: bold;
+  color: var(--color-on-surface);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--description-font-size);
+  line-height: var(--description-line-height);
+  color: var(--color-on-surface-variant);
+}
+
+.caret {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-ubie-blue-600);
+}
+
+/* Size */
+.medium {
+  --icon-size: 2rem;
+  --title-font-size: var(--text-heading-xs-line);
+  --description-font-size: var(--text-body-sm-size);
+  --description-line-height: var(--text-body-sm-line);
+}
+
+.small {
+  --icon-size: 1.25rem;
+  --title-font-size: var(--text-button-md-size);
+  --description-font-size: var(--text-body-xs-size);
+  --description-line-height: var(--text-body-xs-line);
+}

package/src/components/LinkCard/LinkCard.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ArrowBRightIcon } from "@ubie/vitals-icon";
+import clsx from "clsx";
+import { cloneElement, forwardRef, isValidElement } from "react";
+import styles from "./LinkCard.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { IconName } from "../../types/icon";
+import { Icon } from "../Icon/Icon";
+import type { ComponentType, ReactElement, ReactNode } from "react";
+
+type IconProp = ComponentType | ReactElement | IconName;
+
+type Props = {
+  /**
+   * 遷移先URL
+   */
+  href?: string;
+  /**
+   * サイズ
+   * @default medium
+   */
+  size?: "medium" | "small";
+  /**
+   * 見出しのテキスト
+   */
+  title: string;
+  /**
+   * 説明のテキスト
+   */
+  description?: string;
+  /**
+   * CSSのクラス
+   * * @deprecated マージンなどをつけたい場合は<Box>や<Stack>を使ってください
+   */
+  className?: string;
+  /**
+   * レンダリングされる要素を変更。フレームワークのリンクコンポーネントなどを指定
+   */
+  render?: ReactElement;
+  /**
+   * アイコン
+   */
+  icon?: IconProp;
+} & CustomDataAttributeProps;
+
+// ref https://github.com/microsoft/TypeScript/issues/53178
+const _isValidElement = (el: ComponentType | ReactElement): el is ReactElement => {
+  return isValidElement(el);
+};
+
+const renderPropIcon = (icon: IconProp) => {
+  if (icon == null) {
+    return null;
+  }
+
+  if (typeof icon === "string") {
+    return <Icon icon={icon} />;
+  }
+
+  if (_isValidElement(icon)) {
+    return icon;
+  }
+
+  const IconComponent = icon;
+  return <IconComponent />;
+};
+
+export const LinkCard = forwardRef<HTMLAnchorElement, Props>(
+  ({ title, size = "medium", className, icon, description, render, ...props }, forwardedRef) => {
+    const cls = clsx(styles[size], styles.card, className);
+
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    const createElement = (props: any, children: ReactNode) => {
+      return render ? cloneElement(render, props, children) : <a {...props}>{children}</a>;
+    };
+
+    return createElement(
+      {
+        className: cls,
+        ...props,
+        ref: forwardedRef,
+      },
+      <>
+        {icon != null && <span className={styles.icon}>{renderPropIcon(icon)}</span>}
+        <div className={styles.text}>
+          <p className={styles.title}>{title}</p>
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
+        <ArrowBRightIcon className={styles.caret} />
+      </>,
+    );
+  },
+);
+
+LinkCard.displayName = "LinkCard";

package/src/components/MessageHalfModal/MessageHalfModal.module.css

@@ -0,0 +1,181 @@
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-modal);
+  overflow: hidden;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+}
+
+.normalOverlay {
+  background: rgb(0 0 0 / 50%);
+}
+
+.darkerOverlay {
+  background: rgb(0 0 0 / 80%);
+}
+
+.contents {
+  padding: 0 var(--size-spacing-md);
+}
+
+.dialog {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  max-height: calc(100% - 24px);
+  margin: 0 auto;
+  overflow-y: hidden;
+  background: #fff;
+  border-radius: 12px;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.dialog.fullscreen {
+  height: calc(100% - 24px);
+}
+
+.scrollContainer {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.mainContent.fullscreen {
+  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-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);
+}
+
+.body.fullscreen {
+  flex: 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-outline);
+}
+
+.overlayEnter {
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+  transition-property: opacity;
+}
+
+.overlayEnterFrom {
+  opacity: 0;
+}
+
+.overlayEnterTo {
+  opacity: 1;
+}
+
+.overlayLeave {
+  transition-timing-function: ease-in;
+  transition-duration: 200ms;
+}
+
+.overlayLeaveFrom {
+  opacity: 1;
+}
+
+.overlayLeaveTo {
+  opacity: 0;
+}
+
+.panelEnter {
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+  transition-property: transform, opacity;
+}
+
+.panelEnterFrom {
+  opacity: 0;
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.panelEnterTo {
+  opacity: 1;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.panelLeave {
+  transition-timing-function: ease-in;
+  transition-duration: 200ms;
+}
+
+.panelLeaveFrom {
+  opacity: 1;
+  transform: translate3d(-50%, 0, 0);
+}
+
+.panelLeaveTo {
+  opacity: 0;
+  transform: translate3d(-50%, 100%, 0);
+}

package/src/components/MessageHalfModal/MessageHalfModal.spec.tsx

@@ -0,0 +1,73 @@
+import { composeStory } from "@storybook/react-vite";
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import Meta, {
+  WithCustomDataAttribute,
+  WithId,
+  CustomHeader,
+  Default,
+} from "./MessageHalfModal.stories";
+
+const WithCustomDataAttributeStory = composeStory(WithCustomDataAttribute, Meta);
+const WithIdStory = composeStory(WithId, Meta);
+const CustomHeaderStory = composeStory(CustomHeader, Meta);
+const DefaultStory = composeStory(Default, Meta);
+
+const user = userEvent.setup();
+
+describe("MessageHalfModal", () => {
+  test("Add custom data attributes", async () => {
+    render(<WithCustomDataAttributeStory />);
+
+    await user.click(await screen.findByRole("button"));
+
+    const dialogElement = await screen.findByRole("dialog");
+
+    expect(dialogElement).toHaveAttribute("data-test-id", "message-half-modal-custom");
+  });
+
+  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/MessageHalfModal/MessageHalfModal.stories.tsx

@@ -0,0 +1,242 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps, useCallback, useState } from "react";
+import { MessageHalfModal } from "./MessageHalfModal";
+
+export default {
+  title: "Modal/MessageHalfModal",
+  component: MessageHalfModal,
+} satisfies Meta<typeof MessageHalfModal>;
+
+type Story = StoryObj<typeof MessageHalfModal>;
+
+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>
+  </>
+);
+
+const defaultArgs = {
+  header: "モーダル",
+  children: <LongBody />,
+  stickyHeader: false,
+  stickyFooter: false,
+} as const satisfies Partial<ComponentProps<typeof MessageHalfModal>>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal {...args} open={open} onClose={onClose} />
+      </>
+    );
+  },
+  args: defaultArgs,
+};
+
+export const Fullscreen: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal {...args} open={open} onClose={onClose} fullscreen />
+      </>
+    );
+  },
+  args: defaultArgs,
+};
+
+export const NoCloseButton: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal showClose={false} {...args} open={open} onClose={onClose} />
+      </>
+    );
+  },
+  args: defaultArgs,
+};
+
+export const WithCustomDataAttribute: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal {...args} open={open} onClose={onClose} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    "data-test-id": "message-half-modal-custom",
+  },
+};
+
+export const WithId: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal {...args} open={open} onClose={onClose} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    id: "dialog-id",
+  },
+};
+
+export const CustomHeader: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    const headerId = "header-id";
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal ariaLabelledby={headerId} {...args} open={open} onClose={onClose}>
+          <h2 id={headerId}>Heading</h2>
+          <LongBody />
+        </MessageHalfModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: undefined,
+  },
+};
+
+export const WithHero: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    const headerId = "header-id";
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal
+          hero={
+            <img
+              src="/images/placeholder.svg"
+              alt="Illustration: Modal"
+              style={{ width: "100%", height: "auto", verticalAlign: "bottom" }}
+              width={560}
+              height={315}
+            />
+          }
+          ariaLabelledby={headerId}
+          {...args}
+          open={open}
+          onClose={onClose}
+        >
+          <h2 id={headerId}>Heading</h2>
+          <LongBody />
+        </MessageHalfModal>
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    header: undefined,
+  },
+};
+
+export const StickyHeaderAndFooter: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+
+    const onClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    return (
+      <>
+        <button type="button" onClick={() => setOpen(true)}>
+          Open Modal
+        </button>
+        <MessageHalfModal {...args} open={open} onClose={onClose} />
+      </>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    stickyHeader: true,
+    stickyFooter: true,
+  },
+};