コールアウトブロック

コールアウトブロックは、注目を集める必要のある内容を強調するために使用されます。主にアイコンと共に色付きの背景で表示され、視覚的に目立つようになっています。

データ構造

コールアウトブロックのノーションAPIデータ構造は以下の通りです：

{
  "type": "callout",
  "callout": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a callout",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a callout",
        "href": null
      }
    ],
    "icon": {
      "type": "emoji",
      "emoji": "💡"
    },
    "color": "gray_background"
  }
}

rich_text: Calloutのテキスト内容とスタイル情報を含む配列です。
icon: Calloutと共に表示されるアイコン情報です。これは絵文字か外部画像URLのいずれかになります。
color: Calloutの背景色を指定します。

Reactコンポーネント

Notionpressoでコールアウトブロックをレンダリングするコンポーネントは以下の通りです：

import React from "react";
import type { CalloutArgs } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";
import Icon from "./internal/icon";

type CalloutProps = {
  children?: React.ReactNode;
} & CalloutArgs;

const Callout: React.FC<CalloutProps> = ({ children, ...props }) => {
  const { callout } = props;

  return (
    <div
      className={`notion-block notion-callout ${getColorCss(callout.color)}`}
    >
      <div className="notion-callout-content">
        <div className="notion-callout-icon" aria-hidden="true">
          <Icon icon={callout.icon} />
        </div>
        <div className="notion-callout-text">
          <RichText props={callout.rich_text} />
        </div>
      </div>
      {children}
    </div>
  );
};

export default Callout;

使用例

コールアウトブロックを使用する例は以下の通りです：

import { Notion } from "@notionpresso/react";

function MyNotionPage({ blocks }) {
  return (
    <Notion>
      <Notion.Blocks blocks={blocks} />
    </Notion>
  );
}

ここでblocksは、Notion APIから受け取ったブロックデータの配列です。

アイコンの処理

コールアウトブロックのアイコンは、Iconコンポーネントを使用して処理されます。このコンポーネントは、絵文字と外部画像URLの両方をサポートしています。アイコンのタイプに応じて、適切なレンダリング方法が選択されます。

スタイリング

コールアウトブロックのスタイルは、以下のCSSクラスを使用してカスタマイズできます：

.notion-block: すべてのNotionブロックに適用されるデフォルトのスタイル
.notion-callout: コールアウトブロックの特定のスタイル
.notion-callout-content: コールアウトの内容のスタイル
.notion-callout-icon: コールアウトのアイコンのスタイル
.notion-callout-text: コールアウトのテキストのスタイル

追加のスタイリングが必要な場合は、これらのクラスを対象にCSSを記述するだけです。例えば：

.notion-callout {
  border-radius: 4px;
  padding: 16px;
  display: flex;
  align-items: center;
}

.notion-callout-icon {
  margin-right: 12px;
  font-size: 24px;
}

.notion-callout-text {
  flex: 1;
}

カラーの処理

コールアウトのcolor属性は、背景色を決定します。getColorCssユーティリティ関数を使用して、適切なCSSクラスを生成します。この関数は、Notionのカラー名をCSSクラスに変換します。

ネストのサポート

コールアウトブロックは、他のブロックを含むことができます。これは、childrenプロップを使用して処理されます。例えば、コールアウトの中にリストや他のテキストブロックを含むことができます。

注意点

コールアウトブロックは、重要な情報や警告を強調するために効果的です。ただし、過度の使用は、注意を分散させる可能性があるため、適切に使用する必要があります。
アイコンと背景色の組み合わせが、アクセシビリティ基準を満たしているかどうかを確認する必要があります。特に、テキストと背景の間に十分なコントラストがあることを確認する必要があります。
スクリーンリーダーを使用するユーザーのために、アイコンに適切な代替テキストを提供することが推奨されます。