@ubie/vitals-ui-consumer 0.0.1

package/src/components/CheckboxCard/CheckboxCard.module.css

@@ -0,0 +1,102 @@
+.block {
+  width: 100%;
+}
+
+.checkbox {
+  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 48px;
+  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);
+  outline-offset: -1px;
+  transition:
+    outline-color 0.3s var(--ease-out-quint),
+    background-color 0.3s var(--ease-out-quint),
+    border-color 0.3s var(--ease-out-quint);
+}
+
+.label::before {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  box-sizing: border-box;
+  display: block;
+  width: 24px;
+  height: 24px;
+  content: "";
+  border: 2px solid var(--color-outline);
+  border-radius: var(--radius-sm);
+  transform: translateY(-50%);
+}
+
+@media (hover: hover) {
+  .label:hover:not(.disabled, .checked)::before {
+    background-color: var(--color-ubie-white);
+    border-color: var(--color-ubie-blue-500);
+  }
+}
+
+.label.checked::before {
+  background-color: var(--color-ubie-blue-600);
+  border: none;
+}
+
+.label.checked.disabled::before {
+  background-color: var(--color-placeholder);
+  border-color: transparent;
+}
+
+.label:not(.checked):has(.checkbox:focus-visible),
+.label.checked:has(.checkbox:focus-visible) {
+  box-shadow: 0 0 0 2px var(--color-ubie-pink-500);
+}
+
+@media (hover: hover) {
+  .label:hover {
+    background-color: var(--color-ubie-blue-100);
+  }
+
+  .label.checked:not(.disabled):hover {
+    outline-color: var(--color-ubie-blue-700);
+  }
+
+  .label.checked:not(.disabled):hover::before {
+    background-color: var(--color-ubie-blue-700);
+  }
+}
+
+.label.disabled {
+  color: var(--color-placeholder);
+  background-color: var(--color-outline-variant);
+  outline-color: var(--color-outline);
+}
+
+.label.disabled::before {
+  border-color: var(--color-placeholder);
+}
+
+.checkIcon {
+  position: absolute;
+  top: 50%;
+  left: 14px;
+  line-height: 1;
+  color: var(--color-ubie-white);
+  translate: 0 -50%;
+}

package/src/components/CheckboxCard/CheckboxCard.spec.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import { CheckboxCard } from "./CheckboxCard";
+
+describe("<CheckboxCard>", () => {
+  it("receives id prop", () => {
+    render(<CheckboxCard id="checbox-id" />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox.getAttribute("id")).toBe("checbox-id");
+  });
+
+  it("receives custom attribute", () => {
+    render(<CheckboxCard data-testid="checbox-id" />);
+    const checkbox = screen.getByTestId("checbox-id");
+    expect(checkbox).toBeInTheDocument();
+  });
+});

package/src/components/CheckboxCard/CheckboxCard.stories.tsx

