Skip to content
fandhe-frontendcore v0.4.3
GitHub

Brand

fandhe-frontend-wireframe-ui のブランドロゴプレースホルダーです。正方形の枠の中に汎用抽象ブランドマークの線画(既定)を置き、実際のブランドロゴの配置イメージを示す非インタラクティブな部品です。API は brand(content, size) の 2 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。

視覚的な参照元は blocks.pm の Brand 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。

本部品は表示専用のため実在ブランドのロゴ・商標を模した SVG は一切含みません。既定表示は実在のブランドを想起させない抽象的なバッジ状の図形(六角形 + 中心円)のプレースホルダーです。

Demo

既定(汎用抽象ブランドマーク)

スロット差し替え(イニシャル)

A

スロット差し替え(別アイコン)

サイズ比較(Xs〜Xl)

引数表

引数型既定値説明
contentOption<Node>None省略可能なコンテンツスロット(Figma の Brand(swap) に相当)。None のときは既定の汎用抽象ブランドマーク(icon::brand)にフォールバックする。
sizeSizeSize::Mdサイズ段階(xs〜xl)。枠の寸法に反映される。

原案差分メモ

  • API は独自設計: docs/design/wireframe-ui-architecture.md §6・§11.4 の Figma プロパティ変換規約から独立設計しました。原案の Figma プロパティ(Size・Brand(swap))をそのまま Rust 引数へ転写したものではありません。
  • Brand(swap) は Option<Node> スロットへ変換: instance swap は crate::avatar と同じ Option<Node> アイコンスロット規約(§11.4)へ変換しました。
  • content: None は汎用抽象ブランドマークへフォールバック(Option<Node> スロット規約 §11.4 からの意図的な逸脱): crate::icon の Option<Node> アイコンスロット規約は「None ならスロット要素を出力しない」を原則としますが、本部品は crate::avatar と同じ理由(中身のない枠はワイヤーフレームとして配置意図が伝わらない)で、content が None のとき既定で汎用抽象ブランドマーク(icon::brand)を差し込みます。Some(node) を渡した場合はそのノードをそのまま子要素にします(イニシャルテキストや別アイコンへの差し替えが可能です)。
  • 実在ブランドのロゴ・商標は一切含まない: icon::brand は六角形の外形と中心円だけで構成した抽象的なバッジ状の図形で独自に描きました。特定の実在ブランドを想起させる形状・書体・色は使っていません。
  • サイズは共通 Size 5 段へ畳み込み: 他部品と同じ判断で、原案のサイズ軸を本クレート共通の Size(xs〜xl)へ畳み込んでいます。
  • 円形バリアントは持たない: 原案の Figma プロパティに円形フラグがないため、crate::avatar の circle: bool に相当する引数は追加していません。
  • <img> は出力しない: ルートは div とし、src/href/style は一切出力しません(同文書 §7 の非対話制約)。画像 URL・ロゴアセット URL を受け取る API も設けていません(外部リソース読み込みの経路を作らないため)。
  • スクリーンショット非掲載: docs/design/reference-screenshots/ への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。
  • 配色はグレースケール: 黒塗り二値ではなく --fw-wire-fill-subtle(背景)・--fw-wire-ink-muted(グリフ色)・--fw-wire-line(枠線)のトークンを使います(crate::avatar::AVATAR_CSS と同じ配色軸)。