@@ -0,0 +1,205 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { type ChangeEventHandler, ComponentProps, useCallback, useState } from "react";
+import { CheckboxCard } from "./CheckboxCard";
+import { CheckboxGroup } from "../CheckboxGroup/CheckboxGroup";
+import { Stack } from "../Stack/Stack";
+
+export default {
+  title: "Form/CheckboxCard",
+  component: CheckboxCard,
+} satisfies Meta<typeof CheckboxCard>;
+
+const defaultArgs: Partial<ComponentProps<typeof CheckboxCard>> = {};
+
+const options = ["option1", "option2", "option3", "option4", "option5"];
+
+type Story = StoryObj<typeof CheckboxCard>;
+
+export const Default: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.currentTarget.checked) {
+          setSelectedItem([...selectedItem, event.currentTarget.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.currentTarget.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <Stack spacing="lg">
+        <CheckboxGroup label="Checkbox">
+          {options.map((option) => (
+            <CheckboxCard
+              block
+              name="default"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem.includes(option)}
+              key={option}
+            >
+              {option}
+            </CheckboxCard>
+          ))}
+        </CheckboxGroup>
+
+        <dl>
+          <dt>Values</dt>
+          <dd>{selectedItem.join(",")}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.currentTarget.checked) {
+          setSelectedItem([...selectedItem, event.currentTarget.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.currentTarget.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <CheckboxGroup label="Checkbox">
+        {options.map((option) => (
+          <CheckboxCard
+            disabled
+            name="default"
+            value={option}
+            onChange={onChange}
+            checked={selectedItem.includes(option)}
+            key={option}
+          >
+            {option}
+          </CheckboxCard>
+        ))}
+      </CheckboxGroup>
+    );
+  },
+};
+
+export const Horizontally: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.currentTarget.checked) {
+          setSelectedItem([...selectedItem, event.currentTarget.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.currentTarget.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <CheckboxGroup label="Checkbox" direction="row">
+        {options.map((option) => (
+          <CheckboxCard
+            name="horizontally"
+            value={option}
+            onChange={onChange}
+            checked={selectedItem.includes(option)}
+            id={option}
+            key={option}
+          >
+            {option}
+          </CheckboxCard>
+        ))}
+      </CheckboxGroup>
+    );
+  },
+};
+
+export const Block: Story = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.currentTarget.checked) {
+          setSelectedItem([...selectedItem, event.currentTarget.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.currentTarget.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <CheckboxGroup label="Checkbox">
+        {options.map((option) => (
+          <CheckboxCard
+            block
+            {...args}
+            key={option}
+            checked={selectedItem.includes(option)}
+            value={option}
+            onChange={onChange}
+            name="block"
+          >
+            {option}
+          </CheckboxCard>
+        ))}
+      </CheckboxGroup>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    name: "block",
+    block: true,
+  },
+};
+
+export const NoLabelOnGroup: Story = {
+  render: (args) => {
+    const [selectedItem, setSelectedItem] = useState<string[]>([options[0]]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+      (event) => {
+        if (event.currentTarget.checked) {
+          setSelectedItem([...selectedItem, event.currentTarget.value]);
+        } else {
+          setSelectedItem(selectedItem.filter((item) => item !== event.currentTarget.value));
+        }
+      },
+      [selectedItem],
+    );
+
+    return (
+      <CheckboxGroup>
+        {options.map((option) => (
+          <CheckboxCard
+            block
+            {...args}
+            key={option}
+            checked={selectedItem.includes(option)}
+            value={option}
+            onChange={onChange}
+            name="block"
+          >
+            {option}
+          </CheckboxCard>
+        ))}
+      </CheckboxGroup>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    name: "block",
+    block: true,
+  },
+};

package/src/components/CheckboxCard/CheckboxCard.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { clsx } from "clsx";
+import { forwardRef, type InputHTMLAttributes } from "react";
+import styles from "./CheckboxCard.module.css";
+import { Icon } from "../Icon/Icon";
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+  /**
+   * 横幅を100%占有する
+   */
+  block?: boolean;
+};
+
+/**
+ * カード状のチェックボックス
+ * タップ・クリック可能エリアが広いため操作が容易
+ */
+const CheckboxCard = 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,
+        )}
+      >
+        {checked && (
+          <span className={styles.checkIcon}>
+            <Icon size="sm" icon="CheckAIcon" aria-hidden="true" />
+          </span>
+        )}
+        <input
+          type="checkbox"
+          name={name}
+          value={value}
+          checked={checked}
+          className={clsx(className, styles.checkbox)}
+          ref={ref}
+          disabled={disabled}
+          {...otherProps}
+        />
+        {children}
+      </label>
+    );
+  },
+);
+
+CheckboxCard.displayName = "CheckboxCard";
+
+export { CheckboxCard };

package/src/components/CheckboxGroup/CheckboxGroup.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/CheckboxGroup/CheckboxGroup.spec.tsx

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

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { forwardRef, useMemo } from "react";
+import styles from "./CheckboxGroup.module.css";
+import { RequiredLabel } from "../../sharedComponents/RequiredLabel/RequiredLabel";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { CheckboxCard } from "../CheckboxCard/CheckboxCard";
+import { Flex } from "../Flex/Flex";
+import type { ReactElement } from "react";
+
+/**
+ * チェックボックス系コンポーネントをグルーピングするコンテナー
+ */
+export type Props = {
+  /**
+   * チェックボックス系のコンポーネント
+   */
+  children: ReactElement<typeof Checkbox>[] | ReactElement<typeof CheckboxCard>[];
+  /**
+   * グループの見出し
+   */
+  label?: string;
+  /**
+   * 必須ラベルの表示
+   */
+  showRequiredLabel?: boolean;
+  /**
+   * 配置方向
+   */
+  direction?: "column" | "row";
+} & CustomDataAttributeProps;
+
+const includesCheckboxCard = (children: Props["children"]): boolean => {
+  return children.some((child) => child.type === CheckboxCard);
+};
+
+export const CheckboxGroup = forwardRef<HTMLFieldSetElement, Props>(
+  ({ children, label, showRequiredLabel, direction = "column", ...otherProps }, ref) => {
+    const spacing = useMemo(() => {
+      return includesCheckboxCard(children) ? "sm" : "md";
+    }, [children]);
+
+    const wrap = useMemo(() => {
+      return direction === "row";
+    }, [direction]);
+
+    return (
+      <fieldset className={styles.wrapper} ref={ref} {...otherProps}>
+        {label && (
+          <legend className={styles.legend}>
+            {label}
+            {showRequiredLabel && <RequiredLabel />}
+          </legend>
+        )}
+        <Flex spacing={spacing} direction={direction} wrap={wrap}>
+          {children}
+        </Flex>
+      </fieldset>
+    );
+  },
+);
+
+CheckboxGroup.displayName = "CheckboxGroup";

package/src/components/Color/Color.module.css

@@ -0,0 +1,3 @@
+.color {
+  color: var(--text-color);
+}

package/src/components/Color/Color.spec.tsx

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

package/src/components/Color/Color.stories.tsx

@@ -0,0 +1,71 @@
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { Color } from "./Color";
+import { Box } from "../Box/Box";
+import { Stack } from "../Stack/Stack";
+import { Text } from "../Text/Text";
+
+export default {
+  title: "Typography/Font/Color",
+  component: Color,
+} satisfies Meta<typeof Color>;
+
+type Story = StoryObj<typeof Color>;
+
+export const Colors: Story = {
+  render: () => {
+    return (
+      <Stack spacing="md">
+        <Color color="main">main</Color>
+        <Color color="sub">sub</Color>
+        <Color color="link">link</Color>
+        <Color color="linkSub">linkSub</Color>
+        <Color color="disabled">disabled</Color>
+        <Color color="blue">blue</Color>
+        <Color color="blueDarken">blueDarken</Color>
+        <Color color="pink">pink</Color>
+        <Color color="pinkDarken">pinkDarken</Color>
+        <Color color="orange">orange</Color>
+        <Color color="orangeDarken">orangeDarken</Color>
+        <Color color="purple">purple</Color>
+        <Color color="purpleDarken">purpleDarken</Color>
+        <Color color="green">green</Color>
+        <Color color="greenDarken">greenDarken</Color>
+        <Color color="red">red</Color>
+        <Color color="redDarken">redDarken</Color>
+        <Color color="black">black</Color>
+        <Color color="blackDarken">blackDarken</Color>
+        <Box pt="sm" pr="sm" pb="sm" pl="sm" backgroundColor="blackInverseDarken">
+          <Color color="white">white</Color>
+        </Box>
+      </Stack>
+    );
+  },
+};
+
+export const WithText: Story = {
+  render: () => {
+    return (
+      <Text type="body" size="lg" color="main">
+        一部だけ<Color color="pink">色</Color>を変えたい
+      </Text>
+    );
+  },
+};
+
+export const WithId: Story = {
+  render: (args) => {
+    return <Color {...args}>色</Color>;
+  },
+  args: {
+    id: "some-id",
+  },
+};
+
+export const WithCustomDataAttribute: Story = {
+  render: (args) => {
+    return <Color {...args}>色</Color>;
+  },
+  args: {
+    "data-test-id": "some-id",
+  },
+};

package/src/components/Color/Color.tsx

@@ -0,0 +1,28 @@
+import { type FC, PropsWithChildren } from "react";
+import styles from "./Color.module.css";
+import { CustomDataAttributeProps } from "../../types/attributes";
+import { TextColorVariant } from "../../types/style";
+import { colorVariable } from "../../utils/style";
+
+type Props = {
+  /**
+   * 文字色
+   * @default main
+   */
+  color?: TextColorVariant;
+  /**
+   * ネイティブ要素のid属性。ページで固有のIDを指定
+   */
+  id?: string;
+} & CustomDataAttributeProps;
+
+export const Color: FC<PropsWithChildren<Props>> = ({
+  color = "main",
+  children,
+  id,
+  ...otherProps
+}) => (
+  <span id={id} className={styles.color} style={{ ...colorVariable(color) }} {...otherProps}>
+    {children}
+  </span>
+);

package/src/components/Divider/Divider.module.css

@@ -0,0 +1,9 @@
+.divider {
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  height: 1px;
+  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
+  border: 0;
+  border-top: var(--border-width) solid var(--border-color);
+}

package/src/components/Divider/Divider.spec.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import { Divider } from "./Divider";
+
+describe("<Divider>", () => {
+  it("receives date attribute", async () => {
+    render(<Divider data-testid="divider" />);
+    const divider = screen.getByTestId("divider");
+
+    expect(divider).toBeInTheDocument();
+  });
+
+  it("receives max-width", async () => {
+    render(<Divider data-testid="divider" maxWidth="400px" />);
+    const divider = screen.getByTestId("divider");
+
+    expect(divider).toHaveStyle("--max-width: 400px");
+  });
+
+  it("receives min-width", async () => {
+    render(<Divider data-testid="divider" minWidth="400px" />);
+    const divider = screen.getByTestId("divider");
+
+    expect(divider).toHaveStyle("--min-width: 400px");
+  });
+
+  it("receives width", async () => {
+    render(<Divider data-testid="divider" width="400px" />);
+    const divider = screen.getByTestId("divider");
+
+    expect(divider).toHaveStyle("--width: 400px");
+  });
+
+  it("receives margins", async () => {
+    render(<Divider data-testid="divider" mt="xxs" mr="xs" mb="sm" ml="md" />);
+    const divider = screen.getByTestId("divider");
+
+    expect(divider).toHaveStyle("--margin-top: var(--size-spacing-xxs)");
+    expect(divider).toHaveStyle("--margin-right: var(--size-spacing-xs)");
+    expect(divider).toHaveStyle("--margin-bottom: var(--size-spacing-sm)");
+    expect(divider).toHaveStyle("--margin-left: var(--size-spacing-md)");
+  });
+});